@sealcode/sealgen 0.11.8 → 0.12.0

package/lib/src/forms/multiform.js

@@ -0,0 +1,174 @@
+import { is, predicates } from "@sealcode/ts-predicates";
+import { tempstream } from "tempstream";
+import { MountableWithFields } from "../page/mountable-with-fields.js";
+import { attribute } from "../sanitize.js";
+const FIELD_PREFIX_SEPARATOR = "___";
+export class Multiform extends MountableWithFields {
+    constructor() {
+        super(...arguments);
+        this.controls = [];
+    }
+    init() {
+        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) {
+        return ctx.$body || {};
+    }
+    async canAccess() {
+        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) {
+        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]
+            ? [[requested_frame, this.forms[requested_frame]]]
+            : Object.entries(this.forms);
+        return forms_to_render;
+    }
+    async renderSubform(ctx, sub_form_name, show_field_errors) {
+        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, sub_form_name) {
+        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, messages, prerenderedForms = {}, show_field_errors) {
+        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() {
+        // 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, path) {
+        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);
+                }
+            });
+        }
+    }
+}
+//# sourceMappingURL=multiform.js.map

package/lib/src/forms/multiform.test.js

@@ -0,0 +1,430 @@
+import Router from "@koa/router";
+import Koa from "koa";
+import axios from "axios";
+import { expect } from "@playwright/test";
+import { tempstream } from "tempstream";
+import { mount } from "../mount.js";
+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 { Form } from "./form.js";
+import { FormHeader } from "./controls/form-header.js";
+import { SimpleInput } from "./controls/simple-input.js";
+import { EmailField } from "./fields/email.js";
+const fields1 = {
+    email: new SimpleFormField(true),
+};
+const form1 = new (class extends Form {
+    constructor() {
+        super(...arguments);
+        this.defaultSuccessMessage = "Form1 done!";
+        this.controls = [new FormHeader("form1"), new SimpleInput(fields1.email)];
+        this.fields = fields1;
+    }
+    onSubmit() {
+        return;
+    }
+})();
+const fields2 = {
+    name: new SimpleFormField(true),
+};
+const form2 = new (class extends Form {
+    constructor() {
+        super(...arguments);
+        this.defaultSuccessMessage = "Form2 done!";
+        this.controls = [new FormHeader("form2"), new SimpleInput(fields2.name)];
+        this.fields = fields2;
+    }
+    onSubmit() {
+        return;
+    }
+})();
+function multiform_factory(canAccessFun1, canAccessFun2) {
+    return new (class extends Multiform {
+        constructor() {
+            super(...arguments);
+            this.name = "multiform_test";
+            this.forms = {
+                form1: form_factory(canAccessFun1),
+                form2: form_factory(canAccessFun2),
+            };
+        }
+        async render(...args) {
+            return tempstream /* HTML */ `<!DOCTYPE html>
+				<html>
+					<head>
+						<title>Multiform Test - Sealgen</title>
+						<script type="module">
+							import hotwiredTurbo from "https://cdn.skypack.dev/pin/@hotwired/turbo@v7.0.0-9XNv1By6uiqRlBzQLO2d/mode=imports,min/optimized/@hotwired/turbo.js";
+						</script>
+					</head>
+					<body>
+						${super.render(...args)}
+					</body>
+				</html>`;
+        }
+    })();
+}
+async function tests(js_enabled) {
+    let page;
+    beforeAll(async () => {
+        const browser = await getBrowser();
+        const context = await browser.newContext({
+            javaScriptEnabled: js_enabled,
+        });
+        page = await context.newPage();
+        await page.goto("http://localhost:8080");
+        await page.getByLabel("email").click();
+        await page.getByLabel("email").fill("sample1");
+        await page.getByLabel("name").click();
+        await page.getByLabel("name").fill("sample2");
+        await page.locator("#multiform_test_form1_submit").click();
+    });
+    it("checking whether only one submit handler is run", async () => {
+        await page.getByText("Form1 done!").click();
+        await assertThrowsAsync(async () => {
+            return page.getByText("Form2 done!").click({ timeout: 500 });
+        });
+    });
+    it("checking whether the input in the not submitted form prevails", async () => {
+        await expect(page.getByLabel("name")).toHaveValue("sample2");
+    });
+}
+async function general_form_validation_e2e_tests(js_enabled) {
+    let browser;
+    let page;
+    browser = await getBrowser();
+    const context = await browser.newContext({
+        javaScriptEnabled: js_enabled,
+    });
+    page = await context.newPage();
+    await page.goto("http://localhost:8080");
+    await page.getByPlaceholder("text").click();
+    await page.getByPlaceholder("text").fill("incorrect");
+    await page.getByPlaceholder("password").click();
+    await page.getByPlaceholder("password").fill("test");
+    await page.locator("#multiform_test_form2_submit").click();
+    await assertThrowsAsync(async () => {
+        await page.getByText("Incorrect input").click({ timeout: 500 });
+    });
+}
+async function individual_field_validation_e2e_tests(javaScriptEnabled) {
+    let browser;
+    let page;
+    beforeAll(async () => {
+        browser = await getBrowser();
+        const context = await browser.newContext({
+            javaScriptEnabled,
+        });
+        page = await context.newPage();
+        await page.goto("http://localhost:8080");
+    });
+    it("validation message shows when incorrect input is given", async () => {
+        await page.getByPlaceholder("text").click();
+        await page.getByPlaceholder("text").fill("notanemail");
+        await page.locator("#multiform_test_form1_submit").click();
+        await page.getByText("Please enter a proper email address").click();
+    });
+    it("validation message doesn't show when correct input is given", async () => {
+        await page.getByPlaceholder("text").click();
+        await page.getByPlaceholder("text").fill("yes@an.email");
+        await page.locator("#multiform_test_form1_submit").click();
+        assertThrowsAsync(async () => {
+            return page.getByText("Please enter a proper email address").click({ timeout: 500 });
+        });
+    });
+}
+describe("multiform test", () => {
+    describe("basic tests", async () => {
+        let server;
+        beforeAll(async () => {
+            const app = new Koa();
+            const router = new Router();
+            mount(router, "/", new (class extends Multiform {
+                constructor() {
+                    super(...arguments);
+                    this.name = "multiform_test";
+                    this.forms = { form1, form2 };
+                }
+                async render(ctx, messages, prerenderedForms, show_field_errors = true) {
+                    return tempstream /* HTML */ `<!DOCTYPE html>
+							<html>
+								<head>
+									<title>Multiform Test - Sealgen</title>
+									<script type="module">
+										import hotwiredTurbo from "https://cdn.skypack.dev/pin/@hotwired/turbo@v7.0.0-9XNv1By6uiqRlBzQLO2d/mode=imports,min/optimized/@hotwired/turbo.js";
+									</script>
+								</head>
+								<body>
+									${super.render(ctx, messages, prerenderedForms, show_field_errors)}
+								</body>
+							</html>`;
+                }
+            })(), true);
+            app.use(router.routes()).use(router.allowedMethods());
+            server = app.listen(8080);
+        });
+        afterAll(() => {
+            server.close();
+        });
+        describe("turbolinks + js enabled", async () => tests(true));
+        describe("turbolinks + js disabled", async () => tests(false));
+    });
+    describe("canAccess", async () => {
+        let page;
+        let server;
+        describe("allow access to both forms when both canAccess return true", async () => {
+            beforeAll(async () => {
+                const app = new Koa();
+                const router = new Router();
+                mount(router, "/", multiform_factory(async (ctx) => {
+                    return { canAccess: true, message: "" };
+                }, async (ctx) => {
+                    return { canAccess: true, message: "" };
+                }), true);
+                app.use(router.routes()).use(router.allowedMethods());
+                server = app.listen(8080);
+                const browser = await getBrowser();
+                const context = await browser.newContext();
+                page = await context.newPage();
+            });
+            afterAll(async () => {
+                server.close();
+            });
+            it("check wether it renders", async () => {
+                const response = await page.goto("http://localhost:8080");
+                if (response?.status() != 200) {
+                    throw new Error(`Should return 200 status and it returns ${response?.status()}`);
+                }
+                await page.locator("#form1").getByText("This is a test:").click();
+                await page.locator("#form2").getByText("This is a test:").click();
+            });
+            it("check wether you can submit through http (axios)", async () => {
+                await axios.post("http://localhost:8080/form2", {
+                    form2__text: "pass",
+                }, {
+                    validateStatus: (status) => {
+                        if (status == 422)
+                            return true;
+                        return false;
+                    },
+                });
+            });
+        });
+        describe("deny access to both forms", async () => {
+            beforeAll(async () => {
+                const app = new Koa();
+                const router = new Router();
+                mount(router, "/", multiform_factory(async (ctx) => {
+                    return { canAccess: false, message: "" };
+                }, async (ctx) => {
+                    return { canAccess: false, message: "" };
+                }), true);
+                app.use(router.routes()).use(router.allowedMethods());
+                server = app.listen(8080);
+                const browser = await getBrowser();
+                const context = await browser.newContext();
+                page = await context.newPage();
+            });
+            afterAll(async () => {
+                server.close();
+            });
+            it("check wether forms didnt render", async () => {
+                await page.goto("http://localhost:8080");
+                await assertThrowsAsync(async () => {
+                    return page
+                        .locator("#form1")
+                        .getByText("This is a test:")
+                        .click({ timeout: 300 });
+                });
+            });
+            it("check wether it's possible to submit through http", async () => {
+                await axios.post("http://localhost:8080/form2", {
+                    form2__text: "pass",
+                }, {
+                    validateStatus: (status) => {
+                        if (status == 403)
+                            return true;
+                        return false;
+                    },
+                });
+            });
+        });
+        describe("allow access to one form, deny to the other", async () => {
+            beforeAll(async () => {
+                const app = new Koa();
+                const router = new Router();
+                mount(router, "/", multiform_factory(async (ctx) => {
+                    return { canAccess: true, message: "" };
+                }, async (ctx) => {
+                    return { canAccess: false, message: "" };
+                }), true);
+                app.use(router.routes()).use(router.allowedMethods());
+                server = app.listen(8080);
+                const browser = await getBrowser();
+                const context = await browser.newContext({});
+                page = await context.newPage();
+            });
+            afterAll(async () => {
+                server.close();
+            });
+            it("check wether form1 renders", async () => {
+                await page.goto("http://localhost:8080");
+                await page.locator("#form1").getByText("This is a test:").click({ timeout: 300 });
+            });
+            it("check wether it's possible to submit to form1 through http", async () => {
+                await axios.post("http://localhost:8080/form1", {
+                    form1__text: "pass",
+                }, {
+                    validateStatus: (status) => {
+                        if (status == 422)
+                            return true;
+                        return false;
+                    },
+                });
+            });
+            it("check wether form2 does not render", async () => {
+                await page.goto("http://localhost:8080");
+                await assertThrowsAsync(async () => {
+                    return page
+                        .locator("#form2")
+                        .getByText("This is a test:")
+                        .click({ timeout: 300 });
+                });
+            });
+            it("check wether it's possible to submit to form2 through http", async () => {
+                await axios.post("http://localhost:8080/form2", {
+                    form2__text: "pass",
+                }, {
+                    validateStatus: (status) => {
+                        if (status == 403)
+                            return true;
+                        return false;
+                    },
+                });
+            });
+        });
+    });
+    describe("validation e2e", async () => {
+        describe("basic tests", async () => {
+            let server;
+            beforeAll(async () => {
+                const app = new Koa();
+                const router = new Router();
+                mount(router, "/", new (class extends Multiform {
+                    constructor() {
+                        super(...arguments);
+                        this.name = "multiform_test";
+                        this.forms = {
+                            form1: new (class extends Form {
+                                constructor() {
+                                    super(...arguments);
+                                    this.fields = fields1;
+                                    this.submitButtonText = "Submit";
+                                    this.controls = [
+                                        new SimpleInput(fields1.email, {
+                                            label: "This is a test:",
+                                            type: "text",
+                                        }),
+                                    ];
+                                }
+                                async onSubmit() {
+                                    return;
+                                }
+                                async validateValues(ctx, data) {
+                                    if (data.email === "incorrect")
+                                        return {
+                                            valid: false,
+                                            error: "Incorrect input",
+                                        };
+                                    return { valid: true, error: "" };
+                                }
+                            })(),
+                            form2: form_factory(),
+                        };
+                    }
+                    async render(...args) {
+                        return tempstream /* HTML */ `<!DOCTYPE html>
+								<html>
+									<head>
+										<title>Multiform Test - Sealgen</title>
+										<script type="module">
+											import hotwiredTurbo from "https://cdn.skypack.dev/pin/@hotwired/turbo@v7.0.0-9XNv1By6uiqRlBzQLO2d/mode=imports,min/optimized/@hotwired/turbo.js";
+										</script>
+									</head>
+									<body>
+										${super.render(...args)}
+									</body>
+								</html>`;
+                    }
+                })(), true);
+                app.use(router.routes()).use(router.allowedMethods());
+                server = app.listen(8080);
+            });
+            afterAll(async () => {
+                server.close();
+            });
+            it("js enabled", async () => general_form_validation_e2e_tests(true));
+            it("js disabled", async () => general_form_validation_e2e_tests(false));
+        });
+        describe("field specific validation", async () => {
+            let server;
+            beforeAll(async () => {
+                const app = new Koa();
+                const router = new Router();
+                const fields = {
+                    text: new EmailField(true),
+                };
+                mount(router, "/", new (class extends Multiform {
+                    constructor() {
+                        super(...arguments);
+                        this.name = "multiform_test";
+                        this.forms = {
+                            form1: new (class extends Form {
+                                constructor() {
+                                    super(...arguments);
+                                    this.fields = fields;
+                                    this.submitButtonText = "Submit";
+                                    this.controls = [
+                                        new SimpleInput(fields.text, {
+                                            label: "This is a test:",
+                                            type: "text",
+                                        }),
+                                    ];
+                                }
+                                async onSubmit() {
+                                    return;
+                                }
+                            })(),
+                            form2: form_factory(),
+                        };
+                    }
+                    async render(...args) {
+                        return tempstream /* HTML */ `<!DOCTYPE html>
+								<html>
+									<head>
+										<title>Multiform Test - Sealgen</title>
+										<script type="module">
+											import hotwiredTurbo from "https://cdn.skypack.dev/pin/@hotwired/turbo@v7.0.0-9XNv1By6uiqRlBzQLO2d/mode=imports,min/optimized/@hotwired/turbo.js";
+										</script>
+									</head>
+									<body>
+										${super.render(...args)}
+									</body>
+								</html>`;
+                    }
+                })(), true);
+                app.use(router.routes()).use(router.allowedMethods());
+                server = app.listen(8080);
+            });
+            afterAll(async () => {
+                server.close();
+            });
+            describe("js enabled", async () => individual_field_validation_e2e_tests(true));
+            describe("js disabled", async () => individual_field_validation_e2e_tests(false));
+        });
+    });
+});
+//# sourceMappingURL=multiform.test.js.map

