@sealcode/sealgen 0.12.0 → 0.12.2

package/lib/forms/form.js

@@ -1,176 +0,0 @@
-import { randomUUID } from "crypto";
-import Router from "@koa/router";
-import { tempstream } from "tempstream";
-import { hasFieldOfType, hasShape, is, predicates, } from "@sealcode/ts-predicates";
-import { MountableWithFields, } from "../page/mountable-with-fields.js";
-export class Form extends MountableWithFields {
-    constructor() {
-        super(...arguments);
-        this.defaultSuccessMessage = "Done";
-        this.submitButtonText = "Wyślij";
-        this.action = "./";
-        this.useTurbo = true;
-        this.form_id = randomUUID();
-    }
-    async canAccess(
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _) {
-        return { canAccess: true, message: "" };
-    }
-    async renderError(_, error) {
-        return tempstream /* HTML */ `<div>${error.message}</div>`;
-    }
-    makeSubmitButton() {
-        return /* HTML */ `<input
-			type="submit"
-			value="${this.submitButtonText}"
-			formaction="${this.action}"
-			${this.form_id ? `form="${this.form_id}"` : ""}
-		/>`;
-    }
-    async render(ctx, data, show_field_errors) {
-        return tempstream /* HTML */ `<div class="form-container">
-			${this.makeOpenFormTag(ctx)}
-			${!this.controls.some((control) => control.role == "messages")
-            ? this.renderMessages(ctx, data)
-            : ""}
-			${this.renderControls(this.makeFormControlContext(ctx, data, show_field_errors))}
-			${this.controls.some((control) => control.role == "submit")
-            ? ""
-            : this.makeSubmitButton()}
-			${this.makeCloseFormTag()}
-		</div>`;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async makeFormClasses(_ctx) {
-        return [];
-    }
-    makeOpenFormTag(ctx) {
-        return tempstream `<form enctype="multipart/form-data" method="POST" id="${this.form_id}" action="${this.action}" class="${this.makeFormClasses(ctx).then((classes) => classes.join(" "))}" ${this.useTurbo ? "" : `data-turbo="false"`}></form><div class="form">`;
-    }
-    makeCloseFormTag() {
-        return `</div>`;
-    }
-    async onValuesInvalid(ctx, form_messages, _field_errors) {
-        const messages = form_messages.length
-            ? form_messages
-            : [{ type: "error", text: "Some fields are invalid" }];
-        return {
-            action: "stay",
-            content: await this.render(ctx, {
-                raw_values: await this.extractRawValues(ctx),
-                messages,
-            }, "show_field_errors" && true),
-            messages,
-        };
-    }
-    async onError(ctx, data, error) {
-        let error_message = "Unknown error has occured";
-        if (is(error, predicates.object) &&
-            hasShape({ message: predicates.string }, error)) {
-            error_message = error.message;
-        }
-        const messages = [{ type: "error", text: error_message }];
-        return {
-            action: "stay",
-            content: await this.render(ctx, {
-                raw_values: data.raw_values,
-                messages,
-            }, "show_field_errors" && true),
-        };
-    }
-    async onSuccess(ctx, data, _submitResult) {
-        const messages = [
-            { type: "success", text: this.defaultSuccessMessage },
-        ];
-        return {
-            action: "stay",
-            content: await this.render(ctx, {
-                raw_values: data.raw_values,
-                messages,
-            }, "show_field_errors" && false),
-            messages,
-        };
-    }
-    async getRawValuesOnSuccess(ctx) {
-        return this.extractRawValues(ctx);
-    }
-    async handlePost(ctx) {
-        const raw_values = await this.extractRawValues(ctx);
-        const { valid, form_messages, field_errors } = await this.validate(ctx, raw_values);
-        if (!valid) {
-            return this.onValuesInvalid(ctx, form_messages, field_errors);
-        }
-        try {
-            ctx.status = 303;
-            const result = await this.onSubmit(ctx, {
-                raw_values,
-                messages: [],
-            });
-            return this.onSuccess(ctx, {
-                raw_values: await this.getRawValuesOnSuccess(ctx),
-                messages: [],
-            }, result);
-        }
-        catch (e) {
-            // eslint-disable-next-line no-console
-            console.dir(e, { depth: 5 });
-            const message = is(e, predicates.object) &&
-                hasFieldOfType(e, "message", predicates.string)
-                ? e?.message
-                : is(e, predicates.string)
-                    ? e
-                    : "Wystąpił błąd";
-            return this.onError(ctx, {
-                raw_values,
-                messages: [
-                    {
-                        type: "error",
-                        text: message,
-                    },
-                ],
-            }, e);
-        }
-    }
-    mount(router, path) {
-        router.use(path, async (ctx, next) => {
-            const result = await this.canAccess(ctx);
-            if (!result.canAccess) {
-                ctx.body = this.renderError(ctx, {
-                    type: "access",
-                    message: result.message,
-                });
-                ctx.status = 403;
-                return;
-            }
-            await next();
-        });
-        router.get(path, async (ctx) => {
-            ctx.type = "html";
-            ctx.body = await this.render(ctx, {
-                raw_values: await this.extractRawValues(ctx),
-                messages: [],
-            }, "show_field_errors" && false);
-        });
-        router.post(path, async (ctx) => {
-            const reaction = await this.handlePost(ctx);
-            if (reaction.action == "stay") {
-                ctx.status = 422;
-                ctx.body = reaction.content;
-            }
-            else if (reaction.action == "redirect") {
-                ctx.status = 303;
-                ctx.redirect(reaction.url);
-            }
-        });
-        const subrouter = new Router(); // for use with other subroutes that individual controls might register
-        for (const control of this.controls) {
-            control.mount(subrouter);
-        }
-        router.use(path, subrouter.routes(), subrouter.allowedMethods());
-    }
-    async extractRawValues(ctx) {
-        return ctx.$body;
-    }
-}
-//# sourceMappingURL=form.js.map

package/lib/forms/form.test.js

@@ -1 +0,0 @@
-

package/lib/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