gjendje 1.0.10 → 1.1.0

package/README.md

@@ -23,24 +23,33 @@ import { state } from 'gjendje'
 
 const store = state({ count: 0 })
 
-function increment() {
-  store.set((prev) => ({ ...prev, count: prev.count + 1 }))
-}
+// set
+store.set({ count: 1 })
+
+store.set((prev) => ({ ...prev, count: prev.count + 1 }))
+
+// get
+store.get()
 
-const { counter } = store.get()
+const { count } = store.get()
+
+// reset
+store.reset()
 ```
 
 [Examples](https://github.com/charliebeckstrand/gjendje/blob/main/docs/examples.md)
 
-## Configure
+## API
 
-`configure` allows you to set global values for all state instances.
+`get`, `peek`, `set`, `patch`, `reset`, `destroy`, `subscribe`, `watch`, `intercept`, `onChange`
 
----
+[API reference](https://github.com/charliebeckstrand/gjendje/blob/main/docs/api.md)
 
-`scope`, `maxKeys`, `prefix`, `requireValidation`, `registry`, `ssr`, `sync`, `warnOnDuplicate`, `onChange`, `onDestroy`, `onError`, `onExpire`, `onHydrate`, `onIntercept`, `onMigrate`, `onQuotaExceeded`, `onRegister`, `onReset`, `onSync`, `onValidationFail`
+## Primitives
 
-[Configure guide](https://github.com/charliebeckstrand/gjendje/blob/main/docs/configure.md)
+`computed`, `select`, `previous`, `readonly`, `collection`, `effect`
+
+[Primitives reference](https://github.com/charliebeckstrand/gjendje/blob/main/docs/primitives.md)
 
 ## Scopes
 
@@ -48,17 +57,42 @@ const { counter } = store.get()
 
 [Scope guide](https://github.com/charliebeckstrand/gjendje/blob/main/docs/scopes.md)
 
-## API
+## Framework Bindings
 
-`get`, `peek`, `set`, `patch`, `reset`, `destroy`, `subscribe`, `watch`, `intercept`, `onChange`
+### React
 
-[API reference](https://github.com/charliebeckstrand/gjendje/blob/main/docs/api.md)
+```tsx
+import { state } from 'gjendje'
+import { useGjendje } from 'gjendje/react'
 
-## Primitives
+const counter = state({ counter: 0 })
 
