seitu 0.12.0 → 0.13.0

package/dist/react.mjs

@@ -0,0 +1,176 @@
+import { deepEqual } from "fast-equals";
+import * as React from "react";
+//#region src/react/hooks.ts
+/**
+* Use this hook to subscribe to a reactive value. Accepts a subscription object
+* directly, or a factory function that is called only once on first render —
+* subsequent renders reuse the cached subscription unless dependency array changes.
+*
+* @example Inline subscription
+* ```tsx twoslash title="/app/page.tsx"
+* 'use client'
+*
+* import { createWebStorageValue } from 'seitu/web'
+* import { useSubscription } from 'seitu/react'
+* import * as z from 'zod'
+*
+* export default function Page() {
+*   const value = useSubscription(() => createWebStorageValue({
+*     type: 'sessionStorage',
+*     key: 'test',
+*     defaultValue: 0,
+*     schema: z.number(),
+*   }))
+*
+*   return <div>{value}</div>
+* }
+* ```
+*
+* @example Instance outside of component
+* ```tsx twoslash title="/app/page.tsx"
+* 'use client'
+*
+* import { createWebStorage } from 'seitu/web'
+* import { useSubscription } from 'seitu/react'
+* import * as z from 'zod'
+*
+* const sessionStorage = createWebStorage({
+*   type: 'sessionStorage',
+*   schemas: { count: z.number(), name: z.string() },
+*   defaultValues: { count: 0, name: '' },
+* })
+*
+* export default function Page() {
+*   const value = useSubscription(sessionStorage)
+*   return <div>{value.count}</div>
+* }
+* ```
+*
+* @example Subscription with selector
+* ```tsx twoslash title="/app/page.tsx"
+* 'use client'
+*
+* import { createWebStorage } from 'seitu/web'
+* import { useSubscription } from 'seitu/react'
+* import * as z from 'zod'
+*
+* const sessionStorage = createWebStorage({
+*   type: 'sessionStorage',
+*   schemas: {
+*     count: z.number(),
+*     name: z.string(),
+*   },
+*   defaultValues: { count: 0, name: '' },
+* })
+*
+* export default function Page() {
+*   // Usage with selector, re-renders only when count changes
+*   const count = useSubscription(sessionStorage, { selector: value => value.count })
+*
+*   return <div>{count}</div>
+* }
+* ```
+*
+* @example Ref example
+* ```tsx twoslash title="/app/page.tsx"
+* 'use client'
+*
+* import * as React from 'react'
+* import { createScrollState } from 'seitu/web'
+* import { useSubscription } from 'seitu/react'
+*
+* export default function Page() {
+*   const ref = React.useRef<HTMLDivElement>(null)
+*   const state = useSubscription(() => createScrollState({ element: () => ref.current, direction: 'vertical' }))
+*
+*   return (
+*     <div ref={ref}>
+*       {String(state.top.reached)}
+*     </div>
+*   )
+* }
+* ```
+*/
+function useSubscription(source, options) {
+	const { selector, deps = [], isEqual = deepEqual } = options ?? {};
+	const isFactory = typeof source === "function";
+	const factoryFn = isFactory ? source : () => source;
+	const subscription = React.useMemo(() => factoryFn(), isFactory ? deps : [source, ...deps]);
+	const lastSnapshotRef = React.useRef(void 0);
+	const subscriptionRef = React.useRef(subscription);
+	if (subscriptionRef.current !== subscription) {
+		subscriptionRef.current = subscription;
+		lastSnapshotRef.current = void 0;
+	}
+	const selectorRef = React.useRef(selector);
+	const isEqualRef = React.useRef(isEqual);
+	selectorRef.current = selector;
+	isEqualRef.current = isEqual;
+	const getSnapshot = React.useCallback(() => {
+		const sel = selectorRef.current;
+		const next = sel ? sel(subscriptionRef.current.get()) : subscriptionRef.current.get();
+		const prev = lastSnapshotRef.current;
+		if (prev !== void 0 && isEqualRef.current(prev, next)) return prev;
+		lastSnapshotRef.current = next;
+		return next;
+	}, []);
+	return React.useSyncExternalStore(subscription.subscribe, getSnapshot, getSnapshot);
+}
+//#endregion
+//#region src/react/components.tsx
+/**
+* Declarative component that subscribes to a reactive value and passes it to a render function.
+* Re-renders when the value (or selected value) changes. Use when you prefer a component API
+* over the useSubscription hook.
+*
+* @example Basic usage
+* ```tsx twoslash title="/app/page.tsx"
+* 'use client'
+*
+* import { createWebStorage } from 'seitu/web'
+* import { Subscription } from 'seitu/react'
+* import * as z from 'zod'
+*
+* const sessionStorage = createWebStorage({
+*   type: 'sessionStorage',
+*   schemas: { count: z.number(), name: z.string() },
+*   defaultValues: { count: 0, name: '' },
+* })
+*
+* export default function Page() {
+*   return (
+*     <Subscription value={sessionStorage}>
+*       {(value) => <div>{value.count}</div>}
+*     </Subscription>
+*   )
+* }
+* ```
+*
+* @example With selector
+* ```tsx twoslash title="/app/page.tsx"
+* 'use client'
+*
+* import { createWebStorage } from 'seitu/web'
+* import { Subscription } from 'seitu/react'
+* import * as z from 'zod'
+*
+* const sessionStorage = createWebStorage({
+*   type: 'sessionStorage',
+*   schemas: { count: z.number(), name: z.string() },
+*   defaultValues: { count: 0, name: '' },
+* })
+*
+* export default function Page() {
+*   return (
+*     <Subscription value={sessionStorage} selector={(v) => v.count}>
+*       {(count) => <div>{count}</div>}
+*     </Subscription>
+*   )
+* }
+* ```
+*/
+function Subscription({ value, selector, children }) {
+	return children(useSubscription(value, { selector }));
+}
+//#endregion
+export { Subscription, useSubscription };

