@sealcode/sealgen 0.11.8 → 0.12.0

package/lib/src/page/stateful-page.js

@@ -0,0 +1,97 @@
+import { predicates, hasShape, is } from "@sealcode/ts-predicates";
+import deepmerge from "deepmerge";
+import { tempstream } from "tempstream";
+import { from_base64, to_base64 } from "../utils/base64.js";
+import { Mountable } from "./mountable.js";
+export class StatefulPage extends Mountable {
+    async canAccess() {
+        return { canAccess: true, message: "" };
+    }
+    constructor() {
+        super();
+        const original_render = this.render.bind(this);
+        this.render = async (ctx, state, inputs) => {
+            return this.wrapInLayout(ctx, this.wrapInForm(state, await original_render(ctx, state, inputs)));
+        };
+    }
+    wrapInForm(state, content) {
+        return tempstream /* HTML */ `<form action="./" method="POST">
+			<input
+				name="state"
+				type="hidden"
+				value="${to_base64(JSON.stringify(state))}"
+			/>
+			${content}
+		</form>`;
+    }
+    makeActionButton(state, action_description, ...args) {
+        let label, action;
+        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) {
+        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)));
+        // 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, source, _options) => {
+                // https://github.com/TehShrike/deepmerge#user-content-arraymerge-example-combine-arrays
+                return source;
+            },
+        });
+        if (ctx.$body.action && ctx.$body.args) {
+            return {
+                state: modified_state,
+                action: ctx.$body.action,
+                inputs,
+                action_args: ctx.$body.args,
+            };
+        }
+        else {
+            return {
+                state: modified_state,
+                action: null,
+                action_args: null,
+                inputs,
+            };
+        }
+    }
+    mount(router, path) {
+        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))), inputs);
+            }
+            else {
+                ctx.body = this.render(ctx, state, inputs);
+            }
+            ctx.status = 433;
+        });
+    }
+}
+//# sourceMappingURL=stateful-page.js.map

package/lib/src/run.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=run.js.map

package/lib/src/sample-index.js

@@ -0,0 +1,3 @@
+import { hehe } from "./sample-lib.js";
+hehe.hehe();
+//# sourceMappingURL=sample-index.js.map

package/lib/src/sample-lib.js

@@ -0,0 +1,6 @@
+export class hehe {
+    static hehe() {
+        console.log("hehe");
+    }
+}
+//# sourceMappingURL=sample-lib.js.map

package/lib/src/sanitize.js

@@ -0,0 +1,10 @@
+export function attribute(raw) {
+    if (typeof raw !== "string") {
+        raw = raw.toString();
+    }
+    return (raw || "")
+        .replaceAll("<", "&lt;")
+        .replace('"', "&quot;")
+        .replaceAll("'", "&#39;");
+}
+//# sourceMappingURL=sanitize.js.map

package/lib/src/templates/collection.js

@@ -0,0 +1,12 @@
+export function collectionTemplate(collection_name) {
+    return `import { Collection, FieldTypes, Policies } from "sealious";
+
+export default class ${collection_name} extends Collection {
+	fields = {
+		content: new FieldTypes.Text(),
+	};
+	defaultPolicy = new Policies.Public();
+}
+`;
+}
+//# sourceMappingURL=collection.js.map

package/lib/src/templates/form.js

@@ -0,0 +1,57 @@
+import { curryImportPath } from "../utils/import-path.js";
+export async function formTemplate(action_name, newfilefullpath) {
+    const rel = curryImportPath(newfilefullpath);
+    return `import { Context } from "koa";
+import { Form, FormData, FormDataValue, Fields, Controls } from "@sealcode/sealgen";
+import html from "${rel("src/back/html.js")}";
+import { Users } from "${rel("src/back/collections/collections.js")}";
+
+export const actionName = "${action_name}";
+
+const fields = {
+	email: new Fields.CollectionField(true, Users.fields.email),
+	password: new Fields.SimpleFormField(true),
+};
+
+export const ${action_name}Shape = Fields.fieldsToShape(fields);
+
+export default new (class ${action_name}Form extends Form<typeof fields, void> {
+	defaultSuccessMessage = "Formularz wypełniony poprawnie";
+	fields = fields;
+
+	controls = [
+		new Controls.SimpleInput(fields.email, { label: "Email:", type: "email" }),
+		new Controls.SimpleInput(fields.password, { label: "Password:", type: "password" }),
+	];
+
+	async validateValues(
+		ctx: Context,
+		data: Record<string, FormDataValue>
+	): Promise<{ valid: boolean; error: string }> {
+		// just an example
+		const { parsed: email } = await this.fields.email.getValue(ctx, data);
+		const { parsed: password } = await this.fields.password.getValue(ctx, data);
+		if ((password || "").length > (email || "").length) {
+			return { valid: false, error: "Password cannot be longer than email" };
+		} else {
+			return { valid: true, error: "" };
+		}
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	async canAccess(_: Context) {
+		return { canAccess: true, message: "" };
+	}
+
+	async onSubmit() {
+		//noop
+		return;
+	}
+
+	async render(ctx: Context, data: FormData, show_field_errors: boolean) {
+		return html(ctx, "${action_name}", await super.render(ctx, data, show_field_errors));
+	}
+})();
+`;
+}
+//# sourceMappingURL=form.js.map

