@picked/svelte 0.0.7 → 0.0.8

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

package/dist/hooks/step.d.ts

@@ -1,16 +1,17 @@
 import { Store } from 'effector';
-import { Readable } from 'svelte/store';
 import { Field, Response } from '@picked/client';
+import { Step } from '../router/context';
+type FieldWithValue = Field & {
+    value: Response | undefined;
+};
+type StepWithLabel = Step & {
+    label?: string;
+};
 export interface StepContext {
-    step: Store<{
-        id: string;
-        label: string;
-    }>;
-    fields: Store<{
-        field: Field | undefined;
-        value: Response | undefined;
-    }[]>;
-    isActiveStep?: Readable<boolean>;
+    step: Store<StepWithLabel>;
+    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/router/StepRouter.svelte

@@ -1,5 +1,5 @@
 <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'
@@ -8,9 +8,22 @@
 
   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
@@ -21,32 +34,32 @@
       // 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.7",
+  "version": "0.0.8",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -70,7 +70,7 @@
   ],
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.7",
+    "@picked/client": "0.0.8",
     "effector": "^23.3.0",
     "svelte": "^5.34.3"
   },