@sealcode/sealgen 0.8.31 → 0.8.33

package/src/forms/controls/derived-frame.ts

@@ -0,0 +1,92 @@
+import Router from "@koa/router";
+import { hasShape, predicates } from "@sealcode/ts-predicates";
+import { Context } from "koa";
+import { ParsedUrlQuery } from "querystring";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { makeSlug } from "../../utils/make-slug";
+import { FormField } from "../fields/field";
+import { Derived } from "./derived";
+import { FormControlContext } from "./form-control";
+
+export class DerivedFrame extends Derived<{
+	frame_id: string;
+	form_id: string;
+	field_name_prefix: string;
+}> {
+	constructor(
+		public frame_name: string,
+		fields: FormField[],
+		public generateFrameContent: (
+			ctx: FormControlContext,
+			args: ParsedUrlQuery
+		) => Promise<FlatTemplatable>,
+		// "a" is to make it a valid DOM id
+		public frame_id = "a" + makeSlug(frame_name)
+	) {
+		super(
+			fields,
+			async (values, consts) => /* HTML */ `<turbo-frame
+				id="${consts.frame_id}"
+				src="./${consts.frame_id}?${Object.entries({
+					...consts,
+					...(values || {}),
+				})
+					.map(([key, value]) => `${key}=${value}`)
+					.join("&")}"
+			></turbo-frame>`,
+			async (fctx) => ({
+				form_id: fctx.form_id,
+				field_name_prefix: fctx.field_name_prefix,
+				frame_id,
+				validate: fctx.validate,
+			})
+		);
+	}
+
+	renderBackendResponseFrame(_ctx: Context, content: FlatTemplatable) {
+		return tempstream/* HTML */ `<turbo-frame
+			${content ? "" : `src="${this.frame_id}"`}
+			id="${this.frame_id}"
+			target="_top"
+		>
+			${content || ""}
+		</turbo-frame>`;
+	}
+
+	mount(router: Router) {
+		router.get(this.frame_id, async (ctx) => {
+			const query = ctx.query;
+			if (
+				!hasShape(
+					{
+						field_name_prefix: predicates.string,
+						form_id: predicates.string,
+						validate: predicates.string,
+					},
+					query
+				)
+			) {
+				ctx.body = this.renderBackendResponseFrame(
+					ctx,
+					"Missing query params"
+				);
+				return;
+			}
+			ctx.body = this.renderBackendResponseFrame(
+				ctx,
+				await this.generateFrameContent(
+					new FormControlContext(
+						ctx,
+						ctx.query,
+						[],
+						query.field_name_prefix,
+						query.form_id,
+						query.validate === "true" ? true : false
+					),
+					ctx.query
+				)
+			);
+		});
+		return;
+	}
+}

package/src/forms/controls/derived.ts

@@ -1,10 +1,10 @@
 import { randomUUID } from "crypto";
 import { FlatTemplatable, tempstream } from "tempstream";
 import { FormField } from "../fields/field";
-import { FormControl } from "./form-control";
+import { FormControl, FormControlContext } from "./form-control";
 
 export class Derived<
-	Consts extends Record<string, unknown> | undefined
+	Consts extends Record<string, unknown | undefined>
 > extends FormControl {
 	role = <const>"decoration";
 
@@ -13,19 +13,24 @@ export class Derived<
 		public _render: (
 			values: Record<string, string>,
 			consts: Consts
-		) => string,
-		public consts: Consts
+		) => Promise<FlatTemplatable>,
+		public getConsts: (fctx: FormControlContext) => Promise<Consts>
 	) {
 		super();
 	}
 
