@picked/svelte 0.0.1-dev.1772493269328 → 0.0.1-dev.1773364848747

package/dist/form/index.js

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

package/dist/hooks/step.js

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

package/dist/plugins/devtools/components/ExperienceInstanceListItem.svelte

@@ -20,7 +20,7 @@
   <td>{$currentNode?.id || ''}</td>
   <td>{$currentNode?.type || ''}</td>
   <td>{$currentStep?.id || ''}</td>
-  <td>{$currentStep?.title || ''}</td>
+  <td>{$currentStep?.name || ''}</td>
   <td>{totalNextStepNodes}</td>
   <td>{$stepsToOrigin[0]} - {$stepsToOrigin[1]}</td>
   <td>{$stepsToLeaf[0]} - {$stepsToLeaf[1]}</td>

package/dist/plugins/devtools/plugin.js

@@ -1 +1 @@
-import{__vitePreload as i}from"../../_virtual/preload-helper.js";import{lazyComponent as r}from"@picked/client";import{createExperience as p,createExperiencePlugin as a}from"@picked/client/plugins/create-experience";import{adaptSvelteComponent as l}from"../../component.js";const v=t=>{const e=p({id:"devtools",name:"Picked Devtools",condition:!1,initializeOpen:!1,targets:[{selector:"body",placement:"append"}],component:l(r(()=>i(()=>import("./DevToolsExperience.svelte"),[])))});return e.addStep({label:"Tools"}),[{name:"svelte-devtools",setup:o=>{t?.enabled&&o.eventBus.watch(n=>{n.type==="ready"&&o.experiences.launch({id:e.id,options:{bypassCondition:!0}})})}},a({experiences:[e]})]};export{v as svelteDevtoolsPlugin};
+import{__vitePreload as i}from"../../_virtual/preload-helper.js";import{lazyComponent as r}from"@picked/client";import{createExperience as p,createExperiencePlugin as a}from"@picked/client/plugins/create-experience";import{adaptSvelteComponent as s}from"../../component.js";const v=t=>{const e=p({id:"devtools",name:"Picked Devtools",condition:!1,initializeOpen:!1,targets:[{selector:"body",placement:"append"}],component:s(r(()=>i(()=>import("./DevToolsExperience.svelte"),[])))});return e.addStep({name:"Tools"}),[{name:"svelte-devtools",setup:o=>{t?.enabled&&o.eventBus.watch(n=>{n.type==="ready"&&o.experiences.launch({id:e.id,options:{bypassCondition:!0}})})}},a({experiences:[e]})]};export{v as svelteDevtoolsPlugin};

package/dist/plugins/devtools/screens/events/EventsListScreen.svelte

@@ -10,7 +10,7 @@
   <EventsTable />
   <Spacer />
   <Divider />
-  <Stack padding="small">
+<Stack padding="small">
     <Text size="caption" color="subdued">
       {$events.length} events
     </Text>

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

@@ -19,8 +19,8 @@
   <Card sectioned>
     <Stack direction="vertical" gap="medium" padding="medium">
       <div>
-        <Text weight="semibold">Type</Text>
-        <Text>{$config.type}</Text>
+        <Text weight="semibold">Name</Text>
+        <Text>{$config.name}</Text>
       </div>
 
       <div>

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

@@ -9,7 +9,7 @@
   let zoom = 1
   let selectedNode = null
   let highlightedPath: string[][] = []
-  let error = null
+  let error: string | null = null
   const loading = false
 
   let treeRenderingDone = false
