solid-js - npm Package Compare versions

Comparing version 2.0.0-beta.11 to 2.0.0-beta.12

CHEATSHEET.md

@@ -258,3 +258,3 @@ # Solid 2.0 — Cheatsheet
 <For each={items()}>
-  {(item, i) => <Row item={item()} index={i()} />}
+  {(item, i) => <Row item={item} index={i()} />}
 </For>
@@ -264,3 +264,3 @@
 <For each={items()} keyed={false}>
-  {(item, i) => <Row item={item()} index={i()} />}
+  {(item, i) => <Row item={item()} index={i} />}
 </For>
@@ -321,3 +321,4 @@
 
-`<For>` non-keyed: `item` and `i` are **accessors** — call them: `item()`, `i()`.
+`<For>` non-keyed: `item` is an **accessor** and `i` is a plain number.
+`<For>` default/keyed-by-identity: `item` is a **plain value** and `i` is an accessor.
 `<Repeat>`: `i` is a **plain number**.
@@ -624,4 +625,4 @@
 - **Don't destructure props** — `function Comp({ name })` warns; use `props.name` to keep reactivity. (Same root cause as above; see the Props section.)
-- **`<For>` non-keyed children are accessors** — `(item, i) => ...` where `item` and `i` are functions. Call them: `item()`, `i()`.
-- **`<Show>` / `<Match>` function children receive narrowed accessors** — also call them.
+- **`<For>` callback shape follows keying** — default/keyed-by-identity receives a raw item and index accessor; `keyed={false}` receives an item accessor and stable numeric index; custom keys receive accessors.
+- **`<Show>` / `<Match>` function children narrow values** — non-keyed children receive accessors; keyed children receive raw values.
 - **Stores: setters take a draft callback** — mutate the draft in place by default. Returning a new value is shallow (array index-replace, object top-level diff); reach for it for filter/remove. Keyed reconcile is a _projection-fn_ feature, not a setter feature.
@@ -628,0 +629,0 @@ - **`undefined` is a real value in `merge`** — it overrides rather than "skip this key".

dist/dev.cjs

@@ -812,3 +812,3 @@ 'use strict';
       const fn = typeof child === "function" && child.length > 0;
