@sealcode/sealgen 0.14.3 → 0.14.5

package/dist/page/stateful-page.js

@@ -16,7 +16,8 @@ class StatefulPage extends Mountable {
         this.wrapInForm(
           state,
           await original_render(ctx, state, inputs)
-        )
+        ),
+        state
       );
     };
   }
@@ -123,7 +124,7 @@ class StatefulPage extends Mountable {
               options
             );
           } else if (target.indexOf(item) === -1) {
-            destination.push(item);
+            destination[index] = item;
           }
         });
         return destination;

package/dist/templates/stimulus-controller.js

@@ -0,0 +1,21 @@
+import { toKebabCase, toPascalCase } from "js-convert-case";
+function jddComponentTemplate(controller_name) {
+  return `import { Controller } from "stimulus";
+
+export default class ${toPascalCase(controller_name)} extends Controller {
+
+	connect() {
+		console.warn(
+			"Remove ${toKebabCase(
+    controller_name
+  )}.stimulus.ts file if your JDD component doesn't need any browser-side logic"
+		);
+	}
+}
+
+`;
+}
+export {
+  jddComponentTemplate
+};
+//# sourceMappingURL=stimulus-controller.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.14.3",
+	"version": "0.14.5",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "dist/index.js",
 	"type": "module",

package/src/build.ts

