@preact/signals-react 3.0.1 → 3.1.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @preact/signals-react
 
+## 3.1.1
+
+### Patch Changes
+
+- [#684](https://github.com/preactjs/signals/pull/684) [`a34eab2`](https://github.com/preactjs/signals/commit/a34eab2ab5a46f4ef90e05e2af6b99747191333c) Thanks [@JoviDeCroock](https://github.com/JoviDeCroock)! - Ensure we build the thing
+
+## 3.1.0
+
+### Minor Changes
+
+- [#627](https://github.com/preactjs/signals/pull/627) [`acfa71c`](https://github.com/preactjs/signals/commit/acfa71cff279ba8bb62a9852c3c47ca4c9461e4d) Thanks [@JoviDeCroock](https://github.com/JoviDeCroock)! - Add a `@preact/signals-react/utils` entrypoint containing common Signal utilities
+
 ## 3.0.1
 
 ### Patch Changes

package/README.md

@@ -132,6 +132,84 @@ To opt into this optimization, simply pass the signal directly instead of access
 > **Note**
 > The content is wrapped in a React Fragment due to React 18's newer, more strict children types.
 
+## Utility Components and Hooks
+
+The `@preact/signals-react/utils` package provides additional utility components and hooks to make working with signals even easier.
+
+### Show Component
+
+The `Show` component provides a declarative way to conditionally render content based on a signal's value.
+
+```js
+import { Show } from "@preact/signals-react/utils";
+import { signal } from "@preact/signals-react";
+
+const isVisible = signal(false);
+
+function App() {
+	return (
+		<Show when={isVisible} fallback={<p>Nothing to see here</p>}>
+			<p>Now you see me!</p>
+		</Show>
+	);
+}
+
+// You can also use a function to access the value
+function App() {
+	return <Show when={isVisible}>{value => <p>The value is {value}</p>}</Show>;
+}
+```
+
+### For Component
+
+The `For` component helps you render lists from signal arrays with automatic caching of rendered items.
+
+```js
+import { For } from "@preact/signals-react/utils";
+import { signal } from "@preact/signals-react";
+
+const items = signal(["A", "B", "C"]);
+
+function App() {
+	return (
+		<For each={items} fallback={<p>No items</p>}>
+			{(item, index) => <div key={index}>Item: {item}</div>}
+		</For>
+	);
+}
+```
+
+### Additional Hooks
+
+#### useLiveSignal
+
+The `useLiveSignal` hook allows you to create a local signal that stays synchronized with an external signal.
+
+```js
+import { useLiveSignal } from "@preact/signals-react/utils";
+import { signal } from "@preact/signals-react";
+
+const external = signal(0);
+
+function Component() {
+	const local = useLiveSignal(external);
+	// local will automatically update when external changes
+}
+```
+
+#### useSignalRef
+
+The `useSignalRef` hook creates a signal that behaves like a React ref with a `.current` property.
+
+```js
+import { useSignalRef } from "@preact/signals-react/utils";
+
+function Component() {
+	const ref = useSignalRef(null);
+	return <div ref={ref}>The ref's value is {ref.current}</div>;
+}
+```
+
 ## Limitations
 
 This version of React integration does not support passing signals as DOM attributes. Support for this may be added at a later date.

package/dist/signals.d.ts

@@ -1,10 +1,10 @@
-import { signal, computed, batch, effect, Signal, type ReadonlySignal, untracked } from "@preact/signals-core";
-import type { ReactElement } from "react";
-import { useSignal, useComputed, useSignalEffect } from "@preact/signals-react/runtime";
-export { signal, computed, batch, effect, Signal, type ReadonlySignal, useSignal, useComputed, useSignalEffect, untracked, };
-declare module "@preact/signals-core" {
-    interface Signal extends ReactElement {
-    }
-    interface ReadonlySignal extends ReactElement {
-    }
-}
+import { signal, computed, batch, effect, Signal, type ReadonlySignal, untracked } from "@preact/signals-core";
+import type { ReactElement } from "react";
+import { useSignal, useComputed, useSignalEffect } from "@preact/signals-react/runtime";
+export { signal, computed, batch, effect, Signal, type ReadonlySignal, useSignal, useComputed, useSignalEffect, untracked, };
+declare module "@preact/signals-core" {
+    interface Signal extends ReactElement {
+    }
+    interface ReadonlySignal extends ReactElement {
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preact/signals-react",
-  "version": "3.0.1",
+  "version": "3.1.1",
   "license": "MIT",
   "description": "Manage state with style in React",
   "keywords": [],
@@ -37,7 +37,14 @@
       "import": "./runtime/dist/runtime.mjs",
       "require": "./runtime/dist/runtime.js"
     },
-    "./runtime/package.json": "./runtime/package.json"
+    "./runtime/package.json": "./runtime/package.json",
+    "./utils": {
+      "types": "./utils/dist/index.d.ts",
+      "browser": "./utils/dist/utils.module.js",
+      "import": "./utils/dist/utils.mjs",
+      "require": "./utils/dist/utils.js"
+    },
+    "./utils/package.json": "./utils/package.json"
   },
   "mangle": "../../mangle.json",
   "files": [
@@ -46,6 +53,9 @@
     "runtime/dist",
     "runtime/src",
     "runtime/package.json",
+    "utils/dist",
+    "utils/src",
+    "utils/package.json",
     "CHANGELOG.md",
     "LICENSE",
     "README.md"

package/runtime/dist/index.d.ts

@@ -1,63 +1,63 @@
-import { Signal, ReadonlySignal } from "@preact/signals-core";
-export declare function wrapJsx<T>(jsx: T): T;
-declare const symDispose: unique symbol;
-interface Effect {
-    _sources: object | undefined;
-    _start(): () => void;
-    _callback(): void;
-    _dispose(): void;
-}
-/**
- * Use this flag to represent a bare `useSignals` call that doesn't manually
- * close its effect store and relies on auto-closing when the next useSignals is
- * called or after a microtask
- */
-declare const UNMANAGED = 0;
-/**
- * Use this flag to represent a `useSignals` call that is manually closed by a
- * try/finally block in a component's render method. This is the default usage
- * that the react-transform plugin uses.
- */
-declare const MANAGED_COMPONENT = 1;
-/**
- * Use this flag to represent a `useSignals` call that is manually closed by a
- * try/finally block in a hook body. This is the default usage that the
- * react-transform plugin uses.
- */
-declare const MANAGED_HOOK = 2;
-/**
- * An enum defining how this store is used. See the documentation for each enum
- * member for more details.
- * @see {@link UNMANAGED}
- * @see {@link MANAGED_COMPONENT}
- * @see {@link MANAGED_HOOK}
- */
-declare type EffectStoreUsage = typeof UNMANAGED | typeof MANAGED_COMPONENT | typeof MANAGED_HOOK;
-export interface EffectStore {
-    /**
-     * An enum defining how this hook is used and whether it is invoked in a
-     * component's body or hook body. See the comment on `EffectStoreUsage` for
-     * more details.
-     */
-    readonly _usage: EffectStoreUsage;
-    readonly effect: Effect;
-    subscribe(onStoreChange: () => void): () => void;
-    getSnapshot(): number;
-    /** startEffect - begin tracking signals used in this component */
-    _start(): void;
-    /** finishEffect - stop tracking the signals used in this component */
-    f(): void;
-    [symDispose](): void;
-}
-export declare function ensureFinalCleanup(): void;
-/**
- * Custom hook to create the effect to track signals used during render and
- * subscribe to changes to rerender the component when the signals change.
- */
-export declare function _useSignalsImplementation(_usage?: EffectStoreUsage): EffectStore;
-export declare function useSignals(usage?: EffectStoreUsage): EffectStore;
-export declare function useSignal<T>(value: T): Signal<T>;
-export declare function useSignal<T = undefined>(): Signal<T | undefined>;
-export declare function useComputed<T>(compute: () => T): ReadonlySignal<T>;
-export declare function useSignalEffect(cb: () => void | (() => void)): void;
-export {};
+import { Signal, ReadonlySignal } from "@preact/signals-core";
+export declare function wrapJsx<T>(jsx: T): T;
+declare const symDispose: unique symbol;
+interface Effect {
+    _sources: object | undefined;
+    _start(): () => void;
+    _callback(): void;
+    _dispose(): void;
+}
+/**
+ * Use this flag to represent a bare `useSignals` call that doesn't manually
+ * close its effect store and relies on auto-closing when the next useSignals is
+ * called or after a microtask
+ */
+declare const UNMANAGED = 0;
+/**
+ * Use this flag to represent a `useSignals` call that is manually closed by a
+ * try/finally block in a component's render method. This is the default usage
+ * that the react-transform plugin uses.
+ */
+declare const MANAGED_COMPONENT = 1;
+/**
+ * Use this flag to represent a `useSignals` call that is manually closed by a
+ * try/finally block in a hook body. This is the default usage that the
+ * react-transform plugin uses.
+ */
+declare const MANAGED_HOOK = 2;
+/**
+ * An enum defining how this store is used. See the documentation for each enum
+ * member for more details.
+ * @see {@link UNMANAGED}
+ * @see {@link MANAGED_COMPONENT}
+ * @see {@link MANAGED_HOOK}
+ */
+type EffectStoreUsage = typeof UNMANAGED | typeof MANAGED_COMPONENT | typeof MANAGED_HOOK;
+export interface EffectStore {
+    /**
+     * An enum defining how this hook is used and whether it is invoked in a
+     * component's body or hook body. See the comment on `EffectStoreUsage` for
+     * more details.
+     */
+    readonly _usage: EffectStoreUsage;
+    readonly effect: Effect;
+    subscribe(onStoreChange: () => void): () => void;
+    getSnapshot(): number;
+    /** startEffect - begin tracking signals used in this component */
+    _start(): void;
+    /** finishEffect - stop tracking the signals used in this component */
+    f(): void;
+    [symDispose](): void;
+}
+export declare function ensureFinalCleanup(): void;
+/**
+ * Custom hook to create the effect to track signals used during render and
+ * subscribe to changes to rerender the component when the signals change.
+ */
+export declare function _useSignalsImplementation(_usage?: EffectStoreUsage): EffectStore;
+export declare function useSignals(usage?: EffectStoreUsage): EffectStore;
+export declare function useSignal<T>(value: T): Signal<T>;
+export declare function useSignal<T = undefined>(): Signal<T | undefined>;
+export declare function useComputed<T>(compute: () => T): ReadonlySignal<T>;
+export declare function useSignalEffect(cb: () => void | (() => void)): void;
+export {};

package/utils/dist/index.d.ts

@@ -0,0 +1,18 @@
+import { ReadonlySignal, Signal } from "@preact/signals-core";
+interface ShowProps<T = boolean> {
+    when: Signal<T> | ReadonlySignal<T>;
+    fallback?: JSX.Element;
+    children: JSX.Element | ((value: T) => JSX.Element);
+}
+export declare function Show<T = boolean>(props: ShowProps<T>): JSX.Element | null;
+interface ForProps<T> {
+    each: Signal<Array<T>> | ReadonlySignal<Array<T>> | (() => Signal<Array<T>> | ReadonlySignal<Array<T>>);
+    fallback?: JSX.Element;
+    children: (value: T, index: number) => JSX.Element;
+}
+export declare function For<T>(props: ForProps<T>): JSX.Element | null;
+export declare function useLiveSignal<T>(value: Signal<T> | ReadonlySignal<T>): Signal<Signal<T> | ReadonlySignal<T>>;
+export declare function useSignalRef<T>(value: T): Signal<T> & {
+    current: T;
+};
+export {};

package/utils/dist/utils.js

@@ -0,0 +1 @@
+var r=require("@preact/signals-react"),n=require("@preact/signals-react/runtime"),t=require("react"),e={configurable:!0,get:function(){return this.value},set:function(r){this.value=r}};exports.For=function(r){n.useSignals();var e=t.useMemo(function(){return new Map},[]),u=("function"==typeof r.each?r.each():r.each).value;if(!u.length)return r.fallback||null;var i=u.map(function(n,t){if(!e.has(n))e.set(n,r.children(n,t));return e.get(n)});return t.createElement(t.Fragment,{children:i})};exports.Show=function(r){n.useSignals();var t=r.when.value;if(!t)return r.fallback||null;else return"function"==typeof r.children?r.children(t):r.children};exports.useLiveSignal=function(n){var t=r.useSignal(n);if(t.peek()!==n)t.value=n;return t};exports.useSignalRef=function(n){var t=r.useSignal(n);if(!("current"in t))Object.defineProperty(t,"current",e);return t};//# sourceMappingURL=utils.js.map

package/utils/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../src/index.ts"],"sourcesContent":["import { ReadonlySignal, Signal } from \"@preact/signals-core\";\nimport { useSignal } from \"@preact/signals-react\";\nimport { useSignals } from \"@preact/signals-react/runtime\";\nimport { Fragment, createElement, useMemo } from \"react\";\n\ninterface ShowProps<T = boolean> {\n\twhen: Signal<T> | ReadonlySignal<T>;\n\tfallback?: JSX.Element;\n\tchildren: JSX.Element | ((value: T) => JSX.Element);\n}\n\nexport function Show<T = boolean>(props: ShowProps<T>): JSX.Element | null {\n\tuseSignals();\n\tconst value = props.when.value;\n\tif (!value) return props.fallback || null;\n\treturn typeof props.children === \"function\"\n\t\t? props.children(value)\n\t\t: props.children;\n}\n\ninterface ForProps<T> {\n\teach:\n\t\t| Signal<Array<T>>\n\t\t| ReadonlySignal<Array<T>>\n\t\t| (() => Signal<Array<T>> | ReadonlySignal<Array<T>>);\n\tfallback?: JSX.Element;\n\tchildren: (value: T, index: number) => JSX.Element;\n}\n\nexport function For<T>(props: ForProps<T>): JSX.Element | null {\n\tuseSignals();\n\tconst cache = useMemo(() => new Map(), []);\n\tlet list = (\n\t\t(typeof props.each === \"function\" ? props.each() : props.each) as Signal<\n\t\t\tArray<T>\n\t\t>\n\t).value;\n\n\tif (!list.length) return props.fallback || null;\n\n\tconst items = list.map((value, key) => {\n\t\tif (!cache.has(value)) {\n\t\t\tcache.set(value, props.children(value, key));\n\t\t}\n\t\treturn cache.get(value);\n\t});\n\treturn createElement(Fragment, { children: items });\n}\n\nexport function useLiveSignal<T>(value: Signal<T> | ReadonlySignal<T>) {\n\tconst s = useSignal(value);\n\tif (s.peek() !== value) s.value = value;\n\treturn s;\n}\n\nexport function useSignalRef<T>(value: T) {\n\tconst ref = useSignal(value) as Signal<T> & { current: T };\n\tif (!(\"current\" in ref))\n\t\tObject.defineProperty(ref, \"current\", refSignalProto);\n\treturn ref;\n}\nconst refSignalProto = {\n\tconfigurable: true,\n\tget(this: Signal) {\n\t\treturn this.value;\n\t},\n\tset(this: Signal, v: any) {\n\t\tthis.value = v;\n\t},\n};\n"],"names":["refSignalProto","configurable","get","this","value","set","v","exports","For","props","useSignals","cache","useMemo","Map","list","each","length","fallback","items","map","key","has","children","createElement","Fragment","Show","when","useLiveSignal","s","useSignal","peek","useSignalRef","ref","Object","defineProperty"],"mappings":"qGA6DMA,EAAiB,CACtBC,cAAc,EACdC,IAAG,WACF,OAAOC,KAAKC,KACb,EACAC,aAAkBC,GACjBH,KAAKC,MAAQE,CACd,GACAC,QAAAC,aAxCsBC,GACtBC,EAAAA,aACA,IAAMC,EAAQC,EAAAA,QAAQ,WAAM,OAAA,IAAIC,GAAK,EAAE,IACnCC,GACoB,mBAAfL,EAAMM,KAAsBN,EAAMM,OAASN,EAAMM,MAGxDX,MAEF,IAAKU,EAAKE,OAAQ,OAAOP,EAAMQ,UAAY,KAE3C,IAAMC,EAAQJ,EAAKK,IAAI,SAACf,EAAOgB,GAC9B,IAAKT,EAAMU,IAAIjB,GACdO,EAAMN,IAAID,EAAOK,EAAMa,SAASlB,EAAOgB,IAExC,OAAOT,EAAMT,IAAIE,EAClB,GACA,OAAOmB,EAAaA,cAACC,EAAQA,SAAE,CAAEF,SAAUJ,GAC5C,EAsBCX,QAAAkB,cA1DiChB,GACjCC,EAAAA,aACA,IAAMN,EAAQK,EAAMiB,KAAKtB,MACzB,IAAKA,EAAO,OAAOK,EAAMQ,UAAY,UACrC,MAAiC,mBAAnBR,EAAMa,SACjBb,EAAMa,SAASlB,GACfK,EAAMa,QACV,EAmDCf,QAAAoB,cApBe,SAAiBvB,GAChC,IAAMwB,EAAIC,EAAAA,UAAUzB,GACpB,GAAIwB,EAAEE,SAAW1B,EAAOwB,EAAExB,MAAQA,EAClC,OAAOwB,CACR,EAgBCrB,QAAAwB,sBAd+B3B,GAC/B,IAAM4B,EAAMH,EAASA,UAACzB,GACtB,KAAM,YAAa4B,GAClBC,OAAOC,eAAeF,EAAK,UAAWhC,GACvC,OAAOgC,CACR"}

package/utils/dist/utils.min.js

@@ -0,0 +1 @@
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@preact/signals-react"),require("@preact/signals-react/runtime"),require("react")):"function"==typeof define&&define.amd?define(["exports","@preact/signals-react","@preact/signals-react/runtime","react"],n):n((e||self).reactSignalsutils={},e.signalsReact,e.reactSignalsRuntime,e.react)}(this,function(e,n,t,r){var i={configurable:!0,get:function(){return this.value},set:function(e){this.value=e}};e.For=function(e){t.useSignals();var n=r.useMemo(function(){return new Map},[]),i=("function"==typeof e.each?e.each():e.each).value;if(!i.length)return e.fallback||null;var u=i.map(function(t,r){if(!n.has(t))n.set(t,e.children(t,r));return n.get(t)});return r.createElement(r.Fragment,{children:u})};e.Show=function(e){t.useSignals();var n=e.when.value;if(!n)return e.fallback||null;else return"function"==typeof e.children?e.children(n):e.children};e.useLiveSignal=function(e){var t=n.useSignal(e);if(t.peek()!==e)t.value=e;return t};e.useSignalRef=function(e){var t=n.useSignal(e);if(!("current"in t))Object.defineProperty(t,"current",i);return t}});//# sourceMappingURL=utils.min.js.map

package/utils/dist/utils.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.min.js","sources":["../src/index.ts"],"sourcesContent":["import { ReadonlySignal, Signal } from \"@preact/signals-core\";\nimport { useSignal } from \"@preact/signals-react\";\nimport { useSignals } from \"@preact/signals-react/runtime\";\nimport { Fragment, createElement, useMemo } from \"react\";\n\ninterface ShowProps<T = boolean> {\n\twhen: Signal<T> | ReadonlySignal<T>;\n\tfallback?: JSX.Element;\n\tchildren: JSX.Element | ((value: T) => JSX.Element);\n}\n\nexport function Show<T = boolean>(props: ShowProps<T>): JSX.Element | null {\n\tuseSignals();\n\tconst value = props.when.value;\n\tif (!value) return props.fallback || null;\n\treturn typeof props.children === \"function\"\n\t\t? props.children(value)\n\t\t: props.children;\n}\n\ninterface ForProps<T> {\n\teach:\n\t\t| Signal<Array<T>>\n\t\t| ReadonlySignal<Array<T>>\n\t\t| (() => Signal<Array<T>> | ReadonlySignal<Array<T>>);\n\tfallback?: JSX.Element;\n\tchildren: (value: T, index: number) => JSX.Element;\n}\n\nexport function For<T>(props: ForProps<T>): JSX.Element | null {\n\tuseSignals();\n\tconst cache = useMemo(() => new Map(), []);\n\tlet list = (\n\t\t(typeof props.each === \"function\" ? props.each() : props.each) as Signal<\n\t\t\tArray<T>\n\t\t>\n\t).value;\n\n\tif (!list.length) return props.fallback || null;\n\n\tconst items = list.map((value, key) => {\n\t\tif (!cache.has(value)) {\n\t\t\tcache.set(value, props.children(value, key));\n\t\t}\n\t\treturn cache.get(value);\n\t});\n\treturn createElement(Fragment, { children: items });\n}\n\nexport function useLiveSignal<T>(value: Signal<T> | ReadonlySignal<T>) {\n\tconst s = useSignal(value);\n\tif (s.peek() !== value) s.value = value;\n\treturn s;\n}\n\nexport function useSignalRef<T>(value: T) {\n\tconst ref = useSignal(value) as Signal<T> & { current: T };\n\tif (!(\"current\" in ref))\n\t\tObject.defineProperty(ref, \"current\", refSignalProto);\n\treturn ref;\n}\nconst refSignalProto = {\n\tconfigurable: true,\n\tget(this: Signal) {\n\t\treturn this.value;\n\t},\n\tset(this: Signal, v: any) {\n\t\tthis.value = v;\n\t},\n};\n"],"names":["refSignalProto","configurable","get","this","value","set","v","exports","For","props","useSignals","cache","useMemo","Map","list","each","length","fallback","items","map","key","has","children","createElement","Fragment","Show","when","useLiveSignal","s","useSignal","peek","useSignalRef","ref","Object","defineProperty"],"mappings":"ybA6DA,IAAMA,EAAiB,CACtBC,cAAc,EACdC,IAAG,WACF,OAAOC,KAAKC,KACb,EACAC,aAAkBC,GACjBH,KAAKC,MAAQE,CACd,GACAC,EAAAC,aAxCsBC,GACtBC,EAAAA,aACA,IAAMC,EAAQC,EAAAA,QAAQ,WAAM,OAAA,IAAIC,GAAK,EAAE,IACnCC,GACoB,mBAAfL,EAAMM,KAAsBN,EAAMM,OAASN,EAAMM,MAGxDX,MAEF,IAAKU,EAAKE,OAAQ,OAAOP,EAAMQ,UAAY,KAE3C,IAAMC,EAAQJ,EAAKK,IAAI,SAACf,EAAOgB,GAC9B,IAAKT,EAAMU,IAAIjB,GACdO,EAAMN,IAAID,EAAOK,EAAMa,SAASlB,EAAOgB,IAExC,OAAOT,EAAMT,IAAIE,EAClB,GACA,OAAOmB,EAAaA,cAACC,EAAQA,SAAE,CAAEF,SAAUJ,GAC5C,EAsBCX,EAAAkB,cA1DiChB,GACjCC,EAAAA,aACA,IAAMN,EAAQK,EAAMiB,KAAKtB,MACzB,IAAKA,EAAO,OAAOK,EAAMQ,UAAY,UACrC,MAAiC,mBAAnBR,EAAMa,SACjBb,EAAMa,SAASlB,GACfK,EAAMa,QACV,EAmDCf,EAAAoB,cApBe,SAAiBvB,GAChC,IAAMwB,EAAIC,EAAAA,UAAUzB,GACpB,GAAIwB,EAAEE,SAAW1B,EAAOwB,EAAExB,MAAQA,EAClC,OAAOwB,CACR,EAgBCrB,EAAAwB,sBAd+B3B,GAC/B,IAAM4B,EAAMH,EAASA,UAACzB,GACtB,KAAM,YAAa4B,GAClBC,OAAOC,eAAeF,EAAK,UAAWhC,GACvC,OAAOgC,CACR,CASC"}

