@picked/react 0.0.62 → 0.0.63

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.
Files changed (35) hide show
  1. package/dist/experience/ExperienceHost.d.ts +25 -0
  2. package/dist/experience/ExperienceHost.d.ts.map +1 -0
  3. package/dist/experience/ExperienceHost.js +1 -0
  4. package/dist/experience/ExperienceSlot.d.ts +28 -0
  5. package/dist/experience/ExperienceSlot.d.ts.map +1 -0
  6. package/dist/experience/ExperienceSlot.js +1 -0
  7. package/dist/experience/PickedProvider.d.ts +37 -0
  8. package/dist/experience/PickedProvider.d.ts.map +1 -0
  9. package/dist/experience/PickedProvider.js +1 -0
  10. package/dist/hooks/action.js +1 -1
  11. package/dist/hooks/feature.js +1 -1
  12. package/dist/hooks/index.d.ts +1 -0
  13. package/dist/hooks/index.d.ts.map +1 -1
  14. package/dist/hooks/index.js +1 -1
  15. package/dist/hooks/step.d.ts +6 -7
  16. package/dist/hooks/step.d.ts.map +1 -1
  17. package/dist/hooks/step.js +1 -1
  18. package/dist/hooks/use-store-global.d.ts +24 -0
  19. package/dist/hooks/use-store-global.d.ts.map +1 -0
  20. package/dist/hooks/use-store-global.js +1 -0
  21. package/dist/index.d.ts +2 -0
  22. package/dist/index.d.ts.map +1 -1
  23. package/dist/index.js +1 -1
  24. package/dist/router/StepRouter.d.ts +4 -3
  25. package/dist/router/StepRouter.d.ts.map +1 -1
  26. package/dist/router/StepRouter.js +1 -1
  27. package/package.json +4 -5
  28. package/dist/form/index.test.d.ts +0 -2
  29. package/dist/form/index.test.d.ts.map +0 -1
  30. package/dist/hooks/step.test.d.ts +0 -2
  31. package/dist/hooks/step.test.d.ts.map +0 -1
  32. package/dist/router/StepRouter.test.d.ts +0 -2
  33. package/dist/router/StepRouter.test.d.ts.map +0 -1
  34. package/dist/utils/map-field-to-react.test.d.ts +0 -2
  35. package/dist/utils/map-field-to-react.test.d.ts.map +0 -1
