@sealcode/sealgen 0.6.1 → 0.7.0

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

package/src/page/mountable.ts

@@ -1,105 +1,13 @@
 import Router from "@koa/router";
-import { FormControl } from "../forms/controls/form-control";
-import { Context } from "koa";
-import { FlatTemplatable, tempstream } from "tempstream";
-import { FormField } from "../forms/fields/field";
-import { FormData, FormDataValue, FormMessage } from "../forms/form";
-
-export type PageErrorMessage = { type: "access" | "internal"; message: string };
-
-export type Fields = Record<string, FormField<unknown>>;
 
-export abstract class Mountable<F extends Fields = Fields> {
-	fields: F;
-
-	constructor() {
-		if (!this.fields) this.fields = {} as F;
-	}
+import { Context } from "koa";
 
-	abstract controls: FormControl[];
+export abstract class Mountable {
+	// eslint-disable-next-line @typescript-eslint/no-empty-function
+	init(): void {}
 	abstract mount(router: Router, path: string): void;
 
 	abstract canAccess(
 		ctx: Context
 	): Promise<{ canAccess: boolean; message: string }>;
-
-	abstract renderError(
-		ctx: Context,
-		error: PageErrorMessage
-	): Promise<FlatTemplatable>;
-
-	abstract extractRawValues(ctx: Context): Record<string, FormDataValue>;
-
-	// this one is meant to be overwritten
-	async validateValues(
-		ctx: Context,
-		data: Record<string, FormDataValue>
-	): Promise<{ valid: boolean; error: string }> {
-		return {
-			valid: true,
-			error: "",
-		};
-	}
-
-	protected 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 };
-	}
-
-	init(): void {
-		for (const [name, field] of Object.entries(this.fields)) {
-			field.init(name);
-		}
-	}
-
-	public renderControls(
-		ctx: Context,
-		data: FormData<keyof Fields>
-	): FlatTemplatable {
-		return tempstream/* HTML */ `${this.controls.map((control) =>
-			control.render(ctx, data.raw_values, data.messages)
-		)}`;
-	}
-
-	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>`;
-	}
 }

package/src/page/page.ts

@@ -1,15 +1,19 @@
 import Router from "@koa/router";
 import { Context } from "koa";
 
-import { FlatTemplatable, Templatable, tempstream } from "tempstream";
+import { FlatTemplatable, tempstream } from "tempstream";
 import { AllQueryParams } from "..";
 import { FormDataValue } from "../forms/form";
-import { Fields, Mountable, PageErrorMessage } from "./mountable";
+import {
+	Fields,
+	MountableWithFields,
+	PageErrorMessage,
+} from "./mountable-with-fields";
 import { PagePropsParser } from "./props-parser";
 
 export abstract class Page<
 	F extends Fields = Record<string, never>
-> extends Mountable<F> {
+> extends MountableWithFields<F> {
 	propsParser: PagePropsParser<Record<keyof Fields, unknown>> =
 		new AllQueryParams();
 	controls = [];

package/src/templates/multiform.ts

@@ -0,0 +1,58 @@
+import { curryImportPath } from "../utils/utils";
+
+export async function multiformTemplate(
+	action_name: string,
+	newfilefullpath: string
+): Promise<string> {
+	const rel = curryImportPath(newfilefullpath);
+	return `import { Context } from "koa";
+import html from "${rel("src/back/html")}";
+import { Controls, Fields, Form, FormMessage, Multiform } from "@sealcode/sealgen";
+import { FlatTemplatable } from "tempstream";
+
+export const actionName = "${action_name}";
+
+const fields1 = {
+	email: new Fields.SimpleFormField(true),
+	password: new Fields.SimpleFormField(true),
+};
+
+const form1 = new (class extends Form<typeof fields1> {
+	defaultSuccessMessage = "Form1 done!";
+	controls = [
+		new Controls.FormHeader("form1"),
+		new Controls.SimpleInput(fields1.email),
+	];
+	fields = fields1;
+	onSubmit() {
+		console.log("form1 submit");
+	}
+})();
+
+const fields2 = {
+	name: new Fields.SimpleFormField(true),
+	surname: new Fields.SimpleFormField(true),
+};
+
+const form2 = new (class extends Form<Record<never, unknown>> {
+	defaultSuccessMessage = "Form2 done!";
+	controls = [new Controls.FormHeader("form2"), new Controls.SimpleInput(fields2.name)];
+	fields = fields2;
+	onSubmit() {
+		console.log("form2 submit");
+	}
+})();
+
+export default new (class extends Multiform {
+	name = "multiform_test";
+	forms = { form1, form2 };
+	async render(
+		ctx: Context,
+		messages: FormMessage[],
+		prerenderedForms?: Record<string, FlatTemplatable | undefined>
+	): Promise<FlatTemplatable> {
+		return html(ctx, "${action_name}", await super.render(ctx, messages, prerenderedForms));
+	}
+})();
+`;
+}

package/src/templates/redirect.ts

@@ -0,0 +1,22 @@
+export async function redirectTemplate(action_name: string): Promise<string> {
+	return `import { Context } from "koa";
+import { Mountable } from "@sealcode/sealgen";
+import Router from "@koa/router";
+
+export const actionName = "${action_name}";
+
+export default new (class ${action_name}Redirect extends Mountable {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	async canAccess(_: Context) {
+		return { canAccess: true, message: "" };
+	}
+
+	mount(router: Router, path: string) {
+		router.get(path, async (ctx) => {
+			ctx.status = 302;
+			ctx.redirect("/new_url");
+		});
+	}
+})();
+`;
+}

package/src/tests/manual/multiform.ts

@@ -0,0 +1,106 @@
+import Koa, { Context } from "koa";
+import Router from "@koa/router";
+import { Controls, Fields, Form } from "../..";
+import { Multiform } from "../../forms/multiform";
+import koaBody from "koa-body";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { App } from "sealious";
+import { FormMessage } from "../../forms/form";
+const app = new Koa({ proxy: true });
+const router = new Router();
+
+const fields1 = {
+	email: new Fields.SimpleFormField(true),
+	password: new Fields.SimpleFormField(true),
+};
+
+const form1 = new (class extends Form<typeof fields1> {
+	defaultSuccessMessage = "Form1 done!";
+	controls = [
+		new Controls.FormHeader("form1"),
+		new Controls.SimpleInput(fields1.email),
+	];
+	fields = fields1;
+	onSubmit() {
+		console.log("form1 submit");
+	}
+})();
+
+const fields2 = {
+	name: new Fields.SimpleFormField(true),
+	surname: new Fields.SimpleFormField(true),
+};
+
+const form2 = new (class extends Form<Record<never, unknown>> {
+	defaultSuccessMessage = "Form2 done!";
+	controls = [
+		new Controls.FormHeader("form2"),
+		new Controls.SimpleInput(fields2.name),
+	];
+	fields = fields2;
+	onSubmit() {
+		console.log("form2 submit");
+	}
+})();
+
+const multiform = new (class extends Multiform {
+	name = "multiform_test";
+	forms = { form1, form2 };
+	async render(
+		ctx: Koa.Context,
+		messages: FormMessage[],
+		prerenderedForms?: Record<string, FlatTemplatable | undefined>
+	): Promise<FlatTemplatable> {
+		return tempstream`<!DOCTYPE html>
+		<html>
+			<head>
+				<title>Multiform Test - Sealgen</title>
+				<script type="module">
+					import hotwiredTurbo from "https://cdn.skypack.dev/pin/@hotwired/turbo@v7.0.0-9XNv1By6uiqRlBzQLO2d/mode=imports,min/optimized/@hotwired/turbo.js";
+				</script>
+			</head>
+			<body>
+				${super.render(ctx, messages, prerenderedForms)}
+			</body>
+		</html>`;
+	}
+})();
+
+const URL = "/";
+
+async function handleHtmlPromise(ctx: Context, next: Koa.Next) {
+	await next();
+	if (ctx.body instanceof Promise) {
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+		ctx.body = await ctx.body;
+	}
+	ctx.set("content-type", "text/html;charset=utf-8");
+}
+
+router.use(
+	URL,
+	koaBody(),
+	async (ctx, next) => {
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+		ctx.$body = ctx.request.body;
+		ctx.$app = {
+			getString: (
+				_: unknown,
+				args: unknown[],
+				trans: string | ((...args: unknown[]) => string)
+			) => (typeof trans == "function" ? trans(args) : trans),
+		} as unknown as App;
+		await next();
+	},
+	handleHtmlPromise
+);
+multiform.init();
+multiform.mount(router, URL);
+// to automatically add trailing slashes:
+
+router.use(URL, (ctx) => ctx.set("content-type", "text/html;charset=utf-8"));
+
+app.use(router.routes()).use(router.allowedMethods());
+app.listen(3000);
+
+console.log("Multiform test app listening on localhost:3000");

package/src/utils/input-wrapper.ts

@@ -0,0 +1,18 @@
+import { Readable } from "stream";
+import { tempstream } from "tempstream";
+
+export function getRequiredClass(isRequired: boolean): string {
+	return isRequired ? "required" : "";
+}
+
+function getModifierClasses(modifiers: string[]) {
+	return modifiers.map((m) => "form-input__wrapper--" + m).join(" ");
+}
+
+export function inputWrapper(modifiers: string[], input: string): Readable {
+	return tempstream/* HTML */ `<div
+		class="form-input form-input__wrapper ${getModifierClasses(modifiers)}"
+	>
+		${input}
+	</div>`;
+}