@sealcode/sealgen 0.8.48 → 0.8.49

package/src/page/list.ts

@@ -0,0 +1,240 @@
+import { Context } from "koa";
+import {
+	Collection,
+	CollectionItem,
+	ItemList,
+	Context as SealiousContext,
+	CollectionInput,
+} from "sealious";
+
+import { Templatable, tempstream, FlatTemplatable } from "tempstream";
+import { peopleWhoCan } from "./access-control";
+import { Page } from "./page";
+import { ShapeToType } from "@sealcode/ts-predicates";
+import { FormControl } from "../forms/controls/controls";
+import { FormField, NumberField } from "../forms/fields/field";
+import { naturalNumbers, UrlWithNewParams } from "../utils/utils";
+import { FormDataValue } from "..";
+import { makeHiddenInputs } from "../make-hidden-inputs";
+
+export const BasePagePropsShape = <const>{};
+export type BasePageProps = ShapeToType<typeof BasePagePropsShape>;
+
+export const BaseListPageFields = <const>{
+	page: new NumberField(false, 1),
+	itemsPerPage: new NumberField(false, 12),
+};
+
+export abstract class ListPage<
+	ItemType,
+	F extends typeof BaseListPageFields
+> extends Page<F> {
+	abstract getItems(
+		ctx: Context,
+		page: number,
+		itemsPerPage: number,
+		values: Record<string, FormDataValue>
+	): Promise<ItemType[]>;
+
+	abstract getTotalPages(
+		ctx: Context,
+		itemsPerPage: number,
+		values: Record<string, FormDataValue>
+	): Promise<number>;
+
+	abstract renderItem(
+		ctx: Context,
+		item: ItemType,
+		index: number
+	): Promise<FlatTemplatable>;
+
+	filterFields: Record<string, FormField> = {};
+	filterControls: FormControl[] = [];
+
+	init(): void {
+		super.init();
+		for (const [fieldname, field] of Object.entries(this.filterFields)) {
+			field.init(fieldname);
+		}
+	}
+
+	renderListContainer(_: Context, content: Templatable): FlatTemplatable {
+		return tempstream`<div>${content}</div>`;
+	}
+
+	async getPaginationConfig(ctx: Context) {
+		const values = await this.extractRawValues(ctx);
+		const { parsed: page } = await this.fields.page.getValue(ctx, values);
+		const { parsed: itemsPerPage } =
+			await this.fields.itemsPerPage.getValue(ctx, values);
+		return { page, itemsPerPage };
+	}
+
+	async renderItems(
+		ctx: Context,
+		values?: Record<string, FormDataValue>,
+		items?: ItemType[]
+	): Promise<FlatTemplatable> {
+		if (!values) {
+			values = await this.extractRawValues(ctx);
+		}
+		const { itemsPerPage, page } = await this.getPaginationConfig(ctx);
+		const items_promise = this.getItems(ctx, page, itemsPerPage, values);
+		return tempstream`${(items
+			? Promise.resolve(items)
+			: items_promise
+		).then((items) =>
+			items.map((item, index) => this.renderItem(ctx, item, index))
+		)}`;
+	}
+
+	async render(ctx: Context): Promise<FlatTemplatable> {
+		const values = await this.extractRawValues(ctx);
+
+		return tempstream`${this.renderPagination(ctx, values)}
+			  ${this.renderFilters(ctx)}
+${this.renderListContainer(ctx, this.renderItems(ctx, values))}`;
+	}
+
+	async renderPagination(
+		ctx: Context,
+		values: Record<string, FormDataValue>
+	): Promise<FlatTemplatable> {
+		const { itemsPerPage, page } = await this.getPaginationConfig(ctx);
+		const totalIems = await this.getTotalPages(ctx, itemsPerPage, values);
+
+		return tempstream/* HTML */ `<center>
+			${page > 1 ? this.renderPageButton(ctx, 1, "Pierwsza strona") : ""}
+			${page > 1
+				? this.renderPageButton(ctx, page - 1, "Poprzednia strona")
+				: ""}
+
+			<select onchange="if (this.value) Turbo.visit(this.value)">
+				${Array.from(naturalNumbers(1, totalIems)).map(
+					(n) => /* HTML */ `<option
+						value="${UrlWithNewParams(
+							ctx,
+							//eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+							this.propsParser.overwriteProp(ctx, {
+								page: n,
+							} as Partial<Record<string, unknown>>)
+						)}"
+						${page === n ? "selected" : ""}
+					>
+						${n}
+					</option>`
+				)}
+			</select>
+			${page < totalIems
+				? this.renderPageButton(ctx, page + 1, "Następna strona")
+				: ""}
+			${page < totalIems
+				? this.renderPageButton(ctx, totalIems, "Ostatnia strona")
+				: ""}
+		</center>`;
+	}
+
+	private renderPageButton(ctx: Context, page: number, text: string) {
+		return /* HTML */ `<a
+			href="${UrlWithNewParams(
+				ctx,
+				//eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+				this.propsParser.overwriteProp(ctx, {
+					page,
+				} as Partial<Record<string, unknown>>)
+			)}"
+			>${text}</a
+		>`;
+	}
+
+	async getFilterValues(ctx: Context): Promise<Record<string, unknown>> {
+		const filter = {} as Record<string, unknown>;
+		const raw_values = await this.extractRawValues(ctx);
+		for (const [fieldname, field] of Object.entries(this.filterFields)) {
+			// eslint-disable-next-line no-await-in-loop
+			const { parsed } = await field.getValue(ctx, raw_values);
+			filter[fieldname] = field.mapToFilter(parsed);
+		}
+		return filter;
+	}
+
+	async renderFilters(ctx: Context): Promise<FlatTemplatable> {
+		const values = await this.extractRawValues(ctx);
+		return tempstream/* HTML */ `<form method="GET">
+			${makeHiddenInputs(ctx, this.fields, values, [
+				"page",
+				...Object.values(this.filterFields).map((f) => f.name),
+			])}
+			${this.filterControls.map((control) => {
+				// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+				return control.render(
+					this.makeFormControlContext(
+						ctx,
+						{ raw_values: values, messages: [] },
+						false
+					)
+				);
+			})}
+		</form>`;
+	}
+}
+
+export abstract class SealiousItemListPage<
+	C extends Collection,
+	F extends typeof BaseListPageFields
+> extends ListPage<CollectionItem<C>, F> {
+	constructor(public collection: C) {
+		super();
+	}
+
+	async getContextForList(ctx: Context): Promise<SealiousContext> {
+		return ctx.$context;
+	}
+
+	async getTotalPages(ctx: Context, itemsPerPage: number): Promise<number> {
+		const query = this.collection.list(await this.getContextForList(ctx));
+		await this.addFilter(ctx, query);
+		const { items } = await query.fetch();
+		return Math.ceil(items.length / itemsPerPage);
+	}
+
+	protected async addFilter(ctx: Context, list: ItemList<C>): Promise<void> {
+		const filters = await this.getFilterValues(ctx);
+
+		for (const key in filters) {
+			if (filters[key] === undefined || filters[key] == "") {
+				delete filters[key];
+			}
+		}
+		if (Object.keys(filters).length) {
+			list.filter(filters as Partial<CollectionInput<C>>);
+		}
+	}
+
+	async makeQuery(ctx: Context): Promise<ItemList<C>> {
+		return this.collection.list(await this.getContextForList(ctx));
+	}
+
+	async getItems(
+		ctx: Context,
+		page: number,
+		itemsPerPage: number
+	): Promise<CollectionItem<C>[]> {
+		const query = await this.makeQuery(ctx);
+		await this.addFilter(ctx, query);
+		const { items } = await query
+			.paginate({ items: itemsPerPage, page })
+			.fetch();
+		return items;
+	}
+
+	async renderItem(
+		_: Context,
+		item: CollectionItem<C>,
+		index: number
+	): Promise<FlatTemplatable> {
+		return `<div>${item.id}</div>`;
+	}
+
+	canAccess = peopleWhoCan("list", this.collection);
+}

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

