@sealcode/sealgen 0.6.1 → 0.7.1

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,5 @@ export * from "./utils/utils";
 export * from "./page/list";
 export * from "./utils/translate";
 export * as sanitize from "./sanitize";
+export * from "./forms/multiform";
+export * as Components from "./components/components";

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>`;
 	}

package/src/page/mountable-with-fields.ts

@@ -0,0 +1,112 @@
+import { Context } from "koa";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { FormControl } from "../forms/controls/form-control";
+import { FormField } from "../forms/fields/field";
+import { FormData, FormDataValue, FormMessage } from "../forms/form";
+import { Mountable } from "./mountable";
+
+export type PageErrorMessage = { type: "access" | "internal"; message: string };
+
+export type Fields = Record<string, FormField<unknown>>;
+
+export abstract class MountableWithFields<
+	F extends Fields = Fields
+> extends Mountable {
+	fields: F;
+	field_names_prefix = ""; // useful for multiform, where many forms are merged into one and field assignment is made using the prefix
+	form_id = ""; // all fields within this mountable will be tied to form of this id
+	abstract controls: FormControl[];
+
+	constructor() {
+		super();
+		if (!this.fields) this.fields = {} as F;
+	}
+
+	init(): void {
+		for (const [name, field] of Object.entries(this.fields)) {
+			field.init(name);
+		}
+	}
+
+	// this one is meant to be overwritten
+	async validateValues(
+		ctx: Context,
+		data: Record<string, FormDataValue>
+	): Promise<{ valid: boolean; error: string }> {
+		return {
+			valid: true,
+			error: "",
+		};
+	}
+
+	async validate(
+		ctx: Context,
+		values: Record<string, FormDataValue>
+	): Promise<{
+		valid: boolean;
+		field_errors: Partial<Record<keyof Fields, string>>;
+		form_messages: FormMessage[];
+	}> {
+		const field_errors = {} as Record<keyof Fields, string>;
+		let valid = true;
+		const form_messages = [] as FormMessage[];
+		await Promise.all(
+			Object.entries(values)
+				.filter(([fieldname]) => fieldname in this.fields)
+				.map(async ([key]: [keyof F, FormDataValue]) => {
+					const field = this.fields[key];
+					const { valid: fieldvalid, message: fieldmessage } =
+						await field.getValue(ctx, values);
+					if (!fieldvalid) {
+						valid = false;
+						field_errors[field.name] = fieldmessage;
+					}
+				})
+		);
+		const formValidationResult = await this.validateValues(ctx, values);
+		if (!formValidationResult.valid) {
+			form_messages.push({
+				type: "error",
+				text: formValidationResult.error,
+			});
+			valid = false;
+		}
+		return { valid, field_errors, form_messages };
+	}
+
+	public renderControls(
+		ctx: Context,
+		data: FormData<keyof Fields>
+	): FlatTemplatable {
+		return tempstream/* HTML */ `${this.controls.map((control) =>
+			control.render(
+				ctx,
+				data.raw_values,
+				data.messages,
+				this.field_names_prefix,
+				this.form_id
+			)
+		)}`;
+	}
+
+	async renderError(
+		_: Context,
+		error: PageErrorMessage
+	): Promise<FlatTemplatable> {
+		return error.message;
+	}
+
+	public renderMessages(
+		_: Context,
+		data: FormData<keyof Fields>
+	): FlatTemplatable {
+		return tempstream/* HTML */ `<div class="form-messages">
+			${data.messages.map(
+				(message) =>
+					`<div class="form-message form-message--${message.type}">${message.text}</div>`
+			)}
+		</div>`;
+	}
+
+	abstract extractRawValues(ctx: Context): Record<string, FormDataValue>;
+}