@sealcode/sealgen 0.1.8 → 0.3.1

package/lib/utils/walk.js

@@ -1,35 +1,24 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.walk = void 0;
+exports.walkDir = void 0;
 const fs_1 = require("fs");
 const path_1 = require("path");
-function walk(dir) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const entries = yield fs_1.promises.readdir(dir);
-        let ret = [];
-        for (const entry of entries) {
-            const fullpath = path_1.resolve(dir, entry);
+async function walkDir(dir) {
+    const entries = await fs_1.promises.readdir(dir);
+    let ret = [];
+    for (const entry of entries) {
+        const fullpath = path_1.resolve(dir, entry);
+        // eslint-disable-next-line no-await-in-loop
+        const info = await fs_1.promises.stat(fullpath);
+        if (info.isDirectory()) {
             // eslint-disable-next-line no-await-in-loop
-            const info = yield fs_1.promises.stat(fullpath);
-            if (info.isDirectory()) {
-                // eslint-disable-next-line no-await-in-loop
-                ret = [...ret, ...(yield walk(fullpath))];
-            }
-            else {
-                ret = [...ret, fullpath];
-            }
+            ret = [...ret, ...(await walkDir(fullpath))];
         }
-        return ret;
-    });
+        else {
+            ret = [...ret, fullpath];
+        }
+    }
+    return ret;
 }
-exports.walk = walk;
+exports.walkDir = walkDir;
 //# sourceMappingURL=walk.js.map

package/lib/utils/walk.js.map

