@texaryn/svelte 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @texaryn/svelte
 
+## 0.4.0
+
+### Minor Changes
+
+- 0ad9d1f: Moves optional integrations to the stable internal dependency lines while
+  keeping existing pre-stable dependent ranges on their previous minor versions.
+
+### Patch Changes
+
+- Updated dependencies [aa0bc46]
+  - @texaryn/core@1.0.0
+
+## 0.3.0
+
+### Minor Changes
+
+- 3e79b3e: FormRoot now renders the UI tree without creating a native form. Consumers own
+  the form element and connect its submit event to the runtime.
+- 3e79b3e: Give every renderer one localized validation message contract and normalize
+  adapter parameters so built-in widgets do not display evaluator diagnostics.
+- 3e79b3e: Make the form root error summary opt in, matching the other renderer bindings.
+
+### Patch Changes
+
+- Updated dependencies [35cb55f]
+- Updated dependencies [3e79b3e]
+  - @texaryn/core@0.16.0
+
 ## 0.2.0
 
 ### Minor Changes

package/README.md

@@ -50,14 +50,26 @@ mount(App, {
   const form = createForm(adapter, { initialData: { name: '', age: 18 } })
   const data = form.data
   const registry = createDefaultRegistry()
+
+  function submit(event: SubmitEvent) {
+    event.preventDefault()
+    form.dispatch({ type: 'Submit' })
+  }
 </script>
 
-<FormRoot {form} {registry}>
-  <h2>Data</h2>
-  <pre>{JSON.stringify($data, null, 2)}</pre>
-</FormRoot>
+<form novalidate onsubmit={submit}>
+  <FormRoot {form} {registry} showErrorSummary>
+    <h2>Data</h2>
+    <pre>{JSON.stringify($data, null, 2)}</pre>
+  </FormRoot>
+  <button type="submit">Submit</button>
+</form>
 ```
 
+`FormRoot` renders the tree only. The application owns the native `<form>` and
+connects its submit event to the runtime, so the tree can also be composed
+inside a larger form.
+
 `FormRoot` creates a server rendering safe id prefix with Svelte's component id
 unless `idPrefix` is provided. The prefix must be unique among forms rendered
 by the same component tree. `FormRoot` destroys the runtime when it unmounts by

package/dist/components/ErrorSummary.svelte

@@ -22,7 +22,7 @@
   }
 
   function details(entry: VisibleError): string {
-    return $messages.errorSummaryDetail({ messages: visibleErrorMessages(entry) })
+    return $messages.errorSummaryDetail({ messages: visibleErrorMessages(entry, $messages) })
   }
 </script>
 
@@ -32,7 +32,7 @@
     <ul>
       {#each $visibleErrors as entry (entry.nodeId)}
         <li>
-          <a href={`#${makeId(context.idPrefix, entry.nodeId, 'input')}`}>{visibleErrorLabel(entry)}</a>
+          <a href={`#${makeId(context.idPrefix, entry.nodeId, 'input')}`}>{visibleErrorLabel(entry, $messages)}</a>
           {details(entry)}
         </li>
       {/each}

package/dist/components/FieldErrors.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
   import type { ValidationError } from '@texaryn/core'
+  import { useFormContext } from '../context.js'
 
   export let id: string
   export let errors: readonly ValidationError[] = []
+  const { messages } = useFormContext()
 </script>
 
 <div {id} aria-live="polite" aria-atomic="true">
   {#each errors as error, index (`${error.instancePointer}:${error.keyword}:${index}`)}
-    <div>{error.message ?? error.keyword}</div>
+    <div>{$messages.validationMessage(error)}</div>
   {/each}
 </div>

package/dist/components/FieldErrors.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldErrors.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/FieldErrors.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAiBrD,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,WAAW;QAViC,MAAM;aAAW,SAAS,eAAe,EAAE;;;kBAUG,CAAC;AAC/E,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FieldErrors.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/FieldErrors.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAoBpD,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,WAAW;QAViC,MAAM;aAAW,SAAS,eAAe,EAAE;;;kBAUG,CAAC;AAC/E,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}

package/dist/components/FormRoot.svelte

@@ -17,6 +17,7 @@
     messages?: FormMessages
     idPrefix?: string
     destroyOnUnmount?: boolean
+    showErrorSummary?: boolean
     children?: Snippet
   }
 
@@ -26,6 +27,7 @@
     messages = englishMessages,
     idPrefix,
     destroyOnUnmount = true,
+    showErrorSummary = false,
     children,
   }: Props = $props()
 
@@ -81,18 +83,14 @@
     if (destroyOnUnmount) get(formStore).runtime.destroy()
   })
 
-  function handleSubmit(event: SubmitEvent): void {
-    event.preventDefault()
-    currentForm.dispatch({ type: 'Submit' })
-  }
 </script>
 
