@picked/svelte 0.0.1-dev.1756875690387 → 0.0.1-dev.1762908210565

package/dist/form/index.d.ts

@@ -5,11 +5,12 @@ interface GetFormOptions {
     onSuccess?: () => void | Promise<void>;
     onError?: (errors: ValidationError[]) => void | Promise<void>;
 }
-export declare function getForm(options: GetFormOptions): {
+type SubmitEventWithCurrentTarget = SubmitEvent & {
+    currentTarget: EventTarget & HTMLFormElement;
+};
+export declare function getForm({ id: formId, title, onError, onSuccess }: GetFormOptions): {
     form: {
-        onsubmit: (event: SubmitEvent & {
-            currentTarget: EventTarget & HTMLFormElement;
-        }) => Promise<void>;
+        onsubmit: import('effector').EventCallable<SubmitEventWithCurrentTarget>;
     };
 };
 export {};

package/dist/form/index.js

@@ -1 +1 @@
-import{getPicked as v,getExperience as y}from"../hooks/client.js";import"svelte";import"effector";import"svelte/store";import"@picked/client";function B(a){const s=v();y();const{id:n,title:o}=a;async function d(c){var f,m;c.preventDefault(),s.eventBus({type:"form_submit",form:{id:n,title:o}});const p=new FormData(c.currentTarget),i={data:{},push(t){const r=t.questionId,e=this.data[r];e?Array.isArray(e)&&Array.isArray(t.value)?Array.isArray(e)&&Array.isArray(t.value)&&(typeof e[0]=="string"?this.data[r]=[...e,...t.value].map(String):typeof e[0]=="number"?this.data[r]=[...e,...t.value].map(Number):typeof e[0]=="boolean"?this.data[r]=[...e,...t.value].map(u=>!!u):this.data[r]=t.value):this.data[r]=t.value:this.data[r]=t.value}};for(const[t,r]of p.entries()){const e=s.fields.getById(t).getState();if(!e)continue;const u=e.id;switch(e.type){case"text":i.push({questionId:u,value:e.multiple?[String(r)]:String(r)});break;case"number":i.push({questionId:u,value:e.multiple?[Number(r)]:Number(r)});break;case"boolean":i.push({questionId:u,value:e.multiple?[r==="true"]:r==="true"});break}}const{errors:l}=await s.responses.commit(i.data);if(l.length>0){s.eventBus({type:"form_submit_error",form:{id:n,title:o},exception:"Form validation error"}),l.forEach(t=>{s.eventBus({type:"field_validation_error",exception:t})}),await((f=a.onError)==null?void 0:f.call(a,l));return}s.eventBus({type:"form_submit_success",form:{id:n,title:o}}),await((m=a.onSuccess)==null?void 0:m.call(a))}return{form:{onsubmit:d}}}export{B as getForm};
+import{createEvent as k,createEffect as l,attach as b,sample as x,split as B}from"effector";import{getPicked as F,getExperience as D}from"../hooks/client.js";import"svelte";import"@picked/client";import"svelte/store";function I({id:f,title:m,onError:d,onSuccess:v}){const i=F(),o=D(),{currentStepStore:p}=o,h=k(),y=l(e=>i.responses.commit(e)),g=b({source:{step:p},effect:l(({step:e})=>{i.eventBus({type:"form_submit_success",form:{id:f,title:m},experience:o,step:e??void 0}),v==null||v()})}),_=b({source:{step:p},mapParams:(e,a)=>({step:a.step,errors:e.errors}),effect:l(({step:e,errors:a})=>{i.eventBus({type:"form_submit_error",form:{id:f,title:m},exception:{reason:a},experience:o,step:e??void 0}),a.forEach(n=>{i.eventBus({type:"field_validation_error",exception:{reason:[n]},experience:o,step:e??void 0})}),d==null||d(a)})});return x({clock:h,source:{step:p},fn:({step:e})=>({formId:f,title:m,step:e}),target:l(({formId:e,title:a,step:n})=>{i.eventBus({type:"form_submit",form:{id:e,title:a},experience:o,step:n??void 0})})}),x({clock:h,source:{fields:i.fields.listStore,step:p},fn:({fields:e},a)=>{a.preventDefault();const n=new FormData(a.currentTarget),u={data:{},push(s){const r=s.questionId,t=this.data[r];t?Array.isArray(t)&&Array.isArray(s.value)?Array.isArray(t)&&Array.isArray(s.value)&&(typeof t[0]=="string"?this.data[r]=[...t,...s.value].map(String):typeof t[0]=="number"?this.data[r]=[...t,...s.value].map(Number):typeof t[0]=="boolean"?this.data[r]=[...t,...s.value].map(c=>!!c):this.data[r]=s.value):this.data[r]=s.value:this.data[r]=s.value}};for(const[s,r]of n.entries()){const t=e.find(A=>A.id===s);if(!t)continue;const c=t.id;switch(t.type){case"text":u.push({questionId:c,value:t.multiple?[String(r)]:String(r)});break;case"number":u.push({questionId:c,value:t.multiple?[Number(r)]:Number(r)});break;case"boolean":u.push({questionId:c,value:t.multiple?[r==="true"]:r==="true"});break}}return u.data},target:y}),B({source:y.doneData,match:{hasErrors:({errors:e})=>e.length>0},cases:{hasErrors:_,__:g}}),{form:{onsubmit:h}}}export{I as getForm};

package/dist/hooks/step.d.ts

@@ -1,16 +1,13 @@
 import { Store } from 'effector';
-import { Readable } from 'svelte/store';
-import { Field, Response } from '@picked/client';
+import { ExperienceStep, Field, Response } from '@picked/client';
+type FieldWithValue = Field & {
+    value: Response | undefined;
+};
 export interface StepContext {
-    step: Store<{
-        id: string;
-        label: string;
-    }>;
-    fields: Store<{
-        field: Field | undefined;
-        value: Response | undefined;
-    }[]>;
-    isActiveStep?: Readable<boolean>;
+    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 g,setContext as C}from"svelte";import{combine as E}from"effector";import{derived as b}from"svelte/store";import{STEP_CONTEXT_KEY as f}from"../context.js";import{getStepRouter as h}from"../router/context.js";import{getExperience as w,getPicked as T}from"./client.js";function K(){return g(f)}function N(r){const l=w(),n=T(),{activeStep:s}=h(),m=s?b(s,e=>(e==null?void 0:e.id)===r):void 0,p=E({tree:l.treeStore,fields:n.fields.listStore,responses:n.responses.listStore},({tree:e,fields:c,responses:u})=>{const t=e.steps.find(o=>o.id===r);if(!t)throw new Error(`Step with id "${r}" not found in the experience tree.`);const x=t.fieldIds.map(o=>{var d;const a=c.find(i=>i.id===o),S=(d=u.find(i=>i.fieldId===o))==null?void 0:d.value;return{field:a,value:S}});return{step:{id:t.id,label:t.label},fields:x}});return C(f,{step:p.map(e=>e.step),fields:p.map(e=>e.fields),isActiveStep:m})}export{K as getStep,N 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/plugins/devtools/experience.js

@@ -1 +1 @@
-import{createExperience as e}from"@picked/client/plugins/create-experience";import{adaptSvelteComponent as o}from"../../component.js";import t from"./DevToolsExperience.svelte";const p=e({id:"svelte-devtools",name:"Picked Devtools",decide:{},targets:[{selector:"main",placement:"append"}],type:"funnel",component:o(t)});p.addStep({label:"Tools"});export{p as devtoolsExperience};
+import{createExperience as e}from"@picked/client/plugins/create-experience";import{adaptSvelteComponent as o}from"../../component.js";import t from"./DevToolsExperience.svelte";const p=e({id:"svelte-devtools",name:"Picked Devtools",decide:{},targets:[{selector:"main",placement:"append"}],component:o(t)});p.addStep({label:"Tools"});export{p as devtoolsExperience};

package/dist/plugins/devtools/screens/experiences/ExperienceTreeScreen.svelte

@@ -48,7 +48,7 @@
       if (node.type === 'origin') return 'Start'
       if (node.type === 'step' && node.stepId)
         return stepsMap.get(node.stepId)?.label ?? 'Unknown Step'
-      if (node.type === 'conditional' && node.conditionalId) return `Condition'}`
+      if (node.type === 'conditional' && node.conditionalId) return `Condition`
       return 'Unknown Node'
     }
 

package/dist/router/StepRouter.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { writable } from 'svelte/store'
+  import { createEvent, createStore, sample } from 'effector'
+  import { supportsWindow } from '@picked/client'
   import { getExperience } from '../hooks'
   import { setStepRouter, type Step } from './context'
 
@@ -7,45 +8,58 @@
 
   const { currentStepStore } = experience
 
-  const activeStep = writable<Step | null>(null)
+  const activeStepStore = createStore<Step | null>(null)
   let hasActiveStep = false
-  const steps = writable<Step[]>([])
+  const stepsStore = createStore<Step[]>([])
+
+  const registerStepEvent = createEvent<Step>()
+  const unregisterStepEvent = createEvent<Step>()
+  const setActiveStepEvent = createEvent<Step | null>()
+
+  stepsStore.on(registerStepEvent, (state, step) => [...state, step])
+  stepsStore.on(unregisterStepEvent, (state, step) => state.filter((s) => s !== step))
+
+  sample({
+    source: setActiveStepEvent,
+    filter: (step) => step !== null,
+    target: activeStepStore,
+  })
 
   const registerStep = (step: Step) => {
     // todo: getIsSSR context
 
-    if (typeof window === 'undefined') {
+    if (!supportsWindow()) {
       // In SSR we should set the activeStep immediately if it is a match.
       // If there are more Routes being registered after a match is found,
       // we just skip them.
       if (hasActiveStep) return
 
-      const isMatchingStep = step.id === $currentStepStore?.id
+      const isMatchingStep = step.id === currentStepStore.getState()?.id
 
       if (isMatchingStep) {
-        activeStep.set(step)
+        setActiveStepEvent(step)
         hasActiveStep = true
       }
     } else {
-      steps.update((steps) => [...steps, step])
+      registerStepEvent(step)
     }
   }
 
   const unregisterStep = (step: Step) => {
-    steps.update((st) => st.filter((s) => s !== step))
+    unregisterStepEvent(step)
   }
 
-  $: {
-    activeStep.set($steps.find((s) => s.id === $currentStepStore?.id) || null)
-  }
+  sample({
+    source: { steps: stepsStore, currentStep: currentStepStore },
+    fn: ({ steps, currentStep }) => steps.find((s) => s.id === currentStep?.id) || null,
+    target: setActiveStepEvent,
+  })
 
   setStepRouter({
     registerStep,
     unregisterStep,
-    activeStep,
+    activeStep: activeStepStore.map((val) => val),
   })
 </script>
 
-{#if $currentStepStore?.id}
-  <slot />
-{/if}
+<slot />

package/dist/router/context.d.ts

@@ -1,9 +1,9 @@
-import { Writable } from 'svelte/store';
+import { Store } from 'effector';
 export interface Step {
     id: string;
 }
 interface ContextOptions {
-    activeStep?: Writable<Step | null>;
+    activeStep: Store<Step | null>;
     unregisterStep: (step: Step) => void;
     registerStep: (step: Step) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.1-dev.1756875690387",
+  "version": "0.0.1-dev.1762908210565",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -18,51 +18,51 @@
     "svelte-check": "^4.2.2",
     "typedoc": "^0.28.5",
     "typedoc-plugin-markdown": "^4.6.3",
-    "vite": "^6.3.5",
+    "vite": "^6.4.1",
     "vite-plugin-dts": "^4.5.4"
   },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "default": "./dist/index.js",
-      "svelte": "./dist/index.js"
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./server": {
       "types": "./dist/server/index.d.ts",
       "import": "./dist/server/index.js",
-      "default": "./dist/server/index.js",
-      "svelte": "./dist/server/index.js"
+      "svelte": "./dist/server/index.js",
+      "default": "./dist/server/index.js"
     },
     "./router": {
       "types": "./dist/router/index.d.ts",
       "import": "./dist/router/index.js",
-      "default": "./dist/router/index.js",
-      "svelte": "./dist/router/index.js"
+      "svelte": "./dist/router/index.js",
+      "default": "./dist/router/index.js"
     },
     "./form": {
       "types": "./dist/form/index.d.ts",
       "import": "./dist/form/index.js",
-      "default": "./dist/form/index.js",
-      "svelte": "./dist/form/index.js"
+      "svelte": "./dist/form/index.js",
+      "default": "./dist/form/index.js"
     },
     "./hooks": {
       "types": "./dist/hooks/index.d.ts",
       "import": "./dist/hooks/index.js",
-      "default": "./dist/hooks/index.js",
-      "svelte": "./dist/hooks/index.js"
+      "svelte": "./dist/hooks/index.js",
+      "default": "./dist/hooks/index.js"
     },
     "./plugins/framework": {
       "types": "./dist/plugins/framework/index.d.ts",
       "import": "./dist/plugins/framework/index.js",
-      "default": "./dist/plugins/framework/index.js",
-      "svelte": "./dist/plugins/framework/index.js"
+      "svelte": "./dist/plugins/framework/index.js",
+      "default": "./dist/plugins/framework/index.js"
     },
     "./plugins/devtools": {
       "types": "./dist/plugins/devtools/index.d.ts",
       "import": "./dist/plugins/devtools/index.js",
-      "default": "./dist/plugins/devtools/index.js",
-      "svelte": "./dist/plugins/devtools/index.js"
+      "svelte": "./dist/plugins/devtools/index.js",
+      "default": "./dist/plugins/devtools/index.js"
     }
   },
   "files": [
@@ -70,7 +70,7 @@
   ],
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.1-dev.1756875690387",
+    "@picked/client": "0.0.1-dev.1762908210565",
     "effector": "^23.3.0",
     "svelte": "^5.34.3"
   },