@@ -1 +1 @@
-{"version":3,"file":"walk.js","sourceRoot":"","sources":["../../src/utils/walk.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,2BAAoC;AACpC,+BAA+B;AAE/B,SAAsB,IAAI,CAAC,GAAW;;QACrC,MAAM,OAAO,GAAG,MAAM,aAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QACtC,IAAI,GAAG,GAAa,EAAE,CAAC;QACvB,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;YAC5B,MAAM,QAAQ,GAAG,cAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;YACrC,4CAA4C;YAC5C,MAAM,IAAI,GAAG,MAAM,aAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAErC,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;gBACvB,4CAA4C;gBAC5C,GAAG,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;aAC1C;iBAAM;gBACN,GAAG,GAAG,CAAC,GAAG,GAAG,EAAE,QAAQ,CAAC,CAAC;aACzB;SACD;QACD,OAAO,GAAG,CAAC;IACZ,CAAC;CAAA;AAhBD,oBAgBC"}
+{"version":3,"file":"walk.js","sourceRoot":"","sources":["../../src/utils/walk.ts"],"names":[],"mappings":";;;AAAA,2BAAoC;AACpC,+BAA+B;AAExB,KAAK,UAAU,OAAO,CAAC,GAAW;IACxC,MAAM,OAAO,GAAG,MAAM,aAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IACtC,IAAI,GAAG,GAAa,EAAE,CAAC;IACvB,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;QAC5B,MAAM,QAAQ,GAAG,cAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QACrC,4CAA4C;QAC5C,MAAM,IAAI,GAAG,MAAM,aAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAErC,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;YACvB,4CAA4C;YAC5C,GAAG,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;SAC7C;aAAM;YACN,GAAG,GAAG,CAAC,GAAG,GAAG,EAAE,QAAQ,CAAC,CAAC;SACzB;KACD;IACD,OAAO,GAAG,CAAC;AACZ,CAAC;AAhBD,0BAgBC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.1.8",
+	"version": "0.3.1",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"scripts": {
@@ -10,12 +10,14 @@
 		"test-reports": "npm run build && rm -fr .xunit coverage && npm run test -- --cover --test-report"
 	},
 	"bin": {
-		"sealgen": "./lib/index.js"
+		"sealgen": "./lib/cli.js"
 	},
 	"author": "",
 	"license": "ISC",
 	"devDependencies": {
+		"@types/koa__router": "^8.0.4",
 		"@types/mocha": "^9.0.0",
+		"@types/prompts": "^2.0.14",
 		"@typescript-eslint/eslint-plugin": "^4.29.3",
 		"@typescript-eslint/parser": "^4.29.3",
 		"eslint": "^7.32.0",
@@ -32,7 +34,20 @@
 	},
 	"types": "./@types/index.d.ts",
 	"dependencies": {
-		"@sealcode/ts-predicates": "^0.2.1",
-		"locreq": "^2.0.2"
+		"@koa/router": "^10.1.1",
+		"@sealcode/ts-predicates": "^0.4.0",
+		"esbuild": "^0.14.54",
+		"esbuild-sass-plugin": "^2.3.1",
+		"koa": "^2.13.0",
+		"locreq": "^2.0.2",
+		"merge": "^2.1.1",
+		"prompts": "^2.4.2",
+		"tempstream": "^0.0.19",
+		"tiny-glob": "^0.2.9"
+	},
+	"peerDependencies": {
+		"@koa/router": "^10.1.1",
+		"koa": "^2.13.0",
+		"sealious": "0.14.x"
 	}
 }

package/src/add-route.ts

@@ -8,6 +8,7 @@ import { escape_url_params } from "./utils/escape-url-params";
 
 import _locreq from "locreq";
 import { generateRoutes } from "./generate-routes";
+import { listTemplate } from "./templates/list";
 const target_locreq = _locreq(process.cwd());
 
 export async function addRoute(): Promise<void> {
@@ -19,19 +20,23 @@ export async function addRoute(): Promise<void> {
 		"Enter a full absolute path for the new route (e.g. /admin/users/add): ",
 		(s: string) => s.trim()[0] == "/"
 	);
-	const mode =
-		(await question("Is this a page (p) or a form (f)? ", (a: string) =>
-			["p", "f"].includes(a.toLowerCase())
-		)) == "p"
-			? "page"
-			: "form";
+	const mode_answer = (await question(
+		"Is this a page (p), a form (f), or a list (l)? ",
+		(a: string) => ["p", "f", "l"].includes(a.toLowerCase())
+	)) as "p" | "f" | "l";
+	const mode = (<const>{ p: "page", f: "form", l: "list" })[mode_answer];
+
 	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 = mode == "page" ? pageTemplate : formTemplate;
+	const template = {
+		page: pageTemplate,
+		form: formTemplate,
+		list: listTemplate,
+	}[mode];
 
 	if (existsSync(file_path)) {
 		// eslint-disable-next-line no-console
@@ -39,7 +44,7 @@ export async function addRoute(): Promise<void> {
 		return;
 	}
 	await fs.mkdir(resolve(file_path, "../"), { recursive: true });
-	await fs.writeFile(file_path, template(action, file_path));
+	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`);

package/src/build.ts

@@ -0,0 +1,82 @@
+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";
+
+async function build_ts() {
+	const entryPoints = await glob("./src/back/**/*.ts");
+	await build({
+		entryPoints,
+		sourcemap: true,
+		outdir: "./dist/back",
+		logLevel: "info",
+		platform: "node",
+		target: "node16",
+		format: "cjs",
+	});
+}
+
+async function complex_build(watch: boolean): Promise<void> {
+	let scss_build: BuildResult | null = null;
+	if (watch) {
+		const scss_watcher = chokidar.watch("src", { ignoreInitial: true });
+		scss_watcher.on("all", async (_, path) => {
+			if (!scss_build) 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);
+					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")) {
+				await build_ts();
+				console.log(`Finished TS biuld [on ${path}]`);
+			}
+		});
+	}
+
+	try {
+		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?.();
+	} catch (e) {
+		console.error(e);
+	}
+}
+
+export async function buildProject(...args: string[]): Promise<void> {
+	const watch = args.includes("--watch");
+	await build({
+		entryPoints: ["./src/front/index.ts"],
+		sourcemap: true,
+		outfile: "./public/dist/bundle.js",
+		logLevel: "info",
+		bundle: true,
+		watch,
+	});
+
+	try {
+		await complex_build(watch);
+	} catch (e) {
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+		console.error(e.message);
+	}
+}

package/src/cli.ts

@@ -0,0 +1,34 @@
+#!/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";
+
+const actions: Record<
+	string,
+	(...args: string[]) => 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(", ")}`
+		);
+	},
+};
+
+void (async function () {
+	const action = process.argv.at(2);
+	actions;
+	const fn = actions[action || "default"] || actions.default;
+	await fn(...process.argv.slice(3));
+})();

