@sealcode/sealgen 0.8.48 → 0.8.49

package/src/forms/multiform.ts

@@ -0,0 +1,236 @@
+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, unknown>>;
+
+	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 = async (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}'`
+					);
+				}
+			}
+		}
+	}
+
+	async extractRawValues(
+		ctx: Context
+	): Promise<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, unknown>]> {
+		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,
+		show_field_errors: boolean
+	): 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: await this.getSubformRawValues(ctx, sub_form_name),
+				messages: [],
+			},
+			show_field_errors
+		);
+	}
+
+	async getSubformRawValues(
+		ctx: Context,
+		sub_form_name: string
+	): Promise<Record<string, FormDataValue>> {
+		const result = Object.fromEntries(
+			Object.entries(await 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> = {},
+		show_field_errors: boolean
+	): 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 actually 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, show_field_errors)}
+						<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, [], {}, false);
+		});
+
+		for (const [key, form] of Object.entries(this.forms)) {
+			router.post(
+				path + (path.endsWith("/") ? "" : "/") + key,
+				async (ctx) => {
+					const result = await form.canAccess(ctx);
+					if (!result.canAccess) {
+						ctx.body = this.renderError(ctx, {
+							type: "access",
+							message: result.message,
+						});
+						ctx.status = 403;
+						return;
+					}
+
+					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,
+							},
+							true
+						);
+					} else if (reaction.action == "redirect") {
+						ctx.status = 303;
+						ctx.redirect(reaction.url);
+					}
+				}
+			);
+		}
+	}
+}

package/src/generate-collections.ts

@@ -0,0 +1,77 @@
+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";
+
+const target_locreq = _locreq(process.cwd());
+
+async function extractCollectionClassname(
+	full_file_path: string
+): Promise<string> {
+	const file_content = await fs.readFile(full_file_path, "utf-8");
+	const result = /export default class (\w+)/.exec(file_content);
+	if (result === null) {
+		throw new Error("Missing 'export default class' statement?");
+	}
+	return assertType(
+		result[1],
+		predicates.string,
+		`Missing export default class in '${full_file_path}'?`
+	);
+}
+
+export async function generateCollections(): Promise<void> {
+	const collections_dir = target_locreq.resolve("src/back/collections");
+	const files = (await fs.readdir(collections_dir)).filter(
+		(f) =>
+			!/\.(sub)?test\./.exec(f) &&
+			f != "collections.ts" &&
+			f.endsWith(".ts")
+	);
+	const file_data = await Promise.all(
+		files.map(async (file) => {
+			const full_path = target_locreq.resolve(
+				"src/back/collections/" + file
+			);
+			const class_name = await extractCollectionClassname(full_path);
+			return {
+				class_name,
+				file,
+				full_path,
+				urlname: file.replace(".ts", ""),
+			};
+		})
+	);
+
+	const content = `// DO NOT EDIT! This file is generated automaticaly with 'npm run generate-collections'
+import { App } from "sealious";
+
+${file_data
+	.map(
+		({ class_name, urlname }) =>
+			`import _${class_name} from "./${urlname}";`
+	)
+	.join("\n")}
+	
+${file_data
+	.map(
+		({ class_name }) => `export const ${class_name} = new _${class_name}();`
+	)
+	.join("\n")}
+
+export const collections = {
+	...App.BaseCollections,
+${file_data
+	.map(({ class_name, urlname }) => `	"${urlname}": ${class_name},`)
+	.join("\n")}
+};`;
+	await fs.writeFile(
+		target_locreq.resolve("src/back/collections/collections.ts"),
+		prettier.format(content, await getPrettierConfig())
+	);
+	// eslint-disable-next-line no-console
+	console.log(
+		"Successfuly generated new src/back/collections/collections.ts file"
+	);
+}

package/src/generate-routes.ts

