@picked/react 0.0.1-dev.1778730134956 → 0.0.1-dev.1780458499348

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 (34) hide show
  1. package/dist/experience/Experience.d.ts +27 -0
  2. package/dist/experience/Experience.d.ts.map +1 -0
  3. package/dist/experience/Experience.js +1 -0
  4. package/dist/experience/ExperienceHost.d.ts +25 -0
  5. package/dist/experience/ExperienceHost.d.ts.map +1 -0
  6. package/dist/experience/ExperienceHost.js +1 -0
  7. package/dist/experience/PickedProvider.d.ts +35 -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/client.d.ts +0 -9
  12. package/dist/hooks/client.d.ts.map +1 -1
  13. package/dist/hooks/feature.js +1 -1
  14. package/dist/hooks/index.js +1 -1
  15. package/dist/hooks/step.d.ts.map +1 -1
  16. package/dist/hooks/step.js +1 -1
  17. package/dist/hooks/use-store-global.d.ts +18 -0
  18. package/dist/hooks/use-store-global.d.ts.map +1 -0
  19. package/dist/hooks/use-store-global.js +1 -0
  20. package/dist/index.d.ts +2 -0
  21. package/dist/index.d.ts.map +1 -1
  22. package/dist/index.js +1 -1
  23. package/dist/router/StepRouter.d.ts +4 -3
  24. package/dist/router/StepRouter.d.ts.map +1 -1
  25. package/dist/router/StepRouter.js +1 -1
  26. package/package.json +4 -5
  27. package/dist/form/index.test.d.ts +0 -2
  28. package/dist/form/index.test.d.ts.map +0 -1
  29. package/dist/hooks/step.test.d.ts +0 -2
  30. package/dist/hooks/step.test.d.ts.map +0 -1
  31. package/dist/router/StepRouter.test.d.ts +0 -2
  32. package/dist/router/StepRouter.test.d.ts.map +0 -1
  33. package/dist/utils/map-field-to-react.test.d.ts +0 -2
  34. package/dist/utils/map-field-to-react.test.d.ts.map +0 -1
