seitu 0.15.1 → 0.16.1

package/dist/solid.d.mts

@@ -0,0 +1,170 @@
+import { _ as Readable, v as Subscribable } from "./index-DwN8Up-P.mjs";
+import { Accessor, JSX } from "solid-js";
+
+//#region src/solid/hooks.d.ts
+interface UseSubscriptionOptions<S extends Subscribable<any> & Readable<any>, R = S['~']['output']> {
+  selector?: (value: S['~']['output']) => R;
+  isEqual?: (prev: R, next: R) => boolean;
+}
+/**
+ * Use this primitive to subscribe to a reactive value. Accepts a subscription object
+ * directly, or an accessor/getter that returns one. The getter is reactive — when it
+ * reads a signal, the subscription is recreated and re-subscribed automatically.
+ *
+ * Returns a Solid `Accessor<R>`: call it (`value()`) to read the current value inside JSX
+ * or another reactive scope.
+ *
+ * @example Inline subscription
+ * ```tsx
+ * import { createWebStorageValue } from 'seitu/web'
+ * import { useSubscription } from 'seitu/solid'
+ * import * as z from 'zod'
+ *
+ * function Counter() {
+ *   const value = useSubscription(() => createWebStorageValue({
+ *     type: 'sessionStorage',
+ *     key: 'test',
+ *     defaultValue: 0,
+ *     schema: z.number(),
+ *   }))
+ *
+ *   return <div>{value()}</div>
+ * }
+ * ```
+ *
+ * @example Instance outside of component
+ * ```tsx
+ * import { createWebStorage } from 'seitu/web'
+ * import { useSubscription } from 'seitu/solid'
+ * import * as z from 'zod'
+ *
+ * const sessionStorage = createWebStorage({
+ *   type: 'sessionStorage',
+ *   schemas: { count: z.number(), name: z.string() },
+ *   defaultValues: { count: 0, name: '' },
+ * })
+ *
+ * function Counter() {
+ *   const value = useSubscription(sessionStorage)
+ *   return <div>{value().count}</div>
+ * }
+ * ```
+ *
+ * @example Subscription with selector
+ * ```tsx
+ * import { createWebStorage } from 'seitu/web'
+ * import { useSubscription } from 'seitu/solid'
+ * import * as z from 'zod'
+ *
+ * const sessionStorage = createWebStorage({
+ *   type: 'sessionStorage',
+ *   schemas: {
+ *     count: z.number(),
+ *     name: z.string(),
+ *   },
+ *   defaultValues: { count: 0, name: '' },
+ * })
+ *
+ * function Counter() {
+ *   // Usage with selector, the accessor only updates when count changes
+ *   const count = useSubscription(sessionStorage, { selector: value => value.count })
+ *
+ *   return <div>{count()}</div>
+ * }
+ * ```
+ *
+ * @example Reactive source (re-subscribes when a signal changes)
+ * ```tsx
+ * import { createSignal } from 'solid-js'
+ * import { createWebStorageValue } from 'seitu/web'
+ * import { useSubscription } from 'seitu/solid'
+ * import * as z from 'zod'
+ *
+ * function User() {
+ *   const [userId, setUserId] = createSignal('user-1')
+ *   const data = useSubscription(() => createWebStorageValue({
+ *     type: 'localStorage',
+ *     key: `user:${userId()}`,
+ *     schema: z.object({ name: z.string() }),
+ *     defaultValue: { name: '' },
+ *   }))
+ *
+ *   return <div>{data().name}</div>
+ * }
+ * ```
+ *
+ * @example Ref example
+ * ```tsx
+ * import { createScrollState } from 'seitu/web'
+ * import { useSubscription } from 'seitu/solid'
+ *
+ * function Page() {
+ *   let ref: HTMLDivElement | undefined
+ *   const state = useSubscription(() => createScrollState({ element: () => ref, direction: 'vertical' }))
+ *
+ *   return (
+ *     <div ref={ref}>
+ *       {String(state().top.reached)}
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare function useSubscription<S extends Subscribable<any> & Readable<any>, R = S['~']['output']>(source: S | Accessor<S>, options?: UseSubscriptionOptions<S, R>): Accessor<R>;
+//#endregion
+//#region src/solid/components.d.ts
+interface SubscriptionProps<S extends Subscribable<any> & Readable<any>, R = S['~']['output']> extends Pick<UseSubscriptionOptions<S, R>, 'selector'> {
+  value: S;
+  children: (value: Accessor<R>) => JSX.Element;
+}
+/**
+ * Declarative component that subscribes to a reactive value and passes an accessor to a render function.
+ * Unlike React, the children function runs once and receives a Solid `Accessor<R>` — call it (`value()`)
+ * inside the returned JSX so updates stay fine-grained. Use when you prefer a component API over the
+ * useSubscription primitive.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { createWebStorage } from 'seitu/web'
+ * import { Subscription } from 'seitu/solid'
+ * import * as z from 'zod'
+ *
+ * const sessionStorage = createWebStorage({
+ *   type: 'sessionStorage',
+ *   schemas: { count: z.number(), name: z.string() },
+ *   defaultValues: { count: 0, name: '' },
+ * })
+ *
+ * function Page() {
+ *   return (
+ *     <Subscription value={sessionStorage}>
+ *       {value => <div>{value().count}</div>}
+ *     </Subscription>
+ *   )
+ * }
+ * ```
+ *
+ * @example With selector
+ * ```tsx
+ * import { createWebStorage } from 'seitu/web'
+ * import { Subscription } from 'seitu/solid'
+ * import * as z from 'zod'
+ *
+ * const sessionStorage = createWebStorage({
+ *   type: 'sessionStorage',
+ *   schemas: { count: z.number(), name: z.string() },
+ *   defaultValues: { count: 0, name: '' },
+ * })
+ *
+ * function Page() {
+ *   return (
+ *     <Subscription value={sessionStorage} selector={v => v.count}>
+ *       {count => <div>{count()}</div>}
+ *     </Subscription>
+ *   )
+ * }
+ * ```
+ */
+declare function Subscription<S extends Subscribable<any> & Readable<any>, R = S['~']['output']>(props: SubscriptionProps<S, R>): JSX.Element;
+//#endregion
+export { Subscription, SubscriptionProps, UseSubscriptionOptions, useSubscription };