@@ -0,0 +1,25 @@
1
+ import { default as React } from 'react';
2
+ import { ExperienceStore, Picked } from '@picked/client';
3
+ interface ExperienceHostProps {
4
+ readonly experience: ExperienceStore;
5
+ readonly client: Picked;
6
+ }
7
+ /**
8
+ * Instantiates a single experience and renders its resolved React component.
9
+ *
10
+ * The experience instance is created once per mount (a ref initializer), exposed via
11
+ * `ExperienceProvider` so the component's hooks (`useExperience`, `useStep`) resolve, and the
12
+ * component is passed the same `{ client, experience }` props the browser/server renderers use.
13
+ * Direct components render synchronously; lazy loaders and promise-wrapped components render
14
+ * through `React.lazy` + `Suspense` (fallback `null`) and swap in once resolved.
15
+ *
16
+ * @param {ExperienceHostProps} props - The host props.
17
+ * @param {ExperienceStore} props.experience - The experience to instantiate.
18
+ * @param {Picked} props.client - The Picked client.
19
+ * @returns {React.JSX.Element | null} The rendered component, or null when none resolves.
20
+ * @example
21
+ * <ExperienceHost experience={experienceStore} client={client} />
22
+ */
23
+ declare function ExperienceHost({ experience, client }: ExperienceHostProps): React.JSX.Element | null;
24
+ export default ExperienceHost;
25
+ //# sourceMappingURL=ExperienceHost.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ExperienceHost.d.ts","sourceRoot":"","sources":["../../src/experience/ExperienceHost.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAA+C,MAAM,OAAO,CAAA;AAEnE,OAAO,KAAK,EAAsB,eAAe,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAOjF,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,UAAU,EAAE,eAAe,CAAA;IACpC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;CACxB;AAiBD;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,cAAc,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAyD7F;AAED,eAAe,cAAc,CAAA"}
@@ -0,0 +1 @@
1
+ import{isValidAdaptedComponent as e}from"../component.js";import{ExperienceProvider as t}from"../context.js";import{useStoreGlobal as n}from"../hooks/use-store-global.js";import r,{Suspense as i,useEffect as a,useMemo as o,useRef as s}from"react";import{isLazyLoader as c,supportsWindow as l}from"@picked/client";import{createExperienceInstance as u}from"@picked/client/server";import{jsx as d}from"react/jsx-runtime";function f(e){return typeof e==`function`&&!c(e)&&!(e instanceof Promise)}function p({experience:p,client:m}){let h=s(null);h.current??=u({client:m,experience:p});let g=h.current,_=n(g.componentAndFrameworkStore),v=n(m.readyStore);a(()=>{v&&l()&&p.prepareExperienceContentFx().catch(()=>void 0)},[v,p]);let y=_?.component.component,b=y&&e(y)?y.component:void 0,x=o(()=>c(b)?r.lazy(()=>b.load()):b instanceof Promise?r.lazy(()=>b):null,[b]);return f(b)?d(t,{value:g,children:d(b,{client:m,experience:g})}):x?d(t,{value:g,children:d(i,{fallback:null,children:d(x,{client:m,experience:g})})}):null}export{p as default};
@@ -0,0 +1,28 @@
1
+ import { default as React } from 'react';
2
+ interface ExperienceSlotProps {
3
+ /**
4
+ * Slot name. Maps to the `.picked-slot-<name>` selector that targeted experiences declare.
5
+ * Named `name` rather than `slot` for parity with the Svelte component, where `slot` is a
6
+ * reserved attribute.
7
+ */
8
+ readonly name: string;
9
+ }
10
+ /**
11
+ * Renders the experiences that target the named slot and whose condition is active, ordered by
12
+ * placement precedence (`replace → before → prepend → append → after`). An active `replace`
13
+ * experience wins: the first one renders alone, replacing any other matches in the slot.
14
+ *
15
+ * Active is read from `conditionResults` via `peek`: a seeded snapshot makes it synchronous for
16
+ * SSR and the hydration first paint, while a cache miss (standalone, no snapshot) triggers an
17
+ * asynchronous evaluation in a browser effect whose store write re-renders this component.
18
+ * Subscribing to `client.conditionResults.store` is what makes those late writes reactive.
19
+ *
20
+ * @param {ExperienceSlotProps} props - The component props.
21
+ * @param {string} props.name - The slot name, mapped to the `.picked-slot-<name>` selector.
22
+ * @returns {React.JSX.Element} The active experiences for the slot.
23
+ * @example
24
+ * <ExperienceSlot name="page" />
25
+ */
26
+ declare function ExperienceSlot({ name }: ExperienceSlotProps): React.JSX.Element;
27
+ export default ExperienceSlot;
28
+ //# sourceMappingURL=ExperienceSlot.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ExperienceSlot.d.ts","sourceRoot":"","sources":["../../src/experience/ExperienceSlot.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAoB,MAAM,OAAO,CAAA;AAQxC,UAAU,mBAAmB;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CACtB;AAmFD;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA+CxE;AAED,eAAe,cAAc,CAAA"}
@@ -0,0 +1 @@
1
+ import{usePicked as e}from"../hooks/client.js";import{useStoreGlobal as t}from"../hooks/use-store-global.js";import"../hooks/index.js";import n from"./ExperienceHost.js";import{useEffect as r}from"react";import{supportsWindow as i}from"@picked/client";import{evaluateConditionMemo as a,hashRule as o,ruleReferencesAction as s}from"@picked/client/server";import{Fragment as c,jsx as l}from"react/jsx-runtime";var u=[`replace`,`before`,`prepend`,`append`,`after`];function d(e){let t=u.indexOf(e);return t===-1?u.length:t}function f(e,t){let n=e.configStore.getState(),r=n.targetSelectors.find(e=>e.selector===t);return!r||s(n.decisionLogic)?null:{experience:e,placement:r.placement,condition:n.decisionLogic,hash:o(n.decisionLogic)}}function p(){let{href:e,pathname:t,search:n,hostname:r,origin:i,protocol:a,port:o,host:s,hash:c}=globalThis.location;return{href:e,pathname:t,search:n,hostname:r,origin:i,protocol:a,port:o,host:s,hash:c}}function m({name:o}){let s=e(),u=`.picked-slot-${o}`,m=t(s.experiences.listStore);t(s.conditionResults.store);let h=m.map(e=>f(e,u)).filter(e=>e!==null).sort((e,t)=>d(e.placement)-d(t.placement)),g=h.filter(e=>s.conditionResults.peek(e.hash)===!0),_=g.find(e=>e.placement===`replace`),v=_?[_]:g;return r(()=>{if(i())for(let e of h)s.conditionResults.peek(e.hash)===void 0&&a(s,e.condition,{context:{location:p()}})}),l(c,{children:v.map(e=>l(n,{experience:e.experience,client:s},e.experience.id))})}export{m as default};
@@ -0,0 +1,37 @@
1
+ import { default as React } from 'react';
2
+ import { CreateClientOptions, Picked } from '@picked/client';
3
+ import { PickedSnapshot } from '@picked/client/server';
4
+ type PickedProviderProps = {
5
+ readonly client: Picked;
6
+ readonly snapshot?: PickedSnapshot;
7
+ readonly children?: React.ReactNode;
8
+ } | {
9
+ readonly options: CreateClientOptions;
10
+ readonly snapshot?: PickedSnapshot;
11
+ readonly children?: React.ReactNode;
12
+ };
13
+ /**
14
+ * Provides a Picked client to descendant components.
15
+ *
16
+ * Pass `options` to have the provider create the client and synchronously hydrate it from an
17
+ * optional SSR snapshot, so `<ExperienceSlot>` and the hooks read a fully-populated client during SSR
18
+ * and the hydration first paint; a `versionId` mismatch is tolerated (the client reconciles via
19
+ * `start()`). Alternatively pass an existing `client` (such as the app's single global client) to
20
+ * render experiences against it — supply `snapshot` alongside `client` to SSR-seed that shared
21
+ * client rather than creating a second one. In the browser the provider calls `client.start()`
22
+ * from an effect; `start()` is idempotent, so a client that was already started is left untouched.
23
+ *
24
+ * @param {PickedProviderProps} props - `{ client, snapshot? }` or `{ options, snapshot? }`, plus `children`.
25
+ * @returns {React.JSX.Element} The provider wrapping its children.
26
+ * @example
27
+ * <PickedProvider options={options} snapshot={snapshot}>
28
+ * <ExperienceSlot name="page" />
29
+ * </PickedProvider>
30
+ * @example
31
+ * <PickedProvider client={globalClient} snapshot={snapshot}>
32
+ * <ExperienceSlot name="page" />
33
+ * </PickedProvider>
34
+ */
35
+ declare function PickedProvider(props: PickedProviderProps): React.JSX.Element;
36
+ export default PickedProvider;
37
+ //# sourceMappingURL=PickedProvider.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PickedProvider.d.ts","sourceRoot":"","sources":["../../src/experience/PickedProvider.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAA8B,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEjE,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAGlF,KAAK,mBAAmB,GACpB;IACE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,cAAc,CAAA;IAClC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACpC,GACD;IACE,QAAQ,CAAC,OAAO,EAAE,mBAAmB,CAAA;IACrC,QAAQ,CAAC,QAAQ,CAAC,EAAE,cAAc,CAAA;IAClC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACpC,CAAA;AA2CL;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAwBrE;AAED,eAAe,cAAc,CAAA"}
@@ -0,0 +1 @@
1
+ import{ClientProvider as e}from"../context.js";import{useEffect as t,useState as n}from"react";import{createClient as r,supportsWindow as i}from"@picked/client";import{registerProjectConfig as a}from"@picked/client/server";import{jsx as o}from"react/jsx-runtime";function s(e,t){let n=e.session.store.getState().id;a(e,t.projectConfig,{isPreview:!1,sessionId:n}),t.content.forEach(t=>e.registerContent(t)),e.conditionResults.seed(t.conditionResults)}function c(e,t){let n=r(e);return t&&s(n,t),n}function l(r){let[a]=n(()=>{let e;return`client`in r?(r.snapshot&&s(r.client,r.snapshot),e=r.client):e=c(r.options,r.snapshot),e});return t(()=>{i()&&a.start()},[a]),o(e,{value:a,children:r.children})}export{l as default};
@@ -1 +1 @@
1
- import{usePicked as e}from"./client.js";import{attach as t,createEffect as n,createEvent as r,createStore as i,sample as a}from"effector";import{useUnit as o}from"effector-react";function s(t,n){return o(e().actions.getEvokableAction(t,n))}function c(s,c){let l=e().actions.getEvokableAction(s,c),u=i(void 0,{skipVoid:!1}),d=r(),f=t({source:l,mapParams:(e,t)=>t,effect:n(async e=>{if(e)return await e()})});return a({clock:d,target:f}),a({clock:f.doneData,target:u}),d(),a({clock:l,target:d}),o(u)}export{s as useAction,c as useActionResult};
1
+ import{usePicked as e}from"./client.js";import{useStoreGlobal as t}from"./use-store-global.js";import{attach as n,createEffect as r,createEvent as i,createStore as a,sample as o}from"effector";function s(n,r){return t(e().actions.getEvokableAction(n,r))}function c(s,c){let l=e().actions.getEvokableAction(s,c),u=a(void 0,{skipVoid:!1}),d=i(),f=n({source:l,mapParams:(e,t)=>t,effect:r(async e=>{if(e)return await e()})});return o({clock:d,target:f}),o({clock:f.doneData,target:u}),d(),o({clock:l,target:d}),t(u)}export{s as useAction,c as useActionResult};
@@ -1 +1 @@
1
- import{usePicked as e}from"./client.js";import{attach as t,createEffect as n,createEvent as r,createStore as i,sample as a}from"effector";import{useUnit as o}from"effector-react";function s(t){return e().features.getEvokableFeature(t)}function c(e){return o(s(e))}function l(e){let c=s(e),l=i(void 0,{skipVoid:!1}),u=r(),d=t({source:c,mapParams:(e,t)=>t,effect:n(async e=>await e())});return a({clock:u,target:d}),a({clock:d.doneData,fn:t=>{if(t!==void 0)return{id:e,bucket:t}},target:l}),u(),a({clock:c,target:u}),o(l)}export{c as useFeature,l as useFeatureResult};
1
+ import{usePicked as e}from"./client.js";import{useStoreGlobal as t}from"./use-store-global.js";import{attach as n,createEffect as r,createEvent as i,createStore as a,sample as o}from"effector";function s(t){return e().features.getEvokableFeature(t)}function c(e){return t(s(e))}function l(e){let c=s(e),l=a(void 0,{skipVoid:!1}),u=i(),d=n({source:c,mapParams:(e,t)=>t,effect:r(async e=>await e())});return o({clock:u,target:d}),o({clock:d.doneData,fn:t=>{if(t!==void 0)return{id:e,bucket:t}},target:l}),u(),o({clock:c,target:u}),t(l)}export{c as useFeature,l as useFeatureResult};
@@ -3,6 +3,7 @@
3
3
  */