package/lib/src/templates/jdd-component.js

@@ -0,0 +1,39 @@
+import { toKebabCase, toPascalCase } from "js-convert-case";
+export function jddComponentTemplate(component_name) {
+    return `import { FlatTemplatable, TempstreamJSX } from "tempstream";
+import {
+	Component,
+	ComponentArguments,
+	ExtractStructuredComponentArgumentsValues,
+	JDDContext,
+} from "@sealcode/jdd";
+
+const component_arguments = {
+	title: new ComponentArguments.ShortText(),
+	content: new ComponentArguments.Markdown(),
+} as const;
+
+export class ${toPascalCase(component_name)} extends Component<typeof component_arguments> {
+	getArguments() {
+		return component_arguments;
+	}
+
+	toHTML(
+		{
+			title,
+			content,
+		}: ExtractStructuredComponentArgumentsValues<typeof component_arguments>,
+		{ render_markdown }: JDDContext
+	): FlatTemplatable {
+		return (
+			<div class="${toKebabCase(component_name)}">
+				<h2>{title} • ${toPascalCase(component_name)} </h2>
+				<div>{render_markdown(content)}</div>
+			</div>
+		);
+	}
+}
+
+`;
+}
+//# sourceMappingURL=jdd-component.js.map

package/lib/src/templates/list.js

@@ -0,0 +1,139 @@
+import _locreq from "locreq";
+import { curryImportPath } from "../utils/import-path.js";
+import prompts from "prompts";
+import { listCollections } from "../utils/list-collections.js";
+import { extractCollectionClassname } from "../generate-collections.js";
+import extract_fields_from_collection from "../utils/extract-fields-from-collection.js";
+import { DefaultListFilters } from "../page/default-list-filters.js";
+const target_locreq = _locreq(process.cwd());
+export const listTemplate = async (action_name, newfilefullpath) => {
+    const response = await prompts({
+        type: "autocomplete",
+        name: "collection",
+        message: "Which sealious collection do you want to list?",
+        choices: (await listCollections()).map((collection) => ({
+            title: collection,
+            value: collection,
+        })),
+    });
+    const collection_name = response.collection;
+    const [uppercase_collection, collection_fields] = await Promise.all([
+        extractCollectionClassname(target_locreq.resolve("src/back/collections/" + collection_name + ".ts")),
+        extract_fields_from_collection(collection_name),
+    ]);
+    const rel = curryImportPath(newfilefullpath);
+    return `import { Context } from "koa";
+import { CollectionItem } from "sealious";
+import { FlatTemplatable, TempstreamJSX } from "tempstream";
+import { ${uppercase_collection} } from "${rel("src/back/collections/collections.js")}";
+import html from "${rel("src/back/html.js")}";
+import {
+	SealiousItemListPage,
+	BaseListPageFields,
+	DefaultListFilters,
+    ListFilterRender,
+} from "@sealcode/sealgen";;
+import qs from "qs";
+import { is, predicates } from "@sealcode/ts-predicates";
+
+export const actionName = "${action_name}";
+
+const filterFields = [
+${collection_fields
+        .map((field) => `	{ field: "${field.name}", render: ${DefaultListFilters[field.type]
+        ? `DefaultListFilters["${field.type}"]`
+        : `DefaultListFilters.fallback`} }`)
+        .join(",\n")}
+] as {
+	field: keyof (typeof ${uppercase_collection})["fields"];
+	render?: ListFilterRender;
+}[];
+
+const displayFields = [
+${collection_fields
+        .map((field) => {
+        if (field.type == "boolean") {
+            return `	{
+		field: "${field.name}",
+		label: "${field.name}",
+		format: (v: boolean) => (v ? "YES" : "NO"),
+	}`;
+        }
+        if (field.type == "datetime") {
+            return `	{
+		field: "${field.name}",
+		label: "${field.name}",
+		format: (v: number) => {
+			const d = new Date();
+			d.setTime(v);
+			return d.toString().split(" ").slice(1, 5).join(" ");
+		},
+	}`;
+        }
+        return `	{ field: "${field.name}", label: "${field.name}" }`;
+    })
+        .join(",\n")}
+];
+
+export default new (class ${action_name}Page extends SealiousItemListPage<
+	typeof ${uppercase_collection},
+	typeof BaseListPageFields
+> {
+	fields = BaseListPageFields;
+
+	async renderFilters(ctx: Context): Promise<FlatTemplatable> {
+		const query_params = qs.parse(ctx.search.slice(1));
+		query_params.page = "1";
+		const filter_values = await this.getFilterValues(ctx);
+		return <form>
+			{Object.entries(query_params).map(([key, value]) => {
+				if (key == "filter") {
+					return "";
+				}
+				return <input
+					type="hidden"
+					name="\${key}"
+					value="\${value}"
+				/>;
+			})}
+			{filterFields.map(({ field, render }) => {
+				if (!render) {
+					render = DefaultListFilters.fallback;
+				}
+
+				return (
+					render(filter_values[field] || "", this.collection.fields[field]) ||
+					""
+				);
+			})}
+			<input type="submit" />
+		</form>;
+	}
+
+	async renderItem(_: Context, item: CollectionItem<typeof ${uppercase_collection}>) {
+		return <tr>
+			{displayFields.map(({ field, format }) => {
+				const value = item.get(field as any);
+				return <td>{format ? format(value) : value}</td>;
+			})}
+		</tr>;
+	}
+
+	async render(ctx: Context) {
+		return html(
+			ctx,
+			"${action_name}",
+			<div>
+				<h2>${action_name} List</h2>
+				<table class="sealious-list">
+					{this.renderTableHead(ctx, displayFields)}
+					<tbody>{super.render(ctx)}</tbody>
+				</table>
+			</div>
+		);
+	}
+
+})(${uppercase_collection});
+`;
+};
+//# sourceMappingURL=list.js.map

