@yakocloud/state-vocab 4.0.3 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -366,14 +366,28 @@ export const storage = setupStorage({
366
366
  })
367
367
  ```
368
368
 
369
- **2. Create server and client storage handles:**
369
+ **2. Create a client context, then create server and client storage handles:**
370
+
371
+ Each storage tree needs its own React context so that multiple independent providers can coexist on the same page without their state bleeding into each other.
372
+
373
+ ```ts
374
+ // storage.context.client.ts ("use client")
375
+ "use client"
376
+
377
+ import { createContext } from 'react'
378
+
379
+ export const StorageClientContext = createContext({})
380
+ ```
370
381
 
371
382
  ```ts
372
383
  // storage.server.ts
373
384
  import { storage } from '@/storage'
374
385
  import { serverify } from '@yakocloud/state-vocab/server'
386
+ import { StorageClientContext } from '@/storage.context.client'
375
387
 
376
- export const serverStorage = serverify(storage)
388
+ export const serverStorage = serverify(storage, {
389
+ clientContext: StorageClientContext,
390
+ })
377
391
  ```
378
392
 
379
393
  ```ts
@@ -382,8 +396,11 @@ export const serverStorage = serverify(storage)
382
396
 
383
397
  import { storage } from '@/storage'
384
398
  import { clientify } from '@yakocloud/state-vocab/client'
399
+ import { StorageClientContext } from '@/storage.context.client'
385
400
 
386
- export const clientStorage = clientify(storage)
401
+ export const clientStorage = clientify(storage, {
402
+ clientContext: StorageClientContext,
403
+ })
387
404
  ```
388
405
 
389
406
  **3. Seed initial state in the server component and read it in Server and Client children:**
@@ -395,6 +412,10 @@ import { serverStorage } from '@/storage.server'
395
412
  const { StateVocabProvider } = serverStorage
396
413
 
397
414
  export default async function Page() {
415
+ // Call start() before rendering the provider — registers the store for this
416
+ // request so child components can await getState() concurrently
417
+ serverStorage.start()
418
+
398
419
  // Fetch data from DB / API
399
420
  const user = await db.getUser()
400
421
 
@@ -416,8 +437,8 @@ export default async function Page() {
416
437
  import { serverStorage } from '@/storage.server'
417
438
 
418
439
  export default async function UserInfo() {
419
- const name = serverStorage.user.name.getState()
420
- const role = serverStorage.user.role.getState()
440
+ const name = await serverStorage.user.name.getState()
441
+ const role = await serverStorage.user.role.getState()
421
442
 
422
443
  return <p>{name} — {role}</p>
423
444
  }
@@ -437,9 +458,43 @@ export default function UserInfoClient() {
437
458
  }
438
459
  ```
439
460
 
461
+ #### Multiple independent storage trees
462
+
463
+ Because each `serverify`/`clientify` pair is bound to its own context, you can have multiple independent providers active at the same time — for example, a layout-level store and a page-level store — without them interfering with each other:
464
+
465
+ ```ts
466
+ // layout.context.client.ts ("use client")
467
+ export const LayoutClientContext = createContext({})
468
+
469
+ // page.context.client.ts ("use client")
470
+ export const PageClientContext = createContext({})
471
+
472
+ // layout.storage.server.ts
473
+ export const layoutServerStorage = serverify(layoutStorage, {
474
+ clientContext: LayoutClientContext
475
+ })
476
+
477
+ // layout.storage.client.ts ("use client")
478
+ export const layoutClientStorage = clientify(layoutStorage, {
479
+ clientContext: LayoutClientContext
480
+ })
481
+
482
+ // page.storage.server.ts
483
+ export const pageServerStorage = serverify(pageStorage, {
484
+ clientContext: PageClientContext
485
+ })
486
+
487
+ // page.storage.client.ts ("use client")
488
+ export const pageClientStorage = clientify(pageStorage, {
489
+ clientContext: PageClientContext
490
+ })
491
+ ```
492
+
493
+ Each `StateVocabProvider` wraps its own subtree; a component that calls `pageClientStorage.user.name.useState()` reads only from the nearest `pageServerStorage.StateVocabProvider`, not from the layout provider.
494
+
440
495
  #### `serverify(storage)`
441
496
 
442
- Converts a storage tree into its server-side counterpart. Each leaf gains a `.getState()` method that reads the value seeded into the nearest `StateVocabProvider`. Each namespace node (including the root) gains a `.seed()` method that returns the input wrapped under its full ancestor path. This method is optional for using. The result also exposes `StateVocabProvider` — a server-aware provider that accepts a plain object `value` prop to pre-seed the store.
497
+ Converts a storage tree into its server-side counterpart. Each leaf gains an async `.getState()` method that resolves once the nearest `StateVocabProvider` renders and provides its value. Each namespace node (including the root) gains a `.seed()` method that returns the input wrapped under its full ancestor path. The result also exposes `StateVocabProvider` and `start()` call `start()` at the top of the component that renders `StateVocabProvider` so concurrent server children can await the value without timing out.
443
498
 
444
499
  **`.seed()` syntax:**
445
500
 
@@ -457,7 +512,7 @@ serverStorage.person.address.seed({ city: 'NY' })
457
512
  // → { person: { address: { city: 'NY' } } }
458
513
  ```
459
514
 
460
- **`node.getState()`** reads the value for that leaf from the surrounding `StateVocabProvider`. Throws if called outside one.
515
+ **`node.getState()`** asynchronously reads the value for that leaf once the surrounding `StateVocabProvider` has rendered. Returns `Promise<V>` — always `await` it. Throws (rejects) if called outside a provider scope or if `serverTimeout` expires.
461
516
 
462
517
  #### `clientify(storage)`
463
518
 
@@ -694,33 +749,56 @@ import { StateVocabClientProvider } from '@yakocloud/state-vocab/client'
694
749
  </StateVocabClientProvider>
695
750
  ```
696
751
 
697
- ### `serverify<T>(storage: T)`
752
+ ### `serverify<T>(storage: T, options)`
698
753
 
699
754
  Converts a storage tree to its server-side counterpart. Available from `@yakocloud/state-vocab/server`.
700
755
 
701
- Each leaf gains `.getState()` reads the value from the nearest `StateVocabProvider`. Each namespace node gains `.seed()`, which returns the input wrapped under its full ancestor path. The result also includes `StateVocabProvider` — use it instead of importing from `@yakocloud/state-vocab/server`.
756
+ | Option | Type | Description |
757
+ |---|---|---|
758
+ | `clientContext` | `Context<object>` | **Required.** A React context created with `createContext({})` in a `"use client"` file. Must match the `clientContext` passed to `clientify` for the same storage tree. |
759
+ | `serverTimeout` | `number \| undefined` | Timeout in ms for each `getState()` call. Defaults to `1000`. If the `StateVocabProvider` has not rendered within this window, `getState()` rejects with a descriptive error. |
760
+
761
+ The result exposes:
762
+
763
+ - **`start()`** — call once at the top of the component that renders `StateVocabProvider`, before any `await` expressions. It registers a pending promise in the per-request store (`React.cache()` scope), which lets concurrent server components `await getState()` without hanging. Must be called within a React render context.
764
+ - **`StateVocabProvider`** — synchronous server component that accepts a `value` prop and resolves the pending promise registered by `start()`.
765
+ - **`node.getState()`** — async; reads the value for that leaf once the nearest `StateVocabProvider` has rendered. Throws if called outside a provider scope or if the timeout expires.
766
+ - **`node.seed(input)`** — wraps `input` under the node's ancestor path, returning a plain object ready to pass as the `value` prop.
702
767
 