package/lib/src/generate-collections.js

@@ -0,0 +1,52 @@
+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";
+const target_locreq = _locreq(process.cwd());
+export async function extractCollectionClassname(full_file_path) {
+    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() {
+    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.includes(".#") &&
+        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}.js";`)
+        .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");
+}
+//# sourceMappingURL=generate-collections.js.map

package/lib/src/generate-components.js

@@ -0,0 +1,33 @@
+import _locreq from "locreq";
+import * as prettier from "prettier";
+import { promises as fs } from "fs";
+import { getPrettierConfig } from "./utils/prettier.js";
+import recursive from "recursive-readdir";
+import path from "path";
+import { toKebabCase, toPascalCase } from "js-convert-case";
+const target_locreq = _locreq(process.cwd());
+export async function generateComponents() {
+    const components_dir = target_locreq.resolve("src/back/jdd-components");
+    const component_names = (await recursive(components_dir)).filter((c) => c.endsWith(".jdd.tsx"));
+    const component_data = component_names
+        .map((p) => "./" +
+        path.relative(components_dir, p).replace(/\.[tj]sx?$/, ".js"))
+        .map((relative_path) => {
+        const name = relative_path.match(/\/([^\/]+).jdd/)?.[1];
+        return { name, relative_path };
+    });
+    const content = `// DO NOT EDIT! This file is generated automaticaly with 'npm run generate-components'
+	import { Registry } from "@sealcode/jdd";
+
+	export const registry = new Registry();
+${component_data
+        .map((c) => `
+	import { ${toPascalCase(c.name)} } from "${c.relative_path}";
+	registry.add("${toKebabCase(c.name)}", ${toPascalCase(c.name)});`)
+        .join("\n")}`;
+    const target = "src/back/jdd-components/components.ts";
+    await fs.writeFile(target_locreq.resolve(target), prettier.format(content, await getPrettierConfig()));
+    // eslint-disable-next-line no-console
+    console.log(`Successfuly generated new ${target} file`);
+}
+//# sourceMappingURL=generate-components.js.map