package/dist/{utils/validation.d.ts → utils.d.mts}

@@ -1,4 +1,6 @@
-import type { ValidationSchemaErrorProps } from '../validate';
+import { t as ValidationSchemaErrorProps } from "./validate-BzLxGOQt.mjs";
+
+//#region src/utils/validation.d.ts
 /**
  * Repair broken web storage value object if value was object but not all keys are in the default value object.
  *
@@ -22,6 +24,8 @@ import type { ValidationSchemaErrorProps } from '../validate';
  * value.get() // { a: 1, b: 'default' }
  * ```
  */
-export declare function repairValueObjectWithDefault<O extends Record<string, unknown>>(props: ValidationSchemaErrorProps<O>): O & {
-    [k: string]: any;
+declare function repairValueObjectWithDefault<O extends Record<string, unknown>>(props: ValidationSchemaErrorProps<O>): O & {
+  [k: string]: any;
 };
+//#endregion
+export { repairValueObjectWithDefault };

package/dist/utils.mjs

@@ -0,0 +1,32 @@
+//#region src/utils/validation.ts
+/**
+* Repair broken web storage value object if value was object but not all keys are in the default value object.
+*
+* @returns A new object with the existing keys in the value object that are not in the default value object.
+*
+* @example
+* ```ts
+* import { createWebStorageValue } from 'seitu/web'
+* import { repairValueObjectWithDefault } from 'seitu/utils'
+* import * as z from 'zod'
+*
+* const value = createWebStorageValue({
+*   type: 'localStorage',
+*   schema: z.object({ a: z.number(), b: z.string() }),
+*   key: 'storage-key',
+*   defaultValue: { a: 0, b: 'default' },
+*   onValidationError: repairValueObjectWithDefault,
+* })
+* value.get() // { a: 0, b: 'default' }
+* window.localStorage.setItem('storage-key', JSON.stringify({ a: 1 }))
+* value.get() // { a: 1, b: 'default' }
+* ```
+*/
+function repairValueObjectWithDefault(props) {
+	return {
+		...props.defaultValue,
+		...typeof props.value === "object" && props.value !== null ? Object.fromEntries(Object.entries(props.value).filter(([key, val]) => key in props.defaultValue && typeof val === typeof props.defaultValue[key])) : {}
+	};
+}
+//#endregion
+export { repairValueObjectWithDefault };

package/dist/validate-BzLxGOQt.d.mts

@@ -0,0 +1,93 @@
+//#region ../node_modules/.pnpm/@standard-schema+spec@1.1.0/node_modules/@standard-schema/spec/dist/index.d.ts
+/** The Standard Typed interface. This is a base type extended by other specs. */
+interface StandardTypedV1<Input = unknown, Output = Input> {
+  /** The Standard properties. */
+  readonly "~standard": StandardTypedV1.Props<Input, Output>;
+}
+declare namespace StandardTypedV1 {
+  /** The Standard Typed properties interface. */
+  interface Props<Input = unknown, Output = Input> {
+    /** The version number of the standard. */
+    readonly version: 1;
+    /** The vendor name of the schema library. */
+    readonly vendor: string;
+    /** Inferred types associated with the schema. */
+    readonly types?: Types<Input, Output> | undefined;
+  }
+  /** The Standard Typed types interface. */
+  interface Types<Input = unknown, Output = Input> {
+    /** The input type of the schema. */
+    readonly input: Input;
+    /** The output type of the schema. */
+    readonly output: Output;
+  }
+  /** Infers the input type of a Standard Typed. */
+  type InferInput<Schema extends StandardTypedV1> = NonNullable<Schema["~standard"]["types"]>["input"];
+  /** Infers the output type of a Standard Typed. */
+  type InferOutput<Schema extends StandardTypedV1> = NonNullable<Schema["~standard"]["types"]>["output"];
+}
+/** The Standard Schema interface. */
+interface StandardSchemaV1<Input = unknown, Output = Input> {
+  /** The Standard Schema properties. */
+  readonly "~standard": StandardSchemaV1.Props<Input, Output>;
+}
+declare namespace StandardSchemaV1 {
+  /** The Standard Schema properties interface. */
+  interface Props<Input = unknown, Output = Input> extends StandardTypedV1.Props<Input, Output> {
+    /** Validates unknown input values. */
+    readonly validate: (value: unknown, options?: StandardSchemaV1.Options | undefined) => Result<Output> | Promise<Result<Output>>;
+  }
+  /** The result interface of the validate function. */
+  type Result<Output> = SuccessResult<Output> | FailureResult;
+  /** The result interface if validation succeeds. */
+  interface SuccessResult<Output> {
+    /** The typed output value. */
+    readonly value: Output;
+    /** A falsy value for `issues` indicates success. */
+    readonly issues?: undefined;
+  }
+  interface Options {
+    /** Explicit support for additional vendor-specific parameters, if needed. */
+    readonly libraryOptions?: Record<string, unknown> | undefined;
+  }
+  /** The result interface if validation fails. */
+  interface FailureResult {
+    /** The issues of failed validation. */
+    readonly issues: ReadonlyArray<Issue>;
+  }
+  /** The issue interface of the failure output. */
+  interface Issue {
+    /** The error message of the issue. */
+    readonly message: string;
+    /** The path of the issue, if any. */
+    readonly path?: ReadonlyArray<PropertyKey | PathSegment> | undefined;
+  }
+  /** The path segment interface of the issue. */
+  interface PathSegment {
+    /** The key representing a path segment. */
+    readonly key: PropertyKey;
+  }
+  /** The Standard types interface. */
+  interface Types<Input = unknown, Output = Input> extends StandardTypedV1.Types<Input, Output> {}
+  /** Infers the input type of a Standard. */
+  type InferInput<Schema extends StandardTypedV1> = StandardTypedV1.InferInput<Schema>;
+  /** Infers the output type of a Standard. */
+  type InferOutput<Schema extends StandardTypedV1> = StandardTypedV1.InferOutput<Schema>;
+}
+/** The Standard JSON Schema interface. */
+//#endregion
+//#region src/validate.d.ts
+type ValidationSchemaOutput<S extends StandardSchemaV1<unknown>> = StandardSchemaV1.InferOutput<S>;
+interface ValidationSchemaErrorProps<O> {
+  defaultValue: O;
+  issues: StandardSchemaV1.Issue[];
+  value: unknown;
+}
+interface ValidationSchemaObjectErrorProps<O extends Record<string, unknown>> {
+  defaultValue: O[keyof O];
+  issues: StandardSchemaV1.Issue[];
+  value: unknown;
+  key: keyof O;
+}
+//#endregion
+export { StandardSchemaV1 as i, ValidationSchemaObjectErrorProps as n, ValidationSchemaOutput as r, ValidationSchemaErrorProps as t };

package/dist/{vue/composables.d.ts → vue.d.mts}

@@ -1,8 +1,10 @@
-import type { MaybeRefOrGetter, ShallowRef } from 'vue';
-import type { Readable, Subscribable } from '../core/index';
-export interface UseSubscriptionOptions<S extends Subscribable<any> & Readable<any>, R = S['~']['output']> {
-    selector?: (value: S['~']['output']) => R;
-    isEqual?: (prev: R, next: R) => boolean;
+import { _ as Readable, v as Subscribable } from "./index-ChvHgGIa.mjs";
+import { MaybeRefOrGetter, ShallowRef } from "vue";
+
+//#region src/vue/composables.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 composable to subscribe to a reactive value. Accepts a subscription object
@@ -67,4 +69,6 @@ export interface UseSubscriptionOptions<S extends Subscribable<any> & Readable<a
  * </template>
  * ```
  */
-export declare function useSubscription<S extends Subscribable<any> & Readable<any>, R = S['~']['output']>(source: MaybeRefOrGetter<S>, options?: UseSubscriptionOptions<S, R>): Readonly<ShallowRef<R>>;
+declare function useSubscription<S extends Subscribable<any> & Readable<any>, R = S['~']['output']>(source: MaybeRefOrGetter<S>, options?: UseSubscriptionOptions<S, R>): Readonly<ShallowRef<R>>;
+//#endregion
+export { UseSubscriptionOptions, useSubscription };

package/dist/vue.mjs

@@ -0,0 +1,87 @@
+import { deepEqual } from "fast-equals";
+import { computed, onWatcherCleanup, readonly, shallowRef, toValue, watch } from "vue";
+//#region src/vue/composables.ts
+/**
+* Use this composable to subscribe to a reactive value. Accepts a subscription object
+* directly or a ref/getter that returns one.
+*
+* @example Inline subscription
+* ```vue
+* <script setup lang="ts">
+* import { createWebStorageValue } from 'seitu/web'
+* import { useSubscription } from 'seitu/vue'
+* import * as z from 'zod'
+*
+* const value = useSubscription(
+*   createWebStorageValue({ type: 'sessionStorage', key: 'test', defaultValue: 0, schema: z.number() }),
+* )
+* <\/script>
+*
+* <template>
+*   <div>{{ value }}</div>
+* </template>
+* ```
+*
+* @example Instance outside of the subscription
+* ```vue
+* <script setup lang="ts">
+* import { createWebStorage } from 'seitu/web'
+* import { useSubscription } from 'seitu/vue'
+* 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>
+*
+* <template>
+*   <div>{{ value.count }}</div>
+* </template>
+* ```
+*
+* @example With selector
+* ```vue
+* <script setup lang="ts">
+* import { createWebStorage } from 'seitu/web'
+* import { useSubscription } from 'seitu/vue'
+* import * as z from 'zod'
+*
+* const sessionStorage = createWebStorage({
+*   type: 'sessionStorage',
+*   schemas: { count: z.number(), name: z.string() },
+*   defaultValues: { count: 0, name: '' },
+* })
+*
+* const count = useSubscription(sessionStorage, { selector: v => v.count })
+* <\/script>
+*
+* <template>
+*   <div>{{ count }}</div>
+* </template>
+* ```
+*/
+function useSubscription(source, options) {
+	const { selector, isEqual = deepEqual } = options ?? {};
+	function getSnapshot(sub) {
+		return selector ? selector(sub.get()) : sub.get();
+	}
+	const sub = computed(() => toValue(source));
+	const state = shallowRef(getSnapshot(sub.value));
+	watch(sub, (sub) => {
+		state.value = getSnapshot(sub);
+		const unsubscribe = sub.subscribe(() => {
+			const next = getSnapshot(sub);
+			if (!isEqual(state.value, next)) state.value = next;
+		});
+		onWatcherCleanup(() => {
+			unsubscribe();
+		});
+	}, { immediate: true });
+	return readonly(state);
+}
+//#endregion
+export { useSubscription };