package/src/find-scss-includes.ts

@@ -1,13 +1,13 @@
 import { promises as fs } from "fs";
 import _locreq from "locreq";
 import { relative } from "path";
-import { walk } from "./utils/walk";
+import { walkDir } from "./utils/walk";
 
 const target_locreq = _locreq(process.cwd());
 
 export async function generateScssIncludes(): Promise<void> {
 	const files = await Promise.all(
-		(await walk(target_locreq.resolve("src/")))
+		(await walkDir(target_locreq.resolve("src/")))
 			.filter(
 				(f) =>
 					f.endsWith(".scss") &&
@@ -23,6 +23,7 @@ export async function generateScssIncludes(): Promise<void> {
 		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")}
 `
 	);

package/src/forms/controls/checkboxed-list-input.ts

@@ -0,0 +1,50 @@
+import { is, predicates } from "@sealcode/ts-predicates";
+import { BaseContext } from "koa";
+import { tempstream } from "tempstream";
+import { ChekboxedListField, FormField } from "../field";
+import { Form, FormData } from "../form";
+import { FormFieldsList } from "../form-fields-list";
+import { FormFieldControl } from "./controls";
+
+export class CheckboxedListInput extends FormFieldControl {
+	constructor(
+		public fieldname: string,
+		public options: { label: string } = { label: fieldname }
+	) {
+		super([fieldname]);
+	}
+
+	isValidFieldName(form: Form) {
+		return form.fields.some((f) => f.name == this.fieldname);
+	}
+
+	async _render(ctx: BaseContext, fields: FormField[], data: FormData) {
+		// safe to disable this as isValidFieldName takes care of checking if the field is of this type
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		const field = FormFieldsList.getField(
+			fields,
+			this.fieldname
+		) as ChekboxedListField;
+		const pickedValues = data.values[field.name] || "";
+		if (!is(pickedValues, predicates.array(predicates.string))) {
+			throw new Error("picked values is not an array of strings");
+		}
+		const [options, isVisible] = await Promise.all([
+			field.generateOptions(ctx),
+			field.isVisible(ctx),
+		]);
+		return tempstream/* HTML */ `${isVisible
+			? Object.entries(options).map(
+					([value, text]) => /* HTML */ `<div>
+						<input
+							type="checkbox"
+							id="${field.name}.${value}"
+							name="${field.name}.${value}"
+							${pickedValues.includes(value) ? "checked" : ""}
+						/>
+						<label for="${field.name}.${value}">${text}</label>
+					</div>`
+			  )
+			: ""}`;
+	}
+}

package/src/forms/controls/controls.ts

@@ -0,0 +1,9 @@
+export { FormControl } from "./form-control";
+export { FormFieldControl } from "./form-field-control";
+export { EditableCollectionSubset } from "./editable-collection-subset";
+export { Frame } from "./frame";
+export { CheckboxedListInput } from "./checkboxed-list-input";
+export { Dropdown } from "./dropdown";
+export { SimpleInput } from "./simple-input";
+export { FormHeader } from "./form-header";
+export { FormParagraph } from "./form-paragraph";

package/src/forms/controls/dropdown.ts

@@ -0,0 +1,57 @@
+import { BaseContext } from "koa";
+import { tempstream } from "tempstream";
+import { FormField, PickFromListField } from "../field";
+import { FormData } from "../form";
+import { FormFieldsList } from "../form-fields-list";
+import { FormFieldControl } from "./controls";
+
+export class Dropdown extends FormFieldControl {
+	constructor(
+		public fieldname: string,
+		public options: {
+			label: string;
+			autosubmit?: boolean;
+			autocomplete?: boolean;
+		} = {
+			label: fieldname,
+			autosubmit: false,
+			autocomplete: true,
+		}
+	) {
+		super([fieldname]);
+	}
+
+	areFieldNamesValid(fields: FormField[]) {
+		return (
+			super.areFieldNamesValid(fields) &&
+			FormFieldsList.getField(fields, this.fieldname) instanceof PickFromListField
+		);
+	}
+
+	_render(ctx: BaseContext, fields: FormField[], data: FormData) {
+		// safe to disable this as isValidFieldName takes care of checking if the field is of this type
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		const field = FormFieldsList.getField(
+			fields,
+			this.fieldname
+		) as PickFromListField;
+		const picked_value = data.values[field.name] || "";
+		const id = field.name;
+		return tempstream/* HTML */ `<label for="${id}">${this.options.label}</label
+			><select
+				name="${this.fieldnames}"
+				id="${id}"
+				${this.options.autosubmit ? `onchange='this.form.submit()'` : ""}
+				${!this.options.autocomplete ? `autocomplete="off"` : ""}
+			>
+				${Promise.resolve(field.generateOptions(ctx)).then((options) =>
+					Object.entries(options).map(
+						([value, text]) =>
+							`<option value="${value}" ${
+								(value || "") == picked_value ? "selected" : ""
+							}>${text}</option>`
+					)
+				)}
+			</select>`;
+	}
+}

package/src/forms/controls/editable-collection-subset.ts

@@ -0,0 +1,91 @@
+import { BaseContext } from "koa";
+import { Templatable, tempstream } from "tempstream";
+import { FormField, PickFromListField } from "../field";
+import { FormData } from "../form";
+import { FormFieldsList } from "../form-fields-list";
+import { FormFieldControl } from "./controls";
+
+/**
+ * This control has own forms in it so if you want to use it you
+ * probably shouldn't use `await super.render(ctx, data, path)` in
+ * render method of you from implementation and you should write
+ * your own implementation of this method. See forms that uses
+ * this control for reference.
+ */
+export class EditableCollectionSubset extends FormFieldControl {
+	constructor(
+		public fieldname: string,
+		public actionname: string,
+		public listLabel?: string,
+		public selectLabel?: string
+	) {
+		super([fieldname]);
+	}
+
+	_render(
+		ctx: BaseContext,
+		fields: FormField[],
+		data: FormData<string>
+	): Templatable | Promise<Templatable> {
+		// safe to disable this as isValidFieldName takes care of checking if the field is of this type
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		const field = FormFieldsList.getField(
+			fields,
+			this.fieldname
+		) as PickFromListField;
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		const values = data.values[this.fieldname] as string[];
+
+		return tempstream/* HTML */ `<div>
+			<ul>
+				${Promise.resolve(field.generateOptions(ctx)).then((options) =>
+					Object.entries(options)
+						.filter(([value]) => values.includes(value))
+						.map(
+							([value, text]) => /* HTML */ `
+								<li>
+									<form method="POST" action="${ctx.path}">
+										<span>${text}</span>
+										<input
+											type="hidden"
+											name="${this.fieldname}"
+											value="${value}"
+										/>
+										<input
+											type="hidden"
+											name="${this.actionname}"
+											value="list"
+										/>
+										<input
+											type="submit"
+											${this.listLabel
+												? `value="${this.listLabel}"`
+												: ""}
+										/>
+									</form>
+								</li>
+							`
+						)
+				)}
+			</ul>
+			<form method="POST" action="${ctx.path}">
+				<select name="${this.fieldname}">
+					${Promise.resolve(field.generateOptions(ctx)).then((options) =>
+						Object.entries(options)
+							.filter(([value]) => !values.includes(value))
+							.map(
+								([value, text]) =>
+									`<option value="${value}">${text}</option>`
+							)
+					)}
+				</select>
+				<input type="hidden" name="${this.actionname}" value="select" />
+				<input
+					type="submit"
+					${this.selectLabel ? `value="${this.selectLabel}"` : ""}
+				/>
+			</form>
+		</div>`;
+	}
+	role = <const>"input";
+}

package/src/forms/controls/form-control.ts

@@ -0,0 +1,13 @@
+import { BaseContext } from "koa";
+import { Templatable } from "tempstream";
+import { FormField } from "../field";
+import { FormData } from "../form";
+
+export abstract class FormControl {
+	abstract render(
+		ctx: BaseContext,
+		formFields: FormField[],
+		data: FormData
+	): Templatable | Promise<Templatable>;
+	abstract role: "input" | "decoration" | "messages" | "submit";
+}

package/src/forms/controls/form-field-control.ts

@@ -0,0 +1,39 @@
+import { BaseContext } from "koa";
+import { Templatable } from "tempstream";
+import { FormField } from "../field";
+import { FormData } from "../form";
+import { FormControl } from "./form-control";
+
+export abstract class FormFieldControl extends FormControl {
+	role = <const>"input";
+	constructor(public fieldnames: string[]) {
+		super();
+	}
+
+	areFieldNamesValid(fields: FormField[]) {
+		return this.fieldnames.every((fieldname) =>
+			fields.some((f) => f.name == fieldname)
+		);
+	}
+
+	abstract _render(
+		ctx: BaseContext,
+		fields: FormField[],
+		data: FormData
+	): Templatable | Promise<Templatable>;
+
+	render(
+		ctx: BaseContext,
+		fields: FormField[],
+		data: FormData
+	): Templatable | Promise<Templatable> {
+		if (!this.areFieldNamesValid(fields)) {
+			throw new Error(
+				`Invalid field names given to form control: "${this.fieldnames.join(
+					", "
+				)}". Allowed fields are: ${fields.map((f) => f.name).join(", ")}`
+			);
+		}
+		return this._render(ctx, fields, data);
+	}
+}

