@whatsaaaa/form-builder-vue 0.1.2 → 0.1.4

package/dist/index.d.ts

@@ -1,11 +1,8 @@
+import { FieldNode, FieldNode as FieldNode$1, FieldPath, FieldPath as FieldPath$1, FieldRole, JsonField as JsonField$1, JsonForm, JsonFormSchema, JsonFormSchema as JsonFormSchema$1, SchemaBuilder, TypedJsonFormSchema, TypedJsonFormSchema as TypedJsonFormSchema$1, ValueKind } from "@whatsaaaa/form-builder-schema";
 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;
@@ -13,7 +10,7 @@ interface DisplayFieldProps {
 /** The props of a component for a field with a value. */
 interface ValueFieldProps {
   field: JsonField$1;
-  path: FieldPath;
+  path: FieldPath$1;
   /** The kind of the value, e.g. `'number'`. */
   kind: ValueKind;
   /** True when the definition makes the field required. */
@@ -30,7 +27,7 @@ interface ValueFieldProps {
 /** The props of a component for a container of kind `object`, like the built-in group. */
 interface GroupFieldProps {
   field: JsonField$1;
-  path: FieldPath;
+  path: FieldPath$1;
 }
 /** The slots of a group component: its default slot renders the group's fields. */
 interface GroupFieldSlots {
@@ -39,7 +36,7 @@ interface GroupFieldSlots {
 /** The props of a component for a container of kind `array`, like the built-in array. */
 interface ArrayFieldProps {
   field: JsonField$1;
-  path: FieldPath;
+  path: FieldPath$1;
   /** One id per item, to use as its `key`. */
   items: string[];
   /** The array's own error messages, e.g. from `maxLength`, or null. */
@@ -55,26 +52,6 @@ interface ArrayFieldSlots {
     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;
@@ -85,17 +62,8 @@ interface UseJsonFormOptions {
   /** 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> {
+interface JsonFormInstance<TSchema extends FormSchema = JsonFormSchema$1> {
   /** The Formisch form: pass it to Formisch's `<Form :of>`, or to any of its methods. */
   readonly form: FormStore<TSchema>;
   readonly definition: JsonForm;
@@ -103,7 +71,7 @@ interface JsonFormInstance<TSchema extends FormSchema = JsonFormSchema> {
   /** 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[];
+  readonly fields: readonly FieldNode$1[];
 }
 /** Any form `useJsonForm` returns, typed or not: what the components take. */
 type AnyJsonFormInstance = JsonFormInstance<FormSchema>;
@@ -118,7 +86,7 @@ export declare function useJsonForm(definition: JsonForm, options?: UseJsonFormO
  * 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>>;
+export declare function useJsonForm<TInput extends object, TOutput extends object = TInput>(definition: JsonForm, options?: UseJsonFormOptions): JsonFormInstance<TypedJsonFormSchema$1<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`.

package/dist/index.js

@@ -1,51 +1,6 @@
+import { allFields, coerceInput, createSchemaBuilder, dotPathOf, findField, isRequired, toFieldPath } from "@whatsaaaa/form-builder-schema";
 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({
@@ -79,7 +34,7 @@ const ArrayField = defineComponent({
 		const methods = {
 			add: () => insert(props.of.form, {
 				path: path(),
-				initialInput: itemInput(props.of.builder, props.node)
+				initialInput: props.of.builder.getItemInput(props.node.field)
 			}),
 			remove: (index) => remove(props.of.form, {
 				path: path(),
@@ -103,39 +58,6 @@ const ArrayField = defineComponent({
 		};
 	}
 });
-// 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({
@@ -161,7 +83,7 @@ const ValueField = defineComponent({
 	setup(props) {
 		const field = useField(() => props.of.form, () => ({ path: props.path }));
 		const setInput = (input) => {
-			field.input = coerceInput(input, props.node.kind, props.node.itemKind);
+			field.input = coerceInput(input, props.node);
 		};
 		return () => {
 			const fieldProps = {
@@ -178,7 +100,6 @@ const ValueField = defineComponent({
 		};
 	}
 });
-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) {
@@ -206,7 +127,7 @@ function renderFields(ctx, nodes, indexes) {
 }
 function renderField(ctx, node, indexes, position) {
 	const component = ctx.components[node.type];
-	const path = toPath(node.dataPath, indexes);
+	const path = toFieldPath(node.dataPath, indexes);
 	const key = node.field.name ?? `#${position}`;
 	switch (node.role) {
 		case "display": return h(component, {
@@ -235,11 +156,6 @@ function renderField(ctx, node, indexes, position) {
 		});
 	}
 }
-/** 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
@@ -262,7 +178,7 @@ const JsonField = defineComponent({
 		components: { type: Object }
 	},
 	setup(props) {
-		const node = findField(props.of.fields, props.path, true);
+		const node = findField(props.of.fields, props.path, { placed: true });
 		const ctx = {
 			of: props.of,
 			components: resolveComponents(props.components, props.of),
@@ -296,11 +212,11 @@ const JsonFields = defineComponent({
 	setup(props) {
 		const fields = props.of.fields;
 		const except = new Set(props.except);
-		for (const path of except) findField(fields, path, false);
+		for (const path of except) findField(fields, path);
 		const ctx = {
 			of: props.of,
 			components: resolveComponents(props.components, props.of),
-			skip: (node) => except.has(pathOf(node) ?? "")
+			skip: (node) => except.has(dotPathOf(node) ?? "")
 		};
 		const nodes = props.only ? onlyFields(fields, props.only) : fields;
 		checkComponents(ctx, nodes);
@@ -309,42 +225,9 @@ const JsonFields = defineComponent({
 });
 /** 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)));
+	const named = new Set(only.map((path) => findField(fields, path, { placed: 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();
@@ -360,7 +243,7 @@ function useJsonForm(definition, options = {}) {
 		definition,
 		builder,
 		components,
-		fields: fieldTree(builder, definition)
+		fields: builder.getFieldTree(definition)
 	};
 }
 export { JsonField, JsonFields, useJsonForm };

package/dist/index.js.map

@@ -1 +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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"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/array-field.ts","../src/value-field.ts","../src/render-fields.ts","../src/json-field.ts","../src/json-fields.ts","../src/use-json-form.ts"],"sourcesContent":["import { insert, move, remove, useFieldArray } from '@formisch/vue'\nimport type { FieldNode, FieldPath } from '@whatsaaaa/form-builder-schema'\nimport { type Component, defineComponent, h, type PropType, type VNode } from 'vue'\nimport type { ArrayFieldProps } from './field-components'\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: props.of.builder.getItemInput(props.node.field) 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 { useField } from '@formisch/vue'\nimport {\n  coerceInput,\n  type FieldNode,\n  type FieldPath,\n  isRequired,\n} from '@whatsaaaa/form-builder-schema'\nimport { type Component, defineComponent, h, type PropType } from 'vue'\nimport type { ValueFieldProps } from './field-components'\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) 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","import { type FieldNode, toFieldPath } from '@whatsaaaa/form-builder-schema'\nimport { type Component, h, type VNode } from 'vue'\nimport { ArrayField } from './array-field'\nimport type { FieldComponents } from './field-components'\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 = toFieldPath(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","import { findField } from '@whatsaaaa/form-builder-schema'\nimport { defineComponent, type PropType } from 'vue'\nimport type { FieldComponents } from './field-components'\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, { placed: 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 { allFields, dotPathOf, type FieldNode, findField } from '@whatsaaaa/form-builder-schema'\nimport { defineComponent, type PropType } from 'vue'\nimport type { FieldComponents } from './field-components'\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)\n\n    const ctx: RenderContext = {\n      of: props.of,\n      components: resolveComponents(props.components, props.of),\n      skip: (node) => except.has(dotPathOf(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, { placed: true })))\n  return [...allFields(fields)].filter((node) => named.has(node))\n}\n","import { type FormSchema, type FormStore, useForm, type ValidationMode } from '@formisch/vue'\nimport {\n  createSchemaBuilder,\n  type FieldNode,\n  type JsonForm,\n  type JsonFormSchema,\n  type SchemaBuilder,\n  type TypedJsonFormSchema,\n} from '@whatsaaaa/form-builder-schema'\nimport type { FieldComponents } from './field-components'\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/** 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: builder.getFieldTree(definition) }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whatsaaaa/form-builder-vue",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Render JSON form definitions with Formisch and your own Vue components.",
   "keywords": [
     "form",
@@ -33,7 +33,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@whatsaaaa/form-builder-schema": "^0.10.0"
+    "@whatsaaaa/form-builder-schema": "^0.12.0"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",