703
768
  ```ts
704
769
  import { serverify } from '@yakocloud/state-vocab/server'
705
- const serverStorage = serverify(storage)
770
+ import { MyClientContext } from '@/storage.context.client'
706
771
 
707
- const { StateVocabProvider } = serverStorage // server-aware provider
772
+ const serverStorage = serverify(storage, {
773
+ clientContext: MyClientContext,
774
+ serverTimeout: 2000, // optional, default 1000
775
+ })
708
776
 
709
- serverStorage.user.name.getState() // reads "user.name" from context
710
- serverStorage.user.seed({ name: 'Alice' }) // → { user: { name: 'Alice' } }
711
- serverStorage.person.address.seed({ city: 'NY' }) // { person: { address: { city: 'NY' } } }
712
- serverStorage.seed({ user: { name: 'Alice' } }) // { user: { name: 'Alice' } } (identity)
777
+ const { StateVocabProvider } = serverStorage
778
+
779
+ // In a Server Component:
780
+ serverStorage.start() // register before rendering
781
+ await serverStorage.user.name.getState() // reads "user.name" (async)
782
+ serverStorage.user.seed({ name: 'Alice' }) // → { user: { name: 'Alice' } }
783
+ serverStorage.person.address.seed({ city: 'NY' }) // → { person: { address: { city: 'NY' } } }
784
+ serverStorage.seed({ user: { name: 'Alice' } }) // → { user: { name: 'Alice' } } (identity)
713
785
  ```
714
786
 
715
- ### `clientify<T>(storage: T)`
787
+ ### `clientify<T>(storage: T, options?)`
716
788
 
717
789
  Converts a storage tree to its client-side counterpart. Available from `@yakocloud/state-vocab/client`.
718
790
 
791
+ | Option | Type | Description |
792
+ |---|---|---|
793
+ | `clientContext` | `Context<object> \| undefined` | The React context created with `createContext({})` for this storage tree. Must match the `clientContext` passed to `serverify`. Required when using RSC; omit for SPA-only setups. |
794
+
719
795
  Each leaf gains `.useState()` and `.useInitialState()`. The tree structure mirrors the original.
720
796
 
