solid-js 1.8.16 → 1.8.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +223 -223
- package/dist/dev.cjs +1 -1
- package/dist/dev.js +1 -1
- package/dist/server.cjs +5 -10
- package/dist/server.js +5 -12
- package/dist/solid.cjs +1 -1
- package/dist/solid.js +1 -1
- package/h/dist/h.cjs +12 -1
- package/h/dist/h.js +15 -1
- package/h/jsx-runtime/types/jsx.d.ts +5 -0
- package/package.json +1 -1
- package/store/types/store.d.ts +1 -1
- package/types/jsx.d.ts +5 -0
- package/types/reactive/array.d.ts +2 -2
- package/types/reactive/observable.d.ts +1 -1
- package/types/reactive/signal.d.ts +22 -22
- package/types/render/Suspense.d.ts +2 -2
- package/types/render/flow.d.ts +6 -6
- package/types/server/rendering.d.ts +1 -1
- package/web/dist/dev.cjs +6 -3
- package/web/dist/dev.js +8 -2
- package/web/dist/server.cjs +3 -3
- package/web/dist/server.js +3 -3
- package/web/dist/web.cjs +6 -3
- package/web/dist/web.js +8 -2
- package/web/types/index.d.ts +2 -2
package/README.md
CHANGED
|
@@ -1,223 +1,223 @@
|
|
|
1
|
-
<p>
|
|
2
|
-
<img src="https://assets.solidjs.com/banner?project=Library&type=core" alt="SolidJS" />
|
|
3
|
-
</p>
|
|
4
|
-
|
|
5
|
-
[](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)
|
|
6
|
-
[](https://coveralls.io/github/solidjs/solid?branch=main)
|
|
7
|
-
|
|
8
|
-
[](https://www.npmjs.com/package/solid-js)
|
|
9
|
-
[](https://www.npmjs.com/package/solid-js)
|
|
10
|
-
[](https://discord.com/invite/solidjs)
|
|
11
|
-
[](https://www.reddit.com/r/solidjs/)
|
|
12
|
-
|
|
13
|
-
**[Website](https://www.solidjs.com/) • [API Docs](https://
|
|
14
|
-
|
|
15
|
-
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. Check out our [intro video](https://www.youtube.com/watch?v=J70HXl1KhWE&ab_channel=SolidJS) or read on!
|
|
16
|
-
|
|
17
|
-
## Key Features
|
|
18
|
-
|
|
19
|
-
- Fine-grained updates to the real DOM
|
|
20
|
-
- Declarative data: model your state as a system with reactive primitives
|
|
21
|
-
- Render-once mental model: your components are regular JavaScript functions that run once to set up your view
|
|
22
|
-
- Automatic dependency tracking: accessing your reactive state subscribes to it
|
|
23
|
-
- [Small](https://dev.to/this-is-learning/javascript-framework-todomvc-size-comparison-504f) and [fast](https://krausest.github.io/js-framework-benchmark/current.html)
|
|
24
|
-
- Simple: learn a few powerful concepts that can be reused, combined, and built on top of
|
|
25
|
-
- Provides modern framework features like JSX, fragments, Context, Portals, Suspense, streaming SSR, progressive hydration, Error Boundaries and concurrent rendering.
|
|
26
|
-
- Naturally debuggable: A `<div>` is a real div, so you can use your browser's devtools to inspect the rendering
|
|
27
|
-
- [Web component friendly](https://github.com/solidjs/solid/tree/main/packages/solid-element#readme) and can author custom elements
|
|
28
|
-
- Isomorphic: render your components on the client and the server
|
|
29
|
-
- Universal: write [custom renderers](https://github.com/solidjs/solid/releases/tag/v1.2.0) to use Solid anywhere
|
|
30
|
-
- A growing community and ecosystem with active core team support
|
|
31
|
-
|
|
32
|
-
<details>
|
|
33
|
-
|
|
34
|
-
<summary>Quick Start</summary>
|
|
35
|
-
|
|
36
|
-
You can get started with a simple app by running the following in your terminal:
|
|
37
|
-
|
|
38
|
-
```sh
|
|
39
|
-
> npx degit solidjs/templates/js my-app
|
|
40
|
-
> cd my-app
|
|
41
|
-
> npm i # or yarn or pnpm
|
|
42
|
-
> npm run dev # or yarn or pnpm
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
Or for TypeScript:
|
|
46
|
-
|
|
47
|
-
```sh
|
|
48
|
-
> npx degit solidjs/templates/ts my-app
|
|
49
|
-
> cd my-app
|
|
50
|
-
> npm i # or yarn or pnpm
|
|
51
|
-
> npm run dev # or yarn or pnpm
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
This will create a minimal, client-rendered application powered by [Vite](https://vitejs.dev/).
|
|
55
|
-
|
|
56
|
-
Or you can install the dependencies in your own setup. To use Solid with JSX (_recommended_), run:
|
|
57
|
-
|
|
58
|
-
```sh
|
|
59
|
-
> npm i -D babel-preset-solid
|
|
60
|
-
> npm i solid-js
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
The easiest way to get set up is to add `babel-preset-solid` to your `.babelrc`, babel config for webpack, or rollup configuration:
|
|
64
|
-
|
|
65
|
-
```js
|
|
66
|
-
"presets": ["solid"]
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
For TypeScript to work, remember to set your `.tsconfig` to handle Solid's JSX:
|
|
70
|
-
|
|
71
|
-
```js
|
|
72
|
-
"compilerOptions": {
|
|
73
|
-
"jsx": "preserve",
|
|
74
|
-
"jsxImportSource": "solid-js",
|
|
75
|
-
}
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
</details>
|
|
79
|
-
|
|
80
|
-
## Why Solid?
|
|
81
|
-
|
|
82
|
-
### Performant
|
|
83
|
-
|
|
84
|
-
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://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.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.)
|
|
85
|
-
|
|
86
|
-
### Powerful
|
|
87
|
-
|
|
88
|
-
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).)
|
|
89
|
-
|
|
90
|
-
### Pragmatic
|
|
91
|
-
|
|
92
|
-
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.
|
|
93
|
-
|
|
94
|
-
### Productive
|
|
95
|
-
|
|
96
|
-
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://hope-ui.com/), and build-time utilities that let you [write Solid code in new ways](https://github.com/LXSMNSYC/solid-labels).
|
|
97
|
-
|
|
98
|
-
<details>
|
|
99
|
-
<summary>Show Me!</summary>
|
|
100
|
-
|
|
101
|
-
```jsx
|
|
102
|
-
import { render } from "solid-js/web";
|
|
103
|
-
import { createSignal } from "solid-js";
|
|
104
|
-
|
|
105
|
-
// A component is just a function that (optionally) accepts properties and returns a DOM node
|
|
106
|
-
const Counter = props => {
|
|
107
|
-
// Create a piece of reactive state, giving us a accessor, count(), and a setter, setCount()
|
|
108
|
-
const [count, setCount] = createSignal(props.startingCount || 1);
|
|
109
|
-
|
|
110
|
-
// The increment function calls the setter
|
|
111
|
-
const increment = () => setCount(count() + 1);
|
|
112
|
-
|
|
113
|
-
console.log(
|
|
114
|
-
"The body of the function runs once, like you'd expect from calling any other function, so you only ever see this console log once."
|
|
115
|
-
);
|
|
116
|
-
|
|
117
|
-
// JSX allows us to write HTML within our JavaScript function and include dynamic expressions using the { } syntax
|
|
118
|
-
// The only part of this that will ever rerender is the count() text.
|
|
119
|
-
return (
|
|
120
|
-
<button type="button" onClick={increment}>
|
|
121
|
-
Increment {count()}
|
|
122
|
-
</button>
|
|
123
|
-
);
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
// The render function mounts a component onto your page
|
|
127
|
-
render(() => <Counter startingCount={2} />, document.getElementById("app"));
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
See it in action in our interactive [Playground](https://playground.solidjs.com/?hash=-894962706&version=1.3.13)!
|
|
131
|
-
|
|
132
|
-
Solid compiles our JSX down to efficient real DOM expressions updates, still using 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:
|
|
133
|
-
|
|
134
|
-
```js
|
|
135
|
-
import { render, createComponent, delegateEvents, insert, template } from "solid-js/web";
|
|
136
|
-
import { createSignal } from "solid-js";
|
|
137
|
-
|
|
138
|
-
const _tmpl$ = /*#__PURE__*/ template(`<button type="button">Increment </button>`, 2);
|
|
139
|
-
|
|
140
|
-
const Counter = props => {
|
|
141
|
-
const [count, setCount] = createSignal(props.startingCount || 1);
|
|
142
|
-
const increment = () => setCount(count() + 1);
|
|
143
|
-
|
|
144
|
-
console.log("The body of the function runs once . . .");
|
|
145
|
-
|
|
146
|
-
return (() => {
|
|
147
|
-
//_el$ is a real DOM node!
|
|
148
|
-
const _el$ = _tmpl$.cloneNode(true);
|
|
149
|
-
_el$.firstChild;
|
|
150
|
-
|
|
151
|
-
_el$.$$click = increment;
|
|
152
|
-
|
|
153
|
-
//This inserts the count as a child of the button in a way that allows count to update without rerendering the whole button
|
|
154
|
-
insert(_el$, count, null);
|
|
155
|
-
|
|
156
|
-
return _el$;
|
|
157
|
-
})();
|
|
158
|
-
};
|
|
159
|
-
|
|
160
|
-
render(
|
|
161
|
-
() =>
|
|
162
|
-
createComponent(Counter, {
|
|
163
|
-
startingCount: 2
|
|
164
|
-
}),
|
|
165
|
-
document.getElementById("app")
|
|
166
|
-
);
|
|
167
|
-
|
|
168
|
-
delegateEvents(["click"]);
|
|
169
|
-
```
|
|
170
|
-
|
|
171
|
-
</details>
|
|
172
|
-
|
|
173
|
-
## More
|
|
174
|
-
|
|
175
|
-
Check out our official [documentation](https://www.solidjs.com/guide) or browse some [examples](https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md)
|
|
176
|
-
|
|
177
|
-
## Browser Support
|
|
178
|
-
|
|
179
|
-
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.
|
|
180
|
-
|
|
181
|
-
<img src="https://saucelabs.github.io/images/opensauce/powered-by-saucelabs-badge-gray.svg?sanitize=true" alt="Testing Powered By SauceLabs" width="300"/>
|
|
182
|
-
|
|
183
|
-
## Community
|
|
184
|
-
|
|
185
|
-
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.
|
|
186
|
-
|
|
187
|
-
### Contributors
|
|
188
|
-
|
|
189
|
-
<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>
|
|
190
|
-
|
|
191
|
-
### Open Collective
|
|
192
|
-
|
|
193
|
-
Support us with a donation and help us continue our activities. [[Contribute](https://opencollective.com/solid)]
|
|
194
|
-
|
|
195
|
-
<a href="https://opencollective.com/solid/backer/0/website" target="_blank"><img src="https://opencollective.com/solid/backer/0/avatar.svg"></a>
|
|
196
|
-
<a href="https://opencollective.com/solid/backer/1/website" target="_blank"><img src="https://opencollective.com/solid/backer/1/avatar.svg"></a>
|
|
197
|
-
<a href="https://opencollective.com/solid/backer/2/website" target="_blank"><img src="https://opencollective.com/solid/backer/2/avatar.svg"></a>
|
|
198
|
-
<a href="https://opencollective.com/solid/backer/3/website" target="_blank"><img src="https://opencollective.com/solid/backer/3/avatar.svg"></a>
|
|
199
|
-
<a href="https://opencollective.com/solid/backer/4/website" target="_blank"><img src="https://opencollective.com/solid/backer/4/avatar.svg"></a>
|
|
200
|
-
<a href="https://opencollective.com/solid/backer/5/website" target="_blank"><img src="https://opencollective.com/solid/backer/5/avatar.svg"></a>
|
|
201
|
-
<a href="https://opencollective.com/solid/backer/6/website" target="_blank"><img src="https://opencollective.com/solid/backer/6/avatar.svg"></a>
|
|
202
|
-
<a href="https://opencollective.com/solid/backer/7/website" target="_blank"><img src="https://opencollective.com/solid/backer/7/avatar.svg"></a>
|
|
203
|
-
<a href="https://opencollective.com/solid/backer/8/website" target="_blank"><img src="https://opencollective.com/solid/backer/8/avatar.svg"></a>
|
|
204
|
-
<a href="https://opencollective.com/solid/backer/9/website" target="_blank"><img src="https://opencollective.com/solid/backer/9/avatar.svg"></a>
|
|
205
|
-
<a href="https://opencollective.com/solid/backer/10/website" target="_blank"><img src="https://opencollective.com/solid/backer/10/avatar.svg"></a>
|
|
206
|
-
|
|
207
|
-
### Sponsors
|
|
208
|
-
|
|
209
|
-
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)]
|
|
210
|
-
|
|
211
|
-
<a href="https://opencollective.com/solid/sponsor/0/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/0/avatar.svg"></a>
|
|
212
|
-
<a href="https://opencollective.com/solid/sponsor/1/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/1/avatar.svg"></a>
|
|
213
|
-
<a href="https://opencollective.com/solid/sponsor/2/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/2/avatar.svg"></a>
|
|
214
|
-
<a href="https://opencollective.com/solid/sponsor/3/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/3/avatar.svg"></a>
|
|
215
|
-
<a href="https://opencollective.com/solid/sponsor/4/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/4/avatar.svg"></a>
|
|
216
|
-
<a href="https://opencollective.com/solid/sponsor/5/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/5/avatar.svg"></a>
|
|
217
|
-
<a href="https://opencollective.com/solid/sponsor/6/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/6/avatar.svg"></a>
|
|
218
|
-
<a href="https://opencollective.com/solid/sponsor/7/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/7/avatar.svg"></a>
|
|
219
|
-
<a href="https://opencollective.com/solid/sponsor/8/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/8/avatar.svg"></a>
|
|
220
|
-
<a href="https://opencollective.com/solid/sponsor/9/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/9/avatar.svg"></a>
|
|
221
|
-
<a href="https://opencollective.com/solid/sponsor/10/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/10/avatar.svg"></a>
|
|
222
|
-
<a href="https://opencollective.com/solid/sponsor/11/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/11/avatar.svg"></a>
|
|
223
|
-
<a href="https://opencollective.com/solid/sponsor/12/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/12/avatar.svg"></a>
|
|
1
|
+
<p>
|
|
2
|
+
<img src="https://assets.solidjs.com/banner?project=Library&type=core" alt="SolidJS" />
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
[](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)
|
|
6
|
+
[](https://coveralls.io/github/solidjs/solid?branch=main)
|
|
7
|
+
|
|
8
|
+
[](https://www.npmjs.com/package/solid-js)
|
|
9
|
+
[](https://www.npmjs.com/package/solid-js)
|
|
10
|
+
[](https://discord.com/invite/solidjs)
|
|
11
|
+
[](https://www.reddit.com/r/solidjs/)
|
|
12
|
+
|
|
13
|
+
**[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)**
|
|
14
|
+
|
|
15
|
+
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. Check out our [intro video](https://www.youtube.com/watch?v=J70HXl1KhWE&ab_channel=SolidJS) or read on!
|
|
16
|
+
|
|
17
|
+
## Key Features
|
|
18
|
+
|
|
19
|
+
- Fine-grained updates to the real DOM
|
|
20
|
+
- Declarative data: model your state as a system with reactive primitives
|
|
21
|
+
- Render-once mental model: your components are regular JavaScript functions that run once to set up your view
|
|
22
|
+
- Automatic dependency tracking: accessing your reactive state subscribes to it
|
|
23
|
+
- [Small](https://dev.to/this-is-learning/javascript-framework-todomvc-size-comparison-504f) and [fast](https://krausest.github.io/js-framework-benchmark/current.html)
|
|
24
|
+
- Simple: learn a few powerful concepts that can be reused, combined, and built on top of
|
|
25
|
+
- Provides modern framework features like JSX, fragments, Context, Portals, Suspense, streaming SSR, progressive hydration, Error Boundaries and concurrent rendering.
|
|
26
|
+
- Naturally debuggable: A `<div>` is a real div, so you can use your browser's devtools to inspect the rendering
|
|
27
|
+
- [Web component friendly](https://github.com/solidjs/solid/tree/main/packages/solid-element#readme) and can author custom elements
|
|
28
|
+
- Isomorphic: render your components on the client and the server
|
|
29
|
+
- Universal: write [custom renderers](https://github.com/solidjs/solid/releases/tag/v1.2.0) to use Solid anywhere
|
|
30
|
+
- A growing community and ecosystem with active core team support
|
|
31
|
+
|
|
32
|
+
<details>
|
|
33
|
+
|
|
34
|
+
<summary>Quick Start</summary>
|
|
35
|
+
|
|
36
|
+
You can get started with a simple app by running the following in your terminal:
|
|
37
|
+
|
|
38
|
+
```sh
|
|
39
|
+
> npx degit solidjs/templates/js my-app
|
|
40
|
+
> cd my-app
|
|
41
|
+
> npm i # or yarn or pnpm
|
|
42
|
+
> npm run dev # or yarn or pnpm
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Or for TypeScript:
|
|
46
|
+
|
|
47
|
+
```sh
|
|
48
|
+
> npx degit solidjs/templates/ts my-app
|
|
49
|
+
> cd my-app
|
|
50
|
+
> npm i # or yarn or pnpm
|
|
51
|
+
> npm run dev # or yarn or pnpm
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
This will create a minimal, client-rendered application powered by [Vite](https://vitejs.dev/).
|
|
55
|
+
|
|
56
|
+
Or you can install the dependencies in your own setup. To use Solid with JSX (_recommended_), run:
|
|
57
|
+
|
|
58
|
+
```sh
|
|
59
|
+
> npm i -D babel-preset-solid
|
|
60
|
+
> npm i solid-js
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
The easiest way to get set up is to add `babel-preset-solid` to your `.babelrc`, babel config for webpack, or rollup configuration:
|
|
64
|
+
|
|
65
|
+
```js
|
|
66
|
+
"presets": ["solid"]
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
For TypeScript to work, remember to set your `.tsconfig` to handle Solid's JSX:
|
|
70
|
+
|
|
71
|
+
```js
|
|
72
|
+
"compilerOptions": {
|
|
73
|
+
"jsx": "preserve",
|
|
74
|
+
"jsxImportSource": "solid-js",
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
</details>
|
|
79
|
+
|
|
80
|
+
## Why Solid?
|
|
81
|
+
|
|
82
|
+
### Performant
|
|
83
|
+
|
|
84
|
+
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://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.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.)
|
|
85
|
+
|
|
86
|
+
### Powerful
|
|
87
|
+
|
|
88
|
+
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).)
|
|
89
|
+
|
|
90
|
+
### Pragmatic
|
|
91
|
+
|
|
92
|
+
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.
|
|
93
|
+
|
|
94
|
+
### Productive
|
|
95
|
+
|
|
96
|
+
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://hope-ui.com/), and build-time utilities that let you [write Solid code in new ways](https://github.com/LXSMNSYC/solid-labels).
|
|
97
|
+
|
|
98
|
+
<details>
|
|
99
|
+
<summary>Show Me!</summary>
|
|
100
|
+
|
|
101
|
+
```jsx
|
|
102
|
+
import { render } from "solid-js/web";
|
|
103
|
+
import { createSignal } from "solid-js";
|
|
104
|
+
|
|
105
|
+
// A component is just a function that (optionally) accepts properties and returns a DOM node
|
|
106
|
+
const Counter = props => {
|
|
107
|
+
// Create a piece of reactive state, giving us a accessor, count(), and a setter, setCount()
|
|
108
|
+
const [count, setCount] = createSignal(props.startingCount || 1);
|
|
109
|
+
|
|
110
|
+
// The increment function calls the setter
|
|
111
|
+
const increment = () => setCount(count() + 1);
|
|
112
|
+
|
|
113
|
+
console.log(
|
|
114
|
+
"The body of the function runs once, like you'd expect from calling any other function, so you only ever see this console log once."
|
|
115
|
+
);
|
|
116
|
+
|
|
117
|
+
// JSX allows us to write HTML within our JavaScript function and include dynamic expressions using the { } syntax
|
|
118
|
+
// The only part of this that will ever rerender is the count() text.
|
|
119
|
+
return (
|
|
120
|
+
<button type="button" onClick={increment}>
|
|
121
|
+
Increment {count()}
|
|
122
|
+
</button>
|
|
123
|
+
);
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
// The render function mounts a component onto your page
|
|
127
|
+
render(() => <Counter startingCount={2} />, document.getElementById("app"));
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
See it in action in our interactive [Playground](https://playground.solidjs.com/?hash=-894962706&version=1.3.13)!
|
|
131
|
+
|
|
132
|
+
Solid compiles our JSX down to efficient real DOM expressions updates, still using 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:
|
|
133
|
+
|
|
134
|
+
```js
|
|
135
|
+
import { render, createComponent, delegateEvents, insert, template } from "solid-js/web";
|
|
136
|
+
import { createSignal } from "solid-js";
|
|
137
|
+
|
|
138
|
+
const _tmpl$ = /*#__PURE__*/ template(`<button type="button">Increment </button>`, 2);
|
|
139
|
+
|
|
140
|
+
const Counter = props => {
|
|
141
|
+
const [count, setCount] = createSignal(props.startingCount || 1);
|
|
142
|
+
const increment = () => setCount(count() + 1);
|
|
143
|
+
|
|
144
|
+
console.log("The body of the function runs once . . .");
|
|
145
|
+
|
|
146
|
+
return (() => {
|
|
147
|
+
//_el$ is a real DOM node!
|
|
148
|
+
const _el$ = _tmpl$.cloneNode(true);
|
|
149
|
+
_el$.firstChild;
|
|
150
|
+
|
|
151
|
+
_el$.$$click = increment;
|
|
152
|
+
|
|
153
|
+
//This inserts the count as a child of the button in a way that allows count to update without rerendering the whole button
|
|
154
|
+
insert(_el$, count, null);
|
|
155
|
+
|
|
156
|
+
return _el$;
|
|
157
|
+
})();
|
|
158
|
+
};
|
|
159
|
+
|
|
160
|
+
render(
|
|
161
|
+
() =>
|
|
162
|
+
createComponent(Counter, {
|
|
163
|
+
startingCount: 2
|
|
164
|
+
}),
|
|
165
|
+
document.getElementById("app")
|
|
166
|
+
);
|
|
167
|
+
|
|
168
|
+
delegateEvents(["click"]);
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
</details>
|
|
172
|
+
|
|
173
|
+
## More
|
|
174
|
+
|
|
175
|
+
Check out our official [documentation](https://www.solidjs.com/guide) or browse some [examples](https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md)
|
|
176
|
+
|
|
177
|
+
## Browser Support
|
|
178
|
+
|
|
179
|
+
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.
|
|
180
|
+
|
|
181
|
+
<img src="https://saucelabs.github.io/images/opensauce/powered-by-saucelabs-badge-gray.svg?sanitize=true" alt="Testing Powered By SauceLabs" width="300"/>
|
|
182
|
+
|
|
183
|
+
## Community
|
|
184
|
+
|
|
185
|
+
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.
|
|
186
|
+
|
|
187
|
+
### Contributors
|
|
188
|
+
|
|
189
|
+
<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>
|
|
190
|
+
|
|
191
|
+
### Open Collective
|
|
192
|
+
|
|
193
|
+
Support us with a donation and help us continue our activities. [[Contribute](https://opencollective.com/solid)]
|
|
194
|
+
|
|
195
|
+
<a href="https://opencollective.com/solid/backer/0/website" target="_blank"><img src="https://opencollective.com/solid/backer/0/avatar.svg"></a>
|
|
196
|
+
<a href="https://opencollective.com/solid/backer/1/website" target="_blank"><img src="https://opencollective.com/solid/backer/1/avatar.svg"></a>
|
|
197
|
+
<a href="https://opencollective.com/solid/backer/2/website" target="_blank"><img src="https://opencollective.com/solid/backer/2/avatar.svg"></a>
|
|
198
|
+
<a href="https://opencollective.com/solid/backer/3/website" target="_blank"><img src="https://opencollective.com/solid/backer/3/avatar.svg"></a>
|
|
199
|
+
<a href="https://opencollective.com/solid/backer/4/website" target="_blank"><img src="https://opencollective.com/solid/backer/4/avatar.svg"></a>
|
|
200
|
+
<a href="https://opencollective.com/solid/backer/5/website" target="_blank"><img src="https://opencollective.com/solid/backer/5/avatar.svg"></a>
|
|
201
|
+
<a href="https://opencollective.com/solid/backer/6/website" target="_blank"><img src="https://opencollective.com/solid/backer/6/avatar.svg"></a>
|
|
202
|
+
<a href="https://opencollective.com/solid/backer/7/website" target="_blank"><img src="https://opencollective.com/solid/backer/7/avatar.svg"></a>
|
|
203
|
+
<a href="https://opencollective.com/solid/backer/8/website" target="_blank"><img src="https://opencollective.com/solid/backer/8/avatar.svg"></a>
|
|
204
|
+
<a href="https://opencollective.com/solid/backer/9/website" target="_blank"><img src="https://opencollective.com/solid/backer/9/avatar.svg"></a>
|
|
205
|
+
<a href="https://opencollective.com/solid/backer/10/website" target="_blank"><img src="https://opencollective.com/solid/backer/10/avatar.svg"></a>
|
|
206
|
+
|
|
207
|
+
### Sponsors
|
|
208
|
+
|
|
209
|
+
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)]
|
|
210
|
+
|
|
211
|
+
<a href="https://opencollective.com/solid/sponsor/0/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/0/avatar.svg"></a>
|
|
212
|
+
<a href="https://opencollective.com/solid/sponsor/1/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/1/avatar.svg"></a>
|
|
213
|
+
<a href="https://opencollective.com/solid/sponsor/2/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/2/avatar.svg"></a>
|
|
214
|
+
<a href="https://opencollective.com/solid/sponsor/3/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/3/avatar.svg"></a>
|
|
215
|
+
<a href="https://opencollective.com/solid/sponsor/4/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/4/avatar.svg"></a>
|
|
216
|
+
<a href="https://opencollective.com/solid/sponsor/5/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/5/avatar.svg"></a>
|
|
217
|
+
<a href="https://opencollective.com/solid/sponsor/6/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/6/avatar.svg"></a>
|
|
218
|
+
<a href="https://opencollective.com/solid/sponsor/7/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/7/avatar.svg"></a>
|
|
219
|
+
<a href="https://opencollective.com/solid/sponsor/8/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/8/avatar.svg"></a>
|
|
220
|
+
<a href="https://opencollective.com/solid/sponsor/9/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/9/avatar.svg"></a>
|
|
221
|
+
<a href="https://opencollective.com/solid/sponsor/10/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/10/avatar.svg"></a>
|
|
222
|
+
<a href="https://opencollective.com/solid/sponsor/11/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/11/avatar.svg"></a>
|
|
223
|
+
<a href="https://opencollective.com/solid/sponsor/12/website" target="_blank"><img src="https://opencollective.com/solid/sponsor/12/avatar.svg"></a>
|
package/dist/dev.cjs
CHANGED
|
@@ -355,7 +355,7 @@ function createResource(pSource, pFetcher, pOptions) {
|
|
|
355
355
|
}
|
|
356
356
|
pr = p;
|
|
357
357
|
if ("value" in p) {
|
|
358
|
-
if (p.status === "success") loadEnd(pr, p.value, undefined, lookup);else loadEnd(pr, undefined,
|
|
358
|
+
if (p.status === "success") loadEnd(pr, p.value, undefined, lookup);else loadEnd(pr, undefined, castError(p.value), lookup);
|
|
359
359
|
return p;
|
|
360
360
|
}
|
|
361
361
|
scheduled = true;
|
package/dist/dev.js
CHANGED
|
@@ -380,7 +380,7 @@ function createResource(pSource, pFetcher, pOptions) {
|
|
|
380
380
|
pr = p;
|
|
381
381
|
if ("value" in p) {
|
|
382
382
|
if (p.status === "success") loadEnd(pr, p.value, undefined, lookup);
|
|
383
|
-
else loadEnd(pr, undefined,
|
|
383
|
+
else loadEnd(pr, undefined, castError(p.value), lookup);
|
|
384
384
|
return p;
|
|
385
385
|
}
|
|
386
386
|
scheduled = true;
|
package/dist/server.cjs
CHANGED
|
@@ -307,8 +307,12 @@ function resolveSSRNode(node) {
|
|
|
307
307
|
if (t === "string") return node;
|
|
308
308
|
if (node == null || t === "boolean") return "";
|
|
309
309
|
if (Array.isArray(node)) {
|
|
310
|
+
let prev = {};
|
|
310
311
|
let mapped = "";
|
|
311
|
-
for (let i = 0, len = node.length; i < len; i++)
|
|
312
|
+
for (let i = 0, len = node.length; i < len; i++) {
|
|
313
|
+
if (typeof prev !== "object" && typeof node[i] !== "object") mapped += `<!--!$-->`;
|
|
314
|
+
mapped += resolveSSRNode(prev = node[i]);
|
|
315
|
+
}
|
|
312
316
|
return mapped;
|
|
313
317
|
}
|
|
314
318
|
if (t === "object") return node.t;
|
|
@@ -451,7 +455,6 @@ function ErrorBoundary(props) {
|
|
|
451
455
|
};
|
|
452
456
|
}
|
|
453
457
|
const SuspenseContext = createContext();
|
|
454
|
-
let resourceContext = null;
|
|
455
458
|
function createResource(source, fetcher, options = {}) {
|
|
456
459
|
if (arguments.length === 2) {
|
|
457
460
|
if (typeof fetcher === "object") {
|
|
@@ -478,7 +481,6 @@ function createResource(source, fetcher, options = {}) {
|
|
|
478
481
|
}
|
|
479
482
|
const read = () => {
|
|
480
483
|
if (error) throw error;
|
|
481
|
-
if (resourceContext && p) resourceContext.push(p);
|
|
482
484
|
const resolved = options.ssrLoadFrom !== "initial" && sharedConfig.context.async && "data" in sharedConfig.context.resources[id];
|
|
483
485
|
if (!resolved && read.loading) {
|
|
484
486
|
const ctx = useContext(SuspenseContext);
|
|
@@ -504,14 +506,7 @@ function createResource(source, fetcher, options = {}) {
|
|
|
504
506
|
value = ctx.resources[id].data;
|
|
505
507
|
return;
|
|
506
508
|
}
|
|
507
|
-
resourceContext = [];
|
|
508
509
|
const lookup = typeof source === "function" ? source() : source;
|
|
509
|
-
if (resourceContext.length) {
|
|
510
|
-
p = Promise.all(resourceContext).then(() => fetcher(source(), {
|
|
511
|
-
value
|
|
512
|
-
}));
|
|
513
|
-
}
|
|
514
|
-
resourceContext = null;
|
|
515
510
|
if (!p) {
|
|
516
511
|
if (lookup == null || lookup === false) return;
|
|
517
512
|
p = fetcher(lookup, {
|
package/dist/server.js
CHANGED
|
@@ -316,8 +316,12 @@ function resolveSSRNode(node) {
|
|
|
316
316
|
if (t === "string") return node;
|
|
317
317
|
if (node == null || t === "boolean") return "";
|
|
318
318
|
if (Array.isArray(node)) {
|
|
319
|
+
let prev = {};
|
|
319
320
|
let mapped = "";
|
|
320
|
-
for (let i = 0, len = node.length; i < len; i++)
|
|
321
|
+
for (let i = 0, len = node.length; i < len; i++) {
|
|
322
|
+
if (typeof prev !== "object" && typeof node[i] !== "object") mapped += `<!--!$-->`;
|
|
323
|
+
mapped += resolveSSRNode((prev = node[i]));
|
|
324
|
+
}
|
|
321
325
|
return mapped;
|
|
322
326
|
}
|
|
323
327
|
if (t === "object") return node.t;
|
|
@@ -469,7 +473,6 @@ function ErrorBoundary(props) {
|
|
|
469
473
|
};
|
|
470
474
|
}
|
|
471
475
|
const SuspenseContext = createContext();
|
|
472
|
-
let resourceContext = null;
|
|
473
476
|
function createResource(source, fetcher, options = {}) {
|
|
474
477
|
if (arguments.length === 2) {
|
|
475
478
|
if (typeof fetcher === "object") {
|
|
@@ -497,7 +500,6 @@ function createResource(source, fetcher, options = {}) {
|
|
|
497
500
|
}
|
|
498
501
|
const read = () => {
|
|
499
502
|
if (error) throw error;
|
|
500
|
-
if (resourceContext && p) resourceContext.push(p);
|
|
501
503
|
const resolved =
|
|
502
504
|
options.ssrLoadFrom !== "initial" &&
|
|
503
505
|
sharedConfig.context.async &&
|
|
@@ -526,16 +528,7 @@ function createResource(source, fetcher, options = {}) {
|
|
|
526
528
|
value = ctx.resources[id].data;
|
|
527
529
|
return;
|
|
528
530
|
}
|
|
529
|
-
resourceContext = [];
|
|
530
531
|
const lookup = typeof source === "function" ? source() : source;
|
|
531
|
-
if (resourceContext.length) {
|
|
532
|
-
p = Promise.all(resourceContext).then(() =>
|
|
533
|
-
fetcher(source(), {
|
|
534
|
-
value
|
|
535
|
-
})
|
|
536
|
-
);
|
|
537
|
-
}
|
|
538
|
-
resourceContext = null;
|
|
539
532
|
if (!p) {
|
|
540
533
|
if (lookup == null || lookup === false) return;
|
|
541
534
|
p = fetcher(lookup, {
|
package/dist/solid.cjs
CHANGED
|
@@ -337,7 +337,7 @@ function createResource(pSource, pFetcher, pOptions) {
|
|
|
337
337
|
}
|
|
338
338
|
pr = p;
|
|
339
339
|
if ("value" in p) {
|
|
340
|
-
if (p.status === "success") loadEnd(pr, p.value, undefined, lookup);else loadEnd(pr, undefined,
|
|
340
|
+
if (p.status === "success") loadEnd(pr, p.value, undefined, lookup);else loadEnd(pr, undefined, castError(p.value), lookup);
|
|
341
341
|
return p;
|
|
342
342
|
}
|
|
343
343
|
scheduled = true;
|
package/dist/solid.js
CHANGED
|
@@ -358,7 +358,7 @@ function createResource(pSource, pFetcher, pOptions) {
|
|
|
358
358
|
pr = p;
|
|
359
359
|
if ("value" in p) {
|
|
360
360
|
if (p.status === "success") loadEnd(pr, p.value, undefined, lookup);
|
|
361
|
-
else loadEnd(pr, undefined,
|
|
361
|
+
else loadEnd(pr, undefined, castError(p.value), lookup);
|
|
362
362
|
return p;
|
|
363
363
|
}
|
|
364
364
|
scheduled = true;
|
package/h/dist/h.cjs
CHANGED
|
@@ -7,12 +7,14 @@ function createHyperScript(r) {
|
|
|
7
7
|
function h() {
|
|
8
8
|
let args = [].slice.call(arguments),
|
|
9
9
|
e,
|
|
10
|
+
classes = [],
|
|
10
11
|
multiExpression = false;
|
|
11
12
|
while (Array.isArray(args[0])) args = args[0];
|
|
12
13
|
if (args[0][$ELEMENT]) args.unshift(h.Fragment);
|
|
13
14
|
typeof args[0] === "string" && detectMultiExpression(args);
|
|
14
15
|
const ret = () => {
|
|
15
16
|
while (args.length) item(args.shift());
|
|
17
|
+
if (e instanceof Element && classes.length) e.classList.add(...classes);
|
|
16
18
|
return e;
|
|
17
19
|
};
|
|
18
20
|
ret[$ELEMENT] = true;
|
|
@@ -31,6 +33,15 @@ function createHyperScript(r) {
|
|
|
31
33
|
let dynamic = false;
|
|
32
34
|
const d = Object.getOwnPropertyDescriptors(l);
|
|
33
35
|
for (const k in d) {
|
|
36
|
+
if (k === "class" && classes.length !== 0) {
|
|
37
|
+
const fixedClasses = classes.join(" "),
|
|
38
|
+
value = typeof d["class"].value === "function" ? () => fixedClasses + " " + d["class"].value() : fixedClasses + " " + l["class"];
|
|
39
|
+
Object.defineProperty(l, "class", {
|
|
40
|
+
...d[k],
|
|
41
|
+
value
|
|
42
|
+
});
|
|
43
|
+
classes = [];
|
|
44
|
+
}
|
|
34
45
|
if (k !== "ref" && k.slice(0, 2) !== "on" && typeof d[k].value === "function") {
|
|
35
46
|
r.dynamicProperty(l, k);
|
|
36
47
|
dynamic = true;
|
|
@@ -74,7 +85,7 @@ function createHyperScript(r) {
|
|
|
74
85
|
const v = m[i],
|
|
75
86
|
s = v.substring(1, v.length);
|
|
76
87
|
if (!v) continue;
|
|
77
|
-
if (!e) e = r.SVGElements.has(v) ? document.createElementNS("http://www.w3.org/2000/svg", v) : document.createElement(v);else if (v[0] === ".")
|
|
88
|
+
if (!e) e = r.SVGElements.has(v) ? document.createElementNS("http://www.w3.org/2000/svg", v) : document.createElement(v);else if (v[0] === ".") classes.push(s);else if (v[0] === "#") e.setAttribute("id", s);
|
|
78
89
|
}
|
|
79
90
|
}
|
|
80
91
|
function detectMultiExpression(list) {
|