2021-12-09 17:42:31 -05:00
<p>
2022-06-09 20:18:06 -04:00
<img src="https://assets.solidjs.com/banner?project=Library&type=core" alt="SolidJS" />
2021-12-09 17:42:31 -05:00
</p>
2020-12-21 23:54:35 -08:00
2022-12-17 22:51:51 -08:00
[](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)
2022-04-21 17:03:04 +00:00
[](https://coveralls.io/github/solidjs/solid?branch=main)
2022-04-22 13:50:34 -04:00
2022-04-21 17:03:04 +00:00
[](https://www.npmjs.com/package/solid-js)
[](https://www.npmjs.com/package/solid-js)
[](https://discord.com/invite/solidjs)
2022-04-22 14:26:29 +00:00
[](https://www.reddit.com/r/solidjs/)
2020-12-21 23:54:35 -08:00
2024-04-24 20:30:01 +02:00
* * [Website ](https://www.solidjs.com/ ) • [API Docs ](https://docs.solidjs.com/ ) • [Features Tutorial ](https://www.solidjs.com/tutorial/introduction_basics ) • [Playground ](https://playground.solidjs.com/?version=1.3.13#NobwRAdghgtgpmAXGGUCWEwBowBcCeADgsrgM4Ae2YZA9gK4BOAxiWGjIbY7gAQi9GcCABM4jXgF9eAM0a0YvADo1aAGzQiAtACsyAegDucAEYqA3EogcuPfr2ZCouOAGU0Ac2hqps+YpU6DW09CysrGXoIZlw0WgheAGEGCBdGAAoASn4rXgd4sj5gZhTcLF4yOFxkqNwAXV4AXgcnF3cvKDV0gAZMywT8iELeDEc4eFSm3iymgD4KqprU9JLamYBqXgBGPvCBoVwmBPTcvN4AHhN6XFx43gJiRpUrm-iVXnjEjWYAa0aQUZCCa4SSzU5nfirZaZSTgi76F63CBgga7CCwiBWISicTpGaNebnJZpXj6WblES0Zj0YEAOg8VQAompxsJcAAhfAASREJzAUEIhBUmTRYEkdSAA ) • [Discord ](https://discord.com/invite/solidjs )**
2022-04-22 04:00:35 +00:00
2023-05-31 07:21:44 +08:00
Solid is a declarative JavaScript library for creating user interfaces. Instead of using a Virtual DOM, it compiles its templates to real DOM nodes and updates them with fine-grained reactions. Declare your state and use it throughout your app, and when a piece of state changes, only the code that depends on it will rerun.
2022-04-22 14:26:29 +00:00
2023-04-02 11:06:10 -04:00
## At a Glance
``` tsx
import { createSignal } from "solid-js" ;
import { render } from "solid-js/web" ;
function Counter() {
const [ count , setCount ] = createSignal ( 0 ) ;
const doubleCount = ( ) = > count ( ) * 2 ;
2023-04-02 12:24:13 -04:00
console . log ( "The body of the function runs once..." ) ;
2023-04-02 11:06:10 -04:00
return (
< >
< button onClick = { ( ) = > setCount ( c = > c + 1 ) } >
{ doubleCount ( ) }
< / button >
< / >
) ;
}
render ( Counter , document . getElementById ( "app" ) ! ) ;
```
2023-04-02 12:24:13 -04:00
Try this code in our [playground ](https://playground.solidjs.com/anonymous/0c88df54-91b0-4c88-bd20-e962bde49725 )!
<details>
<summary>Explain this!</summary>
``` tsx
import { createSignal } from "solid-js" ;
import { render } from "solid-js/web" ;
// A component is just a function that returns a DOM node
function Counter() {
2026-01-24 00:45:49 +08:00
// Create a piece of reactive state, giving us an accessor, count(), and a setter, setCount()
2023-04-02 12:24:13 -04:00
const [ count , setCount ] = createSignal ( 0 ) ;
//To create derived state, just wrap an expression in a function
const doubleCount = ( ) = > count ( ) * 2 ;
console . log ( "The body of the function runs once..." ) ;
2023-04-02 14:04:18 -04:00
// JSX allows you to write HTML within your JavaScript function and include dynamic expressions using the { } syntax
2024-07-23 19:21:21 +01:00
// The only part of this that will ever rerender is the doubleCount() text.
2023-04-02 12:24:13 -04:00
return (
< >
< button onClick = { ( ) = > setCount ( c = > c + 1 ) } >
Increment : { doubleCount ( ) }
< / button >
< / >
) ;
}
// The render function mounts a component onto your page
render ( Counter , document . getElementById ( "app" ) ! ) ;
```
2023-04-02 14:04:18 -04:00
Solid compiles your JSX down to efficient real DOM updates. It uses the same reactive primitives (`createSignal` ) at runtime but making sure there's as little rerendering as possible. Here's what that looks like in this example:
2023-04-02 12:24:13 -04:00
``` js
import { template as _$template } from "solid-js/web" ;
import { delegateEvents as _$delegateEvents } from "solid-js/web" ;
import { insert as _$insert } from "solid-js/web" ;
//The compiler pulls out any static HTML
const _tmpl$ = /*#__PURE__*/ _$template ( ` <button>Increment: ` ) ;
import { createSignal , createEffect } from "solid-js" ;
import { render } from "solid-js/web" ;
function Counter ( ) {
const [ count , setCount ] = createSignal ( 0 ) ;
const doubleCount = ( ) => count ( ) * 2 ;
console . log ( "The body of the function runs once..." ) ;
return ( ( ) => {
//_el$ is a real DOM node!
const _el$ = _tmpl$ ( ) ;
_el$ . $$click = ( ) => setCount ( c => c + 1 ) ;
//This inserts the count as a child of the button in a way that allows count to update without rerendering the whole button
_$insert ( _el$ , doubleCount ) ;
return _el$ ;
} ) ( ) ;
}
render ( Counter , document . getElementById ( "app" ) ) ;
_$delegateEvents ( [ "click" ] ) ;
```
</details>
2023-04-02 11:06:10 -04:00
2022-04-22 13:50:34 -04:00
## Key Features
2022-06-09 20:18:06 -04:00
2022-04-22 14:06:50 -04:00
- Fine-grained updates to the real DOM
- Declarative data: model your state as a system with reactive primitives
2022-04-22 13:50:34 -04:00
- Render-once mental model: your components are regular JavaScript functions that run once to set up your view
- Automatic dependency tracking: accessing your reactive state subscribes to it
2022-05-10 13:57:25 -04:00
- [Small ](https://dev.to/this-is-learning/javascript-framework-todomvc-size-comparison-504f ) and [fast ](https://krausest.github.io/js-framework-benchmark/current.html )
2022-04-24 20:42:45 -04:00
- Simple: learn a few powerful concepts that can be reused, combined, and built on top of
2022-04-22 14:06:50 -04:00
- Provides modern framework features like JSX, fragments, Context, Portals, Suspense, streaming SSR, progressive hydration, Error Boundaries and concurrent rendering.
2022-04-22 16:02:04 -04:00
- Naturally debuggable: A `<div>` is a real div, so you can use your browser's devtools to inspect the rendering
2022-04-22 16:11:46 -04:00
- [Web component friendly ](https://github.com/solidjs/solid/tree/main/packages/solid-element#readme ) and can author custom elements
2022-04-22 13:50:34 -04:00
- Isomorphic: render your components on the client and the server
- Universal: write [custom renderers ](https://github.com/solidjs/solid/releases/tag/v1.2.0 ) to use Solid anywhere
- A growing community and ecosystem with active core team support
2022-05-10 13:43:20 -04:00
<details>
<summary>Quick Start</summary>
2022-04-24 20:53:12 -04:00
You can get started with a simple app by running the following in your terminal:
``` sh
> npx degit solidjs/templates/js my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm
```
Or for TypeScript:
``` sh
> npx degit solidjs/templates/ts my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm
```
This will create a minimal, client-rendered application powered by [Vite ](https://vitejs.dev/ ).
Or you can install the dependencies in your own setup. To use Solid with JSX (_recommended_), run:
``` sh
Solid 1.5 (#1176)
* new batching, fix #1001, fix #1062
* fix #1019, resource state
* pluggable storage on resource
* Fix createMutable to handle reactivity in case element is undefined
* Added tests
* better fixes, ssr spread improvements
* Add `has` trap for accurate `in` with stores and mutables (#1109)
* Add `has` trap for accurate `in` with stores and mutables
Fixes #1107
* Fix ?. typo
* Remove optional chaining ?.
* fix(types): fix mergeProps type when spreading array as params (#1028)
This fixes the return type of mergeProps when an array is spread as params: `mergeProps(...propsArray)`, `mergeProps(...propsArray, props)`, and `mergeProps(props1, ...propsArray, props2)`. Previously these calls would ignore the type of the array being spread and all props after the spread e.g.:
```ts
const merged = mergeProps({ a: 1 }, ...[{ b: 2 }], { c: 3 }); // { a: 1 }
```
- Allow mergeProps to be called with all manner of spread params and return the correct type.
- As a consequence of the above, mergeProps' type allows calling it with no params.
- Brought back `Simplify`, since it doesn't interfere with generics and improves readability of the result type.
- Simplified and added comments for component.ts type tests.
Additionally:
- Improved types when generic props are present.
Issues:
- This doesn't correctly type spreading multiple arrays however, since typescript doesn't allow two "rest" params: `someFn(...[1], ...["2"], 3)` is inferred as `T = [...(string | number)[], number]` and not `T = [...number[], ...string[], number]`. In this case the union of types in the array is merged into a single type, which may not be entirely accurate.
* Fix `Dynamic` types (#1116)
* Fix `Dynamic` types
* Fix `component` type
* Fix `DynamicProps`, `ComponentProps`; Add `ValidComponent`
* Fix `Dynamic` test for type fix
* Fix `Dynamic` test to use `id` instead of `title` for DOM compatibility
* Fix `component` to be required property
* fix #1112 fix built in functions on proxy failing pass through
* v1.5.0-beta.0
* cleanups on the server
* update and rework build system
* tweak turbo commands
* remove clean command
* update ci
* decrease dependency on symlink
* update lockfile
* more type issues
* fix build
* SSR performance improvement
* fix bug with ssr resolve
* bump
* Add build instructions to CONTRIBUTING (#1136)
* Add pnpm build instructions to CONTRIBUTING
* Fix Turbo link
* fix: add explicit extensions and exports fields
* errors on server while not flushed, many bug fixes
* feat(types): createResource improvements (#1130)
* feat(types): createResource improvements
- Add typable `refetching`/`refetch` with default type `unknown` for backwards compatibility.
- Remove unneeded generics.
- Refactor `createResource` parameters to reduce casting.
- Remove unneeded instances of casting, non-null assertations and `any`.
- Fix `onHydrated` type, removing `refetching`.
- Add `InitializedResource` types for overloads which define `initialValue`.
- Changed `Error` to return `never` instead of `undefined`, since reading resources in such a state throws, so the values will never be used.
- Updated docs slightly.
- Fixed a test slightly (type of an unused parameter from `string` to `unknown`).
Potential Issues:
- Adding the initialized types might slightly break userland functions. However adding them is necessary to differentiate `{ initialValue: undefined }` from omitting `initialValue`, and for cases where `T` includes `undefined` to be typed correctly.
- `store` should not need to accept `undefined` if `initialValue` is provided, but in order to make passing a generic `createSignal`-typed function work without an error, `init` and the type of the signal returned must be the same.
- In various places `undefined` can still appear if a resource errors and refetches. As such `mutate` and `store` also need to handle `undefined` correctly. This might break typing for existing `mutate` calls which are typed without `undefined`.
* test(types): add tests for createResource types
* refactor(types): fix and clean up createResource types
- Add `NoInfer` for options so that only the fetcher is used to infer the type of the resource
- Remove some unneeded casting
* feat(types): export initialized resource types
Co-authored-by: Ryan Carniato <ryansolid@gmail.com>
* simplify batching, reduce createComputed, fix #1122 enable transitions.
* bump
* remove computed from SuspenseList
* Remove computed from createProvider
* Remove a console.log (#1146)
* fixes to suspenselist
* useInitialValue on resources
* fix #1138 dialog type, fix #1147 untrack ref, fix #1151 untrack cleanup
* keyed control flow updates
* bump
* improve createSelector perf
* draft 1.5 changelog
* fix falsy check
* faster asset rendering
* children.toArray
* refactor(types): change `createStore` types for a clearer error message (#1157)
Specifically, this change targets these differences:
- Initializing a store with a generic type which is not restricted to `object` now shows `Argument of type 'T' is not assignable to parameter of type 'object | undefined'. Type 'T' is not assignable to type 'object'` instead of `Argument of type '[T]' is not assignable to parameter of type '{} extends T ? [store?: T | undefined, options?: { name?: string | undefined; } | undefined] : [store: object & T, options?: { name?: string | undefined; } | undefined]'`.
- Initializing a store with a non-generic, non-object type now shows that the expected parameter type is `object | undefined` instead of `never` (or `{} | undefiend` if trying to use `null`).
* `resource.value` and small tweaks to resources
* bump
* experimenting with nodenext
* fix
* delete resource.value, defer to further deliberation
* small naming tweaks
* bump
* update packages
* bump
* docs: add quotes to snippets (#1153)
* better option naming for resource
* add missing deps
* Update Readme (#1137)
* add missing type exports
* bump
* small updates
* untrack JSON.stringify to avoid reactive side-effects on serialization. (#1177)
* untrack JSON.stringify to avoid reactive side-effects on serialization.
* untrack JSON.stringify to avoid reactive side-effects on serialization.
* keep immdiately evaluated module code, below its indirect declared let dependencies.
Co-authored-by: Ryan Carniato <ryansolid@gmail.com>
Co-authored-by: Paolo Ricciuti <ricciutipaolo@gmail.com>
Co-authored-by: Erik Demaine <edemaine@mit.edu>
Co-authored-by: Xavier Loh <42372774+otonashixav@users.noreply.github.com>
Co-authored-by: Alexis H. Munsayac <alexis.munsayac@gmail.com>
Co-authored-by: modderme123 <modderme123@gmail.com>
Co-authored-by: Kirill Mironov <k.mironov@tinkoff.ru>
Co-authored-by: Milo <modderme123@users.noreply.github.com>
Co-authored-by: Seanghay Yath <seanghay.dev@gmail.com>
Co-authored-by: Mathieu Decaffmeyer <5883963+mathieuprog@users.noreply.github.com>
Co-authored-by: LiQuidProQuo <105608035+LiQuidProQuo@users.noreply.github.com>
2022-08-25 20:17:02 -07:00
> npm i -D babel-preset-solid
> npm i solid-js
2022-04-24 20:53:12 -04:00
```
The easiest way to get set up is to add `babel-preset-solid` to your `.babelrc` , babel config for webpack, or rollup configuration:
``` js
"presets" : [ "solid" ]
```
For TypeScript to work, remember to set your `.tsconfig` to handle Solid's JSX:
``` js
"compilerOptions" : {
"jsx" : "preserve" ,
"jsxImportSource" : "solid-js" ,
}
```
2022-05-10 13:43:20 -04:00
2022-06-09 20:18:06 -04:00
</details>
2022-04-24 20:53:12 -04:00
2022-04-22 14:26:29 +00:00
## Why Solid?
2022-04-24 20:53:12 -04:00
2022-04-22 04:00:35 +00:00
### Performant
2022-06-09 20:18:06 -04:00
2023-10-23 22:47:52 +08:00
Meticulously engineered for performance and with half a decade of research behind it, Solid's performance is almost indistinguishable from optimized vanilla JavaScript (See Solid on the [JS Framework Benchmark ](https://krausest.github.io/js-framework-benchmark/current.html )). Solid is [small ](https://bundlephobia.com/package/solid-js@1.3.15 ) and completely tree-shakable, and [fast ](https://levelup.gitconnected.com/how-we-wrote-the-fastest-javascript-ui-framework-again-db097ddd99b6 ) when rendering on the server, too. Whether you're writing a fully client-rendered SPA or a server-rendered app, your users see it faster than ever. ([Read more about Solid's performance ](https://dev.to/ryansolid/thinking-granular-how-is-solidjs-so-performant-4g37 ) from the library's creator.)
2022-04-22 04:00:35 +00:00
### Powerful
2022-06-09 20:18:06 -04:00
2022-04-22 14:26:29 +00:00
Solid is fully-featured with everything you can expect from a modern framework. Performant state management is built-in with Context and Stores: you don't have to reach for a third party library to manage global state (if you don't want to). With Resources, you can use data loaded from the server like any other piece of state and build a responsive UI for it thanks to Suspense and concurrent rendering. And when you're ready to move to the server, Solid has full SSR and serverless support, with streaming and progressive hydration to get to interactive as quickly as possible. (Check out our full [interactive features walkthrough ](https://www.solidjs.com/tutorial/introduction_basics ).)
2022-04-22 04:00:35 +00:00
### Pragmatic
2022-06-09 20:18:06 -04:00
2022-04-22 04:00:35 +00:00
Do more with less: use simple, composable primitives without hidden rules and gotchas. In Solid, components are just functions - rendering is determined purely by how your state is used - so you're free to organize your code how you like and you don't have to learn a new rendering system. Solid encourages patterns like declarative code and read-write segregation that help keep your project maintainable, but isn't opinionated enough to get in your way.
### Productive
2021-06-27 13:40:12 -07:00
2024-06-10 15:42:53 -04:00
Solid is built on established tools like JSX and TypeScript and integrates with the Vite ecosystem. Solid's bare-metal, minimal abstractions give you direct access to the DOM, making it easy to use your favorite native JavaScript libraries like D3. And the Solid ecosystem is growing fast, with [custom primitives ](https://github.com/solidjs-community/solid-primitives ), [component libraries ](https://kobalte.dev ), and build-time utilities that let you [write Solid code in new ways ](https://github.com/LXSMNSYC/solid-labels ).
2020-12-21 23:54:35 -08:00
2022-04-22 13:50:34 -04:00
## More
2020-12-21 23:54:35 -08:00
2025-10-27 22:02:49 +02:00
Check out our official [documentation ](https://docs.solidjs.com ) or browse some [examples ](https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md )
2021-09-21 11:22:13 -07:00
2020-12-21 23:54:35 -08:00
## Browser Support
2022-05-10 13:43:20 -04:00
SolidJS Core is committed to supporting the last 2 years of modern browsers including Firefox, Safari, Chrome and Edge (for desktop and mobile devices). We do not support IE or similar sunset browsers. For server environments, we support Node LTS and the latest Deno and Cloudflare Worker runtimes.
2020-12-21 23:54:35 -08:00
<img src="https://saucelabs.github.io/images/opensauce/powered-by-saucelabs-badge-gray.svg?sanitize=true" alt="Testing Powered By SauceLabs" width="300"/>
## Community
2022-04-22 13:45:06 +00:00
Come chat with us on [Discord ](https://discord.com/invite/solidjs )! Solid's creator and the rest of the core team are active there, and we're always looking for contributions.
2020-12-21 23:54:35 -08:00
### Contributors
2021-05-22 18:38:29 -04:00
<a href="https://github.com/solidjs/solid/graphs/contributors"><img src="https://opencollective.com/solid/contributors.svg?width=890&button=false" style="max-width:100%;"></a>
2020-12-21 23:54:35 -08:00
### Open Collective
Support us with a donation and help us continue our activities. [[Contribute ](https://opencollective.com/solid )]
<a href="https://opencollective.com/solid/backer/0/website" target="_blank"><img src="https://opencollective.com/solid/backer/0/avatar.svg"></a>
<a href="https://opencollective.com/solid/backer/1/website" target="_blank"><img src="https://opencollective.com/solid/backer/1/avatar.svg"></a>
<a href="https://opencollective.com/solid/backer/2/website" target="_blank"><img src="https://opencollective.com/solid/backer/2/avatar.svg"></a>
<a href="https://opencollective.com/solid/backer/3/website" target="_blank"><img src="https://opencollective.com/solid/backer/3/avatar.svg"></a>
<a href="https://opencollective.com/solid/backer/4/website" target="_blank"><img src="https://opencollective.com/solid/backer/4/avatar.svg"></a>
<a href="https://opencollective.com/solid/backer/5/website" target="_blank"><img src="https://opencollective.com/solid/backer/5/avatar.svg"></a>
<a href="https://opencollective.com/solid/backer/6/website" target="_blank"><img src="https://opencollective.com/solid/backer/6/avatar.svg"></a>
<a href="https://opencollective.com/solid/backer/7/website" target="_blank"><img src="https://opencollective.com/solid/backer/7/avatar.svg"></a>
<a href="https://opencollective.com/solid/backer/8/website" target="_blank"><img src="https://opencollective.com/solid/backer/8/avatar.svg"></a>
<a href="https://opencollective.com/solid/backer/9/website" target="_blank"><img src="https://opencollective.com/solid/backer/9/avatar.svg"></a>
<a href="https://opencollective.com/solid/backer/10/website" target="_blank"><img src="https://opencollective.com/solid/backer/10/avatar.svg"></a>
### Sponsors
Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor ](https://opencollective.com/solid#sponsor )]
<a href="https://opencollective.com/solid/sponsor/0/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/0/avatar.svg"></a>
<a href="https://opencollective.com/solid/sponsor/1/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/1/avatar.svg"></a>
<a href="https://opencollective.com/solid/sponsor/2/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/2/avatar.svg"></a>
<a href="https://opencollective.com/solid/sponsor/3/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/3/avatar.svg"></a>
<a href="https://opencollective.com/solid/sponsor/4/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/4/avatar.svg"></a>
<a href="https://opencollective.com/solid/sponsor/5/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/5/avatar.svg"></a>
<a href="https://opencollective.com/solid/sponsor/6/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/6/avatar.svg"></a>
<a href="https://opencollective.com/solid/sponsor/7/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/7/avatar.svg"></a>
<a href="https://opencollective.com/solid/sponsor/8/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/8/avatar.svg"></a>
<a href="https://opencollective.com/solid/sponsor/9/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/9/avatar.svg"></a>
<a href="https://opencollective.com/solid/sponsor/10/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/10/avatar.svg"></a>
2022-08-03 10:41:18 -04:00
<a href="https://opencollective.com/solid/sponsor/11/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/11/avatar.svg"></a>
<a href="https://opencollective.com/solid/sponsor/12/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/12/avatar.svg"></a>
