@sealcode/sealgen 0.12.0 → 0.12.2

package/lib/build.js

@@ -1,187 +0,0 @@
-import { build, context } from "esbuild";
-import { promises as fs } from "fs";
-import { extname } from "path";
-import * as chokidar from "chokidar";
-import { default as glob } from "tiny-glob";
-import { generate_css_includes } from "./find-css-includes.js";
-import { sleep } from "./utils/sleep.js";
-import { generateCollections } from "./generate-collections.js";
-import { generateRoutes } from "./generate-routes.js";
-import { generateComponents } from "./generate-components.js";
-import { make_notifier } from "./notifier.js";
-import getPort from "get-port";
-import _locreq from "locreq";
-const target_locreq = _locreq(process.cwd());
-const generate_names = (function* generate_names() {
-    const base_name = "____unique_import_";
-    let count = 0;
-    while (true) {
-        yield `${base_name}${count}`;
-        count++;
-    }
-})();
-async function get_notifier_port() {
-    return getPort({ port: 4000 });
-}
-async function write_notifier_config(watch, port) {
-    const config = { watch };
-    if (port) {
-        config.port = port;
-    }
-    await fs.writeFile(target_locreq.resolve("public/dist/notifier.json"), JSON.stringify(config));
-}
-async function build_ts() {
-    await Promise.all([
-        generateCollections(),
-        generateRoutes(),
-        generateComponents(),
-    ]);
-    const entryPoints = (await glob("./src/back/**/*.{ts,tsx}")).filter((path) => !path.includes(".#"));
-    try {
-        await build({
-            entryPoints,
-            sourcemap: true,
-            bundle: false,
-            jsxFactory: "TempstreamJSX.createElement",
-            outdir: "./dist/back",
-            logLevel: "info",
-            platform: "node",
-            target: "es2022",
-            format: "esm",
-            plugins: [
-                {
-                    name: "remove-named-imports",
-                    setup(build) {
-                        build.onLoad({ filter: /.*/ }, async ({ path }) => {
-                            const named_and_default_regex = /^import\s+((\S+),\s+)?({\s*[^}]+})\s+from\s+("[^"]+");\s*$/gm;
-                            const old_content = await fs.readFile(path, "utf-8");
-                            const contents = old_content.replace(named_and_default_regex, (_, default_import_name, __, all_named, module_path) => {
-                                /* eslint-disable */
-                                const new_name = generate_names.next().value;
-                                const result = `import * as ${new_name} from ${module_path}${default_import_name
-                                    ? `; const ${default_import_name.replace(",", "")} = ${new_name}.default || ${new_name};`
-                                    : ""};` +
-                                    all_named
-                                        .match(/[a-zA-Z_$][^,}]+/g)
-                                        .map((importname) => {
-                                        if (importname.startsWith("default as")) {
-                                            return `const ${importname.replace("default as ", "")} = ${new_name}?.default || ${new_name};`;
-                                        }
-                                        if (importname.match(/([^{]*)\sas\s([^}]*)/)) {
-                                            // is "import {asdfas as somethong_else}
-                                            const [_, original, named] = importname.match(/([^{]*)\sas\s([^}]*)/);
-                                            return `const named = ${new_name}?.default.${original} || ${new_name}?.${original}`;
-                                        }
-                                        return `const ${importname} = ${new_name}?.default?.${importname} || ${new_name}?.${importname};`;
-                                    })
-                                        .join(" ");
-                                return result;
-                                /* eslint-enable */
-                            });
-                            return {
-                                contents,
-                                loader: extname(path) === ".tsx" ? "tsx" : "ts",
-                            };
-                        });
-                    },
-                },
-            ],
-        });
-    }
-    catch (e) {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        console.error(e.message);
-    }
-}
-async function complex_build(watch) {
-    const loader = Object.fromEntries(["png", "svg", "jpg", "gif", "jpeg", "otf", "ttf"].map((ext) => ["." + ext, "file"]));
-    let css_build = await context({
-        entryPoints: ["./src/main.css"],
-        sourcemap: true,
-        bundle: true,
-        outdir: "./public/dist",
-        logLevel: "info",
-        // plugins: [sassPlugin()],
-        loader,
-    });
-    let ongoing_ts = false;
-    let ongoing_css = false;
-    let ongoing_ts_promise = null;
-    if (watch) {
-        const watcher = chokidar.watch("src", { ignoreInitial: true });
-        const port = await get_notifier_port();
-        const notifier = make_notifier(port);
-        await write_notifier_config(watch, port);
-        watcher.on("all", async (_, path) => {
-            if (!css_build)
-                return;
-            if (path.includes(".#"))
-                return;
-            if (path.endsWith(".css") && !path.endsWith("/includes.css")) {
-                if (ongoing_css) {
-                    return;
-                }
-                ongoing_css = true;
-                // refresh the list of all css files in includes.css
-                await generate_css_includes();
-                try {
-                    await css_build?.rebuild?.();
-                    console.log(`Built main.css [on ${path}]`);
-                }
-                catch (e) {
-                    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-                    console.error(e.message);
-                    await sleep(200);
-                    css_build
-                        ?.rebuild?.()
-                        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-                        .catch((e) => console.error(e?.message));
-                }
-                if (ongoing_ts_promise) {
-                    await ongoing_ts_promise;
-                }
-                notifier("css");
-                ongoing_css = false;
-            }
-            if ((path.endsWith(".ts") || path.endsWith(".tsx")) &&
-                !path.endsWith("src/back/collections/collections.ts") &&
-                !path.endsWith("src/back/routes/routes.ts") &&
-                !path.endsWith("src/back/routes/urls.ts")) {
-                if (ongoing_ts) {
-                    return;
-                }
-                ongoing_ts = true;
-                ongoing_ts_promise = build_ts();
-                await ongoing_ts_promise;
-                notifier("ts");
-                ongoing_ts_promise = null;
-                console.log(`Finished TS build [on ${path}]`);
-                ongoing_ts = false;
-            }
-        });
-    }
-    else {
-        await write_notifier_config(watch);
-    }
-    await generate_css_includes();
-    await Promise.all([css_build.rebuild(), build_ts()]);
-    watch && css_build?.rebuild?.();
-}
-export async function buildProject({ watch, }) {
-    try {
-        await build({
-            entryPoints: ["./src/front/index.ts"],
-            sourcemap: true,
-            outfile: "./public/dist/bundle.js",
-            logLevel: "info",
-            bundle: true,
-        });
-        await complex_build(watch);
-    }
-    catch (e) {
-        console.log("CAUGHT!");
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        console.error(e.message);
-    }
-}
-//# sourceMappingURL=build.js.map

