solid-js 2.0.0-beta.7 → 2.0.0-beta.9

package/dist/solid.cjs

@@ -277,9 +277,12 @@ function hydrateSignalFromAsyncIterable(coreFn, compute, options) {
       return it;
     }
   };
-  return coreFn(() => iterable, options);
+  return coreFn(prev => {
+    subFetch(compute, prev);
+    return iterable;
+  }, options);
 }
-function hydrateStoreFromAsyncIterable(coreFn, initialValue, options) {
+function hydrateStoreFromAsyncIterable(coreFn, fn, initialValue, options) {
   const parent = signals.getOwner();
   const expectedId = signals.peekNextChildId(parent);
   if (!sharedConfig.has(expectedId)) return null;
@@ -289,6 +292,10 @@ function hydrateStoreFromAsyncIterable(coreFn, initialValue, options) {
   let isFirst = true;
   let buffered = null;
   return coreFn(draft => {
+    const {
+      proxy
+    } = createShadowDraft(draft);
+    subFetch(fn, proxy);
     const process = res => {
       if (res.done) return {
         done: true,
@@ -296,11 +303,16 @@ function hydrateStoreFromAsyncIterable(coreFn, initialValue, options) {
       };
       if (isFirst) {
         isFirst = false;
-        if (Array.isArray(res.value)) {
-          for (let i = 0; i < res.value.length; i++) draft[i] = res.value[i];
-          draft.length = res.value.length;
-        } else {
-          Object.assign(draft, res.value);
+        signals.setSnapshotCapture(false);
+        try {
+          if (Array.isArray(res.value)) {
+            for (let i = 0; i < res.value.length; i++) draft[i] = res.value[i];
+            draft.length = res.value.length;
+          } else {
+            Object.assign(draft, res.value);
+          }
+        } finally {
+          signals.setSnapshotCapture(true);
         }
       } else {
         applyPatches(draft, res.value);
@@ -369,13 +381,6 @@ function hydratedCreateMemo(compute, options) {
     setHydrated(true);
     return memo;
   }
-  if (ssrSource === "initial") {
-    return signals.createMemo(prev => {
-      if (!sharedConfig.hydrating) return compute(prev);
-      subFetch(compute, prev);
-      return prev;
-    }, options);
-  }
   const aiResult = hydrateSignalFromAsyncIterable(signals.createMemo, compute, options);
   if (aiResult !== null) return aiResult;
   return signals.createMemo(prev => readSerializedOrCompute(compute, prev), options);
@@ -395,13 +400,6 @@ function hydratedCreateSignal(fn, second) {
     setHydrated(true);
     return sig;
   }
-  if (ssrSource === "initial") {
-    return signals.createSignal(prev => {
-      if (!sharedConfig.hydrating) return fn(prev);
-      subFetch(fn, prev);
-      return prev;
-    }, second);
-  }
   const aiResult = hydrateSignalFromAsyncIterable(signals.createSignal, fn, second);
   if (aiResult !== null) return aiResult;
   return signals.createSignal(prev => readSerializedOrCompute(fn, prev), second);
@@ -441,13 +439,6 @@ function hydratedCreateOptimistic(fn, second) {
     setHydrated(true);
     return sig;
   }
-  if (ssrSource === "initial") {
-    return signals.createOptimistic(prev => {
-      if (!sharedConfig.hydrating) return fn(prev);
-      subFetch(fn, prev);
-      return prev;
-    }, second);
-  }
   const aiResult = hydrateSignalFromAsyncIterable(signals.createOptimistic, fn, second);
   if (aiResult !== null) return aiResult;
   return signals.createOptimistic(prev => readSerializedOrCompute(fn, prev), second);
@@ -491,7 +482,7 @@ function hydrateStoreLikeFn(coreFn, fn, initialValue, options, ssrSource) {
     setHydrated(true);
     return result;
   }
-  const aiResult = hydrateStoreFromAsyncIterable(coreFn, initialValue, options);
+  const aiResult = hydrateStoreFromAsyncIterable(coreFn, fn, initialValue, options);
   if (aiResult !== null) return aiResult;
   return coreFn(wrapStoreFn(fn), initialValue, options);
 }
@@ -499,21 +490,18 @@ function hydratedCreateStore(first, second, third) {
   if (typeof first !== "function" || !sharedConfig.hydrating) return signals.createStore(first, second, third);
   markTopLevelSnapshotScope();
   const ssrSource = third?.ssrSource;
-  if (ssrSource === "initial") return signals.createStore(second ?? {});
   return hydrateStoreLikeFn(signals.createStore, first, second ?? {}, third, ssrSource);
 }
 function hydratedCreateOptimisticStore(first, second, third) {
   if (typeof first !== "function" || !sharedConfig.hydrating) return signals.createOptimisticStore(first, second, third);
   markTopLevelSnapshotScope();
   const ssrSource = third?.ssrSource;
-  if (ssrSource === "initial") return signals.createOptimisticStore(second ?? {});
   return hydrateStoreLikeFn(signals.createOptimisticStore, first, second ?? {}, third, ssrSource);
 }
 function hydratedCreateProjection(fn, initialValue, options) {
   if (!sharedConfig.hydrating) return signals.createProjection(fn, initialValue, options);
   markTopLevelSnapshotScope();
   const ssrSource = options?.ssrSource;
-  if (ssrSource === "initial") return signals.createProjection(draft => draft, initialValue, options);
   return hydrateStoreLikeFn(signals.createProjection, fn, initialValue, options, ssrSource);
 }
 function hydratedEffect(coreFn, compute, effectFn, options) {
@@ -535,14 +523,6 @@ function hydratedEffect(coreFn, compute, effectFn, options) {
     setHydrated(true);
     return;
   }
-  if (ssrSource === "initial") {
-    coreFn(prev => {
-      if (!sharedConfig.hydrating) return compute(prev);
-      subFetch(compute, prev);
-      return prev;
-    }, effectFn, options);
-    return;
-  }
   markTopLevelSnapshotScope();
   coreFn(prev => readSerializedOrCompute(compute, prev), effectFn, options);
 }
@@ -854,7 +834,7 @@ function Loading(props) {
 }
 function Reveal(props) {
   return signals.createRevealOrder(() => props.children, {
-    together: () => !!props.together,
+    order: () => props.order ?? "sequential",
     collapsed: () => !!props.collapsed
   });
 }

package/dist/solid.js

@@ -276,9 +276,12 @@ function hydrateSignalFromAsyncIterable(coreFn, compute, options) {
       return it;
     }
   };
-  return coreFn(() => iterable, options);
+  return coreFn(prev => {
+    subFetch(compute, prev);
+    return iterable;
+  }, options);
 }
-function hydrateStoreFromAsyncIterable(coreFn, initialValue, options) {
+function hydrateStoreFromAsyncIterable(coreFn, fn, initialValue, options) {
   const parent = getOwner();
   const expectedId = peekNextChildId(parent);
   if (!sharedConfig.has(expectedId)) return null;
@@ -288,6 +291,10 @@ function hydrateStoreFromAsyncIterable(coreFn, initialValue, options) {
   let isFirst = true;
   let buffered = null;
   return coreFn(draft => {
+    const {
+      proxy
+    } = createShadowDraft(draft);
+    subFetch(fn, proxy);
     const process = res => {
       if (res.done) return {
         done: true,
@@ -295,11 +302,16 @@ function hydrateStoreFromAsyncIterable(coreFn, initialValue, options) {
       };
       if (isFirst) {
         isFirst = false;
-        if (Array.isArray(res.value)) {
-          for (let i = 0; i < res.value.length; i++) draft[i] = res.value[i];
-          draft.length = res.value.length;
-        } else {
-          Object.assign(draft, res.value);
+        setSnapshotCapture(false);
+        try {
+          if (Array.isArray(res.value)) {
+            for (let i = 0; i < res.value.length; i++) draft[i] = res.value[i];
+            draft.length = res.value.length;
+          } else {
+            Object.assign(draft, res.value);
+          }
+        } finally {
+          setSnapshotCapture(true);
         }
       } else {
         applyPatches(draft, res.value);
@@ -368,13 +380,6 @@ function hydratedCreateMemo(compute, options) {
     setHydrated(true);
     return memo;
   }
-  if (ssrSource === "initial") {
-    return createMemo$1(prev => {
-      if (!sharedConfig.hydrating) return compute(prev);
-      subFetch(compute, prev);
-      return prev;
-    }, options);
-  }
   const aiResult = hydrateSignalFromAsyncIterable(createMemo$1, compute, options);
   if (aiResult !== null) return aiResult;
   return createMemo$1(prev => readSerializedOrCompute(compute, prev), options);
@@ -394,13 +399,6 @@ function hydratedCreateSignal(fn, second) {
     setHydrated(true);
     return sig;
   }
-  if (ssrSource === "initial") {
-    return createSignal$1(prev => {
-      if (!sharedConfig.hydrating) return fn(prev);
-      subFetch(fn, prev);
-      return prev;
-    }, second);
-  }
   const aiResult = hydrateSignalFromAsyncIterable(createSignal$1, fn, second);
   if (aiResult !== null) return aiResult;
   return createSignal$1(prev => readSerializedOrCompute(fn, prev), second);
@@ -440,13 +438,6 @@ function hydratedCreateOptimistic(fn, second) {
     setHydrated(true);
     return sig;
   }
-  if (ssrSource === "initial") {
-    return createOptimistic$1(prev => {
-      if (!sharedConfig.hydrating) return fn(prev);
-      subFetch(fn, prev);
-      return prev;
-    }, second);
-  }
   const aiResult = hydrateSignalFromAsyncIterable(createOptimistic$1, fn, second);
   if (aiResult !== null) return aiResult;
   return createOptimistic$1(prev => readSerializedOrCompute(fn, prev), second);
@@ -490,7 +481,7 @@ function hydrateStoreLikeFn(coreFn, fn, initialValue, options, ssrSource) {
     setHydrated(true);
     return result;
   }
-  const aiResult = hydrateStoreFromAsyncIterable(coreFn, initialValue, options);
+  const aiResult = hydrateStoreFromAsyncIterable(coreFn, fn, initialValue, options);
   if (aiResult !== null) return aiResult;
   return coreFn(wrapStoreFn(fn), initialValue, options);
 }
@@ -498,21 +489,18 @@ function hydratedCreateStore(first, second, third) {
   if (typeof first !== "function" || !sharedConfig.hydrating) return createStore$1(first, second, third);
   markTopLevelSnapshotScope();
   const ssrSource = third?.ssrSource;
-  if (ssrSource === "initial") return createStore$1(second ?? {});
   return hydrateStoreLikeFn(createStore$1, first, second ?? {}, third, ssrSource);
 }
 function hydratedCreateOptimisticStore(first, second, third) {
   if (typeof first !== "function" || !sharedConfig.hydrating) return createOptimisticStore$1(first, second, third);
   markTopLevelSnapshotScope();
   const ssrSource = third?.ssrSource;
-  if (ssrSource === "initial") return createOptimisticStore$1(second ?? {});
   return hydrateStoreLikeFn(createOptimisticStore$1, first, second ?? {}, third, ssrSource);
 }
 function hydratedCreateProjection(fn, initialValue, options) {
   if (!sharedConfig.hydrating) return createProjection$1(fn, initialValue, options);
   markTopLevelSnapshotScope();
   const ssrSource = options?.ssrSource;
-  if (ssrSource === "initial") return createProjection$1(draft => draft, initialValue, options);
   return hydrateStoreLikeFn(createProjection$1, fn, initialValue, options, ssrSource);
 }
 function hydratedEffect(coreFn, compute, effectFn, options) {
@@ -534,14 +522,6 @@ function hydratedEffect(coreFn, compute, effectFn, options) {
     setHydrated(true);
     return;
   }
-  if (ssrSource === "initial") {
-    coreFn(prev => {
-      if (!sharedConfig.hydrating) return compute(prev);
-      subFetch(compute, prev);
-      return prev;
-    }, effectFn, options);
-    return;
-  }
   markTopLevelSnapshotScope();
   coreFn(prev => readSerializedOrCompute(compute, prev), effectFn, options);
 }
@@ -853,7 +833,7 @@ function Loading(props) {
 }
 function Reveal(props) {
   return createRevealOrder(() => props.children, {
-    together: () => !!props.together,
+    order: () => props.order ?? "sequential",
     collapsed: () => !!props.collapsed
   });
 }

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "solid-js",
-  "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "2.0.0-beta.7",
+  "description": "Reactive JavaScript library for building user interfaces. Compiles JSX to real DOM with fine-grained signal-based updates — no virtual DOM.",
+  "version": "2.0.0-beta.9",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/solidjs/solid"
+    "url": "git+https://github.com/solidjs/solid.git",
+    "directory": "packages/solid"
   },
   "main": "./dist/server.cjs",
   "module": "./dist/server.js",
@@ -20,7 +21,8 @@
     "types",
     "types-cjs",
     "jsx-runtime.d.ts",
-    "package.json"
+    "package.json",
+    "CHEATSHEET.md"
   ],
   "exports": {
     ".": {
@@ -126,7 +128,7 @@
     "performance"
   ],
   "dependencies": {
-    "@solidjs/signals": "^2.0.0-beta.7",
+    "@solidjs/signals": "^2.0.0-beta.9",
     "csstype": "^3.1.0",
     "seroval": "~1.5.0",
     "seroval-plugins": "~1.5.0"

package/types/client/component.d.ts

@@ -63,7 +63,39 @@ export type ComponentProps<T extends ValidComponent> = T extends Component<infer
  * @example Component<{ref: Ref<Element>}>
  */
 export type Ref<T> = T | ((val: T) => void);
+/**
+ * Invokes a component, wrapping the call in `untrack` so that reactive reads
+ * inside the component body don't subscribe the parent computation. Compiled
+ * JSX uses this internally; manual calls are rarely needed unless authoring a
+ * custom JSX factory or renderer.
+ */
 export declare function createComponent<T extends Record<string, any>>(Comp: Component<T>, props: T): JSX.Element;
+/**
+ * Defines a code-split component. The returned component triggers its dynamic
+ * import on first render and suspends through any enclosing `<Loading>`
+ * boundary while the chunk is in flight. Call `.preload()` to start the
+ * import early (e.g. on hover).
+ *
+ * @param fn dynamic import returning the module's default export
+ * @param moduleUrl optional module URL used during hydration to look up
+ *   preloaded chunks; usually injected by the bundler integration
+ *
+ * @example
+ * ```tsx
+ * const Profile = lazy(() => import("./Profile"));
+ *
+ * function App() {
+ *   return (
+ *     <Loading fallback={<Spinner />}>
+ *       <Profile id="42" />
+ *     </Loading>
+ *   );
+ * }
+ *
+ * // Preload before the user clicks
+ * <button onMouseEnter={() => Profile.preload()}>Open profile</button>
+ * ```
+ */
 export declare function lazy<T extends Component<any>>(fn: () => Promise<{
     default: T;
 }>, moduleUrl?: string): T & {
@@ -72,4 +104,22 @@ export declare function lazy<T extends Component<any>>(fn: () => Promise<{
     }>;
     moduleUrl?: string;
 };
+/**
+ * Returns a stable id string that matches between server-rendered and
+ * client-hydrated trees. Use it for `<label for>`, `aria-labelledby`, and
+ * other attributes that need consistent ids across SSR.
+ *
+ * @example
+ * ```tsx
+ * function Field(props: { label: string }) {
+ *   const id = createUniqueId();
+ *   return (
+ *     <>
+ *       <label for={id}>{props.label}</label>
+ *       <input id={id} />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
 export declare function createUniqueId(): string;

package/types/client/core.d.ts

@@ -9,34 +9,101 @@ export type ContextProviderComponent<T> = FlowComponent<{
 }>;
 export interface Context<T> extends ContextProviderComponent<T> {
     id: symbol;
-    defaultValue: T;
+    defaultValue: T | undefined;
 }
 /**
- * Creates a Context to handle a state scoped for the children of a component
- * ```typescript
- * interface Context<T> {
- *   id: symbol;
- *   Provider: FlowComponent<{ value: T }>;
- *   defaultValue: T;
+ * Creates a Context for sharing state with descendants of a Provider in the
+ * component tree.
+ *
+ * The returned `Context` is itself a provider component — pass it a `value`
+ * prop to scope a value to its children. Read it inside descendants with
+ * `useContext`.
+ *
+ * Two forms:
+ *
+ * - **`createContext<T>()`** (default-less, the canonical form). Reading via
+ *   `useContext` outside an enclosing Provider throws `ContextNotFoundError`.
+ *   Use this for everything that carries reactive state — signals, stores,
+ *   `[state, actions]` tuples, services. The Provider is mandatory by
+ *   construction; the throw makes a missing Provider a loud bug instead of a
+ *   silent no-op. The annotation `<T>` is required because there is no value
+ *   to infer from.
+ * - **`createContext<T>(defaultValue)`** (default form). Reserved for the
+ *   narrow case of contexts whose value is a primitive with a meaningful
+ *   static fallback (theme, locale, frozen config). Outside any Provider,
+ *   `useContext` returns `defaultValue`.
+ *
+ * If you want truly app-wide state, **don't use Context** — a module-scope
+ * signal/store *is* a global. Context is for scoping state to a subtree;
+ * that's why a Provider is required.
+ *
+ * @param defaultValue optional default; only meaningful for primitive
+ *   fallbacks. Omit for any context carrying reactive state.
+ * @param options `{ name }` for debugging in development
+ * @returns a context object that doubles as its own provider component
+ *
+ * @example
+ * ```tsx
+ * // Reactive payload — default-less, throws if no Provider.
+ * type TodosCtx = readonly [Store<Todo[]>, TodoActions];
+ * const TodosContext = createContext<TodosCtx>();
+ *
+ * function App() {
+ *   return (
+ *     <TodosContext value={createTodos()}>
+ *       <TodoList />
+ *     </TodosContext>
+ *   );
+ * }
+ *
+ * function TodoList() {
+ *   const [todos, { addTodo }] = useContext(TodosContext); // typed as TodosCtx
+ *   // ...
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Primitive default — falls back to "light" outside a Provider.
+ * const ThemeContext = createContext<"light" | "dark">("light");
+ *
+ * function Button() {
+ *   const theme = useContext(ThemeContext); // "light" | "dark"
+ *   return <button class={theme}>Click</button>;
  * }
- * export function createContext<T>(
- *   defaultValue?: T,
- *   options?: { name?: string }
- * ): Context<T | undefined>;
  * ```
- * @param defaultValue optional default to inject into context
- * @param options allows to set a name in dev mode for debugging purposes
- * @returns The context that contains the Provider Component and that can be used with `useContext`
  *
  * @description https://docs.solidjs.com/reference/component-apis/create-context
  */
-export declare function createContext<T>(defaultValue?: undefined, options?: EffectOptions): Context<T | undefined>;
-export declare function createContext<T>(defaultValue: T, options?: EffectOptions): Context<T>;
+export declare function createContext<T>(defaultValue?: T, options?: EffectOptions): Context<T>;
 /**
- * Uses a context to receive a scoped state from a parent's Context.Provider
+ * Reads the current value of a context.
+ *
+ * - For `createContext<T>()` (default-less): returns the value from the
+ *   nearest enclosing Provider, or throws `ContextNotFoundError` if none is
+ *   mounted. Return type is `T` (no narrowing required).
+ * - For `createContext<T>(defaultValue)`: returns the value from the nearest
+ *   enclosing Provider, or `defaultValue` if none is mounted.
  *
- * @param context Context object made by `createContext`
- * @returns the current or `defaultValue`, if present
+ * In Solid, `useContext` is the canonical way to read context. There is no
+ * need for a wrapper hook that throws on missing Provider — the default-less
+ * form already does that, and its return type is `T`.
+ *
+ * @param context a context returned from `createContext`
+ * @returns the value provided by the nearest enclosing Provider, or the
+ *   default if one was supplied to `createContext`
+ * @throws `ContextNotFoundError` if no Provider is mounted and the context
+ *   was created without a default
+ *
+ * @example
+ * ```tsx
+ * const TodosContext = createContext<TodosCtx>();
+ *
+ * function TodoList() {
+ *   const [todos, { addTodo }] = useContext(TodosContext); // throws if no Provider
+ *   // ...
+ * }
+ * ```
  *
  * @description https://docs.solidjs.com/reference/component-apis/use-context
  */
@@ -47,10 +114,20 @@ export type ChildrenReturn = Accessor<ResolvedChildren> & {
     toArray: () => ResolvedJSXElement[];
 };
 /**
- * Resolves child elements to help interact with children
+ * Resolves a `children` accessor and exposes the result as an accessor with
+ * a `.toArray()` helper. Use this when a component needs to inspect or
+ * iterate over its children rather than just render them through.
  *
  * @param fn an accessor for the children
- * @returns a accessor of the same children, but resolved
+ * @returns an accessor of the resolved children, with `.toArray()` for iteration
+ *
+ * @example
+ * ```tsx
+ * function List(props: { children: JSX.Element }) {
+ *   const items = children(() => props.children);
+ *   return <ul>{items.toArray().map(item => <li>{item}</li>)}</ul>;
+ * }
+ * ```
  *
  * @description https://docs.solidjs.com/reference/component-apis/children
  */