@sealcode/sealgen 0.3.1 → 0.4.1

package/src/forms/fields/field.ts

@@ -0,0 +1,106 @@
+import { BaseContext } from "koa";
+import { FormDataValue } from "../form";
+
+export type FormFieldValidationResponse = { valid: boolean; message: string };
+
+export type FormFieldValidationFn<ValueType> = (
+	ctx: BaseContext,
+	value: ValueType,
+	field: FormField<ValueType>
+) => Promise<FormFieldValidationResponse>;
+
+export type FieldParsedValue<T> = T extends FormField<infer R> ? R : never;
+
+export type FieldParseResult<T> =
+	| {
+			parsable: false;
+			error: string;
+			parsed_value: null;
+	  }
+	| { parsable: true; error: null; parsed_value: T };
+
+export abstract class FormField<ParsedValue extends unknown = unknown> {
+	name: string;
+	constructor(public required: boolean = false) {}
+
+	init(fieldname: string): void {
+		this.name = fieldname;
+	}
+
+	public async _validate(
+		ctx: BaseContext,
+		value: ParsedValue
+	): Promise<FormFieldValidationResponse> {
+		if (
+			this.required &&
+			(value === "" || value === null || value === undefined)
+		) {
+			return { valid: false, message: "This field is required" };
+		}
+		return this.isValueValid(ctx, value);
+	}
+
+	public abstract getEmptyValue(): ParsedValue;
+
+	public async isValueValid(
+		ctx: BaseContext,
+		value: ParsedValue
+	): Promise<FormFieldValidationResponse> {
+		return { valid: true, message: "" };
+	}
+
+	abstract parse(
+		ctx: BaseContext,
+		raw_value: FormDataValue
+	): Promise<FieldParseResult<ParsedValue>>;
+
+	async getValue(
+		ctx: BaseContext,
+		all_form_values: Record<string, FormDataValue>
+	): Promise<{
+		valid: boolean;
+		message: string;
+		parsed: ParsedValue;
+		raw: FormDataValue;
+	}> {
+		if (Object.keys(all_form_values).length === 0) {
+			// don't validate on virgin form
+			return {
+				parsed: this.getEmptyValue(),
+				valid: true,
+				message: "",
+				raw: "",
+			};
+		}
+		const raw = all_form_values[this.name];
+		const {
+			parsable,
+			parsed_value,
+			error: parse_error,
+		} = await this.parse(ctx, raw);
+		if (!parsable) {
+			return {
+				valid: false,
+				parsed: this.getEmptyValue(),
+				raw,
+				message: parse_error || "Error",
+			};
+		}
+		const { valid, message } = await this._validate(
+			ctx,
+			parsed_value as ParsedValue
+		);
+		return {
+			parsed: parsed_value as ParsedValue,
+			valid,
+			message,
+			raw: all_form_values[this.name],
+		};
+	}
+}
+
+export * from "./simple-form-field";
+export * from "./checkboxed-list";
+export * from "./collection-field";
+export * from "./number";
+export * from "./pick-from-list";

package/src/forms/fields/number.ts

@@ -0,0 +1,53 @@
+import { is, predicates } from "@sealcode/ts-predicates";
+import { BaseContext } from "koa";
+import { FormDataValue } from "../form";
+import { FieldParseResult, FormField } from "./field";
+
+export class NumberField<
+	DefaultValue extends number | null = null
+> extends FormField<number | DefaultValue> {
+	constructor(required = false, public default_value: DefaultValue) {
+		super(required);
+	}
+
+	public async isValueValid(_: BaseContext, value: unknown) {
+		if (
+			(is(value, predicates.string) &&
+				!isNaN(parseFloat(value)) &&
+				parseFloat(value).toString() == value.trim()) ||
+			is(value, predicates.number) ||
+			((is(value, predicates.undefined) || value == "") && !this.required)
+		) {
+			return { valid: true, message: "" };
+		}
+		return { valid: false, message: "Proszę wprowadzić liczbę" };
+	}
+
+	async parse(
+		_: BaseContext,
+		value: FormDataValue
+	): Promise<FieldParseResult<number>> {
+		if (
+			(is(value, predicates.string) &&
+				!isNaN(parseFloat(value)) &&
+				parseFloat(value).toString() == value.trim()) ||
+			is(value, predicates.number)
+		) {
+			return {
+				parsable: true,
+				parsed_value: parseFloat(value.toString()),
+				error: null,
+			};
+		} else {
+			return {
+				parsable: false,
+				parsed_value: null,
+				error: "Please enter a number",
+			};
+		}
+	}
+
+	public getEmptyValue(): DefaultValue {
+		return this.default_value;
+	}
+}