package/lib/cli.js

@@ -1,35 +0,0 @@
-#!/usr/bin/env node
-import { addCollection } from "./add-collection.js";
-import { addJDDComponent } from "./add-jdd-component.js";
-import { addRoute } from "./add-route.js";
-import { buildProject } from "./build.js";
-import { generate_css_includes } from "./find-css-includes.js";
-import { generateCollections } from "./generate-collections.js";
-import { generateComponents } from "./generate-components.js";
-import { generateRoutes } from "./generate-routes.js";
-import { makeEnv } from "./make-env.js";
-import yargs from "yargs/yargs";
-const actions = {
-    "add-collection": addCollection,
-    "add-route": addRoute,
-    "generate-collections": generateCollections,
-    "generate-components": generateComponents,
-    "generate-routes": generateRoutes,
-    "generate-css-includes": generate_css_includes,
-    build: buildProject,
-    default: async function () {
-        console.log("Usage: `sealscript <action>`");
-        console.log(`Available actions: ${Object.keys(actions)
-            .filter((e) => e != "default")
-            .join(", ")}`);
-    },
-    "make-env": makeEnv,
-    "add-component": addJDDComponent,
-};
-void (async function () {
-    const action = process.argv.at(2);
-    actions;
-    const fn = actions[action || "default"] || actions.default;
-    await fn(yargs().argv);
-})();
-//# sourceMappingURL=cli.js.map

package/lib/components/components.js

@@ -1,3 +0,0 @@
-export * from "./tabs.js";
-export * from "./toggle-modal.js";
-//# sourceMappingURL=components.js.map