-	render(): FlatTemplatable {
-		const id = "A" + randomUUID(); // the A makes it always a valid id, as it cannot start with a number
+	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
+		// the A makes it always a valid id, as it cannot start with a number
+		const id = "A" + randomUUID();
+
+		const consts = this.getConsts(fctx);
+
+		const frontend_side_refresh_code = `render(getValues(), consts).then(result=>document.querySelector("#${id}").innerHTML=result)`;
 		return tempstream/* HTML */ `<div>
 			<script>
 				(function () {
 					const consts = ${"{" +
-					Object.entries(this.consts || {})
+					Object.entries((await consts) || {})
 						.map(([key, value]) => {
 							return `"${key}": ${
 								typeof value === "object"
@@ -61,24 +66,20 @@ export class Derived<
 						form_container
 							.querySelectorAll(\`input[name="\${field_name}"]\`)
 							.forEach((input) => {
-								input.onchange = () => {
-									document.querySelector("#${id}").innerHTML =
-										render(getValues(), consts);
-								};
+								input.addEventListener("change", () => {
+									${frontend_side_refresh_code};
+								});
 							});
 					}
 					${JSON.stringify(
 						this.fields.map((field) => field.name)
 					)}.forEach(setupWatcher);
-					setTimeout(
-						() =>
-							(document.querySelector("#${id}").innerHTML =
-								render(getValues(), consts)),
-						0
-					);
+					setTimeout(() => {
+						${frontend_side_refresh_code};
+					}, 0);
 				})();
 			</script>
-			<div id="${id}">${this._render({}, this.consts)}</div>
+			<div id="${id}">${this._render({}, await consts)}</div>
 		</div>`;
 	}
 }

package/src/forms/controls/dropdown.ts

@@ -1,38 +1,40 @@
 import { Context } from "koa";
 import { FlatTemplatable, tempstream } from "tempstream";
 import { attribute } from "../../sanitize";
-import { PickFromListField } from "../fields/field";
+import { FormField, PickFromListField } from "../fields/field";
 import { FormDataValue } from "../form";
+import { FormControlContext } from "./form-control";
 import { SimpleInput } from "./simple-input";
 
-export class Dropdown extends SimpleInput<string | null> {
+export type DropdownOptions = {
+	label: string;
+	autosubmit?: boolean;
+	autocomplete?: boolean;
+};
+
+export type DropdownOption = { value: string; label: string };
+
+export class FreeformDropdown extends SimpleInput<string | null> {
 	constructor(
-		public field: PickFromListField<boolean>,
-		public options: {
-			label: string;
-			autosubmit?: boolean;
-			autocomplete?: boolean;
-		} = {
+		public field: FormField<boolean, string | null>,
+		public _generateOptions: (ctx: Context) => Promise<DropdownOption[]>,
+		public options: DropdownOptions = {
 			label: field.name,
 			autosubmit: false,
 			autocomplete: true,
 		}
 	) {
-		super(field);
+		super(field, options);
+	}
+
+	async generateOptions(ctx: Context): Promise<DropdownOption[]> {
+		return this._generateOptions(ctx);
 	}
 
 	async getInputAttributes(
-		ctx: Context,
-		data: Record<string, FormDataValue>,
-		field_prefix: string,
-		form_id: string
+		fctx: FormControlContext
 	): Promise<Record<string, string | boolean>> {
-		const original = await super.getInputAttributes(
-			ctx,
-			data,
-			field_prefix,
-			form_id
-		);
+		const original = await super.getInputAttributes(fctx);
 		return {
 			...original,
 			...Object.fromEntries([
@@ -58,18 +60,28 @@ export class Dropdown extends SimpleInput<string | null> {
 		return /* HTML */ tempstream`<select ${attributes_str}>
 			${
 				// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-				Promise.resolve(this.field.generateOptions(ctx)).then(
-					(options) =>
-						Object.entries(options).map(
-							([value, text]) =>
-								`<option value="${attribute(value)}" ${
-									(value || "") == picked_value
-										? "selected"
-										: ""
-								}>${text}</option>`
-						)
+				Promise.resolve(this.generateOptions(ctx)).then((options) =>
+					options.map(
+						({ value, label }) =>
+							`<option value="${attribute(value)}" ${
+								(value || "") == picked_value ? "selected" : ""
+							}>${label}</option>`
+					)
 				)
 			}
 		</select>`;
 	}
 }
+
+export class Dropdown extends FreeformDropdown {
+	constructor(
+		public field: PickFromListField<boolean>,
+		public options: DropdownOptions = {
+			label: field.name,
+			autosubmit: false,
+			autocomplete: true,
+		}
+	) {
+		super(field, (ctx) => field.generateOptions(ctx), options);
+	}
+}

package/src/forms/controls/editable-collection-subset.ts

@@ -1,9 +1,8 @@
-import { Context } from "koa";
 import { FlatTemplatable, tempstream } from "tempstream";
 import { attribute } from "../../sanitize";
 import { PickFromListField } from "../fields/field";
-import { FormDataValue } from "../form";
 import { FormFieldControl } from "./controls";
+import { FormControlContext } from "./form-control";
 
 /**
  * This control has own forms in it so if you want to use it you
@@ -22,15 +21,15 @@ export class EditableCollectionSubset extends FormFieldControl {
 		super([field]);
 	}
 
-	async render(
-		ctx: Context,
-		data: Record<string, FormDataValue>
-	): Promise<FlatTemplatable> {
-		const { parsed: values } = await this.field.getValue(ctx, data);
+	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
+		const { parsed: values } = await this.field.getValue(
+			fctx.ctx,
+			fctx.data
+		);
 
 		return tempstream/* HTML */ `<div>
 			<ul>
-				${Promise.resolve(this.field.generateOptions(ctx)).then(
+				${Promise.resolve(this.field.generateOptions(fctx.ctx)).then(
 					(options) =>
 						Object.entries(options)
 							.filter(([value]) =>
@@ -41,7 +40,7 @@ export class EditableCollectionSubset extends FormFieldControl {
 									<li>
 										<form
 											method="POST"
-											action="${ctx.path}"
+											action="${fctx.ctx.path}"
 										>
 											<span>${text}</span>
 											<input
@@ -66,23 +65,24 @@ export class EditableCollectionSubset extends FormFieldControl {
 							)
 				)}
 			</ul>
-			<form method="POST" action="${ctx.path}">
+			<form method="POST" action="${fctx.ctx.path}">
 				<select name="${this.field.name}">
-					${Promise.resolve(this.field.generateOptions(ctx)).then(
-						(options) =>
-							Object.entries(options)
-								.filter(
-									([value]) =>
-										!(values || ([] as string[])).includes(
-											value
-										)
-								)
-								.map(
-									([value, text]) =>
-										`<option value="${attribute(
-											value
-										)}">${text}</option>`
-								)
+					${Promise.resolve(
+						this.field.generateOptions(fctx.ctx)
+					).then((options) =>
+						Object.entries(options)
+							.filter(
+								([value]) =>
+									!(values || ([] as string[])).includes(
+										value
+									)
+							)
+							.map(
+								([value, text]) =>
+									`<option value="${attribute(
+										value
+									)}">${text}</option>`
+							)
 					)}
 				</select>
 				<input type="hidden" name="${this.actionname}" value="select" />

package/src/forms/controls/field-group.ts

@@ -1,7 +1,7 @@
 import { Context } from "koa";
 import { FlatTemplatable, tempstream } from "tempstream";
 import { FormDataValue, FormMessage } from "../form";
-import { FormControl } from "./form-control";
+import { FormControl, FormControlContext } from "./form-control";
 import { FormFieldControl } from "./form-field-control";
 
 export class FieldGroup extends FormFieldControl {
@@ -40,14 +40,7 @@ export class FieldGroup extends FormFieldControl {
 		return `class="field-group__label"`;
 	}
 
-	async render(
-		ctx: Context,
-		data: Record<string, FormDataValue>,
-		messages: FormMessage[],
-		field_prefix: string,
-		form_id: string,
-		show_field_errors: boolean
-	): Promise<FlatTemplatable> {
+	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
 		const { label, classes } = this.options;
 
 		return tempstream/* HTML */ `
@@ -67,16 +60,7 @@ export class FieldGroup extends FormFieldControl {
 				</div>
 				${this.preFields()}
 				<div class="field-group__fields">
-					${this.controls.map((control) =>
-						control.render(
-							ctx,
-							data,
-							messages,
-							field_prefix,
-							form_id,
-							show_field_errors
-						)
-					)}
+					${this.controls.map((control) => control.render(fctx))}
 				</div>
 				${this.postFields()}
 			</div>

package/src/forms/controls/file.ts

@@ -2,6 +2,7 @@ import { Context } from "koa";
 import { FlatTemplatable, tempstream } from "tempstream";
 import { FileContainer } from "../fields/file";
 import { FormDataValue } from "../form";
+import { FormControlContext } from "./form-control";
 import { SimpleInput } from "./simple-input";
 
 export class File extends SimpleInput<FileContainer> {
@@ -10,7 +11,7 @@ export class File extends SimpleInput<FileContainer> {
 	}
 
 	async renderFilePreview(
-		ctx: Context,
+		_ctx: Context,
 		file_data: { id?: string; filename?: string } | null
 	): Promise<FlatTemplatable> {
 		return file_data?.filename || "";
@@ -32,18 +33,10 @@ export class File extends SimpleInput<FileContainer> {
 	}
 
 	async getInputAttributes(
-		ctx: Context,
-		data: Record<string, FormDataValue>,
-		field_prefix: string,
-		form_id: string
+		fctx: FormControlContext
 	): Promise<Record<string, string | boolean>> {
-		const original = await super.getInputAttributes(
-			ctx,
-			data,
-			field_prefix,
-			form_id
-		);
-		const { parsed } = await this.field.getValue(ctx, data);
+		const original = await super.getInputAttributes(fctx);
+		const { parsed } = await this.field.getValue(fctx.ctx, fctx.data);
 		return {
 			...original,
 			name: this.field.name + "[new]",

package/src/forms/controls/form-control.ts

@@ -3,14 +3,20 @@ import { Context } from "koa";
 import { FlatTemplatable } from "tempstream";
 import { FormDataValue, FormMessage } from "../form";
 
+export class FormControlContext {
+	constructor(
+		public ctx: Context,
+		public data: Record<string, FormDataValue>,
+		public messages: FormMessage[],
+		public field_name_prefix: string,
+		public form_id: string,
+		public validate: boolean
+	) {}
+}
+
 export abstract class FormControl {
 	abstract render(
-		ctx: Context,
-		data: Record<string, FormDataValue>,
-		messages: FormMessage[],
-		field_name_prefix: string,
-		form_id: string,
-		validate: boolean
+		fctx: FormControlContext
 	): FlatTemplatable | Promise<FlatTemplatable>;
 	abstract role: "input" | "decoration" | "messages" | "submit";
 

package/src/forms/controls/form-field-control.ts

@@ -2,7 +2,7 @@ import { Context } from "koa";
 import { FlatTemplatable } from "tempstream";
 import { FormField } from "../fields/field";
 import { FieldValueType, FormDataValue } from "../form";
-import { FormControl } from "./form-control";
+import { FormControl, FormControlContext } from "./form-control";
 
 export type FormFieldsToTypes<FormFields extends readonly FormField[]> = {
 	[Index in keyof FormFields]: FormFields[Index] extends FormField
@@ -17,11 +17,6 @@ export abstract class FormFieldControl extends FormControl {
 	}
 
 	abstract render(
-		ctx: Context,
-		data: Record<string, FormDataValue>,
-		messages: [],
-		field_name_prefix: string,
-		form_id: string,
-		validate: boolean
+		fctx: FormControlContext
 	): FlatTemplatable | Promise<FlatTemplatable>;
 }

package/src/forms/controls/form-header.ts

@@ -1,16 +1,19 @@
 import { Context } from "koa";
 import { FormControl } from "./controls";
+import { FormControlContext } from "./form-control";
 
 export class FormHeader extends FormControl {
 	role = <const>"decoration";
 	constructor(
 		public text: string,
-		public isVisible: (ctx: Context) => Promise<boolean> = async () => true
+		public isVisible: (
+			fctx: FormControlContext
+		) => Promise<boolean> = async () => true
 	) {
 		super();
 	}
-	async render(ctx: Context) {
-		const isVsbl = await this.isVisible(ctx);
+	async render(fctx: FormControlContext) {
+		const isVsbl = await this.isVisible(fctx);
 		return isVsbl ? `<h2>${this.text}</h2>` : "";
 	}
 }

package/src/forms/controls/hidden-input.ts

@@ -3,6 +3,7 @@ import { FlatTemplatable, tempstream } from "tempstream";
 import { attribute } from "../../sanitize";
 import { FormField } from "../fields/field";
 import { FormDataValue } from "../form";
+import { FormControlContext } from "./form-control";
 import { FormFieldControl } from "./form-field-control";
 
 export class HiddenInput extends FormFieldControl {
@@ -10,13 +11,12 @@ export class HiddenInput extends FormFieldControl {
 		super([field]);
 	}
 
-	async render(
-		ctx: Context,
-		data: Record<string, FormDataValue>
-	): Promise<FlatTemplatable> {
-		const { raw } = await this.field.getValue(ctx, data);
+	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
+		const { raw } = await this.field.getValue(fctx.ctx, fctx.data);
 		return tempstream`<input type="hidden" name="${
 			this.field.name
-		}" value="${attribute((raw || "").toString())}">`;
+		}" value="${attribute((raw || "").toString())}" form="${
+			fctx.form_id
+		}">`;
 	}
 }

package/src/forms/controls/html.ts

@@ -2,9 +2,10 @@ import { Context } from "koa";
 import { FlatTemplatable } from "tempstream";
 import { FormDataValue, FormMessage } from "../form";
 import { FormControl } from "./controls";
+import { FormControlContext } from "./form-control";
 
 type Renderer =
-	| ((ctx: Context, form_id: string) => FlatTemplatable)
+	| ((fctx: FormControlContext) => FlatTemplatable)
 	| FlatTemplatable;
 
 export class HTML extends FormControl {
@@ -26,18 +27,12 @@ export class HTML extends FormControl {
 		}
 	}
 
-	async render(
-		ctx: Context,
-		_data: Record<string, FormDataValue>,
-		_messages: FormMessage[],
-		_field_name_prefix: string,
-		form_id: string
-	): Promise<FlatTemplatable> {
+	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
 		if (typeof this.renderer === "string") {
 			return this.renderer;
 		}
 		return typeof this.renderer == "function"
-			? this.renderer(ctx, form_id)
+			? this.renderer(fctx)
 			: this.renderer;
 	}
 }

package/src/forms/controls/multiple-files.ts

@@ -9,10 +9,10 @@ import { Context } from "koa";
 import { inputWrapper } from "../../utils/input-wrapper";
 import { FlatTemplatable, tempstream } from "tempstream";
 import { MultipleFiles as MultipleFilesField } from "../fields/multiple-files";
-import { FormDataValue } from "../form";
 import { FormFieldControl } from "./form-field-control";
 import { is, predicates } from "@sealcode/ts-predicates";
 import { renderAttributes } from "../../utils/render-attributes";
+import { FormControlContext } from "./form-control";
 
 export type MultipleFilesOptions = {
 	label?: string;
@@ -122,14 +122,9 @@ export class MultipleFiles extends FormFieldControl {
 	}
 
 	render(
-		ctx: Context,
-		_data: Record<string, FormDataValue>,
-		_messages: [],
-		field_name_prefix: string,
-		form_id: string,
-		validate: boolean
+		fctx: FormControlContext
 	): FlatTemplatable | Promise<FlatTemplatable> {
-		return this.renderFrame(ctx, "");
+		return this.renderFrame(fctx.ctx, "");
 	}
 
 	getReferencingCollection() {
@@ -141,7 +136,7 @@ export class MultipleFiles extends FormFieldControl {
 	}
 
 	getFileField(): SealiousField | null {
-		for (const [field_name, field] of Object.entries(
+		for (const [_, field] of Object.entries(
 			this.getReferencingCollection().fields
 		)) {
 			if (field.handles_large_data) {
@@ -165,7 +160,7 @@ export class MultipleFiles extends FormFieldControl {
 	}
 
 	async renderFileItemPreview(
-		fileItem: CollectionItem,
+		_fileItem: CollectionItem,
 		file: SealiousFile
 	): Promise<FlatTemplatable> {
 		return file.filename || "no filename";

package/src/forms/controls/number.ts

@@ -2,6 +2,7 @@ import { Context } from "koa";
 import { FlatTemplatable } from "tempstream";
 import { FormField, NumberField } from "../fields/field";
 import { FormDataValue } from "../form";
+import { FormControlContext } from "./form-control";
 import { SimpleInput, SimpleInputOptions } from "./simple-input";
 
 export type NumberOptions = SimpleInputOptions & Partial<{ step: number }>;
@@ -18,17 +19,9 @@ export class Number extends SimpleInput<number | null> {
 	}
 
 	async getInputAttributes(
-		ctx: Context,
-		data: Record<string, FormDataValue>,
-		field_prefix: string,
-		form_id: string
+		fctx: FormControlContext
 	): Promise<Record<string, string | boolean>> {
-		const original = await super.getInputAttributes(
-			ctx,
-			data,
-			field_prefix,
-			form_id
-		);
+		const original = await super.getInputAttributes(fctx);
 		return {
 			...original,
 			...Object.fromEntries([

package/src/forms/controls/photo.ts

@@ -5,7 +5,7 @@ import { File as SealiousFile } from "sealious";
 import { FileContainer, FormField } from "../fields/field";
 import { SimpleInputOptions } from "./simple-input";
 import KoaResponsiveImageRouter from "koa-responsive-image-router";
-import { FormDataValue } from "../form";
+import { FormControlContext } from "./form-control";
 
 export class Photo extends File {
 	constructor(
@@ -44,19 +44,12 @@ export class Photo extends File {
 		</div>`;
 	}
 
-	async getInputAttributes(
-		ctx: Context,
-		data: Record<string, FormDataValue>,
-		field_prefix: string,
-		form_id: string
-	) {
-		const original = (await super.getInputAttributes(
-			ctx,
-			data,
-			field_prefix,
-			form_id
-		)) as Record<string, string | boolean>;
-		const { parsed } = await this.field.getValue(ctx, data);
+	async getInputAttributes(fctx: FormControlContext) {
+		const original = (await super.getInputAttributes(fctx)) as Record<
+			string,
+			string | boolean
+		>;
+		const { parsed } = await this.field.getValue(fctx.ctx, fctx.data);
 		return {
 			...original,
 			accept: "image/*",