package/src/forms/fields/pick-from-list.ts

@@ -0,0 +1,49 @@
+import { is, predicates } from "@sealcode/ts-predicates";
+import { BaseContext } from "koa";
+import { FormFieldValidationResponse } from "./field";
+import { SimpleFormField } from "./simple-form-field";
+
+export class PickFromListField extends SimpleFormField {
+	constructor(
+		public required: boolean = false,
+		public generateOptions: (
+			ctx: BaseContext
+		) => Promise<Record<string, string> | { [i: string]: string }>,
+		public customValidation: (
+			ctx: BaseContext,
+			value: unknown,
+			instance: PickFromListField
+		) => Promise<FormFieldValidationResponse> = (ctx, value, instance) =>
+			instance.valueInList(ctx, value)
+	) {
+		super(required);
+	}
+
+	public isValueValid(
+		ctx: BaseContext,
+		value: string
+	): Promise<FormFieldValidationResponse> {
+		return this.customValidation(ctx, value, this);
+	}
+
+	async valueInList(
+		ctx: BaseContext,
+		value: unknown
+	): Promise<FormFieldValidationResponse> {
+		const options = await this.generateOptions(ctx);
+		if (!is(value, predicates.string)) {
+			return { valid: false, message: "not a string" };
+		}
+		if (!Object.keys(options).includes(value)) {
+			return {
+				valid: false,
+				message: `"${value}" is not one of the options`,
+			};
+		}
+		return { valid: true, message: "" };
+	}
+
+	public getEmptyValue(): string {
+		return "";
+	}
+}

package/src/forms/fields/simple-form-field.ts

@@ -0,0 +1,20 @@
+import { FieldParseResult, FormField } from "./field";
+import { FormDataValue } from "../form";
+import { BaseContext } from "koa";
+
+export class SimpleFormField extends FormField<string | null> {
+	async parse(
+		_: BaseContext,
+		raw_value: FormDataValue
+	): Promise<FieldParseResult<string>> {
+		return {
+			parsed_value: (raw_value || "").toString(),
+			parsable: true,
+			error: null,
+		};
+	}
+
+	public getEmptyValue(): string {
+		return "";
+	}
+}

package/src/forms/form.ts

@@ -1,25 +1,38 @@
 import { BaseContext } from "koa";
 import Router from "@koa/router";
-import { Templatable, tempstream } from "tempstream";
-import { FormControl } from "./controls/controls";
-import { hasShape, is, predicates } from "@sealcode/ts-predicates";
-import { Mountable, PageErrorMessage } from "../page/page";
-import { FormField } from "./field";
+import { FlatTemplatable, Templatable, tempstream } from "tempstream";
+import {
+	hasFieldOfType,
+	hasShape,
+	is,
+	predicates,
+} from "@sealcode/ts-predicates";
+import { FormField } from "./fields/field";
+import { Fields, Mountable, PageErrorMessage } from "../page/mountable";
+
+export type FormDataPrimitive = string | string[] | undefined;
+export type FormDataValue =
+	| FormDataPrimitive
+	| Record<string, FormDataPrimitive>;
+
+export type FieldValueType<F extends FormField> = F extends FormField<infer R>
+	? R
+	: never;
+
+export type FormFieldsToValues<F extends Record<string, FormField<keyof F>>> = {
+	[Property in keyof F]: FieldValueType<F[Property]>;
+};
+
+export type FormMessage = { type: "info" | "success" | "error"; text: string };
 
 export type FormData<Fieldnames extends string = string> = {
-	values: Record<Fieldnames, string | string[] | number>;
-	raw_values: Record<Fieldnames, string | string[] | number>;
-	errors: Partial<Record<Fieldnames, string>>;
-	messages: { type: "info" | "success" | "error"; text: string }[];
+	raw_values: Record<Fieldnames, FormDataValue>;
+	messages: FormMessage[];
 };
 