package/src/forms/controls/form-header.ts

@@ -0,0 +1,16 @@
+import { BaseContext } from "koa";
+import { FormControl } from "./controls";
+
+export class FormHeader extends FormControl {
+	role = <const>"decoration";
+	constructor(
+		public text: string,
+		public isVisible: (ctx: BaseContext) => Promise<boolean> = async () => true
+	) {
+		super();
+	}
+	async render(ctx: BaseContext) {
+		const isVsbl = await this.isVisible(ctx);
+		return isVsbl ? `<h2>${this.text}</h2>` : "";
+	}
+}

package/src/forms/controls/form-paragraph.ts

@@ -0,0 +1,11 @@
+import { FormControl } from "./controls";
+
+export class FormParagraph extends FormControl {
+	role = <const>"decoration";
+	constructor(public text: string) {
+		super();
+	}
+	render() {
+		return `<p>${this.text}</p>`;
+	}
+}

package/src/forms/controls/frame.ts

@@ -0,0 +1,26 @@
+import { Templatable } from "tempstream";
+import { FormControl } from "./controls";
+
+/**
+ * This class will render `turbo-frame` tag so that u can
+ * embed other route inside your form. This will require
+ * to add value to `data: FormData` (inside your master form
+ * render function) with key `Frame.FRAME_PATH_KEY`. Value
+ * needs to be url to route that you want to embed. If you
+ * this value wont be provided frame will redner empty string.
+ * See `src/back/routes/profile/[id].form.ts` for an example.
+ */
+export class Frame extends FormControl {
+	constructor(public src: string) {
+		super();
+	}
+
+	render(): Templatable | Promise<Templatable> {
+		return /* HTML */ `<turbo-frame
+			id="contrahents"
+			loading="lazy"
+			src="${this.src}"
+		></turbo-frame>`;
+	}
+	role = <const>"decoration";
+}