package/lib/src/templates/long-running-process.js

@@ -0,0 +1,60 @@
+import { curryImportPath } from "../utils/import-path.js";
+export async function LongRunningProcessTemplate(action_name, newfilefullpath) {
+    const rel = curryImportPath(newfilefullpath);
+    return `import { Context } from "koa";
+import { TempstreamJSX } from "tempstream";
+import { Page } from "@sealcode/sealgen";
+import html from "${rel("src/back/html.js")}";
+import { LongRunningProcess } from "sealious";
+
+export const actionName = "${action_name}";
+
+export default new (class PatroniteAutoImportStatusPage extends Page {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	async canAccess(_: Context) {
+		return { canAccess: true, message: "" };
+	}
+
+	public interval = 2000;
+
+	async render(ctx: Context) {
+		const lpr_id = ctx.params.id;
+		const lpr_data = LongRunningProcess.getByID(ctx.$context, lpr_id);
+		const render_script = lpr_data.state !== "error" && lpr_data.state !== "finished";
+		const script = /* HTML */ \`<script>
+			setTimeout(() => {
+				document.location = document.location;
+			}, \${this.interval});
+		</script>\`;
+
+		return html(
+			ctx,
+			"PatroniteAutoImportStatus",
+			<div>
+				{lpr_data.then((lpr_data) => {
+					return (
+						<div>
+							<div>status: {lpr_data.state}</div>
+							<div style="height: 20px; width: 100%">
+								<div
+									style="height: 100%; background-color: green; width: {Math.round(
+												lpr_data.progress * 100
+											)}%"
+								></div>
+							</div>
+							<div>
+								{lpr_data.events.map((e) => (
+									<div>{e.message}</div>
+								))}
+							</div>
+							{render_script ? { script } : ""}
+						</div>
+					);
+				})}
+			</div>
+		);
+	}
+})();
+`;
+}
+//# sourceMappingURL=long-running-process.js.map

package/lib/src/templates/multiform.js

@@ -0,0 +1,55 @@
+import { curryImportPath } from "../utils/utils.js";
+export async function multiformTemplate(action_name, newfilefullpath) {
+    const rel = curryImportPath(newfilefullpath);
+    return `import { Context } from "koa";
+import html from "${rel("src/back/html.js")}";
+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));
+	}
+})();
+`;
+}
+//# sourceMappingURL=multiform.js.map

package/lib/src/templates/page.js

@@ -0,0 +1,23 @@
+import { curryImportPath } from "../utils/import-path.js";
+export async function pageTemplate(action_name, newfilefullpath) {
+    const rel = curryImportPath(newfilefullpath);
+    return `import { Context } from "koa";
+import { TempstreamJSX } from "tempstream";
+import { Page } from "@sealcode/sealgen";
+import html from "${rel("src/back/html.js")}";
+
+export const actionName = "${action_name}";
+
+export default new (class ${action_name}Page extends Page {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	async canAccess(_: Context) {
+		return { canAccess: true, message: "" };
+	}
+
+	async render(ctx: Context) {
+		return html(ctx, "${action_name}", <div></div>);
+	}
+})();
+`;
+}
+//# sourceMappingURL=page.js.map

