@e280/strata 0.3.0 → 0.3.1

package/README.md

@@ -339,12 +339,18 @@ note, the *items* that the tracker tracks can be any object, or symbol.. the tra
 import * as react from "react"
 import {react as strata} from "@e280/strata"
 
-export const {component, useStrata} = strata(react)
+export const {
+  component,
+  useStrata,
+  useOnce,
+  useSignal,
+  useDerived,
+} = strata(react)
 ```
 
 ### ⚛️ `component` enables fully automatic reactive re-rendering
 ```ts
-import {component, useStrata} from "./strata.js"
+import {component} from "./strata.js"
 
 const $count = signal(0)
 
@@ -356,7 +362,7 @@ export const MyCounter = component(() => {
 
 ### ⚛️ `useStrata` for a manual hands-on approach (plays nicer with hmr)
 ```ts
-import {component, useStrata} from "./strata.js"
+import {useStrata} from "./strata.js"
 
 const $count = signal(0)
 
@@ -367,6 +373,17 @@ export const MyCounter = () => {
 }
 ```
 
+### ⚛️ `useSignal` for local component state
+```ts
+import {useSignal} from "./strata.js"
+
+export const MyCounter = () => {
+  const $count = useSignal(0)
+  const add = () => $count.value++
+  return <button onClick={add}>{$count()}</button>
+}
+```
+
 
 
 <br/><br/>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@e280/strata",
-	"version": "0.3.0",
+	"version": "0.3.1",
 	"description": "state management",
 	"license": "MIT",
 	"author": "Chase Moskal <chasemoskal@gmail.com>",

package/s/tracker/bindings/react.ts

@@ -1,9 +1,15 @@
 
 import {tracker} from "../tracker.js"
+import {signal} from "../../signals/signal/fn.js"
+import {derived} from "../../signals/derived/fn.js"
+import {SignalOptions} from "../../signals/types.js"
 
 export function react(react: {
-		useState: <X>(x: X) => [value: X, set: (fn: (x: X) => void) => void]
-		useEffect: (fn: () => void) => void
+		useEffect: (fn: () => void | (() => void), deps?: unknown[]) => void
+		useState: <X>(x: X | (() => X)) => [
+			value: X,
+			set: (value: X | ((x: X) => X)) => void
+		]
 	}) {
 
 	const useStrata = <X>(fn: () => X) => {
@@ -20,23 +26,28 @@ export function react(react: {
 	}
 
 	const component = <P extends object, R>(render: (props: P) => R) => {
-		function c(props: P) {
-			const [, setTick] = react.useState(0)
-			const {seen, result} = tracker.observe(() => render(props))
+		const c = (props: P) => useStrata(() => render(props))
+		c.displayName = (render as any).displayName ?? render.name ?? "Component"
+		return c
+	}
 
-			react.useEffect(() => {
-				const rerender = async() => setTick(tick => tick + 1)
-				const stoppers = [...seen].map(item => tracker.subscribe(item, rerender))
-				return () => stoppers.forEach(stop => stop())
-			})
+	const useOnce = <X>(fn: () => X) => {
+		const [value] = react.useState(fn)
+		return value
+	}
 
-			return result
-		}
+	const useSignal = <X>(value: X, options?: Partial<SignalOptions>) => {
+		const $signal = useOnce(() => signal(value, options))
+		void useStrata(() => $signal())
+		return $signal
+	}
 
-		c.displayName = (render as any).displayName ?? render.name ?? "Component"
-		return c
+	const useDerived = <X>(formula: () => X, options?: Partial<SignalOptions>) => {
+		const $derived = useOnce(() => derived(formula, options))
+		void useStrata(() => $derived())
+		return $derived
 	}
 
-	return {component, useStrata}
+	return {component, useStrata, useOnce, useSignal, useDerived}
 }
 

package/x/tracker/bindings/react.d.ts

@@ -1,10 +1,17 @@
+import { SignalOptions } from "../../signals/types.js";
 export declare function react(react: {
-    useState: <X>(x: X) => [value: X, set: (fn: (x: X) => void) => void];
-    useEffect: (fn: () => void) => void;
+    useEffect: (fn: () => void | (() => void), deps?: unknown[]) => void;
+    useState: <X>(x: X | (() => X)) => [
+        value: X,
+        set: (value: X | ((x: X) => X)) => void
+    ];
 }): {
     component: <P extends object, R>(render: (props: P) => R) => {
         (props: P): R;
         displayName: any;
     };
     useStrata: <X>(fn: () => X) => X;
+    useOnce: <X>(fn: () => X) => X;
+    useSignal: <X>(value: X, options?: Partial<SignalOptions>) => import("../../index.js").Signal<X>;
+    useDerived: <X>(formula: () => X, options?: Partial<SignalOptions>) => import("../../index.js").Derived<X>;
 };

package/x/tracker/bindings/react.js

@@ -1,4 +1,6 @@
 import { tracker } from "../tracker.js";
+import { signal } from "../../signals/signal/fn.js";
+import { derived } from "../../signals/derived/fn.js";
 export function react(react) {
     const useStrata = (fn) => {
         const [, setTick] = react.useState(0);
@@ -11,19 +13,24 @@ export function react(react) {
         return result;
     };
     const component = (render) => {
-        function c(props) {
-            const [, setTick] = react.useState(0);
-            const { seen, result } = tracker.observe(() => render(props));
-            react.useEffect(() => {
-                const rerender = async () => setTick(tick => tick + 1);
-                const stoppers = [...seen].map(item => tracker.subscribe(item, rerender));
-                return () => stoppers.forEach(stop => stop());
-            });
-            return result;
-        }
+        const c = (props) => useStrata(() => render(props));
         c.displayName = render.displayName ?? render.name ?? "Component";
         return c;
     };
-    return { component, useStrata };
+    const useOnce = (fn) => {
+        const [value] = react.useState(fn);
+        return value;
+    };
+    const useSignal = (value, options) => {
+        const $signal = useOnce(() => signal(value, options));
+        void useStrata(() => $signal());
+        return $signal;
+    };
+    const useDerived = (formula, options) => {
+        const $derived = useOnce(() => derived(formula, options));
+        void useStrata(() => $derived());
+        return $derived;
+    };
+    return { component, useStrata, useOnce, useSignal, useDerived };
 }
 //# sourceMappingURL=react.js.map

package/x/tracker/bindings/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../s/tracker/bindings/react.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AAErC,MAAM,UAAU,KAAK,CAAC,KAGpB;IAED,MAAM,SAAS,GAAG,CAAI,EAAW,EAAE,EAAE;QACpC,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;QACrC,MAAM,EAAC,IAAI,EAAE,MAAM,EAAC,GAAG,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;QAE1C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;YACpB,MAAM,QAAQ,GAAG,KAAK,IAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAA;YACrD,MAAM,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAA;YACzE,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CAAA;QAC9C,CAAC,CAAC,CAAA;QAEF,OAAO,MAAM,CAAA;IACd,CAAC,CAAA;IAED,MAAM,SAAS,GAAG,CAAsB,MAAuB,EAAE,EAAE;QAClE,SAAS,CAAC,CAAC,KAAQ;YAClB,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;YACrC,MAAM,EAAC,IAAI,EAAE,MAAM,EAAC,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;YAE3D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;gBACpB,MAAM,QAAQ,GAAG,KAAK,IAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAA;gBACrD,MAAM,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAA;gBACzE,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CAAA;YAC9C,CAAC,CAAC,CAAA;YAEF,OAAO,MAAM,CAAA;QACd,CAAC;QAED,CAAC,CAAC,WAAW,GAAI,MAAc,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,IAAI,WAAW,CAAA;QACzE,OAAO,CAAC,CAAA;IACT,CAAC,CAAA;IAED,OAAO,EAAC,SAAS,EAAE,SAAS,EAAC,CAAA;AAC9B,CAAC"}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../s/tracker/bindings/react.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AACrC,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAA;AACjD,OAAO,EAAC,OAAO,EAAC,MAAM,6BAA6B,CAAA;AAGnD,MAAM,UAAU,KAAK,CAAC,KAMpB;IAED,MAAM,SAAS,GAAG,CAAI,EAAW,EAAE,EAAE;QACpC,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;QACrC,MAAM,EAAC,IAAI,EAAE,MAAM,EAAC,GAAG,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;QAE1C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;YACpB,MAAM,QAAQ,GAAG,KAAK,IAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAA;YACrD,MAAM,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAA;YACzE,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CAAA;QAC9C,CAAC,CAAC,CAAA;QAEF,OAAO,MAAM,CAAA;IACd,CAAC,CAAA;IAED,MAAM,SAAS,GAAG,CAAsB,MAAuB,EAAE,EAAE;QAClE,MAAM,CAAC,GAAG,CAAC,KAAQ,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;QACtD,CAAC,CAAC,WAAW,GAAI,MAAc,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,IAAI,WAAW,CAAA;QACzE,OAAO,CAAC,CAAA;IACT,CAAC,CAAA;IAED,MAAM,OAAO,GAAG,CAAI,EAAW,EAAE,EAAE;QAClC,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;QAClC,OAAO,KAAK,CAAA;IACb,CAAC,CAAA;IAED,MAAM,SAAS,GAAG,CAAI,KAAQ,EAAE,OAAgC,EAAE,EAAE;QACnE,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAA;QACrD,KAAK,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,CAAA;QAC/B,OAAO,OAAO,CAAA;IACf,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,CAAI,OAAgB,EAAE,OAAgC,EAAE,EAAE;QAC5E,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAA;QACzD,KAAK,SAAS,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAA;QAChC,OAAO,QAAQ,CAAA;IAChB,CAAC,CAAA;IAED,OAAO,EAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAC,CAAA;AAC9D,CAAC"}