@sealcode/sealgen 0.6.1 → 0.7.0

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

@@ -1,5 +1,7 @@
 import { Context } from "koa";
+import { FlatTemplatable } from "tempstream";
 import { attribute } from "../../sanitize";
+import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper";
 import { FormField } from "../fields/field";
 import { FormDataValue } from "../form";
 import { FormFieldControl } from "./controls";
@@ -37,8 +39,11 @@ export class SimpleInput extends FormFieldControl {
 
 	async render<Fields extends Record<string, FormField>>(
 		ctx: Context,
-		data: Record<string, FormDataValue>
-	) {
+		data: Record<string, FormDataValue>,
+		_: unknown[],
+		field_prefix: string,
+		form_id: string
+	): Promise<FlatTemplatable> {
 		const id = this.options.id || this.field.name;
 		const label = this.options.label || this.field.name;
 		const type = this.options.type || "text";
@@ -52,16 +57,14 @@ export class SimpleInput extends FormFieldControl {
 		const readonly = this.options.readonly || false;
 		const required = this.field.required;
 
-		return /* HTML */ `<div
-			class="form-input form-input__wrapper ${required
-				? "form-input--required"
-				: ""}"
-		>
+		return /* HTML */ inputWrapper(
+			[id, type, getRequiredClass(required)],
+			`
 			<label for="${id}">${label}</label>
 			<input
 				id="${id}"
 				type="${type}"
-				name="${this.field.name}"
+				name="${field_prefix}${this.field.name}"
 				value="${attribute(
 					!valid && raw
 						? raw.toString()
@@ -70,15 +73,19 @@ export class SimpleInput extends FormFieldControl {
 						  ((parsed as any)?.toString() as string) || ""
 						: ""
 				)}"
+				${form_id ? `form="${form_id}"` : ""}
 				placeholder="${placeholder}"
 				${readonly ? "readonly" : ""}
 				${required ? "required" : ""}
 				${!this.options.autocomplete ? `autocomplete="off"` : ""}
 				${this.options.step ? `step="${this.options.step}"` : ""}
 			/>
-			${~valid && !this.options.hide_errors
-				? `<div class="input__error">${message}</div>`
-				: ""}
-		</div>`;
+			${
+				~valid && !this.options.hide_errors
+					? `<div class="input__error">${message}</div>`
+					: ""
+			}
+`
+		);
 	}
 }

package/src/forms/controls/textarea.ts

@@ -1,6 +1,7 @@
 import { Context } from "koa";
 import { FlatTemplatable, tempstream } from "tempstream";
 import { attribute } from "../../sanitize";
+import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper";
 import { FormField } from "../fields/field";
 import { FormDataValue } from "../form";
 import { FormFieldControl } from "./form-field-control";
@@ -18,20 +19,20 @@ export class Textarea extends FormFieldControl {
 		data: Record<string, FormDataValue>
 	): Promise<FlatTemplatable> {
 		const { raw } = await this.field.getValue(ctx, data);
-		return tempstream/* HTML */ `<div
-			class="form-input form-input__wrapper"
-		>
-			<label for="${this.field.name}"
-				>${this.options.label || this.field.name}</label
-			>
-			<textarea
-				name="${this.field.name}"
-				id="${this.field.name}"
-				rows="${this.options.rows || 5}"
-				cols="${this.options.cols || 33}"
-			>
+		const { name, required } = this.field;
+		return inputWrapper(
+			[name, getRequiredClass(required)],
+			/* HTML */ ` <label for="${name}"
+					>${this.options.label || name}</label
+				>
+				<textarea
+					name="${name}"
+					id="${name}"
+					rows="${this.options.rows || 5}"
+					cols="${this.options.cols || 33}"
+				>
 ${attribute((raw || "").toString())}</textarea
-			>
-		</div>`;
+				>`
+		);
 	}
 }

package/src/forms/form.ts

@@ -1,6 +1,6 @@
 import { Context } from "koa";
 import Router from "@koa/router";