4
4
  export { ClientContext, ClientProvider, ExperienceContext, ExperienceProvider } from '../context';
5
5
  export { usePicked, useExperience } from './client';
6
+ export { useStoreGlobal } from './use-store-global';
6
7
  export { useStep, useSetStepContext, useStepContent } from './step';
7
8
  export type { StepContext } from './step';
8
9
  export { useSessionStorage, useLocalStorage } from './storage';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AACjG,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAA;AACnE,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AACzC,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAC9D,YAAY,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAClD,cAAc,SAAS,CAAA;AACvB,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AACxD,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AACjG,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAA;AACnE,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AACzC,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAC9D,YAAY,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAClD,cAAc,SAAS,CAAA;AACvB,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AACxD,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA"}
@@ -1 +1 @@
1
- import{ClientContext as e,ClientProvider as t,ExperienceContext as n,ExperienceProvider as r}from"../context.js";import{useExperience as i,usePicked as a}from"./client.js";import{useAction as o,useActionResult as s}from"./action.js";import{useContent as c}from"./content.js";import{useFeature as l,useFeatureResult as u}from"./feature.js";import{getField as d}from"./field.js";import{useSetStepContext as f,useStep as p,useStepContent as m}from"./step.js";import{useLocalStorage as h,useSessionStorage as g}from"./storage.js";export{e as ClientContext,t as ClientProvider,n as ExperienceContext,r as ExperienceProvider,d as getField,o as useAction,s as useActionResult,c as useContent,i as useExperience,l as useFeature,u as useFeatureResult,h as useLocalStorage,a as usePicked,g as useSessionStorage,f as useSetStepContext,p as useStep,m as useStepContent};
1
+ import{ClientContext as e,ClientProvider as t,ExperienceContext as n,ExperienceProvider as r}from"../context.js";import{useExperience as i,usePicked as a}from"./client.js";import{useStoreGlobal as o}from"./use-store-global.js";import{useSetStepContext as s,useStep as c,useStepContent as l}from"./step.js";import{useLocalStorage as u,useSessionStorage as d}from"./storage.js";import{getField as f}from"./field.js";import{useFeature as p,useFeatureResult as m}from"./feature.js";import{useAction as h,useActionResult as g}from"./action.js";import{useContent as _}from"./content.js";export{e as ClientContext,t as ClientProvider,n as ExperienceContext,r as ExperienceProvider,f as getField,h as useAction,g as useActionResult,_ as useContent,i as useExperience,p as useFeature,m as useFeatureResult,u as useLocalStorage,a as usePicked,d as useSessionStorage,s as useSetStepContext,c as useStep,l as useStepContent,o as useStoreGlobal};
@@ -39,17 +39,16 @@ export declare function useStep(): StepContext;
39
39
  */