package/lib/components/tabs.js

@@ -1,88 +0,0 @@
-import { tempstream } from "tempstream";
-function name_to_id(str) {
-    return str.replace(/\W/g, "-");
-}
-const style = (hide_tabs_width) => /* HTML */ `<style>
-	.tab-label {
-		height: 45px;
-		line-height: 45px;
-		padding: 0 45px;
-		display: block;
-		float: left;
-		box-sizing: border-box;
-		border-bottom: 3px solid transparent;
-		cursor: pointer;
-		font-size: 18px;
-		-webkit-user-select: none;
-		user-select: none;
-	}
-
-	@media screen and (max-width: ${hide_tabs_width}px) {
-		.tab-label {
-			display: none;
-		}
-	}
-
-	.tab-label--mobile {
-		line-height: unset;
-		padding-top: 30px;
-		padding-left: 0;
-		pointer-events: none;
-		padding-bottom: 30px;
-		color: $font-graphite;
-		border-bottom: 2px solid $font-primary;
-		display: none;
-		@media screen and (max-width: ${hide_tabs_width}px) {
-			display: block;
-		}
-	}
-
-	.tab-content {
-		padding-top: 30px;
-		clear: both;
-	}
-
-	@media screen and (max-width: ${hide_tabs_width}px) {
-		.tab-content {
-			display: block !important;
-		}
-	}
-</style>`;
-export function tabs(tabs, selected_tab_style = "font-weight: bold;", selected_index = 0, hide_tabs_width = 0) {
-    return /* HTML */ tempstream `${style(hide_tabs_width)}
-	${Object.keys(tabs)
-        .map((tab_title, index) => {
-        const id = name_to_id(tab_title);
-        return /* HTML */ `<input
-					type="radio"
-					name="tabs"
-					id="${id}"
-					class="tab-radio--${id}"
-					style="display: none"
-					${selected_index == index ? "checked" : ""}
-				/>
-				<label class="tab-label tab-label--${id}" for="${id}">
-					${tab_title}
-				</label>`;
-    })
-        .join("\n")}
-	${Object.entries(tabs).map(([title, content]) => {
-        const id = name_to_id(title);
-        return /* HTML */ tempstream `<div class="tab-label tab-label--mobile">
-					${title}
-				</div>
-				<div class="tab-content tab-content--${id}">${content}</div>
-				<style>
-					.tab-radio--${id} ~ .tab-content--${id} {
-						display:none;
-					}
-					.tab-radio--${id}:checked ~ .tab-content--${id} {
-						display:block;
-					}
-					.tab-radio--${id}:checked ~ label.tab-label--${id} {
-						${selected_tab_style}
-					}
-				</style>`;
-    })}`;
-}
-//# sourceMappingURL=tabs.js.map

package/lib/components/toggle-modal.js

@@ -1,46 +0,0 @@
-import { tempstream } from "tempstream";
-import { makeSlug } from "../utils/utils.js";
-export function toggleModal(options) {
-    const { contentWrapped, contentUnwrapped, name } = options;
-    const id = makeSlug(name);
-    return tempstream /* HTML */ `<style>
-			.toggle-modal__wrapped {
-				display: none;
-			}
-
-			@media (max-width: 960px) {
-				.toggle-modal__wrapped {
-					display: block;
-				}
-				.toggle-modal__unwrapped {
-					display: none;
-				}
-
-				#${id} {
-					display: none;
-				}
-
-				#${id}:checked ~ .toggle-modal__wrapped {
-					display: none;
-				}
-
-				#${id}:checked ~ .toggle-modal__unwrapped {
-					display: block;
-					position: fixed;
-					height: 100vh;
-					width: 100vw;
-					top: 0;
-					left: 0;
-					background-color: white;
-					z-index: 99;
-					overflow-y: scroll;
-				}
-			}
-		</style>
-		<div class="toggle-modal toggle-modal--${id}">
-			<input id="${id}" name="${id}" type="checkbox" autocomplete="off" />
-			<div class="toggle-modal__wrapped">${contentWrapped(id)}</div>
-			<div class="toggle-modal__unwrapped">${contentUnwrapped(id)}</div>
-		</div>`;
-}
-//# sourceMappingURL=toggle-modal.js.map