package/lib/src/templates/post.js

@@ -0,0 +1,22 @@
+export async function postTemplate(action_name) {
+    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.post(path, async (ctx) => {
+			ctx.body = { message: "OK!" }
+		});
+	}
+})();
+`;
+}
+//# sourceMappingURL=post.js.map

package/lib/src/templates/redirect.js

@@ -0,0 +1,23 @@
+export async function redirectTemplate(action_name) {
+    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");
+		});
+	}
+})();
+`;
+}
+//# sourceMappingURL=redirect.js.map

package/lib/src/templates/route-test.js

@@ -0,0 +1,54 @@
+import { curryImportPath } from "../utils/import-path.js";
+export function testTemplate(action_name, new_file_fullpath) {
+    const rel = curryImportPath(new_file_fullpath);
+    return `import { withProdApp } from "${rel("src/back/test_utils/with-prod-app.js")}";
+import { VERY_LONG_TEST_TIMEOUT, webhintURL } from "${rel("src/back/test_utils/webhint.js")}";
+import { ${action_name}URL } from "${rel("src/back/routes/urls.js")}";
+import { getBrowser } from "${rel("src/back/test_utils/browser-creator.js")}";
+import { Browser, BrowserContext, Page } from "@playwright/test";
+
+describe("${action_name} webhint", () => {
+	it(
+		"doesn't crash",
+		async function () {
+			return withProdApp(async ({ base_url, rest_api }) => {
+				await rest_api.get(${action_name}URL);
+				await webhintURL(base_url + ${action_name}URL);
+				// alternatively you can use webhintHTML for faster but less precise scans
+				// or for scanning responses of requests that use some form of authorization:
+				// const response = await rest_api.get(${action_name}URL);
+				// await webhintHTML(response);
+			});
+		},
+		VERY_LONG_TEST_TIMEOUT
+	);
+});
+
+describe("${action_name}", () => {
+	let page: Page;
+	let browser: Browser;
+	let context: BrowserContext;
+
+	beforeEach(async () => {
+		browser = await getBrowser();
+		context = await browser.newContext();
+		page = await context.newPage();
+	});
+
+	afterEach(async () => {
+		await context.close();
+	});
+
+	it(
+		"works as expected",
+		async function () {
+			return withProdApp(async ({ base_url }) => {
+				await page.goto(base_url + ${action_name}URL);
+			});
+		},
+		VERY_LONG_TEST_TIMEOUT
+	);
+});
+`;
+}
+//# sourceMappingURL=route-test.js.map

package/lib/src/templates/stateful-page.js

@@ -0,0 +1,66 @@
+import { curryImportPath } from "../utils/import-path.js";
+export async function statefulPageTemplate(action_name, newfilefullpath) {
+    const rel = curryImportPath(newfilefullpath);
+    return `import { TempstreamJSX, Templatable } from "tempstream";
+import { BaseContext } from "koa";
+import { StatefulPage } from "@sealcode/sealgen";
+import html from "${rel("src/back/html.js")}";
+
+export const actionName = "${action_name}";
+
+const actions = {
+	add: (state: State, inputs: Record<string, string>) => {
+		console.log({ inputs });
+		return {
+			...state,
+			elements: [...state.elements, inputs.element_to_add || "new element"],
+		};
+	},
+	remove: (state: State, _: unknown, index_to_remove: number) => {
+		return {
+			...state,
+			elements: state.elements.filter((_, index) => index != index_to_remove),
+		};
+	},
+} as const;
+
+type State = {
+	elements: string[];
+};
+
+export default new (class ${action_name}Page extends StatefulPage<State, typeof actions> {
+	actions = actions;
+
+	getInitialState() {
+		return { elements: ["one", "two", "three"] };
+	}
+
+	wrapInLayout(ctx: BaseContext, content: Templatable): Templatable {
+		return html(ctx, "${action_name}", content);
+	}
+
+	render(ctx: BaseContext, state: State, inputs: Record<string, string>) {
+		return (
+			<div>
+				<ul>
+					{state.elements.map((e, index) => (
+						<li>
+							{e} {this.makeActionButton(state, "remove", index)}
+						</li>
+					))}
+				</ul>
+				<div>
+					<input
+						name="element_to_add"
+						type="text"
+						value={inputs.element_to_add || ""}
+					/>
+					{this.makeActionButton(state, "add")}
+				</div>
+			</div>
+		);
+	}
+})();
+`;
+}
+//# sourceMappingURL=stateful-page.js.map