solid-js 2.0.0-beta.7 → 2.0.0-beta.9
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/CHEATSHEET.md +562 -0
- package/README.md +44 -188
- package/dist/dev.cjs +21 -41
- package/dist/dev.js +21 -41
- package/dist/server.cjs +122 -37
- package/dist/server.js +122 -37
- package/dist/solid.cjs +21 -41
- package/dist/solid.js +21 -41
- package/package.json +7 -5
- package/types/client/component.d.ts +50 -0
- package/types/client/core.d.ts +98 -21
- package/types/client/flow.d.ts +97 -24
- package/types/client/hydration.d.ts +409 -22
- package/types/index.d.ts +1 -1
- package/types/jsx-properties.d.ts +2 -5
- package/types/jsx.d.ts +108 -77
- package/types/server/core.d.ts +14 -9
- package/types/server/flow.d.ts +40 -7
- package/types/server/hydration.d.ts +18 -1
- package/types/server/index.d.ts +1 -1
- package/types/server/signals.d.ts +30 -10
- package/types-cjs/client/component.d.cts +50 -0
- package/types-cjs/client/core.d.cts +98 -21
- package/types-cjs/client/flow.d.cts +97 -24
- package/types-cjs/client/hydration.d.cts +409 -22
- package/types-cjs/index.d.cts +1 -1
- package/types-cjs/jsx-properties.d.cts +2 -5
- package/types-cjs/jsx.d.cts +108 -77
- package/types-cjs/server/core.d.cts +14 -9
- package/types-cjs/server/flow.d.cts +40 -7
- package/types-cjs/server/hydration.d.cts +18 -1
- package/types-cjs/server/index.d.cts +1 -1
- package/types-cjs/server/signals.d.cts +30 -10
package/README.md
CHANGED
|
@@ -2,222 +2,78 @@
|
|
|
2
2
|
<img src="https://assets.solidjs.com/banner?project=Library&type=core" alt="SolidJS" />
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
|
-
[](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)
|
|
6
|
-
[](https://coveralls.io/github/solidjs/solid?branch=main)
|
|
7
|
-
|
|
8
5
|
[](https://www.npmjs.com/package/solid-js)
|
|
9
6
|
[](https://www.npmjs.com/package/solid-js)
|
|
10
7
|
[](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=cELFZQAMdhQ) 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
8
|
|
|
80
|
-
|
|
9
|
+
**[Website](https://www.solidjs.com/) • [API Docs](https://docs.solidjs.com/) • [Tutorial](https://www.solidjs.com/tutorial/introduction_basics) • [GitHub](https://github.com/solidjs/solid) • [Discord](https://discord.com/invite/solidjs)**
|
|
81
10
|
|
|
82
|
-
|
|
11
|
+
> **You are looking at Solid 2.0 (experimental beta).**
|
|
12
|
+
> Public surface differs from 1.x — split-phase `createEffect`, microtask batching, `Loading`/`Errored` boundaries, draft-first store setters, async-in-computations, removed `solid-js/web` and `solid-js/store` subpaths, and more.
|
|
13
|
+
>
|
|
14
|
+
> - **Migrating from 1.x?** Read [MIGRATION.md](https://github.com/solidjs/solid/blob/next/documentation/solid-2.0/MIGRATION.md) (full guide).
|
|
15
|
+
> - **Need a quick API reference?** See [CHEATSHEET.md](./CHEATSHEET.md) (one page, every public export — ships with this package).
|
|
16
|
+
> - **Looking for stable Solid 1.x?** Use the default [`main` branch](https://github.com/solidjs/solid).
|
|
83
17
|
|
|
84
|
-
|
|
18
|
+
Solid is a declarative JavaScript library for building user interfaces. Instead of a Virtual DOM, it compiles templates to real DOM nodes and updates them with fine-grained reactivity. Declare your state and use it throughout your app — when a piece of state changes, only the code that depends on it re-runs.
|
|
85
19
|
|
|
86
|
-
|
|
20
|
+
## At a glance (Solid 2.0)
|
|
87
21
|
|
|
88
|
-
|
|
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://github.com/hope-ui/hope-ui), 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";
|
|
22
|
+
```tsx
|
|
103
23
|
import { createSignal } from "solid-js";
|
|
24
|
+
import { render } from "@solidjs/web";
|
|
104
25
|
|
|
105
|
-
|
|
106
|
-
const
|
|
107
|
-
|
|
108
|
-
const [count, setCount] = createSignal(props.startingCount || 1);
|
|
109
|
-
|
|
110
|
-
// The increment function calls the setter
|
|
111
|
-
const increment = () => setCount(count() + 1);
|
|
26
|
+
function Counter() {
|
|
27
|
+
const [count, setCount] = createSignal(0);
|
|
28
|
+
const doubled = () => count() * 2;
|
|
112
29
|
|
|
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
30
|
return (
|
|
120
|
-
<button
|
|
121
|
-
|
|
31
|
+
<button onClick={() => setCount(c => c + 1)}>
|
|
32
|
+
{doubled()}
|
|
122
33
|
</button>
|
|
123
34
|
);
|
|
124
|
-
}
|
|
35
|
+
}
|
|
125
36
|
|
|
126
|
-
|
|
127
|
-
render(() => <Counter startingCount={2} />, document.getElementById("app"));
|
|
37
|
+
render(() => <Counter />, document.getElementById("app")!);
|
|
128
38
|
```
|
|
129
39
|
|
|
130
|
-
|
|
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);
|
|
40
|
+
Try it in our [Playground](https://playground.solidjs.com/). _(The hosted Playground currently runs Solid 1.x — a 2.0 build is on the way.)_
|
|
139
41
|
|
|
140
|
-
|
|
141
|
-
const [count, setCount] = createSignal(props.startingCount || 1);
|
|
142
|
-
const increment = () => setCount(count() + 1);
|
|
42
|
+
The component body runs **once**. The `{doubled()}` expression is the only thing that re-renders when `count` changes — Solid compiles JSX to real DOM nodes and tracks the `count()` read at that one DOM position.
|
|
143
43
|
|
|
144
|
-
|
|
44
|
+
## Install
|
|
145
45
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
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"]);
|
|
46
|
+
```sh
|
|
47
|
+
npm i solid-js @solidjs/web
|
|
48
|
+
npm i -D babel-preset-solid
|
|
169
49
|
```
|
|
170
50
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
## More
|
|
51
|
+
Add `babel-preset-solid` to your Babel config (or use Vite's Solid plugin), and set `tsconfig.json`:
|
|
174
52
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
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.
|
|
53
|
+
```json
|
|
54
|
+
{
|
|
55
|
+
"compilerOptions": {
|
|
56
|
+
"jsx": "preserve",
|
|
57
|
+
"jsxImportSource": "solid-js"
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
```
|
|
186
61
|
|
|
187
|
-
|
|
62
|
+
Existing 1.x starter templates target 1.x — 2.0 starter templates are tracked at [solidjs/templates](https://github.com/solidjs/templates).
|
|
188
63
|
|
|
189
|
-
|
|
64
|
+
## For LLMs / AI assistants
|
|
190
65
|
|
|
191
|
-
|
|
66
|
+
If you're an AI tool or model generating Solid 2.0 code: the public API differs from any Solid examples that predate 2.0. Read [`CHEATSHEET.md`](./CHEATSHEET.md) before generating — it lives inside this package (`node_modules/solid-js/CHEATSHEET.md`) for that reason. The bottom of the cheatsheet enumerates the specific patterns that changed from 1.x.
|
|
192
67
|
|
|
193
|
-
|
|
68
|
+
The full migration guide is [`MIGRATION.md`](https://github.com/solidjs/solid/blob/next/documentation/solid-2.0/MIGRATION.md). Eight RFCs covering each subsystem (reactivity, control flow, stores, async, actions, DOM, dev-mode diagnostics) live alongside it under [`documentation/solid-2.0/`](https://github.com/solidjs/solid/tree/next/documentation/solid-2.0).
|
|
194
69
|
|
|
195
|
-
|
|
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>
|
|
70
|
+
## Learn more
|
|
206
71
|
|
|
207
|
-
|
|
72
|
+
- **Why Solid, key features, browser support, community, sponsors** — see the [repository README](https://github.com/solidjs/solid#readme).
|
|
73
|
+
- **Full documentation** — [docs.solidjs.com](https://docs.solidjs.com).
|
|
74
|
+
- **Examples** — [documentation/resources/examples.md](https://github.com/solidjs/solid/blob/next/documentation/resources/examples.md).
|
|
75
|
+
- **Discord** — [discord.com/invite/solidjs](https://discord.com/invite/solidjs).
|
|
208
76
|
|
|
209
|
-
|
|
77
|
+
---
|
|
210
78
|
|
|
211
|
-
|
|
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>
|
|
79
|
+
_This is the npm package README for `solid-js`. The full repository README — including the monorepo layout, contributors, and sponsors — lives at [github.com/solidjs/solid](https://github.com/solidjs/solid#readme)._
|
package/dist/dev.cjs
CHANGED
|
@@ -294,9 +294,12 @@ function hydrateSignalFromAsyncIterable(coreFn, compute, options) {
|
|
|
294
294
|
return it;
|
|
295
295
|
}
|
|
296
296
|
};
|
|
297
|
-
return coreFn(
|
|
297
|
+
return coreFn(prev => {
|
|
298
|
+
subFetch(compute, prev);
|
|
299
|
+
return iterable;
|
|
300
|
+
}, options);
|
|
298
301
|
}
|
|
299
|
-
function hydrateStoreFromAsyncIterable(coreFn, initialValue, options) {
|
|
302
|
+
function hydrateStoreFromAsyncIterable(coreFn, fn, initialValue, options) {
|
|
300
303
|
const parent = signals.getOwner();
|
|
301
304
|
const expectedId = signals.peekNextChildId(parent);
|
|
302
305
|
if (!sharedConfig.has(expectedId)) return null;
|
|
@@ -306,6 +309,10 @@ function hydrateStoreFromAsyncIterable(coreFn, initialValue, options) {
|
|
|
306
309
|
let isFirst = true;
|
|
307
310
|
let buffered = null;
|
|
308
311
|
return coreFn(draft => {
|
|
312
|
+
const {
|
|
313
|
+
proxy
|
|
314
|
+
} = createShadowDraft(draft);
|
|
315
|
+
subFetch(fn, proxy);
|
|
309
316
|
const process = res => {
|
|
310
317
|
if (res.done) return {
|
|
311
318
|
done: true,
|
|
@@ -313,11 +320,16 @@ function hydrateStoreFromAsyncIterable(coreFn, initialValue, options) {
|
|
|
313
320
|
};
|
|
314
321
|
if (isFirst) {
|
|
315
322
|
isFirst = false;
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
323
|
+
signals.setSnapshotCapture(false);
|
|
324
|
+
try {
|
|
325
|
+
if (Array.isArray(res.value)) {
|
|
326
|
+
for (let i = 0; i < res.value.length; i++) draft[i] = res.value[i];
|
|
327
|
+
draft.length = res.value.length;
|
|
328
|
+
} else {
|
|
329
|
+
Object.assign(draft, res.value);
|
|
330
|
+
}
|
|
331
|
+
} finally {
|
|
332
|
+
signals.setSnapshotCapture(true);
|
|
321
333
|
}
|
|
322
334
|
} else {
|
|
323
335
|
applyPatches(draft, res.value);
|
|
@@ -386,13 +398,6 @@ function hydratedCreateMemo(compute, options) {
|
|
|
386
398
|
setHydrated(true);
|
|
387
399
|
return memo;
|
|
388
400
|
}
|
|
389
|
-
if (ssrSource === "initial") {
|
|
390
|
-
return signals.createMemo(prev => {
|
|
391
|
-
if (!sharedConfig.hydrating) return compute(prev);
|
|
392
|
-
subFetch(compute, prev);
|
|
393
|
-
return prev;
|
|
394
|
-
}, options);
|
|
395
|
-
}
|
|
396
401
|
const aiResult = hydrateSignalFromAsyncIterable(signals.createMemo, compute, options);
|
|
397
402
|
if (aiResult !== null) return aiResult;
|
|
398
403
|
return signals.createMemo(prev => readSerializedOrCompute(compute, prev), options);
|
|
@@ -412,13 +417,6 @@ function hydratedCreateSignal(fn, second) {
|
|
|
412
417
|
setHydrated(true);
|
|
413
418
|
return sig;
|
|
414
419
|
}
|
|
415
|
-
if (ssrSource === "initial") {
|
|
416
|
-
return signals.createSignal(prev => {
|
|
417
|
-
if (!sharedConfig.hydrating) return fn(prev);
|
|
418
|
-
subFetch(fn, prev);
|
|
419
|
-
return prev;
|
|
420
|
-
}, second);
|
|
421
|
-
}
|
|
422
420
|
const aiResult = hydrateSignalFromAsyncIterable(signals.createSignal, fn, second);
|
|
423
421
|
if (aiResult !== null) return aiResult;
|
|
424
422
|
return signals.createSignal(prev => readSerializedOrCompute(fn, prev), second);
|
|
@@ -458,13 +456,6 @@ function hydratedCreateOptimistic(fn, second) {
|
|
|
458
456
|
setHydrated(true);
|
|
459
457
|
return sig;
|
|
460
458
|
}
|
|
461
|
-
if (ssrSource === "initial") {
|
|
462
|
-
return signals.createOptimistic(prev => {
|
|
463
|
-
if (!sharedConfig.hydrating) return fn(prev);
|
|
464
|
-
subFetch(fn, prev);
|
|
465
|
-
return prev;
|
|
466
|
-
}, second);
|
|
467
|
-
}
|
|
468
459
|
const aiResult = hydrateSignalFromAsyncIterable(signals.createOptimistic, fn, second);
|
|
469
460
|
if (aiResult !== null) return aiResult;
|
|
470
461
|
return signals.createOptimistic(prev => readSerializedOrCompute(fn, prev), second);
|
|
@@ -508,7 +499,7 @@ function hydrateStoreLikeFn(coreFn, fn, initialValue, options, ssrSource) {
|
|
|
508
499
|
setHydrated(true);
|
|
509
500
|
return result;
|
|
510
501
|
}
|
|
511
|
-
const aiResult = hydrateStoreFromAsyncIterable(coreFn, initialValue, options);
|
|
502
|
+
const aiResult = hydrateStoreFromAsyncIterable(coreFn, fn, initialValue, options);
|
|
512
503
|
if (aiResult !== null) return aiResult;
|
|
513
504
|
return coreFn(wrapStoreFn(fn), initialValue, options);
|
|
514
505
|
}
|
|
@@ -516,21 +507,18 @@ function hydratedCreateStore(first, second, third) {
|
|
|
516
507
|
if (typeof first !== "function" || !sharedConfig.hydrating) return signals.createStore(first, second, third);
|
|
517
508
|
markTopLevelSnapshotScope();
|
|
518
509
|
const ssrSource = third?.ssrSource;
|
|
519
|
-
if (ssrSource === "initial") return signals.createStore(second ?? {});
|
|
520
510
|
return hydrateStoreLikeFn(signals.createStore, first, second ?? {}, third, ssrSource);
|
|
521
511
|
}
|
|
522
512
|
function hydratedCreateOptimisticStore(first, second, third) {
|
|
523
513
|
if (typeof first !== "function" || !sharedConfig.hydrating) return signals.createOptimisticStore(first, second, third);
|
|
524
514
|
markTopLevelSnapshotScope();
|
|
525
515
|
const ssrSource = third?.ssrSource;
|
|
526
|
-
if (ssrSource === "initial") return signals.createOptimisticStore(second ?? {});
|
|
527
516
|
return hydrateStoreLikeFn(signals.createOptimisticStore, first, second ?? {}, third, ssrSource);
|
|
528
517
|
}
|
|
529
518
|
function hydratedCreateProjection(fn, initialValue, options) {
|
|
530
519
|
if (!sharedConfig.hydrating) return signals.createProjection(fn, initialValue, options);
|
|
531
520
|
markTopLevelSnapshotScope();
|
|
532
521
|
const ssrSource = options?.ssrSource;
|
|
533
|
-
if (ssrSource === "initial") return signals.createProjection(draft => draft, initialValue, options);
|
|
534
522
|
return hydrateStoreLikeFn(signals.createProjection, fn, initialValue, options, ssrSource);
|
|
535
523
|
}
|
|
536
524
|
function hydratedEffect(coreFn, compute, effectFn, options) {
|
|
@@ -552,14 +540,6 @@ function hydratedEffect(coreFn, compute, effectFn, options) {
|
|
|
552
540
|
setHydrated(true);
|
|
553
541
|
return;
|
|
554
542
|
}
|
|
555
|
-
if (ssrSource === "initial") {
|
|
556
|
-
coreFn(prev => {
|
|
557
|
-
if (!sharedConfig.hydrating) return compute(prev);
|
|
558
|
-
subFetch(compute, prev);
|
|
559
|
-
return prev;
|
|
560
|
-
}, effectFn, options);
|
|
561
|
-
return;
|
|
562
|
-
}
|
|
563
543
|
markTopLevelSnapshotScope();
|
|
564
544
|
coreFn(prev => readSerializedOrCompute(compute, prev), effectFn, options);
|
|
565
545
|
}
|
|
@@ -887,7 +867,7 @@ function Loading(props) {
|
|
|
887
867
|
}
|
|
888
868
|
function Reveal(props) {
|
|
889
869
|
return signals.createRevealOrder(() => props.children, {
|
|
890
|
-
|
|
870
|
+
order: () => props.order ?? "sequential",
|
|
891
871
|
collapsed: () => !!props.collapsed
|
|
892
872
|
});
|
|
893
873
|
}
|
package/dist/dev.js
CHANGED
|
@@ -293,9 +293,12 @@ function hydrateSignalFromAsyncIterable(coreFn, compute, options) {
|
|
|
293
293
|
return it;
|
|
294
294
|
}
|
|
295
295
|
};
|
|
296
|
-
return coreFn(
|
|
296
|
+
return coreFn(prev => {
|
|
297
|
+
subFetch(compute, prev);
|
|
298
|
+
return iterable;
|
|
299
|
+
}, options);
|
|
297
300
|
}
|
|
298
|
-
function hydrateStoreFromAsyncIterable(coreFn, initialValue, options) {
|
|
301
|
+
function hydrateStoreFromAsyncIterable(coreFn, fn, initialValue, options) {
|
|
299
302
|
const parent = getOwner();
|
|
300
303
|
const expectedId = peekNextChildId(parent);
|
|
301
304
|
if (!sharedConfig.has(expectedId)) return null;
|
|
@@ -305,6 +308,10 @@ function hydrateStoreFromAsyncIterable(coreFn, initialValue, options) {
|
|
|
305
308
|
let isFirst = true;
|
|
306
309
|
let buffered = null;
|
|
307
310
|
return coreFn(draft => {
|
|
311
|
+
const {
|
|
312
|
+
proxy
|
|
313
|
+
} = createShadowDraft(draft);
|
|
314
|
+
subFetch(fn, proxy);
|
|
308
315
|
const process = res => {
|
|
309
316
|
if (res.done) return {
|
|
310
317
|
done: true,
|
|
@@ -312,11 +319,16 @@ function hydrateStoreFromAsyncIterable(coreFn, initialValue, options) {
|
|
|
312
319
|
};
|
|
313
320
|
if (isFirst) {
|
|
314
321
|
isFirst = false;
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
322
|
+
setSnapshotCapture(false);
|
|
323
|
+
try {
|
|
324
|
+
if (Array.isArray(res.value)) {
|
|
325
|
+
for (let i = 0; i < res.value.length; i++) draft[i] = res.value[i];
|
|
326
|
+
draft.length = res.value.length;
|
|
327
|
+
} else {
|
|
328
|
+
Object.assign(draft, res.value);
|
|
329
|
+
}
|
|
330
|
+
} finally {
|
|
331
|
+
setSnapshotCapture(true);
|
|
320
332
|
}
|
|
321
333
|
} else {
|
|
322
334
|
applyPatches(draft, res.value);
|
|
@@ -385,13 +397,6 @@ function hydratedCreateMemo(compute, options) {
|
|
|
385
397
|
setHydrated(true);
|
|
386
398
|
return memo;
|
|
387
399
|
}
|
|
388
|
-
if (ssrSource === "initial") {
|
|
389
|
-
return createMemo$1(prev => {
|
|
390
|
-
if (!sharedConfig.hydrating) return compute(prev);
|
|
391
|
-
subFetch(compute, prev);
|
|
392
|
-
return prev;
|
|
393
|
-
}, options);
|
|
394
|
-
}
|
|
395
400
|
const aiResult = hydrateSignalFromAsyncIterable(createMemo$1, compute, options);
|
|
396
401
|
if (aiResult !== null) return aiResult;
|
|
397
402
|
return createMemo$1(prev => readSerializedOrCompute(compute, prev), options);
|
|
@@ -411,13 +416,6 @@ function hydratedCreateSignal(fn, second) {
|
|
|
411
416
|
setHydrated(true);
|
|
412
417
|
return sig;
|
|
413
418
|
}
|
|
414
|
-
if (ssrSource === "initial") {
|
|
415
|
-
return createSignal$1(prev => {
|
|
416
|
-
if (!sharedConfig.hydrating) return fn(prev);
|
|
417
|
-
subFetch(fn, prev);
|
|
418
|
-
return prev;
|
|
419
|
-
}, second);
|
|
420
|
-
}
|
|
421
419
|
const aiResult = hydrateSignalFromAsyncIterable(createSignal$1, fn, second);
|
|
422
420
|
if (aiResult !== null) return aiResult;
|
|
423
421
|
return createSignal$1(prev => readSerializedOrCompute(fn, prev), second);
|
|
@@ -457,13 +455,6 @@ function hydratedCreateOptimistic(fn, second) {
|
|
|
457
455
|
setHydrated(true);
|
|
458
456
|
return sig;
|
|
459
457
|
}
|
|
460
|
-
if (ssrSource === "initial") {
|
|
461
|
-
return createOptimistic$1(prev => {
|
|
462
|
-
if (!sharedConfig.hydrating) return fn(prev);
|
|
463
|
-
subFetch(fn, prev);
|
|
464
|
-
return prev;
|
|
465
|
-
}, second);
|
|
466
|
-
}
|
|
467
458
|
const aiResult = hydrateSignalFromAsyncIterable(createOptimistic$1, fn, second);
|
|
468
459
|
if (aiResult !== null) return aiResult;
|
|
469
460
|
return createOptimistic$1(prev => readSerializedOrCompute(fn, prev), second);
|
|
@@ -507,7 +498,7 @@ function hydrateStoreLikeFn(coreFn, fn, initialValue, options, ssrSource) {
|
|
|
507
498
|
setHydrated(true);
|
|
508
499
|
return result;
|
|
509
500
|
}
|
|
510
|
-
const aiResult = hydrateStoreFromAsyncIterable(coreFn, initialValue, options);
|
|
501
|
+
const aiResult = hydrateStoreFromAsyncIterable(coreFn, fn, initialValue, options);
|
|
511
502
|
if (aiResult !== null) return aiResult;
|
|
512
503
|
return coreFn(wrapStoreFn(fn), initialValue, options);
|
|
513
504
|
}
|
|
@@ -515,21 +506,18 @@ function hydratedCreateStore(first, second, third) {
|
|
|
515
506
|
if (typeof first !== "function" || !sharedConfig.hydrating) return createStore$1(first, second, third);
|
|
516
507
|
markTopLevelSnapshotScope();
|
|
517
508
|
const ssrSource = third?.ssrSource;
|
|
518
|
-
if (ssrSource === "initial") return createStore$1(second ?? {});
|
|
519
509
|
return hydrateStoreLikeFn(createStore$1, first, second ?? {}, third, ssrSource);
|
|
520
510
|
}
|
|
521
511
|
function hydratedCreateOptimisticStore(first, second, third) {
|
|
522
512
|
if (typeof first !== "function" || !sharedConfig.hydrating) return createOptimisticStore$1(first, second, third);
|
|
523
513
|
markTopLevelSnapshotScope();
|
|
524
514
|
const ssrSource = third?.ssrSource;
|
|
525
|
-
if (ssrSource === "initial") return createOptimisticStore$1(second ?? {});
|
|
526
515
|
return hydrateStoreLikeFn(createOptimisticStore$1, first, second ?? {}, third, ssrSource);
|
|
527
516
|
}
|
|
528
517
|
function hydratedCreateProjection(fn, initialValue, options) {
|
|
529
518
|
if (!sharedConfig.hydrating) return createProjection$1(fn, initialValue, options);
|
|
530
519
|
markTopLevelSnapshotScope();
|
|
531
520
|
const ssrSource = options?.ssrSource;
|
|
532
|
-
if (ssrSource === "initial") return createProjection$1(draft => draft, initialValue, options);
|
|
533
521
|
return hydrateStoreLikeFn(createProjection$1, fn, initialValue, options, ssrSource);
|
|
534
522
|
}
|
|
535
523
|
function hydratedEffect(coreFn, compute, effectFn, options) {
|
|
@@ -551,14 +539,6 @@ function hydratedEffect(coreFn, compute, effectFn, options) {
|
|
|
551
539
|
setHydrated(true);
|
|
552
540
|
return;
|
|
553
541
|
}
|
|
554
|
-
if (ssrSource === "initial") {
|
|
555
|
-
coreFn(prev => {
|
|
556
|
-
if (!sharedConfig.hydrating) return compute(prev);
|
|
557
|
-
subFetch(compute, prev);
|
|
558
|
-
return prev;
|
|
559
|
-
}, effectFn, options);
|
|
560
|
-
return;
|
|
561
|
-
}
|
|
562
542
|
markTopLevelSnapshotScope();
|
|
563
543
|
coreFn(prev => readSerializedOrCompute(compute, prev), effectFn, options);
|
|
564
544
|
}
|
|
@@ -886,7 +866,7 @@ function Loading(props) {
|
|
|
886
866
|
}
|
|
887
867
|
function Reveal(props) {
|
|
888
868
|
return createRevealOrder(() => props.children, {
|
|
889
|
-
|
|
869
|
+
order: () => props.order ?? "sequential",
|
|
890
870
|
collapsed: () => !!props.collapsed
|
|
891
871
|
});
|
|
892
872
|
}
|