@@ -0,0 +1,121 @@
+import { promises as fs } from "fs";
+import * as prettier from "prettier";
+import { relative } from "path";
+import _locreq from "locreq";
+import { walkDir } from "./utils/walk";
+import { importPath } from "./utils/import-path";
+import { assertType, predicates } from "@sealcode/ts-predicates";
+import { unescape_url_params } from "./utils/escape-url-params";
+import { getPrettierConfig } from "./utils/prettier";
+
+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 = /export const actionName = "(\w+)"/.exec(file_content);
+	if (result === null) {
+		throw new Error("Missing 'export const actionName' statement?");
+	}
+	return assertType(
+		result[1],
+		predicates.string,
+		"Missing export default class?"
+	);
+}
+
+function generateURL(actionName: string, url: string) {
+	const parts = url.split("/");
+	const params = parts
+		.filter((part) => part.startsWith(":"))
+		.map((part) => part.slice(1));
+	if (params.length === 0) {
+		return `export const ${actionName}URL = "${url}";`;
+	}
+	return `export const ${actionName}URL = (${params
+		.map((s) => s + ": string")
+		.join(", ")})=>\`${parts
+		.map((part) =>
+			part.startsWith(":") ? "${" + part.slice(1) + "}" : part
+		)
+		.join("/")}\`;
+        ${actionName}URL.params = [${params
+		.map((param) => `"${param}"`)
+		.join(",")}];
+        ${actionName}URL.rawURL = "${url}";`;
+}
+
+export async function generateRoutes(): Promise<void> {
+	const files = await Promise.all(
+		(
+			await walkDir(target_locreq.resolve("src/back/routes"))
+		)
+			.filter(
+				(f) =>
+					f.endsWith(".page.ts") ||
+					f.endsWith(".form.ts") ||
+					f.endsWith(".multiform.ts") ||
+					f.endsWith(".list.ts") ||
+					f.endsWith(".redirect.ts") ||
+					f.endsWith(".post.ts") ||
+					f.endsWith(".sreact.ts")
+			)
+			.map(async (fullpath) => ({
+				fullpath,
+				actionName: await extractActionName(fullpath),
+				url: unescape_url_params(
+					"/" +
+						relative(
+							target_locreq.resolve("src/back/routes"),
+							fullpath
+						).replace(/\..+/, "") +
+						"/" // trailing slash is important here, as it enables to use the entire path while building relative URLs. For example, while visiting /users/123, the path ./add-photo leads to /users/add-photo. While visiting /users/123/ (note the trailing slash), the path ./add-photo leads to /users/123/add-photo
+				),
+			}))
+	);
+
+	const routes_content = `// DO NOT EDIT! This file is generated automaticaly with npm run generate-routes
+
+import Router from "@koa/router";
+import { mount } from "@sealcode/sealgen";
+import * as URLs from "./urls"
+
+${files
+	.map(
+		({ actionName, fullpath }) =>
+			`import { default as ${actionName} } from "${importPath(
+				target_locreq.resolve("src/back/routes/routes.ts"),
+				fullpath
+			)}";`
+	)
+	.join("\n")}
+
+export default function mountAutoRoutes(router: Router) {
+${files
+	.map(
+		({ actionName }) =>
+			`	mount(router, URLs.${actionName}URL, ${actionName});`
+	)
+	.join("\n")}
+}`;
+
+	const urls_content = `${files
+		.sort(({ url: url1 }, { url: url2 }) => (url1 < url2 ? -1 : 1))
+		.map(({ actionName, url }) => generateURL(actionName, url))
+		.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 fs.writeFile(
+		target_locreq.resolve("src/back/routes/urls.ts"),
+		prettier.format(urls_content, prettier_config)
+	);
+	// eslint-disable-next-line no-console
+	console.log(
+		"Successfuly generated new src/back/routes/routes.ts and src/back/routes/urls.ts"
+	);
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+import Sealious, { App } from "sealious";
+import { FormDataValue } from "./forms/form";
+
+declare module "koa" {
+	interface BaseContext {
+		$context: Sealious.Context;
+		$app: App;
+		$body: Record<string, FormDataValue>;
+	}
+}
+
+export * as Controls from "./forms/controls/controls";
+export * as Fields from "./forms/fields/field";
+export * from "./page/mountable";
+export * from "./page/page";
+export * from "./page/stateful-page";
+export * from "./forms/form";
+export * from "./page/props-parser";
+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";
+export * from "./mount";

package/src/make-env.ts

@@ -0,0 +1,15 @@
+import os from "os";
+import { promises as fs } from "fs";
+
+import _locreq from "locreq";
+const target_locreq = _locreq(process.cwd());
+
+export async function makeEnv(): Promise<void> {
+	const { uid, gid } = os.userInfo();
+	const content = `USER_ID=${uid}
+GROUP_ID=${gid}
+`;
+	const path = target_locreq.resolve(".env");
+	await fs.writeFile(path, content);
+	console.log("wrote .env");
+}

package/src/make-hidden-inputs.ts

@@ -0,0 +1,24 @@
+import { Context } from "koa";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { FormDataValue } from ".";
+import { FormField } from "./forms/fields/field";
+import { attribute } from "./sanitize";
+
+export function makeHiddenInputs(
+	ctx: Context,
+	fields: Record<string, FormField>,
+	values: Record<string, FormDataValue>,
+	fields_to_skip: string[]
+): FlatTemplatable {
+	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) => attribute(JSON.stringify(r.raw) || ""))}"
+			/>`
+		)}`;
+}