40
40
  export declare function useSetStepContext(stepKey: string): StepContext;
41
41
  /**
42
- * Returns the current step's resolved CMS content data, or `null` when no content is
43
- * registered for the step's `layoutContentId`. Subscribes to `useStep().layoutContentStore`
44
- * via Effector's `useUnit`, so the component re-renders on content updates.
42
+ * Returns the current step's resolved CMS content data, or `null` when no content is registered.
43
+ *
44
+ * Reads `StepContextProvider` when present (the `StepRouter`/`Step` path); when absent (the slot
45
+ * render path, where only an `ExperienceProvider` is mounted) it falls back to resolving the
46
+ * experience's layout content, so slot-rendered components read content without crashing.
47
+ * Subscribes via `useStoreGlobal`, so the component re-renders on content updates.
45
48
  *
46
49
  * @returns {Record<string, unknown> | null} The Content record's `data`, or `null`.
47
- * @throws {Error} When called outside `StepContextProvider`.
48
50
  * @example
49
- * ```tsx
50
51
  * const content = useStepContent()
51
- * return <Layout headline={content?.headline as string ?? ''} />
52
- * ```
53
52
  */
54
53
  export declare function useStepContent(): Record<string, unknown> | null;
55
54
  //# sourceMappingURL=step.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../src/hooks/step.ts"],"names":[],"mappings":"AAEA,OAAO,EAAW,KAAK,KAAK,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC7D,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAEpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAGjE,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,CAAA;IAC3B,kFAAkF;IAClF,MAAM,EAAE,KAAK,CAAC,cAAc,EAAE,CAAC,CAAA;IAC/B;;;;;OAKG;IACH,kBAAkB,EAAE,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACzC,QAAQ,EAAE,OAAO,CAAA;IACjB,0CAA0C;IAC1C,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;CAC3B;AAED,eAAO,MAAM,mBAAmB,6CAA0C,CAAA;AAE1E;;;;;GAKG;AACH,wBAAgB,OAAO,IAAI,WAAW,CAOrC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,WAAW,CA6D9D;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAI/D"}
