@e280/strata 0.2.5 → 0.2.8

package/LICENSE

@@ -1,7 +1,7 @@
 
 MIT License
 
-Copyright (c) 2025 Chase Moskal
+Copyright (c) 2026 Chase Moskal
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -17,6 +17,7 @@
 🚦 [**signals**](#signals) — ephemeral view-level state  
 🔮 [**prism**](#prism) — app-level state tree  
 🪄 [**tracker**](#tracker) — reactivity integration hub  
+⚛️ [**react**](#react) — optional bindings for react  
 
 
 
@@ -363,6 +364,50 @@ note, the *items* that the tracker tracks can be any object, or symbol.. the tra
 
 
 
+<br/><br/>
+
+<a id="react"></a>
+
+## 🍋 react bindings
+> *easy peasy*
+
+### ⚛️ react setup
+
+1. setup your `strata.ts` module
+    ```ts
+    import * as react from "react"
+    import {react as strata} from "@e280/strata"
+
+    export const {component, useStrata} = strata(react)
+    ```
+1. now you import `component` and `useStrata` from your module
+    ```ts
+    import {component, useStrata} from "./strata.js"
+    ```
+
+### ⚛️ `component` enables fully automatic reactive re-rendering
+```ts
+const $count = signal(0)
+
+export const MyCounter = component(() => {
+  const add = () => $count.value++
+  return <button onClick={add}>{$count()}</button>
+})
+```
+
+### ⚛️ `useStrata` for a manual hands-on approach
+```ts
+const $count = signal(0)
+
+export const MyCounter = () => {
+  const count = useStrata(() => $count())
+  const add = () => $count.value++
+  return <button onClick={add}>{count}</button>
+}
+```
+
+
+
 <br/><br/>
 
 ## 🧑‍💻 strata is by e280

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@e280/strata",
-	"version": "0.2.5",
+	"version": "0.2.8",
 	"description": "state management",
 	"license": "MIT",
 	"author": "Chase Moskal <chasemoskal@gmail.com>",
@@ -30,12 +30,12 @@
 		"_tscw": "tsc -w"
 	},
 	"dependencies": {
-		"@e280/stz": "^0.2.15"
+		"@e280/stz": "^0.2.21"
 	},
 	"devDependencies": {
-		"@e280/science": "^0.1.4",
-		"@e280/scute": "^0.1.2",
-		"@types/node": "^24.10.1",
+		"@e280/science": "^0.1.8",
+		"@e280/scute": "^0.2.2",
+		"@types/node": "^25.3.2",
 		"npm-run-all": "^4.1.5",
 		"typescript": "^5.9.3"
 	},

package/s/tracker/bindings/react.ts

@@ -0,0 +1,42 @@
+
+import {tracker} from "../tracker.js"
+
+export function react(react: {
+		useState: <X>(x: X) => [value: X, set: (fn: (x: X) => void) => void]
+		useEffect: (fn: () => void) => void
+	}) {
+
+	const useStrata = <X>(fn: () => X) => {
+		const [, setTick] = react.useState(0)
+		const {seen, result} = tracker.observe(fn)
+
+		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 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))
+
+			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
+		}
+
+		c.displayName = (render as any).displayName ?? render.name ?? "Component"
+		return c
+	}
+
+	return {component, useStrata}
+}
+

package/s/tracker/index.ts

@@ -1,3 +1,4 @@
 
 export * from "./tracker.js"
+export * from "./bindings/react.js"
 

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

@@ -0,0 +1,10 @@
+export declare function react(react: {
+    useState: <X>(x: X) => [value: X, set: (fn: (x: X) => void) => void];
+    useEffect: (fn: () => void) => void;
+}): {
+    component: <P extends object, R>(render: (props: P) => R) => {
+        (props: P): R;
+        displayName: any;
+    };
+    useStrata: <X>(fn: () => X) => X;
+};

package/x/tracker/bindings/react.js

@@ -0,0 +1,29 @@
+import { tracker } from "../tracker.js";
+export function react(react) {
+    const useStrata = (fn) => {
+        const [, setTick] = react.useState(0);
+        const { seen, result } = tracker.observe(fn);
+        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 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;
+        }
+        c.displayName = render.displayName ?? render.name ?? "Component";
+        return c;
+    };
+    return { component, useStrata };
+}
+//# sourceMappingURL=react.js.map

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

@@ -0,0 +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"}

package/x/tracker/index.d.ts

@@ -1 +1,2 @@
 export * from "./tracker.js";
+export * from "./bindings/react.js";

package/x/tracker/index.js

@@ -1,2 +1,3 @@
 export * from "./tracker.js";
+export * from "./bindings/react.js";
 //# sourceMappingURL=index.js.map

package/x/tracker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../s/tracker/index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../s/tracker/index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA"}