package/dist/solid.mjs

@@ -0,0 +1,180 @@
+import { deepEqual } from "fast-equals";
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+//#region src/solid/hooks.ts
+/**
+* Use this primitive to subscribe to a reactive value. Accepts a subscription object
+* directly, or an accessor/getter that returns one. The getter is reactive — when it
+* reads a signal, the subscription is recreated and re-subscribed automatically.
+*
+* Returns a Solid `Accessor<R>`: call it (`value()`) to read the current value inside JSX
+* or another reactive scope.
+*
+* @example Inline subscription
+* ```tsx
+* import { createWebStorageValue } from 'seitu/web'
+* import { useSubscription } from 'seitu/solid'
+* import * as z from 'zod'
+*
+* function Counter() {
+*   const value = useSubscription(() => createWebStorageValue({
+*     type: 'sessionStorage',
+*     key: 'test',
+*     defaultValue: 0,
+*     schema: z.number(),
+*   }))
+*
+*   return <div>{value()}</div>
+* }
+* ```
+*
+* @example Instance outside of component
+* ```tsx
+* import { createWebStorage } from 'seitu/web'
+* import { useSubscription } from 'seitu/solid'
+* import * as z from 'zod'
+*
+* const sessionStorage = createWebStorage({
+*   type: 'sessionStorage',
+*   schemas: { count: z.number(), name: z.string() },
+*   defaultValues: { count: 0, name: '' },
+* })
+*
+* function Counter() {
+*   const value = useSubscription(sessionStorage)
+*   return <div>{value().count}</div>
+* }
+* ```
+*
+* @example Subscription with selector
+* ```tsx
+* import { createWebStorage } from 'seitu/web'
+* import { useSubscription } from 'seitu/solid'
+* import * as z from 'zod'
+*
+* const sessionStorage = createWebStorage({
+*   type: 'sessionStorage',
+*   schemas: {
+*     count: z.number(),
+*     name: z.string(),
+*   },
+*   defaultValues: { count: 0, name: '' },
+* })
+*
+* function Counter() {
+*   // Usage with selector, the accessor only updates when count changes
+*   const count = useSubscription(sessionStorage, { selector: value => value.count })
+*
+*   return <div>{count()}</div>
+* }
+* ```
+*
+* @example Reactive source (re-subscribes when a signal changes)
+* ```tsx
+* import { createSignal } from 'solid-js'
+* import { createWebStorageValue } from 'seitu/web'
+* import { useSubscription } from 'seitu/solid'
+* import * as z from 'zod'
+*
+* function User() {
+*   const [userId, setUserId] = createSignal('user-1')
+*   const data = useSubscription(() => createWebStorageValue({
+*     type: 'localStorage',
+*     key: `user:${userId()}`,
+*     schema: z.object({ name: z.string() }),
+*     defaultValue: { name: '' },
+*   }))
+*
+*   return <div>{data().name}</div>
+* }
+* ```
+*
+* @example Ref example
+* ```tsx
+* import { createScrollState } from 'seitu/web'
+* import { useSubscription } from 'seitu/solid'
+*
+* function Page() {
+*   let ref: HTMLDivElement | undefined
+*   const state = useSubscription(() => createScrollState({ element: () => ref, direction: 'vertical' }))
+*
+*   return (
+*     <div ref={ref}>
+*       {String(state().top.reached)}
+*     </div>
+*   )
+* }
+* ```
+*/
+function useSubscription(source, options) {
+	const { selector, isEqual = deepEqual } = options ?? {};
+	const getSource = typeof source === "function" ? source : () => source;
+	function getSnapshot(sub) {
+		return selector ? selector(sub.get()) : sub.get();
+	}
+	const sub = createMemo(() => getSource());
+	const [state, setState] = createSignal(getSnapshot(sub()), { equals: isEqual });
+	createEffect(() => {
+		const current = sub();
+		setState(() => getSnapshot(current));
+		onCleanup(current.subscribe(() => {
+			setState(() => getSnapshot(current));
+		}));
+	});
+	return state;
+}
+//#endregion
+//#region src/solid/components.ts
+/**
+* Declarative component that subscribes to a reactive value and passes an accessor to a render function.
+* Unlike React, the children function runs once and receives a Solid `Accessor<R>` — call it (`value()`)
+* inside the returned JSX so updates stay fine-grained. Use when you prefer a component API over the
+* useSubscription primitive.
+*
+* @example Basic usage
+* ```tsx
+* import { createWebStorage } from 'seitu/web'
+* import { Subscription } from 'seitu/solid'
+* import * as z from 'zod'
+*
+* const sessionStorage = createWebStorage({
+*   type: 'sessionStorage',
+*   schemas: { count: z.number(), name: z.string() },
+*   defaultValues: { count: 0, name: '' },
+* })
+*
+* function Page() {
+*   return (
+*     <Subscription value={sessionStorage}>
+*       {value => <div>{value().count}</div>}
+*     </Subscription>
+*   )
+* }
+* ```
+*
+* @example With selector
+* ```tsx
+* import { createWebStorage } from 'seitu/web'
+* import { Subscription } from 'seitu/solid'
+* import * as z from 'zod'
+*
+* const sessionStorage = createWebStorage({
+*   type: 'sessionStorage',
+*   schemas: { count: z.number(), name: z.string() },
+*   defaultValues: { count: 0, name: '' },
+* })
+*
+* function Page() {
+*   return (
+*     <Subscription value={sessionStorage} selector={v => v.count}>
+*       {count => <div>{count()}</div>}
+*     </Subscription>
+*   )
+* }
+* ```
+*/
+function Subscription(props) {
+	const value = useSubscription(() => props.value, { selector: props.selector });
+	return props.children(value);
+}
+//#endregion
+export { Subscription, useSubscription };