721
797
  ```ts
722
798
  import { clientify } from '@yakocloud/state-vocab/client'
723
- const clientStorage = clientify(storage)
799
+ import { MyClientContext } from '@/storage.context.client'
800
+
801
+ const clientStorage = clientify(storage, { clientContext: MyClientContext })
724
802
 
725
803
  // In a "use client" component:
726
804
  const [name] = clientStorage.user.name.useState()
@@ -1 +1 @@
1
- "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),v=require("./constants-CbsduCZ7.js"),a=require("./utils-0CTNJ4ZE.js"),V=require("./provider-client-B4XQ24JB.js");function D(t,e,n=[]){return u.useMemo(()=>a.debounce(t,e),n)}const g=t=>{const{vocabStore:e,storage:n,statePath:o,value:i,deserialize:S,serialize:l}=t,f=n.getItem(o);f===null?a.isValueDefined(i)&&n.setItem(o,l(i)):e.set(o,S(f))},z=typeof window>"u",O=z?u.useEffect:u.useLayoutEffect,m=new V.VocabStore,A="Make sure your component is wrapped in StateVocabProvider (RSC) or disable ssr option in setupStorage for SPA (RCC only)";function I(t){t??={};const e=z?void 0:a.valueOrFactory(t.storage),n=a.valueOrFactory(t.defaultValue),o=t.bidirectional,i=this[v.STATE_PATH],S=this[v.STATE_VERBOSE],l=this[v.STATE_VERBOSE_PATH],f=this[v.STATE_SSR];let s=V.useStateVocabClientContext({verbose:S});if(!(s instanceof V.VocabStore)){if(f)throw new Error(A);s=m}const d=t.serialize??JSON.stringify,c=t.deserialize??JSON.parse,E=D(t.onSet??(()=>{}),t.delayedSet,[]),y=u.useRef(void 0),C=u.useRef(!1);if(!C.current){C.current=!0;let r=s.get(i);a.isValueDefined(r)||(r=n,a.isValueDefined(r)&&s.set(i,r)),!f&&e&&g({vocabStore:s,storage:e,statePath:i,value:r,serialize:d,deserialize:c})}const h=u.useSyncExternalStore(s.subscribe.bind(s),s.getClientSnapshot.bind(s),s.getServerSnapshot.bind(s));if(S)if(l){const r=a.get(h,l);r&&a.logStyled(r)}else a.logStyled(h);const T=a.get(h,i,n);y.current=T,O(()=>{!f||!e||g({vocabStore:s,storage:e,statePath:i,value:T,serialize:d,deserialize:c})},[]);const w=u.useEffectEvent(r=>{if(r.key!==i)return;const b=r.newValue,R=(b===null?null:c(b))??n;a.isValueDefined(R)&&(s.set(i,R),E(R,y.current))});u.useEffect(()=>{if(o)return window.addEventListener("storage",w),()=>window.removeEventListener("storage",w)},[o]);const p=u.useCallback(r=>{const b=a.isTransformer(r)?r(y.current):r;s.set(i,b),E(b,y.current),e&&e.setItem(i,d(b))},[s,i,E,e,d]),_=u.useCallback(()=>{const r=n;if(!a.isValueDefined(r)){e?.removeItem(i);return}s.set(i,r),E(r,y.current),e&&e.setItem(i,d(r))},[n,s,i,E,e,d]);return[T,p,_]}function k(t){t??={};const e=z?void 0:a.valueOrFactory(t.storage),n=a.valueOrFactory(t.defaultValue),o=this[v.STATE_PATH],i=this[v.STATE_VERBOSE],S=this[v.STATE_SSR];let l=V.useStateVocabClientContext({verbose:i});if(!(l instanceof V.VocabStore)){if(S)throw new Error(A);l=m}const f=t.serialize??JSON.stringify,s=t.deserialize??JSON.parse,d=u.useRef(!1);let c;d.current||(d.current=!0,c=l.get(o),a.isValueDefined(c)||(c=n,a.isValueDefined(c)&&l.set(o,c)),!S&&e&&g({vocabStore:l,storage:e,statePath:o,value:c,serialize:f,deserialize:s})),O(()=>{!S||!e||g({vocabStore:l,storage:e,statePath:o,value:c,serialize:f,deserialize:s})},[])}function q(t){return typeof t=="object"&&t!==null&&"clientSlot"in t}function P(t){const e={};for(const n in t){const o=t[n];q(o)?(e[n]=o.clientSlot({useState(...i){return I.apply(this,i)},useInitialState(...i){k.apply(this,i)}}),delete e[n].serverSlot,delete e[n].clientSlot):o!==null&&typeof o=="object"?e[n]=P(o):e[n]=o}return e}exports.StateVocabClientProvider=V.StateVocabClientProvider;exports.clientify=P;
1
+ "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),v=require("./constants-CbsduCZ7.js"),a=require("./utils-CuApuc3e.js"),V=require("./provider-client-DRdFy5dG.js");function D(t,n,s=[]){return f.useMemo(()=>a.debounce(t,n),s)}const y=t=>{const{vocabStore:n,storage:s,statePath:o,value:e,deserialize:l,serialize:c}=t,d=s.getItem(o);d===null?a.isValueDefined(e)&&s.setItem(o,c(e)):n.set(o,l(d))},R=typeof window>"u",m=R?f.useEffect:f.useLayoutEffect,A=new V.VocabStore,P="Make sure your component is wrapped in StateVocabProvider (RSC) or disable ssr option in setupStorage for SPA (RCC only)";function I(t){const n=R?void 0:a.valueOrFactory(t.storage),s=a.valueOrFactory(t.defaultValue),o=t.bidirectional,e=this[v.STATE_PATH],l=this[v.STATE_VERBOSE],c=this[v.STATE_VERBOSE_PATH],d=this[v.STATE_SSR];let i=V.useStateVocabClientContext({clientContext:t.clientContext,verbose:l});if(!(i instanceof V.VocabStore)){if(d)throw new Error(P);i=A}const S=t.serialize??JSON.stringify,u=t.deserialize??JSON.parse,E=D(t.onSet??(()=>{}),t.delayedSet,[]),g=f.useRef(void 0),z=f.useRef(!1);if(!z.current){z.current=!0;let r=i.get(e);a.isValueDefined(r)||(r=s,a.isValueDefined(r)&&i.set(e,r)),!d&&n&&y({vocabStore:i,storage:n,statePath:e,value:r,serialize:S,deserialize:u})}const C=f.useSyncExternalStore(i.subscribe.bind(i),i.getClientSnapshot.bind(i),i.getServerSnapshot.bind(i));if(l)if(c){const r=a.get(C,c);r&&a.logStyled(r)}else a.logStyled(C);const h=a.get(C,e,s);g.current=h,m(()=>{!d||!n||y({vocabStore:i,storage:n,statePath:e,value:h,serialize:S,deserialize:u})},[]);const w=f.useEffectEvent(r=>{if(r.key!==e)return;const b=r.newValue,T=(b===null?null:u(b))??s;a.isValueDefined(T)&&(i.set(e,T),E(T,g.current))});f.useEffect(()=>{if(o)return window.addEventListener("storage",w),()=>window.removeEventListener("storage",w)},[o]);const x=f.useCallback(r=>{const b=a.isTransformer(r)?r(g.current):r;i.set(e,b),E(b,g.current),n&&n.setItem(e,S(b))},[i,e,E,n,S]),_=f.useCallback(()=>{const r=s;if(!a.isValueDefined(r)){n?.removeItem(e);return}i.set(e,r),E(r,g.current),n&&n.setItem(e,S(r))},[s,i,e,E,n,S]);return[h,x,_]}function p(t){const n=R?void 0:a.valueOrFactory(t.storage),s=a.valueOrFactory(t.defaultValue),o=this[v.STATE_PATH],e=this[v.STATE_VERBOSE],l=this[v.STATE_SSR];let c=V.useStateVocabClientContext({clientContext:t.clientContext,verbose:e});if(!(c instanceof V.VocabStore)){if(l)throw new Error(P);c=A}const d=t.serialize??JSON.stringify,i=t.deserialize??JSON.parse,S=f.useRef(!1);let u;S.current||(S.current=!0,u=c.get(o),a.isValueDefined(u)||(u=s,a.isValueDefined(u)&&c.set(o,u)),!l&&n&&y({vocabStore:c,storage:n,statePath:o,value:u,serialize:d,deserialize:i})),m(()=>{!l||!n||y({vocabStore:c,storage:n,statePath:o,value:u,serialize:d,deserialize:i})},[])}function k(t){return typeof t=="object"&&t!==null&&"clientSlot"in t}function O(t,n={}){const s={};for(const o in t){const e=t[o];k(e)?(s[o]=e.clientSlot({useState(l){return I.apply(this,[{clientContext:n.clientContext,...l}])},useInitialState(l){p.apply(this,[{clientContext:n.clientContext,...l}])}}),delete s[o].serverSlot,delete s[o].clientSlot):e!==null&&typeof e=="object"?s[o]=O(e,n):s[o]=e}return s}exports.StateVocabClientProvider=V.StateVocabClientProvider;exports.clientify=O;
package/dist/client.es.js CHANGED
@@ -1,37 +1,39 @@
1
1
  "use client";
2
- import { useMemo as x, useRef as y, useSyncExternalStore as B, useEffectEvent as D, useEffect as A, useCallback as T, useLayoutEffect as H } from "react";
3
- import { S as I, a as O, b as _, c as F } from "./constants-BB1YAX6c.mjs";
4
- import { a as d, d as G, v as g, g as C, l as P, i as q } from "./utils-xV3x3fTc.mjs";
5
- import { V as z, u as k } from "./provider-client-C2Aw0Lmi.mjs";
6
- import { S as ie } from "./provider-client-C2Aw0Lmi.mjs";
7
- function K(t, e, n = []) {
8
- return x(
9
- () => G(t, e),
2
+ import { useMemo as j, useRef as y, useSyncExternalStore as B, useEffectEvent as D, useEffect as P, useCallback as p, useLayoutEffect as H } from "react";
3
+ import { S as A, a as I, b as O, c as F } from "./constants-BB1YAX6c.mjs";
4
+ import { a as d, d as G, v as g, g as T, l as x, i as q } from "./utils-xNWifFE9.mjs";
5
+ import { V as C, u as _ } from "./provider-client-BhPeK8Kz.mjs";
6
+ import { S as ne } from "./provider-client-BhPeK8Kz.mjs";
7
+ function K(t, s, i = []) {
8
+ return j(
9
+ () => G(t, s),
10
10
  // eslint-disable-next-line react-hooks/exhaustive-deps
11
- n
11
+ i
12
12
  );
13
13
  }
14
14
  const E = (t) => {
15
15
  const {
16
- vocabStore: e,
17
- storage: n,
16
+ vocabStore: s,
17
+ storage: i,
18
18
  statePath: o,
19
- value: s,
20
- deserialize: f,
21
- serialize: a
22
- } = t, c = n.getItem(o);
23
- c === null ? d(s) && n.setItem(o, a(s)) : e.set(o, f(c));
24
- }, p = typeof window > "u", J = p ? A : H, L = new z(), N = "Make sure your component is wrapped in StateVocabProvider (RSC) or disable ssr option in setupStorage for SPA (RCC only)";
19
+ value: e,
20
+ deserialize: a,
21
+ serialize: l
22
+ } = t, u = i.getItem(o);
23
+ u === null ? d(e) && i.setItem(o, l(e)) : s.set(o, a(u));
24
+ }, z = typeof window > "u", k = z ? P : H, J = new C(), L = "Make sure your component is wrapped in StateVocabProvider (RSC) or disable ssr option in setupStorage for SPA (RCC only)";
25
25
  function Q(t) {
26
- t ??= {};
27
- const e = p ? void 0 : g(t.storage), n = g(t.defaultValue), o = t.bidirectional, s = this[I], f = this[O], a = this[F], c = this[_];
28
- let r = k({ verbose: f });
29
- if (!(r instanceof z)) {
30
- if (c)
31
- throw new Error(N);
32
- r = L;
26
+ const s = z ? void 0 : g(t.storage), i = g(t.defaultValue), o = t.bidirectional, e = this[A], a = this[I], l = this[F], u = this[O];
27
+ let r = _({
28
+ clientContext: t.clientContext,
29
+ verbose: a
30
+ });
31
+ if (!(r instanceof C)) {
32
+ if (u)
33
+ throw new Error(L);
34
+ r = J;
33
35
  }
34
- const u = t.serialize ?? JSON.stringify, l = t.deserialize ?? JSON.parse, v = K(
36
+ const f = t.serialize ?? JSON.stringify, c = t.deserialize ?? JSON.parse, v = K(
35
37
  t.onSet ?? (() => {
36
38
  }),
37
39
  t.delayedSet,
@@ -39,14 +41,14 @@ function Q(t) {
39
41
  ), b = y(void 0), w = y(!1);
40
42
  if (!w.current) {
41
43
  w.current = !0;
42
- let i = r.get(s);
43
- d(i) || (i = n, d(i) && r.set(s, i)), !c && e && E({
44
+ let n = r.get(e);
45
+ d(n) || (n = i, d(n) && r.set(e, n)), !u && s && E({
44
46
  vocabStore: r,
45
- storage: e,
46
- statePath: s,
47
- value: i,
48
- serialize: u,
49
- deserialize: l
47
+ storage: s,
48
+ statePath: e,
49
+ value: n,
50
+ serialize: f,
51
+ deserialize: c
50
52
  });
51
53
  }
52
54
  const h = B(
@@ -54,75 +56,77 @@ function Q(t) {
54
56
  r.getClientSnapshot.bind(r),
55
57
  r.getServerSnapshot.bind(r)
56
58
  );
57
- if (f)
58
- if (a) {
59
- const i = C(h, a);
60
- i && P(i);
59
+ if (a)
60
+ if (l) {
61
+ const n = T(h, l);
62
+ n && x(n);
61
63
  } else
62
- P(h);
63
- const m = C(h, s, n);
64
- b.current = m, J(() => {
65
- !c || !e || E({
64
+ x(h);
65
+ const m = T(h, e, i);
66
+ b.current = m, k(() => {
67
+ !u || !s || E({
66
68
  vocabStore: r,
67
- storage: e,
68
- statePath: s,
69
+ storage: s,
70
+ statePath: e,
69
71
  value: m,
70
- serialize: u,
71
- deserialize: l
72
+ serialize: f,
73
+ deserialize: c
72
74
  });
73
75
  }, []);
74
- const R = D((i) => {
75
- if (i.key !== s)
76
+ const R = D((n) => {
77
+ if (n.key !== e)
76
78
  return;
77
- const S = i.newValue, V = (S === null ? null : l(S)) ?? n;
78
- d(V) && (r.set(s, V), v(V, b.current));
79
+ const S = n.newValue, V = (S === null ? null : c(S)) ?? i;
80
+ d(V) && (r.set(e, V), v(V, b.current));
79
81
  });
80
- A(() => {
82
+ P(() => {
81
83
  if (o)
82
84
  return window.addEventListener("storage", R), () => window.removeEventListener("storage", R);
83
85
  }, [o]);
84
- const M = T((i) => {
85
- const S = q(i) ? i(b.current) : i;
86
- r.set(s, S), v(S, b.current), e && e.setItem(s, u(S));
87
- }, [r, s, v, e, u]), j = T(() => {
88
- const i = n;
89
- if (!d(i)) {
90
- e?.removeItem(s);
86
+ const N = p((n) => {
87
+ const S = q(n) ? n(b.current) : n;
88
+ r.set(e, S), v(S, b.current), s && s.setItem(e, f(S));
89
+ }, [r, e, v, s, f]), M = p(() => {
90
+ const n = i;
91
+ if (!d(n)) {
92
+ s?.removeItem(e);
91
93
  return;
92
94
  }
93
- r.set(s, i), v(i, b.current), e && e.setItem(s, u(i));
94
- }, [n, r, s, v, e, u]);
95
+ r.set(e, n), v(n, b.current), s && s.setItem(e, f(n));
96
+ }, [i, r, e, v, s, f]);
95
97
  return [
96
98
  m,
97
- M,
98
- j
99
+ N,
100
+ M
99
101
  ];
100
102
  }
101
103
  function U(t) {
102
- t ??= {};
103
- const e = p ? void 0 : g(t.storage), n = g(t.defaultValue), o = this[I], s = this[O], f = this[_];
104
- let a = k({ verbose: s });
105
- if (!(a instanceof z)) {
106
- if (f)
107
- throw new Error(N);
108
- a = L;
104
+ const s = z ? void 0 : g(t.storage), i = g(t.defaultValue), o = this[A], e = this[I], a = this[O];
105
+ let l = _({
106
+ clientContext: t.clientContext,
107
+ verbose: e
108
+ });
109
+ if (!(l instanceof C)) {
110
+ if (a)
111
+ throw new Error(L);
112
+ l = J;
109
113
  }
110
- const c = t.serialize ?? JSON.stringify, r = t.deserialize ?? JSON.parse, u = y(!1);
111
- let l;
112
- u.current || (u.current = !0, l = a.get(o), d(l) || (l = n, d(l) && a.set(o, l)), !f && e && E({
113
- vocabStore: a,
114
- storage: e,
114
+ const u = t.serialize ?? JSON.stringify, r = t.deserialize ?? JSON.parse, f = y(!1);
115
+ let c;
116
+ f.current || (f.current = !0, c = l.get(o), d(c) || (c = i, d(c) && l.set(o, c)), !a && s && E({
117
+ vocabStore: l,
118
+ storage: s,
115
119
  statePath: o,
116
- value: l,
117
- serialize: c,
120
+ value: c,
121
+ serialize: u,
118
122
  deserialize: r
119
- })), J(() => {
120
- !f || !e || E({
121
- vocabStore: a,
122
- storage: e,
123
+ })), k(() => {
124
+ !a || !s || E({
125
+ vocabStore: l,
126
+ storage: s,
123
127
  statePath: o,
124
- value: l,
125
- serialize: c,
128
+ value: c,
129
+ serialize: u,
126
130
  deserialize: r
127
131
  });
128
132
  }, []);
@@ -130,22 +134,28 @@ function U(t) {
130
134
  function W(t) {
131
135
  return typeof t == "object" && t !== null && "clientSlot" in t;
132
136
  }
133
- function X(t) {
134
- const e = {};
135
- for (const n in t) {
136
- const o = t[n];
137
- W(o) ? (e[n] = o.clientSlot({
138
- useState(...s) {
139
- return Q.apply(this, s);
137
+ function X(t, s = {}) {
138
+ const i = {};
139
+ for (const o in t) {
140
+ const e = t[o];
141
+ W(e) ? (i[o] = e.clientSlot({
142
+ useState(a) {
143
+ return Q.apply(this, [{
144
+ clientContext: s.clientContext,
145
+ ...a
146
+ }]);
140
147
  },
141
- useInitialState(...s) {
142
- U.apply(this, s);
148
+ useInitialState(a) {
149
+ U.apply(this, [{
150
+ clientContext: s.clientContext,
151
+ ...a
152
+ }]);
143
153
  }
144
- }), delete e[n].serverSlot, delete e[n].clientSlot) : o !== null && typeof o == "object" ? e[n] = X(o) : e[n] = o;
154
+ }), delete i[o].serverSlot, delete i[o].clientSlot) : e !== null && typeof e == "object" ? i[o] = X(e, s) : i[o] = e;
145
155
  }
146
- return e;
156
+ return i;
147
157
  }
148
158
  export {
149
- ie as StateVocabClientProvider,
159
+ ne as StateVocabClientProvider,
150
160
  X as clientify
151
161
  };
package/dist/index.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./constants-CbsduCZ7.js"),h=require("./utils-0CTNJ4ZE.js");function z(t={}){return{[r.STATE_DEFINITION]:!0,[r.STATE_PATH]:"",[r.STATE_VERBOSE]:!1,[r.STATE_VERBOSE_PATH]:"",[r.STATE_SSR]:!1,serverSlot(a){return Object.assign(this,{getState(...e){return a.getState.apply(this,e)}})},clientSlot(a){return Object.assign(this,{useState(e){return e??={},a.useState.apply(this,[{defaultValue:h.valueOrFactory(e.defaultValue)??h.valueOrFactory(t.defaultValue),bidirectional:e.bidirectional??t.bidirectional,storage:e.storage??t.storage,serialize:t.serialize??JSON.stringify,deserialize:t.deserialize??JSON.parse,delayedSet:e.delayedSet,onSet(...f){e.onSet&&e.onSet(...f)}}])},useInitialState(e){a.useInitialState.apply(this,[{defaultValue:e.defaultValue,storage:t.storage,serialize:t.serialize,deserialize:t.deserialize}])}})},toString(){return this[r.STATE_PATH]}}}function y(t,a){const{path:e="",verbose:f,verbosePath:A,ssr:b,cache:c}=a;let s=c.proxy.get(t);s||(s=new Map,c.proxy.set(t,s));const o=s.get(e);if(o)return o;const d=new Proxy(t,{get(P,T){const l=P[T],S=e?`${e}.${String(T)}`:String(T);if(l&&typeof l=="object"&&r.STATE_DEFINITION in l){const i=l;let n=c.leaf.get(i);n||(n=new Map,c.leaf.set(i,n));const g=n.get(S);if(g)return g;const _=Reflect.ownKeys(i).filter(u=>typeof i[u]=="function"),v=Object.fromEntries(_.map(u=>[u,(...V)=>i[u].call({...i,[r.STATE_PATH]:S,[r.STATE_VERBOSE]:f,[r.STATE_VERBOSE_PATH]:A,[r.STATE_SSR]:b},...V)])),E={...i,...v};return n.set(S,E),E}return l&&typeof l=="object"?y(l,{...a,path:S}):l}});return s.set(e,d),d}function I(t,a){return y(t,{...a,ssr:a?.ssr??!0,verbosePath:a?.verbosePath??"",cache:{proxy:new WeakMap,leaf:new WeakMap}})}exports.defineState=z;exports.setupStorage=I;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./constants-CbsduCZ7.js"),h=require("./utils-CuApuc3e.js");function z(t={}){return{[r.STATE_DEFINITION]:!0,[r.STATE_PATH]:"",[r.STATE_VERBOSE]:!1,[r.STATE_VERBOSE_PATH]:"",[r.STATE_SSR]:!1,serverSlot(a){return Object.assign(this,{getState(...e){return a.getState.apply(this,e)}})},clientSlot(a){return Object.assign(this,{useState(e){return e??={},a.useState.apply(this,[{defaultValue:h.valueOrFactory(e.defaultValue)??h.valueOrFactory(t.defaultValue),bidirectional:e.bidirectional??t.bidirectional,storage:e.storage??t.storage,serialize:t.serialize??JSON.stringify,deserialize:t.deserialize??JSON.parse,delayedSet:e.delayedSet,onSet(...f){e.onSet&&e.onSet(...f)}}])},useInitialState(e){a.useInitialState.apply(this,[{defaultValue:e.defaultValue,storage:t.storage,serialize:t.serialize,deserialize:t.deserialize}])}})},toString(){return this[r.STATE_PATH]}}}function y(t,a){const{path:e="",verbose:f,verbosePath:A,ssr:b,cache:c}=a;let s=c.proxy.get(t);s||(s=new Map,c.proxy.set(t,s));const o=s.get(e);if(o)return o;const d=new Proxy(t,{get(P,T){const l=P[T],S=e?`${e}.${String(T)}`:String(T);if(l&&typeof l=="object"&&r.STATE_DEFINITION in l){const i=l;let n=c.leaf.get(i);n||(n=new Map,c.leaf.set(i,n));const g=n.get(S);if(g)return g;const _=Reflect.ownKeys(i).filter(u=>typeof i[u]=="function"),v=Object.fromEntries(_.map(u=>[u,(...V)=>i[u].call({...i,[r.STATE_PATH]:S,[r.STATE_VERBOSE]:f,[r.STATE_VERBOSE_PATH]:A,[r.STATE_SSR]:b},...V)])),E={...i,...v};return n.set(S,E),E}return l&&typeof l=="object"?y(l,{...a,path:S}):l}});return s.set(e,d),d}function I(t,a){return y(t,{...a,ssr:a?.ssr??!0,verbosePath:a?.verbosePath??"",cache:{proxy:new WeakMap,leaf:new WeakMap}})}exports.defineState=z;exports.setupStorage=I;
package/dist/index.es.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { S as d, b as T, c as E, a as P, d as v } from "./constants-BB1YAX6c.mjs";
2
- import { v as b } from "./utils-xV3x3fTc.mjs";
2
+ import { v as b } from "./utils-xNWifFE9.mjs";
3
3
  function M(t = {}) {
4
4
  return {
5
5
  [v]: !0,
@@ -0,0 +1,42 @@
1
+ "use client";
2
+ import { jsx as u } from "react/jsx-runtime";
3
+ import { createContext as l, useContext as h, useState as S } from "react";
4
+ import { g as i, i as C, s as b } from "./utils-xNWifFE9.mjs";
5
+ const c = l({});
6
+ function m(e) {
7
+ const t = h(e.clientContext ?? c);
8
+ return e.verbose && console.log(`[Store uid]: ${t.uid}`), t;
9
+ }
10
+ class d {
11
+ uid;
12
+ #t;
13
+ #e;
14
+ constructor(t) {
15
+ this.uid = Math.random().toString(36).slice(2), this.#t = t ?? {}, this.#e = /* @__PURE__ */ new Set();
16
+ }
17
+ subscribe(t) {
18
+ return this.#e.add(t), () => this.#e.delete(t);
19
+ }
20
+ getClientSnapshot() {
21
+ return this.#t;
22
+ }
23
+ getServerSnapshot() {
24
+ return this.#t;
25
+ }
26
+ get(t) {
27
+ return i(this.#t, t);
28
+ }
29
+ set(t, o) {
30
+ const n = i(this.#t, t), s = C(o) ? o(n) : o, r = { ...this.#t };
31
+ b(r, t, s), this.#t = r, this.#e.forEach((a) => a());
32
+ }
33
+ }
34
+ function v(e) {
35
+ const { clientContext: t, value: o, children: n } = e, [s] = S(() => new d(o));
36
+ return /* @__PURE__ */ u((t ?? c).Provider, { value: s, children: n });
37
+ }
38
+ export {
39
+ v as S,
40
+ d as V,
41
+ m as u
42
+ };
@@ -0,0 +1 @@
1
+ "use client";"use strict";const h=require("react/jsx-runtime"),c=require("react"),r=require("./utils-CuApuc3e.js"),a=c.createContext({});function S(e){const t=c.useContext(e.clientContext??a);return e.verbose&&console.log(`[Store uid]: ${t.uid}`),t}class u{uid;#t;#e;constructor(t){this.uid=Math.random().toString(36).slice(2),this.#t=t??{},this.#e=new Set}subscribe(t){return this.#e.add(t),()=>this.#e.delete(t)}getClientSnapshot(){return this.#t}getServerSnapshot(){return this.#t}get(t){return r.get(this.#t,t)}set(t,n){const s=r.get(this.#t,t),i=r.isTransformer(n)?n(s):n,o={...this.#t};r.set(o,t,i),this.#t=o,this.#e.forEach(l=>l())}}function b(e){const{clientContext:t,value:n,children:s}=e,[i]=c.useState(()=>new u(n)),o=t??a;return h.jsx(o.Provider,{value:i,children:s})}exports.StateVocabClientProvider=b;exports.VocabStore=u;exports.useStateVocabClientContext=S;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),S=require("./constants-CbsduCZ7.js"),d=require("react"),v=require("node:async_hooks"),f=require("./provider-client-B4XQ24JB.js"),b=require("./utils-0CTNJ4ZE.js");function y(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const p=y(v),a=e=>{if(d.useState)throw new Error(`${e} only intended for Server Components`)};let s=null;try{a("StateVocabServerContext"),s=new p.AsyncLocalStorage}catch{s=null}const g=({value:e})=>(s?.enterWith({value:e}),null),P=({children:e})=>e,j=async e=>{a("StateVocabServerContext.Provider");const{value:t,children:r}=e;return o.jsxs(o.Fragment,{children:[o.jsx(g,{value:t}),r]})},h=()=>(a("getStateVocab"),s?.getStore()?.value),x={Provider:s?j:P},V=({value:e,children:t})=>o.jsx(x.Provider,{value:e,children:t});function m(e){const{children:t,value:r={}}=e;return o.jsx(V,{value:r,children:o.jsx(f.StateVocabClientProvider,{value:r,children:t})})}const O="Make sure your component is wrapped in StateVocabProvider";function C(){const e=this[S.STATE_PATH],t=h();if(!t)throw new Error(O);return b.get(t,e)}function E(e){return typeof e=="object"&&e!==null&&"serverSlot"in e}function l(e,t){const r={};for(const n in e){const c=e[n];if(E(c))r[n]=c.serverSlot({getState(...i){return C.apply(this,i)}}),delete r[n].serverSlot,delete r[n].clientSlot;else if(c!==null&&typeof c=="object"){const i=u=>t({[n]:u});r[n]=l(c,i)}else r[n]=c}return r.seed=n=>t(n),r}function k(e){return{...l(e,t=>t),StateVocabProvider({children:t,value:r}){return o.jsx(m,{value:r,children:t})}}}exports.serverify=k;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),S=require("./constants-CbsduCZ7.js"),l=require("react"),m=require("./provider-client-DRdFy5dG.js"),a=require("./utils-CuApuc3e.js"),d=e=>{if(l.useState)throw new Error(`${e} only intended for Server Components`)},c=l.cache(()=>new Map),f=async e=>(d("getStateVocab"),await c().get(e)),u="Make sure your component is wrapped in StateVocabProvider";async function w(e){const t=this[S.STATE_PATH],r=await a.withTimeout(f(e.serverContextKey),e.timeout,`Failed access to "${t}". Reason: Operation timed out after ${e.timeout}ms. ${u}.`);if(!r)throw new Error(u);return a.get(r,t)}function b(e){return typeof e=="object"&&e!==null&&"serverSlot"in e}function v(e,t){const r={};for(const o in e){const n=e[o];if(b(n))r[o]=n.serverSlot({getState(){return w.apply(this,[{serverContextKey:t.serverContextKey,timeout:t.serverTimeout}])}}),delete r[o].serverSlot,delete r[o].clientSlot;else if(n!==null&&typeof n=="object"){const i=s=>t.wrap({[o]:s});r[o]=v(n,{serverContextKey:t.serverContextKey,serverTimeout:t.serverTimeout,wrap:i})}else r[o]=n}return r.seed=o=>t.wrap(o),r}function x(e,t){const r=Object.keys(e).slice(0,3).join("-"),o=Symbol(r),n=Promise.withResolvers();return{...v(e,{serverContextKey:o,serverTimeout:t.serverTimeout??1e3,wrap:i=>i}),start(){const{size:i}=c(),s=Symbol("test");if(c().set(s,n.promise),c().size===i)throw new Error("Start execution only within a React render context (per-request)");c().delete(s),c().set(o,n.promise)},StateVocabProvider({children:i,value:s}){return s??={},n.resolve(s),y.jsx(m.StateVocabClientProvider,{clientContext:t.clientContext,value:s,children:i})}}}exports.serverify=x;
package/dist/server.es.js CHANGED
@@ -1,70 +1,76 @@
1
- import { jsxs as u, Fragment as v, jsx as c } from "react/jsx-runtime";
2
- import { S as d } from "./constants-BB1YAX6c.mjs";
3
- import f from "react";
4
- import * as p from "node:async_hooks";
5
- import { S as m } from "./provider-client-C2Aw0Lmi.mjs";
6
- import { g as b } from "./utils-xV3x3fTc.mjs";
7
- const i = (e) => {
8
- if (f.useState)
1
+ import { jsx as u } from "react/jsx-runtime";
2
+ import { S as m } from "./constants-BB1YAX6c.mjs";
3
+ import S, { cache as v } from "react";
4
+ import { S as y } from "./provider-client-BhPeK8Kz.mjs";
5
+ import { w as f, g as w } from "./utils-xNWifFE9.mjs";
6
+ const p = (e) => {
7
+ if (S.useState)
9
8
  throw new Error(`${e} only intended for Server Components`);
10
- };
11
- let s = null;
12
- try {
13
- i("StateVocabServerContext"), s = new p.AsyncLocalStorage();
14
- } catch {
15
- s = null;
16
- }
17
- const h = ({ value: e }) => (s?.enterWith({ value: e }), null), y = ({ children: e }) => e, P = async (e) => {
18
- i("StateVocabServerContext.Provider");
19
- const { value: t, children: r } = e;
20
- return /* @__PURE__ */ u(v, { children: [
21
- /* @__PURE__ */ c(h, { value: t }),
22
- r
23
- ] });
24
- }, g = () => (i("getStateVocab"), s?.getStore()?.value), V = {
25
- Provider: s ? P : y
26
- }, E = ({ value: e, children: t }) => /* @__PURE__ */ c(V.Provider, { value: e, children: t });
27
- function x(e) {
28
- const { children: t, value: r = {} } = e;
29
- return /* @__PURE__ */ c(E, { value: r, children: /* @__PURE__ */ c(m, { value: r, children: t }) });
9
+ }, c = v(() => /* @__PURE__ */ new Map()), d = async (e) => (p("getStateVocab"), await c().get(e)), a = "Make sure your component is wrapped in StateVocabProvider";
10
+ async function x(e) {
11
+ const t = this[m], r = await f(
12
+ d(e.serverContextKey),
13
+ e.timeout,
14
+ `Failed access to "${t}". Reason: Operation timed out after ${e.timeout}ms. ${a}.`
15
+ );
16
+ if (!r)
17
+ throw new Error(a);
18
+ return w(r, t);
30
19
  }
31
- const C = "Make sure your component is wrapped in StateVocabProvider";
32
- function w() {
33
- const e = this[d], t = g();
34
- if (!t)
35
- throw new Error(C);
36
- return b(t, e);
37
- }
38
- function R(e) {
20
+ function b(e) {
39
21
  return typeof e == "object" && e !== null && "serverSlot" in e;
40
22
  }
41
23
  function l(e, t) {
42
24
  const r = {};
43
25
  for (const o in e) {
44
26
  const n = e[o];
45
- if (R(n))
27
+ if (b(n))
46
28
  r[o] = n.serverSlot({
47
- // Slot definition
48
- getState(...a) {
49
- return w.apply(this, a);
29
+ getState() {
30
+ return x.apply(this, [{
31
+ serverContextKey: t.serverContextKey,
32
+ timeout: t.serverTimeout
33
+ }]);
50
34
  }
51
35
  }), delete r[o].serverSlot, delete r[o].clientSlot;
52
36
  else if (n !== null && typeof n == "object") {
53
- const a = (S) => t({ [o]: S });
54
- r[o] = l(n, a);
37
+ const i = (s) => t.wrap({ [o]: s });
38
+ r[o] = l(n, {
39
+ serverContextKey: t.serverContextKey,
40
+ serverTimeout: t.serverTimeout,
41
+ wrap: i
42
+ });
55
43
  } else
56
44
  r[o] = n;
57
45
  }
58
- return r.seed = (o) => t(o), r;
46
+ return r.seed = (o) => t.wrap(o), r;
59
47
  }
60
- function M(e) {
48
+ function E(e, t) {
49
+ const r = Object.keys(e).slice(0, 3).join("-"), o = Symbol(r), n = Promise.withResolvers();
61
50
  return {
62
- ...l(e, (t) => t),
63
- StateVocabProvider({ children: t, value: r }) {
64
- return /* @__PURE__ */ c(x, { value: r, children: t });
51
+ ...l(e, {
52
+ serverContextKey: o,
53
+ serverTimeout: t.serverTimeout ?? 1e3,
54
+ wrap: (i) => i
55
+ }),
56
+ start() {
57
+ const { size: i } = c(), s = /* @__PURE__ */ Symbol("test");
58
+ if (c().set(s, n.promise), c().size === i)
59
+ throw new Error("Start execution only within a React render context (per-request)");
60
+ c().delete(s), c().set(o, n.promise);
61
+ },
62
+ StateVocabProvider({ children: i, value: s }) {
63
+ return s ??= {}, n.resolve(s), /* @__PURE__ */ u(
64
+ y,
65
+ {
66
+ clientContext: t.clientContext,
67
+ value: s,
68
+ children: i
69
+ }
70
+ );
65
71
  }
66
72
  };
67
73
  }
68
74
  export {
69
- M as serverify
75
+ E as serverify
70
76
  };
@@ -1,8 +1,10 @@
1
+ import { type Context } from "react";
1
2
  import VocabStore from "./store";
2
- export declare const StateVocabClientContext: import("react").Context<VocabStore>;
3
+ export declare const DefaultStateVocabClientContext: Context<VocabStore>;
3
4
  /**
4
5
  * @see method from from https://zustand.docs.pmnd.rs/learn/guides/nextjs
5
6
  */
6
7
  export declare function useStateVocabClientContext(options: {
8
+ clientContext: Context<VocabStore> | undefined;
7
9
  verbose: boolean;
8
10
  }): VocabStore;
@@ -1,10 +1,3 @@
1
- import type { PropsWithChildren, ReactNode } from "react";
2
1
  import type { Vocab } from "./state.types";
3
- export declare const getStateVocab: () => Vocab | undefined;
4
- export declare const StateVocabServerContext: {
5
- Provider: (({ children }: PropsWithChildren<{
6
- value?: Vocab;
7
- }>) => ReactNode) | ((props: PropsWithChildren<{
8
- value: Vocab;
9
- }>) => Promise<import("react/jsx-runtime").JSX.Element>);
10
- };
2
+ export declare const getRequestStore: () => Map<symbol, Promise<Vocab>>;
3
+ export declare const getStateVocab: (serverContextKey: symbol) => Promise<Vocab | undefined>;
@@ -1,5 +1,7 @@
1
- import { type PropsWithChildren } from "react";
1
+ import { type Context, type PropsWithChildren } from "react";
2
+ import VocabStore from "./store";
2
3
  import type { Vocab } from "./state.types";
3
4
  export declare function StateVocabClientProvider(props: PropsWithChildren<{
5
+ clientContext?: Context<VocabStore>;
4
6
  value?: Vocab;
5
7
  }>): import("react/jsx-runtime").JSX.Element;
@@ -1,6 +1,10 @@
1
+ import { type Context } from "react";
1
2
  import type { ValueOrTransformer, VocabThis } from "./state.types";
3
+ import VocabStore from "./store";
2
4
  import type { UseInitialStateOptions, UseStateOptions } from "./setup.types";
3
- declare function useState<V>(this: VocabThis, options?: UseStateOptions<V>): readonly [V, (nextValue: ValueOrTransformer<V>) => void, () => void];
5
+ declare function useState<V>(this: VocabThis, options: UseStateOptions<V> & {
6
+ clientContext: Context<VocabStore> | undefined;
7
+ }): readonly [V, (nextValue: ValueOrTransformer<V>) => void, () => void];
4
8
  type Placeholder<V> = {
5
9
  useState(options?: UseStateOptions<V>): ReturnType<typeof useState<V>>;
6
10
  useInitialState(options?: UseInitialStateOptions<V>): void;
@@ -11,5 +15,7 @@ type Slot<V> = {
11
15
  type Clientified<R> = R extends Slot<infer TValue> ? Placeholder<TValue> : R extends object ? {
12
16
  [K in keyof R]: Clientified<R[K]>;
13
17
  } : R;
14
- export declare function clientify<R extends object>(tree: R): Clientified<R>;
18
+ export declare function clientify<R extends object>(tree: R, clientifyOptions?: {
19
+ clientContext?: Context<object>;
20
+ }): Clientified<R>;
15
21
  export {};
@@ -1,26 +1,36 @@
1
- import type { PropsWithChildren, ReactNode } from "react";
2
- import type { Vocab } from "./state.types";
1
+ import type { Context, PropsWithChildren, ReactNode } from "react";
2
+ import type { Vocab, VocabThis } from "./state.types";
3
3
  type Placeholder<V> = {
4
- getState(): V;
5
- };
6
- type Slot<V> = {
7
- serverSlot(input: Placeholder<V>): Placeholder<V>;
4
+ getState(): Promise<V>;
8
5
  };
6
+ type SlotValue<T> = T extends {
7
+ serverSlot(input: {
8
+ getState(this: VocabThis): infer V;
9
+ }): unknown;
10
+ } ? V : never;
9
11
  type ServerifiedValue<R> = {
10
- [K in keyof R]?: R[K] extends Slot<infer V> ? V : R[K] extends object ? ServerifiedValue<R[K]> : R[K];
12
+ [K in keyof R]?: [
13
+ SlotValue<R[K]>
14
+ ] extends [never] ? R[K] extends object ? ServerifiedValue<R[K]> : R[K] : SlotValue<R[K]>;
11
15
  };
12
- type Serverified<R> = R extends Slot<infer TValue> ? Placeholder<TValue> : R extends object ? {
16
+ type Serverified<R> = [
17
+ SlotValue<R>
18
+ ] extends [never] ? R extends object ? {
13
19
  seed(input: ServerifiedValue<R>): Vocab;
14
20
  } & {
15
21
  [K in keyof R]: Serverified<R[K]>;
16
- } : R;
22
+ } : R : Placeholder<SlotValue<R>>;
17
23
  type ServerifyResult<R extends object> = {
24
+ start(): void;
18
25
  seed(input: ServerifiedValue<R>): Vocab;
19
26
  StateVocabProvider(props: PropsWithChildren<{
20
27
  value?: ServerifiedValue<R>;
21
- }>): Promise<ReactNode>;
28
+ }>): ReactNode;
22
29
  } & {
23
30
  [K in keyof R]: Serverified<R[K]>;
24
31
  };
25
- export declare function serverify<R extends object>(tree: R): ServerifyResult<R>;
32
+ export declare function serverify<R extends object>(tree: R, serverifyOptions: {
33
+ clientContext: Context<object>;
34
+ serverTimeout?: number;
35
+ }): ServerifyResult<R>;
26
36
  export {};
@@ -51,7 +51,5 @@ export declare function defineState<V>(superOptions?: {
51
51
  }): void;
52
52
  };
53
53
  /** Returns the fully qualified state name (dot-separated path). */
54
- toString(this: {
55
- [STATE_PATH]: string;
56
- }): string;
54
+ toString(this: VocabThis): string;
57
55
  };
@@ -7,3 +7,4 @@ export declare function logStyled(obj: unknown): void;
7
7
  export declare const isTransformer: <V>(v: ValueOrTransformer<V>) => v is Transformer<V>;
8
8
  export declare const isValueDefined: <V>(v: V | undefined) => v is V;
9
9
  export declare const valueOrFactory: <V>(input: ValueOrFactory<V>) => V;
10
+ export declare function withTimeout<T>(promise: Promise<T>, ms: number, message: string): Promise<T>;
@@ -0,0 +1,3 @@
1
+ "use strict";function f(e,r,o){if(!r)return e;const n=r.split(".");let t=e;for(const c of n)if(t!==null&&typeof t=="object"&&c in t)t=t[c];else return o;return t===void 0?o:t}function y(e,r,o){const n=r.replace(/\[(\d+)\]/g,".$1").split(".");let t=e;for(let c=0;c<n.length-1;c++){const s=n[c],i=n[c+1];(t[s]===void 0||t[s]===null)&&(t[s]=/^\d+$/.test(i)?[]:{}),t=t[s]}return t[n[n.length-1]]=o,e}function a(e,r=0){let o;return function(...n){o!==void 0&&clearTimeout(o),o=setTimeout(()=>{o=void 0,e.apply(this,n)},r)}}function d(e){const r=JSON.stringify(e,null,2).split(`
2
+ `),o=[],n=[];for(const t of r){const c=t.match(/^(\s*)"([^"]+)"(\s*:\s*)(.+)$/);if(c){const[,s,i,l,u]=c;o.push(`${s}%c"${i}"%c${l}%c${u}`),n.push("color: #9cdcfe; font-weight: bold","color: #cccccc","color: #ce9178")}else o.push(`%c${t}`),n.push("color: #cccccc")}console.log(o.join(`
3
+ `),...n,e)}const m=e=>typeof e=="function",p=e=>typeof e=="function",h=e=>typeof e<"u",g=e=>p(e)?e():e;async function T(e,r,o){let n;try{return await Promise.race([e,new Promise((t,c)=>{n=setTimeout(()=>{c(new Error(o))},r)})])}finally{clearTimeout(n)}}exports.debounce=a;exports.get=f;exports.isTransformer=m;exports.isValueDefined=h;exports.logStyled=d;exports.set=y;exports.valueOrFactory=g;exports.withTimeout=T;
@@ -0,0 +1,73 @@
1
+ function a(t, s, o) {
2
+ if (!s)
3
+ return t;
4
+ const n = s.split(".");
5
+ let e = t;
6
+ for (const c of n)
7
+ if (e !== null && typeof e == "object" && c in e)
8
+ e = e[c];
9
+ else
10
+ return o;
11
+ return e === void 0 ? o : e;
12
+ }
13
+ function y(t, s, o) {
14
+ const n = s.replace(/\[(\d+)\]/g, ".$1").split(".");
15
+ let e = t;
16
+ for (let c = 0; c < n.length - 1; c++) {
17
+ const r = n[c], i = n[c + 1];
18
+ (e[r] === void 0 || e[r] === null) && (e[r] = /^\d+$/.test(i) ? [] : {}), e = e[r];
19
+ }
20
+ return e[n[n.length - 1]] = o, t;
21
+ }
22
+ function d(t, s = 0) {
23
+ let o;
24
+ return function(...n) {
25
+ o !== void 0 && clearTimeout(o), o = setTimeout(() => {
26
+ o = void 0, t.apply(this, n);
27
+ }, s);
28
+ };
29
+ }
30
+ function p(t) {
31
+ const s = JSON.stringify(t, null, 2).split(`
32
+ `), o = [], n = [];
33
+ for (const e of s) {
34
+ const c = e.match(/^(\s*)"([^"]+)"(\s*:\s*)(.+)$/);
35
+ if (c) {
36
+ const [, r, i, l, u] = c;
37
+ o.push(`${r}%c"${i}"%c${l}%c${u}`), n.push(
38
+ "color: #9cdcfe; font-weight: bold",
39
+ "color: #cccccc",
40
+ "color: #ce9178"
41
+ );
42
+ } else
43
+ o.push(`%c${e}`), n.push("color: #cccccc");
44
+ }
45
+ console.log(o.join(`
46
+ `), ...n, t);
47
+ }
48
+ const m = (t) => typeof t == "function", f = (t) => typeof t == "function", h = (t) => typeof t < "u", g = (t) => f(t) ? t() : t;
49
+ async function $(t, s, o) {
50
+ let n;
51
+ try {
52
+ return await Promise.race([
53
+ t,
54
+ new Promise((e, c) => {
55
+ n = setTimeout(() => {
56
+ c(new Error(o));
57
+ }, s);
58
+ })
59
+ ]);
60
+ } finally {
61
+ clearTimeout(n);
62
+ }
63
+ }
64
+ export {
65
+ h as a,
66
+ d,
67
+ a as g,
68
+ m as i,
69
+ p as l,
70
+ y as s,
71
+ g as v,
72
+ $ as w
73
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yakocloud/state-vocab",
3
- "version": "4.0.3",
3
+ "version": "4.2.0",
4
4
  "main": "dist/index.cjs.js",
5
5
  "module": "dist/index.es.js",
6
6
  "types": "dist/types/index.d.ts",
@@ -1 +0,0 @@
1
- "use client";"use strict";const h=require("react/jsx-runtime"),r=require("react"),s=require("./utils-0CTNJ4ZE.js"),c=r.createContext({});function S(o){const t=r.useContext(c);return o.verbose&&console.log(`[Store uid]: ${t.uid}`),t}class u{#t;#e;constructor(t){this.uid=Math.random().toString(36).slice(2),this.#t=t??{},this.#e=new Set}subscribe(t){return this.#e.add(t),()=>this.#e.delete(t)}getClientSnapshot(){return this.#t}getServerSnapshot(){return this.#t}get(t){return s.get(this.#t,t)}set(t,e){const n=s.get(this.#t,t),a=s.isTransformer(e)?e(n):e,i={...this.#t};s.set(i,t,a),this.#t=i,this.#e.forEach(l=>l())}}function b(o){const{children:t,value:e}=o,[n]=r.useState(()=>new u(e));return h.jsx(c.Provider,{value:n,children:t})}exports.StateVocabClientProvider=b;exports.VocabStore=u;exports.useStateVocabClientContext=S;
@@ -1,41 +0,0 @@
1
- "use client";
2
- import { jsx as u } from "react/jsx-runtime";
3
- import { createContext as h, useContext as l, useState as S } from "react";
4
- import { g as n, i as d, s as b } from "./utils-xV3x3fTc.mjs";
5
- const i = h({});
6
- function V(s) {
7
- const t = l(i);
8
- return s.verbose && console.log(`[Store uid]: ${t.uid}`), t;
9
- }
10
- class f {
11
- #t;
12
- #e;
13
- constructor(t) {
14
- this.uid = Math.random().toString(36).slice(2), this.#t = t ?? {}, this.#e = /* @__PURE__ */ new Set();
15
- }
16
- subscribe(t) {
17
- return this.#e.add(t), () => this.#e.delete(t);
18
- }
19
- getClientSnapshot() {
20
- return this.#t;
21
- }
22
- getServerSnapshot() {
23
- return this.#t;
24
- }
25
- get(t) {
26
- return n(this.#t, t);
27
- }
28
- set(t, e) {
29
- const o = n(this.#t, t), c = d(e) ? e(o) : e, r = { ...this.#t };
30
- b(r, t, c), this.#t = r, this.#e.forEach((a) => a());
31
- }
32
- }
33
- function g(s) {
34
- const { children: t, value: e } = s, [o] = S(() => new f(e));
35
- return /* @__PURE__ */ u(i.Provider, { value: o, children: t });
36
- }
37
- export {
38
- g as S,
39
- f as V,
40
- V as u
41
- };
@@ -1,5 +0,0 @@
1
- import type { PropsWithChildren } from "react";
2
- import type { Vocab } from "./state.types";
3
- export declare function StateVocabProvider(props: PropsWithChildren<{
4
- value?: Vocab;
5
- }>): import("react/jsx-runtime").JSX.Element;
@@ -1,5 +0,0 @@
1
- import type { Vocab } from "./state.types";
2
- import type { PropsWithChildren } from "react";
3
- export declare const StateVocabServerProvider: React.FC<PropsWithChildren<{
4
- value: Vocab;
5
- }>>;
@@ -1,3 +0,0 @@
1
- "use strict";function f(e,s,n){if(!s)return e;const o=s.split(".");let t=e;for(const c of o)if(t!==null&&typeof t=="object"&&c in t)t=t[c];else return n;return t===void 0?n:t}function y(e,s,n){const o=s.replace(/\[(\d+)\]/g,".$1").split(".");let t=e;for(let c=0;c<o.length-1;c++){const r=o[c],i=o[c+1];(t[r]===void 0||t[r]===null)&&(t[r]=/^\d+$/.test(i)?[]:{}),t=t[r]}return t[o[o.length-1]]=n,e}function d(e,s=0){let n;return function(...o){n!==void 0&&clearTimeout(n),n=setTimeout(()=>{n=void 0,e.apply(this,o)},s)}}function a(e){const s=JSON.stringify(e,null,2).split(`
2
- `),n=[],o=[];for(const t of s){const c=t.match(/^(\s*)"([^"]+)"(\s*:\s*)(.+)$/);if(c){const[,r,i,l,u]=c;n.push(`${r}%c"${i}"%c${l}%c${u}`),o.push("color: #9cdcfe; font-weight: bold","color: #cccccc","color: #ce9178")}else n.push(`%c${t}`),o.push("color: #cccccc")}console.log(n.join(`
3
- `),...o,e)}const p=e=>typeof e=="function",g=e=>typeof e=="function",h=e=>typeof e<"u",$=e=>g(e)?e():e;exports.debounce=d;exports.get=f;exports.isTransformer=p;exports.isValueDefined=h;exports.logStyled=a;exports.set=y;exports.valueOrFactory=$;
@@ -1,57 +0,0 @@
1
- function a(t, s, n) {
2
- if (!s)
3
- return t;
4
- const o = s.split(".");
5
- let e = t;
6
- for (const c of o)
7
- if (e !== null && typeof e == "object" && c in e)
8
- e = e[c];
9
- else
10
- return n;
11
- return e === void 0 ? n : e;
12
- }
13
- function y(t, s, n) {
14
- const o = s.replace(/\[(\d+)\]/g, ".$1").split(".");
15
- let e = t;
16
- for (let c = 0; c < o.length - 1; c++) {
17
- const r = o[c], i = o[c + 1];
18
- (e[r] === void 0 || e[r] === null) && (e[r] = /^\d+$/.test(i) ? [] : {}), e = e[r];
19
- }
20
- return e[o[o.length - 1]] = n, t;
21
- }
22
- function d(t, s = 0) {
23
- let n;
24
- return function(...o) {
25
- n !== void 0 && clearTimeout(n), n = setTimeout(() => {
26
- n = void 0, t.apply(this, o);
27
- }, s);
28
- };
29
- }
30
- function p(t) {
31
- const s = JSON.stringify(t, null, 2).split(`
32
- `), n = [], o = [];
33
- for (const e of s) {
34
- const c = e.match(/^(\s*)"([^"]+)"(\s*:\s*)(.+)$/);
35
- if (c) {
36
- const [, r, i, l, u] = c;
37
- n.push(`${r}%c"${i}"%c${l}%c${u}`), o.push(
38
- "color: #9cdcfe; font-weight: bold",
39
- "color: #cccccc",
40
- "color: #ce9178"
41
- );
42
- } else
43
- n.push(`%c${e}`), o.push("color: #cccccc");
44
- }
45
- console.log(n.join(`
46
- `), ...o, t);
47
- }
48
- const g = (t) => typeof t == "function", f = (t) => typeof t == "function", h = (t) => typeof t < "u", $ = (t) => f(t) ? t() : t;
49
- export {
50
- h as a,
51
- d,
52
- a as g,
53
- g as i,
54
- p as l,
55
- y as s,
56
- $ as v
57
- };