-<form onsubmit={handleSubmit}>
+{#if showErrorSummary}
   {#key $runtime}
     <ErrorSummary />
   {/key}
-  {#if rootNode}
-    <NodeRenderer node={rootNode} />
-  {/if}
-  {@render children?.()}
-</form>
+{/if}
+{#if rootNode}
+  <NodeRenderer node={rootNode} />
+{/if}
+{@render children?.()}

package/dist/components/FormRoot.svelte.d.ts

@@ -8,6 +8,7 @@ interface Props {
     messages?: FormMessages;
     idPrefix?: string;
     destroyOnUnmount?: boolean;
+    showErrorSummary?: boolean;
     children?: Snippet;
 }
 declare const FormRoot: import("svelte").Component<Props, {}, "">;

package/dist/components/FormRoot.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormRoot.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/FormRoot.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAU,MAAM,eAAe,CAAA;AAE3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AACnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAOjD,UAAU,KAAK;IACb,IAAI,EAAE,iBAAiB,CAAA;IACvB,QAAQ,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAA;IAC5C,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AA8FH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"FormRoot.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/FormRoot.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAU,MAAM,eAAe,CAAA;AAE3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AACnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAOjD,UAAU,KAAK;IACb,IAAI,EAAE,iBAAiB,CAAA;IACvB,QAAQ,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAA;IAC5C,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AA2FH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/field-props.d.ts

@@ -1,4 +1,4 @@
-import type { FieldNode, ValidationError } from '@texaryn/core';
+import type { FieldNode, FormMessages, ValidationError } from '@texaryn/core';
 export interface FieldAria {
     id: string;
     name: string;
@@ -16,5 +16,5 @@ export declare function fieldAria(node: FieldNode, state: {
     showErrors: boolean;
     errors: readonly ValidationError[];
 }, idPrefix: string, nativeReadOnly?: boolean): FieldAria;
-export declare function fieldLabel(node: FieldNode): string;
+export declare function fieldLabel(node: FieldNode, messages?: FormMessages): string;
 //# sourceMappingURL=field-props.d.ts.map

package/dist/field-props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-props.d.ts","sourceRoot":"","sources":["../src/lib/field-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/D,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE,IAAI,CAAA;IACtB,eAAe,EAAE,OAAO,CAAA;IACxB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,MAAM,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAE/E;AAED,wBAAgB,SAAS,CACvB,IAAI,EAAE,SAAS,EACf,KAAK,EAAE;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,SAAS,eAAe,EAAE,CAAA;CAAE,EACrF,QAAQ,EAAE,MAAM,EAChB,cAAc,UAAO,GACpB,SAAS,CAyBX;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAElD"}
+{"version":3,"file":"field-props.d.ts","sourceRoot":"","sources":["../src/lib/field-props.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE7E,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE,IAAI,CAAA;IACtB,eAAe,EAAE,OAAO,CAAA;IACxB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,MAAM,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAE/E;AAED,wBAAgB,SAAS,CACvB,IAAI,EAAE,SAAS,EACf,KAAK,EAAE;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,SAAS,eAAe,EAAE,CAAA;CAAE,EACrF,QAAQ,EAAE,MAAM,EAChB,cAAc,UAAO,GACpB,SAAS,CAyBX;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,GAAE,YAA8B,GAAG,MAAM,CAE5F"}

package/dist/field-props.js

@@ -1,3 +1,4 @@
+import { englishMessages, visibleFieldLabel } from '@texaryn/core';
 export function makeId(idPrefix, nodeId, suffix) {
     return `${idPrefix}-${nodeId}-${suffix}`;
 }
@@ -25,6 +26,6 @@ export function fieldAria(node, state, idPrefix, nativeReadOnly = true) {
         placeholder: node.placeholder ?? undefined,
     };
 }
-export function fieldLabel(node) {
-    return node.annotations.title ?? node.dataPointer ?? node.id;
+export function fieldLabel(node, messages = englishMessages) {
+    return visibleFieldLabel(node.annotations.title, node.dataPointer, messages);
 }

package/dist/field.js

@@ -25,7 +25,7 @@ export function createFieldBinding(form, nodeId, idPrefix, messages) {
     const kind = derived(node, ($node) => fieldKind($node));
     const visibleErrors = derived([showErrors, errors], ([$showErrors, $errors]) => $showErrors ? $errors : NO_ERRORS);
     const display = derived([kind, value], ([$kind, $value]) => displayValue($kind, $value));
-    const label = derived(node, ($node) => $node ? fieldLabel($node) : '');
+    const label = derived([node, messages], ([$node, $messages]) => $node ? fieldLabel($node, $messages) : '');
     const description = derived(node, ($node) => $node?.helpText ?? $node?.annotations.description);
     const labelFor = derived(node, ($node) => makeId(idPrefix, $node?.id ?? get(nodeId), 'input'));
     const descriptionId = derived(node, ($node) => makeId(idPrefix, $node?.id ?? get(nodeId), 'description'));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texaryn/svelte",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Svelte 5 bindings, renderer, and default widgets for Texaryn",
   "keywords": [
     "svelte",
@@ -46,7 +46,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@texaryn/core": "^0.15.0"
+    "@texaryn/core": "^1.0.0"
   },
   "peerDependencies": {
     "svelte": ">=5.20.0"