package/dist/svelte.d.mts

@@ -0,0 +1,77 @@
+import { _ as Readable$1, v as Subscribable } from "./index-DwN8Up-P.mjs";
+import { Readable } from "svelte/store";
+
+//#region src/svelte/hooks.d.ts
+interface UseSubscriptionOptions<S extends Subscribable<any> & Readable$1<any>, R = S['~']['output']> {
+  selector?: (value: S['~']['output']) => R;
+  isEqual?: (prev: R, next: R) => boolean;
+}
+/**
+ * Use this function to subscribe to a reactive value from a Svelte component.
+ * Accepts a subscription object directly, or a factory function that is called
+ * once to create one.
+ *
+ * Returns a Svelte `Readable` store — read it with the `$` auto-subscription
+ * (`$value`) in markup. The underlying subscription is created lazily on the
+ * first subscriber and torn down when the last one leaves.
+ *
+ * @example Inline subscription
+ * ```svelte
+ * <script lang="ts">
+ *   import { createWebStorageValue } from 'seitu/web'
+ *   import { useSubscription } from 'seitu/svelte'
+ *   import * as z from 'zod'
+ *
+ *   const value = useSubscription(() => createWebStorageValue({
+ *     type: 'sessionStorage',
+ *     key: 'test',
+ *     defaultValue: 0,
+ *     schema: z.number(),
+ *   }))
+ * </script>
+ *
+ * <div>{$value}</div>
+ * ```
+ *
+ * @example Instance outside of component
+ * ```svelte
+ * <script lang="ts">
+ *   import { createWebStorage } from 'seitu/web'
+ *   import { useSubscription } from 'seitu/svelte'
+ *   import * as z from 'zod'
+ *
+ *   const sessionStorage = createWebStorage({
+ *     type: 'sessionStorage',
+ *     schemas: { count: z.number(), name: z.string() },
+ *     defaultValues: { count: 0, name: '' },
+ *   })
+ *
+ *   const value = useSubscription(sessionStorage)
+ * </script>
+ *
+ * <div>{$value.count}</div>
+ * ```
+ *
+ * @example With selector
+ * ```svelte
+ * <script lang="ts">
+ *   import { createWebStorage } from 'seitu/web'
+ *   import { useSubscription } from 'seitu/svelte'
+ *   import * as z from 'zod'
+ *
+ *   const sessionStorage = createWebStorage({
+ *     type: 'sessionStorage',
+ *     schemas: { count: z.number(), name: z.string() },
+ *     defaultValues: { count: 0, name: '' },
+ *   })
+ *
+ *   // Updates only when count changes
+ *   const count = useSubscription(sessionStorage, { selector: v => v.count })
+ * </script>
+ *
+ * <div>{$count}</div>
+ * ```
+ */
+declare function useSubscription<S extends Subscribable<any> & Readable$1<any>, R = S['~']['output']>(source: S | (() => S), options?: UseSubscriptionOptions<S, R>): Readable<R>;
+//#endregion
+export { UseSubscriptionOptions, useSubscription };

