@sealcode/sealgen 0.12.0 → 0.12.3

package/lib/src/forms/multiform.js

@@ -1,174 +0,0 @@
-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

@@ -1,430 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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