-      return fn ? signals.untrack(() => child(() => {
+      return fn ? keyed ? signals.untrack(() => child(c), "<Show>") : signals.untrack(() => child(() => {
         if (!signals.untrack(condition)) throw narrowedError("Show");
@@ -841,3 +841,8 @@ return conditionValue();
       } );
-      func = () => prevFunc() || (condition() ? [index, conditionValue, mp] : undefined);
+      func = () => {
+        const prev = prevFunc();
+        if (prev) return prev;
+        const c = condition();
+        return c ? [index, c, conditionValue, mp] : undefined;
+      };
     }
@@ -851,6 +856,6 @@ return func;
     if (!sel) return props.fallback;
-    const [index, conditionValue, mp] = sel;
+    const [index, value, conditionValue, mp] = sel;
     const child = mp.children;
     const fn = typeof child === "function" && child.length > 0;
-    return fn ? signals.untrack(() => child(() => {
+    return fn ? mp.keyed ? signals.untrack(() => child(value), "<Match>") : signals.untrack(() => child(() => {
       if (signals.untrack(switchFunc)()?.[0] !== index) throw narrowedError("Match");
@@ -857,0 +862,0 @@ return conditionValue();

dist/dev.js

@@ -811,3 +811,3 @@ import { getContext, createMemo as createMemo$1, flatten, createRoot, setContext, getOwner, untrack, createOwner, runWithOwner, createEffect as createEffect$1, createErrorBoundary as createErrorBoundary$1, createLoadingBoundary as createLoadingBoundary$1, createOptimistic as createOptimistic$1, createOptimisticStore as createOptimisticStore$1, createProjection as createProjection$1, createRenderEffect as createRenderEffect$1, createSignal as createSignal$1, createStore as createStore$1, setSnapshotCapture, releaseSnapshotScope, getNextChildId, onCleanup, isDisposed, peekNextChildId, clearSnapshots, flush, markSnapshotScope, mapArray, repeat, createRevealOrder, DEV as DEV$1 } from '@solidjs/signals';
       const fn = typeof child === "function" && child.length > 0;
-      return fn ? untrack(() => child(() => {
+      return fn ? keyed ? untrack(() => child(c), "<Show>") : untrack(() => child(() => {
         if (!untrack(condition)) throw narrowedError("Show");
@@ -840,3 +840,8 @@ return conditionValue();
       } );
-      func = () => prevFunc() || (condition() ? [index, conditionValue, mp] : undefined);
+      func = () => {
+        const prev = prevFunc();
+        if (prev) return prev;
+        const c = condition();
+        return c ? [index, c, conditionValue, mp] : undefined;
+      };
     }
@@ -850,6 +855,6 @@ return func;
     if (!sel) return props.fallback;
-    const [index, conditionValue, mp] = sel;
+    const [index, value, conditionValue, mp] = sel;
     const child = mp.children;
     const fn = typeof child === "function" && child.length > 0;
-    return fn ? untrack(() => child(() => {
+    return fn ? mp.keyed ? untrack(() => child(value), "<Match>") : untrack(() => child(() => {
       if (untrack(switchFunc)()?.[0] !== index) throw narrowedError("Match");
@@ -856,0 +861,0 @@ return conditionValue();

dist/server.cjs

@@ -35,2 +35,5 @@ 'use strict';
 }
+function consumeClientComputedSlot(owner) {
+  if (owner?.id != null) nextChildIdFor(owner);
+}
 function getNextChildId(owner) {
@@ -120,2 +123,3 @@ return nextChildIdFor(owner);
       if (ownerPool.length < OWNER_POOL_MAX) {
+        node.id = undefined;
         node._parent = null;
@@ -147,2 +151,3 @@ node._nextSibling = null;
   if (self && ownerPool.length < OWNER_POOL_MAX) {
+    node.id = undefined;
     node._parent = null;
@@ -750,4 +755,39 @@ node._nextSibling = null;
 }
+function proxySource(read) {
+  return new Proxy({}, {
+    get(_, property, receiver) {
+      if (property === signals.$PROXY) return receiver;
+      const source = read() || {};
+      return source[property];
+    },
+    has(_, property) {
+      if (property === signals.$PROXY) return true;
+      return property in (read() || {});
+    },
+    ownKeys() {
+      return Object.keys(read() || {});
+    },
+    getOwnPropertyDescriptor(_, property) {
+      return {
+        configurable: true,
+        enumerable: true,
+        get() {
+          return (read() || {})[property];
+        }
+      };
+    }
+  });
+}
+function merge(...sources) {
+  for (let i = 0; i < sources.length; i++) {
+    if (typeof sources[i] === "function") {
+      sources[i] = proxySource(createMemo(sources[i]));
+    }
+  }
+  return signals.merge(...sources);
+}
 function mapArray(list, mapFn, options = {}) {
-  return createMemo(() => {
+  const indexes = mapFn.length > 1;
+  const parent = currentOwner;
+  const read = createMemo(() => {
     const items = list();
@@ -765,3 +805,3 @@ const s = [];
           parent._childCount = 0;
-          s.push(mapFn(() => items[i], () => i));
+          s.push(options.keyed === false ? indexes ? mapFn(() => items[i], i) : mapFn(() => items[i]) : typeof options.keyed === "function" ? indexes ? mapFn(() => items[i], () => i) : mapFn(() => items[i]) : indexes ? mapFn(items[i], () => i) : mapFn(items[i]));
         }
@@ -780,5 +820,8 @@ } finally {
   });
+  consumeClientComputedSlot(parent);
+  return read;
 }
 function repeat(count, mapFn, options = {}) {
-  return createMemo(() => {
+  const parent = currentOwner;
+  const read = createMemo(() => {
     const len = count();
@@ -811,2 +854,4 @@ const offset = options.from?.() || 0;
   });
+  consumeClientComputedSlot(parent);
+  return read;
 }
@@ -1195,3 +1240,3 @@ const ErrorContext = {
       if (typeof child === "function" && child.length > 0) {
-        return child(() => when);
+        return props.keyed ? child(when) : child(() => when);
       }
@@ -1216,3 +1261,3 @@ return child;
         const c = conds[i].children;
-        return typeof c === "function" && c.length > 0 ? c(() => w) : c;
+        return typeof c === "function" && c.length > 0 ? conds[i].keyed ? c(w) : c(() => w) : c;
       }
@@ -1448,6 +1493,2 @@ }
 });
-Object.defineProperty(exports, "merge", {
-  enumerable: true,
-  get: function () { return signals.merge; }
-});
 Object.defineProperty(exports, "omit", {
@@ -1511,2 +1552,3 @@ enumerable: true,
 exports.mapArray = mapArray;
+exports.merge = merge;
 exports.onCleanup = onCleanup;
@@ -1513,0 +1555,0 @@ exports.onSettled = onSettled;

dist/server.js

@@ -1,3 +0,3 @@
-import { NotReadyError, $REFRESH, isWrappable, NoOwnerError, ContextNotFoundError, flatten } from '@solidjs/signals';
-export { $PROXY, $REFRESH, $TRACK, NotReadyError, enableExternalSource, enforceLoadingBoundary, flatten, isEqual, isWrappable, merge, omit, snapshot, storePath } from '@solidjs/signals';
+import { NotReadyError, $REFRESH, merge as merge$1, isWrappable, NoOwnerError, ContextNotFoundError, $PROXY, flatten } from '@solidjs/signals';
+export { $PROXY, $REFRESH, $TRACK, NotReadyError, enableExternalSource, enforceLoadingBoundary, flatten, isEqual, isWrappable, omit, snapshot, storePath } from '@solidjs/signals';
 
@@ -34,2 +34,5 @@ const NoHydrateContext = {
 }
+function consumeClientComputedSlot(owner) {
+  if (owner?.id != null) nextChildIdFor(owner);
+}
 function getNextChildId(owner) {
@@ -119,2 +122,3 @@ return nextChildIdFor(owner);
       if (ownerPool.length < OWNER_POOL_MAX) {
+        node.id = undefined;
         node._parent = null;
@@ -146,2 +150,3 @@ node._nextSibling = null;
   if (self && ownerPool.length < OWNER_POOL_MAX) {
+    node.id = undefined;
     node._parent = null;
@@ -749,4 +754,39 @@ node._nextSibling = null;
 }
+function proxySource(read) {
+  return new Proxy({}, {
+    get(_, property, receiver) {
+      if (property === $PROXY) return receiver;
+      const source = read() || {};
+      return source[property];
+    },
+    has(_, property) {
+      if (property === $PROXY) return true;
+      return property in (read() || {});
+    },
+    ownKeys() {
+      return Object.keys(read() || {});
+    },
+    getOwnPropertyDescriptor(_, property) {
+      return {
+        configurable: true,
+        enumerable: true,
+        get() {
+          return (read() || {})[property];
+        }
+      };
+    }
+  });
+}
+function merge(...sources) {
+  for (let i = 0; i < sources.length; i++) {
+    if (typeof sources[i] === "function") {
+      sources[i] = proxySource(createMemo(sources[i]));
+    }
+  }
+  return merge$1(...sources);
+}
 function mapArray(list, mapFn, options = {}) {
-  return createMemo(() => {
+  const indexes = mapFn.length > 1;
+  const parent = currentOwner;
+  const read = createMemo(() => {
     const items = list();
@@ -764,3 +804,3 @@ const s = [];
           parent._childCount = 0;
-          s.push(mapFn(() => items[i], () => i));
+          s.push(options.keyed === false ? indexes ? mapFn(() => items[i], i) : mapFn(() => items[i]) : typeof options.keyed === "function" ? indexes ? mapFn(() => items[i], () => i) : mapFn(() => items[i]) : indexes ? mapFn(items[i], () => i) : mapFn(items[i]));
         }
@@ -779,5 +819,8 @@ } finally {
   });
+  consumeClientComputedSlot(parent);
+  return read;
 }
 function repeat(count, mapFn, options = {}) {
-  return createMemo(() => {
+  const parent = currentOwner;
+  const read = createMemo(() => {
     const len = count();
@@ -810,2 +853,4 @@ const offset = options.from?.() || 0;
   });
+  consumeClientComputedSlot(parent);
+  return read;
 }
@@ -1194,3 +1239,3 @@ const ErrorContext = {
       if (typeof child === "function" && child.length > 0) {
-        return child(() => when);
+        return props.keyed ? child(when) : child(() => when);
       }
@@ -1215,3 +1260,3 @@ return child;
         const c = conds[i].children;
-        return typeof c === "function" && c.length > 0 ? c(() => w) : c;
+        return typeof c === "function" && c.length > 0 ? conds[i].keyed ? c(w) : c(() => w) : c;
       }
@@ -1411,2 +1456,2 @@ }
 
-export { $DEVCOMP, DEV, Errored, For, Hydration, Loading, Match, NoHydrateContext, NoHydration, Repeat, Reveal, Show, Switch, action, children, createComponent, createContext, createDeepProxy, createEffect, createErrorBoundary, createLoadingBoundary, createMemo, createOptimistic, createOptimisticStore, createOwner, createProjection, createReaction, createRenderEffect, createRevealOrder, createRoot, createSignal, createStore, createTrackedEffect, createUniqueId, deep, enableHydration, flush, getNextChildId, getObserver, getOwner, isDisposed, isPending, isRefreshing, latest, lazy, mapArray, onCleanup, onSettled, reconcile, refresh, repeat, resolve, runWithOwner, sharedConfig, ssrHandleError, untrack, useContext };
+export { $DEVCOMP, DEV, Errored, For, Hydration, Loading, Match, NoHydrateContext, NoHydration, Repeat, Reveal, Show, Switch, action, children, createComponent, createContext, createDeepProxy, createEffect, createErrorBoundary, createLoadingBoundary, createMemo, createOptimistic, createOptimisticStore, createOwner, createProjection, createReaction, createRenderEffect, createRevealOrder, createRoot, createSignal, createStore, createTrackedEffect, createUniqueId, deep, enableHydration, flush, getNextChildId, getObserver, getOwner, isDisposed, isPending, isRefreshing, latest, lazy, mapArray, merge, onCleanup, onSettled, reconcile, refresh, repeat, resolve, runWithOwner, sharedConfig, ssrHandleError, untrack, useContext };

dist/solid.cjs

@@ -787,3 +787,3 @@ 'use strict';
       const fn = typeof child === "function" && child.length > 0;
-      return fn ? signals.untrack(() => child(() => {
+      return fn ? keyed ? signals.untrack(() => child(c), IS_DEV) : signals.untrack(() => child(() => {
         if (!signals.untrack(condition)) throw narrowedError("Show");
@@ -812,3 +812,8 @@ return conditionValue();
       });
-      func = () => prevFunc() || (condition() ? [index, conditionValue, mp] : undefined);
+      func = () => {
+        const prev = prevFunc();
+        if (prev) return prev;
+        const c = condition();
+        return c ? [index, c, conditionValue, mp] : undefined;
+      };
     }
@@ -822,6 +827,6 @@ return func;
     if (!sel) return props.fallback;
-    const [index, conditionValue, mp] = sel;
+    const [index, value, conditionValue, mp] = sel;
     const child = mp.children;
     const fn = typeof child === "function" && child.length > 0;
-    return fn ? signals.untrack(() => child(() => {
+    return fn ? mp.keyed ? signals.untrack(() => child(value), IS_DEV) : signals.untrack(() => child(() => {
       if (signals.untrack(switchFunc)()?.[0] !== index) throw narrowedError("Match");
@@ -828,0 +833,0 @@ return conditionValue();

dist/solid.js

@@ -786,3 +786,3 @@ import { getContext, createMemo as createMemo$1, flatten, createRoot, setContext, createOwner, runWithOwner, createEffect as createEffect$1, createErrorBoundary as createErrorBoundary$1, createLoadingBoundary as createLoadingBoundary$1, getOwner, createOptimistic as createOptimistic$1, createOptimisticStore as createOptimisticStore$1, createProjection as createProjection$1, createRenderEffect as createRenderEffect$1, createSignal as createSignal$1, createStore as createStore$1, setSnapshotCapture, releaseSnapshotScope, getNextChildId, onCleanup, isDisposed, peekNextChildId, clearSnapshots, flush, markSnapshotScope, untrack, mapArray, repeat, createRevealOrder } from '@solidjs/signals';
       const fn = typeof child === "function" && child.length > 0;
-      return fn ? untrack(() => child(() => {
+      return fn ? keyed ? untrack(() => child(c), IS_DEV) : untrack(() => child(() => {
         if (!untrack(condition)) throw narrowedError("Show");
@@ -811,3 +811,8 @@ return conditionValue();
       });
-      func = () => prevFunc() || (condition() ? [index, conditionValue, mp] : undefined);
+      func = () => {
+        const prev = prevFunc();
+        if (prev) return prev;
+        const c = condition();
+        return c ? [index, c, conditionValue, mp] : undefined;
+      };
     }
@@ -821,6 +826,6 @@ return func;
     if (!sel) return props.fallback;
-    const [index, conditionValue, mp] = sel;
+    const [index, value, conditionValue, mp] = sel;
     const child = mp.children;
     const fn = typeof child === "function" && child.length > 0;
-    return fn ? untrack(() => child(() => {
+    return fn ? mp.keyed ? untrack(() => child(value), IS_DEV) : untrack(() => child(() => {
       if (untrack(switchFunc)()?.[0] !== index) throw narrowedError("Match");
@@ -827,0 +832,0 @@ return conditionValue();

package.json

 {
   "name": "solid-js",
   "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.11",
+  "version": "2.0.0-beta.12",
   "author": "Ryan Carniato",
@@ -110,3 +110,3 @@ "license": "MIT",
   "dependencies": {
-    "@solidjs/signals": "^2.0.0-beta.11",
+    "@solidjs/signals": "^2.0.0-beta.12",
     "csstype": "^3.1.0",
@@ -113,0 +113,0 @@ "seroval": "~1.5.0",

types-cjs/client/flow.d.cts

@@ -6,14 +6,22 @@ import type { Accessor, RevealOrder } from "@solidjs/signals";
 type ConditionalRenderCallback<T> = (item: Accessor<NonNullable<T>>) => SolidElement;
+type KeyedConditionalRenderCallback<T> = (item: NonNullable<T>) => SolidElement;
 type ConditionalRenderChildren<T, F extends ConditionalRenderCallback<T> = ConditionalRenderCallback<T>> = SolidElement | NonZeroParams<F>;
+type KeyedConditionalRenderChildren<T, F extends KeyedConditionalRenderCallback<T> = KeyedConditionalRenderCallback<T>> = SolidElement | NonZeroParams<F>;
 /**
  * Creates a list of elements from a list.
  *
- * Receives a map function as its child that takes list element and index
- * accessors and returns a JSX element; if the list is empty, an optional
- * `fallback` is rendered instead.
+ * Receives a map function as its child and returns a JSX element for each
+ * list item; if the list is empty, an optional `fallback` is rendered instead.
  *
+ * The child callback shape follows the keying mode:
+ * - default / `keyed={true}` receives `(item, index)` where `item` is the raw
+ *   row value and `index` is an accessor.
+ * - `keyed={false}` receives `(item, index)` where `item` is an accessor and
+ *   `index` is a stable number.
+ * - `keyed={(item) => key}` receives accessors for both arguments.
+ *
  * @example
  * ```tsx
  * <For each={items} fallback={<div>No items</div>}>
- *   {(item, index) => <div data-index={index()}>{item()}</div>}
+ *   {(item, index) => <div data-index={index()}>{item.label}</div>}
  * </For>
@@ -27,3 +35,15 @@ * ```
     fallback?: SolidElement;
-    keyed?: boolean | ((item: T[number]) => any);
+    keyed?: true;
+    children: (item: T[number], index: Accessor<number>) => U;
+}): SolidElement;
+export declare function For<T extends readonly any[], U extends SolidElement>(props: {
+    each: T | undefined | null | false;
+    fallback?: SolidElement;
+    keyed: false;
+    children: (item: Accessor<T[number]>, index: number) => U;
+}): SolidElement;
+export declare function For<T extends readonly any[], U extends SolidElement>(props: {
+    each: T | undefined | null | false;
+    fallback?: SolidElement;
+    keyed: (item: T[number]) => any;
     children: (item: Accessor<T[number]>, index: Accessor<number>) => U;
@@ -56,6 +76,6 @@ }): SolidElement;
  *
- * The function-child form receives an accessor for the narrowed value — call
- * it to read. Without `keyed` (default), the child is preserved across
- * truthy values; with `keyed`, the child remounts whenever the value's
- * identity changes.
+ * The function-child form receives a narrowed value. Without `keyed`
+ * (default), it receives an accessor and the child is preserved across truthy
+ * values; with `keyed`, it receives the raw value and remounts whenever the
+ * value's identity changes.
  *
@@ -71,7 +91,25 @@ * @example
  */
+export declare function Show<T>(props: {
+    when: T | undefined | null | false;
+    keyed: true;
+    fallback?: SolidElement;
+    children: SolidElement;
+}): SolidElement;
+export declare function Show<T, F extends KeyedConditionalRenderCallback<T>>(props: {
+    when: T | undefined | null | false;
+    keyed: true;
+    fallback?: SolidElement;
+    children: NonZeroParams<F>;
+}): SolidElement;
+export declare function Show<T>(props: {
+    when: T | undefined | null | false;
+    keyed?: false;
+    fallback?: SolidElement;
+    children: SolidElement;
+}): SolidElement;
 export declare function Show<T, F extends ConditionalRenderCallback<T>>(props: {
     when: T | undefined | null | false;
-    keyed?: boolean;
+    keyed?: false;
     fallback?: SolidElement;
-    children: ConditionalRenderChildren<T, F>;
+    children: NonZeroParams<F>;
 }): SolidElement;
@@ -103,5 +141,15 @@ /**
     when: T | undefined | null | false;
-    keyed?: boolean;
+    keyed?: false;
     children: ConditionalRenderChildren<T, F>;
 };
+export type KeyedMatchProps<T, F extends KeyedConditionalRenderCallback<T> = KeyedConditionalRenderCallback<T>> = {
+    when: T | undefined | null | false;
+    keyed: true;
+    children: KeyedConditionalRenderChildren<T, F>;
+};
+export type AnyMatchProps<T> = MatchProps<T> | KeyedMatchProps<T> | {
+    when: T | undefined | null | false;
+    keyed?: boolean;
+    children: SolidElement;
+};
 /**
@@ -111,4 +159,5 @@ * A branch inside a `<Switch>`. The first `<Match>` whose `when` is truthy
  *
- * Like `<Show>`, `<Match>` supports a function child that receives an
- * accessor for the narrowed value.
+ * Like `<Show>`, `<Match>` supports a function child. Non-keyed children
+ * receive an accessor for the narrowed value; keyed children receive the raw
+ * narrowed value.
  *
@@ -129,3 +178,15 @@ * @example
  */
+export declare function Match<T>(props: {
+    when: T | undefined | null | false;
+    keyed: true;
+    children: SolidElement;
+}): SolidElement;
+export declare function Match<T, F extends KeyedConditionalRenderCallback<T>>(props: KeyedMatchProps<T, F>): SolidElement;
+export declare function Match<T>(props: {
+    when: T | undefined | null | false;
+    keyed?: false;
+    children: SolidElement;
+}): SolidElement;
 export declare function Match<T, F extends ConditionalRenderCallback<T>>(props: MatchProps<T, F>): SolidElement;
+export declare function Match<T>(props: AnyMatchProps<T>): SolidElement;
 /**
@@ -132,0 +193,0 @@ * Catches uncaught errors inside its subtree and renders fallback content

types-cjs/server/flow.d.cts

@@ -6,6 +6,7 @@ import type { Accessor, RevealOrder } from "./signals.cjs";
 type ConditionalRenderCallback<T> = (item: Accessor<NonNullable<T>>) => SolidElement;
+type KeyedConditionalRenderCallback<T> = (item: NonNullable<T>) => SolidElement;
 type ConditionalRenderChildren<T, F extends ConditionalRenderCallback<T> = ConditionalRenderCallback<T>> = SolidElement | NonZeroParams<F>;
+type KeyedConditionalRenderChildren<T, F extends KeyedConditionalRenderCallback<T> = KeyedConditionalRenderCallback<T>> = SolidElement | NonZeroParams<F>;
 /**
  * Creates a list of elements from a list
- *
  * @description https://docs.solidjs.com/reference/components/for
@@ -16,3 +17,15 @@ */
     fallback?: SolidElement;
-    keyed?: boolean | ((item: T[number]) => any);
+    keyed?: true;
+    children: (item: T[number], index: Accessor<number>) => U;
+}): SolidElement;
+export declare function For<T extends readonly any[], U extends SolidElement>(props: {
+    each: T | undefined | null | false;
+    fallback?: SolidElement;
+    keyed: false;
+    children: (item: Accessor<T[number]>, index: number) => U;
+}): SolidElement;
+export declare function For<T extends readonly any[], U extends SolidElement>(props: {
+    each: T | undefined | null | false;
+    fallback?: SolidElement;
+    keyed: (item: T[number]) => any;
     children: (item: Accessor<T[number]>, index: Accessor<number>) => U;
@@ -35,7 +48,25 @@ }): SolidElement;
  */
+export declare function Show<T>(props: {
+    when: T | undefined | null | false;
+    keyed: true;
+    fallback?: SolidElement;
+    children: SolidElement;
+}): SolidElement;
+export declare function Show<T, F extends KeyedConditionalRenderCallback<T>>(props: {
+    when: T | undefined | null | false;
+    keyed: true;
+    fallback?: SolidElement;
+    children: NonZeroParams<F>;
+}): SolidElement;
+export declare function Show<T>(props: {
+    when: T | undefined | null | false;
+    keyed?: false;
+    fallback?: SolidElement;
+    children: SolidElement;
+}): SolidElement;
 export declare function Show<T, F extends ConditionalRenderCallback<T>>(props: {
     when: T | undefined | null | false;
-    keyed?: boolean;
+    keyed?: false;
     fallback?: SolidElement;
-    children: ConditionalRenderChildren<T, F>;
+    children: NonZeroParams<F>;
 }): SolidElement;
@@ -52,5 +83,15 @@ /**
     when: T | undefined | null | false;
-    keyed?: boolean;
+    keyed?: false;
     children: ConditionalRenderChildren<T, F>;
 };
+export type KeyedMatchProps<T, F extends KeyedConditionalRenderCallback<T> = KeyedConditionalRenderCallback<T>> = {
+    when: T | undefined | null | false;
+    keyed: true;
+    children: KeyedConditionalRenderChildren<T, F>;
+};
+export type AnyMatchProps<T> = MatchProps<T> | KeyedMatchProps<T> | {
+    when: T | undefined | null | false;
+    keyed?: boolean;
+    children: SolidElement;
+};
 /**
@@ -60,3 +101,15 @@ * Selects a content based on condition when inside a `<Switch>` control flow
  */
+export declare function Match<T>(props: {
+    when: T | undefined | null | false;
+    keyed: true;
+    children: SolidElement;
+}): SolidElement;
+export declare function Match<T, F extends KeyedConditionalRenderCallback<T>>(props: KeyedMatchProps<T, F>): SolidElement;
+export declare function Match<T>(props: {
+    when: T | undefined | null | false;
+    keyed?: false;
+    children: SolidElement;
+}): SolidElement;
 export declare function Match<T, F extends ConditionalRenderCallback<T>>(props: MatchProps<T, F>): SolidElement;
+export declare function Match<T>(props: AnyMatchProps<T>): SolidElement;
 /**
@@ -63,0 +116,0 @@ * Catches uncaught errors inside components and renders a fallback content

types-cjs/server/signals.d.cts

@@ -5,7 +5,7 @@ import { $REFRESH } from "@solidjs/signals";
 export { flatten } from "@solidjs/signals";
-export { snapshot, merge, omit, storePath, $PROXY, $TRACK } from "@solidjs/signals";
+export { snapshot, omit, storePath, $PROXY, $TRACK } from "@solidjs/signals";
 import type { Accessor as SignalAccessor, Refreshable } from "@solidjs/signals";
 export type SourceAccessor<T> = Refreshable<SignalAccessor<T>>;
 export type { Accessor, ComputeFunction, EffectFunction, EffectBundle, EffectOptions, ExternalSource, ExternalSourceConfig, ExternalSourceFactory, MemoOptions, NoInfer, SignalOptions, Setter, Signal, Owner, Refreshable, Maybe, Store, StoreSetter, StoreNode, NotWrappable, SolidStore, Merge, Omit, Context, ContextRecord, IQueue, StorePathRange, ArrayFilterFn, CustomPartial, Part, PathSetter } from "@solidjs/signals";
-import type { Accessor, ComputeFunction, EffectFunction, EffectBundle, EffectOptions, MemoOptions, SignalOptions, Signal, Owner, Store, StoreSetter, Context } from "@solidjs/signals";
+import type { Accessor, ComputeFunction, EffectFunction, EffectBundle, EffectOptions, MemoOptions, SignalOptions, Signal, Merge, Owner, Store, StoreSetter, Context } from "@solidjs/signals";
 import { sharedConfig, NoHydrateContext } from "./shared.cjs";
@@ -94,6 +94,15 @@ type Disposable = () => void;
 export declare function deep<T extends object>(store: Store<T>): Store<T>;
-export declare function mapArray<T, U>(list: Accessor<readonly T[] | undefined | null | false>, mapFn: (v: Accessor<T>, i: Accessor<number>) => U, options?: {
-    keyed?: boolean | ((item: T) => any);
+export declare function merge<T extends unknown[]>(...sources: T): Merge<T>;
+export declare function mapArray<T, U>(list: Accessor<readonly T[] | undefined | null | false>, mapFn: (v: T, i: Accessor<number>) => U, options?: {
+    keyed?: true;
     fallback?: Accessor<any>;
 }): () => U[];
+export declare function mapArray<T, U>(list: Accessor<readonly T[] | undefined | null | false>, mapFn: (v: Accessor<T>, i: number) => U, options: {
+    keyed: false;
+    fallback?: Accessor<any>;
+}): () => U[];
+export declare function mapArray<T, U>(list: Accessor<readonly T[] | undefined | null | false>, mapFn: (v: Accessor<T>, i: Accessor<number>) => U, options: {
+    keyed: (item: T) => any;
+    fallback?: Accessor<any>;
+}): () => U[];
 export declare function repeat<T>(count: Accessor<number>, mapFn: (i: number) => T, options?: {
@@ -100,0 +109,0 @@ fallback?: Accessor<any>;

types/client/flow.d.ts

@@ -6,14 +6,22 @@ import type { Accessor, RevealOrder } from "@solidjs/signals";
 type ConditionalRenderCallback<T> = (item: Accessor<NonNullable<T>>) => SolidElement;
+type KeyedConditionalRenderCallback<T> = (item: NonNullable<T>) => SolidElement;
 type ConditionalRenderChildren<T, F extends ConditionalRenderCallback<T> = ConditionalRenderCallback<T>> = SolidElement | NonZeroParams<F>;
+type KeyedConditionalRenderChildren<T, F extends KeyedConditionalRenderCallback<T> = KeyedConditionalRenderCallback<T>> = SolidElement | NonZeroParams<F>;
 /**
  * Creates a list of elements from a list.
  *
- * Receives a map function as its child that takes list element and index
- * accessors and returns a JSX element; if the list is empty, an optional
- * `fallback` is rendered instead.
+ * Receives a map function as its child and returns a JSX element for each
+ * list item; if the list is empty, an optional `fallback` is rendered instead.
  *
+ * The child callback shape follows the keying mode:
+ * - default / `keyed={true}` receives `(item, index)` where `item` is the raw
+ *   row value and `index` is an accessor.
+ * - `keyed={false}` receives `(item, index)` where `item` is an accessor and
+ *   `index` is a stable number.
+ * - `keyed={(item) => key}` receives accessors for both arguments.
+ *
  * @example
  * ```tsx
  * <For each={items} fallback={<div>No items</div>}>
- *   {(item, index) => <div data-index={index()}>{item()}</div>}
+ *   {(item, index) => <div data-index={index()}>{item.label}</div>}
  * </For>
@@ -27,3 +35,15 @@ * ```
     fallback?: SolidElement;
-    keyed?: boolean | ((item: T[number]) => any);
+    keyed?: true;
+    children: (item: T[number], index: Accessor<number>) => U;
+}): SolidElement;
+export declare function For<T extends readonly any[], U extends SolidElement>(props: {
+    each: T | undefined | null | false;
+    fallback?: SolidElement;
+    keyed: false;
+    children: (item: Accessor<T[number]>, index: number) => U;
+}): SolidElement;
+export declare function For<T extends readonly any[], U extends SolidElement>(props: {
+    each: T | undefined | null | false;
+    fallback?: SolidElement;
+    keyed: (item: T[number]) => any;
     children: (item: Accessor<T[number]>, index: Accessor<number>) => U;
@@ -56,6 +76,6 @@ }): SolidElement;
  *
- * The function-child form receives an accessor for the narrowed value — call
- * it to read. Without `keyed` (default), the child is preserved across
- * truthy values; with `keyed`, the child remounts whenever the value's
- * identity changes.
+ * The function-child form receives a narrowed value. Without `keyed`
+ * (default), it receives an accessor and the child is preserved across truthy
+ * values; with `keyed`, it receives the raw value and remounts whenever the
+ * value's identity changes.
  *
@@ -71,7 +91,25 @@ * @example
  */
+export declare function Show<T>(props: {
+    when: T | undefined | null | false;
+    keyed: true;
+    fallback?: SolidElement;
+    children: SolidElement;
+}): SolidElement;
+export declare function Show<T, F extends KeyedConditionalRenderCallback<T>>(props: {
+    when: T | undefined | null | false;
+    keyed: true;
+    fallback?: SolidElement;
+    children: NonZeroParams<F>;
+}): SolidElement;
+export declare function Show<T>(props: {
+    when: T | undefined | null | false;
+    keyed?: false;
+    fallback?: SolidElement;
+    children: SolidElement;
+}): SolidElement;
 export declare function Show<T, F extends ConditionalRenderCallback<T>>(props: {
     when: T | undefined | null | false;
-    keyed?: boolean;
+    keyed?: false;
     fallback?: SolidElement;
-    children: ConditionalRenderChildren<T, F>;
+    children: NonZeroParams<F>;
 }): SolidElement;
@@ -103,5 +141,15 @@ /**
     when: T | undefined | null | false;
-    keyed?: boolean;
+    keyed?: false;
     children: ConditionalRenderChildren<T, F>;
 };
+export type KeyedMatchProps<T, F extends KeyedConditionalRenderCallback<T> = KeyedConditionalRenderCallback<T>> = {
+    when: T | undefined | null | false;
+    keyed: true;
+    children: KeyedConditionalRenderChildren<T, F>;
+};
+export type AnyMatchProps<T> = MatchProps<T> | KeyedMatchProps<T> | {
+    when: T | undefined | null | false;
+    keyed?: boolean;
+    children: SolidElement;
+};
 /**
@@ -111,4 +159,5 @@ * A branch inside a `<Switch>`. The first `<Match>` whose `when` is truthy
  *
- * Like `<Show>`, `<Match>` supports a function child that receives an
- * accessor for the narrowed value.
+ * Like `<Show>`, `<Match>` supports a function child. Non-keyed children
+ * receive an accessor for the narrowed value; keyed children receive the raw
+ * narrowed value.
  *
@@ -129,3 +178,15 @@ * @example
  */
+export declare function Match<T>(props: {
+    when: T | undefined | null | false;
+    keyed: true;
+    children: SolidElement;
+}): SolidElement;
+export declare function Match<T, F extends KeyedConditionalRenderCallback<T>>(props: KeyedMatchProps<T, F>): SolidElement;
+export declare function Match<T>(props: {
+    when: T | undefined | null | false;
+    keyed?: false;
+    children: SolidElement;
+}): SolidElement;
 export declare function Match<T, F extends ConditionalRenderCallback<T>>(props: MatchProps<T, F>): SolidElement;
+export declare function Match<T>(props: AnyMatchProps<T>): SolidElement;
 /**
@@ -132,0 +193,0 @@ * Catches uncaught errors inside its subtree and renders fallback content

types/server/flow.d.ts

@@ -6,6 +6,7 @@ import type { Accessor, RevealOrder } from "./signals.js";
 type ConditionalRenderCallback<T> = (item: Accessor<NonNullable<T>>) => SolidElement;
+type KeyedConditionalRenderCallback<T> = (item: NonNullable<T>) => SolidElement;
 type ConditionalRenderChildren<T, F extends ConditionalRenderCallback<T> = ConditionalRenderCallback<T>> = SolidElement | NonZeroParams<F>;
+type KeyedConditionalRenderChildren<T, F extends KeyedConditionalRenderCallback<T> = KeyedConditionalRenderCallback<T>> = SolidElement | NonZeroParams<F>;
 /**
  * Creates a list of elements from a list
- *
  * @description https://docs.solidjs.com/reference/components/for
@@ -16,3 +17,15 @@ */
     fallback?: SolidElement;
-    keyed?: boolean | ((item: T[number]) => any);
+    keyed?: true;
+    children: (item: T[number], index: Accessor<number>) => U;
+}): SolidElement;
+export declare function For<T extends readonly any[], U extends SolidElement>(props: {
+    each: T | undefined | null | false;
+    fallback?: SolidElement;
+    keyed: false;
+    children: (item: Accessor<T[number]>, index: number) => U;
+}): SolidElement;
+export declare function For<T extends readonly any[], U extends SolidElement>(props: {
+    each: T | undefined | null | false;
+    fallback?: SolidElement;
+    keyed: (item: T[number]) => any;
     children: (item: Accessor<T[number]>, index: Accessor<number>) => U;
@@ -35,7 +48,25 @@ }): SolidElement;
  */
+export declare function Show<T>(props: {
+    when: T | undefined | null | false;
+    keyed: true;
+    fallback?: SolidElement;
+    children: SolidElement;
+}): SolidElement;
+export declare function Show<T, F extends KeyedConditionalRenderCallback<T>>(props: {
+    when: T | undefined | null | false;
+    keyed: true;
+    fallback?: SolidElement;
+    children: NonZeroParams<F>;
+}): SolidElement;
+export declare function Show<T>(props: {
+    when: T | undefined | null | false;
+    keyed?: false;
+    fallback?: SolidElement;
+    children: SolidElement;
+}): SolidElement;
 export declare function Show<T, F extends ConditionalRenderCallback<T>>(props: {
     when: T | undefined | null | false;
-    keyed?: boolean;
+    keyed?: false;
     fallback?: SolidElement;
-    children: ConditionalRenderChildren<T, F>;
+    children: NonZeroParams<F>;
 }): SolidElement;
@@ -52,5 +83,15 @@ /**
     when: T | undefined | null | false;
-    keyed?: boolean;
+    keyed?: false;
     children: ConditionalRenderChildren<T, F>;
 };
+export type KeyedMatchProps<T, F extends KeyedConditionalRenderCallback<T> = KeyedConditionalRenderCallback<T>> = {
+    when: T | undefined | null | false;
+    keyed: true;
+    children: KeyedConditionalRenderChildren<T, F>;
+};
+export type AnyMatchProps<T> = MatchProps<T> | KeyedMatchProps<T> | {
+    when: T | undefined | null | false;
+    keyed?: boolean;
+    children: SolidElement;
+};
 /**
@@ -60,3 +101,15 @@ * Selects a content based on condition when inside a `<Switch>` control flow
  */
+export declare function Match<T>(props: {
+    when: T | undefined | null | false;
+    keyed: true;
+    children: SolidElement;
+}): SolidElement;
+export declare function Match<T, F extends KeyedConditionalRenderCallback<T>>(props: KeyedMatchProps<T, F>): SolidElement;
+export declare function Match<T>(props: {
+    when: T | undefined | null | false;
+    keyed?: false;
+    children: SolidElement;
+}): SolidElement;
 export declare function Match<T, F extends ConditionalRenderCallback<T>>(props: MatchProps<T, F>): SolidElement;
+export declare function Match<T>(props: AnyMatchProps<T>): SolidElement;
 /**
@@ -63,0 +116,0 @@ * Catches uncaught errors inside components and renders a fallback content

types/server/signals.d.ts

@@ -5,7 +5,7 @@ import { $REFRESH } from "@solidjs/signals";
 export { flatten } from "@solidjs/signals";
-export { snapshot, merge, omit, storePath, $PROXY, $TRACK } from "@solidjs/signals";
+export { snapshot, omit, storePath, $PROXY, $TRACK } from "@solidjs/signals";
 import type { Accessor as SignalAccessor, Refreshable } from "@solidjs/signals";
 export type SourceAccessor<T> = Refreshable<SignalAccessor<T>>;
 export type { Accessor, ComputeFunction, EffectFunction, EffectBundle, EffectOptions, ExternalSource, ExternalSourceConfig, ExternalSourceFactory, MemoOptions, NoInfer, SignalOptions, Setter, Signal, Owner, Refreshable, Maybe, Store, StoreSetter, StoreNode, NotWrappable, SolidStore, Merge, Omit, Context, ContextRecord, IQueue, StorePathRange, ArrayFilterFn, CustomPartial, Part, PathSetter } from "@solidjs/signals";
-import type { Accessor, ComputeFunction, EffectFunction, EffectBundle, EffectOptions, MemoOptions, SignalOptions, Signal, Owner, Store, StoreSetter, Context } from "@solidjs/signals";
+import type { Accessor, ComputeFunction, EffectFunction, EffectBundle, EffectOptions, MemoOptions, SignalOptions, Signal, Merge, Owner, Store, StoreSetter, Context } from "@solidjs/signals";
 import { sharedConfig, NoHydrateContext } from "./shared.js";
@@ -94,6 +94,15 @@ type Disposable = () => void;
 export declare function deep<T extends object>(store: Store<T>): Store<T>;
-export declare function mapArray<T, U>(list: Accessor<readonly T[] | undefined | null | false>, mapFn: (v: Accessor<T>, i: Accessor<number>) => U, options?: {
-    keyed?: boolean | ((item: T) => any);
+export declare function merge<T extends unknown[]>(...sources: T): Merge<T>;
+export declare function mapArray<T, U>(list: Accessor<readonly T[] | undefined | null | false>, mapFn: (v: T, i: Accessor<number>) => U, options?: {
+    keyed?: true;
     fallback?: Accessor<any>;
 }): () => U[];
+export declare function mapArray<T, U>(list: Accessor<readonly T[] | undefined | null | false>, mapFn: (v: Accessor<T>, i: number) => U, options: {
+    keyed: false;
+    fallback?: Accessor<any>;
+}): () => U[];
+export declare function mapArray<T, U>(list: Accessor<readonly T[] | undefined | null | false>, mapFn: (v: Accessor<T>, i: Accessor<number>) => U, options: {
+    keyed: (item: T) => any;
+    fallback?: Accessor<any>;
+}): () => U[];
 export declare function repeat<T>(count: Accessor<number>, mapFn: (i: number) => T, options?: {
@@ -100,0 +109,0 @@ fallback?: Accessor<any>;

New alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

391795

3.78%

Lines of code

8535

2.77%

Worsened metrics

Number of low supply chain risk alerts

17

13.33%

Dependency changes

• Updated

  @solidjs/signals@^2.0.0-beta.12