package/dist/svelte.mjs

@@ -0,0 +1,91 @@
+import { deepEqual } from "fast-equals";
+import { readable } from "svelte/store";
+//#region src/svelte/hooks.ts
+/**
+* Use this function to subscribe to a reactive value from a Svelte component.
+* Accepts a subscription object directly, or a factory function that is called
+* once to create one.
+*
+* Returns a Svelte `Readable` store — read it with the `$` auto-subscription
+* (`$value`) in markup. The underlying subscription is created lazily on the
+* first subscriber and torn down when the last one leaves.
+*
+* @example Inline subscription
+* ```svelte
+* <script lang="ts">
+*   import { createWebStorageValue } from 'seitu/web'
+*   import { useSubscription } from 'seitu/svelte'
+*   import * as z from 'zod'
+*
+*   const value = useSubscription(() => createWebStorageValue({
+*     type: 'sessionStorage',
+*     key: 'test',
+*     defaultValue: 0,
+*     schema: z.number(),
+*   }))
+* <\/script>
+*
+* <div>{$value}</div>
+* ```
+*
+* @example Instance outside of component
+* ```svelte
+* <script lang="ts">
+*   import { createWebStorage } from 'seitu/web'
+*   import { useSubscription } from 'seitu/svelte'
+*   import * as z from 'zod'
+*
+*   const sessionStorage = createWebStorage({
+*     type: 'sessionStorage',
+*     schemas: { count: z.number(), name: z.string() },
+*     defaultValues: { count: 0, name: '' },
+*   })
+*
+*   const value = useSubscription(sessionStorage)
+* <\/script>
+*
+* <div>{$value.count}</div>
+* ```
+*
+* @example With selector
+* ```svelte
+* <script lang="ts">
+*   import { createWebStorage } from 'seitu/web'
+*   import { useSubscription } from 'seitu/svelte'
+*   import * as z from 'zod'
+*
+*   const sessionStorage = createWebStorage({
+*     type: 'sessionStorage',
+*     schemas: { count: z.number(), name: z.string() },
+*     defaultValues: { count: 0, name: '' },
+*   })
+*
+*   // Updates only when count changes
+*   const count = useSubscription(sessionStorage, { selector: v => v.count })
+* <\/script>
+*
+* <div>{$count}</div>
+* ```
+*/
+function useSubscription(source, options) {
+	const { selector, isEqual = deepEqual } = options ?? {};
+	const sub = typeof source === "function" ? source() : source;
+	function getSnapshot() {
+		return selector ? selector(sub.get()) : sub.get();
+	}
+	const initial = getSnapshot();
+	return readable(initial, (set) => {
+		let current = initial;
+		function refresh() {
+			const next = getSnapshot();
+			if (!isEqual(current, next)) {
+				current = next;
+				set(next);
+			}
+		}
+		refresh();
+		return sub.subscribe(refresh);
+	});
+}
+//#endregion
+export { useSubscription };