package/lib/example.test.js

@@ -1,5 +0,0 @@
-describe("empty test", () => {
-    it("empty test", () => { });
-});
-export {};
-//# sourceMappingURL=example.test.js.map

package/lib/find-css-includes.js

@@ -1,23 +0,0 @@
-import { promises as fs } from "fs";
-import _locreq from "locreq";
-import { relative } from "path";
-import { walkDir } from "./utils/walk.js";
-const target_locreq = _locreq(process.cwd());
-export async function generate_css_includes() {
-    const files = await Promise.all((await walkDir(target_locreq.resolve("src/")))
-        .filter((f) => f.endsWith(".css") &&
-        !f.endsWith("/main.css") &&
-        !f.endsWith("\\main.css") &&
-        !f.endsWith("/includes.css") &&
-        !f.endsWith("\\includes.css") &&
-        !f.includes(".#"))
-        .map((fullpath) => relative(target_locreq.resolve("src/"), fullpath)));
-    await fs.writeFile(target_locreq.resolve("src/includes.css"), `/*  DO NOT EDIT! This file is generated automaticaly with npx sealgen generate-css-includes */
-
-@import "../node_modules/@sealcode/sealgen/src/forms/forms.css";
-${files.map((path) => `@import "${path.replaceAll("\\", "/")}";`).join("\n")}
-`);
-    // eslint-disable-next-line no-console
-    console.log("Successfuly generated new src/includes.css file");
-}
-//# sourceMappingURL=find-css-includes.js.map

package/lib/forms/controls/array.js