1
+ {"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../src/hooks/step.ts"],"names":[],"mappings":"AAEA,OAAO,EAAW,KAAK,KAAK,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC7D,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAEpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAIjE,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,CAAA;IAC3B,kFAAkF;IAClF,MAAM,EAAE,KAAK,CAAC,cAAc,EAAE,CAAC,CAAA;IAC/B;;;;;OAKG;IACH,kBAAkB,EAAE,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACzC,QAAQ,EAAE,OAAO,CAAA;IACjB,0CAA0C;IAC1C,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;CAC3B;AAED,eAAO,MAAM,mBAAmB,6CAA0C,CAAA;AAE1E;;;;;GAKG;AACH,wBAAgB,OAAO,IAAI,WAAW,CAOrC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,WAAW,CA6D9D;AAgCD;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAM/D"}
@@ -1 +1 @@
1
- import{useExperience as e,usePicked as t}from"./client.js";import{useForm as n}from"../form/index.js";import{useStepRouter as r}from"../router/context.js";import{createContext as i,useContext as a,useMemo as o}from"react";import{combine as s}from"effector";import{useUnit as c}from"effector-react";var l=i(null);function u(){let e=a(l);if(!e)throw Error(`useStep must be used within a StepContextProvider`);return e}function d(i){let a=e(),c=t(),{activeStep:l}=r(),u=o(()=>l?.key===i,[l?.key,i]),d=o(()=>a.treeStore.map(e=>e.steps.find(e=>e.key===i)??{id:i,key:i,name:``,fieldKeys:[]},{skipVoid:!1}),[a,i]),{form:f,fields:p}=n(i,o(()=>d.map(e=>e.name,{skipVoid:!1}),[d]),o(()=>d.map(e=>e.fieldKeys,{skipVoid:!1}),[d]));return{step:d,fields:p,layoutContentStore:o(()=>s(d,c.contents.indexStore,(e,t)=>e.layoutContentId?t[e.layoutContentId]??null:null,{skipVoid:!1}),[d,c]),isActive:u,isActiveStep:u,form:f}}function f(){let{layoutContentStore:e}=u();return c(e)?.data??null}export{l as StepContextProvider,d as useSetStepContext,u as useStep,f as useStepContent};
1
+ import{useExperience as e,usePicked as t}from"./client.js";import{useStoreGlobal as n}from"./use-store-global.js";import{useForm as r}from"../form/index.js";import{useStepRouter as i}from"../router/context.js";import{createContext as a,useContext as o,useMemo as s}from"react";import{combine as c}from"effector";var l=a(null);function u(){let e=o(l);if(!e)throw Error(`useStep must be used within a StepContextProvider`);return e}function d(n){let a=e(),o=t(),{activeStep:l}=i(),u=s(()=>l?.key===n,[l?.key,n]),d=s(()=>a.treeStore.map(e=>e.steps.find(e=>e.key===n)??{id:n,key:n,name:``,fieldKeys:[]},{skipVoid:!1}),[a,n]),{form:f,fields:p}=r(n,s(()=>d.map(e=>e.name,{skipVoid:!1}),[d]),s(()=>d.map(e=>e.fieldKeys,{skipVoid:!1}),[d]));return{step:d,fields:p,layoutContentStore:s(()=>c(d,o.contents.indexStore,(e,t)=>e.layoutContentId?t[e.layoutContentId]??null:null,{skipVoid:!1}),[d,o]),isActive:u,isActiveStep:u,form:f}}function f(){let n=e(),r=t();return s(()=>c(n.treeStore,r.contents.indexStore,(e,t)=>{let n=e.steps.find(e=>e.layoutContentId);return n?.layoutContentId?t[n.layoutContentId]??null:null}),[n,r])}function p(){let e=o(l),t=f();return n(e?.layoutContentStore??t)?.data??null}export{l as StepContextProvider,d as useSetStepContext,u as useStep,p as useStepContent};
@@ -0,0 +1,24 @@
1
+ import { Store } from 'effector';
2
+ /**
3
+ * Reads an effector store's global value, independent of any effector scope a host app may have
4
+ * installed via `effector-react`'s `<Provider>`.
5
+ *
6
+ * The Picked client is a global singleton (SSR isolation comes from per-request client instances,
7
+ * not effector `fork()` scopes), so its stores must be read scope-agnostically. Reading them through
8
+ * scope-aware `useUnit` inside a host `fork()` scope pins the value to the empty fork-time snapshot
9
+ * and misses post-`start()` updates. This is the supported way for host apps to read any Picked
10
+ * client store from React, including `useStep().fields`, whose form-evaluator store is created and
11
+ * written in the global scope after a route-level fork is taken; a `useUnit(fields)` read in that
12
+ * fork sees an empty array, while `useStoreGlobal(fields)` resolves the fields.
13
+ *
14
+ * @template T - The store's value type.
15
+ * @param {Store<T>} store - The Picked client store to read globally.
16
+ * @returns {T} The store's current global value, re-rendering on global updates.
17
+ * @example
18
+ * const experiences = useStoreGlobal(client.experiences.listStore)
19
+ * @example
20
+ * const { fields } = useStep()
21
+ * const resolvedFields = useStoreGlobal(fields)
22
+ */
23
+ export declare function useStoreGlobal<T>(store: Store<T>): T;
24
+ //# sourceMappingURL=use-store-global.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-store-global.d.ts","sourceRoot":"","sources":["../../src/hooks/use-store-global.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAgCrC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAMpD"}
@@ -0,0 +1 @@
1
+ import{useSyncExternalStore as e}from"react";var t=new WeakMap;function n(e){let n=t.get(e);if(n)return n;let r=t=>{let n=e.watch(()=>t());return()=>n.unsubscribe()};return t.set(e,r),r}function r(t){return e(n(t),()=>t.getState(),()=>t.getState())}export{r as useStoreGlobal};
package/dist/index.d.ts CHANGED
@@ -3,4 +3,6 @@
3
3
  */
