@whatsaaaa/form-builder-vue 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Whatsaaaa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,248 @@
-# Temporary Holding Version
+# @whatsaaaa/form-builder-vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![npm](https://img.shields.io/npm/v/@whatsaaaa/form-builder-vue)](https://www.npmjs.com/package/@whatsaaaa/form-builder-vue)
+
+Render JSON form definitions with [Formisch](https://formisch.dev) and your own Vue components.
+
+It's headless: it reads the definition, connects every field to Formisch and turns input into the values the schema expects, but it renders nothing of its own. You give it a component per field type, so it works with plain HTML, Nuxt UI or any other UI library.
+
+## Install
+
+```sh
+pnpm add @whatsaaaa/form-builder-vue @formisch/vue valibot
+```
+
+Vue 3.5, `@formisch/vue` 1.1 and Valibot 1.3 or later are required. `@whatsaaaa/form-builder-schema` comes with it.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Form } from '@formisch/vue'
+import type { JsonForm } from '@whatsaaaa/form-builder-schema'
+import { JsonFields, useJsonForm } from '@whatsaaaa/form-builder-vue'
+import { components } from './fields'
+
+const { definition } = defineProps<{ definition: JsonForm }>()
+
+const jsonForm = useJsonForm(definition, { components })
+
+function save(output: unknown) {
+  // The output of the schema: trimmed, numbers as numbers, empty optional fields left out.
+}
+</script>
+
+<template>
+  <Form :of="jsonForm.form" @submit="save">
+    <JsonFields :of="jsonForm" />
+    <button type="submit">Save</button>
+  </Form>
+</template>
+```
+
+- `useJsonForm(definition, options?)` builds the schema and the initial input, and creates the Formisch form. `jsonForm.form` is a normal Formisch form, so every Formisch method works on it.
+- `<JsonFields>` renders the fields inside your `<Form>`. The form element, the submit button and anything around them are yours.
+- A definition with issues throws the builder's `DefinitionError`. Run `validate()` first when the definition comes from outside your code.
+- The definition is read once. To show another one, give the component that calls `useJsonForm` a new `:key`.
+
+### Options
+
+```ts
+useJsonForm(definition, {
+  builder: createSchemaBuilder({ fieldTypes: { money } }), // your own types, rules and messages
+  components, // your component per field type, see below
+  validate: 'blur', // when a field is validated the first time, as in Formisch
+  revalidate: 'input', // when it is validated again
+})
+```
+
+## Components
+
+`components` has one component per field type, by type name. Pass it to `useJsonForm`, or to `<JsonFields>` and `<JsonField>` as a prop, which wins. Several types can share one:
+
+```ts
+import type { FieldComponents } from '@whatsaaaa/form-builder-vue'
+
+export const components: FieldComponents = {
+  text: TextInput,
+  email: TextInput,
+  number: TextInput,
+  select: SelectInput,
+  group: Fieldset,
+  array: Repeater,
+  heading: Heading,
+  // …one for every type your definitions use
+}
+```
+
+A type that a definition uses but `components` doesn't have throws a `TypeError` that names every missing type, when `<JsonFields>` or `<JsonField>` sets up. Only the fields it renders count.
+
+What a component gets depends on the field's role:
+
+| Role    | Which fields                   | Props                                                                            | Slot                                         |
+| ------- | ------------------------------ | -------------------------------------------------------------------------------- | -------------------------------------------- |
+| value   | every field with a value       | `field`, `path`, `kind`, `required`, `input`, `errors`, `inputProps`, `setInput` | —                                            |
+| group   | a container of kind `object`   | `field`, `path`                                                                  | default: the group's fields                  |
+| array   | a container of kind `array`    | `field`, `path`, `items`, `errors`, `add`, `remove`, `move`                      | default, with `{ index }`: one item's fields |
+| display | a display element, kind `none` | `field`                                                                          | —                                            |
+
+The props are typed as `ValueFieldProps`, `GroupFieldProps`, `ArrayFieldProps` and `DisplayFieldProps`, and the slots as `GroupFieldSlots` and `ArrayFieldSlots`. `defineProps<ValueFieldProps>()` works in `<script setup>`.
+
+Your own container types render through the group or array role too, by their kind.
+
+### A value field
+
+```vue
+<script setup lang="ts">
+import type { ValueFieldProps } from '@whatsaaaa/form-builder-vue'
+
+defineProps<ValueFieldProps>()
+</script>
+
+<template>
+  <label>
+    {{ field.label }}
+    <input
+      v-bind="inputProps"
+      :type="kind === 'number' ? 'number' : 'text'"
+      :value="input ?? ''"
+      :required="required"
+      @input="setInput(($event.target as HTMLInputElement).value)"
+    />
+    <small v-if="errors">{{ errors[0] }}</small>
+  </label>
+</template>
+```
+
+- `field` is the field from the definition, with its `label`, `placeholder`, `options` and `ui`.
+- `path` is its Formisch path with real indexes, like `['lines', 0, 'quantity']`.
+- `inputProps` are Formisch's element props: the field's name, a ref, and focus, change and blur handlers. Bind them to the input element, so Formisch knows when the field is touched and can focus it after a failed submit.
+- `required` is true when the definition makes the field required.
+
+### setInput
+
+`setInput` sets the field's input after turning what an input element gives into what the schema expects, by the field's kind:
+
+| Kind                | Input                   | Value set                      |
+| ------------------- | ----------------------- | ------------------------------ |
+| `number`            | `''` or only spaces     | `undefined`                    |
+| `number`            | a numeric string, `'5'` | `5`                            |
+| `file`              | a `FileList`            | its first file, or `undefined` |
+| `array` of `file`   | a `FileList`            | an array of its files          |
+| `array` of `number` | numeric strings         | numbers                        |
+
+Anything else is set as it is, and the schema reports it. For a choice, like a radio or a select, set the option's value from `field.options` rather than the element's value: that keeps `2` a number and `true` a boolean.
+
+### A group
+
+```vue
+<script setup lang="ts">
+import type { GroupFieldProps, GroupFieldSlots } from '@whatsaaaa/form-builder-vue'
+
+defineProps<GroupFieldProps>()
+defineSlots<GroupFieldSlots>()
+</script>
+
+<template>
+  <fieldset>
+    <legend>{{ field.label }}</legend>
+    <slot />
+  </fieldset>
+</template>
+```
+
+### An array
+
+```vue
+<script setup lang="ts">
+import type { ArrayFieldProps, ArrayFieldSlots } from '@whatsaaaa/form-builder-vue'
+
+defineProps<ArrayFieldProps>()
+defineSlots<ArrayFieldSlots>()
+</script>
+
+<template>
+  <fieldset>
+    <legend>{{ field.label }}</legend>
+    <div v-for="(item, index) in items" :key="item">
+      <slot :index="index" />
+      <button type="button" @click="remove(index)">Remove</button>
+    </div>
+    <button type="button" @click="add()">Add</button>
+    <small v-if="errors">{{ errors[0] }}</small>
+  </fieldset>
+</template>
+```
+
+- `items` has one id per item. Use it as the `key`, so each item keeps its inputs when one is removed or moved.
+- `add()` adds an item at the end, with the defaults its fields have in the definition.
+- `errors` are the array's own messages, like a required array's or `maxLength`'s. Its items' fields show their own.
+
+### A display element
+
+```vue
+<script setup lang="ts">
+import type { DisplayFieldProps } from '@whatsaaaa/form-builder-vue'
+
+defineProps<DisplayFieldProps>()
+</script>
+
+<template>
+  <h2>{{ field.text }}</h2>
+</template>
+```
+
+Declare the props even when a component doesn't use them, like a divider, or Vue adds `field` to its element as an attribute.
+
+## Placing fields yourself
+
+`<JsonFields>` renders every field in the order of the definition. To put some of them somewhere else, place them with `<JsonField>` and leave them out of `<JsonFields>` with `except`:
+
+```vue
+<template>
+  <Form :of="jsonForm.form" @submit="save">
+    <main>
+      <JsonFields :of="jsonForm" :except="['coupon', 'acceptTerms']" />
+    </main>
+    <aside>
+      <JsonField :of="jsonForm" path="coupon" />
+      <JsonField :of="jsonForm" path="acceptTerms" />
+      <button type="submit">Place order</button>
+    </aside>
+  </Form>
+</template>
+```
+
+- A path is the field's names joined with dots: `'email'`, or `'address.city'` for a field of a group. A placed field validates, focuses and submits like any other, because it is still part of the one Formisch form.
+- A group or an array comes with all its fields. A field of an array's items can't be placed on its own, because it has no index outside its item, so place the array. To leave such a field out of every item, use `'*'` for the index: `except: ['lines.*.note']`.
+- `only` renders just the fields it names, in the order of the definition: `<JsonFields :of="jsonForm" :only="['name', 'email']" />`. Display elements have no name, so `only` leaves them out.
+- A path that names no field throws a `TypeError`, so a typo shows up at once. `only` and `except` are read when the component sets up.
+
+## Typing the form
+
+The definition is data, so TypeScript doesn't know its fields, and `jsonForm.form` is typed loosely: Formisch's own functions accept only top-level paths on it. Give `useJsonForm` your input type, and your output type when it differs, and they check paths and values as in any Formisch form:
+
+```ts
+import { getInput, useFieldArray } from '@formisch/vue'
+
+interface CheckoutInput {
+  name: string
+  address: { city: string }
+  lines: { product: string; quantity: number }[]
+}
+
+const jsonForm = useJsonForm<CheckoutInput>(definition, { components })
+
+getInput(jsonForm.form, { path: ['address', 'city'] }) // string | undefined
+useFieldArray(jsonForm.form, { path: ['lines'] })
+```
+
+- Formisch's `<Field>`, `<FieldArray>`, `useField`, `getInput` and `setInput` work on `jsonForm.form` either way. With a type, nested paths type-check, their values are typed, and so is the output your submit handler gets.
+- The type is a promise you make: nothing checks it against the definition. Keep the two in step.
+- A field you render with Formisch's `<Field>` gets none of the adapter's help, like `setInput` turning `'5'` into `5`, or the defaults of a new array item. Leave it out of `<JsonFields>` with `except`.
+
+## Not included
+
+- Labels and display text reach your components as written in the definition. The builder's `resolveMessage` only changes what goes into the schema, so translate `field.label` in your components.
+- `ui.widget` doesn't pick a component. A component can read `field.ui` itself, e.g. to show a multiselect as checkboxes.
+- Showing and hiding fields, or making one required because of another, belongs to a future affects package.

package/dist/index.d.ts

@@ -0,0 +1,204 @@
+import { Component, PropType, VNode } from "vue";
+import { FieldElementProps, FormSchema, FormStore, ValidationMode } from "@formisch/vue";
+import { JsonField as JsonField$1, JsonForm, SchemaBuilder, ValueKind } from "@whatsaaaa/form-builder-schema";
+import { GenericSchema } from "valibot";
+/** Your component for each field type, by type name: `{ text: TextInput, group: Fieldset }`. */
+type FieldComponents = Record<string, Component>;
+/** A field's Formisch path, with real indexes: `['lines', 0, 'quantity']`. */
+type FieldPath = readonly (string | number)[];
+/** The props of a component for a display element, like a heading. */
+interface DisplayFieldProps {
+  field: JsonField$1;
+}
+/** The props of a component for a field with a value. */
+interface ValueFieldProps {
+  field: JsonField$1;
+  path: FieldPath;
+  /** The kind of the value, e.g. `'number'`. */
+  kind: ValueKind;
+  /** True when the definition makes the field required. */
+  required: boolean;
+  /** The field's current input. */
+  input: unknown;
+  /** The field's error messages, or null when it has none. */
+  errors: [string, ...string[]] | null;
+  /** Bind these to the input element: its name, ref, and focus, change and blur handlers. */
+  inputProps: FieldElementProps;
+  /** Sets the input, after turning `'5'` into `5` for a number, or a `FileList` into files. */
+  setInput: (input: unknown) => void;
+}
+/** The props of a component for a container of kind `object`, like the built-in group. */
+interface GroupFieldProps {
+  field: JsonField$1;
+  path: FieldPath;
+}
+/** The slots of a group component: its default slot renders the group's fields. */
+interface GroupFieldSlots {
+  default(): VNode[];
+}
+/** The props of a component for a container of kind `array`, like the built-in array. */
+interface ArrayFieldProps {
+  field: JsonField$1;
+  path: FieldPath;
+  /** One id per item, to use as its `key`. */
+  items: string[];
+  /** The array's own error messages, e.g. from `maxLength`, or null. */
+  errors: [string, ...string[]] | null;
+  /** Adds an item at the end. */
+  add: () => void;
+  remove: (index: number) => void;
+  move: (from: number, to: number) => void;
+}
+/** The slots of an array component: its default slot renders the fields of the item at `index`. */
+interface ArrayFieldSlots {
+  default(props: {
+    index: number;
+  }): VNode[];
+}
+/**
+ * How `<JsonFields>` renders a field: a `value` field has an input, a `group` or an `array` holds
+ * fields, and a `display` element, like a heading, has no value.
+ */
+type FieldRole = 'value' | 'group' | 'array' | 'display';
+/** One field of a definition, with the fields inside it when it is a container. */
+interface FieldNode {
+  readonly field: JsonField$1;
+  /** The field's type, e.g. `'text'`. */
+  readonly type: string;
+  readonly role: FieldRole;
+  /** The kind of the field's value, e.g. `'number'`, or `'none'` for a display element. */
+  readonly kind: ValueKind;
+  /** The kind of the items, for a field of kind `array` whose type has one. */
+  readonly itemKind: ValueKind | undefined;
+  /** Where the value is, with `'*'` for each array index: `['lines', '*', 'quantity']`. */
+  readonly dataPath: readonly (string | number)[];
+  /** The fields of a group, or of one item of an array. */
+  readonly children: readonly FieldNode[];
+}
+interface UseJsonFormOptions {
+  /** Builds the schema and knows your own types and rules. Defaults to `createSchemaBuilder()`. */
+  builder?: SchemaBuilder;
+  /** Your component for each field type, so `<JsonFields>` and `<JsonField>` don't need them. */
+  components?: FieldComponents;
+  /** When a field is validated the first time, as in Formisch. */
+  validate?: ValidationMode;
+  /** When a field is validated again after that, as in Formisch. */
+  revalidate?: Exclude<ValidationMode, 'initial'>;
+}
+/** The schema of a definition, as the builder builds it. */
+type JsonFormSchema = ReturnType<SchemaBuilder['build']>;
+/**
+ * The schema type of `useJsonForm<TInput, TOutput>`: your types, so Formisch's paths and values
+ * are checked. An interface works too, which Formisch's own constraint wouldn't take as it is.
+ */
+type TypedJsonFormSchema<TInput extends object, TOutput extends object = TInput> = GenericSchema<Plain<TInput>, Plain<TOutput>>;
+/** The same type as an object literal type, which has the index signature Formisch requires. */
+type Plain<T> = { [K in keyof T]: T[K]; };
+/** What `useJsonForm` returns. Pass it to `<JsonFields>`. */
+interface JsonFormInstance<TSchema extends FormSchema = JsonFormSchema> {
+  /** The Formisch form: pass it to Formisch's `<Form :of>`, or to any of its methods. */
+  readonly form: FormStore<TSchema>;
+  readonly definition: JsonForm;
+  readonly builder: SchemaBuilder;
+  /** The components from the options, if any. */
+  readonly components: FieldComponents | undefined;
+  /** The definition's fields as a tree, the way `<JsonFields>` renders them. */
+  readonly fields: readonly FieldNode[];
+}
+/** Any form `useJsonForm` returns, typed or not: what the components take. */
+type AnyJsonFormInstance = JsonFormInstance<FormSchema>;
+/**
+ * A Formisch form for a definition, with its schema and initial input from the builder. A
+ * definition with issues throws the builder's `DefinitionError`, so run `validate()` first when it
+ * comes from outside your code. The definition is read once: give the form a new `:key` to use
+ * another one.
+ */
+export declare function useJsonForm(definition: JsonForm, options?: UseJsonFormOptions): JsonFormInstance;
+/**
+ * The same, with the form typed by your input type, and output type when it differs, so Formisch's
+ * paths and values are checked. The types are yours to keep in step with the definition.
+ */
+export declare function useJsonForm<TInput extends object, TOutput extends object = TInput>(definition: JsonForm, options?: UseJsonFormOptions): JsonFormInstance<TypedJsonFormSchema<TInput, TOutput>>;
+/**
+ * Renders one field of a `useJsonForm` form, wherever you put it inside Formisch's `<Form>`. A
+ * group or an array comes with its fields. Leave the field out of `<JsonFields>` with `except`.
+ */
+export declare const JsonField: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** What `useJsonForm` returned. */
+  of: {
+    type: PropType<AnyJsonFormInstance>;
+    required: true;
+  };
+  /** The field's path: `'email'`, or `'address.city'` for a field of a group. */
+  path: {
+    type: StringConstructor;
+    required: true;
+  };
+  /** Defaults to the components `useJsonForm` got. */
+  components: {
+    type: PropType<FieldComponents>;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** What `useJsonForm` returned. */
+  of: {
+    type: PropType<AnyJsonFormInstance>;
+    required: true;
+  };
+  /** The field's path: `'email'`, or `'address.city'` for a field of a group. */
+  path: {
+    type: StringConstructor;
+    required: true;
+  };
+  /** Defaults to the components `useJsonForm` got. */
+  components: {
+    type: PropType<FieldComponents>;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * Renders the fields of a `useJsonForm` form with your components, one per field type. It renders
+ * nothing of its own, so put it inside Formisch's `<Form>` with your own submit button. `only` and
+ * `except` are read when it sets up.
+ */
+export declare const JsonFields: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** What `useJsonForm` returned. */
+  of: {
+    type: PropType<AnyJsonFormInstance>;
+    required: true;
+  };
+  /** Defaults to the components `useJsonForm` got. */
+  components: {
+    type: PropType<FieldComponents>;
+  };
+  /** Renders only these fields, by path, in the order of the definition. */
+  only: {
+    type: PropType<readonly string[]>;
+  };
+  /** Leaves out these fields, by path, e.g. the ones you place with `<JsonField>`. */
+  except: {
+    type: PropType<readonly string[]>;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** What `useJsonForm` returned. */
+  of: {
+    type: PropType<AnyJsonFormInstance>;
+    required: true;
+  };
+  /** Defaults to the components `useJsonForm` got. */
+  components: {
+    type: PropType<FieldComponents>;
+  };
+  /** Renders only these fields, by path, in the order of the definition. */
+  only: {
+    type: PropType<readonly string[]>;
+  };
+  /** Leaves out these fields, by path, e.g. the ones you place with `<JsonField>`. */
+  except: {
+    type: PropType<readonly string[]>;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export type { AnyJsonFormInstance, ArrayFieldProps, ArrayFieldSlots, DisplayFieldProps, FieldComponents, FieldNode, FieldPath, FieldRole, GroupFieldProps, GroupFieldSlots, JsonFormInstance, JsonFormSchema, TypedJsonFormSchema, UseJsonFormOptions, ValueFieldProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,368 @@
+import { defineComponent, h } from "vue";
+import { insert, move, remove, useField, useFieldArray, useForm } from "@formisch/vue";
+import { createSchemaBuilder } from "@whatsaaaa/form-builder-schema";
+// src/field-paths.ts
+/**
+* A field's path as `only`, `except` and `<JsonField>` name it: `'address.city'`, or
+* `'lines.*.quantity'` for a field of an array's items. Undefined for a field without a name.
+*/
+const pathOf = (node) => node.field.name === void 0 ? void 0 : node.dataPath.join(".");
+/** Every field of the tree, in document order, a container before its fields. */
+function* allFields(nodes) {
+	for (const node of nodes) {
+		yield node;
+		yield* allFields(node.children);
+	}
+}
+/**
+* The field at `path`. A path that names no field is a mistake in the code, so it throws. With
+* `placed`, the field is rendered on its own, which a field of an array's items can't be: it has no
+* index outside its item.
+*/
+function findField(nodes, path, placed) {
+	const node = [...allFields(nodes)].find((candidate) => pathOf(candidate) === path);
+	if (!node) throw new TypeError(`No field at "${path}" in the definition.`);
+	if (placed && node.dataPath.includes("*")) {
+		const array = path.slice(0, path.indexOf(".*"));
+		throw new TypeError(`"${path}" is in an array's items, so it can't be placed on its own. Place "${array}" instead.`);
+	}
+	return node;
+}
+// src/item-input.ts
+/**
+* The input of a new item of an array, from the defaults in the definition: an object of its
+* fields' input, or the input of the item field for a list of single values.
+*/
+function itemInput(builder, array) {
+	const fields = array.children.map((child) => child.field);
+	const [only] = array.children;
+	if (array.children.length === 1 && only?.role !== "display" && only?.dataPath.at(-1) === "*") return initialInput(builder, [{
+		...only.field,
+		name: "item"
+	}]).item;
+	return initialInput(builder, fields);
+}
+const initialInput = (builder, fields) => builder.getInitialInput({
+	version: "1",
+	fields
+});
+// src/array-field.ts
+/** Connects a container of kind `array` to Formisch, and renders your component for it. */
+const ArrayField = defineComponent({
+	name: "ArrayField",
+	props: {
+		of: {
+			type: Object,
+			required: true
+		},
+		node: {
+			type: Object,
+			required: true
+		},
+		path: {
+			type: Array,
+			required: true
+		},
+		component: {
+			type: [Object, Function],
+			required: true
+		},
+		/** Renders the fields of the item at `index`. */
+		renderItem: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(props) {
+		const path = () => props.path;
+		const array = useFieldArray(() => props.of.form, () => ({ path: path() }));
+		const methods = {
+			add: () => insert(props.of.form, {
+				path: path(),
+				initialInput: itemInput(props.of.builder, props.node)
+			}),
+			remove: (index) => remove(props.of.form, {
+				path: path(),
+				at: index
+			}),
+			move: (from, to) => move(props.of.form, {
+				path: path(),
+				from,
+				to
+			})
+		};
+		return () => {
+			const fieldProps = {
+				field: props.node.field,
+				path: props.path,
+				items: array.items,
+				errors: array.errors,
+				...methods
+			};
+			return h(props.component, fieldProps, { default: ({ index }) => props.renderItem(index) });
+		};
+	}
+});
+// src/coerce-input.ts
+/**
+* Turns what an input element gives into what the field's schema expects: `'5'` into `5` for a
+* number, and a `FileList` into a file, or an array of files for a field of kind `array`. Anything
+* else is passed through, and the schema reports it.
+*/
+function coerceInput(input, kind, itemKind) {
+	if (kind === "array") {
+		const items = isFileList(input) ? Array.from(input) : input;
+		if (!Array.isArray(items) || itemKind === void 0) return items;
+		return items.map((item) => coerceInput(item, itemKind));
+	}
+	if (isFileList(input)) return kind === "file" ? input[0] ?? void 0 : input;
+	if (kind === "number" && typeof input === "string") return toNumber(input);
+	return input;
+}
+/** An empty string means no value. One that isn't a number stays a string, for the schema. */
+function toNumber(input) {
+	if (input.trim() === "") return void 0;
+	const number = Number(input);
+	return Number.isNaN(number) ? input : number;
+}
+/**
+* A `FileList`, or anything shaped like one: an array-like whose items are all files. Checked by
+* shape rather than with `instanceof FileList`, because a `File[]` from a component that spread the
+* list, or from a DOM shim like happy-dom whose `DataTransfer.files` is an array, should count too.
+* `File` only exists in a browser, so check for it before using it, e.g. during SSR.
+*/
+function isFileList(value) {
+	if (typeof File === "undefined" || typeof value !== "object" || value === null) return false;
+	if (value instanceof File || typeof value.length !== "number") return false;
+	return Array.from(value).every((item) => item instanceof File);
+}
+// src/value-field.ts
+/** Connects a field with a value to Formisch, and renders your component for it. */
+const ValueField = defineComponent({
+	name: "ValueField",
+	props: {
+		of: {
+			type: Object,
+			required: true
+		},
+		node: {
+			type: Object,
+			required: true
+		},
+		path: {
+			type: Array,
+			required: true
+		},
+		component: {
+			type: [Object, Function],
+			required: true
+		}
+	},
+	setup(props) {
+		const field = useField(() => props.of.form, () => ({ path: props.path }));
+		const setInput = (input) => {
+			field.input = coerceInput(input, props.node.kind, props.node.itemKind);
+		};
+		return () => {
+			const fieldProps = {
+				field: props.node.field,
+				path: props.path,
+				kind: props.node.kind,
+				required: isRequired(props.node.field),
+				input: field.input,
+				errors: field.errors,
+				inputProps: field.props,
+				setInput
+			};
+			return h(props.component, fieldProps);
+		};
+	}
+});
+const isRequired = (field) => field.required === true || typeof field.required === "object" && field.required !== null;
+// src/render-fields.ts
+/** The components from the props, or else the ones `useJsonForm` got. */
+function resolveComponents(components, of) {
+	const resolved = components ?? of.components;
+	if (!resolved) throw new TypeError("No field components. Pass them to useJsonForm, or to the component.");
+	return resolved;
+}
+/** Throws for the field types that would render without a component, naming each once. */
+function checkComponents(ctx, nodes) {
+	const missing = /* @__PURE__ */ new Set();
+	const visit = (node) => {
+		if (ctx.skip(node)) return;
+		if (!Object.hasOwn(ctx.components, node.type)) missing.add(node.type);
+		node.children.forEach(visit);
+	};
+	nodes.forEach(visit);
+	if (!missing.size) return;
+	const names = [...missing].map((type) => `"${type}"`).join(", ");
+	const [noun, pronoun] = missing.size > 1 ? ["types", "them"] : ["type", "it"];
+	throw new TypeError(`No component for the field ${noun} ${names}. Add ${pronoun} to the components.`);
+}
+/** `indexes` are the indexes of the array items the fields are in, outermost first. */
+function renderFields(ctx, nodes, indexes) {
+	return nodes.filter((node) => !ctx.skip(node)).map((node, position) => renderField(ctx, node, indexes, position));
+}
+function renderField(ctx, node, indexes, position) {
+	const component = ctx.components[node.type];
+	const path = toPath(node.dataPath, indexes);
+	const key = node.field.name ?? `#${position}`;
+	switch (node.role) {
+		case "display": return h(component, {
+			key,
+			field: node.field
+		});
+		case "group": return h(component, {
+			key,
+			field: node.field,
+			path
+		}, { default: () => renderFields(ctx, node.children, indexes) });
+		case "array": return h(ArrayField, {
+			key,
+			of: ctx.of,
+			node,
+			path,
+			component,
+			renderItem: (index) => renderFields(ctx, node.children, [...indexes, index])
+		});
+		case "value": return h(ValueField, {
+			key,
+			of: ctx.of,
+			node,
+			path,
+			component
+		});
+	}
+}
+/** The field's data path, with each `'*'` replaced by the index of the item it is in. */
+function toPath(dataPath, indexes) {
+	let next = 0;
+	return dataPath.map((key) => key === "*" ? indexes[next++] ?? key : key);
+}
+// src/json-field.ts
+/**
+* Renders one field of a `useJsonForm` form, wherever you put it inside Formisch's `<Form>`. A
+* group or an array comes with its fields. Leave the field out of `<JsonFields>` with `except`.
+*/
+const JsonField = defineComponent({
+	name: "JsonField",
+	props: {
+		/** What `useJsonForm` returned. */
+		of: {
+			type: Object,
+			required: true
+		},
+		/** The field's path: `'email'`, or `'address.city'` for a field of a group. */
+		path: {
+			type: String,
+			required: true
+		},
+		/** Defaults to the components `useJsonForm` got. */
+		components: { type: Object }
+	},
+	setup(props) {
+		const node = findField(props.of.fields, props.path, true);
+		const ctx = {
+			of: props.of,
+			components: resolveComponents(props.components, props.of),
+			skip: () => false
+		};
+		checkComponents(ctx, [node]);
+		return () => renderField(ctx, node, [], 0);
+	}
+});
+// src/json-fields.ts
+/**
+* Renders the fields of a `useJsonForm` form with your components, one per field type. It renders
+* nothing of its own, so put it inside Formisch's `<Form>` with your own submit button. `only` and
+* `except` are read when it sets up.
+*/
+const JsonFields = defineComponent({
+	name: "JsonFields",
+	props: {
+		/** What `useJsonForm` returned. */
+		of: {
+			type: Object,
+			required: true
+		},
+		/** Defaults to the components `useJsonForm` got. */
+		components: { type: Object },
+		/** Renders only these fields, by path, in the order of the definition. */
+		only: { type: Array },
+		/** Leaves out these fields, by path, e.g. the ones you place with `<JsonField>`. */
+		except: { type: Array }
+	},
+	setup(props) {
+		const fields = props.of.fields;
+		const except = new Set(props.except);
+		for (const path of except) findField(fields, path, false);
+		const ctx = {
+			of: props.of,
+			components: resolveComponents(props.components, props.of),
+			skip: (node) => except.has(pathOf(node) ?? "")
+		};
+		const nodes = props.only ? onlyFields(fields, props.only) : fields;
+		checkComponents(ctx, nodes);
+		return () => renderFields(ctx, nodes, []);
+	}
+});
+/** The fields `only` names, in the order of the definition, each once. */
+function onlyFields(fields, only) {
+	const named = new Set(only.map((path) => findField(fields, path, true)));
+	return [...allFields(fields)].filter((node) => named.has(node));
+}
+// src/field-tree.ts
+/**
+* The fields of a definition that builds, as a tree. It comes from the builder's `walkFields`, so
+* your own container types are in it too.
+*/
+function fieldTree(builder, definition) {
+	const roots = [];
+	const lists = [roots];
+	for (const walked of builder.walkFields(definition)) {
+		const children = [];
+		lists.length = walked.depth + 1;
+		lists.at(-1)?.push(toNode(walked, builder, children));
+		lists.push(children);
+	}
+	return roots;
+}
+function toNode(walked, builder, children) {
+	const kind = walked.kind;
+	return {
+		field: walked.field,
+		type: walked.type,
+		role: roleOf(kind, builder.fieldTypes[walked.type]?.container === true),
+		kind,
+		itemKind: walked.itemKind,
+		dataPath: walked.dataPath,
+		children
+	};
+}
+function roleOf(kind, container) {
+	if (kind === "none") return "display";
+	if (!container) return "value";
+	return kind === "array" ? "array" : "group";
+}
+// src/use-json-form.ts
+function useJsonForm(definition, options = {}) {
+	const builder = options.builder ?? createSchemaBuilder();
+	const form = useForm({
+		schema: builder.build(definition),
+		initialInput: builder.getInitialInput(definition),
+		validate: options.validate,
+		revalidate: options.revalidate
+	});
+	const { components } = options;
+	return {
+		form,
+		definition,
+		builder,
+		components,
+		fields: fieldTree(builder, definition)
+	};
+}
+export { JsonField, JsonFields, useJsonForm };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/field-paths.ts","../src/item-input.ts","../src/array-field.ts","../src/coerce-input.ts","../src/value-field.ts","../src/render-fields.ts","../src/json-field.ts","../src/json-fields.ts","../src/field-tree.ts","../src/use-json-form.ts"],"sourcesContent":["import type { FieldNode } from './field-tree'\n\n/**\n * A field's path as `only`, `except` and `<JsonField>` name it: `'address.city'`, or\n * `'lines.*.quantity'` for a field of an array's items. Undefined for a field without a name.\n */\nexport const pathOf = (node: FieldNode): string | undefined =>\n  node.field.name === undefined ? undefined : node.dataPath.join('.')\n\n/** Every field of the tree, in document order, a container before its fields. */\nexport function* allFields(nodes: readonly FieldNode[]): Generator<FieldNode, void, undefined> {\n  for (const node of nodes) {\n    yield node\n    yield* allFields(node.children)\n  }\n}\n\n/**\n * The field at `path`. A path that names no field is a mistake in the code, so it throws. With\n * `placed`, the field is rendered on its own, which a field of an array's items can't be: it has no\n * index outside its item.\n */\nexport function findField(nodes: readonly FieldNode[], path: string, placed: boolean): FieldNode {\n  const node = [...allFields(nodes)].find((candidate) => pathOf(candidate) === path)\n  if (!node) throw new TypeError(`No field at \"${path}\" in the definition.`)\n  if (placed && node.dataPath.includes('*')) {\n    const array = path.slice(0, path.indexOf('.*'))\n    throw new TypeError(\n      `\"${path}\" is in an array's items, so it can't be placed on its own. Place \"${array}\" instead.`,\n    )\n  }\n  return node\n}\n","import type { JsonField, SchemaBuilder } from '@whatsaaaa/form-builder-schema'\nimport type { FieldNode } from './field-tree'\n\n/**\n * The input of a new item of an array, from the defaults in the definition: an object of its\n * fields' input, or the input of the item field for a list of single values.\n */\nexport function itemInput(builder: SchemaBuilder, array: FieldNode): unknown {\n  const fields = array.children.map((child) => child.field)\n  const [only] = array.children\n  // The field of a list of single values has no name: its value is the item itself.\n  if (array.children.length === 1 && only?.role !== 'display' && only?.dataPath.at(-1) === '*') {\n    return initialInput(builder, [{ ...only.field, name: 'item' }]).item\n  }\n  return initialInput(builder, fields)\n}\n\nconst initialInput = (builder: SchemaBuilder, fields: JsonField[]) =>\n  builder.getInitialInput({ version: '1', fields })\n","import { insert, move, remove, useFieldArray } from '@formisch/vue'\nimport { type Component, defineComponent, h, type PropType, type VNode } from 'vue'\nimport type { ArrayFieldProps, FieldPath } from './field-components'\nimport type { FieldNode } from './field-tree'\nimport { itemInput } from './item-input'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\n/** Connects a container of kind `array` to Formisch, and renders your component for it. */\nexport const ArrayField = defineComponent({\n  name: 'ArrayField',\n  props: {\n    of: { type: Object as PropType<AnyJsonFormInstance>, required: true },\n    node: { type: Object as PropType<FieldNode>, required: true },\n    path: { type: Array as PropType<FieldPath>, required: true },\n    component: { type: [Object, Function] as PropType<Component>, required: true },\n    /** Renders the fields of the item at `index`. */\n    renderItem: { type: Function as PropType<(index: number) => VNode[]>, required: true },\n  },\n  setup(props) {\n    // The path comes from the definition at runtime, so the schema's types can't check it.\n    const path = () => props.path as never\n    const array = useFieldArray(\n      () => props.of.form,\n      () => ({ path: path() }),\n    )\n\n    const methods = {\n      // A new item starts with the defaults of its fields, like the items of a new form.\n      add: () =>\n        insert(props.of.form, {\n          path: path(),\n          initialInput: itemInput(props.of.builder, props.node) as never,\n        }),\n      remove: (index: number) => remove(props.of.form, { path: path(), at: index }),\n      move: (from: number, to: number) => move(props.of.form, { path: path(), from, to }),\n    }\n\n    return () => {\n      const fieldProps: ArrayFieldProps = {\n        field: props.node.field,\n        path: props.path,\n        items: array.items,\n        errors: array.errors,\n        ...methods,\n      }\n      return h(props.component, fieldProps, {\n        default: ({ index }: { index: number }) => props.renderItem(index),\n      })\n    }\n  },\n})\n","import type { ValueKind } from '@whatsaaaa/form-builder-schema'\n\n/**\n * Turns what an input element gives into what the field's schema expects: `'5'` into `5` for a\n * number, and a `FileList` into a file, or an array of files for a field of kind `array`. Anything\n * else is passed through, and the schema reports it.\n */\nexport function coerceInput(input: unknown, kind: ValueKind, itemKind?: ValueKind): unknown {\n  if (kind === 'array') {\n    const items = isFileList(input) ? Array.from(input) : input\n    if (!Array.isArray(items) || itemKind === undefined) return items\n    return items.map((item: unknown) => coerceInput(item, itemKind))\n  }\n  if (isFileList(input)) return kind === 'file' ? (input[0] ?? undefined) : input\n  if (kind === 'number' && typeof input === 'string') return toNumber(input)\n  return input\n}\n\n/** An empty string means no value. One that isn't a number stays a string, for the schema. */\nfunction toNumber(input: string): number | string | undefined {\n  if (input.trim() === '') return undefined\n  const number = Number(input)\n  return Number.isNaN(number) ? input : number\n}\n\n/**\n * A `FileList`, or anything shaped like one: an array-like whose items are all files. Checked by\n * shape rather than with `instanceof FileList`, because a `File[]` from a component that spread the\n * list, or from a DOM shim like happy-dom whose `DataTransfer.files` is an array, should count too.\n * `File` only exists in a browser, so check for it before using it, e.g. during SSR.\n */\nfunction isFileList(value: unknown): value is ArrayLike<File> {\n  if (typeof File === 'undefined' || typeof value !== 'object' || value === null) return false\n  if (value instanceof File || typeof (value as ArrayLike<unknown>).length !== 'number')\n    return false\n  return Array.from(value as ArrayLike<unknown>).every((item) => item instanceof File)\n}\n","import { useField } from '@formisch/vue'\nimport type { JsonField } from '@whatsaaaa/form-builder-schema'\nimport { type Component, defineComponent, h, type PropType } from 'vue'\nimport { coerceInput } from './coerce-input'\nimport type { FieldPath, ValueFieldProps } from './field-components'\nimport type { FieldNode } from './field-tree'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\n/** Connects a field with a value to Formisch, and renders your component for it. */\nexport const ValueField = defineComponent({\n  name: 'ValueField',\n  props: {\n    of: { type: Object as PropType<AnyJsonFormInstance>, required: true },\n    node: { type: Object as PropType<FieldNode>, required: true },\n    path: { type: Array as PropType<FieldPath>, required: true },\n    component: { type: [Object, Function] as PropType<Component>, required: true },\n  },\n  setup(props) {\n    // The path comes from the definition at runtime, so the schema's types can't check it.\n    const field = useField(\n      () => props.of.form,\n      () => ({ path: props.path as never }),\n    )\n\n    const setInput = (input: unknown) => {\n      field.input = coerceInput(input, props.node.kind, props.node.itemKind) as never\n    }\n\n    return () => {\n      const fieldProps: ValueFieldProps = {\n        field: props.node.field,\n        path: props.path,\n        kind: props.node.kind,\n        required: isRequired(props.node.field),\n        input: field.input,\n        errors: field.errors,\n        inputProps: field.props,\n        setInput,\n      }\n      return h(props.component, fieldProps)\n    }\n  },\n})\n\nconst isRequired = (field: JsonField) =>\n  field.required === true || (typeof field.required === 'object' && field.required !== null)\n","import { type Component, h, type VNode } from 'vue'\nimport { ArrayField } from './array-field'\nimport type { FieldComponents, FieldPath } from './field-components'\nimport type { FieldNode } from './field-tree'\nimport type { AnyJsonFormInstance } from './use-json-form'\nimport { ValueField } from './value-field'\n\n/** What `<JsonFields>` and `<JsonField>` render with. */\nexport interface RenderContext {\n  of: AnyJsonFormInstance\n  components: FieldComponents\n  /** True for a field that isn't rendered, and so neither are the fields inside it. */\n  skip: (node: FieldNode) => boolean\n}\n\n/** The components from the props, or else the ones `useJsonForm` got. */\nexport function resolveComponents(\n  components: FieldComponents | undefined,\n  of: AnyJsonFormInstance,\n): FieldComponents {\n  const resolved = components ?? of.components\n  if (!resolved) {\n    throw new TypeError('No field components. Pass them to useJsonForm, or to the component.')\n  }\n  return resolved\n}\n\n/** Throws for the field types that would render without a component, naming each once. */\nexport function checkComponents(ctx: RenderContext, nodes: readonly FieldNode[]): void {\n  const missing = new Set<string>()\n  const visit = (node: FieldNode) => {\n    if (ctx.skip(node)) return\n    if (!Object.hasOwn(ctx.components, node.type)) missing.add(node.type)\n    node.children.forEach(visit)\n  }\n  nodes.forEach(visit)\n  if (!missing.size) return\n\n  // A missing component is a mistake in the code, not in the definition, so it throws early.\n  const names = [...missing].map((type) => `\"${type}\"`).join(', ')\n  const [noun, pronoun] = missing.size > 1 ? ['types', 'them'] : ['type', 'it']\n  throw new TypeError(\n    `No component for the field ${noun} ${names}. Add ${pronoun} to the components.`,\n  )\n}\n\n/** `indexes` are the indexes of the array items the fields are in, outermost first. */\nexport function renderFields(\n  ctx: RenderContext,\n  nodes: readonly FieldNode[],\n  indexes: readonly number[],\n): VNode[] {\n  return nodes\n    .filter((node) => !ctx.skip(node))\n    .map((node, position) => renderField(ctx, node, indexes, position))\n}\n\nexport function renderField(\n  ctx: RenderContext,\n  node: FieldNode,\n  indexes: readonly number[],\n  position: number,\n): VNode {\n  const component = ctx.components[node.type] as Component\n  const path = toPath(node.dataPath, indexes)\n  const key = node.field.name ?? `#${position}`\n  switch (node.role) {\n    case 'display':\n      return h(component, { key, field: node.field })\n    case 'group':\n      return h(\n        component,\n        { key, field: node.field, path },\n        { default: () => renderFields(ctx, node.children, indexes) },\n      )\n    case 'array':\n      return h(ArrayField, {\n        key,\n        of: ctx.of,\n        node,\n        path,\n        component,\n        renderItem: (index: number) => renderFields(ctx, node.children, [...indexes, index]),\n      })\n    case 'value':\n      return h(ValueField, { key, of: ctx.of, node, path, component })\n  }\n}\n\n/** The field's data path, with each `'*'` replaced by the index of the item it is in. */\nfunction toPath(dataPath: FieldNode['dataPath'], indexes: readonly number[]): FieldPath {\n  let next = 0\n  return dataPath.map((key) => (key === '*' ? (indexes[next++] ?? key) : key))\n}\n","import { defineComponent, type PropType } from 'vue'\nimport type { FieldComponents } from './field-components'\nimport { findField } from './field-paths'\nimport {\n  checkComponents,\n  type RenderContext,\n  renderField,\n  resolveComponents,\n} from './render-fields'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\n/**\n * Renders one field of a `useJsonForm` form, wherever you put it inside Formisch's `<Form>`. A\n * group or an array comes with its fields. Leave the field out of `<JsonFields>` with `except`.\n */\nexport const JsonField = defineComponent({\n  name: 'JsonField',\n  props: {\n    /** What `useJsonForm` returned. */\n    of: { type: Object as PropType<AnyJsonFormInstance>, required: true },\n    /** The field's path: `'email'`, or `'address.city'` for a field of a group. */\n    path: { type: String, required: true },\n    /** Defaults to the components `useJsonForm` got. */\n    components: { type: Object as PropType<FieldComponents> },\n  },\n  setup(props) {\n    const node = findField(props.of.fields, props.path, true)\n    const ctx: RenderContext = {\n      of: props.of,\n      components: resolveComponents(props.components, props.of),\n      skip: () => false,\n    }\n    checkComponents(ctx, [node])\n\n    return () => renderField(ctx, node, [], 0)\n  },\n})\n","import { defineComponent, type PropType } from 'vue'\nimport type { FieldComponents } from './field-components'\nimport { allFields, findField, pathOf } from './field-paths'\nimport type { FieldNode } from './field-tree'\nimport {\n  checkComponents,\n  type RenderContext,\n  renderFields,\n  resolveComponents,\n} from './render-fields'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\n/**\n * Renders the fields of a `useJsonForm` form with your components, one per field type. It renders\n * nothing of its own, so put it inside Formisch's `<Form>` with your own submit button. `only` and\n * `except` are read when it sets up.\n */\nexport const JsonFields = defineComponent({\n  name: 'JsonFields',\n  props: {\n    /** What `useJsonForm` returned. */\n    of: { type: Object as PropType<AnyJsonFormInstance>, required: true },\n    /** Defaults to the components `useJsonForm` got. */\n    components: { type: Object as PropType<FieldComponents> },\n    /** Renders only these fields, by path, in the order of the definition. */\n    only: { type: Array as PropType<readonly string[]> },\n    /** Leaves out these fields, by path, e.g. the ones you place with `<JsonField>`. */\n    except: { type: Array as PropType<readonly string[]> },\n  },\n  setup(props) {\n    const fields = props.of.fields\n    const except = new Set(props.except)\n    // A path that names no field is a typo, so check them even though nothing uses the result.\n    for (const path of except) findField(fields, path, false)\n\n    const ctx: RenderContext = {\n      of: props.of,\n      components: resolveComponents(props.components, props.of),\n      skip: (node) => except.has(pathOf(node) ?? ''),\n    }\n    const nodes = props.only ? onlyFields(fields, props.only) : fields\n    checkComponents(ctx, nodes)\n\n    return () => renderFields(ctx, nodes, [])\n  },\n})\n\n/** The fields `only` names, in the order of the definition, each once. */\nfunction onlyFields(fields: readonly FieldNode[], only: readonly string[]): FieldNode[] {\n  const named = new Set(only.map((path) => findField(fields, path, true)))\n  return [...allFields(fields)].filter((node) => named.has(node))\n}\n","import type {\n  JsonField,\n  JsonForm,\n  SchemaBuilder,\n  ValueKind,\n  WalkedField,\n} from '@whatsaaaa/form-builder-schema'\n\n/**\n * How `<JsonFields>` renders a field: a `value` field has an input, a `group` or an `array` holds\n * fields, and a `display` element, like a heading, has no value.\n */\nexport type FieldRole = 'value' | 'group' | 'array' | 'display'\n\n/** One field of a definition, with the fields inside it when it is a container. */\nexport interface FieldNode {\n  readonly field: JsonField\n  /** The field's type, e.g. `'text'`. */\n  readonly type: string\n  readonly role: FieldRole\n  /** The kind of the field's value, e.g. `'number'`, or `'none'` for a display element. */\n  readonly kind: ValueKind\n  /** The kind of the items, for a field of kind `array` whose type has one. */\n  readonly itemKind: ValueKind | undefined\n  /** Where the value is, with `'*'` for each array index: `['lines', '*', 'quantity']`. */\n  readonly dataPath: readonly (string | number)[]\n  /** The fields of a group, or of one item of an array. */\n  readonly children: readonly FieldNode[]\n}\n\n/**\n * The fields of a definition that builds, as a tree. It comes from the builder's `walkFields`, so\n * your own container types are in it too.\n */\nexport function fieldTree(builder: SchemaBuilder, definition: JsonForm): FieldNode[] {\n  const roots: FieldNode[] = []\n  // The list each depth adds its fields to. A container comes before its fields, so the list at a\n  // field's depth is the one its parent opened.\n  const lists: FieldNode[][] = [roots]\n  for (const walked of builder.walkFields(definition)) {\n    const children: FieldNode[] = []\n    lists.length = walked.depth + 1\n    lists.at(-1)?.push(toNode(walked, builder, children))\n    lists.push(children)\n  }\n  return roots\n}\n\nfunction toNode(walked: WalkedField, builder: SchemaBuilder, children: FieldNode[]): FieldNode {\n  // The definition builds, so the builder gave every field its kind.\n  const kind = walked.kind as ValueKind\n  return {\n    field: walked.field,\n    type: walked.type,\n    role: roleOf(kind, builder.fieldTypes[walked.type]?.container === true),\n    kind,\n    itemKind: walked.itemKind,\n    dataPath: walked.dataPath,\n    children,\n  }\n}\n\nfunction roleOf(kind: ValueKind, container: boolean): FieldRole {\n  if (kind === 'none') return 'display'\n  if (!container) return 'value'\n  return kind === 'array' ? 'array' : 'group'\n}\n","import { type FormSchema, type FormStore, useForm, type ValidationMode } from '@formisch/vue'\nimport {\n  createSchemaBuilder,\n  type JsonForm,\n  type SchemaBuilder,\n} from '@whatsaaaa/form-builder-schema'\nimport type { GenericSchema } from 'valibot'\nimport type { FieldComponents } from './field-components'\nimport { type FieldNode, fieldTree } from './field-tree'\n\nexport interface UseJsonFormOptions {\n  /** Builds the schema and knows your own types and rules. Defaults to `createSchemaBuilder()`. */\n  builder?: SchemaBuilder\n  /** Your component for each field type, so `<JsonFields>` and `<JsonField>` don't need them. */\n  components?: FieldComponents\n  /** When a field is validated the first time, as in Formisch. */\n  validate?: ValidationMode\n  /** When a field is validated again after that, as in Formisch. */\n  revalidate?: Exclude<ValidationMode, 'initial'>\n}\n\n/** The schema of a definition, as the builder builds it. */\nexport type JsonFormSchema = ReturnType<SchemaBuilder['build']>\n\n/**\n * The schema type of `useJsonForm<TInput, TOutput>`: your types, so Formisch's paths and values\n * are checked. An interface works too, which Formisch's own constraint wouldn't take as it is.\n */\nexport type TypedJsonFormSchema<\n  TInput extends object,\n  TOutput extends object = TInput,\n> = GenericSchema<Plain<TInput>, Plain<TOutput>>\n\n/** The same type as an object literal type, which has the index signature Formisch requires. */\ntype Plain<T> = { [K in keyof T]: T[K] }\n\n/** What `useJsonForm` returns. Pass it to `<JsonFields>`. */\nexport interface JsonFormInstance<TSchema extends FormSchema = JsonFormSchema> {\n  /** The Formisch form: pass it to Formisch's `<Form :of>`, or to any of its methods. */\n  readonly form: FormStore<TSchema>\n  readonly definition: JsonForm\n  readonly builder: SchemaBuilder\n  /** The components from the options, if any. */\n  readonly components: FieldComponents | undefined\n  /** The definition's fields as a tree, the way `<JsonFields>` renders them. */\n  readonly fields: readonly FieldNode[]\n}\n\n/** Any form `useJsonForm` returns, typed or not: what the components take. */\nexport type AnyJsonFormInstance = JsonFormInstance<FormSchema>\n\n/**\n * A Formisch form for a definition, with its schema and initial input from the builder. A\n * definition with issues throws the builder's `DefinitionError`, so run `validate()` first when it\n * comes from outside your code. The definition is read once: give the form a new `:key` to use\n * another one.\n */\nexport function useJsonForm(definition: JsonForm, options?: UseJsonFormOptions): JsonFormInstance\n/**\n * The same, with the form typed by your input type, and output type when it differs, so Formisch's\n * paths and values are checked. The types are yours to keep in step with the definition.\n */\nexport function useJsonForm<TInput extends object, TOutput extends object = TInput>(\n  definition: JsonForm,\n  options?: UseJsonFormOptions,\n): JsonFormInstance<TypedJsonFormSchema<TInput, TOutput>>\nexport function useJsonForm(\n  definition: JsonForm,\n  options: UseJsonFormOptions = {},\n): JsonFormInstance {\n  const builder = options.builder ?? createSchemaBuilder()\n  const form = useForm({\n    schema: builder.build(definition),\n    initialInput: builder.getInitialInput(definition),\n    validate: options.validate,\n    revalidate: options.revalidate,\n  })\n  const { components } = options\n  return { form, definition, builder, components, fields: fieldTree(builder, definition) }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,60 @@
 {
   "name": "@whatsaaaa/form-builder-vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "description": "Render JSON form definitions with Formisch and your own Vue components.",
+  "keywords": [
+    "form",
+    "formisch",
+    "headless",
+    "json",
+    "vue"
+  ],
+  "homepage": "https://github.com/whatsaaaa/form-builder",
+  "bugs": "https://github.com/whatsaaaa/form-builder/issues",
+  "license": "MIT",
+  "author": "Whatsaaaa",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/whatsaaaa/form-builder.git",
+    "directory": "frameworks/vue"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@whatsaaaa/form-builder-schema": "^0.9.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@formisch/vue": "^1.1.1",
+    "happy-dom": "^20.0.0",
+    "publint": "^0.3.25",
+    "tsdown": "^0.23.2",
+    "typescript": "~6.0.3",
+    "valibot": "^1.5.0",
+    "vitest": "^5.0.5",
+    "vue": "^3.5.42"
+  },
+  "peerDependencies": {
+    "@formisch/vue": "^1.1.1",
+    "valibot": "^1.3.0",
+    "vue": "^3.5.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "vitest run",
+    "type-check": "tsc --noEmit",
+    "lint:pkg": "publint && pnpm pack --pack-destination .attw && attw .attw/*.tgz --profile esm-only"
+  }
 }