@@ -0,0 +1,158 @@
+import { ShapeToType } from "@sealcode/ts-predicates";
+import { Context } from "koa";
+import { FlatTemplatable, tempstream } from "tempstream";
+import {
+	FormControl,
+	FormControlContext,
+} from "../forms/controls/form-control";
+import { FieldsToShape, 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<boolean, any>>;
+
+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);
+		}
+	}
+
+	makeFormControlContext(
+		ctx: Context,
+		data: FormData,
+		validate: boolean,
+		field_name_prefix = this.field_names_prefix,
+		form_id = this.form_id
+	) {
+		return new FormControlContext(
+			ctx,
+			data.raw_values,
+			data.messages,
+			field_name_prefix,
+			form_id,
+			validate
+		);
+	}
+
+	// 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(fctx: FormControlContext): FlatTemplatable {
+		return tempstream/* HTML */ `${this.controls.map((control) =>
+			control.render(fctx)
+		)}`;
+	}
+
+	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
+	): Promise<Record<string, FormDataValue>>;
+
+	async getParsedValues(
+		ctx: Context
+	): Promise<ShapeToType<FieldsToShape<F>>> {
+		const raw_values = await this.extractRawValues(ctx);
+		const result: Record<string, unknown> = {};
+		const promises = Object.entries(this.fields).map(
+			async ([key, field]) => {
+				const { parsed } = await field.getValue(ctx, raw_values);
+				result[key] = parsed;
+			}
+		);
+		await Promise.all(promises);
+		return result as ShapeToType<FieldsToShape<F>>;
+	}
+
+	async getDatabaseValues(
+		ctx: Context
+	): Promise<ShapeToType<FieldsToShape<F>>> {
+		const raw_values = await this.extractRawValues(ctx);
+		const result: Record<string, unknown> = {};
+		const promises = Object.entries(this.fields).map(
+			async ([key, field]) => {
+				const db_value = await field.getDatabaseValue(ctx, raw_values);
+				if (db_value !== undefined) {
+					result[key] = db_value;
+				}
+			}
+		);
+		await Promise.all(promises);
+		return result as ShapeToType<FieldsToShape<F>>;
+	}
+}