@@ -1,140 +0,0 @@
-import { hasShape, predicates } from "@sealcode/ts-predicates";
-import qs from "qs";
-import { tempstream } from "tempstream";
-import { Controls, Fields } from "../../index.js";
-import { FormFieldControl } from "./form-field-control.js";
-export function UnboundControl(controlClass, arbitrary_field_name, params) {
-    return [controlClass, arbitrary_field_name, params];
-}
-export class StructuredArray extends FormFieldControl {
-    constructor(field, item_controls) {
-        super([field]);
-        this.field = field;
-        this.item_controls = item_controls;
-    }
-    getFrameID() {
-        return `array-frame-${this.field.name}`;
-    }
-    getInnerFormID() {
-        return this.getFrameID() + "-form";
-    }
-    getActionURL(form_id, action) {
-        return `${this.getFrameID()}${form_id || action ? "?" : ""}${qs.stringify({ form_id, action })}`;
-    }
-    async getDefaultItemBody() {
-        return {};
-    }
-    makeSubfield(_field_name) {
-        const fields = this;
-        return new Fields.SimpleFormField(false);
-    }
-    async renderItemControl(ctx, form_id, control, item, index) {
-        const fctx = {
-            ctx,
-            data: {},
-            messages: [],
-            field_name_prefix: "",
-            form_id,
-            validate: false,
-        };
-        if (Array.isArray(control)) {
-            const [constructor, field_name, params] = control;
-            const field = this.makeSubfield(field_name);
-            if (!field) {
-                console.warn(`makeSubfield returned null for field ${field_name}`);
-                return "";
-            }
-            await field.init(`${this.field.name}[data][${index}][${field_name}]`);
-            const hidden_shadow = new Controls.Derived([field], async (values, { inner_form_id, field_name }) => /* HTML */ `<input
-					name="${field_name}"
-					type="hidden"
-					value="${values[field_name] || ""}"
-					form="${inner_form_id}"
-				/>`, async () => ({
-                inner_form_id: this.getInnerFormID(),
-                field_name: field.name,
-            }));
-            return tempstream `${new constructor(field, params).render({
-                ...fctx,
-                data: { [field.name]: item[field_name] },
-            })}${hidden_shadow.render({
-                ...fctx,
-                data: { [field.name]: item[field_name] },
-                form_id: this.getInnerFormID(),
-            })}`;
-        }
-        else {
-            return control.render(fctx);
-        }
-    }
-    async renderItem(ctx, form_id, item, index) {
-        return tempstream /* HTML */ `<div>
-			${this.item_controls.map((control) => this.renderItemControl(ctx, form_id, control, item, index))}
-			<input
-				type="submit"
-				value="remove"
-				form="${this.getInnerFormID()}"
-				formaction="${this.getActionURL(form_id, {
-            remove: index,
-        })}"
-			/>
-		</div>`;
-    }
-    async getItems(ctx, raw_values) {
-        return (await this.field.getValue(ctx, raw_values)).parsed;
-    }
-    async _render(ctx, form_id, raw_values) {
-        const items = await this.getItems(ctx, raw_values);
-        return tempstream /* HTML */ `<turbo-frame id="${this.getFrameID()}">
-			Reverse Single Reference
-			${items.map((item, index) => this.renderItem(ctx, form_id, item, index))}
-			<form id="${this.getInnerFormID()}" method="POST"></form>
-			<input
-				type="submit"
-				value="add"
-				form="${this.getInnerFormID()}"
-				formaction="${this.getActionURL(form_id, {
-            insert: { index: items.length, value: {} },
-        })}"
-			/>
-		</turbo-frame>`;
-    }
-    render(fctx) {
-        return this._render(fctx.ctx, fctx.form_id, fctx.data);
-    }
-    async getTargetItemID(ctx) {
-        return ctx.params.id;
-    }
-    mount(router) {
-        console.log("mounting!", this.getActionURL());
-        router.post(this.getActionURL(), async (ctx) => {
-            let form_id = ctx.query.form_id;
-            if (typeof form_id != "string") {
-                throw new Error("Missing form_id query param");
-            }
-            const item = await this.field.sealious_field.collection.getByID(ctx.$context, await this.getTargetItemID(ctx));
-            if (!hasShape({ action: predicates.object }, ctx.$body)) {
-                throw new Error("Missing action param");
-            }
-            const field_data = ctx.$body[this.field.name] || { data: [] };
-            console.log({ action: field_data });
-            if (!hasShape({
-                data: predicates.array(this.field.sealious_field.value_predicate),
-            }, field_data)) {
-                throw new Error("missing data atribute in action description");
-            }
-            item.set(this.field.name, {
-                ...ctx.$body.action,
-                data: field_data.data || [],
-            });
-            console.log("ACTION", {
-                ...ctx.$body.action,
-                data: field_data.data || [],
-            });
-            await item.save(ctx.$context);
-            console.log(await item.getDecodedBody(ctx.$context, {}));
-            ctx.body = this._render(ctx, form_id, await item.getDecodedBody(ctx.$context, {}));
-        });
-    }
-}
-//# sourceMappingURL=array.js.map

package/lib/forms/controls/autocomplete.js

@@ -1,23 +0,0 @@
-import { SimpleInput } from "./simple-input.js";
-export class Autocomplete extends SimpleInput {
-    constructor(field, options) {
-        super(field);
-        this.field = field;
-        this.options = options;
-    }
-    getListID() {
-        return this.getID() + "_list";
-    }
-    async getInputAttributes(fctx) {
-        return {
-            ...(await super.getInputAttributes(fctx)),
-            list: this.getListID(),
-        };
-    }
-    async postInput(ctx) {
-        return /* HTML */ `<datalist id="${this.getListID()}">
-			${(await this.field.generateOptions(ctx)).map(({ value }) => /* HTML */ `<option>${value}</option>`)}
-		</datalist>`;
-    }
-}
-//# sourceMappingURL=autocomplete.js.map

package/lib/forms/controls/big-radio-group.js