-import { FlatTemplatable, Templatable, tempstream } from "tempstream";
+import { FlatTemplatable, tempstream } from "tempstream";
 import {
 	hasFieldOfType,
 	hasShape,
@@ -8,7 +8,11 @@ import {
 	predicates,
 } from "@sealcode/ts-predicates";
 import { FormField } from "./fields/field";
-import { Fields, Mountable, PageErrorMessage } from "../page/mountable";
+import {
+	Fields,
+	MountableWithFields,
+	PageErrorMessage,
+} from "../page/mountable-with-fields";
 
 export type FormDataPrimitive = string | string[] | undefined;
 export type FormDataValue =
@@ -30,9 +34,14 @@ export type FormData<Fieldnames extends string = string> = {
 	messages: FormMessage[];
 };
 
-export abstract class Form<F extends Fields> extends Mountable<F> {
+export type FormReaction =
+	| { action: "stay"; content: FlatTemplatable; messages?: FormMessage[] }
+	| { action: "redirect"; url: string; messages?: FormMessage[] };
+
+export abstract class Form<F extends Fields> extends MountableWithFields<F> {
 	defaultSuccessMessage = "Done";
 	submitButtonText = "Wyślij";
+	action = "./";
 
 	async canAccess(
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -48,40 +57,54 @@ export abstract class Form<F extends Fields> extends Mountable<F> {
 		return tempstream/* HTML */ `<div>${error.message}</div>`;
 	}
 
+	makeSubmitButton(): FlatTemplatable {
+		return /* HTML */ `<input
+			type="submit"
+			value="${this.submitButtonText}"
+			formaction="${this.action}"
+			${this.form_id ? `form="${this.form_id}"` : ""}
+		/>`;
+	}
+
 	async render(ctx: Context, data: FormData): Promise<FlatTemplatable> {
-		return tempstream/* HTML */ `${this.makeFormTag()} ${
-			!this.controls.some((control) => control.role == "messages")
-				? this.renderMessages(ctx, data)
-				: ""
-		} ${this.renderControls(ctx, data)}<input type="submit" value="${
-			this.submitButtonText
-		}"/></form>`;
+		return tempstream/* HTML */ `${this.makeOpenFormTag()}
+		${!this.controls.some((control) => control.role == "messages")
+			? this.renderMessages(ctx, data)
+			: ""}
+		${this.renderControls(ctx, data)} ${this.makeSubmitButton()}
+		${this.makeCloseFormTag()}`;
 	}
 
-	public makeFormTag(): FlatTemplatable {
-		return `<form method="POST" action="./">`;
+	public makeOpenFormTag(): FlatTemplatable {
+		return `<form method="POST" action="${this.action}">`;
+	}
+
+	public makeCloseFormTag(): FlatTemplatable {
+		return `</form>`;
 	}
 
 	public async onValuesInvalid(
 		ctx: Context,
 		form_messages: FormMessage[]
-	): Promise<void> {
-		ctx.status = 422;
-		ctx.body = await this.render(ctx, {
-			raw_values: ctx.$body,
-
-			messages: form_messages.length
-				? form_messages
-				: [{ type: "error", text: "Some fields are invalid" }],
-		});
+	): Promise<FormReaction> {
+		const messages = form_messages.length
+			? form_messages
+			: [<const>{ type: "error", text: "Some fields are invalid" }];
+		return {
+			action: "stay",
+			content: await this.render(ctx, {
+				raw_values: this.extractRawValues(ctx),
+				messages,
+			}),
+			messages,
+		};
 	}
 
 	public async onError(
 		ctx: Context,
 		data: FormData,
 		error: unknown
-	): Promise<void> {
-		ctx.status = 422;
+	): Promise<FormReaction> {
 		let error_message = "Unknown error has occured";
 		if (
 			is(error, predicates.object) &&
@@ -89,10 +112,15 @@ export abstract class Form<F extends Fields> extends Mountable<F> {
 		) {
 			error_message = error.message;
 		}
-		ctx.body = await this.render(ctx, {
-			raw_values: data.raw_values,
-			messages: [{ type: "error", text: error_message }],
-		});
+		const messages = [<const>{ type: "error", text: error_message }];
+		return {
+			action: "stay",
+			content: await this.render(ctx, {
+				raw_values: data.raw_values,
+				messages: [],
+			}),
+			messages,
+		};
 	}
 
 	public abstract onSubmit(
@@ -100,12 +128,66 @@ export abstract class Form<F extends Fields> extends Mountable<F> {
 		data: FormData
 	): void | Promise<void>;
 
-	public async onSuccess(ctx: Context, data: FormData): Promise<void> {
-		ctx.body = await this.render(ctx, {
-			raw_values: data.raw_values,
-			messages: [{ type: "success", text: this.defaultSuccessMessage }],
-		});
-		ctx.status = 422;
+	public async onSuccess(
+		ctx: Context,
+		data: FormData
+	): Promise<FormReaction> {
+		const messages = [
+			<const>{ type: "success", text: this.defaultSuccessMessage },
+		];
+		return {
+			action: "stay",
+			content: await this.render(ctx, {
+				raw_values: data.raw_values,
+				messages,
+			}),
+			messages,
+		};
+	}
+
+	async handlePost(ctx: Context): Promise<FormReaction> {
+		const { valid, form_messages } = await this.validate(
+			ctx,
+			this.extractRawValues(ctx)
+		);
+		if (!valid) {
+			return this.onValuesInvalid(ctx, form_messages);
+		}
+		try {
+			ctx.status = 303;
+			await this.onSubmit(ctx, {
+				raw_values: this.extractRawValues(ctx),
+				messages: [],
+			});
+			return this.onSuccess(ctx, {
+				raw_values: this.extractRawValues(ctx),
+				messages: [],
+			});
+		} catch (e: unknown) {
+			// eslint-disable-next-line no-console
+			console.dir(e, { depth: 5 });
+			const message =
+				is(e, predicates.object) &&
+				hasFieldOfType(e, "message", predicates.string)
+					? e?.message
+					: is(e, predicates.string)
+					? e
+					: "Wystąpił błąd";
+
+			return this.onError(
+				ctx,
+				{
+					raw_values: this.extractRawValues(ctx),
+					messages: [
+						{
+							type: "error",
+							text: message,
+						},
+					],
+				},
+				e
+			);
+		}
 	}
 
 	public mount(router: Router, path: string): void {
@@ -124,54 +206,18 @@ export abstract class Form<F extends Fields> extends Mountable<F> {
 		router.get(path, async (ctx) => {
 			ctx.type = "html";
 			ctx.body = await this.render(ctx, {
-				raw_values: ctx.$body,
+				raw_values: this.extractRawValues(ctx),
 				messages: [],
 			});
 		});
 		router.post(path, async (ctx) => {
-			const { valid, form_messages } = await this.validate(
-				ctx,
-				ctx.$body
-			);
-			if (!valid) {
-				await this.onValuesInvalid(ctx, form_messages);
-				return;
-			}
-			try {
-				ctx.status = 303;
-				await this.onSubmit(ctx, {
-					raw_values: ctx.$body,
-					messages: [],
-				});
-				await this.onSuccess(ctx, {
-					raw_values: ctx.$body,
-					messages: [],
-				});
-			} catch (e: unknown) {
-				// eslint-disable-next-line no-console
-				console.dir(e, { depth: 5 });
-				const message =
-					is(e, predicates.object) &&
-					hasFieldOfType(e, "message", predicates.string)
-						? e?.message
-						: is(e, predicates.string)
-						? e
-						: "Wystąpił błąd";
-
+			const reaction = await this.handlePost(ctx);
+			if (reaction.action == "stay") {
 				ctx.status = 422;
-				await this.onError(
-					ctx,
-					{
-						raw_values: ctx.$body,
-						messages: [
-							{
-								type: "error",
-								text: message,
-							},
-						],
-					},
-					e
-				);
+				ctx.body = reaction.content;
+			} else if (reaction.action == "redirect") {
+				ctx.status = 303;
+				ctx.redirect(reaction.url);
 			}
 		});
 	}

package/src/forms/multiform.ts

@@ -0,0 +1,211 @@
+import Router from "@koa/router";
+import { is, predicates } from "@sealcode/ts-predicates";
+import { Context } from "koa";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { Form, FormDataValue, FormMessage } from "..";
+import { Fields, MountableWithFields } from "../page/mountable-with-fields";
+import { attribute } from "../sanitize";
+
+const FIELD_PREFIX_SEPARATOR = "___";
+
+export class Multiform extends MountableWithFields {
+	controls = [];
+	public name: string;
+	public forms: Record<string, Form<Fields>>;
+
+	init(): void {
+		super.init();
+		for (const [key, form] of Object.entries(this.forms)) {
+			if (key !== attribute(key)) {
+				throw new Error(
+					`Form name "${key}" is not url-safe. Try: "${attribute(
+						key
+					)}"`
+				);
+			}
+			form.makeOpenFormTag = () => `<div>`;
+			form.makeCloseFormTag = () => `</div>`;
+			form.field_names_prefix = key + FIELD_PREFIX_SEPARATOR;
+			form.form_id = this.name;
+			form.action = "./" + key;
+			form.init();
+			form.extractRawValues = (context) =>
+				this.getSubformRawValues(context, key);
+			const submit_button_id = this.name + "_" + key + "_submit";
+
+			form.makeSubmitButton = () => /* HTML */ `<input
+				type="submit"
+				value="${form.submitButtonText}"
+				formaction="${form.action}"
+				id="${submit_button_id}"
+				${form.form_id ? `form="${form.form_id}"` : ""}
+			/> `;
+		}
+		for (const form of Object.values(this.forms)) {
+			for (const field of Object.values(form.fields)) {
+				if (field.name.includes(FIELD_PREFIX_SEPARATOR)) {
+					throw new Error(
+						`A field name within multiform cannot contain '${FIELD_PREFIX_SEPARATOR}'`
+					);
+				}
+			}
+		}
+	}
+
+	extractRawValues(ctx: Context): Record<string, FormDataValue> {
+		return ctx.$body || {};
+	}
+
+	async canAccess(): Promise<{ canAccess: boolean; message: string }> {
+		return {
+			canAccess: true,
+			message:
+				"this view includes multiple forms and each of them have their unique access rules",
+		};
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	getSubformsToRender(ctx: Context): Array<readonly [string, Form<any>]> {
+		const requested_frame = ctx.headers["turbo-frame"];
+		if (
+			!is(
+				requested_frame,
+				predicates.or(predicates.undefined, predicates.string)
+			)
+		) {
+			throw new Error("Wrong turbo-frame header value type");
+		}
+		const forms_to_render =
+			requested_frame && this.forms[requested_frame]
+				? [<const>[requested_frame, this.forms[requested_frame]]]
+				: Object.entries(this.forms);
+		return forms_to_render;
+	}
+
+	async renderSubform(
+		ctx: Context,
+		sub_form_name: string
+	): Promise<FlatTemplatable> {
+		const form = this.forms[sub_form_name];
+		const result = await form.canAccess(ctx);
+		if (!result.canAccess) {
+			return result.message;
+		}
+		return form.render(ctx, {
+			raw_values: this.getSubformRawValues(ctx, sub_form_name),
+			messages: [],
+		});
+	}
+
+	getSubformRawValues(
+		ctx: Context,
+		sub_form_name: string
+	): Record<string, FormDataValue> {
+		const result = Object.fromEntries(
+			Object.entries(this.extractRawValues(ctx))
+				.filter(([key]) =>
+					key.startsWith(sub_form_name + FIELD_PREFIX_SEPARATOR)
+				)
+				.map(([key, value]) => [
+					key.slice((sub_form_name + FIELD_PREFIX_SEPARATOR).length),
+					value,
+				])
+		);
+		return result;
+	}
+
+	async render(
+		ctx: Context,
+		messages: FormMessage[],
+		prerenderedForms: Record<string, FlatTemplatable | undefined> = {}
+	): Promise<FlatTemplatable> {
+		return tempstream/* HTML */ `${this.renderMessages(ctx, {
+				raw_values: {},
+				messages,
+			})}
+			<div class="forms">
+				<form
+					id="${this.name}"
+					novalidate
+					${
+						/* novalidate is here because all the subforms are actuallly one form and errors in one will prevent submitting all of the forms */ ""
+					}
+					method="POST"
+				></form>
+				${this.getSubformsToRender(ctx).map(([form_name]) => {
+					const frame_form_id =
+						this.name + "_" + form_name + "_frame_form";
+					return tempstream/* HTML */ `<turbo-frame
+						id="${form_name}"
+						contains-subform
+						subform-id="${frame_form_id}"
+					>
+						${prerenderedForms[form_name] ||
+						this.renderSubform(ctx, form_name)}
+						<form id="${frame_form_id}" method="POST"></form>
+					</turbo-frame>`;
+				})}
+			</div>
+			${this.makeBottomScript()}`;
+	}
+
+	makeBottomScript(): string {
+		// this script assigns each field to its corresponding form, instead of
+		// the html-only version where all fields are attached to one meta-form
+		return /* HTML */ ` <script>
+			(function () {
+				if (!window.subform_handlers) {
+					window.subform_handlers = {};
+				}
+				if (window.subform_handlers["${this.name}"]) {
+					return;
+				}
+				const handler = () => {
+					document
+						.querySelectorAll("turbo-frame[contains-subform]")
+						.forEach((frame) => {
+							frame_form_id = frame.getAttribute("subform-id");
+							frame.querySelectorAll("input").forEach((input) => {
+								input.setAttribute("form", frame_form_id);
+							});
+						});
+				};
+				window.subform_handlers["${this.name}"] = handler;
+				document.documentElement.addEventListener(
+					"turbo:load",
+					handler
+				);
+				document.documentElement.addEventListener(
+					"turbo:frame-render",
+					handler
+				);
+			})();
+		</script>`;
+	}
+
+	mount(router: Router, path: string): void {
+		router.get(path, async (ctx) => {
+			ctx.type = "html";
+			ctx.body = await this.render(ctx, [], {});
+		});
+
+		for (const [key, form] of Object.entries(this.forms)) {
+			router.post(
+				path + (path.endsWith("/") ? "" : "/") + key,
+				async (ctx) => {
+					const reaction = await form.handlePost(ctx);
+					if (reaction.action == "stay") {
+						ctx.status = 422;
+						const form_content = reaction.content;
+						ctx.body = this.render(ctx, [], {
+							[key]: form_content,
+						});
+					} else if (reaction.action == "redirect") {
+						ctx.status = 303;
+						ctx.redirect(reaction.url);
+					}
+				}
+			);
+		}
+	}
+}

package/src/generate-routes.ts

@@ -12,7 +12,7 @@ const target_locreq = _locreq(process.cwd());
 
 async function extractActionName(full_file_path: string): Promise<string> {
 	const file_content = await fs.readFile(full_file_path, "utf-8");
-	const result = file_content.match(/export const actionName = "(\w+)"/);
+	const result = /export const actionName = "(\w+)"/.exec(file_content);
 	if (result === null) {
 		throw new Error("Missing 'export const actionName' statement?");
 	}
@@ -32,7 +32,9 @@ export async function generateRoutes(): Promise<void> {
 				(f) =>
 					f.endsWith(".page.ts") ||
 					f.endsWith(".form.ts") ||
-					f.endsWith(".list.ts")
+					f.endsWith(".multiform.ts") ||
+					f.endsWith(".list.ts") ||
+					f.endsWith(".redirect.ts")
 			)
 			.map(async (fullpath) => ({
 				fullpath,
@@ -85,7 +87,9 @@ function mount(router: Router, URL: string, mountable: Mountable) {
 	mountable.init();
 	mountable.mount(router, URL);
 	// to automatically add trailing slashes:
-	router.get(URL.slice(0, -1), (ctx) => ctx.redirect(URL));
+	router.get(URL.slice(0, -1), (ctx) => {
+		ctx.redirect(ctx.originalUrl + "/");
+	});
 	router.use(URL, (ctx) => ctx.set("content-type", "text/html;charset=utf-8"));
 }
 

package/src/index.ts

@@ -19,3 +19,4 @@ export * from "./utils/utils";
 export * from "./page/list";
 export * from "./utils/translate";
 export * as sanitize from "./sanitize";
+export * from "./forms/multiform";

package/src/page/list.ts

@@ -142,7 +142,7 @@ export abstract class ListPage<
 			])}
 			${this.filterControls.map((control) =>
 				// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-				control.render(ctx, values)
+				control.render(ctx, values, [], "", "")
 			)}
 		</form>`;
 	}