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/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
- [![Build Status](https://img.shields.io/github/actions/workflow/status/solidjs/solid/main-ci.yml?branch=main&logo=github&style=for-the-badge)](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)
6
- [![Coverage Status](https://img.shields.io/coveralls/github/solidjs/solid.svg?style=for-the-badge)](https://coveralls.io/github/solidjs/solid?branch=main)
7
-
8
5
  [![NPM Version](https://img.shields.io/npm/v/solid-js.svg?style=for-the-badge)](https://www.npmjs.com/package/solid-js)
9
6
  [![](https://img.shields.io/npm/dm/solid-js.svg?style=for-the-badge)](https://www.npmjs.com/package/solid-js)
10
7
  [![Discord](https://img.shields.io/discord/722131463138705510?style=for-the-badge)](https://discord.com/invite/solidjs)
11
- [![Subreddit subscribers](https://img.shields.io/reddit/subreddit-subscribers/solidjs?style=for-the-badge)](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
- ## Why Solid?
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
- ### Performant
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
- Meticulously engineered for performance and with half a decade of research behind it, Solid's performance is almost indistinguishable from optimized vanilla JavaScript (See Solid on the [JS Framework Benchmark](https://krausest.github.io/js-framework-benchmark/current.html)). Solid is [small](https://bundlephobia.com/package/solid-js@1.3.15) and completely tree-shakable, and [fast](https://levelup.gitconnected.com/how-we-wrote-the-fastest-javascript-ui-framework-again-db097ddd99b6) when rendering on the server, too. Whether you're writing a fully client-rendered SPA or a server-rendered app, your users see it faster than ever. ([Read more about Solid's performance](https://dev.to/ryansolid/thinking-granular-how-is-solidjs-so-performant-4g37) from the library's creator.)
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
- ### Powerful
20
+ ## At a glance (Solid 2.0)
87
21
 
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://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
- // 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);
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 type="button" onClick={increment}>
121
- Increment {count()}
31
+ <button onClick={() => setCount(c => c + 1)}>
32
+ {doubled()}
122
33
  </button>
123
34
  );
124
- };
35
+ }
125
36
 
126
- // The render function mounts a component onto your page
127
- render(() => <Counter startingCount={2} />, document.getElementById("app"));
37
+ render(() => <Counter />, document.getElementById("app")!);
128
38
  ```
129
39
 
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);
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
- const Counter = props => {
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
- console.log("The body of the function runs once . . .");
44
+ ## Install
145
45
 
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"]);
46
+ ```sh
47
+ npm i solid-js @solidjs/web
48
+ npm i -D babel-preset-solid
169
49
  ```
170
50
 
171
- </details>
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
- 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.
53
+ ```json
54
+ {
55
+ "compilerOptions": {
56
+ "jsx": "preserve",
57
+ "jsxImportSource": "solid-js"
58
+ }
59
+ }
60
+ ```
186
61
 
187
- ### Contributors
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
- <a href="https://github.com/solidjs/solid/graphs/contributors"><img src="https://opencollective.com/solid/contributors.svg?width=890&amp;button=false" style="max-width:100%;"></a>
64
+ ## For LLMs / AI assistants
190
65
 
191
- ### Open Collective
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
- Support us with a donation and help us continue our activities. [[Contribute](https://opencollective.com/solid)]
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
- <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>
70
+ ## Learn more
206
71
 
207
- ### Sponsors
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
- 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)]
77
+ ---
210
78
 
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>
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(() => iterable, options);
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
- if (Array.isArray(res.value)) {
317
- for (let i = 0; i < res.value.length; i++) draft[i] = res.value[i];
318
- draft.length = res.value.length;
319
- } else {
320
- Object.assign(draft, res.value);
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
- together: () => !!props.together,
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(() => iterable, options);
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
- if (Array.isArray(res.value)) {
316
- for (let i = 0; i < res.value.length; i++) draft[i] = res.value[i];
317
- draft.length = res.value.length;
318
- } else {
319
- Object.assign(draft, res.value);
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
- together: () => !!props.together,
869
+ order: () => props.order ?? "sequential",
890
870
  collapsed: () => !!props.collapsed
891
871
  });
892
872
  }