package/src/mount.ts

@@ -0,0 +1,85 @@
+import Router from "@koa/router";
+import Koa, { BaseContext, Context } from "koa";
+import { Middlewares } from "sealious";
+import { Mountable } from "./page/mountable";
+
+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");
+}
+
+export function mount(
+	router: Router,
+	url: string | { rawURL: string },
+	mountable: Mountable,
+	use_dummy_app = false
+): void {
+	const raw_url = typeof url === "string" ? url : url.rawURL;
+	const args = use_dummy_app
+		? [
+				async (ctx: BaseContext, next: any) => {
+					// this dummy is a temporary solution it's ilustrating the ways that
+					// sealgen is coupled with sealious. Definitely room for improvement in this
+					// regard
+					// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+					ctx.$app = {
+						// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+						Logger: new Proxy(
+							{},
+							{
+								get: (_target: any, prop: any) => {
+									if (prop === "info") {
+										// eslint-disable-next-line @typescript-eslint/no-empty-function
+										return () => {};
+									} else {
+										// eslint-disable-next-line @typescript-eslint/no-empty-function
+										return () => {};
+									}
+								},
+							}
+						),
+						getString: (x: string) => x,
+						// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					} as any;
+					// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+					await next();
+				},
+				Middlewares.parseBody(),
+				handleHtmlPromise,
+		  ]
+		: [
+				Middlewares.extractContext(),
+				Middlewares.parseBody(),
+				handleHtmlPromise,
+		  ];
+
+	router.use(raw_url, ...args);
+	mountable.init();
+
+	// to automatically add trailing slashes:
+	router.get(raw_url.slice(0, -1), async (ctx, next) => {
+		const url2 = ctx.URL;
+		if (!url2.pathname.endsWith("/")) {
+			url2.pathname += "/";
+			ctx.redirect(url2.href);
+		}
+		await next();
+	});
+
+	router.use(raw_url, async (ctx, next) => {
+		ctx.set("content-type", "text/html;charset=utf-8");
+		const access_result = await mountable.canAccess(ctx);
+		if (!access_result.canAccess) {
+			ctx.status = 403;
+			ctx.body = access_result.message || "no access";
+			return;
+		}
+		await next();
+	});
+
+	mountable.mount(router, raw_url);
+}

package/src/page/access-control.ts

@@ -0,0 +1,18 @@
+import { Context } from "koa";
+import { ActionName, Collection } from "sealious";
+
+export function peopleWhoCan(action: ActionName, collection: Collection) {
+	return async function (ctx: Context) {
+		const policy = collection.getPolicy(action);
+		const result = await policy.check(ctx.$context);
+		if (!result) {
+			ctx.status = 403;
+			return { canAccess: false, message: "Not allowed" };
+		}
+		if (!result.allowed) {
+			ctx.status = 403;
+			return { canAccess: false, message: result.reason };
+		}
+		return { canAccess: true, message: "" };
+	};
+}