package/utils/dist/utils.mjs

@@ -0,0 +1 @@
+import{useSignal}from"@preact/signals-react";import{useSignals as t}from"@preact/signals-react/runtime";import{useMemo as n,createElement as r,Fragment as e}from"react";function c(n){t();const r=n.when.value;if(!r)return n.fallback||null;else return"function"==typeof n.children?n.children(r):n.children}function i(c){t();const i=n(()=>new Map,[]);let o=("function"==typeof c.each?c.each():c.each).value;if(!o.length)return c.fallback||null;const u=o.map((t,n)=>{if(!i.has(t))i.set(t,c.children(t,n));return i.get(t)});return r(e,{children:u})}function o(t){const n=useSignal(t);if(n.peek()!==t)n.value=t;return n}function u(t){const n=useSignal(t);if(!("current"in n))Object.defineProperty(n,"current",f);return n}const f={configurable:!0,get(){return this.value},set(t){this.value=t}};export{i as For,c as Show,o as useLiveSignal,u as useSignalRef};//# sourceMappingURL=utils.mjs.map

package/utils/dist/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","sources":["../src/index.ts"],"sourcesContent":["import { ReadonlySignal, Signal } from \"@preact/signals-core\";\nimport { useSignal } from \"@preact/signals-react\";\nimport { useSignals } from \"@preact/signals-react/runtime\";\nimport { Fragment, createElement, useMemo } from \"react\";\n\ninterface ShowProps<T = boolean> {\n\twhen: Signal<T> | ReadonlySignal<T>;\n\tfallback?: JSX.Element;\n\tchildren: JSX.Element | ((value: T) => JSX.Element);\n}\n\nexport function Show<T = boolean>(props: ShowProps<T>): JSX.Element | null {\n\tuseSignals();\n\tconst value = props.when.value;\n\tif (!value) return props.fallback || null;\n\treturn typeof props.children === \"function\"\n\t\t? props.children(value)\n\t\t: props.children;\n}\n\ninterface ForProps<T> {\n\teach:\n\t\t| Signal<Array<T>>\n\t\t| ReadonlySignal<Array<T>>\n\t\t| (() => Signal<Array<T>> | ReadonlySignal<Array<T>>);\n\tfallback?: JSX.Element;\n\tchildren: (value: T, index: number) => JSX.Element;\n}\n\nexport function For<T>(props: ForProps<T>): JSX.Element | null {\n\tuseSignals();\n\tconst cache = useMemo(() => new Map(), []);\n\tlet list = (\n\t\t(typeof props.each === \"function\" ? props.each() : props.each) as Signal<\n\t\t\tArray<T>\n\t\t>\n\t).value;\n\n\tif (!list.length) return props.fallback || null;\n\n\tconst items = list.map((value, key) => {\n\t\tif (!cache.has(value)) {\n\t\t\tcache.set(value, props.children(value, key));\n\t\t}\n\t\treturn cache.get(value);\n\t});\n\treturn createElement(Fragment, { children: items });\n}\n\nexport function useLiveSignal<T>(value: Signal<T> | ReadonlySignal<T>) {\n\tconst s = useSignal(value);\n\tif (s.peek() !== value) s.value = value;\n\treturn s;\n}\n\nexport function useSignalRef<T>(value: T) {\n\tconst ref = useSignal(value) as Signal<T> & { current: T };\n\tif (!(\"current\" in ref))\n\t\tObject.defineProperty(ref, \"current\", refSignalProto);\n\treturn ref;\n}\nconst refSignalProto = {\n\tconfigurable: true,\n\tget(this: Signal) {\n\t\treturn this.value;\n\t},\n\tset(this: Signal, v: any) {\n\t\tthis.value = v;\n\t},\n};\n"],"names":["useSignal","useSignals","useMemo","createElement","Fragment","Show","props","value","when","fallback","children","For","cache","Map","list","each","length","items","map","key","has","set","get","useLiveSignal","s","peek","useSignalRef","ref","Object","defineProperty","refSignalProto","configurable","v","this"],"mappings":"OAWgBA,cAAA,6CAAAC,MAAA,kDAAAC,mBAAAC,cAAAC,MAAA,QAAA,SAAAC,EAAkBC,GACjCL,IACA,MAAMM,EAAQD,EAAME,KAAKD,MACzB,IAAKA,EAAO,OAAOD,EAAMG,UAAY,UACrC,MAAiC,mBAAnBH,EAAMI,SACjBJ,EAAMI,SAASH,GACfD,EAAMI,QACV,CAWgB,SAAAC,EAAOL,GACtBL,IACA,MAAMW,EAAQV,EAAQ,IAAM,IAAIW,IAAO,IACvC,IAAIC,GACoB,mBAAfR,EAAMS,KAAsBT,EAAMS,OAAST,EAAMS,MAGxDR,MAEF,IAAKO,EAAKE,OAAQ,OAAOV,EAAMG,UAAY,KAE3C,MAAMQ,EAAQH,EAAKI,IAAI,CAACX,EAAOY,KAC9B,IAAKP,EAAMQ,IAAIb,GACdK,EAAMS,IAAId,EAAOD,EAAMI,SAASH,EAAOY,IAExC,OAAOP,EAAMU,IAAIf,EAAK,GAEvB,OAAOJ,EAAcC,EAAU,CAAEM,SAAUO,GAC5C,CAEM,SAAUM,EAAiBhB,GAChC,MAAMiB,EAAIxB,UAAUO,GACpB,GAAIiB,EAAEC,SAAWlB,EAAOiB,EAAEjB,MAAQA,EAClC,OAAOiB,CACR,CAEgB,SAAAE,EAAgBnB,GAC/B,MAAMoB,EAAM3B,UAAUO,GACtB,KAAM,YAAaoB,GAClBC,OAAOC,eAAeF,EAAK,UAAWG,GACvC,OAAOH,CACR,CACA,MAAMG,EAAiB,CACtBC,cAAc,EACdT,MACC,YAAYf,KACb,EACAc,IAAkBW,GACjBC,KAAK1B,MAAQyB,CACd,UACArB,SAAAN,UAAAkB,mBAAAG"}

