@picked/svelte 0.0.69 → 0.0.70-next.1

package/dist/form/__tests__/CreateFormHarness.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  // Test-only harness. `createForm` registers option callbacks with `$effect`,
+  // which requires a real component instance — mounting this is how the callback
+  // lifecycle (registration on mount, teardown on unmount) gets exercised.
+  import { untrack } from 'svelte'
+  import type { Store } from 'effector'
+  import { createForm, type FormCallbackOptions } from '../create-form.svelte'
+
+  interface HarnessProps {
+    formId: string
+    title: Store<string>
+    fieldKeys: Store<string[]>
+    options?: FormCallbackOptions
+    imperativeCallback?: () => void
+  }
+
+  const { formId, title, fieldKeys, options, imperativeCallback }: HarnessProps = $props()
+
+  // Props are read once, at init, on purpose: the harness is mounted with fixed
+  // props to exercise registration and teardown, and `createForm` itself is an
+  // init-time call. `untrack` states that intent rather than suppressing the
+  // state_referenced_locally warning.
+  untrack(() => {
+    const instance = createForm(formId, title, fieldKeys, options)
+
+    if (imperativeCallback) {
+      instance.form.onSuccess(imperativeCallback)
+    }
+  })
+</script>

package/dist/form/create-form.js

@@ -1 +1 @@
-import{getExperience as e,getPicked as t}from"../hooks/client.js";import{createForm as n}from"@picked/client/form";import*as r from"svelte/internal/client";function i(i,a,o){let s=n({client:t(),experienceInstance:e()},i,a,o);return{...s,form:{...s.form,props:{...s.form.props,onsubmit:e=>s.form.props.onsubmit(e)},onBeforeSubmit:e=>{r.user_effect(()=>s.form.onBeforeSubmit(e))},onSuccess:e=>{r.user_effect(()=>s.form.onSuccess(e))},onError:e=>{r.user_effect(()=>s.form.onError(e))}}}}export{i as createForm};
+import{getExperience as e,getPicked as t}from"../hooks/client.js";import{createForm as n}from"@picked/client/form";import*as r from"svelte/internal/client";function i(i,a,o,s){let c=n({client:t(),experienceInstance:e()},i,a,o);if(s?.onBeforeSubmit){let e=s.onBeforeSubmit;r.user_effect(()=>c.form.onBeforeSubmit(e))}if(s?.onSuccess){let e=s.onSuccess;r.user_effect(()=>c.form.onSuccess(e))}if(s?.onError){let e=s.onError;r.user_effect(()=>c.form.onError(e))}return{...c,form:{...c.form,props:{...c.form.props,onsubmit:e=>c.form.props.onsubmit(e)},onBeforeSubmit:e=>{r.user_effect(()=>c.form.onBeforeSubmit(e))},onSuccess:e=>{r.user_effect(()=>c.form.onSuccess(e))},onError:e=>{r.user_effect(()=>c.form.onError(e))}}}}export{i as createForm};

package/dist/form/create-form.svelte.d.ts

@@ -1,6 +1,6 @@
 import { Store } from 'effector';
-import { FormInstance as CoreFormInstance, ErrorCallback, SubmitCallback, SubmitEventWithCurrentTarget, SuccessCallback } from '@picked/client/form';
-export type { FormField } from '@picked/client/form';
+import { FormInstance as CoreFormInstance, ErrorCallback, FormCallbackOptions, SubmitCallback, SubmitEventWithCurrentTarget, SuccessCallback } from '@picked/client/form';
+export type { FormField, FormCallbackOptions } from '@picked/client/form';
 /**
  * Svelte FormInstance — identical to core but callback registration returns void
  * (cleanup is handled automatically via $effect, not by the consumer).
@@ -28,10 +28,12 @@ export interface FormInstance<TFieldKeys extends string = string> extends Omit<C
  * @param {string} formId - Unique identifier for this form instance.
  * @param {Store<string>} title - Reactive store holding the form/step title.
  * @param {Store<string[]>} fieldKeys - Reactive store of field keys that belong to this form.
+ * @param {FormCallbackOptions} [options] - Submit callback slots, registered once for the component's lifetime.
  * @returns {FormInstance} A form instance with reactive field stores, submission handlers, and callback registration.
  * @example
  * ```ts
- * const { form, fields } = createForm('lead-capture', $title, $fieldKeys)
+ * const { form, fields } = createForm('lead-capture', $title, $fieldKeys, { onSuccess })
  * ```
+ * @design-parity Mirrors `useForm`'s options argument in `@picked/react`.
  */
-export declare function createForm(formId: string, title: Store<string>, fieldKeys: Store<string[]>): FormInstance;
+export declare function createForm(formId: string, title: Store<string>, fieldKeys: Store<string[]>, options?: FormCallbackOptions): FormInstance;

package/dist/form/index.d.ts

@@ -1,2 +1,3 @@
-export type { FormField } from '@picked/client/form';
+/** @file Public surface of `@picked/svelte/form`. */
+export type { FormField, FormCallbackOptions } from '@picked/client/form';
 export { getForm } from './get-form';

package/dist/hooks/step.d.ts

@@ -1,6 +1,6 @@
 import { Store } from 'effector';
 import { Content, ExperienceStep } from '@picked/client';