-export abstract class Form<Fieldnames extends string = string>
-	implements Mountable
-{
-	abstract fields: FormField<Fieldnames>[];
-	abstract controls: FormControl[];
+export abstract class Form<F extends Fields> extends Mountable<F> {
 	defaultSuccessMessage = "Done";
-	submitButtonText = "Wyslij";
+	submitButtonText = "Wyślij";
 
 	async canAccess(
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -35,134 +48,39 @@ export abstract class Form<Fieldnames extends string = string>
 		return tempstream/* HTML */ `<div>${error.message}</div>`;
 	}
 
-	async validate(
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars
-		_: BaseContext,
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars
-		__: Record<string, unknown>
-	): Promise<{ valid: boolean; error: string }> {
-		return {
-			valid: true,
-			error: "",
-		};
-	}
-
-	private async _validate(
-		ctx: BaseContext,
-		values: Record<string, unknown>
-	): Promise<{
-		valid: boolean;
-		errors: Record<Fieldnames | "form", string>;
-	}> {
-		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-		const errors = {} as Record<Fieldnames | "form", string>;
-		let valid = true;
-		await Promise.all(
-			this.fields.map(async (field) => {
-				const { valid: fieldvalid, message: fieldmessage } =
-					await field._validate(ctx, values[field.name]);
-				if (!fieldvalid) {
-					valid = false;
-					errors[field.name] = fieldmessage;
-				}
-			})
-		);
-		const formValidationResult = await this.validate(ctx, values);
-		if (!formValidationResult.valid) {
-			valid = false;
-			errors.form = formValidationResult.error;
-		}
-		return { valid, errors };
-	}
-
-	async render(
-		ctx: BaseContext,
-		data: FormData,
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars
-		_: string
-	): Promise<Templatable> {
-		return tempstream/* HTML */ `${this.makeFormTag(
-			`${ctx.URL.pathname}/`
-		)} ${
+	async render(ctx: BaseContext, data: FormData): Promise<Templatable> {
+		return tempstream/* HTML */ `${this.makeFormTag()} ${
 			!this.controls.some((control) => control.role == "messages")
 				? this.renderMessages(ctx, data)
 				: ""
-		} ${
-			data.errors.form !== undefined
-				? `<div class="form__error">${data.errors.form}</div>`
-				: ""
 		} ${this.renderControls(ctx, data)}<input type="submit" value="${
 			this.submitButtonText
 		}"/></form>`;
 	}
 
-	public renderMessages(_: BaseContext, data: FormData): Templatable {
-		return tempstream/* HTML */ `<div class="form-messages">
-			${data.messages.map(
-				(message) =>
-					`<div class="form-message form-message--${message.type}">${message.text}</div>`
-			)}
-		</div>`;
-	}
-
-	public renderControls(ctx: BaseContext, data: FormData): Templatable {
-		return tempstream/* HTML */ `${this.controls.map((control) =>
-			control.render(ctx, this.fields, data)
-		)}`;
-	}
-
-	public makeFormTag(path: string) {
-		return `<form method="POST" action="${path}">`;
-	}
-
-	private generateData(rawData: Record<string, unknown> = {}): FormData {
-		// generates a FormData object that has the correct shape to be passed to
-		// render(), so for example it makes sure that all fields either have values or
-		// are empty string (the aren't undefined, for example). If no argument is passed,
-		// creates an object that represents an empty state of the form. If some data
-		// object is passed in the first argument, then the values in that data object are
-		// incorporated into the generated object
-
-		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-		const values = Object.fromEntries(
-			this.fields.map((f) => [
-				f.name,
-				rawData[f.name] || f.getEmptyValue(),
-			])
-		) as Record<Fieldnames, string>;
-		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-		const errors = Object.fromEntries(
-			this.fields.map((f) => [f.name, ""])
-		) as Record<Fieldnames, string>;
-		return {
-			values,
-			errors,
-			messages: [],
-			// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-			raw_values: rawData as Record<string, string>,
-		};
+	public makeFormTag(): FlatTemplatable {
+		return `<form method="POST" action="./">`;
 	}
 
 	public async onValuesInvalid(
 		ctx: BaseContext,
-		errors: Record<Fieldnames, string>,
-		form_path: string
-	) {
+		form_messages: FormMessage[]
+	): Promise<void> {
 		ctx.status = 422;
-		const { values, raw_values } = this.generateData(ctx.$body);
-		ctx.body = await this.render(
-			ctx,
-			{
-				values,
-				raw_values,
-				errors,
-				messages: [{ type: "error", text: "Some fields are invalid" }],
-			},
-			form_path
-		);
+		ctx.body = await this.render(ctx, {
+			raw_values: ctx.$body,
+
+			messages: form_messages.length
+				? form_messages
+				: [{ type: "error", text: "Some fields are invalid" }],
+		});
 	}
 
-	public async onError(ctx: BaseContext, error: unknown, form_path: string) {
+	public async onError(
+		ctx: BaseContext,
+		data: FormData,
+		error: unknown
+	): Promise<void> {
 		ctx.status = 422;
 		let error_message = "Unknown error has occured";
 		if (
@@ -171,42 +89,26 @@ export abstract class Form<Fieldnames extends string = string>
 		) {
 			error_message = error.message;
 		}
-		const { values, raw_values } = this.generateData(ctx.$body);
-		ctx.body = await this.render(
-			ctx,
-			{
-				values,
-				raw_values,
-				errors: {},
-				messages: [{ type: "error", text: error_message }],
-			},
-			form_path
-		);
+		ctx.body = await this.render(ctx, {
+			raw_values: data.raw_values,
+			messages: [{ type: "error", text: error_message }],
+		});
 	}
 
 	public abstract onSubmit(
 		ctx: BaseContext,
-		values: Record<Fieldnames, string | string[] | number>
+		data: FormData
 	): void | Promise<void>;
 
-	public async onSuccess(ctx: BaseContext, form_path: string): Promise<void> {
-		const { values, raw_values } = this.generateData(ctx.$body);
-		ctx.body = await this.render(
-			ctx,
-			{
-				values,
-				raw_values,
-				errors: {},
-				messages: [
-					{ type: "success", text: this.defaultSuccessMessage },
-				],
-			},
-			form_path
-		);
+	public async onSuccess(ctx: BaseContext, 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 mount(router: Router, path: string) {
+	public mount(router: Router, path: string): void {
 		router.use(path, async (ctx, next) => {
 			const result = await this.canAccess(ctx);
 			if (!result.canAccess) {
@@ -221,22 +123,55 @@ export abstract class Form<Fieldnames extends string = string>
 		});
 		router.get(path, async (ctx) => {
 			ctx.type = "html";
-			ctx.body = await this.render(ctx, this.generateData(), path);
+			ctx.body = await this.render(ctx, { raw_values: {}, messages: [] });
 		});
 		router.post(path, async (ctx) => {
-			const { valid, errors } = await this._validate(ctx, ctx.$body);
+			const { valid, form_messages } = await this.validate(
+				ctx,
+				ctx.$body
+			);
 			if (!valid) {
-				await this.onValuesInvalid(ctx, errors, path);
+				await this.onValuesInvalid(ctx, form_messages);
 				return;
 			}
 			try {
-				await this.onSubmit(ctx, this.generateData(ctx.$body).values);
-				await this.onSuccess(ctx, path);
-			} catch (e) {
+				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 });
-				await this.onError(ctx, e, path);
+				const message =
+					is(e, predicates.object) &&
+					hasFieldOfType(e, "message", predicates.string)
+						? e?.message
+						: is(e, predicates.string)
+						? e
+						: "Wystąpił błąd";
+
+				await this.onError(
+					ctx,
+					{
+						raw_values: ctx.$body,
+						messages: [
+							{
+								type: "error",
+								text: message,
+							},
+						],
+					},
+					e
+				);
 			}
 		});
 	}
+
+	extractRawValues(ctx: BaseContext): Record<string, FormDataValue> {
+		return ctx.$body;
+	}
 }

package/src/generate-routes.ts

@@ -52,6 +52,7 @@ export async function generateRoutes(): Promise<void> {
 
 import Router from "@koa/router";
 import { Middlewares } from "sealious";
+import { Mountable } from "@sealcode/sealgen";
 
 ${files
 	.map(
@@ -67,15 +68,25 @@ ${files
 	.map(({ actionName, url }) => `export const ${actionName}URL = "${url}";`)
 	.join("\n")}
 
+function mount(router: Router, URL: string, mountable: Mountable) {
+	router.use(URL, Middlewares.extractContext(), Middlewares.parseBody());
+	mountable.init();
+	mountable.mount(router, URL);
+	// to automatically add trailing slashes:
+	router.get(URL.slice(0, -1), (ctx) => ctx.redirect(URL));
+}
+
 export default function mountAutoRoutes(router: Router) {
+	router.use(async (ctx, next) => {
+		await next();
+		if (ctx.body instanceof Promise) {
+			// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+			ctx.body = await ctx.body;
+		}
+	});
 ${files
-	.map(
-		({
-			actionName,
-		}) => `	router.use(${actionName}URL, Middlewares.extractContext(), Middlewares.parseBody());
-	${actionName}.mount(router, ${actionName}URL);`
-	)
-	.join("\n\n")}
+	.map(({ actionName }) => `	mount(router, ${actionName}URL, ${actionName});`)
+	.join("\n")}
 }
 `
 	);

package/src/index.ts

@@ -1,16 +1,18 @@
 import Sealious from "sealious";
+import { FormDataValue } from "./forms/form";
 
 declare module "koa" {
 	interface BaseContext {
 		$context: Sealious.Context;
-		$body: Record<string, unknown>;
+		$body: Record<string, FormDataValue>;
 	}
 }
 
-export * from "./forms/form";
 export * from "./forms/controls/controls";
-export * from "./forms/field";
+export * from "./forms/fields/field";
+export * from "./page/mountable";
 export * from "./page/page";
+export * from "./forms/form";
 export * from "./page/props-parser";
 export * from "./utils/utils";
-export * from "./forms/validator";
+export * from "./page/list";

package/src/make-hidden-inputs.ts

@@ -0,0 +1,22 @@
+import { BaseContext } from "koa";
+import { Templatable, tempstream } from "tempstream";
+import { FormDataValue, FormField } from ".";
+
+export function makeHiddenInputs(
+	ctx: BaseContext,
+	fields: Record<string, FormField>,
+	values: Record<string, FormDataValue>,
+	fields_to_skip: string[]
+): Templatable {
+	return tempstream`${Object.entries(fields)
+		.filter(([key]) => !fields_to_skip.includes(key))
+		.map(
+			([key, field]) => tempstream/* HTML */ `<input
+				type="hidden"
+				name="${key}"
+				value="${field
+					.getValue(ctx, values)
+					.then((r) => JSON.stringify(r.raw))}"
+			/>`
+		)}`;
+}