@sealcode/sealgen 0.19.5 → 0.19.6

package/lib/mount.js

@@ -50,7 +50,10 @@ function mount(router, url, mountable, use_dummy_app = false, file_manager = use
     handleHtmlPromise
   ];
   router.use(raw_url, ...args);
-  mountable.init();
+  router.use(raw_url, async (_ctx, next) => {
+    mountable.init(raw_url, router);
+    await next();
+  });
   router.get(raw_url.slice(0, -1), async (ctx, next) => {
     const url2 = ctx.URL;
     if (!url2.pathname.endsWith("/")) {

package/lib/page/list.js

@@ -1,10 +1,10 @@
-import { tempstream } from "tempstream";
-import { Page } from "./page.js";
-import { naturalNumbers, UrlWithNewParams } from "../utils/utils.js";
-import { makeHiddenInputs } from "../make-hidden-inputs.js";
 import qs from "qs";
+import { tempstream } from "tempstream";
 import { NumberField } from "../forms/fields/number.js";
 import { TextBasedSimpleField } from "../forms/fields/simple-form-field.js";
+import { makeHiddenInputs } from "../make-hidden-inputs.js";
+import { naturalNumbers, UrlWithNewParams } from "../utils/utils.js";
+import { Page } from "./page.js";
 const BasePagePropsShape = {};
 const DEFAULT_ITEMS_PER_PAGE = 12;
 const BaseListPageFields = {
@@ -38,8 +38,11 @@ class ListPage extends Page {
     this.filterFields = {};
     this.filterControls = [];
   }
-  init() {
-    super.init();
+  init(path, router) {
+    if (this.initialized) {
+      return;
+    }
+    super.init(path, router);
     for (const [, field] of Object.entries(this.filterFields)) {
       void field.init();
     }

package/lib/page/mountable-with-fields.js

@@ -6,17 +6,32 @@ import { Mountable } from "./mountable.js";
 class MountableWithFields extends Mountable {
   constructor() {
     super();
+    this.initialized = false;
     this.field_names_prefix = "";
     // useful for multiform, where many forms are merged into one and field assignment is made using the prefix
     this.form_id = "";
     if (!this.fields)
       this.fields = {};
   }
-  init() {
+  /** most routes should be setup using .mount(), but mount runs before
+         initialization so we don't yet have controls, app, etc ready for dynamic
+         routes **/
+  init(path, router) {
+    super.init(path, router);
+    if (this.initialized) {
+      return;
+    }
+    if (this.getFields) {
+      this.fields = this.getFields();
+    } else if (!this.fields) {
+      throw new Error("Fields not defined and getter not provided");
+    }
+    this.controls = this.getControls(this.fields);
     for (const [field_name, field] of Object.entries(this.fields)) {
       void field.init();
       field.setName(field_name);
     }
+    this.initialized = true;
   }
   makeFormControlContext(ctx, data, validate, field_name_prefix = this.field_names_prefix, form_id = this.form_id) {
     return new FormControlContext(

package/lib/page/mountable-with-fields.test.js

@@ -10,8 +10,8 @@ describe("mountable-with-fields", () => {
     new class extends Form {
       constructor() {
         super(...arguments);
-        this.fields = fields;
-        this.controls = [];
+        this.getFields = () => fields;
+        this.getControls = () => [];
       }
       async onSubmit(ctx, form_values) {
         const data = await this.getParsedValues(ctx);

package/lib/page/mountable.js

@@ -1,5 +1,5 @@
 class Mountable {
-  init() {
+  init(_path, _router) {
   }
 }
 export {

package/lib/page/page.js

@@ -7,7 +7,7 @@ class Page extends MountableWithFields {
   constructor() {
     super(...arguments);
     this.propsParser = new AllQueryParams();
-    this.controls = [];
+    this.getControls = () => [];
   }
   mount(router, path) {
     router.get(path, async (ctx) => {

package/lib/templates/form.js

@@ -3,13 +3,12 @@ const defaults = {
   postimport: `
          import { Fields } from "@sealcode/sealgen";
          import type {FormDataValue} from "@sealcode/sealgen";`,
-  fields: `
-           password: new Fields.Password(true),`,
-  controls: `
-		new Controls.SimpleInput(fields.password, {
+  get_fields: `()=>(<const>{ password: new Fields.Password(true) })`,
+  get_controls: `
+	()=><const>[new Controls.SimpleInput(fields.password, {
 			label: "Password:",
 			type: "password",
-}),`,
+})],`,
   validate_method: `async validateValues(
 		ctx: Context,
 		data: Record<string, FormDataValue>
@@ -43,28 +42,20 @@ async function formTemplate(action_name, _params = defaults) {
   const params = { ...defaults, ..._params };
   const content = `import type { Context } from "koa";
 import type { FormData } from "@sealcode/sealgen";
-import { Form,  Controls, fieldsToShape } from "@sealcode/sealgen";
+import { Form,  Controls } from "@sealcode/sealgen";
 import html from "src/back/html.js";
 
 ${params.postimport}
 
 export const actionName = "${action_name}";
 
-const fields = {
-    ${params.fields}
-};
-
-Form.initFieldNames(fields);
-
-export const ${action_name}Shape = fieldsToShape(fields);
+const getFields = ${params.get_fields};
 
-export default new (class ${action_name}Form extends Form<typeof fields, void> {
+export default new (class ${action_name}Form extends Form<ReturnType<typeof getFields>, void> {
 	defaultSuccessMessage = "Formularz wype\u0142niony poprawnie";
-	fields = fields;
+    getFields = getFields;
 
-	controls = [
-		${params.controls}
-	];
+    getControls = ${params.get_controls};
 
    ${params.other_methods}
 

package/lib/templates/shared/collection-create-form.js

@@ -4,10 +4,10 @@ import extract_fields_from_collection from "../../utils/extract-fields-from-coll
 import { wrapAttribute } from "../../utils/wrap-attributes.js";
 async function createItemFormTemplate(create_action_name, newfilefullpath, collection_name, list_action) {
   const collection_fields = await extract_fields_from_collection(collection_name);
-  const formFieldsVar = `${toPascalCase(collection_name)}FormFields`;
+  const formFieldsGetterVar = `get${toPascalCase(collection_name)}FormFields`;
   return formTemplate(create_action_name, {
     success_message: "Created!",
-    postimport: `import {${formFieldsVar}, get${toPascalCase(
+    postimport: `import {${formFieldsGetterVar}, get${toPascalCase(
       collection_name
     )}FormControls }from "./shared.js";
 
@@ -18,12 +18,12 @@ async function createItemFormTemplate(create_action_name, newfilefullpath, colle
 		import { ${list_action}URL } from "src/back/routes/urls.js";
 		import {tempstream} from "tempstream";
 `,
-    fields: `...${toPascalCase(collection_name)}FormFields`,
-    controls: `
+    get_fields: `get${toPascalCase(collection_name)}FormFields`,
+    get_controls: `(fields: ReturnType<typeof getFields>)=>[
                 new Controls.FormHeader("Create ${toPascalCase(
       collection_name
     )}"), 
-                ...get${toPascalCase(collection_name)}FormControls()`,
+                ...get${toPascalCase(collection_name)}FormControls(this.fields)]`,
     can_access: `canAccess = async (ctx: Context) => {
 			 const policy = ${toPascalCase(collection_name)}.getPolicy("create");
 			 const response = await policy.check(ctx.$context);
@@ -41,14 +41,14 @@ async function createItemFormTemplate(create_action_name, newfilefullpath, colle
 		{
 		${collection_fields.map(
       (field_info) => field_info.form_field.generateCreateValueGetter(field_info, {
-        form_field_types: formFieldsVar,
+        form_field_types: "FormFieldTypes",
         sealious_field: `fields${wrapAttribute(field_info.name)}`,
-        form_fields: "fields"
+        form_fields: "this.fields"
       })
     ).join(",\n")} 
 			});
 
-   		for(const field of Object.values(${formFieldsVar})){
+   		for(const field of Object.values(this.fields)){
 			// eslint-disable-next-line no-await-in-loop
             await field.postSealiousCreate(ctx, created, formData)
         }

package/lib/templates/shared/collection-edit-form.js

@@ -4,11 +4,11 @@ import extract_fields_from_collection from "../../utils/extract-fields-from-coll
 import { wrapAttribute } from "../../utils/wrap-attributes.js";
 async function editItemFormTemplate(edit_action_name, newfilefullpath, collection_name, list_action) {
   const collection_fields = await extract_fields_from_collection(collection_name);
-  const formFieldsVar = `${toPascalCase(collection_name)}FormFields`;
+  const formFieldsGetterVar = `get${toPascalCase(collection_name)}FormFields`;
   const collectionVar = `${toPascalCase(collection_name)}`;
   return formTemplate(edit_action_name, {
     success_message: "Changes saved!",
-    postimport: `import {${formFieldsVar}, get${toPascalCase(
+    postimport: `import {${formFieldsGetterVar}, get${toPascalCase(
       collection_name
     )}FormControls }from "../shared.js";
         import { ${collectionVar} } from "src/back/collections/collections.js";
@@ -17,12 +17,12 @@ async function editItemFormTemplate(edit_action_name, newfilefullpath, collectio
 		import type { FormDataValue } from "@sealcode/sealgen";
 		import type { CollectionInputWithAllKeys } from "sealious";
 `,
-    fields: `...${toPascalCase(collection_name)}FormFields`,
-    controls: `
+    get_fields: formFieldsGetterVar,
+    get_controls: `(fields: ReturnType<typeof getFields>)=>[
                 new Controls.FormHeader("Edit ${toPascalCase(
       collection_name
     )}"), 
-                ...get${toPascalCase(collection_name)}FormControls()`,
+                ...get${toPascalCase(collection_name)}FormControls(this.fields)]`,
     can_access: `canAccess = async (ctx: Context) => {
 			 const policy = ${toPascalCase(collection_name)}.getPolicy("edit");
 			 const response = await policy.check(ctx.$context);
@@ -54,7 +54,7 @@ async function editItemFormTemplate(edit_action_name, newfilefullpath, collectio
           sealious_field: `${collectionVar}.fields${wrapAttribute(
             field_info.name
           )}`,
-          form_fields: "fields"
+          form_fields: "this.fields"
         }
       )
     ).join(",\n")}
@@ -63,7 +63,7 @@ async function editItemFormTemplate(edit_action_name, newfilefullpath, collectio
 
                 await item.save(ctx.$context);
 
-				for(const field of Object.values(${formFieldsVar})){
+				for(const field of Object.values(this.fields)){
 				    // eslint-disable-next-line no-await-in-loop
 				await field.postSealiousEdit(ctx, item, formData)
 				}
@@ -79,7 +79,7 @@ async function editItemFormTemplate(edit_action_name, newfilefullpath, collectio
                return id
             }
         `,
-    get_initial_values: `async getInitialValues(ctx: Context): Promise<{ [key in keyof typeof fields]: FormDataValue | undefined }>  {
+    get_initial_values: `async getInitialValues(ctx: Context): Promise<{ [key in keyof typeof this.fields]: FormDataValue | undefined }>  {
                const id = await this.getID(ctx);
 
                const {
@@ -99,7 +99,7 @@ async function editItemFormTemplate(edit_action_name, newfilefullpath, collectio
 			   ${collection_fields.map(
       (field_info) => field_info.form_field.generateInitialValue(field_info, {
         form_field_types: "FieldTypes",
-        form_fields: "fields"
+        form_fields: "this.fields"
       })
     ).join(",\n")}
 			   };

package/lib/templates/shared/collection-list.js

@@ -121,7 +121,8 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 	typeof ${uppercase_collection},
 	typeof BaseListPageFields
 > {
-	fields = BaseListPageFields;
+	getFields = ()=>BaseListPageFields;
+	getControls = ()=>[];
 
 	async renderFilters(ctx: Context): Promise<FlatTemplatable> {
 		const query_params = qs.parse(ctx.search.slice(1));

package/lib/templates/shared/shared-crud-form-fields.js

@@ -12,12 +12,12 @@ ${Array.from(
       collection_fields.map(
         (field_info) => field_info.form_field.generateImportsForFieldList(field_info)
       ).flat().map(
-        ({ what, from, as }) => `import {${what}${as ? ` as ${as}` : ""} } from "${from}"`
+        ({ what, from, as, type }) => `import ${type ? "type " : ""}{${what}${as ? ` as ${as}` : ""} } from "${from}"`
       )
     ).values()
   ).join(";\n")}
 
-export const ${toPascalCase(collection_name)}FormFields = <const>{
+export const get${toPascalCase(collection_name)}FormFields = () => <const>{
 	${collection_fields.map((field_info) => {
     return `${field_info.name}: ${field_info.form_field.generateFieldDeclaration(field_info, {
       form_field_types: "Fields",
@@ -28,11 +28,11 @@ export const ${toPascalCase(collection_name)}FormFields = <const>{
   }).join(",\n")}
 };
 
-const fields = ${toPascalCase(collection_name)}FormFields 
+const getFields = get${toPascalCase(collection_name)}FormFields 
 
 export const get${toPascalCase(
     collection_name
-  )}FormControls: () => Controls.FormControl[] = () => [
+  )}FormControls: (fields: ReturnType<typeof getFields>) => Controls.FormControl[] = (fields) => [
 	${collection_fields.map(({ name }) => `fields${wrapAttribute(name)}.getControl()`).join(",\n")}
 ];
 `;

package/lib/utils/extract-fields-from-collection.js

@@ -36,6 +36,9 @@ for (const field_name in c.fields){
     }
     if(type == "single-reference"){
 		target = field.target_collection;
+    }
+	if(type == "item-draft"){
+		target = field.target_collection_name;
     }
     if(type == "deep-reverse-single-reference" || type =="reverse-single-reference"){
 		target = field.target_collection;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.19.5",
+	"version": "0.19.6",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"type": "module",

package/src/forms/controls/checkboxed-list-input.test.ts

@@ -42,8 +42,8 @@ describe("checkboxed-list", () => {
 				router,
 				"/",
 				new (class extends Form<typeof fields, unknown> {
-					fields = fields;
-					controls = [new CheckboxedListInput(fields.syllables)];
+					getFields = () => fields;
+					getControls = () => [new CheckboxedListInput(fields.syllables)];
 
 					async onSubmit(ctx: Context) {
 						received_values = await this.getParsedValues(ctx);
@@ -91,8 +91,8 @@ describe("checkboxed-list", () => {
 					router,
 					"/",
 					new (class extends Form<typeof fields, unknown> {
-						fields = fields;
-						controls = [new CheckboxedListInput(fields.syllables)];
+						getFields = () => fields;
+						getControls = () => [new CheckboxedListInput(fields.syllables)];
 
 						async onSubmit(ctx: Context) {
 							submit_called = true;
@@ -138,8 +138,8 @@ describe("checkboxed-list", () => {
 					router,
 					"/",
 					new (class extends Form<typeof fields, unknown> {
-						fields = fields;
-						controls = [new CheckboxedListInput(fields.syllables)];
+						getFields = () => fields;
+						getControls = () => [new CheckboxedListInput(fields.syllables)];
 
 						async onSubmit(ctx: Context) {
 							submit_called = true;
@@ -186,8 +186,8 @@ describe("checkboxed-list", () => {
 					router,
 					"/",
 					new (class extends Form<typeof fields, unknown> {
-						fields = fields;
-						controls = [new CheckboxedListInput(fields.syllables)];
+						getFields = () => fields;
+						getControls = () => [new CheckboxedListInput(fields.syllables)];
 
 						async onSubmit(ctx: Context) {
 							submit_called = true;
@@ -232,8 +232,10 @@ describe("checkboxed-list", () => {
 				router,
 				"/",
 				new (class extends Form<typeof fields, unknown> {
-					fields = fields;
-					controls = [new CheckboxedListInput(fields.syllables, { label: "ABC" })];
+					getFields = () => fields;
+					getControls = () => [
+						new CheckboxedListInput(fields.syllables, { label: "ABC" }),
+					];
 
 					async onSubmit(ctx: Context) {
 						// noop
@@ -283,8 +285,10 @@ describe("checkboxed-list", () => {
 				router,
 				"/",
 				new (class extends Form<typeof fields, unknown> {
-					fields = fields;
-					controls = [new CheckboxedListInput(fields.syllables, { label: "Letters" })];
+					getFields = () => fields;
+					getControls = () => [
+						new CheckboxedListInput(fields.syllables, { label: "Letters" }),
+					];
 
 					async onSubmit(ctx: Context) {
 						// noop

package/src/forms/controls/file.test.ts

@@ -41,8 +41,8 @@ describe("file-control", () => {
 				router,
 				"/",
 				new (class extends Form<typeof fields, unknown> {
-					fields = fields;
-					controls = [new Controls.File(fields.file)];
+					getFields = () => fields;
+					getControls = () => [new Controls.File(fields.file)];
 
 					async onSubmit(_ctx: Context) {
 						submit_called = true;

package/src/forms/controls/image.test.ts

@@ -41,8 +41,8 @@ describe("photo-control", () => {
 				router,
 				"/",
 				new (class extends Form<typeof fields, unknown> {
-					fields = fields;
-					controls = [new Image(fields.photo)];
+					getFields = () => fields;
+					getControls = () => [new Image(fields.photo)];
 
 					async onSubmit(ctx: Context) {
 						const data = await this.getParsedValues(ctx);
@@ -94,8 +94,8 @@ describe("photo-control", () => {
 				router,
 				"/",
 				new (class extends Form<typeof fields, unknown> {
-					fields = fields;
-					controls = [new Image(fields.photo)];
+					getFields = () => fields;
+					getControls = () => [new Image(fields.photo)];
 
 					async onSubmit(ctx: Context) {
 						submit_called = true;

package/src/forms/controls/single-reference.test.ts

@@ -41,8 +41,8 @@ describe("single-reference.test", () => {
 			form_file_path,
 			await formTemplate("SomeForm", {
 				postimport: `import {Comments} from "../collections/collections.js"; import {Fields} from "@sealcode/sealgen";`,
-				fields: `article: new Fields.CollectionField(true, Comments.fields.article),`,
-				controls: `new Controls.SingleReferenceDropdown(fields.article, {getLabel: item=>item.get("title")}),`,
+				get_fields: `()=>(<const>{article: new Fields.CollectionField(true, Comments.fields.article)})`,
+				get_controls: `(fields)=>[new Controls.SingleReferenceDropdown(fields.article, {getLabel: item=>item.get("title")})]`,
 				validate_method: "",
 				success_message: "Submit OK",
 			})

package/src/forms/fields/field.test.ts

@@ -39,8 +39,8 @@ describe("basic field", () => {
 				router,
 				"/",
 				new (class extends Form<typeof fields, unknown> {
-					fields = fields;
-					controls = [new SimpleInput(fields.text)];
+					getFields = () => fields;
+					getControls = () => [new SimpleInput(fields.text)];
 
 					async onSubmit(ctx: Context, data: FormData) {
 						received_values = await this.getParsedValues(ctx);
@@ -93,8 +93,8 @@ describe("basic field", () => {
 				router,
 				"/",
 				new (class extends Form<typeof fields, unknown> {
-					fields = fields;
-					controls = [new SimpleInput(fields.text)];
+					getFields = () => fields;
+					getControls = () => [new SimpleInput(fields.text)];
 
 					async onSubmit() {
 						//noop
@@ -135,8 +135,11 @@ describe("basic field", () => {
 				router,
 				"/",
 				new (class extends Form<typeof fields, unknown> {
-					fields = fields;
-					controls = [new SimpleInput(fields.text), new Checkbox(fields.checkbox)];
+					getFields = () => fields;
+					getControls = () => [
+						new SimpleInput(fields.text),
+						new Checkbox(fields.checkbox),
+					];
 
 					async onSubmit() {
 						submit_called = true;

package/src/forms/fields/field.ts

@@ -25,9 +25,8 @@ export type FormFieldValidationFn<ValueType> = (
 export type FieldParsedValue<T> = T extends FormField<infer R> ? R : never;
 
 export type GetPredicate<F extends FormField> =
-	F extends FormField<true>
-		? F["predicate"]
-		: F["predicate"] | typeof predicates.undefined;
+	F extends FormField<true> ? F["predicate"]
+	:	F["predicate"] | typeof predicates.undefined;
 
 // for quickly testing GetPredicate conditonally applying the undefined predicate:
 // const f = new SimpleFormField(true);
@@ -156,9 +155,8 @@ export abstract class FormField<
 		if (raw == undefined || raw == null || raw == "") {
 			return {
 				parsed: null,
-				message: this.required
-					? "empty value, but field is required"
-					: "",
+				message:
+					this.required ? "empty value, but field is required" : "",
 				raw,
 				...(validate ? { valid: !this.required } : {}),
 			};
@@ -262,13 +260,14 @@ export abstract class FormField<
 			vars.form_fields
 		}${wrapAttribute(field_info.name)}.sealiousValueToForm(ctx, item.get("${
 			field_info.name
-		}"))`;
+		}"), item)`;
 	}
 
 	generateImportsForFieldList(field_info: ExtractedFieldInfo): {
 		what: string;
 		from: string;
 		as?: string;
+		type?: boolean;
 	}[] {
 		return [];
 	}

package/src/forms/fields/fields.ts

@@ -15,13 +15,14 @@ export * from "./float.js";
 export * from "./html.js";
 export * from "./image.js";
 export * from "./int.js";
+export * from "./item-draft.js";
 export * from "./json.js";
 export * from "./markdown.js";
 export * from "./multiple-files.js";
 export * from "./number.js";
 export * from "./password.js";
-export * from "./phone-number.js";
 export * from "./phone-number-with-country-code.js";
+export * from "./phone-number.js";
 export * from "./pick-from-list-sealious.js";
 export * from "./pick-from-list.js";
 export * from "./regexp.js";

package/src/forms/fields/file.test.ts

@@ -41,8 +41,8 @@ describe("file field", () => {
 			router,
 			"/",
 			new (class extends Form<typeof fields, unknown> {
-				fields = fields;
-				controls = [new Image(fields.file)];
+				getFields = () => fields;
+				getControls = () => [new Image(fields.file)];
 
 				async onSubmit(ctx: Context) {
 					received_values = await this.getParsedValues(ctx);

package/src/forms/fields/get-field-for-sealious.ts

@@ -38,6 +38,7 @@ import { EnumMultipleSealious } from "./enum-multiple-sealious.js";
 import { URLField } from "./url.js";
 import { Image } from "./image.js";
 import { PhoneNumberWithCountryCode } from "./phone-number-with-country-code.js";
+import { ItemDraft } from "./item-draft.js";
 
 export type SealiousToFormField<T> =
 	T extends SealiousFieldTypes.Boolean ? BooleanField<false>
@@ -61,6 +62,8 @@ export type SealiousToFormField<T> =
 	: T extends SealiousFieldTypes.HTML ? HTML<false>
 	: T extends SealiousFieldTypes.Image ? Image<false>
 	: T extends SealiousFieldTypes.Int ? Int<false>
+	: T extends SealiousFieldTypes.ItemDraft<infer C extends Collection> ?
+		ItemDraft<C>
 	: T extends SealiousFieldTypes.JsonObject ? JSONField<false>
 	: T extends SealiousFieldTypes.JDD ?
 		TextBasedSimpleField<false, SimpleInput>
@@ -170,6 +173,9 @@ export function sealiousToFormField<SF extends SealiousField<any>>(
 	if (sealious_field instanceof SealiousFieldTypes.Int) {
 		return new Int(sealious_field.required) as SealiousToFormField<SF>;
 	}
+	if (sealious_field instanceof SealiousFieldTypes.ItemDraft) {
+		return new ItemDraft(sealious_field) as SealiousToFormField<SF>;
+	}
 	if (sealious_field instanceof SealiousFieldTypes.JsonObject) {
 		return new JSONField(
 			sealious_field.required
@@ -260,6 +266,8 @@ export async function sealiousFieldInfoToFormField(
 			return new Image(field_info.is_required);
 		case "int":
 			return new Int(field_info.is_required);
+		case "item-draft":
+			return new ItemDraft({ target_collection: { fields: {} } } as any);
 		case "json-object":
 			return new JSONField(field_info.is_required);
 		case "password":

package/src/forms/fields/hybrid.ts

@@ -0,0 +1,47 @@
+/* eslint @typescript-eslint/no-unsafe-argument: off, @typescript-eslint/no-explicit-any: off, @typescript-eslint/no-unsafe-member-access: off */
+import { Context } from "koa";
+import { Hybrid as HybridControl } from "../controls/hybrid.js";
+import { FormDataValue } from "../form-types.js";
+import { FieldParseResult, FormField } from "./field.js";
+
+export class Hybrid<Fields extends Record<string, FormField>> extends FormField<
+	true,
+	Record<string, unknown>
+> {
+	constructor(public subfields: Fields) {
+		super(true);
+	}
+
+	public getEmptyValue(): Record<string, unknown> {
+		return {};
+	}
+
+	async parse(
+		ctx: Context,
+		raw_value: FormDataValue
+	): Promise<FieldParseResult<Record<string, unknown>>> {
+		return {
+			parsable: true,
+			error: null,
+			parsed_value: Object.fromEntries(
+				await Promise.all(
+					Object.entries(this.subfields).map(
+						async ([key, subfield]) => [
+							key,
+							(
+								await subfield.getParsedValue(
+									ctx,
+									(raw_value as any)[key]
+								)
+							).parsed as FormDataValue,
+						]
+					)
+				)
+			) as Record<string, unknown>,
+		};
+	}
+
+	getControl(): HybridControl {
+		return new HybridControl(this, this.subfields);
+	}
+}