package/utils/dist/utils.module.js

@@ -0,0 +1 @@
+import{useSignal}from"@preact/signals-react";import{useSignals as r}from"@preact/signals-react/runtime";import{useMemo as n,createElement as t,Fragment as e}from"react";function i(n){r();var t=n.when.value;if(!t)return n.fallback||null;else return"function"==typeof n.children?n.children(t):n.children}function u(i){r();var u=n(function(){return new Map},[]),f=("function"==typeof i.each?i.each():i.each).value;if(!f.length)return i.fallback||null;var c=f.map(function(r,n){if(!u.has(r))u.set(r,i.children(r,n));return u.get(r)});return t(e,{children:c})}function f(r){var n=useSignal(r);if(n.peek()!==r)n.value=r;return n}function c(r){var n=useSignal(r);if(!("current"in n))Object.defineProperty(n,"current",o);return n}var o={configurable:!0,get:function(){return this.value},set:function(r){this.value=r}};export{u as For,i as Show,f as useLiveSignal,c as useSignalRef};//# sourceMappingURL=utils.module.js.map

package/utils/dist/utils.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.module.js","sources":["../src/index.ts"],"sourcesContent":["import { ReadonlySignal, Signal } from \"@preact/signals-core\";\nimport { useSignal } from \"@preact/signals-react\";\nimport { useSignals } from \"@preact/signals-react/runtime\";\nimport { Fragment, createElement, useMemo } from \"react\";\n\ninterface ShowProps<T = boolean> {\n\twhen: Signal<T> | ReadonlySignal<T>;\n\tfallback?: JSX.Element;\n\tchildren: JSX.Element | ((value: T) => JSX.Element);\n}\n\nexport function Show<T = boolean>(props: ShowProps<T>): JSX.Element | null {\n\tuseSignals();\n\tconst value = props.when.value;\n\tif (!value) return props.fallback || null;\n\treturn typeof props.children === \"function\"\n\t\t? props.children(value)\n\t\t: props.children;\n}\n\ninterface ForProps<T> {\n\teach:\n\t\t| Signal<Array<T>>\n\t\t| ReadonlySignal<Array<T>>\n\t\t| (() => Signal<Array<T>> | ReadonlySignal<Array<T>>);\n\tfallback?: JSX.Element;\n\tchildren: (value: T, index: number) => JSX.Element;\n}\n\nexport function For<T>(props: ForProps<T>): JSX.Element | null {\n\tuseSignals();\n\tconst cache = useMemo(() => new Map(), []);\n\tlet list = (\n\t\t(typeof props.each === \"function\" ? props.each() : props.each) as Signal<\n\t\t\tArray<T>\n\t\t>\n\t).value;\n\n\tif (!list.length) return props.fallback || null;\n\n\tconst items = list.map((value, key) => {\n\t\tif (!cache.has(value)) {\n\t\t\tcache.set(value, props.children(value, key));\n\t\t}\n\t\treturn cache.get(value);\n\t});\n\treturn createElement(Fragment, { children: items });\n}\n\nexport function useLiveSignal<T>(value: Signal<T> | ReadonlySignal<T>) {\n\tconst s = useSignal(value);\n\tif (s.peek() !== value) s.value = value;\n\treturn s;\n}\n\nexport function useSignalRef<T>(value: T) {\n\tconst ref = useSignal(value) as Signal<T> & { current: T };\n\tif (!(\"current\" in ref))\n\t\tObject.defineProperty(ref, \"current\", refSignalProto);\n\treturn ref;\n}\nconst refSignalProto = {\n\tconfigurable: true,\n\tget(this: Signal) {\n\t\treturn this.value;\n\t},\n\tset(this: Signal, v: any) {\n\t\tthis.value = v;\n\t},\n};\n"],"names":["Show","props","useSignals","value","when","fallback","children","For","cache","useMemo","Map","list","each","length","items","map","key","has","set","get","createElement","Fragment","useLiveSignal","s","useSignal","peek","useSignalRef","ref","Object","defineProperty","refSignalProto","configurable","this","v"],"mappings":"kLAWgBA,EAAkBC,GACjCC,IACA,IAAMC,EAAQF,EAAMG,KAAKD,MACzB,IAAKA,EAAO,OAAOF,EAAMI,UAAY,UACrC,MAAiC,mBAAnBJ,EAAMK,SACjBL,EAAMK,SAASH,GACfF,EAAMK,QACV,UAWgBC,EAAON,GACtBC,IACA,IAAMM,EAAQC,EAAQ,WAAM,OAAA,IAAIC,GAAK,EAAE,IACnCC,GACoB,mBAAfV,EAAMW,KAAsBX,EAAMW,OAASX,EAAMW,MAGxDT,MAEF,IAAKQ,EAAKE,OAAQ,OAAOZ,EAAMI,UAAY,KAE3C,IAAMS,EAAQH,EAAKI,IAAI,SAACZ,EAAOa,GAC9B,IAAKR,EAAMS,IAAId,GACdK,EAAMU,IAAIf,EAAOF,EAAMK,SAASH,EAAOa,IAExC,OAAOR,EAAMW,IAAIhB,EAClB,GACA,OAAOiB,EAAcC,EAAU,CAAEf,SAAUQ,GAC5C,CAEgB,SAAAQ,EAAiBnB,GAChC,IAAMoB,EAAIC,UAAUrB,GACpB,GAAIoB,EAAEE,SAAWtB,EAAOoB,EAAEpB,MAAQA,EAClC,OAAOoB,CACR,UAEgBG,EAAgBvB,GAC/B,IAAMwB,EAAMH,UAAUrB,GACtB,KAAM,YAAawB,GAClBC,OAAOC,eAAeF,EAAK,UAAWG,GACvC,OAAOH,CACR,CACA,IAAMG,EAAiB,CACtBC,cAAc,EACdZ,IAAG,WACF,OAAOa,KAAK7B,KACb,EACAe,aAAkBe,GACjBD,KAAK7B,MAAQ8B,CACd,UACA1B,SAAAP,UAAAsB,mBAAAI"}

