solid-js 1.8.17 → 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 +0 -9
- package/dist/server.js +0 -11
- 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 +4 -1
- package/web/dist/dev.js +4 -1
- package/web/dist/server.cjs +3 -3
- package/web/dist/server.js +3 -3
- package/web/dist/web.cjs +4 -1
- package/web/dist/web.js +4 -1
- 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
|
@@ -455,7 +455,6 @@ function ErrorBoundary(props) {
|
|
|
455
455
|
};
|
|
456
456
|
}
|
|
457
457
|
const SuspenseContext = createContext();
|
|
458
|
-
let resourceContext = null;
|
|
459
458
|
function createResource(source, fetcher, options = {}) {
|
|
460
459
|
if (arguments.length === 2) {
|
|
461
460
|
if (typeof fetcher === "object") {
|
|
@@ -482,7 +481,6 @@ function createResource(source, fetcher, options = {}) {
|
|
|
482
481
|
}
|
|
483
482
|
const read = () => {
|
|
484
483
|
if (error) throw error;
|
|
485
|
-
if (resourceContext && p) resourceContext.push(p);
|
|
486
484
|
const resolved = options.ssrLoadFrom !== "initial" && sharedConfig.context.async && "data" in sharedConfig.context.resources[id];
|
|
487
485
|
if (!resolved && read.loading) {
|
|
488
486
|
const ctx = useContext(SuspenseContext);
|
|
@@ -508,14 +506,7 @@ function createResource(source, fetcher, options = {}) {
|
|
|
508
506
|
value = ctx.resources[id].data;
|
|
509
507
|
return;
|
|
510
508
|
}
|
|
511
|
-
resourceContext = [];
|
|
512
509
|
const lookup = typeof source === "function" ? source() : source;
|
|
513
|
-
if (resourceContext.length) {
|
|
514
|
-
p = Promise.all(resourceContext).then(() => fetcher(source(), {
|
|
515
|
-
value
|
|
516
|
-
}));
|
|
517
|
-
}
|
|
518
|
-
resourceContext = null;
|
|
519
510
|
if (!p) {
|
|
520
511
|
if (lookup == null || lookup === false) return;
|
|
521
512
|
p = fetcher(lookup, {
|
package/dist/server.js
CHANGED
|
@@ -473,7 +473,6 @@ function ErrorBoundary(props) {
|
|
|
473
473
|
};
|
|
474
474
|
}
|
|
475
475
|
const SuspenseContext = createContext();
|
|
476
|
-
let resourceContext = null;
|
|
477
476
|
function createResource(source, fetcher, options = {}) {
|
|
478
477
|
if (arguments.length === 2) {
|
|
479
478
|
if (typeof fetcher === "object") {
|
|
@@ -501,7 +500,6 @@ function createResource(source, fetcher, options = {}) {
|
|
|
501
500
|
}
|
|
502
501
|
const read = () => {
|
|
503
502
|
if (error) throw error;
|
|
504
|
-
if (resourceContext && p) resourceContext.push(p);
|
|
505
503
|
const resolved =
|
|
506
504
|
options.ssrLoadFrom !== "initial" &&
|
|
507
505
|
sharedConfig.context.async &&
|
|
@@ -530,16 +528,7 @@ function createResource(source, fetcher, options = {}) {
|
|
|
530
528
|
value = ctx.resources[id].data;
|
|
531
529
|
return;
|
|
532
530
|
}
|
|
533
|
-
resourceContext = [];
|
|
534
531
|
const lookup = typeof source === "function" ? source() : source;
|
|
535
|
-
if (resourceContext.length) {
|
|
536
|
-
p = Promise.all(resourceContext).then(() =>
|
|
537
|
-
fetcher(source(), {
|
|
538
|
-
value
|
|
539
|
-
})
|
|
540
|
-
);
|
|
541
|
-
}
|
|
542
|
-
resourceContext = null;
|
|
543
532
|
if (!p) {
|
|
544
533
|
if (lookup == null || lookup === false) return;
|
|
545
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) {
|
package/h/dist/h.js
CHANGED
|
@@ -12,12 +12,14 @@ function createHyperScript(r) {
|
|
|
12
12
|
function h() {
|
|
13
13
|
let args = [].slice.call(arguments),
|
|
14
14
|
e,
|
|
15
|
+
classes = [],
|
|
15
16
|
multiExpression = false;
|
|
16
17
|
while (Array.isArray(args[0])) args = args[0];
|
|
17
18
|
if (args[0][$ELEMENT]) args.unshift(h.Fragment);
|
|
18
19
|
typeof args[0] === "string" && detectMultiExpression(args);
|
|
19
20
|
const ret = () => {
|
|
20
21
|
while (args.length) item(args.shift());
|
|
22
|
+
if (e instanceof Element && classes.length) e.classList.add(...classes);
|
|
21
23
|
return e;
|
|
22
24
|
};
|
|
23
25
|
ret[$ELEMENT] = true;
|
|
@@ -43,6 +45,18 @@ function createHyperScript(r) {
|
|
|
43
45
|
let dynamic = false;
|
|
44
46
|
const d = Object.getOwnPropertyDescriptors(l);
|
|
45
47
|
for (const k in d) {
|
|
48
|
+
if (k === "class" && classes.length !== 0) {
|
|
49
|
+
const fixedClasses = classes.join(" "),
|
|
50
|
+
value =
|
|
51
|
+
typeof d["class"].value === "function"
|
|
52
|
+
? () => fixedClasses + " " + d["class"].value()
|
|
53
|
+
: fixedClasses + " " + l["class"];
|
|
54
|
+
Object.defineProperty(l, "class", {
|
|
55
|
+
...d[k],
|
|
56
|
+
value
|
|
57
|
+
});
|
|
58
|
+
classes = [];
|
|
59
|
+
}
|
|
46
60
|
if (k !== "ref" && k.slice(0, 2) !== "on" && typeof d[k].value === "function") {
|
|
47
61
|
r.dynamicProperty(l, k);
|
|
48
62
|
dynamic = true;
|
|
@@ -97,7 +111,7 @@ function createHyperScript(r) {
|
|
|
97
111
|
e = r.SVGElements.has(v)
|
|
98
112
|
? document.createElementNS("http://www.w3.org/2000/svg", v)
|
|
99
113
|
: document.createElement(v);
|
|
100
|
-
else if (v[0] === ".")
|
|
114
|
+
else if (v[0] === ".") classes.push(s);
|
|
101
115
|
else if (v[0] === "#") e.setAttribute("id", s);
|
|
102
116
|
}
|
|
103
117
|
}
|
|
@@ -155,6 +155,7 @@ export namespace JSX {
|
|
|
155
155
|
onAnimationStart?: EventHandlerUnion<T, AnimationEvent>;
|
|
156
156
|
onAuxClick?: EventHandlerUnion<T, MouseEvent>;
|
|
157
157
|
onBeforeInput?: EventHandlerUnion<T, InputEvent>;
|
|
158
|
+
onBeforeToggle?: EventHandlerUnion<T, ToggleEvent>;
|
|
158
159
|
onBlur?: EventHandlerUnion<T, FocusEvent>;
|
|
159
160
|
onCanPlay?: EventHandlerUnion<T, Event>;
|
|
160
161
|
onCanPlayThrough?: EventHandlerUnion<T, Event>;
|
|
@@ -220,6 +221,7 @@ export namespace JSX {
|
|
|
220
221
|
>;
|
|
221
222
|
onSuspend?: EventHandlerUnion<T, Event>;
|
|
222
223
|
onTimeUpdate?: EventHandlerUnion<T, Event>;
|
|
224
|
+
onToggle?: EventHandlerUnion<T, ToggleEvent>;
|
|
223
225
|
onTouchCancel?: EventHandlerUnion<T, TouchEvent>;
|
|
224
226
|
onTouchEnd?: EventHandlerUnion<T, TouchEvent>;
|
|
225
227
|
onTouchMove?: EventHandlerUnion<T, TouchEvent>;
|
|
@@ -242,6 +244,7 @@ export namespace JSX {
|
|
|
242
244
|
onanimationstart?: EventHandlerUnion<T, AnimationEvent>;
|
|
243
245
|
onauxclick?: EventHandlerUnion<T, MouseEvent>;
|
|
244
246
|
onbeforeinput?: EventHandlerUnion<T, InputEvent>;
|
|
247
|
+
onbeforetoggle?: EventHandlerUnion<T, ToggleEvent>;
|
|
245
248
|
onblur?: EventHandlerUnion<T, FocusEvent>;
|
|
246
249
|
oncanplay?: EventHandlerUnion<T, Event>;
|
|
247
250
|
oncanplaythrough?: EventHandlerUnion<T, Event>;
|
|
@@ -307,6 +310,7 @@ export namespace JSX {
|
|
|
307
310
|
>;
|
|
308
311
|
onsuspend?: EventHandlerUnion<T, Event>;
|
|
309
312
|
ontimeupdate?: EventHandlerUnion<T, Event>;
|
|
313
|
+
ontoggle?: EventHandlerUnion<T, ToggleEvent>;
|
|
310
314
|
ontouchcancel?: EventHandlerUnion<T, TouchEvent>;
|
|
311
315
|
ontouchend?: EventHandlerUnion<T, TouchEvent>;
|
|
312
316
|
ontouchmove?: EventHandlerUnion<T, TouchEvent>;
|
|
@@ -1820,6 +1824,7 @@ export namespace JSX {
|
|
|
1820
1824
|
contentScriptType?: FunctionMaybe<string>;
|
|
1821
1825
|
contentStyleType?: FunctionMaybe<string>;
|
|
1822
1826
|
xmlns?: FunctionMaybe<string>;
|
|
1827
|
+
"xmlns:xlink"?: FunctionMaybe<string>;
|
|
1823
1828
|
}
|
|
1824
1829
|
interface SwitchSVGAttributes<T>
|
|
1825
1830
|
extends ContainerElementSVGAttributes<T>,
|
package/package.json
CHANGED
package/store/types/store.d.ts
CHANGED
|
@@ -243,7 +243,7 @@ export interface SetStoreFunction<T> {
|
|
|
243
243
|
/**
|
|
244
244
|
* Creates a reactive store that can be read through a proxy object and written with a setter function
|
|
245
245
|
*
|
|
246
|
-
* @description https://
|
|
246
|
+
* @description https://docs.solidjs.com/reference/store-utilities/create-store
|
|
247
247
|
*/
|
|
248
248
|
export declare function createStore<T extends object = {}>(
|
|
249
249
|
...[store, options]: {} extends T
|
package/types/jsx.d.ts
CHANGED
|
@@ -221,6 +221,7 @@ export namespace JSX {
|
|
|
221
221
|
onAnimationStart?: EventHandlerUnion<T, AnimationEvent>;
|
|
222
222
|
onAuxClick?: EventHandlerUnion<T, MouseEvent>;
|
|
223
223
|
onBeforeInput?: InputEventHandlerUnion<T, InputEvent>;
|
|
224
|
+
onBeforeToggle?: EventHandlerUnion<T, ToggleEvent>;
|
|
224
225
|
onBlur?: FocusEventHandlerUnion<T, FocusEvent>;
|
|
225
226
|
onCanPlay?: EventHandlerUnion<T, Event>;
|
|
226
227
|
onCanPlayThrough?: EventHandlerUnion<T, Event>;
|
|
@@ -286,6 +287,7 @@ export namespace JSX {
|
|
|
286
287
|
>;
|
|
287
288
|
onSuspend?: EventHandlerUnion<T, Event>;
|
|
288
289
|
onTimeUpdate?: EventHandlerUnion<T, Event>;
|
|
290
|
+
onToggle?: EventHandlerUnion<T, ToggleEvent>;
|
|
289
291
|
onTouchCancel?: EventHandlerUnion<T, TouchEvent>;
|
|
290
292
|
onTouchEnd?: EventHandlerUnion<T, TouchEvent>;
|
|
291
293
|
onTouchMove?: EventHandlerUnion<T, TouchEvent>;
|
|
@@ -308,6 +310,7 @@ export namespace JSX {
|
|
|
308
310
|
onanimationstart?: EventHandlerUnion<T, AnimationEvent>;
|
|
309
311
|
onauxclick?: EventHandlerUnion<T, MouseEvent>;
|
|
310
312
|
onbeforeinput?: InputEventHandlerUnion<T, InputEvent>;
|
|
313
|
+
onbeforetoggle?: EventHandlerUnion<T, ToggleEvent>;
|
|
311
314
|
onblur?: FocusEventHandlerUnion<T, FocusEvent>;
|
|
312
315
|
oncanplay?: EventHandlerUnion<T, Event>;
|
|
313
316
|
oncanplaythrough?: EventHandlerUnion<T, Event>;
|
|
@@ -373,6 +376,7 @@ export namespace JSX {
|
|
|
373
376
|
>;
|
|
374
377
|
onsuspend?: EventHandlerUnion<T, Event>;
|
|
375
378
|
ontimeupdate?: EventHandlerUnion<T, Event>;
|
|
379
|
+
ontoggle?: EventHandlerUnion<T, ToggleEvent>;
|
|
376
380
|
ontouchcancel?: EventHandlerUnion<T, TouchEvent>;
|
|
377
381
|
ontouchend?: EventHandlerUnion<T, TouchEvent>;
|
|
378
382
|
ontouchmove?: EventHandlerUnion<T, TouchEvent>;
|
|
@@ -1897,6 +1901,7 @@ export namespace JSX {
|
|
|
1897
1901
|
contentScriptType?: string;
|
|
1898
1902
|
contentStyleType?: string;
|
|
1899
1903
|
xmlns?: string;
|
|
1904
|
+
"xmlns:xlink"?: string;
|
|
1900
1905
|
}
|
|
1901
1906
|
interface SwitchSVGAttributes<T>
|
|
1902
1907
|
extends ContainerElementSVGAttributes<T>,
|
|
@@ -27,7 +27,7 @@ SOFTWARE.
|
|
|
27
27
|
*
|
|
28
28
|
* similar to `Array.prototype.map`, but gets the index as accessor, transforms only values that changed and returns an accessor and reactively tracks changes to the list.
|
|
29
29
|
*
|
|
30
|
-
* @description https://
|
|
30
|
+
* @description https://docs.solidjs.com/reference/reactive-utilities/map-array
|
|
31
31
|
*/
|
|
32
32
|
export declare function mapArray<T, U>(
|
|
33
33
|
list: Accessor<readonly T[] | undefined | null | false>,
|
|
@@ -41,7 +41,7 @@ export declare function mapArray<T, U>(
|
|
|
41
41
|
*
|
|
42
42
|
* similar to `Array.prototype.map`, but gets the value as an accessor, transforms only changed items of the original arrays anew and returns an accessor.
|
|
43
43
|
*
|
|
44
|
-
* @description https://
|
|
44
|
+
* @description https://docs.solidjs.com/reference/reactive-utilities/index-array
|
|
45
45
|
*/
|
|
46
46
|
export declare function indexArray<T, U>(
|
|
47
47
|
list: Accessor<readonly T[] | undefined | null | false>,
|
|
@@ -25,7 +25,7 @@ export type ObservableObserver<T> =
|
|
|
25
25
|
* const obsv$ = from(observable(s));
|
|
26
26
|
* obsv$.subscribe((v) => console.log(v));
|
|
27
27
|
* ```
|
|
28
|
-
* description https://
|
|
28
|
+
* description https://docs.solidjs.com/reference/reactive-utilities/observable
|
|
29
29
|
*/
|
|
30
30
|
export declare function observable<T>(input: Accessor<T>): Observable<T>;
|
|
31
31
|
export declare function from<T>(
|
|
@@ -96,7 +96,7 @@ export type RootFunction<T> = (dispose: () => void) => T;
|
|
|
96
96
|
* @param detachedOwner optional reactive context to bind the root to
|
|
97
97
|
* @returns the output of `fn`.
|
|
98
98
|
*
|
|
99
|
-
* @description https://
|
|
99
|
+
* @description https://docs.solidjs.com/reference/reactive-utilities/create-root
|
|
100
100
|
*/
|
|
101
101
|
export declare function createRoot<T>(fn: RootFunction<T>, detachedOwner?: typeof Owner): T;
|
|
102
102
|
export type Accessor<T> = () => T;
|
|
@@ -133,7 +133,7 @@ export interface SignalOptions<T> extends MemoOptions<T> {
|
|
|
133
133
|
* setCount(count => count + 1);
|
|
134
134
|
* ```
|
|
135
135
|
*
|
|
136
|
-
* @description https://
|
|
136
|
+
* @description https://docs.solidjs.com/reference/basic-reactivity/create-signal
|
|
137
137
|
*/
|
|
138
138
|
export declare function createSignal<T>(): Signal<T | undefined>;
|
|
139
139
|
export declare function createSignal<T>(value: T, options?: SignalOptions<T>): Signal<T>;
|
|
@@ -156,7 +156,7 @@ export type EffectFunction<Prev, Next extends Prev = Prev> = (v: Prev) => Next;
|
|
|
156
156
|
* @param value an optional initial value for the computation; if set, fn will never receive undefined as first argument
|
|
157
157
|
* @param options allows to set a name in dev mode for debugging purposes
|
|
158
158
|
*
|
|
159
|
-
* @description https://
|
|
159
|
+
* @description https://docs.solidjs.com/reference/secondary-primitives/create-computed
|
|
160
160
|
*/
|
|
161
161
|
export declare function createComputed<Next>(
|
|
162
162
|
fn: EffectFunction<undefined | NoInfer<Next>, Next>
|
|
@@ -179,7 +179,7 @@ export declare function createComputed<Next, Init = Next>(
|
|
|
179
179
|
* @param value an optional initial value for the computation; if set, fn will never receive undefined as first argument
|
|
180
180
|
* @param options allows to set a name in dev mode for debugging purposes
|
|
181
181
|
*
|
|
182
|
-
* @description https://
|
|
182
|
+
* @description https://docs.solidjs.com/reference/secondary-primitives/create-render-effect
|
|
183
183
|
*/
|
|
184
184
|
export declare function createRenderEffect<Next>(
|
|
185
185
|
fn: EffectFunction<undefined | NoInfer<Next>, Next>
|
|
@@ -202,7 +202,7 @@ export declare function createRenderEffect<Next, Init = Next>(
|
|
|
202
202
|
* @param value an optional initial value for the computation; if set, fn will never receive undefined as first argument
|
|
203
203
|
* @param options allows to set a name in dev mode for debugging purposes
|
|
204
204
|
*
|
|
205
|
-
* @description https://
|
|
205
|
+
* @description https://docs.solidjs.com/reference/basic-reactivity/create-effect
|
|
206
206
|
*/
|
|
207
207
|
export declare function createEffect<Next>(
|
|
208
208
|
fn: EffectFunction<undefined | NoInfer<Next>, Next>
|
|
@@ -225,7 +225,7 @@ export declare function createEffect<Next, Init = Next>(
|
|
|
225
225
|
* @param invalidated a function that is called when tracked function is invalidated.
|
|
226
226
|
* @param options allows to set a name in dev mode for debugging purposes
|
|
227
227
|
*
|
|
228
|
-
* @description https://
|
|
228
|
+
* @description https://docs.solidjs.com/reference/secondary-primitives/create-reaction
|
|
229
229
|
*/
|
|
230
230
|
export declare function createReaction(
|
|
231
231
|
onInvalidate: () => void,
|
|
@@ -251,7 +251,7 @@ export interface MemoOptions<T> extends EffectOptions {
|
|
|
251
251
|
* @param value an optional initial value for the computation; if set, fn will never receive undefined as first argument
|
|
252
252
|
* @param options allows to set a name in dev mode for debugging purposes and use a custom comparison function in equals
|
|
253
253
|
*
|
|
254
|
-
* @description https://
|
|
254
|
+
* @description https://docs.solidjs.com/reference/basic-reactivity/create-memo
|
|
255
255
|
*/
|
|
256
256
|
export declare function createMemo<Next extends Prev, Prev = Next>(
|
|
257
257
|
fn: EffectFunction<undefined | NoInfer<Prev>, Next>
|
|
@@ -358,7 +358,7 @@ export type InitializedResourceReturn<T, R = unknown> = [
|
|
|
358
358
|
* * `mutate` allows to manually overwrite the resource without calling the fetcher
|
|
359
359
|
* * `refetch` will re-run the fetcher without changing the source, and if called with a value, that value will be passed to the fetcher via the `refetching` property on the fetcher's second parameter
|
|
360
360
|
*
|
|
361
|
-
* @description https://
|
|
361
|
+
* @description https://docs.solidjs.com/reference/basic-reactivity/create-resource
|
|
362
362
|
*/
|
|
363
363
|
export declare function createResource<T, R = unknown>(
|
|
364
364
|
fetcher: ResourceFetcher<true, T, R>,
|
|
@@ -394,7 +394,7 @@ export interface DeferredOptions<T> {
|
|
|
394
394
|
* @param fn a function that receives its previous or the initial value, if set, and returns a new value used to react on a computation
|
|
395
395
|
* @param options allows to set the timeout in milliseconds, use a custom comparison function and set a name in dev mode for debugging purposes
|
|
396
396
|
*
|
|
397
|
-
* @description https://
|
|
397
|
+
* @description https://docs.solidjs.com/reference/secondary-primitives/create-deferred
|
|
398
398
|
*/
|
|
399
399
|
export declare function createDeferred<T>(
|
|
400
400
|
source: Accessor<T>,
|
|
@@ -423,7 +423,7 @@ export type EqualityCheckerFunction<T, U> = (a: U, b: T) => boolean;
|
|
|
423
423
|
*
|
|
424
424
|
* This makes the operation O(2) instead of O(n).
|
|
425
425
|
*
|
|
426
|
-
* @description https://
|
|
426
|
+
* @description https://docs.solidjs.com/reference/secondary-primitives/create-selector
|
|
427
427
|
*/
|
|
428
428
|
export declare function createSelector<T, U = T>(
|
|
429
429
|
source: Accessor<T>,
|
|
@@ -435,7 +435,7 @@ export declare function createSelector<T, U = T>(
|
|
|
435
435
|
* @param fn wraps the reactive updates that should be batched
|
|
436
436
|
* @returns the return value from `fn`
|
|
437
437
|
*
|
|
438
|
-
* @description https://
|
|
438
|
+
* @description https://docs.solidjs.com/reference/reactive-utilities/batch
|
|
439
439
|
*/
|
|
440
440
|
export declare function batch<T>(fn: Accessor<T>): T;
|
|
441
441
|
/**
|
|
@@ -443,7 +443,7 @@ export declare function batch<T>(fn: Accessor<T>): T;
|
|
|
443
443
|
* @param fn the scope that is out of the tracking context
|
|
444
444
|
* @returns the return value of `fn`
|
|
445
445
|
*
|
|
446
|
-
* @description https://
|
|
446
|
+
* @description https://docs.solidjs.com/reference/reactive-utilities/untrack
|
|
447
447
|
*/
|
|
448
448
|
export declare function untrack<T>(fn: Accessor<T>): T;
|
|
449
449
|
/** @deprecated */
|
|
@@ -494,7 +494,7 @@ export interface OnOptions {
|
|
|
494
494
|
* });
|
|
495
495
|
* ```
|
|
496
496
|
*
|
|
497
|
-
* @description https://
|
|
497
|
+
* @description https://docs.solidjs.com/reference/jsx-attributes/on_
|
|
498
498
|
*/
|
|
499
499
|
export declare function on<S, Next extends Prev, Prev = Next>(
|
|
500
500
|
deps: AccessorArray<S> | Accessor<S>,
|
|
@@ -516,7 +516,7 @@ export declare function on<S, Next extends Prev, Prev = Next>(
|
|
|
516
516
|
* Runs an effect only after initial render on mount
|
|
517
517
|
* @param fn an effect that should run only once on mount
|
|
518
518
|
*
|
|
519
|
-
* @description https://
|
|
519
|
+
* @description https://docs.solidjs.com/reference/lifecycle/on-mount
|
|
520
520
|
*/
|
|
521
521
|
export declare function onMount(fn: () => void): void;
|
|
522
522
|
/**
|
|
@@ -525,7 +525,7 @@ export declare function onMount(fn: () => void): void;
|
|
|
525
525
|
*
|
|
526
526
|
* @returns the same {@link fn} function that was passed in
|
|
527
527
|
*
|
|
528
|
-
* @description https://
|
|
528
|
+
* @description https://docs.solidjs.com/reference/lifecycle/on-cleanup
|
|
529
529
|
*/
|
|
530
530
|
export declare function onCleanup<T extends () => any>(fn: T): T;
|
|
531
531
|
/**
|
|
@@ -535,7 +535,7 @@ export declare function onCleanup<T extends () => any>(fn: T): T;
|
|
|
535
535
|
*
|
|
536
536
|
* * If the error is thrown again inside the error handler, it will trigger the next available parent handler
|
|
537
537
|
*
|
|
538
|
-
* @description https://
|
|
538
|
+
* @description https://docs.solidjs.com/reference/reactive-utilities/catch-error
|
|
539
539
|
*/
|
|
540
540
|
export declare function catchError<T>(fn: () => T, handler: (err: Error) => void): T | undefined;
|
|
541
541
|
export declare function getListener(): Computation<any, any> | null;
|
|
@@ -547,7 +547,7 @@ export declare function enableScheduling(scheduler?: typeof requestCallback): vo
|
|
|
547
547
|
* export function startTransition(fn: () => void) => Promise<void>
|
|
548
548
|
* ```
|
|
549
549
|
*
|
|
550
|
-
* @description https://
|
|
550
|
+
* @description https://docs.solidjs.com/reference/reactive-utilities/start-transition
|
|
551
551
|
*/
|
|
552
552
|
export declare function startTransition(fn: () => unknown): Promise<void>;
|
|
553
553
|
export type Transition = [Accessor<boolean>, (fn: () => void) => Promise<void>];
|
|
@@ -559,7 +559,7 @@ export type Transition = [Accessor<boolean>, (fn: () => void) => Promise<void>];
|
|
|
559
559
|
* ];
|
|
560
560
|
* @returns a tuple; first value is an accessor if the transition is pending and a callback to start the transition
|
|
561
561
|
*
|
|
562
|
-
* @description https://
|
|
562
|
+
* @description https://docs.solidjs.com/reference/reactive-utilities/use-transition
|
|
563
563
|
*/
|
|
564
564
|
export declare function useTransition(): Transition;
|
|
565
565
|
export declare function resumeEffects(e: Computation<any>[]): void;
|
|
@@ -595,7 +595,7 @@ export interface Context<T> {
|
|
|
595
595
|
* @param options allows to set a name in dev mode for debugging purposes
|
|
596
596
|
* @returns The context that contains the Provider Component and that can be used with `useContext`
|
|
597
597
|
*
|
|
598
|
-
* @description https://
|
|
598
|
+
* @description https://docs.solidjs.com/reference/component-apis/create-context
|
|
599
599
|
*/
|
|
600
600
|
export declare function createContext<T>(
|
|
601
601
|
defaultValue?: undefined,
|
|
@@ -608,7 +608,7 @@ export declare function createContext<T>(defaultValue: T, options?: EffectOption
|
|
|
608
608
|
* @param context Context object made by `createContext`
|
|
609
609
|
* @returns the current or `defaultValue`, if present
|
|
610
610
|
*
|
|
611
|
-
* @description https://
|
|
611
|
+
* @description https://docs.solidjs.com/reference/component-apis/use-context
|
|
612
612
|
*/
|
|
613
613
|
export declare function useContext<T>(context: Context<T>): T;
|
|
614
614
|
export type ResolvedJSXElement = Exclude<JSX.Element, JSX.ArrayElement>;
|
|
@@ -622,7 +622,7 @@ export type ChildrenReturn = Accessor<ResolvedChildren> & {
|
|
|
622
622
|
* @param fn an accessor for the children
|
|
623
623
|
* @returns a accessor of the same children, but resolved
|
|
624
624
|
*
|
|
625
|
-
* @description https://
|
|
625
|
+
* @description https://docs.solidjs.com/reference/component-apis/children
|
|
626
626
|
*/
|
|
627
627
|
export declare function children(fn: Accessor<JSX.Element>): ChildrenReturn;
|
|
628
628
|
export type SuspenseContextType = {
|
|
@@ -656,7 +656,7 @@ export declare function writeSignal(
|
|
|
656
656
|
*
|
|
657
657
|
* * If the error is thrown again inside the error handler, it will trigger the next available parent handler
|
|
658
658
|
*
|
|
659
|
-
* @description https://www.solidjs.com/docs/latest/api#onerror
|
|
659
|
+
* @description https://www.solidjs.com/docs/latest/api#onerror | https://docs.solidjs.com/reference/reactive-utilities/catch-error
|
|
660
660
|
*/
|
|
661
661
|
export declare function onError(fn: (err: Error) => void): void;
|
|
662
662
|
export {};
|
|
@@ -2,7 +2,7 @@ import type { JSX } from "../jsx.js";
|
|
|
2
2
|
/**
|
|
3
3
|
* **[experimental]** Controls the order in which suspended content is rendered
|
|
4
4
|
*
|
|
5
|
-
* @description https://
|
|
5
|
+
* @description https://docs.solidjs.com/reference/components/suspense-list
|
|
6
6
|
*/
|
|
7
7
|
export declare function SuspenseList(props: {
|
|
8
8
|
children: JSX.Element;
|
|
@@ -18,7 +18,7 @@ export declare function SuspenseList(props: {
|
|
|
18
18
|
* <AsyncComponent />
|
|
19
19
|
* </Suspense>
|
|
20
20
|
* ```
|
|
21
|
-
* @description https://
|
|
21
|
+
* @description https://docs.solidjs.com/reference/components/suspense
|
|
22
22
|
*/
|
|
23
23
|
export declare function Suspense(props: {
|
|
24
24
|
fallback?: JSX.Element;
|
package/types/render/flow.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ import type { JSX } from "../jsx.js";
|
|
|
11
11
|
* ```
|
|
12
12
|
* If you have a list with fixed indices and changing values, consider using `<Index>` instead.
|
|
13
13
|
*
|
|
14
|
-
* @description https://
|
|
14
|
+
* @description https://docs.solidjs.com/reference/components/for
|
|
15
15
|
*/
|
|
16
16
|
export declare function For<T extends readonly any[], U extends JSX.Element>(props: {
|
|
17
17
|
each: T | undefined | null | false;
|
|
@@ -29,7 +29,7 @@ export declare function For<T extends readonly any[], U extends JSX.Element>(pro
|
|
|
29
29
|
* ```
|
|
30
30
|
* If you have a list with changing indices, better use `<For>`.
|
|
31
31
|
*
|
|
32
|
-
* @description https://
|
|
32
|
+
* @description https://docs.solidjs.com/reference/components/index
|
|
33
33
|
*/
|
|
34
34
|
export declare function Index<T extends readonly any[], U extends JSX.Element>(props: {
|
|
35
35
|
each: T | undefined | null | false;
|
|
@@ -39,7 +39,7 @@ export declare function Index<T extends readonly any[], U extends JSX.Element>(p
|
|
|
39
39
|
type RequiredParameter<T> = T extends () => unknown ? never : T;
|
|
40
40
|
/**
|
|
41
41
|
* Conditionally render its children or an optional fallback component
|
|
42
|
-
* @description https://
|
|
42
|
+
* @description https://docs.solidjs.com/reference/components/show
|
|
43
43
|
*/
|
|
44
44
|
export declare function Show<
|
|
45
45
|
T,
|
|
@@ -71,7 +71,7 @@ export declare function Show<
|
|
|
71
71
|
* </Match>
|
|
72
72
|
* </Switch>
|
|
73
73
|
* ```
|
|
74
|
-
* @description https://
|
|
74
|
+
* @description https://docs.solidjs.com/reference/components/switch-and-match
|
|
75
75
|
*/
|
|
76
76
|
export declare function Switch(props: {
|
|
77
77
|
fallback?: JSX.Element;
|
|
@@ -89,7 +89,7 @@ export type MatchProps<T> = {
|
|
|
89
89
|
* <Content/>
|
|
90
90
|
* </Match>
|
|
91
91
|
* ```
|
|
92
|
-
* @description https://
|
|
92
|
+
* @description https://docs.solidjs.com/reference/components/switch-and-match
|
|
93
93
|
*/
|
|
94
94
|
export declare function Match<
|
|
95
95
|
T,
|
|
@@ -121,7 +121,7 @@ export declare function resetErrorBoundaries(): void;
|
|
|
121
121
|
* ```
|
|
122
122
|
* Errors thrown from the fallback can be caught by a parent ErrorBoundary
|
|
123
123
|
*
|
|
124
|
-
* @description https://
|
|
124
|
+
* @description https://docs.solidjs.com/reference/components/error-boundary
|
|
125
125
|
*/
|
|
126
126
|
export declare function ErrorBoundary(props: {
|
|
127
127
|
fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element);
|
|
@@ -91,7 +91,7 @@ export declare function Index<T>(props: {
|
|
|
91
91
|
}): string | any[] | undefined;
|
|
92
92
|
/**
|
|
93
93
|
* Conditionally render its children or an optional fallback component
|
|
94
|
-
* @description https://
|
|
94
|
+
* @description https://docs.solidjs.com/reference/components/show
|
|
95
95
|
*/
|
|
96
96
|
export declare function Show<T>(props: {
|
|
97
97
|
when: T | undefined | null | false;
|
package/web/dist/dev.cjs
CHANGED
|
@@ -419,7 +419,10 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
|
|
|
419
419
|
parent = multi && current[0] && current[0].parentNode || parent;
|
|
420
420
|
if (t === "string" || t === "number") {
|
|
421
421
|
if (hydrating) return current;
|
|
422
|
-
if (t === "number")
|
|
422
|
+
if (t === "number") {
|
|
423
|
+
value = value.toString();
|
|
424
|
+
if (value === current) return current;
|
|
425
|
+
}
|
|
423
426
|
if (multi) {
|
|
424
427
|
let node = current[0];
|
|
425
428
|
if (node && node.nodeType === 3) {
|
package/web/dist/dev.js
CHANGED
|
@@ -890,7 +890,10 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
|
|
|
890
890
|
parent = (multi && current[0] && current[0].parentNode) || parent;
|
|
891
891
|
if (t === "string" || t === "number") {
|
|
892
892
|
if (hydrating) return current;
|
|
893
|
-
if (t === "number")
|
|
893
|
+
if (t === "number") {
|
|
894
|
+
value = value.toString();
|
|
895
|
+
if (value === current) return current;
|
|
896
|
+
}
|
|
894
897
|
if (multi) {
|
|
895
898
|
let node = current[0];
|
|
896
899
|
if (node && node.nodeType === 3) {
|
package/web/dist/server.cjs
CHANGED
|
@@ -383,7 +383,7 @@ function ssrElement(tag, props, children, needsId) {
|
|
|
383
383
|
} else if (value == undefined || prop === "ref" || prop.slice(0, 2) === "on") {
|
|
384
384
|
continue;
|
|
385
385
|
} else {
|
|
386
|
-
result += `${Aliases[prop] || prop}="${escape(value, true)}"`;
|
|
386
|
+
result += `${Aliases[prop] || escape(prop)}="${escape(value, true)}"`;
|
|
387
387
|
}
|
|
388
388
|
if (i !== keys.length - 1) result += " ";
|
|
389
389
|
}
|
|
@@ -598,13 +598,13 @@ function ssrSpread(props, isSVG, skipChildren) {
|
|
|
598
598
|
let n;
|
|
599
599
|
result += `class="${(n = props.class) ? n + " " : ""}${(n = props.className) ? n + " " : ""}${ssrClassList(props.classList)}"`;
|
|
600
600
|
classResolved = true;
|
|
601
|
-
} else if (
|
|
601
|
+
} else if (prop !== "value" && Properties.has(prop)) {
|
|
602
602
|
if (value) result += prop;else continue;
|
|
603
603
|
} else if (value == undefined || prop === "ref" || prop.slice(0, 2) === "on" || prop.slice(0, 5) === "prop:") {
|
|
604
604
|
continue;
|
|
605
605
|
} else {
|
|
606
606
|
if (prop.slice(0, 5) === "attr:") prop = prop.slice(5);
|
|
607
|
-
result += `${Aliases[prop] || prop}="${escape(value, true)}"`;
|
|
607
|
+
result += `${Aliases[prop] || escape(prop)}="${escape(value, true)}"`;
|
|
608
608
|
}
|
|
609
609
|
if (i !== keys.length - 1) result += " ";
|
|
610
610
|
}
|
package/web/dist/server.js
CHANGED
|
@@ -447,7 +447,7 @@ function ssrElement(tag, props, children, needsId) {
|
|
|
447
447
|
} else if (value == undefined || prop === "ref" || prop.slice(0, 2) === "on") {
|
|
448
448
|
continue;
|
|
449
449
|
} else {
|
|
450
|
-
result += `${Aliases[prop] || prop}="${escape(value, true)}"`;
|
|
450
|
+
result += `${Aliases[prop] || escape(prop)}="${escape(value, true)}"`;
|
|
451
451
|
}
|
|
452
452
|
if (i !== keys.length - 1) result += " ";
|
|
453
453
|
}
|
|
@@ -669,7 +669,7 @@ function ssrSpread(props, isSVG, skipChildren) {
|
|
|
669
669
|
(n = props.className) ? n + " " : ""
|
|
670
670
|
}${ssrClassList(props.classList)}"`;
|
|
671
671
|
classResolved = true;
|
|
672
|
-
} else if (
|
|
672
|
+
} else if (prop !== "value" && Properties.has(prop)) {
|
|
673
673
|
if (value) result += prop;
|
|
674
674
|
else continue;
|
|
675
675
|
} else if (
|
|
@@ -681,7 +681,7 @@ function ssrSpread(props, isSVG, skipChildren) {
|
|
|
681
681
|
continue;
|
|
682
682
|
} else {
|
|
683
683
|
if (prop.slice(0, 5) === "attr:") prop = prop.slice(5);
|
|
684
|
-
result += `${Aliases[prop] || prop}="${escape(value, true)}"`;
|
|
684
|
+
result += `${Aliases[prop] || escape(prop)}="${escape(value, true)}"`;
|
|
685
685
|
}
|
|
686
686
|
if (i !== keys.length - 1) result += " ";
|
|
687
687
|
}
|
package/web/dist/web.cjs
CHANGED
|
@@ -414,7 +414,10 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
|
|
|
414
414
|
parent = multi && current[0] && current[0].parentNode || parent;
|
|
415
415
|
if (t === "string" || t === "number") {
|
|
416
416
|
if (hydrating) return current;
|
|
417
|
-
if (t === "number")
|
|
417
|
+
if (t === "number") {
|
|
418
|
+
value = value.toString();
|
|
419
|
+
if (value === current) return current;
|
|
420
|
+
}
|
|
418
421
|
if (multi) {
|
|
419
422
|
let node = current[0];
|
|
420
423
|
if (node && node.nodeType === 3) {
|
package/web/dist/web.js
CHANGED
|
@@ -878,7 +878,10 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
|
|
|
878
878
|
parent = (multi && current[0] && current[0].parentNode) || parent;
|
|
879
879
|
if (t === "string" || t === "number") {
|
|
880
880
|
if (hydrating) return current;
|
|
881
|
-
if (t === "number")
|
|
881
|
+
if (t === "number") {
|
|
882
|
+
value = value.toString();
|
|
883
|
+
if (value === current) return current;
|
|
884
|
+
}
|
|
882
885
|
if (multi) {
|
|
883
886
|
let node = current[0];
|
|
884
887
|
if (node && node.nodeType === 3) {
|
package/web/types/index.d.ts
CHANGED
|
@@ -21,7 +21,7 @@ export declare const hydrate: typeof hydrateCore;
|
|
|
21
21
|
*
|
|
22
22
|
* Useful for inserting modals and tooltips outside of an cropping layout. If no mount point is given, the portal is inserted in document.body; it is wrapped in a `<div>` unless the target is document.head or `isSVG` is true. setting `useShadow` to true places the element in a shadow root to isolate styles.
|
|
23
23
|
*
|
|
24
|
-
* @description https://
|
|
24
|
+
* @description https://docs.solidjs.com/reference/components/portal
|
|
25
25
|
*/
|
|
26
26
|
export declare function Portal<T extends boolean = false, S extends boolean = false>(props: {
|
|
27
27
|
mount?: Node;
|
|
@@ -49,6 +49,6 @@ export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
|
|
|
49
49
|
* ```typescript
|
|
50
50
|
* <Dynamic component={multiline() ? 'textarea' : 'input'} value={value()} />
|
|
51
51
|
* ```
|
|
52
|
-
* @description https://
|
|
52
|
+
* @description https://docs.solidjs.com/reference/components/dynamic
|
|
53
53
|
*/
|
|
54
54
|
export declare function Dynamic<T extends ValidComponent>(props: DynamicProps<T>): JSX.Element;
|