@picked/svelte 0.0.1-dev.1765777335219 → 0.0.1-dev.1765841386439

package/dist/form/index.d.ts

@@ -1,32 +1,14 @@
 import { ValidationError } from '@picked/client';
-import { StepContext } from '../hooks/step';
-export interface GetFormOptions {
+interface GetFormOptions {
     id: string;
     title: string;
-    fieldIds?: string[];
     onSuccess?: () => void | Promise<void>;
     onError?: (errors: ValidationError[]) => void | Promise<void>;
 }
 type SubmitEventWithCurrentTarget = SubmitEvent & {
     currentTarget: EventTarget & HTMLFormElement;
 };
-/**
- * Internal implementation that creates a form with optional step context.
- * Used by both getForm (independent) and getStep (step-scoped).
- */
-export declare function createForm({ id: formId, title, fieldIds: fieldFilter, onError, onSuccess, stepContext, }: GetFormOptions & {
-    stepContext?: StepContext;
-}): {
-    form: {
-        onsubmit: import('effector').EventCallable<SubmitEventWithCurrentTarget>;
-    };
-};
-/**
- * Creates a form that works independently without requiring a step context.
- * If called within a step context, it will automatically use the step's fields.
- * Otherwise, it will use all available fields.
- */
-export declare function getForm(options: GetFormOptions): {
+export declare function getForm({ id: formId, title, onError, onSuccess }: GetFormOptions): {
     form: {
         onsubmit: import('effector').EventCallable<SubmitEventWithCurrentTarget>;
     };

package/dist/form/index.js

@@ -1 +1 @@
-import{getContext as F}from"svelte";import{createEvent as B,createEffect as l,attach as E,sample as _,split as D}from"effector";import{getPicked as N,getExperience as I}from"../hooks/client.js";import"@picked/client";import{STEP_CONTEXT_KEY as T}from"../context.js";import"svelte/store";import"@picked/analytics";function q(){try{return F(T)}catch{return}}function w({id:n,title:c,fieldIds:d,onError:h,onSuccess:v,stepContext:y}){const o=N(),p=I(),{currentStepStore:f}=p,g=B(),x=l(e=>o.responses.commit(e));let b=(y==null?void 0:y.fields)??o.fields.listStore.map(e=>e.map(s=>({...s,value:void 0})));d&&d.length>0&&(b=b.map(e=>e.filter(s=>d.includes(s.id))));const A=E({source:{step:f},effect:l(({step:e})=>{o.eventBus({type:"form_submit_success",form:{id:n,title:c},experience:p,step:e??void 0}),v==null||v()})}),S=E({source:{step:f},mapParams:(e,s)=>({step:s.step,errors:e.errors}),effect:l(({step:e,errors:s})=>{o.eventBus({type:"form_submit_error",form:{id:n,title:c},exception:{reason:s},experience:p,step:e??void 0}),s.forEach(u=>{o.eventBus({type:"field_validation_error",exception:{reason:[u]},experience:p,step:e??void 0})}),h==null||h(s)})});return _({clock:g,source:{step:f},fn:({step:e})=>({formId:n,title:c,step:e}),target:l(({formId:e,title:s,step:u})=>{o.eventBus({type:"form_submit",form:{id:e,title:s},experience:p,step:u??void 0})})}),_({clock:g,source:{fields:o.fields.listStore,stepFields:b,step:f},fn:({stepFields:e},s)=>{s.preventDefault();const u=new FormData(s.currentTarget),k=Array.from(u.entries()),m={data:{},push(r){const a=r.questionId,t=this.data[a];t?Array.isArray(t)&&Array.isArray(r.value)?Array.isArray(t)&&Array.isArray(r.value)&&(typeof t[0]=="string"?this.data[a]=[...t,...r.value].map(String):typeof t[0]=="number"?this.data[a]=[...t,...r.value].map(Number):typeof t[0]=="boolean"?this.data[a]=[...t,...r.value].map(i=>!!i):this.data[a]=r.value):this.data[a]=r.value:this.data[a]=r.value}};return e.forEach(r=>{let a=k.filter(([t])=>t===r.id);a.length===0&&(a=[[r.id,""]]),a.forEach(([,t])=>{const i=r.id;if(t===""){m.push({questionId:i,value:null});return}switch(r.type){case"text":m.push({questionId:i,value:r.multiple?[String(t)]:String(t)});break;case"number":m.push({questionId:i,value:r.multiple?[Number(t)]:Number(t)});break;case"boolean":m.push({questionId:i,value:r.multiple?[t==="true"]:t==="true"});break}})}),m.data},target:x}),D({source:x.doneData,match:{hasErrors:({errors:e})=>e.length>0},cases:{hasErrors:S,__:A}}),{form:{onsubmit:g}}}function G(n){const c=q();return w({...n,stepContext:c})}export{w as createForm,G as getForm};
+import{createEvent as k,createEffect as m,attach as b,sample as g,split as D}from"effector";import{getPicked as F,getExperience as S}from"../hooks/client.js";import{getStep as B}from"../hooks/step.js";import"svelte";import"svelte/store";import"@picked/client";import"@picked/analytics";function z({id:f,title:l,onError:d,onSuccess:h}){const o=F(),x=B(),n=S(),{currentStepStore:u}=n,v=k(),y=m(r=>o.responses.commit(r)),A=b({source:{step:u},effect:m(({step:r})=>{o.eventBus({type:"form_submit_success",form:{id:f,title:l},experience:n,step:r??void 0}),h==null||h()})}),_=b({source:{step:u},mapParams:(r,a)=>({step:a.step,errors:r.errors}),effect:m(({step:r,errors:a})=>{o.eventBus({type:"form_submit_error",form:{id:f,title:l},exception:{reason:a},experience:n,step:r??void 0}),a.forEach(p=>{o.eventBus({type:"field_validation_error",exception:{reason:[p]},experience:n,step:r??void 0})}),d==null||d(a)})});return g({clock:v,source:{step:u},fn:({step:r})=>({formId:f,title:l,step:r}),target:m(({formId:r,title:a,step:p})=>{o.eventBus({type:"form_submit",form:{id:r,title:a},experience:n,step:p??void 0})})}),g({clock:v,source:{fields:o.fields.listStore,stepFields:x.fields,step:u},fn:({stepFields:r},a)=>{a.preventDefault();const p=new FormData(a.currentTarget),E=Array.from(p.entries()),c={data:{},push(t){const s=t.questionId,e=this.data[s];e?Array.isArray(e)&&Array.isArray(t.value)?Array.isArray(e)&&Array.isArray(t.value)&&(typeof e[0]=="string"?this.data[s]=[...e,...t.value].map(String):typeof e[0]=="number"?this.data[s]=[...e,...t.value].map(Number):typeof e[0]=="boolean"?this.data[s]=[...e,...t.value].map(i=>!!i):this.data[s]=t.value):this.data[s]=t.value:this.data[s]=t.value}};return r.forEach(t=>{let s=E.filter(([e])=>e===t.id);s.length===0&&(s=[[t.id,""]]),s.forEach(([,e])=>{const i=t.id;if(e===""){c.push({questionId:i,value:null});return}switch(t.type){case"text":c.push({questionId:i,value:t.multiple?[String(e)]:String(e)});break;case"number":c.push({questionId:i,value:t.multiple?[Number(e)]:Number(e)});break;case"boolean":c.push({questionId:i,value:t.multiple?[e==="true"]:e==="true"});break}})}),c.data},target:y}),D({source:y.doneData,match:{hasErrors:({errors:r})=>r.length>0},cases:{hasErrors:_,__:A}}),{form:{onsubmit:v}}}export{z as getForm};

package/dist/hooks/step.d.ts

@@ -1,5 +1,5 @@
 import { Store } from 'effector';
-import { ExperienceStep, Field, Response, ValidationError } from '@picked/client';
+import { ExperienceStep, Field, Response } from '@picked/client';
 type FieldWithValue = Field & {
     value: Response | undefined;
 };
@@ -8,42 +8,6 @@ export interface StepContext {
     fields: Store<FieldWithValue[]>;
     isActiveStep: Store<boolean>;
 }
-interface GetStepOptions {
-    fieldIds?: string[];
-    onSuccess?: () => void | Promise<void>;
-    onError?: (errors: ValidationError[]) => void | Promise<void>;
-}
-/**
- * Gets the current step context. Optionally accepts callbacks to create a form
- * automatically configured with the step's id and title.
- *
- * @example
- * // Without form
- * const { step, fields } = getStep()
- *
- * @example
- * // With form - submits all step fields
- * const { form } = getStep({
- *   onSuccess: () => console.log('Form submitted!'),
- *   onError: (errors) => console.error('Validation errors:', errors)
- * })
- *
- * @example
- * // With form - only submits specific fields (e.g., email for newsletter)
- * const { form } = getStep({
- *   fieldIds: ['email'],
- *   onSuccess: () => console.log('Newsletter signup!'),
- * })
- */
-export declare function getStep(options?: GetStepOptions): StepContext | {
-    form: {
-        onsubmit: import('effector').EventCallable<SubmitEvent & {
-            currentTarget: EventTarget & HTMLFormElement;
-        }>;
-    };
-    step: Store<ExperienceStep>;
-    fields: Store<FieldWithValue[]>;
-    isActiveStep: Store<boolean>;
-};
+export declare function getStep(): StepContext;
 export declare function setStepContext(stepId: string): StepContext;
 export {};

package/dist/hooks/step.js

@@ -1 +1 @@
-import{getContext as E,setContext as v}from"svelte";import{createStore as h,combine as d,attach as C,createEffect as w,sample as l}from"effector";import{getStepFields as F}from"@picked/client";import{STEP_CONTEXT_KEY as m}from"../context.js";import{getStepRouter as A}from"../router/context.js";import{getExperience as T,getPicked as b}from"./client.js";import{createForm as I}from"../form/index.js";function N(t){const o=E(m);if(t){const r=o.step.getState();return{...o,form:I({id:`${r.id}-form`,title:r.label||r.id,fieldIds:t.fieldIds,onSuccess:t.onSuccess,onError:t.onError,stepContext:o}).form}}return o}function O(t){const o=T(),r=b(),{activeStep:u}=A(),n=u.map(e=>(e==null?void 0:e.id)===t),c=o.treeStore.map(e=>{const i=e.steps.find(s=>s.id===t);if(!i)throw new Error(`Step with id "${t}" not found in the experience tree.`);return i}),f=h([]),S=d({fields:f,responses:r.responses.listStore},({fields:e,responses:i})=>e.map(s=>{var a;const x=(a=i.find(g=>g.fieldId===s.id))==null?void 0:a.value;return{...s,value:x}})),p=C({source:d({step:c,fields:r.fields.listStore}),effect:w(async({step:{fieldIds:e},fields:i})=>await F(r,i.filter(s=>e.includes(s.id))))});return l({source:{isActiveStep:n},filter:({isActiveStep:e})=>e,target:p}),l({source:p.doneData,target:f}),v(m,{step:c,fields:S,isActiveStep:n})}export{N as getStep,O as setStepContext};
+import{getContext as v,setContext as E}from"svelte";import{createStore as h,combine as a,attach as w,createEffect as C,sample as l}from"effector";import{getStepFields as A}from"@picked/client";import{STEP_CONTEXT_KEY as d}from"../context.js";import{getStepRouter as F}from"../router/context.js";import{getExperience as T,getPicked as P}from"./client.js";function N(){return v(d)}function O(o){const u=T(),i=P(),{activeStep:m}=F(),n=m.map(e=>(e==null?void 0:e.id)===o),s=u.treeStore.map(e=>{const t=e.steps.find(r=>r.id===o);if(!t)throw new Error(`Step with id "${o}" not found in the experience tree.`);return t}),c=h([]),S=a({fields:c,responses:i.responses.listStore},({fields:e,responses:t})=>e.map(r=>{var f;const g=(f=t.find(x=>x.fieldId===r.id))==null?void 0:f.value;return{...r,value:g}})),p=w({source:a({step:s,fields:i.fields.listStore}),effect:C(async({step:{fieldIds:e},fields:t})=>await A(i,t.filter(r=>e.includes(r.id))))});return l({source:{isActiveStep:n},filter:({isActiveStep:e})=>e,target:p}),l({source:p.doneData,target:c}),E(d,{step:s,fields:S,isActiveStep:n})}export{N as getStep,O as setStepContext};

package/dist/render/browser.js

@@ -1 +1 @@
-import{mount as a}from"svelte";import{isValidAdaptedComponent as d}from"../component.js";import{CLIENT_CONTEXT_KEY as f,EXPERIENCE_CONTEXT_KEY as C}from"../context.js";import{mergeArrays as u}from"../utils/array.js";function E(r,e){return new Map([[f,r],[C,e]])}const g=async(r,e,n,o,i)=>{var m,p;if(!d(e))throw new Error("The component is invalid.");const c=u((m=e.style)==null?void 0:m.sheets,i.stylesheets),l=u((p=e.style)==null?void 0:p.css,i.css);if(c.length&&c.forEach(s=>{const t=document.createElement("link");t.setAttribute("rel","stylesheet"),t.setAttribute("href",s),t.setAttribute("type","text/css"),t.setAttribute("picked-injected","true"),r.appendChild(t)}),l.length&&l.forEach(s=>{const t=document.createElement("style");t.textContent=s,t.setAttribute("type","text/css"),t.setAttribute("picked-injected","true"),r.appendChild(t)}),e.component instanceof Promise){const{default:s}=await e.component;a(s,{target:r,props:{client:n,experience:o},context:E(n,o)});return}a(e.component,{target:r,props:{client:n,experience:o},context:E(n,o)})},T=r=>{};export{E as createContext,g as renderSvelteComponent,T as unRenderSvelteComponent};
+import{mount as d}from"svelte";import{isValidAdaptedComponent as E}from"../component.js";import{CLIENT_CONTEXT_KEY as f,EXPERIENCE_CONTEXT_KEY as y}from"../context.js";import{mergeArrays as u}from"../utils/array.js";import h from"../utils/ErrorBoundary.svelte";function C(n,e){return new Map([[f,n],[y,e]])}const k=async(n,e,s,o,i)=>{var p,a;if(!E(e))throw new Error("The component is invalid.");const c=u((p=e.style)==null?void 0:p.sheets,i.stylesheets),m=u((a=e.style)==null?void 0:a.css,i.css);c.length&&c.forEach(r=>{const t=document.createElement("link");t.setAttribute("rel","stylesheet"),t.setAttribute("href",r),t.setAttribute("type","text/css"),t.setAttribute("picked-injected","true"),n.appendChild(t)}),m.length&&m.forEach(r=>{const t=document.createElement("style");t.textContent=r,t.setAttribute("type","text/css"),t.setAttribute("picked-injected","true"),n.appendChild(t)});const l=r=>{d(h,{target:n,props:{component:r,componentProps:{client:s,experience:o}},context:C(s,o)})};if(e.component instanceof Promise){const{default:r}=await e.component;l(r);return}l(e.component)},N=n=>{};export{C as createContext,k as renderSvelteComponent,N as unRenderSvelteComponent};

package/dist/utils/ErrorBoundary.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { getPicked } from '../hooks'
+  import type { ComponentWithProps } from 'src/component'
+
+  interface Props {
+    component: ComponentWithProps
+    componentProps?: Record<string, unknown>
+  }
+
+  const { component: InnerComponent, componentProps }: Props = $props()
+
+  function handleError(error: unknown) {
+    const client = getPicked()
+
+    client.eventBus({
+      type: 'exception',
+      level: 'error',
+      data: error,
+    })
+  }
+</script>
+
+<svelte:boundary onerror={handleError}><InnerComponent {...componentProps} /></svelte:boundary>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.1-dev.1765777335219",
+  "version": "0.0.1-dev.1765841386439",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -75,7 +75,7 @@
   ],
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.1-dev.1765777335219",
+    "@picked/client": "0.0.1-dev.1765841386439",
     "effector": "^23.3.0",
     "svelte": "^5.34.3"
   },