-import { FormInstance, FormField } from '../form/create-form.svelte';
+import { FormCallbackOptions, FormInstance, FormField } from '../form/create-form.svelte';
 export interface StepContext extends FormInstance {
     step: Store<ExperienceStep>;
     /** Directly accessible fields with current response values — usable without a form. */
@@ -26,17 +26,29 @@ export interface StepContext extends FormInstance {
  * Creates and sets step context in the Svelte context tree.
  *
  * @param {string} stepKey - The step key.
+ * @param {FormCallbackOptions} [options] - Submit callback slots for the step's form.
  * @returns {StepContext} The created step context.
- * @example setStepContext('step-1')
+ * @example setStepContext('step-1', { onSuccess: ({ data }) => track(data) })
  */
-export declare function setStepContext(stepKey: string): StepContext;
+export declare function setStepContext(stepKey: string, options?: FormCallbackOptions): StepContext;
 /**
  * Retrieves the step context from the Svelte context tree.
  *
+ * Passing `options` registers those callbacks for the calling component's
+ * lifetime. It is sugar over `form.onSuccess(cb)` and friends, which already
+ * manage their own teardown via `$effect` — the value is symmetry with
+ * `useStep(options)` in `@picked/react`, where the options form is what makes
+ * render-body registration safe.
+ *
+ * Must be called during component initialisation, like any other rune-backed
+ * helper.
+ *
+ * @param {FormCallbackOptions} [options] - Submit callback slots for this component.
  * @returns {StepContext} The current step context.
- * @example getStep()
+ * @example const { form, fields } = getStep({ onSuccess: ({ data }) => track(data) })
+ * @design-parity Mirrors `useStep(options)` in `@picked/react`.
  */
-export declare function getStep(): StepContext;
+export declare function getStep(options?: FormCallbackOptions): StepContext;
 /**
  * Returns a Svelte/Effector store that yields the current step's resolved CMS content
  * data, or `null` when no content is registered for the step's `layoutContentId`.

package/dist/hooks/step.js

@@ -1 +1 @@
-import{STEP_CONTEXT_KEY as e}from"../context.js";import{getExperience as t,getPicked as n}from"./client.js";import{getStepRouter as r}from"../router/context.js";import{getContext as i,setContext as a}from"svelte";import{combine as o}from"effector";import{createForm as s}from"../form/create-form.svelte";function c(t){let i=n(),{activeStep:c}=r(),l=c.map(e=>e?.key===t),u=i.steps.listStore.map(e=>e.find(e=>e.key===t)??{id:t,key:t,name:``,fieldKeys:[]}),d=s(t,u.map(e=>e.name),u.map(e=>e.fieldKeys)),f=o(u,i.contents.indexStore,(e,t)=>e.layoutContentId?t[e.layoutContentId]??null:null,{skipVoid:!1});return a(e,{step:u,layoutContentStore:f,content:f.map(e=>e?.data??null,{skipVoid:!1}),isActive:l,isActiveStep:l,...d})}function l(){return i(e)}function u(){let t=i(e);return t?t.content:d().map(e=>e?.data??null,{skipVoid:!1})}function d(){let e=t(),r=n();return o(e.treeStore,r.contents.indexStore,(e,t)=>{let n=e.steps.find(e=>e.layoutContentId);return n?.layoutContentId?t[n.layoutContentId]??null:null})}export{l as getStep,u as getStepContent,c as setStepContext};
+import{STEP_CONTEXT_KEY as e}from"../context.js";import{getExperience as t,getPicked as n}from"./client.js";import{getStepRouter as r}from"../router/context.js";import{getContext as i,setContext as a}from"svelte";import{combine as o}from"effector";import{createForm as s}from"../form/create-form.svelte";function c(t,i){let c=n(),{activeStep:l}=r(),u=l.map(e=>e?.key===t),d=c.steps.listStore.map(e=>e.find(e=>e.key===t)??{id:t,key:t,name:``,fieldKeys:[]}),f=s(t,d.map(e=>e.name),d.map(e=>e.fieldKeys),i),p=o(d,c.contents.indexStore,(e,t)=>e.layoutContentId?t[e.layoutContentId]??null:null,{skipVoid:!1});return a(e,{step:d,layoutContentStore:p,content:p.map(e=>e?.data??null,{skipVoid:!1}),isActive:u,isActiveStep:u,...f})}function l(t){let n=i(e);return t?.onBeforeSubmit&&n.form.onBeforeSubmit(t.onBeforeSubmit),t?.onSuccess&&n.form.onSuccess(t.onSuccess),t?.onError&&n.form.onError(t.onError),n}function u(){let t=i(e);return t?t.content:d().map(e=>e?.data??null,{skipVoid:!1})}function d(){let e=t(),r=n();return o(e.treeStore,r.contents.indexStore,(e,t)=>{let n=e.steps.find(e=>e.layoutContentId);return n?.layoutContentId?t[n.layoutContentId]??null:null})}export{l as getStep,u as getStepContent,c as setStepContext};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.69",
+  "version": "0.0.70-next.1",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -106,7 +106,7 @@
   },
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.69",
+    "@picked/client": "0.0.70-next.1",
     "effector": "^23.3.0",
     "svelte": "^5.46.4"
   },