package/src/page/mountable.ts

@@ -0,0 +1,13 @@
+import Router from "@koa/router";
+
+import { Context } from "koa";
+
+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 }>;
+}

package/src/page/page.ts

@@ -0,0 +1,46 @@
+import Router from "@koa/router";
+import { Context } from "koa";
+
+import { FlatTemplatable, tempstream } from "tempstream";
+import { AllQueryParams } from "..";
+import { FormDataValue } from "../forms/form";
+import {
+	Fields,
+	MountableWithFields,
+	PageErrorMessage,
+} from "./mountable-with-fields";
+import { PagePropsParser } from "./props-parser";
+
+export abstract class Page<
+	F extends Fields = Record<string, never>
+> extends MountableWithFields<F> {
+	propsParser: PagePropsParser<Record<keyof Fields, unknown>> =
+		new AllQueryParams();
+	controls = [];
+
+	mount(router: Router, path: string): void {
+		router.get(path, async (ctx) => {
+			ctx.body = await this.render(ctx);
+		});
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	async canAccess(_: Context) {
+		return { canAccess: true, message: "" };
+	}
+
+	async renderError(
+		_: Context,
+		error: PageErrorMessage
+	): Promise<FlatTemplatable> {
+		return tempstream/* HTML */ `<div>${error.message}</div>`;
+	}
+
+	public abstract render(ctx: Context): Promise<FlatTemplatable>;
+
+	async extractRawValues(
+		ctx: Context
+	): Promise<Record<string, FormDataValue>> {
+		return this.propsParser.decode(ctx) || {};
+	}
+}

package/src/page/props-parser.ts

@@ -0,0 +1,38 @@
+import { Context } from "koa";
+import merge from "merge";
+import { FormData, FormDataValue } from "..";
+import { BasePageProps } from "./list";
+
+export type EncodedProps = Record<string, unknown>;
+
+// page props parser is only tasked with getting the raw props from *somewhere*
+// and being able to put new values back to that somewhere. Parsing to numbers
+// or any other exotic types is done by fields logic.
+
+export abstract class PagePropsParser<PropsType> {
+	abstract decode(ctx: Context): Record<string, FormDataValue>;
+	abstract encode(props: Record<string, FormData>): EncodedProps;
+	abstract getHTMLInputName(prop_name: string): string;
+
+	overwriteProp(ctx: Context, new_props: Partial<PropsType>): EncodedProps {
+		const result = {};
+		merge.recursive(result, this.decode(ctx), new_props);
+		return result;
+	}
+}
+
+export class AllQueryParams<
+	PropsType extends BasePageProps
+> extends PagePropsParser<PropsType> {
+	decode(ctx: Context): Record<string, FormDataValue> {
+		return ctx.query;
+	}
+
+	encode(props: PropsType): Record<string, unknown> {
+		return props;
+	}
+
+	getHTMLInputName(prop_name: string): string {
+		return prop_name;
+	}
+}

package/src/page/stateful-page.ts

@@ -0,0 +1,202 @@
+import Router from "@koa/router";
+import { predicates, hasShape, is } from "@sealcode/ts-predicates";
+import deepmerge, { ArrayMergeOptions } from "deepmerge";
+import { BaseContext } from "koa";
+import { Templatable, tempstream } from "tempstream";
+import { from_base64, to_base64 } from "../utils/base64";
+import { ExtractTail } from "../utils/utils";
+import { Mountable } from "./mountable";
+
+export abstract class StatefulPage<
+	State extends Record<string, unknown>,
+	Actions extends Record<
+		string,
+		(
+			state: State,
+			inputs: Record<string, string>,
+			...args: unknown[]
+		) => State
+	>
+> extends Mountable {
+	abstract actions: Actions;
+	abstract getInitialState(): State;
+	abstract render(
+		ctx: BaseContext,
+		state: State,
+		inputs: Record<string, string>
+	): Templatable | Promise<Templatable>;
+
+	async canAccess() {
+		return <const>{ canAccess: true, message: "" };
+	}
+
+	constructor() {
+		super();
+		const original_render = this.render.bind(this);
+		this.render = async (
+			ctx: BaseContext,
+			state: State,
+			inputs: Record<string, string>
+		) => {
+			return this.wrapInLayout(
+				ctx,
+				this.wrapInForm(
+					state,
+					await original_render(ctx, state, inputs)
+				)
+			);
+		};
+	}
+
+	abstract wrapInLayout(ctx: BaseContext, content: Templatable): Templatable;
+
+	wrapInForm(state: State, content: Templatable): Templatable {
+		return tempstream/* HTML */ `<form action="./" method="POST">
+			<input
+				name="state"
+				type="hidden"
+				value="${to_base64(JSON.stringify(state))}"
+			/>
+			${content}
+		</form>`;
+	}
+
+	makeActionButton<ActionName extends keyof Actions>(
+		state: State,
+		action_description:
+			| {
+					action: ActionName;
+					label?: string;
+			  }
+			| ActionName,
+		...args: ExtractTail<ExtractTail<Parameters<Actions[ActionName]>>>
+	) {
+		let label, action: string;
+		if (is(action_description, predicates.object)) {
+			action = action_description.action.toString();
+			label = action_description.label || action;
+		} else {
+			action = action_description.toString();
+			label = action;
+		}
+		return /* HTML */ `
+			<input
+				type="submit"
+				value=${label}
+				formaction="./?action=${action}&args=${to_base64(
+					JSON.stringify(args)
+				)}"
+			/>
+		`;
+	}
+
+	extractState(ctx: BaseContext):
+		| {
+				state: State;
+				inputs: Record<string, string>;
+				action: keyof Actions;
+				action_args: string;
+		  }
+		| {
+				state: State;
+				inputs: Record<string, string>;
+				action: null;
+				action_args: null;
+		  } {
+		if (
+			!hasShape(
+				{
+					action: predicates.maybe(predicates.string),
+					state: predicates.string,
+					args: predicates.maybe(predicates.string),
+					$: predicates.maybe(predicates.object),
+				},
+				ctx.$body
+			)
+		) {
+			console.error("Wrong data: ", ctx.$body);
+			throw new Error("wrong formdata shape");
+		}
+		const inputs = Object.fromEntries(
+			Object.entries(ctx.$body).filter(
+				([key]) => !["action", "state", "args", "$"].includes(key)
+			)
+		) as Record<string, string>;
+		// the "$" key is parsed as dot notation and overrides the state
+
+		const original_state = JSON.parse(from_base64(ctx.$body.state));
+
+		const modified_state = deepmerge(original_state, ctx.$body.$ || {}, {
+			arrayMerge: (
+				target: any[],
+				source: any[],
+				options: ArrayMergeOptions
+			) => {
+				// https://github.com/TehShrike/deepmerge#user-content-arraymerge-example-combine-arrays
+				const destination = target.slice();
+
+				source.forEach((item, index) => {
+					if (typeof destination[index] === "undefined") {
+						destination[index] =
+							options.cloneUnlessOtherwiseSpecified(
+								item,
+								options
+							);
+					} else if (options.isMergeableObject(item)) {
+						destination[index] = deepmerge(
+							target[index],
+							item,
+							options
+						);
+					} else if (target.indexOf(item) === -1) {
+						destination.push(item);
+					}
+				});
+				return destination;
+			},
+		}) as State;
+
+		if (ctx.$body.action && ctx.$body.args) {
+			return {
+				state: modified_state,
+				action: ctx.$body.action as string,
+				inputs,
+				action_args: ctx.$body.args,
+			};
+		} else {
+			return {
+				state: modified_state,
+				action: null,
+				action_args: null,
+				inputs,
+			};
+		}
+	}
+
+	mount(router: Router, path: string) {
+		router.get(path, (ctx) => {
+			ctx.body = this.render(ctx, this.getInitialState(), {});
+		});
+
+		router.post(path, (ctx) => {
+			const { action, state, inputs, action_args } =
+				this.extractState(ctx);
+			if (action) {
+				ctx.body = this.render(
+					ctx,
+					this.actions[action](
+						state,
+						inputs,
+						...(JSON.parse(
+							from_base64(action_args as string)
+						) as unknown[])
+					),
+					inputs
+				);
+			} else {
+				ctx.body = this.render(ctx, state, inputs);
+			}
+			ctx.status = 433;
+		});
+	}
+}

package/src/sanitize.ts

@@ -0,0 +1,9 @@
+export function attribute(raw: string | number): string {
+	if (typeof raw !== "string") {
+		raw = raw.toString();
+	}
+	return (raw || "")
+		.replaceAll("<", "&lt;")
+		.replace('"', "&quot;")
+		.replaceAll("'", "&#39;");
+}