@sealcode/sealgen 0.11.8 → 0.12.0

package/lib/remove-named-imports.js

@@ -0,0 +1,47 @@
+import fs from "node:fs/promises";
+import { extname } from "node:path";
+const generate_names = (function* generate_names() {
+    const base_name = "____unique_import_";
+    let count = 0;
+    while (true) {
+        yield `${base_name}${count}`;
+        count++;
+    }
+})();
+export const remove_named_imports = {
+    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",
+            };
+        });
+    },
+};
+//# sourceMappingURL=remove-named-imports.js.map

package/lib/run.js

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

package/lib/sanitize.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.attribute = void 0;
-function attribute(raw) {
+export function attribute(raw) {
     if (typeof raw !== "string") {
         raw = raw.toString();
     }
@@ -10,5 +7,4 @@ function attribute(raw) {
         .replace('"', """)
         .replaceAll("'", "'");
 }
-exports.attribute = attribute;
 //# sourceMappingURL=sanitize.js.map

package/lib/src/add-collection.js

@@ -0,0 +1,24 @@
+import { resolve } from "path";
+import _locreq from "locreq";
+import { promises as fs, existsSync } from "fs";
+import { question } from "./utils/question.js";
+import { collectionTemplate } from "./templates/collection.js";
+import { generateCollections } from "./generate-collections.js";
+const target_locreq = _locreq(process.cwd());
+export async function addCollection() {
+    const regex_pattern = /^([A-Z_$][a-zA-Z0-9_$]*)$/;
+    const collection_name = await question('What\'s the name of the collection class (e.g. "SecretDocuments", must start with a capital letter): ', (s) => s.length > 3 && regex_pattern.test(s));
+    const url = await question("Enter the url-friendly name for the collection (e.g. secret-documents): ", (s) => !s.includes("/") && !s.includes(" "));
+    const file_path = target_locreq.resolve(`src/back/collections/${url}.ts`);
+    if (existsSync(file_path)) {
+        // eslint-disable-next-line no-console
+        console.error(`ERROR: File ${file_path} already exists.`);
+        return;
+    }
+    await fs.mkdir(resolve(file_path, "../"), { recursive: true });
+    await fs.writeFile(file_path, collectionTemplate(collection_name));
+    // eslint-disable-next-line no-console
+    console.log(`${file_path} created`);
+    await generateCollections();
+}
+//# sourceMappingURL=add-collection.js.map

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

@@ -0,0 +1,27 @@
+import { resolve } from "path";
+import _locreq from "locreq";
+import { promises as fs, existsSync } from "fs";
+import { question } from "./utils/question.js";
+const target_locreq = _locreq(process.cwd());
+import { jddComponentTemplate } from "./templates/jdd-component.js";
+import { generateComponents } from "./generate-components.js";
+import { toKebabCase } from "js-convert-case";
+export async function addJDDComponent() {
+    const component_name = await question("What's the name of the component?  > ", (s) => s.length > 3);
+    const file_path = target_locreq.resolve(`src/back/jdd-components/${toKebabCase(component_name)}/${toKebabCase(component_name)}.jdd.tsx`);
+    if (existsSync(file_path)) {
+        // eslint-disable-next-line no-console
+        console.error(`ERROR: File ${file_path} already exists.`);
+        return;
+    }
+    await fs.mkdir(resolve(file_path, "../"), { recursive: true });
+    await fs.writeFile(file_path, jddComponentTemplate(component_name));
+    const css_file_path = target_locreq.resolve(`src/back/jdd-components/${toKebabCase(component_name)}/${toKebabCase(component_name)}.css`);
+    await fs.writeFile(css_file_path, `.${toKebabCase(component_name)} {
+}`);
+    // eslint-disable-next-line no-console
+    console.log(`Created ${file_path}`);
+    console.log(`Created ${css_file_path}`);
+    await generateComponents();
+}
+//# sourceMappingURL=add-jdd-component.js.map

package/lib/src/add-route.js

@@ -0,0 +1,65 @@
+import { existsSync, promises as fs } from "fs";
+import _locreq from "locreq";
+import { resolve } from "path";
+import { generateRoutes } from "./generate-routes.js";
+import { testTemplate } from "./templates/route-test.js";
+import { escape_url_params } from "./utils/escape-url-params.js";
+import prompts from "prompts";
+import { Templates } from "./templates/templates.js";
+export async function addRoute(params, app_directory = process.cwd()) {
+    const target_locreq = _locreq(app_directory);
+    prompts.override(params);
+    const response = await prompts([
+        {
+            type: "text",
+            name: "action",
+            message: 'What\'s the name of the action (e.g. "AddUser"): ',
+            validate: (s) => s.length > 3 ? true : "Should be at least 3 characters long",
+        },
+        {
+            type: "text",
+            name: "url",
+            message: "Enter a full absolute path for the new route (for example: /admin/users/:id/edit): ",
+            validate: (s) => s.trim()[0] == "/" ? true : "Should start with a '/'",
+        },
+        {
+            type: "select",
+            name: "mode",
+            message: "What kind of route is it?",
+            choices: [
+                { title: "page", value: "page" },
+                { title: "stateful page", value: "sreact" },
+                { title: "form", value: "form" },
+                { title: "list", value: "list" },
+                { title: "multiform", value: "multiform" },
+                { title: "redirect", value: "redirect" },
+                { title: "raw POST", value: "post" },
+                { title: "Long Running Process status page", value: "lpr" },
+            ],
+        },
+    ]);
+    const { action, url, mode } = response;
+    const extension = ["list", "lpr", "page", "sreact"].includes(mode)
+        ? "tsx"
+        : "ts";
+    const file_path = target_locreq.resolve(`src/back/routes/${escape_url_params(url)}.${mode}.${extension}`);
+    const test_file_path = target_locreq.resolve(`src/back/routes/${escape_url_params(url)}.test.ts`);
+    const template = Templates[mode];
+    if (!template) {
+        throw new Error(`Could not get template ${mode}`);
+    }
+    if (existsSync(file_path)) {
+        // eslint-disable-next-line no-console
+        console.error(`ERROR: File ${file_path} already exists.`);
+        return;
+    }
+    await fs.mkdir(resolve(file_path, "../"), { recursive: true });
+    await fs.writeFile(file_path, await template(action, file_path));
+    await fs.writeFile(test_file_path, testTemplate(action, file_path));
+    // eslint-disable-next-line no-console
+    console.log(`${file_path} created`);
+    // eslint-disable-next-line no-console
+    console.log(`${test_file_path} created`);
+    await generateRoutes();
+}
+//# sourceMappingURL=add-route.js.map

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

@@ -0,0 +1,72 @@
+import { promises as fs } from "fs";
+import { exec, spawn } from "child_process";
+import axios from "axios";
+import waitPort from "wait-port";
+import getPort from "get-port";
+import _locreq from "locreq";
+const target_locreq = _locreq(__dirname);
+const execAsync = (cmd) => {
+    return new Promise((resolve) => {
+        const process = exec(cmd);
+        process?.stdout?.on("data", (data) => {
+            console.log(`stdout: ${data}`);
+        });
+        process?.stderr?.on("data", (data) => {
+            console.error(`stdout: ${data}`);
+        });
+        process.on("exit", (code) => {
+            resolve();
+        });
+    });
+};
+const callSealgenBin = () => `node ${target_locreq.resolve("lib/cli.js")}`;
+describe("add route test", () => {
+    let node_pid = 0;
+    const app_path = "/tmp/sealious-minimal";
+    const container_name = "sealgen-test-mongo";
+    afterEach(async function () {
+        try {
+            if (node_pid != 0)
+                await execAsync(`kill -9 ${node_pid}`);
+        }
+        catch (error) {
+            throw new Error("node process exited unexpectedly, please inspect the output");
+        }
+        await Promise.all([
+            fs.rm(app_path, { recursive: true, force: true }),
+            execAsync(`docker rm -f ${container_name}`),
+        ]);
+    });
+    it("creates minimal sealious app", async function () {
+        console.log("\tcloning sealious-minimal...");
+        await execAsync(`git clone https://hub.sealcode.org/source/sealious-minimal.git ${app_path} && cd ${app_path} && git checkout d5abeb9514359dde4`);
+        console.log("\tinstalling dependencies and sealgen...");
+        await execAsync(`cd ${app_path} && npm ci && rm -rf node_modules/@sealcode/sealgen && ln -s $OLDPWD node_modules/@sealcode/sealgen`);
+        console.log("\trunning add-route and building app...");
+        await execAsync(`cd ${app_path} && ${callSealgenBin()} add-route --url=/sample --action=Sample --mode=page && ${callSealgenBin()} build`);
+        console.log("\tstarting the database...(if timeouts here, run 'docker pull mongo:4.4-bionic' to solve)");
+        const port = await getPort();
+        await execAsync(`docker run -p ${port}:27017 --name ${container_name} -d mongo:4.4-bionic`);
+        console.log("\trunning app and making request to the generated url...");
+        const env = { ...process.env, SEALIOUS_MONGO_PORT: port.toString() };
+        let app_start = spawn(`node`, [`${app_path}/dist/back/index.js`], {
+            env,
+        });
+        app_start.stdout.on("data", (data) => console.log(data.toString()));
+        app_start.stderr.on("data", (data) => console.log(data.toString()));
+        if (app_start.pid == undefined)
+            throw new Error("node failed to start");
+        node_pid = app_start.pid;
+        await waitPort({
+            host: "localhost",
+            port: 8080,
+            output: "silent",
+            timeout: 6000,
+        });
+        const res = await axios.get("http://localhost:8080/sample");
+        if (res.status != 200) {
+            throw new Error("url generated by add-route exists but doesnt return 200");
+        }
+    }, 250000);
+});
+//# sourceMappingURL=add-route.test.js.map

package/lib/src/build.js

@@ -0,0 +1,142 @@
+import { build, context } from "esbuild";
+import { promises as fs } from "fs";
+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 { remove_named_imports } from "../remove-named-imports.js";
+import _locreq from "locreq";
+const target_locreq = _locreq(process.cwd());
+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: [remove_named_imports],
+        });
+    }
+    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/src/cli.js

@@ -0,0 +1,37 @@
+#!/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: `npx sealgen <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;
+    const args = yargs().argv;
+    console.log({ args });
+    await fn(args);
+})();
+//# sourceMappingURL=cli.js.map

package/lib/src/components/components.js

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

package/lib/src/components/tabs.js

@@ -0,0 +1,88 @@
+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/src/components/toggle-modal.js

@@ -0,0 +1,46 @@
+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/src/example.test.js

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

package/lib/src/find-css-includes.js

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