@@ -0,0 +1,27 @@
1
+ import { default as React } from 'react';
2
+ interface ExperienceProps {
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 (`before → prepend → append → after`).
13
+ *
14
+ * Active is read from `conditionResults` via `peek`: a seeded snapshot makes it synchronous for
15
+ * SSR and the hydration first paint, while a cache miss (standalone, no snapshot) triggers an
16
+ * asynchronous evaluation in a browser effect whose store write re-renders this component.
17
+ * Subscribing to `client.conditionResults.store` is what makes those late writes reactive.
18
+ *
19
+ * @param {ExperienceProps} props - The component props.
20
+ * @param {string} props.name - The slot name, mapped to the `.picked-slot-<name>` selector.
21
+ * @returns {React.JSX.Element} The active experiences for the slot.
22
+ * @example
23
+ * <Experience name="page" />
24
+ */
25
+ declare function Experience({ name }: ExperienceProps): React.JSX.Element;
26
+ export default Experience;
27
+ //# sourceMappingURL=Experience.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Experience.d.ts","sourceRoot":"","sources":["../../src/experience/Experience.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAoB,MAAM,OAAO,CAAA;AAQxC,UAAU,eAAe;IACvB;;;;OAIG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CACtB;AAoED;;;;;;;;;;;;;;GAcG;AACH,iBAAS,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2ChE;AAED,eAAe,UAAU,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}from"@picked/client/server";import{Fragment as s,jsx as c}from"react/jsx-runtime";var l=[`before`,`prepend`,`append`,`after`];function u(e){let t=l.indexOf(e);return t===-1?l.length:t}function d(e,t){let n=e.configStore.getState(),r=n.targetSelectors.find(e=>e.selector===t);return r?{experience:e,placement:r.placement,condition:n.decisionLogic,hash:o(n.decisionLogic)}:null}function f(){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 p({name:o}){let l=e(),p=`.picked-slot-${o}`,m=t(l.experiences.listStore);t(l.conditionResults.store);let h=m.map(e=>d(e,p)).filter(e=>e!==null).sort((e,t)=>u(e.placement)-u(t.placement)),g=h.filter(e=>l.conditionResults.peek(e.hash)===!0);return r(()=>{if(i())for(let e of h)l.conditionResults.peek(e.hash)===void 0&&a(l,e.condition,{context:{location:f()}})}),c(s,{children:g.map(e=>c(n,{experience:e.experience,client:l},e.experience.id))})}export{p as default};
@@ -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,CAsD7F;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()},[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,35 @@
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 children?: React.ReactNode;
7
+ } | {
8
+ readonly options: CreateClientOptions;
9
+ readonly snapshot?: PickedSnapshot;
10
+ readonly children?: React.ReactNode;
11
+ };
12
+ /**
13
+ * Provides a Picked client to descendant components.
14
+ *
15
+ * Pass `options` to have the provider create the client and synchronously hydrate it from an
16
+ * optional SSR snapshot, so `<Experience>` and the hooks read a fully-populated client during SSR
17
+ * and the hydration first paint; a `versionId` mismatch is tolerated (the client reconciles via
18
+ * `start()`). Alternatively pass an existing `client` (such as the app's already-running global
19
+ * client) to render experiences against it. In the browser the provider calls `client.start()`
20
+ * from an effect; `start()` is idempotent, so a client that was already started is left untouched.
21
+ *
22
+ * @param {PickedProviderProps} props - Either `{ client }` or `{ options, snapshot? }`, plus `children`.
23
+ * @returns {React.JSX.Element} The provider wrapping its children.
24
+ * @example
25
+ * <PickedProvider options={options} snapshot={snapshot}>
26
+ * <Experience name="page" />
27
+ * </PickedProvider>
28
+ * @example
29
+ * <PickedProvider client={globalClient}>
30
+ * <Experience name="hero-widget" />
31
+ * </PickedProvider>
32
+ */
33
+ declare function PickedProvider(props: PickedProviderProps): React.JSX.Element;
34
+ export default PickedProvider;
35
+ //# 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,KAA4B,MAAM,OAAO,CAAA;AAChD,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,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;AA+BL;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAarE;AAED,eAAe,cAAc,CAAA"}
@@ -0,0 +1 @@
1
+ import{ClientProvider as e}from"../context.js";import{useEffect as t,useRef 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=r(e);if(t){let e=n.session.store.getState().id;a(n,t.projectConfig,{isPreview:!1,sessionId:e}),t.content.forEach(e=>n.registerContent(e)),n.conditionResults.seed(t.conditionResults)}return n}function c(r){let a=n(null);a.current??=`client`in r?r.client:s(r.options,r.snapshot);let c=a.current;return t(()=>{i()&&c.start()},[c]),o(e,{value:c,children:r.children})}export{c 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,7 +1,6 @@
1
1
  import { ExperienceInstance, Picked } from '@picked/client';
2
2
  /**
3
3
  * Retrieves the Picked Client for the Experience Instance.
4
- *
5
4
  * @returns The Picked client instance that provides access to experiences, steps, and other Picked functionality.
6
5
  * @example
7
6
  * const client = usePicked()
@@ -9,17 +8,9 @@ import { ExperienceInstance, Picked } from '@picked/client';
9
8
  export declare function usePicked(): Picked;
10
9
  /**
11
10
  * Retrieves the Experience Store for the current Experience Instance.
12
- *
13
- * The returned instance exposes `restart` and `isResumableStore` for SDK-native
14
- * resume/restart flows: call `instance.restart()` to atomically clear this
15
- * experience's history and owned responses, and read `instance.isResumableStore`
16
- * (via `useUnit`) to render a "continue / start over" prompt when the user has
17
- * in-progress state.
18
- *
19
11
  * @returns The Experience store instance that provides access to experience configuration and state.
20
12
  * @example
21
13
  * const experience = useExperience()
22
- * const canResume = useUnit(experience.isResumableStore)
23
14
  */
24
15
  export declare function useExperience(): ExperienceInstance;
25
16
  //# sourceMappingURL=client.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/hooks/client.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAGhE;;;;;;GAMG;AACH,wBAAgB,SAAS,IAAI,MAAM,CAOlC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,IAAI,kBAAkB,CAOlD"}
1
+ {"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/hooks/client.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAGhE;;;;;GAKG;AACH,wBAAgB,SAAS,IAAI,MAAM,CAOlC;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,IAAI,kBAAkB,CAOlD"}
@@ -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};
@@ -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{useSetStepContext as o,useStep as s,useStepContent as c}from"./step.js";import{useLocalStorage as l,useSessionStorage as u}from"./storage.js";import{getField as d}from"./field.js";import{useFeature as f,useFeatureResult as p}from"./feature.js";import{useAction as m,useActionResult as h}from"./action.js";import{useContent as g}from"./content.js";export{e as ClientContext,t as ClientProvider,n as ExperienceContext,r as ExperienceProvider,d as getField,m as useAction,h as useActionResult,g as useContent,i as useExperience,f as useFeature,p as useFeatureResult,l as useLocalStorage,a as usePicked,u as useSessionStorage,o as useSetStepContext,s as useStep,c as useStepContent};
@@ -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;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAI/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{useForm as n}from"../form/index.js";import{useStepRouter as r}from"../router/context.js";import{useStoreGlobal as i}from"./use-store-global.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(i){let a=e(),o=t(),{activeStep:l}=r(),u=s(()=>l?.key===i,[l?.key,i]),d=s(()=>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,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{layoutContentStore:e}=u();return i(e)?.data??null}export{l as StepContextProvider,d as useSetStepContext,u as useStep,f as useStepContent};
@@ -0,0 +1,18 @@
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, leaving slot components frozen and empty.
10
+ *
11
+ * @template T - The store's value type.
12
+ * @param {Store<T>} store - The Picked client store to read globally.
13
+ * @returns {T} The store's current global value, re-rendering on global updates.
14
+ * @example
15
+ * const experiences = useStoreGlobal(client.experiences.listStore)
16
+ */
17
+ export declare function useStoreGlobal<T>(store: Store<T>): T;
18
+ //# 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;;;;;;;;;;;;;;GAcG;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 Experience } from './experience/Experience';
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,UAAU,EAAE,MAAM,yBAAyB,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/Experience.js";export{r as Experience,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{StepRouterProvider as t}from"./context.js";import{useStoreGlobal as n}from"../hooks/use-store-global.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=n(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(t,{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.1-dev.1778730134956",
3
+ "version": "0.0.1-dev.1780458499348",
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.1-dev.1778730134956",
88
+ "@picked/client": "0.0.1-dev.1780458499348",
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":""}