@@ -100,7 +100,7 @@
     const getNodeLabel = (node: ExperienceNode): string => {
       if (node.type === 'origin') return 'Start'
       if (node.type === 'step' && node.stepId)
-        return stepsMap.get(node.stepId)?.label ?? 'Unknown Step'
+        return stepsMap.get(node.stepId)?.name ?? 'Unknown Step'
       if (node.type === 'conditional' && node.conditionalId) {
         const conditional = conditionalsMap.get(node.conditionalId)
         if (conditional?.label) return conditional.label
@@ -186,7 +186,7 @@
       const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)
 
       const linkGenerator = d3
-        .linkHorizontal<d3.HierarchyPointLink<ProcessedNode>, ProcessedNode>()
+        .linkHorizontal<d3.HierarchyPointLink<ProcessedNode>, d3.HierarchyPointNode<ProcessedNode>>()
         .x((d) => d.y)
         .y((d) => d.x)
 

package/dist/plugins/devtools/screens/responses/ResponseTableRow.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ResponseListItem, PrimitiveFieldValue, Field } from '@picked/client'
+  import type { ResponseListItem, PrimitiveFieldValue, FieldValue, Field } from '@picked/client'
   import { getPicked } from '../../../../hooks'
   import { Button, Text, CodeBlock, Banner, Stack } from '../../ui'
 
@@ -8,6 +8,15 @@
 
   const client = getPicked()
 
+  function isPrimitiveFieldValue(val: unknown): val is PrimitiveFieldValue {
+    return val === null || typeof val === 'string' || typeof val === 'number' || typeof val === 'boolean'
+  }
+
+  function isOptionSelected(optionValue: unknown): boolean {
+    if (!isPrimitiveFieldValue(optionValue)) return false
+    return selectedOptions.has(optionValue)
+  }
+
   let isEditing = false
   let editValue = ''
   let editError = ''
@@ -36,8 +45,8 @@
     if (hasOptions) {
       selectedOptions = new Set()
       if (Array.isArray(currentValue)) {
-        currentValue.forEach((v) => selectedOptions.add(v))
-      } else if (currentValue !== null && currentValue !== undefined) {
+        currentValue.forEach((v) => { if (isPrimitiveFieldValue(v)) selectedOptions.add(v) })
+      } else if (isPrimitiveFieldValue(currentValue)) {
         selectedOptions.add(currentValue)
       }
     } else {
@@ -52,7 +61,8 @@
     selectedOptions = new Set()
   }
 
