@sealcode/sealgen 0.8.48 → 0.8.49

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.8.48",
+	"version": "0.8.49",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"scripts": {

package/src/add-collection.ts

@@ -0,0 +1,31 @@
+import { resolve } from "path";
+import _locreq from "locreq";
+import { promises as fs, existsSync } from "fs";
+import { question } from "./utils/question";
+import { collectionTemplate } from "./templates/collection";
+import { generateCollections } from "./generate-collections";
+const target_locreq = _locreq(process.cwd());
+
+export async function addCollection(): Promise<void> {
+	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: string) => s.length > 3 && regex_pattern.test(s)
+	);
+	const url = await question(
+		"Enter the url-friendly name for the collection (e.g. secret-documents): ",
+		(s: string) => !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();
+}

package/src/add-route.test.ts

@@ -0,0 +1,58 @@
+import { promises as fs } from "fs";
+import { exec, spawn } from "child_process";
+import { promisify } from "util";
+import axios from "axios";
+import waitPort from "wait-port";
+import getPort from "get-port";
+
+const execAsync = promisify(exec);
+
+describe("add route test", () => {
+	let node_pid = 0;
+	const app_path = "/tmp/sealious-minimal";
+	const container_name = "sealgen-test-mongo";
+	afterEach(async function () {
+		if (node_pid != 0) await execAsync(`kill -9 ${node_pid}`);
+		await Promise.all([
+			fs.rm(app_path, { recursive: true, force: true }),
+			execAsync(`docker rm -f ${container_name}`),
+		]);
+	});
+
+	it("creates minimal sealious app", async function () {
+		this.timeout(250000);
+		console.log("\tcloning sealious-minimal...");
+		await execAsync(
+			`git clone https://hub.sealcode.org/source/sealious-minimal.git ${app_path} && cd ${app_path} && git checkout f48991a0a8b426e0d2f4a4b448fdd41d643b0dae`
+		);
+		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} && npx sealgen add-route --url=/sample --action=Sample --mode=page && npm run 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,
+		});
+		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");
+	});
+});

package/src/add-route.ts

@@ -0,0 +1,89 @@
+import { existsSync, promises as fs } from "fs";
+import _locreq from "locreq";
+import { resolve } from "path";
+import { generateRoutes } from "./generate-routes";
+import { formTemplate } from "./templates/form";
+import { listTemplate } from "./templates/list";
+import { multiformTemplate } from "./templates/multiform";
+import { pageTemplate } from "./templates/page";
+import { redirectTemplate } from "./templates/redirect";
+import { testTemplate } from "./templates/route-test";
+import { escape_url_params } from "./utils/escape-url-params";
+import prompts = require("prompts");
+import { postTemplate } from "./templates/post";
+import { statefulPageTemplate } from "./templates/stateful-page";
+
+export async function addRoute(
+	params: Partial<{ [key in "action" | "url" | "mode"]: string }>,
+	app_directory: string = process.cwd()
+): Promise<void> {
+	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: string) =>
+				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 (e.g. /admin/users/add): ",
+			validate: (s: string) =>
+				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" },
+			],
+		},
+	]);
+
+	const { action, url, mode } = response as Record<string, string>;
+
+	const file_path = target_locreq.resolve(
+		`src/back/routes/${escape_url_params(url)}.${mode}.ts`
+	);
+	const test_file_path = target_locreq.resolve(
+		`src/back/routes/${escape_url_params(url)}.test.ts`
+	);
+	const template = {
+		page: pageTemplate,
+		form: formTemplate,
+		list: listTemplate,
+		multiform: multiformTemplate,
+		redirect: redirectTemplate,
+		post: postTemplate,
+		sreact: statefulPageTemplate,
+	}[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();
+}

package/src/build.ts