@@ -1,34 +0,0 @@
-import { tempstream } from "tempstream";
-import { FormFieldControl } from "./form-field-control.js";
-export class BigRadioGroup extends FormFieldControl {
-    constructor(field, options) {
-        super([field]);
-        this.field = field;
-        this.options = options;
-    }
-    async render(fctx) {
-        const { raw: current_value } = await this.field.getValue(fctx.ctx, fctx.data);
-        return tempstream /* HTML */ `<div class="bigradios">
-			${Object.entries(this.options).map(([key, { description }]) => {
-            const id = `${this.field.name}-radio-${key}`;
-            return tempstream /* HTML */ `<input
-						type="radio"
-						name="${this.field.name}"
-						value="${key}"
-						id="${id}"
-						style="display: none"
-						${fctx.form_id ? `form=${fctx.form_id}` : ""}
-						${this.field.required ? "required" : ""}
-						${key == current_value ? "checked" : ""}
-					/>
-					<div class="bigradio">
-						${typeof description == "function"
-                ? description(fctx)
-                : description}
-						<label class="bigradio__cta" for="${id}">Wybierz</label>
-					</div>`;
-        })}
-		</div>`;
-    }
-}
-//# sourceMappingURL=big-radio-group.js.map

package/lib/forms/controls/checkbox-group.js

@@ -1,29 +0,0 @@
-import { ProxyFormField } from "../fields/proxy-field.js";
-import { CheckboxWithValue } from "./checkbox.js";
-import { FieldGroup, FormFieldControl } from "./controls.js";
-export class CheckboxGroup extends FormFieldControl {
-    constructor(field, options = {}) {
-        super([field]);
-        this.field = field;
-        this.options = options;
-    }
-    wrapGroup(fctx, checkboxes) {
-        return new FieldGroup(checkboxes, {
-            label: this.options.label,
-            classes: [
-                ...(this.options.classes || []),
-                "field-group--checkboxes",
-            ],
-        }).render(fctx);
-    }
-    async render(fctx) {
-        const { parsed: values } = await this.field.getValue(fctx.ctx, fctx.data);
-        const checkboxes = this.field.options.map((option) => new CheckboxWithValue(new ProxyFormField(false, this.field.name, false, values.includes(option)), {
-            id: this.field.name + "__" + option,
-            label: (this.options.checkboxNameToLabel ||
-                ((s) => s))(option),
-        }, option));
-        return this.wrapGroup(fctx, checkboxes);
-    }
-}
-//# sourceMappingURL=checkbox-group.js.map

package/lib/forms/controls/checkbox.js

@@ -1,24 +0,0 @@
-import { Tickable } from "./tickable.js";
-export class Checkbox extends Tickable {
-    constructor() {
-        super(...arguments);
-        this.type = "checkbox";
-    }
-    isChecked(_ctx, _data, value) {
-        return value;
-    }
-    getValueAttribute() {
-        return "";
-    }
-}
-export class CheckboxWithValue extends Checkbox {
-    constructor(field, options, value) {
-        super(field, options);
-        this.field = field;
-        this.value = value;
-    }
-    getValueAttribute() {
-        return this.value;
-    }
-}
-//# sourceMappingURL=checkbox.js.map

package/lib/forms/controls/checkboxed-list-input.js

@@ -1,35 +0,0 @@
-import { is, predicates } from "@sealcode/ts-predicates";
-import { tempstream } from "tempstream";
-import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper.js";
-import { FormFieldControl } from "./controls.js";
-export class CheckboxedListInput extends FormFieldControl {
-    constructor(field, options = { label: field.name }) {
-        super([field]);
-        this.field = field;
-        this.options = options;
-    }
-    async render(fctx) {
-        const { parsed: pickedValues } = await this.field.getValue(fctx.ctx, fctx.data);
-        if (!is(pickedValues, predicates.array(predicates.string))) {
-            throw new Error("picked values is not an array of strings");
-        }
-        const [options, isVisible] = await Promise.all([
-            this.field.generateOptions(fctx.ctx),
-            this.field.isVisible(fctx.ctx),
-        ]);
-        const { name, required } = this.field;
-        return tempstream /* HTML */ `${isVisible
-            ? Object.entries(options).map(([value, text]) => inputWrapper([name, getRequiredClass(required)], 
-            /* HTML */ `
-							<input
-								type="checkbox"
-								id="${name}.${value}"
-								name="${name}.${value}"
-								${pickedValues.includes(value) ? "checked" : ""}
-							/>
-							<label for="${name}.${value}">${text}</label>
-						`))
-            : ""}`;
-    }
-}
-//# sourceMappingURL=checkboxed-list-input.js.map