4
4
  export { adaptReactComponent, isValidAdaptedComponent } from './component';
5
5
  export type * from './component';
6
+ export { default as PickedProvider } from './experience/PickedProvider';
7
+ export { default as ExperienceSlot } from './experience/ExperienceSlot';
6
8
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAA;AAC1E,mBAAmB,aAAa,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAA;AAC1E,mBAAmB,aAAa,CAAA;AAChC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAA"}
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- import{adaptReactComponent as e,isValidAdaptedComponent as t}from"./component.js";export{e as adaptReactComponent,t as isValidAdaptedComponent};
1
+ import{adaptReactComponent as e,isValidAdaptedComponent as t}from"./component.js";import n from"./experience/PickedProvider.js";import r from"./experience/ExperienceSlot.js";export{r as ExperienceSlot,n as PickedProvider,e as adaptReactComponent,t as isValidAdaptedComponent};
@@ -5,11 +5,12 @@ interface StepRouterProps {
5
5
  /**
6
6
  * Manages step registration and renders children within a step router context.
7
7
  *
8
- * @param props - The router props containing children to render.
9
- * @param props.children
8
+ * @param {StepRouterProps} props - The router props.
9
+ * @param {React.ReactNode} props.children - The steps to register and render.
10
+ * @returns {React.JSX.Element | null} The step router context wrapping its children, or null until the current step is known.
10
11
  * @example
11
12
  * <StepRouter><Step key="welcome" /></StepRouter>
12
13
  */
13
- declare function StepRouter({ children }: StepRouterProps): import("react/jsx-runtime").JSX.Element | null;
14
+ declare function StepRouter({ children }: StepRouterProps): React.JSX.Element | null;
14
15
  export default StepRouter;
15
16
  //# sourceMappingURL=StepRouter.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"StepRouter.d.ts","sourceRoot":"","sources":["../../src/router/StepRouter.tsx"],"names":[],"mappings":"AAAA,4FAA4F;AAC5F,OAAO,KAAiD,MAAM,OAAO,CAAA;AAMrE,UAAU,eAAe;IACvB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CACnC;AAED;;;;;;;GAOG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,eAAe,kDAiDhD;AAED,eAAe,UAAU,CAAA"}
1
+ {"version":3,"file":"StepRouter.d.ts","sourceRoot":"","sources":["../../src/router/StepRouter.tsx"],"names":[],"mappings":"AAAA,4FAA4F;AAC5F,OAAO,KAAiD,MAAM,OAAO,CAAA;AAMrE,UAAU,eAAe;IACvB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CACnC;AAED;;;;;;;;GAQG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAiD3E;AAED,eAAe,UAAU,CAAA"}
@@ -1 +1 @@
1
- import{useExperience as e}from"../hooks/client.js";import{StepRouterProvider as t}from"./context.js";import"../hooks/index.js";import{useCallback as n,useMemo as r,useRef as i,useState as a}from"react";import{useUnit as o}from"effector-react";import{supportsWindow as s}from"@picked/client";import{jsx as c}from"react/jsx-runtime";function l({children:l}){let{currentStepStore:u}=e(),d=o(u),f=i(!1),[p,m]=a([]),[h,g]=a(null),_=n(e=>{if(s())m(t=>[...t,e]);else{if(f.current)return;e.key===d?.key&&(g(e),f.current=!0)}},[d?.key]),v=n(e=>{m(t=>t.filter(t=>t!==e))},[]),y=r(()=>h??p.find(e=>e.key===d?.key)??null,[h,p,d?.key]),b=r(()=>({activeStep:y,registerStep:_,unregisterStep:v}),[y,_,v]);return d?.key?c(t,{value:b,children:l}):null}export{l as default};
1
+ import{useExperience as e}from"../hooks/client.js";import{useStoreGlobal as t}from"../hooks/use-store-global.js";import{StepRouterProvider as n}from"./context.js";import"../hooks/index.js";import{useCallback as r,useMemo as i,useRef as a,useState as o}from"react";import{supportsWindow as s}from"@picked/client";import{jsx as c}from"react/jsx-runtime";function l({children:l}){let{currentStepStore:u}=e(),d=t(u),f=a(!1),[p,m]=o([]),[h,g]=o(null),_=r(e=>{if(s())m(t=>[...t,e]);else{if(f.current)return;e.key===d?.key&&(g(e),f.current=!0)}},[d?.key]),v=r(e=>{m(t=>t.filter(t=>t!==e))},[]),y=i(()=>h??p.find(e=>e.key===d?.key)??null,[h,p,d?.key]),b=i(()=>({activeStep:y,registerStep:_,unregisterStep:v}),[y,_,v]);return d?.key?c(n,{value:b,children:l}):null}export{l as default};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@picked/react",
3
- "version": "0.0.62",
3
+ "version": "0.0.63",
4
4
  "devDependencies": {
5
5
  "@picked/client": "workspace:*",
6
6
  "@repo/eslint-config": "workspace:*",
@@ -11,7 +11,7 @@
11
11
  "@types/react": "19.2.4",
12
12
  "@types/react-dom": "19.2.3",
13
13
  "@vitejs/plugin-react": "^6.0.1",
14
- "@vitest/coverage-v8": "^4.1.0",
14
+ "@vitest/coverage-v8": "^4.1.8",
15
15
  "effector": "^23.3.0",
16
16
  "effector-react": "^23.3.0",
17
17
  "fast-glob": "^3.3.3",
@@ -21,7 +21,7 @@
21
21
  "typedoc-plugin-markdown": "^4.6.3",
22
22
  "vite": "^8.0.8",
23
23
  "vite-plugin-dts": "^4.5.4",
24
- "vitest": "^4.1.0"
24
+ "vitest": "^4.1.8"
25
25
  },
26
26
  "exports": {
27
27
  ".": {
@@ -85,9 +85,8 @@
85
85
  },
86
86
  "module": "./dist/index.js",
87
87
  "peerDependencies": {
88
- "@picked/client": "0.0.62",
88
+ "@picked/client": "0.0.63",
89
89
  "effector": "^23.3.0",
90
- "effector-react": "^23.3.0",
91
90
  "react": "19.2.2",
92
91
  "react-dom": "19.2.2"
93
92
  },
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=index.test.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../src/form/index.test.tsx"],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=step.test.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"step.test.d.ts","sourceRoot":"","sources":["../../src/hooks/step.test.tsx"],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=StepRouter.test.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"StepRouter.test.d.ts","sourceRoot":"","sources":["../../src/router/StepRouter.test.tsx"],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=map-field-to-react.test.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"map-field-to-react.test.d.ts","sourceRoot":"","sources":["../../src/utils/map-field-to-react.test.tsx"],"names":[],"mappings":""}