@@ -0,0 +1,94 @@
+import { build, BuildResult } from "esbuild";
+import { sassPlugin } from "esbuild-sass-plugin";
+import * as chokidar from "chokidar";
+import { default as glob } from "tiny-glob";
+import { generateScssIncludes } from "./find-scss-includes";
+import { sleep } from "./utils/sleep";
+import { generateCollections } from "./generate-collections";
+import { generateRoutes } from "./generate-routes";
+
+async function build_ts() {
+	await Promise.all([generateCollections(), generateRoutes()]);
+	const entryPoints = await glob("./src/back/**/*.ts");
+	try {
+		await build({
+			entryPoints,
+			sourcemap: true,
+			outdir: "./dist/back",
+			logLevel: "info",
+			platform: "node",
+			target: "es2022",
+			format: "cjs",
+		});
+	} catch (e) {
+		console.error(e.message);
+	}
+}
+
+async function complex_build(watch: boolean): Promise<void> {
+	let scss_build: BuildResult | null = null;
+	if (watch) {
+		const watcher = chokidar.watch("src", { ignoreInitial: true });
+		watcher.on("all", async (_, path) => {
+			if (!scss_build) return;
+			if (path.includes(".#")) return;
+			if (path.endsWith(".scss") && !path.endsWith("/includes.scss")) {
+				// refresh the list of all scss files in includes.scss
+				await generateScssIncludes();
+				try {
+					await scss_build?.rebuild?.();
+					console.log(`Built main.scss [on ${path}]`);
+				} catch (e) {
+					console.error(e.message);
+					await sleep(200);
+					scss_build
+						?.rebuild?.()
+						// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+						.catch((e) => console.error(e?.message));
+				}
+			}
+			if (
+				path.endsWith(".ts") &&
+				!path.endsWith("src/back/collections/collections.ts") &&
+				!path.endsWith("src/back/routes/routes.ts") &&
+				!path.endsWith("src/back/routes/urls.ts")
+			) {
+				await build_ts();
+				console.log(`Finished TS build [on ${path}]`);
+			}
+		});
+	}
+	await generateScssIncludes();
+	scss_build = await build({
+		entryPoints: ["./src/main.scss"],
+		sourcemap: true,
+		outfile: "./public/dist/style.css",
+		logLevel: "info",
+		incremental: watch,
+		plugins: [sassPlugin()],
+	});
+	await build_ts();
+	watch && scss_build?.rebuild?.();
+}
+
+export async function buildProject({
+	watch,
+}: {
+	watch: boolean;
+}): Promise<void> {
+	try {
+		await build({
+			entryPoints: ["./src/front/index.ts"],
+			sourcemap: true,
+			outfile: "./public/dist/bundle.js",
+			logLevel: "info",
+			bundle: true,
+			watch,
+		});
+		await complex_build(watch);
+	} catch (e) {
+		console.log("CAUGHT!");
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+		console.error(e.message);
+	}
+}

package/src/cli.ts

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+import { addCollection } from "./add-collection";
+import { addRoute } from "./add-route";
+import { buildProject } from "./build";
+import { generateScssIncludes } from "./find-scss-includes";
+import { generateCollections } from "./generate-collections";
+import { generateRoutes } from "./generate-routes";
+import { makeEnv } from "./make-env";
+
+const actions: Record<
+	string,
+	(args: Record<string, string | boolean>) => Promise<void> | undefined
+> = {
+	"add-collection": addCollection,
+	"add-route": addRoute,
+	"generate-collections": generateCollections,
+	"generate-routes": generateRoutes,
+	"generate-scss-includes": generateScssIncludes,
+	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,
+};
+
+void (async function () {
+	const action = process.argv.at(2);
+	actions;
+	const fn = actions[action || "default"] || actions.default;
+	await fn(require("yargs").argv);
+})();

package/src/components/components.ts

@@ -0,0 +1,2 @@
+export * from "./tabs";
+export * from "./toggle-modal";

package/src/components/tabs.ts

@@ -0,0 +1,95 @@
+import { FlatTemplatable, tempstream } from "tempstream";
+
+function name_to_id(str: string) {
+	return str.replace(/\W/g, "-");
+}
+
+const style = (hide_tabs_width: number) => /* 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: Record<string, FlatTemplatable>,
+	selected_tab_style = "font-weight: bold;",
+	selected_index = 0,
+	hide_tabs_width = 0
+): FlatTemplatable {
+	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>`;
+	})}`;
+}

package/src/components/toggle-modal.ts

@@ -0,0 +1,52 @@
+import { FlatTemplatable, tempstream } from "tempstream";
+import { makeSlug } from "../utils/utils";
+
+export function toggleModal(options: {
+	name: string;
+	contentWrapped: (id: string) => FlatTemplatable | Promise<FlatTemplatable>;
+	contentUnwrapped: (
+		id: string
+	) => FlatTemplatable | Promise<FlatTemplatable>;
+}) {
+	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>`;
+}

package/src/example.test.ts

@@ -0,0 +1,3 @@
+describe("empty test", () => {
+	it("empty test", () => {});
+});

package/src/find-scss-includes.ts

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