@sealcode/sealgen 0.18.10 → 0.19.2

package/src/forms/form.ts

@@ -2,7 +2,7 @@ import { Context } from "koa";
 import { randomUUID } from "crypto";
 
 import Router from "@koa/router";
-import { FlatTemplatable, tempstream } from "tempstream";
+import { tempstream } from "tempstream";
 import {
 	hasFieldOfType,
 	hasShape,
@@ -22,10 +22,14 @@ import {
 	MountableWithFields,
 	PageErrorMessage,
 } from "../page/mountable-with-fields.js";
+import { Readable } from "stream";
+import { FormField } from "../index.js";
+import { FieldMessages } from "./controls/form-control.js";
+import { Errors as SealiousErrors } from "sealious";
 
 export abstract class Form<
 	F extends Fields,
-	SubmitResult
+	SubmitResult,
 > extends MountableWithFields<F> {
 	defaultSuccessMessage = "Done";
 	submitButtonText = "Wyślij";
@@ -34,7 +38,6 @@ export abstract class Form<
 	form_id = randomUUID() as string;
 
 	async canAccess(
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		_: Context
 	): Promise<{ canAccess: boolean; message: string }> {
 		return { canAccess: true, message: "" };
@@ -43,11 +46,11 @@ export abstract class Form<
 	async renderError(
 		_: Context,
 		error: PageErrorMessage
-	): Promise<FlatTemplatable> {
-		return tempstream/* HTML */ `<div>${error.message}</div>`;
+	): Promise<JSX.Element | Readable> {
+		return tempstream /* HTML */ `<div>${error.message}</div>`;
 	}
 
-	makeSubmitButton(): FlatTemplatable {
+	makeSubmitButton(): JSX.Element {
 		return /* HTML */ `<input
 			type="submit"
 			value="${this.submitButtonText}"
@@ -60,8 +63,8 @@ export abstract class Form<
 		ctx: Context,
 		data: FormData,
 		show_field_errors: boolean
-	): Promise<FlatTemplatable> {
-		return tempstream/* HTML */ `<div class="form-container">
+	): Promise<JSX.Element | Readable> {
+		return tempstream /* HTML */ `<div class="form-container">
 			${this.makeOpenFormTag(ctx)}
 			${!this.controls.some((control) => control.role == "messages")
 				? this.renderMessages(ctx, data)
@@ -76,12 +79,11 @@ export abstract class Form<
 		</div>`;
 	}
 
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	public async makeFormClasses(_ctx: Context): Promise<string[]> {
 		return [];
 	}
 
-	public makeOpenFormTag(ctx: Context): FlatTemplatable {
+	public makeOpenFormTag(ctx: Context): JSX.Element {
 		return tempstream`<form enctype="multipart/form-data" method="POST" id="${
 			this.form_id
 		}" action="${this.action}" class="${this.makeFormClasses(ctx).then(
@@ -91,14 +93,14 @@ export abstract class Form<
 		}></form><div class="form">`;
 	}
 
-	public makeCloseFormTag(): FlatTemplatable {
+	public makeCloseFormTag(): JSX.Element {
 		return `</div>`;
 	}
 
 	public async onValuesInvalid(
 		ctx: Context,
 		form_messages: FormMessage[],
-		_field_errors: Partial<Record<keyof Fields, string>>
+		field_errors: FieldMessages<keyof Fields>
 	): Promise<FormReaction> {
 		const messages = form_messages.length
 			? form_messages
@@ -110,8 +112,9 @@ export abstract class Form<
 				{
 					raw_values: await this.extractRawValues(ctx),
 					messages,
+					field_messages: field_errors,
 				},
-				"show_field_errors" && true
+				true
 			),
 			messages,
 		};
@@ -123,12 +126,21 @@ export abstract class Form<
 		error: unknown
 	): Promise<FormReaction> {
 		let error_message = "Unknown error has occured";
+		let field_messages: FieldMessages = {};
 		if (
 			is(error, predicates.object) &&
 			hasShape({ message: predicates.string }, error)
 		) {
 			error_message = error.message;
 		}
+		if (error instanceof SealiousErrors.FieldsError) {
+			field_messages = Object.fromEntries(
+				Object.entries(error.field_messages).map(([key, value]) => {
+					const message = value?.message || "";
+					return [key, { type: "error", message }];
+				})
+			);
+		}
 		const messages = [<const>{ type: "error", text: error_message }];
 		return {
 			action: "stay",
@@ -137,8 +149,9 @@ export abstract class Form<
 				{
 					raw_values: data.raw_values,
 					messages,
+					field_messages,
 				},
-				"show_field_errors" && true
+				true
 			),
 		};
 	}
@@ -163,8 +176,9 @@ export abstract class Form<
 				{
 					raw_values: await this.getInitialValues(ctx),
 					messages,
+					field_messages: {},
 				},
-				"show_field_errors" && false
+				false
 			),
 			messages,
 		};
@@ -181,10 +195,6 @@ export abstract class Form<
 			raw_values
 		);
 		if (!valid) {
-			console.debug("Form values invalid: ", {
-				form_messages,
-				field_errors,
-			});
 			return this.onValuesInvalid(ctx, form_messages, field_errors);
 		}
 		try {
@@ -192,12 +202,14 @@ export abstract class Form<
 			const result = await this.onSubmit(ctx, {
 				raw_values,
 				messages: [],
+				field_messages: {},
 			});
 			return this.onSuccess(
 				ctx,
 				{
 					raw_values: await this.getRawValuesOnSuccess(ctx),
 					messages: [],
+					field_messages: {},
 				},
 				result
 			);
@@ -209,8 +221,8 @@ export abstract class Form<
 				hasFieldOfType(e, "message", predicates.string)
 					? e?.message
 					: is(e, predicates.string)
-					? e
-					: "Wystąpił błąd";
+						? e
+						: "Wystąpił błąd";
 
 			return this.onError(
 				ctx,
@@ -222,6 +234,7 @@ export abstract class Form<
 							text: message,
 						},
 					],