package/package.json

@@ -2,7 +2,7 @@
   "name": "seitu",
   "displayName": "Seitu",
   "type": "module",
-  "version": "0.15.1",
+  "version": "0.16.1",
   "private": false,
   "author": "Valerii Strilets",
   "license": "MIT",
@@ -20,6 +20,9 @@
     "typescript",
     "react",
     "vue",
+    "solid",
+    "solid-js",
+    "svelte",
     "utils",
     "type-safe",
     "tanstack-intent"
@@ -45,6 +48,14 @@
       "types": "./dist/vue/index.d.mts",
       "import": "./dist/vue.mjs"
     },
+    "./solid": {
+      "types": "./dist/solid/index.d.mts",
+      "import": "./dist/solid.mjs"
+    },
+    "./svelte": {
+      "types": "./dist/svelte/index.d.mts",
+      "import": "./dist/svelte.mjs"
+    },
     "./utils": {
       "types": "./dist/utils/index.d.mts",
       "import": "./dist/utils.mjs"
@@ -62,6 +73,8 @@
   "peerDependencies": {
     "react": ">=19",
     "react-dom": ">=19",
+    "solid-js": ">=1.9",
+    "svelte": ">=5",
     "vue": ">=3.5"
   },
   "peerDependenciesMeta": {
@@ -71,6 +84,12 @@
     "react-dom": {
       "optional": true
     },
+    "solid-js": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
     "vue": {
       "optional": true
     }
@@ -79,21 +98,26 @@
     "fast-equals": "^6.0.0"
   },
   "devDependencies": {
+    "@solidjs/testing-library": "^0.8.10",
     "@standard-schema/spec": "^1.1.0",
-    "@tanstack/intent": "^0.0.42",
+    "@tanstack/intent": "^0.3.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.17",
+    "@vitejs/plugin-react": "^6.0.3",
     "fake-indexeddb": "^6.2.5",
-    "happy-dom": "^20.10.2",
+    "happy-dom": "^20.10.6",
     "react-dom": "^19.2.7",
-    "tsdown": "^0.22.2",
+    "solid-js": "^1.9.13",
+    "svelte": "^5.56.4",
+    "tsdown": "^0.22.3",
     "type-fest": "^5.7.0",
     "typescript": "^6.0.3",
-    "vite": "^6.4.3",
-    "vitest": "^3.2.6",
-    "vue": "^3.5.35",
-    "yaml": "^2.8.3",
+    "vite": "^8.1.2",
+    "vite-plugin-solid": "^2.11.12",
+    "vitest": "^4.1.9",
+    "vue": "^3.5.39",
+    "yaml": "^2.9.0",
     "zod": "^4.4.3"
   },
   "scripts": {