-`computed`, `select`, `previous`, `readonly`, `collection`, `effect`
+function Counter() {
+  const [count, setCount, resetCount] = useGjendje(counter)
 
-[Primitives reference](https://github.com/charliebeckstrand/gjendje/blob/main/docs/primitives.md)
+  return <button onClick={() => setCount(prev => prev + 1)}>{count}</button>
+}
+```
+
+[React guide](https://github.com/charliebeckstrand/gjendje/blob/main/docs/react.md)
+
+### Vue
+
+```vue
+<script setup>
+import { state } from 'gjendje'
+import { useGjendje } from 'gjendje/vue'
+
+const counter = state({ counter: 0 })
+const count = useGjendje(counter)
+</script>
+
+<template>
+  <button @click="count++">{{ count }}</button>
+</template>
+```
+
+[Vue guide](https://github.com/charliebeckstrand/gjendje/blob/main/docs/vue.md)
 
 ## Utilities
 
@@ -66,6 +100,12 @@ const { counter } = store.get()
 
 [Utilities reference](https://github.com/charliebeckstrand/gjendje/blob/main/docs/utilities.md)
 
+## Configure (global config)
+
+`scope`, `maxKeys`, `prefix`, `requireValidation`, `registry`, `ssr`, `sync`, `warnOnDuplicate`, `onChange`, `onDestroy`, `onError`, `onExpire`, `onHydrate`, `onIntercept`, `onMigrate`, `onQuotaExceeded`, `onRegister`, `onReset`, `onSync`, `onValidationFail`
+
+[Configure guide](https://github.com/charliebeckstrand/gjendje/blob/main/docs/configure.md)
+
 ## License
 
 MIT

package/dist/chunk-OZ6A5AAY.js

@@ -0,0 +1,6 @@
+// src/is-writable.ts
+function isWritable(instance) {
+  return typeof instance.set === "function";
+}
+
+export { isWritable };

package/dist/chunk-SGBOKQUT.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+// src/is-writable.ts
+function isWritable(instance) {
+  return typeof instance.set === "function";
+}
+
+exports.isWritable = isWritable;

package/dist/react.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var chunkSGBOKQUT_cjs = require('./chunk-SGBOKQUT.cjs');
+var react = require('react');
+
+function useGjendje(instance, selector) {
+  const getSnapshot = selector ? () => selector(instance.get()) : () => instance.get();
+  const value = react.useSyncExternalStore(
+    (onStoreChange) => instance.subscribe(onStoreChange),
+    getSnapshot,
+    getSnapshot
+  );
+  if (selector) return value;
+  if (chunkSGBOKQUT_cjs.isWritable(instance)) {
+    return [value, (v) => instance.set(v), () => instance.reset()];
+  }
+  return value;
+}
+
+exports.useGjendje = useGjendje;

package/dist/react.d.cts

@@ -0,0 +1,23 @@
+import { R as ReadonlyInstance, B as BaseInstance } from './types-D8aJjm3k.cjs';
+
+/**
+ * Reactive result tuple for writable instances.
+ * Mirrors the familiar [value, set, reset] shape of React's useState.
+ */
+type UseGjendjeResult<T> = readonly [
+    value: T,
+    set: (value: T | ((prev: T) => T)) => void,
+    reset: () => void
+];
+/**
+ * Subscribe to a gjendje state instance in React.
+ *
+ * - **Writable instance** → returns `[value, set, reset]`
+ * - **Readonly / computed** → returns `value`
+ * - **With selector** → returns the selected slice
+ */
+declare function useGjendje<T, U>(instance: ReadonlyInstance<T>, selector: (value: T) => U): U;
+declare function useGjendje<T>(instance: BaseInstance<T>): UseGjendjeResult<T>;
+declare function useGjendje<T>(instance: ReadonlyInstance<T>): T;
+
+export { type UseGjendjeResult, useGjendje };

package/dist/react.d.ts

@@ -0,0 +1,23 @@
+import { R as ReadonlyInstance, B as BaseInstance } from './types-D8aJjm3k.js';
+
+/**
+ * Reactive result tuple for writable instances.
+ * Mirrors the familiar [value, set, reset] shape of React's useState.
+ */
+type UseGjendjeResult<T> = readonly [
+    value: T,
+    set: (value: T | ((prev: T) => T)) => void,
+    reset: () => void
+];
+/**
+ * Subscribe to a gjendje state instance in React.
+ *
+ * - **Writable instance** → returns `[value, set, reset]`
+ * - **Readonly / computed** → returns `value`
+ * - **With selector** → returns the selected slice
+ */
+declare function useGjendje<T, U>(instance: ReadonlyInstance<T>, selector: (value: T) => U): U;
+declare function useGjendje<T>(instance: BaseInstance<T>): UseGjendjeResult<T>;
+declare function useGjendje<T>(instance: ReadonlyInstance<T>): T;
+
+export { type UseGjendjeResult, useGjendje };

package/dist/react.js

@@ -0,0 +1,18 @@
+import { isWritable } from './chunk-OZ6A5AAY.js';
+import { useSyncExternalStore } from 'react';
+
+function useGjendje(instance, selector) {
+  const getSnapshot = selector ? () => selector(instance.get()) : () => instance.get();
+  const value = useSyncExternalStore(
+    (onStoreChange) => instance.subscribe(onStoreChange),
+    getSnapshot,
+    getSnapshot
+  );
+  if (selector) return value;
+  if (isWritable(instance)) {
+    return [value, (v) => instance.set(v), () => instance.reset()];
+  }
+  return value;
+}
+
+export { useGjendje };

package/dist/vue.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var chunkSGBOKQUT_cjs = require('./chunk-SGBOKQUT.cjs');
+var vue = require('vue');
+
+function useGjendje(instance, selector) {
+  const writable = !selector && chunkSGBOKQUT_cjs.isWritable(instance);
+  const ref = vue.customRef((track, trigger) => {
+    let last = selector ? selector(instance.get()) : instance.get();
+    const unsub = instance.subscribe((next) => {
+      const value = selector ? selector(next) : next;
+      if (!Object.is(value, last)) {
+        last = value;
+        trigger();
+      }
+    });
+    vue.onScopeDispose(unsub);
+    return {
+      get() {
+        track();
+        return selector ? selector(instance.get()) : instance.get();
+      },
+      set(value) {
+        if (writable) {
+          instance.set(value);
+        }
+      }
+    };
+  });
+  return ref;
+}
+
+exports.useGjendje = useGjendje;

package/dist/vue.d.cts

@@ -0,0 +1,17 @@
+import { Ref } from 'vue';
+import { R as ReadonlyInstance, B as BaseInstance } from './types-D8aJjm3k.cjs';
+
+/**
+ * Subscribe to a gjendje state instance in Vue.
+ *
+ * Returns a reactive `Ref` that stays in sync with the instance.
+ *
+ * - **Writable instance** → ref is two-way: read with `.value`, write by assigning to `.value`
+ * - **Readonly / computed** → ref is read-only
+ * - **With selector** → ref holds the selected slice (read-only)
+ */
+declare function useGjendje<T, U>(instance: ReadonlyInstance<T>, selector: (value: T) => U): Readonly<Ref<U>>;
+declare function useGjendje<T>(instance: BaseInstance<T>): Ref<T>;
+declare function useGjendje<T>(instance: ReadonlyInstance<T>): Readonly<Ref<T>>;
+
+export { useGjendje };

package/dist/vue.d.ts

@@ -0,0 +1,17 @@
+import { Ref } from 'vue';
+import { R as ReadonlyInstance, B as BaseInstance } from './types-D8aJjm3k.js';
+
+/**
+ * Subscribe to a gjendje state instance in Vue.
+ *
+ * Returns a reactive `Ref` that stays in sync with the instance.
+ *
+ * - **Writable instance** → ref is two-way: read with `.value`, write by assigning to `.value`
+ * - **Readonly / computed** → ref is read-only
+ * - **With selector** → ref holds the selected slice (read-only)
+ */
+declare function useGjendje<T, U>(instance: ReadonlyInstance<T>, selector: (value: T) => U): Readonly<Ref<U>>;
+declare function useGjendje<T>(instance: BaseInstance<T>): Ref<T>;
+declare function useGjendje<T>(instance: ReadonlyInstance<T>): Readonly<Ref<T>>;
+
+export { useGjendje };

package/dist/vue.js

@@ -0,0 +1,31 @@
+import { isWritable } from './chunk-OZ6A5AAY.js';
+import { customRef, onScopeDispose } from 'vue';
+
+function useGjendje(instance, selector) {
+  const writable = !selector && isWritable(instance);
+  const ref = customRef((track, trigger) => {
+    let last = selector ? selector(instance.get()) : instance.get();
+    const unsub = instance.subscribe((next) => {
+      const value = selector ? selector(next) : next;
+      if (!Object.is(value, last)) {
+        last = value;
+        trigger();
+      }
+    });
+    onScopeDispose(unsub);
+    return {
+      get() {
+        track();
+        return selector ? selector(instance.get()) : instance.get();
+      },
+      set(value) {
+        if (writable) {
+          instance.set(value);
+        }
+      }
+    };
+  });
+  return ref;
+}
+
+export { useGjendje };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gjendje",
-  "version": "1.0.10",
+  "version": "1.1.0",
   "description": "Storage-agnostic state management for TypeScript",
   "keywords": [
     "state",
@@ -25,6 +25,7 @@
     "node": ">=18.0.0"
   },
   "type": "module",
+  "sideEffects": false,
   "exports": {
     ".": {
       "import": {
@@ -45,6 +46,26 @@
         "types": "./dist/server.d.cts",
         "default": "./dist/server.cjs"
       }
+    },
+    "./react": {
+      "import": {
+        "types": "./dist/react.d.ts",
+        "default": "./dist/react.js"
+      },
+      "require": {
+        "types": "./dist/react.d.cts",
+        "default": "./dist/react.cjs"
+      }
+    },
+    "./vue": {
+      "import": {
+        "types": "./dist/vue.d.ts",
+        "default": "./dist/vue.js"
+      },
+      "require": {
+        "types": "./dist/vue.d.cts",
+        "default": "./dist/vue.cjs"
+      }
     }
   },
   "main": "./dist/index.cjs",
@@ -58,21 +79,40 @@
     "provenance": true,
     "access": "public"
   },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "vue": ">=3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@biomejs/biome": "^2.4.6",
     "@changesets/cli": "^2.27.0",
     "@size-limit/preset-small-lib": "^11.0.0",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^20.0.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@vitest/coverage-v8": "^4.0.0",
+    "@vue/test-utils": "^2.4.6",
     "happy-dom": "^20.8.7",
     "lefthook": "^1.6.0",
     "publint": "^0.3.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "size-limit": "^11.0.0",
     "tinybench": "^6.0.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0",
     "vite": "^6.0.0",
-    "vitest": "^4.0.0"
+    "vitest": "^4.0.0",
+    "vue": "^3.5.31"
   },
   "scripts": {
     "build": "tsup",