+					field_messages: {},
 				},
 				e
 			);
@@ -257,12 +270,12 @@ export abstract class Form<
 				{
 					raw_values: await this.extractRawValues(ctx),
 					messages: [],
+					field_messages: {},
 				},
-				"show_field_errors" && false
+				false
 			);
 		});
 		router.post(path, async (ctx) => {
-			console.log("REGULAR FORM HANDLE");
 			const reaction =
 				(ctx.override_reaction as FormReaction | undefined) ||
 				(await this.handlePost(ctx));
@@ -283,4 +296,10 @@ export abstract class Form<
 			? ctx.$body
 			: this.getInitialValues(ctx);
 	}
+
+	static initFieldNames(fields: Record<string, FormField>): void {
+		for (const [field_name, field] of Object.entries(fields)) {
+			field.setName(field_name);
+		}
+	}
 }

package/src/forms/forms.css

@@ -1,85 +0,0 @@
-.form-message {
-	--color: black;
-	border: 1px solid var(--color);
-	border-radius: 5px;
-	padding: 10px;
-}
-
-.form-message--error {
-	--color: #ff4136;
-}
-
-.form-message--success {
-	--color: #2ecc40;
-}
-
-.form__error {
-	color: #ff4136;
-}
-
-.form-input__wrapper--checkbox {
-	display: flex;
-	flex-flow: row nowrap;
-	align-items: center;
-	& > input[type="checkbox"] {
-		width: 15px;
-		height: 15px;
-
-		+ label {
-			padding-left: 10px;
-		}
-	}
-}
-
-.form-input__wrapper--multiple-files--photos {
-	ul {
-		list-style: none;
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-		grid-gap: 10px;
-		margin-bottom: 20px;
-
-		li {
-			background-color: white;
-			box-shadow: 1px 1px 6px 0px #00000038;
-			padding: 10px;
-			display: grid;
-			grid-template-columns: 1fr 20px;
-			grid-template-rows: 20px auto min-content;
-			grid-row-gap: 10px;
-
-			a {
-				grid-row: 1/3;
-				grid-column: 1/3;
-
-				picture,
-				img {
-					width: 100%;
-					height: 150px;
-					object-fit: contain;
-				}
-			}
-
-			.filename {
-				grid-row: 3/4;
-				grid-column: 1/3;
-			}
-
-			form {
-				grid-row: 1/2;
-				grid-column: 2/3;
-				position: relative;
-				z-index: 2;
-			}
-		}
-	}
-}
-
-.file-list-item {
-	display: flex;
-	flex-flow: row;
-
-	form {
-		padding-left: 20px;
-	}
-}