package/utils/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@preact/signals-react-utils",
+  "description": "Sub package for @preact/signals-react that contains some useful utilities",
+  "private": true,
+  "amdName": "reactSignalsutils",
+  "main": "dist/utils.js",
+  "module": "dist/utils.module.js",
+  "unpkg": "dist/utils.min.js",
+  "types": "dist/index.d.ts",
+  "source": "src/index.ts",
+  "mangle": "../../../mangle.json",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "browser": "./dist/utils.module.js",
+      "import": "./dist/utils.mjs",
+      "require": "./dist/utils.js"
+    }
+  },
+  "dependencies": {
+    "@preact/signals-core": "workspace:^1.3.0"
+  },
+  "peerDependencies": {
+    "@preact/signals-react": "workspace:*",
+    "react": "^16.14.0 || 17.x || 18.x || 19.x"
+  }
+}

package/utils/src/index.ts

@@ -0,0 +1,70 @@
+import { ReadonlySignal, Signal } from "@preact/signals-core";
+import { useSignal } from "@preact/signals-react";
+import { useSignals } from "@preact/signals-react/runtime";
+import { Fragment, createElement, useMemo } from "react";
+
+interface ShowProps<T = boolean> {
+	when: Signal<T> | ReadonlySignal<T>;
+	fallback?: JSX.Element;
+	children: JSX.Element | ((value: T) => JSX.Element);
+}
+
+export function Show<T = boolean>(props: ShowProps<T>): JSX.Element | null {
+	useSignals();
+	const value = props.when.value;
+	if (!value) return props.fallback || null;
+	return typeof props.children === "function"
+		? props.children(value)
+		: props.children;
+}
+
+interface ForProps<T> {
+	each:
+		| Signal<Array<T>>
+		| ReadonlySignal<Array<T>>
+		| (() => Signal<Array<T>> | ReadonlySignal<Array<T>>);
+	fallback?: JSX.Element;
+	children: (value: T, index: number) => JSX.Element;
+}
+
+export function For<T>(props: ForProps<T>): JSX.Element | null {
+	useSignals();
+	const cache = useMemo(() => new Map(), []);
+	let list = (
+		(typeof props.each === "function" ? props.each() : props.each) as Signal<
+			Array<T>
+		>
+	).value;
+
+	if (!list.length) return props.fallback || null;
+
+	const items = list.map((value, key) => {
+		if (!cache.has(value)) {
+			cache.set(value, props.children(value, key));
+		}
+		return cache.get(value);
+	});
+	return createElement(Fragment, { children: items });
+}
+
+export function useLiveSignal<T>(value: Signal<T> | ReadonlySignal<T>) {
+	const s = useSignal(value);
+	if (s.peek() !== value) s.value = value;
+	return s;
+}
+
+export function useSignalRef<T>(value: T) {
+	const ref = useSignal(value) as Signal<T> & { current: T };
+	if (!("current" in ref))
+		Object.defineProperty(ref, "current", refSignalProto);
+	return ref;
+}
+const refSignalProto = {
+	configurable: true,
+	get(this: Signal) {
+		return this.value;
+	},
+	set(this: Signal, v: any) {
+		this.value = v;
+	},
+};