-  function toggleOption(optionValue: PrimitiveFieldValue) {
+  function toggleOption(optionValue: unknown) {
+    if (!isPrimitiveFieldValue(optionValue)) return
     if (field?.multiple) {
       if (selectedOptions.has(optionValue)) {
         selectedOptions.delete(optionValue)
@@ -65,7 +75,7 @@
     }
   }
 
-  function parseValue(input: string): unknown {
+  function parseValue(input: string): FieldValue {
     input = input.trim()
 
     if (input === '' || input === '-') {
@@ -99,7 +109,7 @@
 
   async function saveEdit() {
     try {
-      let newValue: unknown
+      let newValue: FieldValue
 
       if (hasOptions) {
         const values = Array.from(selectedOptions)
@@ -112,6 +122,7 @@
         newValue = parseValue(editValue)
       }
 
+      if (field.id == null) return
       const result = await client.responses.commit({ [field.id]: newValue })
 
       if (result.errors.length > 0) {
@@ -128,6 +139,7 @@
   }
 
   function handleClear() {
+    if (field.id == null) return
     client.responses.clear(field.id)
   }
 </script>
@@ -149,14 +161,14 @@
                 {#if field.multiple}
                   <input
                     type="checkbox"
-                    checked={selectedOptions.has(option.value)}
+                    checked={isOptionSelected(option.value)}
                     on:change={() => toggleOption(option.value)}
                   />
                 {:else}
                   <input
                     type="radio"
                     name="field-{field.id}"
-                    checked={selectedOptions.has(option.value)}
+                    checked={isOptionSelected(option.value)}
                     on:change={() => toggleOption(option.value)}
                   />
                 {/if}

package/dist/plugins/devtools/screens/responses/ResponsesTable.svelte

@@ -16,7 +16,7 @@
   $: responseMap = new Map(responses.map((r) => [r.fieldId, r]))
 
   $: allFieldRows = allFields.map((field) => {
-    const response = responseMap.get(field.id)
+    const response = field.id != null ? responseMap.get(field.id) : undefined
     return {
       field,
       response: response || null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.1-dev.1772493269328",
+  "version": "0.0.1-dev.1773364848747",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -9,6 +9,7 @@
     "@picked/client": "workspace:*",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
+    "@size-limit/file": "^12.0.0",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tsconfig/svelte": "^5.0.4",
@@ -18,6 +19,7 @@
     "effector": "^23.3.0",
     "fast-glob": "^3.3.3",
     "happy-dom": "^20.0.2",
+    "size-limit": "^12.0.0",
     "svelte": "^5.34.3",
     "svelte-check": "^4.2.2",
     "typedoc": "^0.28.5",
@@ -78,15 +80,43 @@
       "knip",
       "jscpd",
       "eslint",
-      "tsc"
+      "tsc",
+      "attw"
     ],
+    "ignoreDependencies": [
+      "@picked/analytics",
+      "@picked/client",
+      "@repo/eslint-config",
+      "@repo/typescript-config",
+      "@sveltejs/package",
+      "@tsconfig/svelte"
+    ],
+    "ignoreFiles": [
+      "eslint.config.js",
+      "src/components/index.ts",
+      "src/components/LazyImage.svelte",
+      "src/index.ts",
+      "src/plugins/devtools/index.ts",
+      "src/plugins/devtools/PickedLogo.svelte",
+      "src/plugins/framework/index.ts",
+      "src/router/index.ts",
+      "src/router/Step.svelte",
+      "src/router/StepRouter.svelte"
+    ],
+    "ignoreIssues": {
+      "src/**": [
+        "exports",
+        "types",
+        "duplicates"
+      ]
+    },
     "entry": [
       "src/plugins/devtools/ui/index.ts"
     ]
   },
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.1-dev.1772493269328",
+    "@picked/client": "0.0.1-dev.1773364848747",
     "effector": "^23.3.0",
     "svelte": "^5.34.3"
   },
@@ -98,10 +128,11 @@
     "dev": "vite build --watch",
     "jscpd": "jscpd src",
     "knip": "knip",
-    "lint": "eslint .",
+    "lint": "if [ \"$AGENT\" = \"true\" ]; then echo \"[AGENT HINT] Prefer running lint on specific files from the repo root: node scripts/lint-files.js <files>\"; fi && eslint .",
     "lint-files": "eslint",
     "lint:format": "eslint . --fix",
     "lint:report": "eslint . -o './.reports/eslint.json' -f json || [ -f './.reports/eslint.json' ]",
+    "size": "size-limit",
     "svelte-check": "svelte-check --tsconfig ./tsconfig.json",
     "svelte-check:report": "mkdir -p ./.reports && pnpm svelte-check --tsconfig ./tsconfig.json --output=machine > ./.reports/svelte-check.txt || [ -f './.reports/svelte-check.txt' ]",
     "test": "vitest run",
@@ -110,6 +141,36 @@
     "test:watch": "vitest",
     "type-check": "tsc -p . --noEmit"
   },
+  "size-limit": [
+    {
+      "path": "dist/index.js",
+      "limit": "10 kB"
+    },
+    {
+      "path": "dist/server/index.js",
+      "limit": "10 kB"
+    },
+    {
+      "path": "dist/router/index.js",
+      "limit": "5 kB"
+    },
+    {
+      "path": "dist/form/index.js",
+      "limit": "5 kB"
+    },
+    {
+      "path": "dist/hooks/index.js",
+      "limit": "5 kB"
+    },
+    {
+      "path": "dist/plugins/framework/index.js",
+      "limit": "5 kB"
+    },
+    {
+      "path": "dist/plugins/devtools/index.js",
+      "limit": "5 kB"
+    }
+  ],
   "svelte": "./dist/index.js",
   "type": "module",
   "types": "./dist/index.d.ts"