package/src/forms/multiform.test.ts

@@ -9,7 +9,7 @@ import { Multiform } from "./multiform.js";
 import { assertThrowsAsync } from "../utils/utils.js";
 import { form_factory } from "./form.test.js";
 import { getBrowser } from "../utils/browser-creator.js";
-import { SimpleFormField } from "./fields/simple-form-field.js";
+import { TextBasedSimpleField } from "./fields/simple-form-field.js";
 import { Form } from "./form.js";
 import { FormHeader } from "./controls/form-header.js";
 import { SimpleInput } from "./controls/simple-input.js";
@@ -19,10 +19,10 @@ import { EmailField } from "./fields/email.js";
 import getPort from "get-port";
 
 const port = await getPort();
-console.log(`Using port ${port} form multiform.test.ts`);
+console.info(`Using port ${port} form multiform.test.ts`);
 
 const fields1 = {
-	email: new SimpleFormField(true),
+	email: new TextBasedSimpleField(true),
 };
 
 const form1 = new (class extends Form<typeof fields1, void> {
@@ -35,7 +35,7 @@ const form1 = new (class extends Form<typeof fields1, void> {
 })();
 
 const fields2 = {
-	name: new SimpleFormField(true),
+	name: new TextBasedSimpleField(true),
 };
 
 const form2 = new (class extends Form<Record<never, unknown>, void> {
@@ -58,7 +58,7 @@ function multiform_factory(
 			form2: form_factory(canAccessFun2),
 		};
 		async render(...args: Parameters<Multiform["render"]>): Promise<FlatTemplatable> {
-			return tempstream/* HTML */ `<!DOCTYPE html>
+			return tempstream /* HTML */ `<!DOCTYPE html>
 				<html>
 					<head>
 						<title>Multiform Test - Sealgen</title>
@@ -147,7 +147,7 @@ async function individual_field_validation_e2e_tests(javaScriptEnabled: boolean)
 		await page.getByPlaceholder("text").click();
 		await page.getByPlaceholder("text").fill("yes@an.email");
 		await page.locator("#multiform_test_form1_submit").click();
-		assertThrowsAsync(async () => {
+		await assertThrowsAsync(async () => {
 			return page.getByText("Please enter a proper email address").click({ timeout: 500 });
 		});
 	});
@@ -173,7 +173,7 @@ describe("multiform test", () => {
 						prerenderedForms?: Record<string, FlatTemplatable | undefined>,
 						show_field_errors = true
 					): Promise<FlatTemplatable> {
-						return tempstream/* HTML */ `<!DOCTYPE html>
+						return tempstream /* HTML */ `<!DOCTYPE html>
 							<html>
 								<head>
 									<title>Multiform Test - Sealgen</title>
@@ -455,7 +455,7 @@ describe("multiform test", () => {
 						async render(
 							...args: Parameters<Multiform["render"]>
 						): Promise<FlatTemplatable> {
-							return tempstream/* HTML */ `<!DOCTYPE html>
+							return tempstream /* HTML */ `<!DOCTYPE html>
 								<html>
 									<head>
 										<title>Multiform Test - Sealgen</title>
@@ -518,7 +518,7 @@ describe("multiform test", () => {
 						async render(
 							...args: Parameters<Multiform["render"]>
 						): Promise<FlatTemplatable> {
-							return tempstream/* HTML */ `<!DOCTYPE html>
+							return tempstream /* HTML */ `<!DOCTYPE html>
 								<html>
 									<head>
 										<title>Multiform Test - Sealgen</title>

package/src/forms/multiform.ts

@@ -35,13 +35,14 @@ export class Multiform extends MountableWithFields {
 				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}"` : ""}
-			/> `;
+			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)) {
@@ -68,7 +69,6 @@ export class Multiform extends MountableWithFields {
 		};
 	}
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	getSubformsToRender(
 		ctx: Context
 	): Array<readonly [string, Form<any, unknown>]> {
@@ -103,6 +103,7 @@ export class Multiform extends MountableWithFields {
 			{
 				raw_values: await this.getSubformRawValues(ctx, sub_form_name),
 				messages: [],
+				field_messages: {},
 			},
 			show_field_errors
 		);
@@ -131,9 +132,10 @@ export class Multiform extends MountableWithFields {
 		prerenderedForms: Record<string, FlatTemplatable | undefined> = {},
 		show_field_errors: boolean
 	): Promise<FlatTemplatable> {
-		return tempstream/* HTML */ `${this.renderMessages(ctx, {
+		return tempstream /* HTML */ `${this.renderMessages(ctx, {
 				raw_values: {},
 				messages,
+				field_messages: {},
 			})}
 			<div class="forms">
 				<form
@@ -147,7 +149,7 @@ export class Multiform extends MountableWithFields {
 				${this.getSubformsToRender(ctx).map(([form_name]) => {
 					const frame_form_id =
 						this.name + "_" + form_name + "_frame_form";
-					return tempstream/* HTML */ `<turbo-frame
+					return tempstream /* HTML */ `<turbo-frame
 						id="${form_name}"
 						contains-subform
 						subform-id="${frame_form_id}"

package/src/generate-collections.ts

@@ -1,8 +1,7 @@
 import _locreq from "locreq";
-import * as prettier from "prettier";
 import { promises as fs } from "fs";
 import { assertType, predicates } from "@sealcode/ts-predicates";
-import { getPrettierConfig } from "./utils/prettier.js";
+import { formatWithPrettier } from "./utils/prettier.js";
 
 const target_locreq = _locreq(process.cwd());
 
@@ -69,7 +68,7 @@ ${file_data
 };`;
 	await fs.writeFile(
 		target_locreq.resolve("src/back/collections/collections.ts"),
-		prettier.format(content, await getPrettierConfig())
+		await formatWithPrettier(content)
 	);
 	// eslint-disable-next-line no-console
 	console.log(

package/src/generate-components.ts

@@ -1,7 +1,6 @@
 import _locreq from "locreq";
-import * as prettier from "prettier";
 import { promises as fs } from "fs";
-import { getPrettierConfig } from "./utils/prettier.js";
+import { formatWithPrettier } from "./utils/prettier.js";
 import recursive from "recursive-readdir";
 import path from "path";
 import { toKebabCase, toPascalCase } from "js-convert-case";
@@ -40,7 +39,7 @@ ${component_data
 	const target = "src/back/jdd-components/components.ts";
 	await fs.writeFile(
 		target_locreq.resolve(target),
-		prettier.format(content, await getPrettierConfig())
+		await formatWithPrettier(content)
 	);
 	// eslint-disable-next-line no-console
 	console.log(`Successfuly generated new ${target} file`);

package/src/generate-routes.test.ts

@@ -1,20 +1,15 @@
 import { generateURL, sortRoutes } from "./generate-routes.js";
-import * as prettier from "prettier";
-import { getPrettierConfig } from "./utils/prettier.js";
+import { formatWithPrettier } from "./utils/prettier.js";
 import assert from "node:assert";
 
 describe("generate routes", () => {
 	it("handles a url with params", async () => {
 		assert.strictEqual(
-			prettier.format(
-				generateURL("EditUser", "/admin/users/:id/edit/"),
-				await getPrettierConfig()
-			),
-			prettier.format(
+			await formatWithPrettier(generateURL("EditUser", "/admin/users/:id/edit/")),
+			await formatWithPrettier(
 				`export const EditUserURL = (id: string) => \`/admin/users/\${id}/edit/\`;
 EditUserURL.params = ["id"];
-EditUserURL.rawURL = "/admin/users/:id/edit/";`,
-				await getPrettierConfig()
+EditUserURL.rawURL = "/admin/users/:id/edit/";`
 			)
 		);
 	});
@@ -28,15 +23,11 @@ EditUserURL.rawURL = "/admin/users/:id/edit/";`,
 
 	it("handles a url with params and diacritics", async () => {
 		assert.strictEqual(
-			prettier.format(
-				generateURL("EditUser", "/admin/użytkownicy/:id/edit/"),
-				await getPrettierConfig()
-			),
-			prettier.format(
+			await formatWithPrettier(generateURL("EditUser", "/admin/użytkownicy/:id/edit/")),
+			await formatWithPrettier(
 				`export const EditUserURL = (id: string) => \`/admin/u%C5%BCytkownicy/\${id}/edit/\`;
 EditUserURL.params = ["id"];
-EditUserURL.rawURL = "/admin/u%C5%BCytkownicy/:id/edit/";`,
-				await getPrettierConfig()
+EditUserURL.rawURL = "/admin/u%C5%BCytkownicy/:id/edit/";`
 			)
 		);
 	});

package/src/generate-routes.ts

@@ -1,12 +1,11 @@
 import { promises as fs } from "fs";
-import * as prettier from "prettier";
 import { relative, resolve, basename } from "path";
 import _locreq from "locreq";
 import { walkDir } from "./utils/walk.js";
 import { importPath } from "./utils/import-path.js";
 import { assertType, predicates } from "@sealcode/ts-predicates";
 import { unescape_url_params } from "./utils/escape-url-params.js";
-import { getPrettierConfig } from "./utils/prettier.js";
+import { formatWithPrettier } from "./utils/prettier.js";
 import { Templates } from "./templates/templates.js";
 
 const target_locreq = _locreq(process.cwd());
@@ -42,8 +41,8 @@ export function generateURL(actionName: string, url: string) {
 		)
 		.join("/")}\`;
         ${actionName}URL.params = [${params
-		.map((param) => `"${param}"`)
-		.join(",")}];
+			.map((param) => `"${param}"`)
+			.join(",")}];
         ${actionName}URL.rawURL = "${encodeURI(url)}";`;
 }
 
@@ -70,9 +69,7 @@ export function sortRoutes<T extends { url: string }>(urls: T[]): T[] {
 
 export async function generateRoutes(): Promise<void> {
 	const files = await Promise.all(
-		(
-			await walkDir(target_locreq.resolve("src/back/routes"))
-		)
+		(await walkDir(target_locreq.resolve("src/back/routes")))
 			.filter((f) =>
 				Object.keys(Templates).some(
 					(key) =>
@@ -129,15 +126,14 @@ ${sortRoutes(files)
 		.join("\n")}
 `;
 
-	const prettier_config = await getPrettierConfig();
 	await fs.writeFile(
 		target_locreq.resolve("src/back/routes/routes.ts"),
-		prettier.format(routes_content, prettier_config)
+		await formatWithPrettier(routes_content)
 	);
 
 	await fs.writeFile(
 		target_locreq.resolve("src/back/routes/urls.ts"),
-		prettier.format(urls_content, prettier_config)
+		await formatWithPrettier(urls_content)
 	);
 	// eslint-disable-next-line no-console
 	console.log(

package/src/generate-stimulus.ts

@@ -1,7 +1,6 @@
 import _locreq from "locreq";
-import * as prettier from "prettier";
 import { promises as fs } from "fs";
-import { getPrettierConfig } from "./utils/prettier.js";
+import { formatWithPrettier } from "./utils/prettier.js";
 import recursive from "recursive-readdir";
 import path, { dirname } from "path";
 import { toKebabCase, toPascalCase } from "js-convert-case";
@@ -16,6 +15,7 @@ export async function generateStimulusControllers(
 		target_locreq.resolve("src/"),
 		...controller_dirs,
 	];
+	console.info("Looking for controllers in ", stimulus_search_dirs);
 	const controller_names = (
 		await Promise.all(stimulus_search_dirs.map((dir) => recursive(dir)))
 	)
@@ -53,8 +53,7 @@ export { Turbo };
 
 	await fs.writeFile(
 		target_locreq.resolve(output_file),
-		prettier.format(content, await getPrettierConfig())
+		await formatWithPrettier(content)
 	);
-	// eslint-disable-next-line no-console
-	console.log(`Successfuly generated new ${output_file} file`);
+	console.info(`Successfuly generated new ${output_file} file`);
 }

package/src/get-fonts.ts

@@ -34,12 +34,12 @@ export async function getFonts(_: Record<string, string | boolean> = {}) {
 	});
 	await downloader.execute();
 
-	console.log("Downloaded new fonts pack from google fonts");
+	console.info("Downloaded new fonts pack from google fonts");
 
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
 	const squirrel_fonts = fonts_config.fontSquirrel;
 	if (
-		!is(
+		is(
 			squirrel_fonts,
 			predicates.record(
 				predicates.string,
@@ -47,39 +47,41 @@ export async function getFonts(_: Record<string, string | boolean> = {}) {
 			)
 		)
 	) {
-		throw new Error("Inocorrect squirrelfonts file");
-	}
-
-	await mkdir(target_locreq.resolve("public/dist/fontsquirrel/"), {
-		recursive: true,
-	});
+		await mkdir(target_locreq.resolve("public/dist/fontsquirrel/"), {
+			recursive: true,
+		});
 
-	const config_file = `{
+		const config_file = `{
 				"tmpDir": "/tmp/fonts",
 				"fontsDir": "/dist/fontsquirrel/fonts",
 				"cssDir": "/dist/fontsquirrel/css",
 				"cssFile": "fonts.css"
 			}`;
-	await writeFile("public/fonsta.config.json", config_file);
+		await writeFile("public/fonsta.config.json", config_file);
+
+		await Promise.all(
+			Object.keys(squirrel_fonts).map((font) => {
+				if (squirrel_fonts[font].length) {
+					return execPromise(
+						`node ${path_to_fonsta} install ${font}:${squirrel_fonts[
+							font
+						].join(",")}`,
+						{
+							cwd: target_locreq.resolve("public"),
+						}
+					);
+				} else {
+					return execPromise(
+						`node ${path_to_fonsta} install ${font}`,
+						{
+							cwd: target_locreq.resolve("public"),
+						}
+					);
+				}
+			})
+		);
+	}
 
-	await Promise.all(
-		Object.keys(squirrel_fonts).map((font) => {
-			if (squirrel_fonts[font].length) {
-				return execPromise(
-					`node ${path_to_fonsta} install ${font}:${squirrel_fonts[
-						font
-					].join(",")}`,
-					{
-						cwd: target_locreq.resolve("public"),
-					}
-				);
-			} else {
-				return execPromise(`node ${path_to_fonsta} install ${font}`, {
-					cwd: target_locreq.resolve("public"),
-				});
-			}
-		})
-	);
 	const fonts_css_file_path = resolve(
 		target_locreq.resolve("public/dist/fonts"),
 		"fonts.css"
@@ -93,7 +95,7 @@ export async function getFonts(_: Record<string, string | boolean> = {}) {
 
 	await unlink("public/fonsta.config.json");
 	await rmdir("public/tmp");
-	console.log("Downloaded new fonts pack from Font Squirrel");
+	console.info("Downloaded new fonts pack from Font Squirrel");
 
-	console.log("Downloaded new fonts pack");
+	console.info("Downloaded new fonts pack");
 }