@@ -1,21 +1,16 @@
-import { build, BuildContext, 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 { removeNamedImports } from "../remove-named-imports.js";
-import md5 from "md5";
 
 import _locreq from "locreq";
-import path, { basename, extname } from "path";
-import { copyFile } from "fs/promises";
-import { FONTS_CONFIG_PATH, getFonts } from "./get-fonts.js";
+
+import {
+	BackendTSBuilder,
+	CSSBuilder,
+	FontsBuilder,
+	FrontendTSBuilder,
+} from "./builder.js";
 const target_locreq = _locreq(process.cwd());
 
 async function get_notifier_port() {
@@ -33,229 +28,37 @@ async function write_notifier_config(watch: boolean, port?: number) {
 	);
 }
 
-function addSuffix(filename: string, suffix: string) {
-	return filename.replace(/(\.[a-zA-Z0-9]+)?$/, suffix + "$1");
-}
-
-async function makeResourceURL(file_path: string) {
-	const hash_base = file_path + (await fs.stat(file_path)).mtimeMs;
-	const hash = md5(hash_base);
-	const public_url =
-		"dist/" + addSuffix(basename(file_path), "-" + hash.slice(0, 8));
-	const public_dir = "public";
-	await copyFile(
-		file_path,
-		target_locreq.resolve(path.resolve(public_dir, public_url))
-	);
-	return "/" + public_url;
-}
-
-async function build_ts() {
-	await Promise.all([
-		generateCollections(),
-		generateRoutes(),
-		generateComponents(),
-	]);
-	const embeddable_file_extensions = ["svg", "png", "jpg", "jpeg", "webp"];
-	const entryPoints = (
-		await glob(
-			`./src/back/**/*.{ts,tsx,${embeddable_file_extensions.join(",")}}`
-		)
-	).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",
-			loader: Object.fromEntries(
-				embeddable_file_extensions.map((ext) => ["." + ext, "js"])
-			),
-			plugins: [
-				{
-					name: "sealgen-rewrite-asset-imports",
-					setup(build) {
-						build.onLoad(
-							{ filter: /\.tsx?$/ },
-							async (args: any) => {
-								let contents = await fs.readFile(
-									args.path,
-									"utf8"
-								);
-								for (const ext of embeddable_file_extensions) {
-									const regex = new RegExp(
-										`^import (\\w+|{[^}]+}) from "([^"]+.${ext})";`,
-										"gm"
-									);
-									contents = contents.replaceAll(
-										regex,
-										(line) => {
-											return line.replace(
-												`.${ext}"`,
-												'.js"'
-											);
-										}
-									);
-								}
-
-								contents = removeNamedImports(contents);
-
-								return {
-									contents,
-									loader:
-										extname(args.path) === ".tsx"
-											? "tsx"
-											: "ts",
-								};
-							}
-						);
-					},
-				},
-				{
-					name: "sealgen-load-assets",
-					setup(build) {
-						build.onLoad(
-							{
-								filter: new RegExp(
-									`\\.(${embeddable_file_extensions.join(
-										"|"
-									)})$`
-								),
-							},
-							async (args: any) => {
-								let contents = `export const url =  "${await makeResourceURL(
-									args.path
-								)}";
-
-import fs from "fs";
-let buffer_promise = null;
-
-export const getBuffer = function(){
-	if(buffer_promise) return buffer_promise;
-	buffer_promise = fs.promises.readFile("${args.path}");
-	return buffer_promise;
-}
-
-export const getContent = async function(){
-    const buffer = await getBuffer();
-	return buffer.toString("utf-8");
-}
-
-export const getBase64 = async function(){
-    const buffer = await getBuffer();
-    return buffer.toString("base64");
-}
-
-export default { getContent, url, getBase64, getBuffer };
-`;
-								return {
-									contents,
-								};
-							}
-						);
-					},
-				},
-			],
-		});
-	} catch (e) {
-		// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-		console.error(e.message);
-	}
-}
-
-async function complex_build(watch: boolean): Promise<void> {
-	const loader = Object.fromEntries(
-		(<const>["png", "svg", "jpg", "gif", "jpeg", "otf", "ttf"]).map(
-			(ext) => <const>["." + ext, "file"]
-		)
-	);
-	let css_build: BuildContext = await context({
-		entryPoints: ["./src/main.css"],
-		sourcemap: true,
-		bundle: true,
-		outdir: "./public/dist",
-		logLevel: "info",
-		// plugins: [sassPlugin()],
-		loader,
-	});
-	let ongoing_fonts = false;
-	let ongoing_ts = false;
-	let ongoing_css = false;
-	let ongoing_ts_promise: Promise<any> | null = null;
+async function build(watch: boolean): Promise<void> {
+	const fonts_builder = new FontsBuilder();
+	const backend_ts_builder = new BackendTSBuilder();
+	const frontend_ts_builder = new FrontendTSBuilder();
+	const css_builder = new CSSBuilder();
+	const builders = [
+		fonts_builder,
+		backend_ts_builder,
+		css_builder,
+		frontend_ts_builder,
+	];
+	await Promise.all(builders.map((b) => b.build()));
 	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 == FONTS_CONFIG_PATH) {
-				if (!ongoing_fonts) {
-					ongoing_fonts = true;
-					await getFonts();
-					ongoing_fonts = false;
-				}
-				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));
+		watcher.on("all", async (_, file_path) => {
+			console.log("Detected a change!", file_path);
+			builders.forEach((builder) => {
+				const owns_a_file = builder.ownsFile(file_path);
+				if (owns_a_file) {
+					builder.build(notifier);
 				}
-				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()]);
-	if (watch) {
-		css_build?.rebuild?.();
-	} else {
-		css_build.dispose();
+		builders.forEach((builder) => {
+			builder.dispose();
+		});
 	}
 }
 
@@ -265,14 +68,7 @@ export async function buildProject({
 	watch: boolean;
 }): Promise<void> {
 	try {
-		await build({
-			entryPoints: ["./src/front/index.ts"],
-			sourcemap: true,
-			outfile: "./public/dist/bundle.js",
-			logLevel: "info",
-			bundle: true,
-		});
-		await complex_build(watch);
+		await build(watch);
 	} catch (e) {
 		console.log("CAUGHT!");
 		// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access

package/src/builder.ts

@@ -0,0 +1,176 @@
+import { build, BuildContext, context } from "esbuild";
+import glob from "tiny-glob";
+import { embeddable_file_extensions } from "./embeddable-file-extensions.js";
+import { load_assets_plugin } from "./esbuild-plugins/load-assets.js";
+import { rewrite_asset_imports_plugin } from "./esbuild-plugins/rewrite-asset-imports.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 { generateStimulusControllers } from "./generate-stimulus.js";
+import { FONTS_CONFIG_PATH, getFonts } from "./get-fonts.js";
+
+export abstract class Builder {
+	abstract ownsFile(file_path: string): boolean;
+	abstract getName(): string;
+	abstract _build(): Promise<void>;
+	abstract dispose(): Promise<void>;
+
+	constructor() {}
+
+	public ongoing_build: Promise<void> | null = null;
+
+	public build(notifier?: (message: string) => void) {
+		if (!this.ongoing_build) {
+			const build = this._build()
+				.catch((err) => {
+					console.error(err);
+				})
+				.then(() => {
+					notifier?.(this.getName());
+					this.ongoing_build = null;
+				});
+			this.ongoing_build = build;
+		}
+		return this.ongoing_build;
+	}
+}
+
+export class CSSBuilder extends Builder {
+	getName(): string {
+		return "css";
+	}
+
+	private context_promise: Promise<BuildContext> | null;
+
+	ownsFile(file_path: string) {
+		return (
+			file_path.endsWith(".css") && !file_path.endsWith("/includes.css")
+		);
+	}
+
+	async dispose(): Promise<void> {
+		return (await this.getBuildContext()).dispose();
+	}
+
+	async getBuildContext(): Promise<BuildContext> {
+		if (!this.context_promise) {
+			const loader = Object.fromEntries(
+				(<const>["png", "svg", "jpg", "gif", "jpeg", "otf", "ttf"]).map(
+					(ext) => <const>["." + ext, "file"]
+				)
+			);
+			const context_promise = context({
+				entryPoints: ["./src/main.css"],
+				sourcemap: true,
+				bundle: true,
+				outdir: "./public/dist",
+				logLevel: "info",
+				// plugins: [sassPlugin()],
+				loader,
+			});
+			this.context_promise = context_promise;
+			return context_promise;
+		} else {
+			return this.context_promise;
+		}
+	}
+
+	async _build() {
+		const context = await this.getBuildContext();
+		await generate_css_includes();
+		await context.rebuild();
+	}
+}
+
+export class FontsBuilder extends Builder {
+	getName(): string {
+		return "fonts";
+	}
+
+	ownsFile(file_path: string) {
+		return file_path == FONTS_CONFIG_PATH;
+	}
+
+	async dispose(): Promise<void> {}
+
+	async _build() {
+		return getFonts();
+	}
+}
+
+export class BackendTSBuilder extends Builder {
+	getName(): string {
+		return "backend-ts";
+	}
+
+	ownsFile(file_path: string) {
+		return (
+			(file_path.endsWith(".ts") || file_path.endsWith(".tsx")) &&
+			!file_path.endsWith("src/back/collections/collections.ts") &&
+			!file_path.endsWith("src/back/routes/routes.ts") &&
+			!file_path.endsWith("src/back/routes/urls.ts") &&
+			!file_path.endsWith("stimulus.ts") &&
+			!file_path.startsWith("src/front")
+		);
+	}
+
+	async dispose(): Promise<void> {}
+
+	async _build(): Promise<void> {
+		await Promise.all([
+			generateCollections(),
+			generateRoutes(),
+			generateComponents(),
+		]);
+		const entryPoints = (
+			await glob(
+				`./src/back/**/*.{ts,tsx,${embeddable_file_extensions.join(
+					","
+				)}}`
+			)
+		).filter((path) => !path.includes(".#"));
+		await build({
+			entryPoints,
+			sourcemap: true,
+			bundle: false,
+			jsxFactory: "TempstreamJSX.createElement",
+			outdir: "./dist/back",
+			logLevel: "info",
+			platform: "node",
+			target: "es2022",
+			format: "esm",
+			loader: Object.fromEntries(
+				embeddable_file_extensions.map((ext) => ["." + ext, "js"])
+			),
+			plugins: [rewrite_asset_imports_plugin, load_assets_plugin],
+		});
+	}
+}
+
+export class FrontendTSBuilder extends Builder {
+	getName(): string {
+		return "frontend-ts";
+	}
+
+	ownsFile(file_path: string) {
+		return (
+			file_path.startsWith("src/front") ||
+			file_path.endsWith(".stimulus.ts")
+		);
+	}
+
+	async dispose(): Promise<void> {}
+
+	async _build(): Promise<void> {
+		await generateStimulusControllers();
+		await build({
+			entryPoints: ["./src/front/index.ts"],
+			sourcemap: true,
+			outfile: "./public/dist/bundle.js",
+			logLevel: "info",
+			bundle: true,
+			minify: true,
+		});
+	}
+}

package/src/cli.ts

@@ -10,6 +10,7 @@ import { generateRoutes } from "./generate-routes.js";
 import { makeEnv } from "./make-env.js";
 import yargs from "yargs/yargs";
 import { getFonts } from "./get-fonts.js";
+import { generateStimulusControllers } from "./generate-stimulus.js";
 
 const actions: Record<
 	string,
@@ -32,7 +33,8 @@ const actions: Record<
 	},
 	"make-env": makeEnv,
 	"add-component": addJDDComponent,
-    	"get-fonts": getFonts,
+	"get-fonts": getFonts,
+	"generate-stimulus": generateStimulusControllers,
 };
 
 void (async function () {

package/src/embeddable-file-extensions.ts

@@ -0,0 +1 @@
+export const embeddable_file_extensions = ["svg", "png", "jpg", "jpeg", "webp"];

package/src/esbuild-plugins/load-assets.ts

@@ -0,0 +1,68 @@
+import { copyFile } from "fs/promises";
+import { promises as fs } from "fs";
+import md5 from "md5";
+import path, { basename } from "node:path";
+
+import _locreq from "locreq";
+import { embeddable_file_extensions } from "../embeddable-file-extensions.js";
+const target_locreq = _locreq(process.cwd());
+
+function addSuffix(filename: string, suffix: string) {
+	return filename.replace(/(\.[a-zA-Z0-9]+)?$/, suffix + "$1");
+}
+
+async function makeResourceURL(file_path: string) {
+	const hash_base = file_path + (await fs.stat(file_path)).mtimeMs;
+	const hash = md5(hash_base);
+	const public_url =
+		"dist/" + addSuffix(basename(file_path), "-" + hash.slice(0, 8));
+	const public_dir = "public";
+	await copyFile(
+		file_path,
+		target_locreq.resolve(path.resolve(public_dir, public_url))
+	);
+	return "/" + public_url;
+}
+
+export const load_assets_plugin = {
+	name: "sealgen-load-assets",
+	setup(build: any) {
+		build.onLoad(
+			{
+				filter: new RegExp(
+					`\\.(${embeddable_file_extensions.join("|")})$`
+				),
+			},
+			async (args: any) => {
+				let contents = `export const url =  "${await makeResourceURL(
+					args.path
+				)}";
+
+import fs from "fs";
+let buffer_promise = null;
+
+export const getBuffer = function(){
+	if(buffer_promise) return buffer_promise;
+	buffer_promise = fs.promises.readFile("${args.path}");
+	return buffer_promise;
+}
+
+export const getContent = async function(){
+    const buffer = await getBuffer();
+	return buffer.toString("utf-8");
+}
+
+export const getBase64 = async function(){
+    const buffer = await getBuffer();
+    return buffer.toString("base64");
+}
+
+export default { getContent, url, getBase64, getBuffer };
+`;
+				return {
+					contents,
+				};
+			}
+		);
+	},
+};

package/src/esbuild-plugins/rewrite-asset-imports.ts

@@ -0,0 +1,29 @@
+import { promises as fs } from "fs";
+import { extname } from "node:path";
+import { embeddable_file_extensions } from "../embeddable-file-extensions.js";
+import { removeNamedImports } from "../../remove-named-imports.js";
+
+export const rewrite_asset_imports_plugin = {
+	name: "sealgen-rewrite-asset-imports",
+	setup(build: any) {
+		build.onLoad({ filter: /\.tsx?$/ }, async (args: any) => {
+			let contents = await fs.readFile(args.path, "utf8");
+			for (const ext of embeddable_file_extensions) {
+				const regex_assets = new RegExp(
+					`^import (\\w+|{[^}]+}) from "([^"]+.${ext})";`,
+					"gm"
+				);
+				contents = contents.replaceAll(regex_assets, (line) => {
+					return line.replace(`.${ext}"`, '.js"');
+				});
+			}
+
+			contents = removeNamedImports(contents);
+
+			return {
+				contents,
+				loader: extname(args.path) === ".tsx" ? "tsx" : "ts",
+			};
+		});
+	},
+};

package/src/find-css-includes.ts

@@ -6,21 +6,23 @@ import { walkDir } from "./utils/walk.js";
 const target_locreq = _locreq(process.cwd());
 
 export async function generate_css_includes(): Promise<void> {
-	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)
-			)
-	);
+	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)
+				)
+		)
+	).sort();
 
 	await fs.writeFile(
 		target_locreq.resolve("src/includes.css"),

package/src/generate-components.ts

@@ -13,9 +13,9 @@ const target_locreq = _locreq(process.cwd());
 export async function generateComponents(): Promise<void> {
 	const components_dir = target_locreq.resolve("src/back/jdd-components");
 	await mkdir(components_dir, { recursive: true });
-	const component_names = (await recursive(components_dir)).filter((c) =>
-		c.endsWith(".jdd.tsx")
-	);
+	const component_names = (await recursive(components_dir))
+		.filter((c) => c.endsWith(".jdd.tsx"))
+		.sort();
 	const component_data = component_names
 		.map(
 			(p) =>