@sealcode/sealgen 0.15.63 → 0.16.1-beta2

package/@types/src/CSSBuilder.d.ts

@@ -0,0 +1,19 @@
+import { Builder } from "./builder.js";
+export declare class CSSClump {
+    project_dir: string;
+    name: string;
+    files: string[];
+    constructor(project_dir: string, name: string);
+    addFile(full_path: string): void;
+    build(): Promise<void>;
+    getEntrypointPath(): string;
+    makeEntrypoint(): Promise<void>;
+    static assignFileToClumps(file_path: string): string[];
+    static findCSSClumps(project_dir: string): Promise<CSSClump[]>;
+}
+export declare class CSSBuilder extends Builder {
+    getName(): string;
+    ownsFile(file_path: string): boolean;
+    dispose(): Promise<void>;
+    _build(): Promise<void>;
+}

package/@types/src/builder.d.ts

@@ -1,20 +1,13 @@
-import { BuildContext } from "esbuild";
 export declare abstract class Builder {
+    project_dir: string;
     abstract ownsFile(file_path: string): boolean;
     abstract getName(): string;
     abstract _build(): Promise<void>;
     abstract dispose(): Promise<void>;
+    constructor(project_dir: string);
     ongoing_build: Promise<void> | null;
     build(notifier?: (message: string) => void): Promise<void>;
 }
-export declare class CSSBuilder extends Builder {
-    getName(): string;
-    private context_promise;
-    ownsFile(file_path: string): boolean;
-    dispose(): Promise<void>;
-    getBuildContext(): Promise<BuildContext>;
-    _build(): Promise<void>;
-}
 export declare class FontsBuilder extends Builder {
     getName(): string;
     ownsFile(file_path: string): boolean;

package/@types/src/find-css-includes.d.ts

@@ -1 +1 @@
-export declare function generate_css_includes(): Promise<void>;
+export {};

package/lib/CSSBuilder.js

@@ -0,0 +1,143 @@
+import { build } from "esbuild";
+import { resolve, relative, basename, dirname } from "node:path";
+import glob from "tiny-glob";
+import { promises as fs } from "fs";
+import { walkDir } from "./utils/walk.js";
+import { Builder } from "./builder.js";
+class CSSClump {
+  constructor(project_dir, name) {
+    this.project_dir = project_dir;
+    this.name = name;
+    this.files = [];
+  }
+  addFile(full_path) {
+    this.files.push(full_path);
+  }
+  async build() {
+    await this.makeEntrypoint();
+    const loader = Object.fromEntries(
+      [
+        "png",
+        "svg",
+        "jpg",
+        "gif",
+        "jpeg",
+        "otf",
+        "ttf",
+        "woff",
+        "woff2"
+      ].map((ext) => ["." + ext, "file"])
+    );
+    const result = await build({
+      entryPoints: [relative(this.project_dir, this.getEntrypointPath())],
+      sourcemap: true,
+      bundle: true,
+      outdir: "./public/dist",
+      logLevel: "info",
+      loader,
+      minify: true,
+      target: ["safari16.5"],
+      // to make css nesting work without manually adding `&`
+      metafile: true
+    });
+    await fs.writeFile(
+      relative(this.project_dir, "public/dist") + "/" + this.name + ".meta.json",
+      JSON.stringify(result.metafile)
+    );
+  }
+  getEntrypointPath() {
+    return resolve(
+      this.project_dir,
+      `src/style-entrypoints/${this.name}.entrypoint.css`
+    );
+  }
+  async makeEntrypoint() {
+    const entrypoint_path = this.getEntrypointPath();
+    await fs.mkdir(dirname(entrypoint_path), { recursive: true });
+    await fs.writeFile(
+      entrypoint_path,
+      [
+        `/* DO NOT EDIT! Automatically generated by sealgen */`,
+        ...this.files.sort().map(
+          (fullpath) => `@import "${relative(
+            dirname(entrypoint_path),
+            fullpath
+          )}";`
+        )
+      ].join("\n")
+    );
+  }
+  static assignFileToClumps(file_path) {
+    const segments = basename(file_path).split(".");
+    segments.shift();
+    segments.pop();
+    if (!segments.length) {
+      if (file_path.includes("/jdd-components/")) {
+        const component_name = file_path.match(
+          /jdd-components\/([^/]+)\//
+        )?.[1];
+        if (!component_name) {
+          return [];
+        }
+        return ["jdd-component__" + component_name];
+      } else {
+        return ["default"];
+      }
+    }
+    if (segments.length == 1 && segments[0] == "entrypoint") {
+      return [];
+    }
+    return segments;
+  }
+  static async findCSSClumps(project_dir) {
+    const clumps = {};
+    const all_files = await walkDir(resolve(project_dir, "src"));
+    for (const file of all_files) {
+      if (!file.endsWith(".css"))
+        continue;
+      const clump_names = CSSClump.assignFileToClumps(file);
+      for (const clump_name of clump_names) {
+        if (!clump_name)
+          continue;
+        if (!clumps[clump_name]) {
+          clumps[clump_name] = new CSSClump(project_dir, clump_name);
+        }
+        clumps[clump_name]?.addFile(file);
+      }
+    }
+    return Object.values(clumps);
+  }
+}
+class CSSBuilder extends Builder {
+  getName() {
+    return "css";
+  }
+  ownsFile(file_path) {
+    return file_path.endsWith(".css") && !file_path.endsWith("/includes.css");
+  }
+  async dispose() {
+  }
+  async _build() {
+    try {
+      const entrypoints = await glob(`./src/*.entrypoint.css`);
+      await Promise.allSettled(
+        entrypoints.map(
+          (rel_path) => fs.unlink(resolve(this.project_dir, rel_path))
+        )
+      );
+      const clumps = await CSSClump.findCSSClumps(this.project_dir);
+      console.log(
+        "clumps!",
+        clumps.map((c) => c.name)
+      );
+      await Promise.all(clumps.map((clump) => clump.build()));
+    } catch (e) {
+      console.error(e);
+    }
+  }
+}
+export {
+  CSSBuilder,
+  CSSClump
+};
+//# sourceMappingURL=CSSBuilder.js.map

package/lib/build.js

@@ -5,10 +5,10 @@ import getPort from "get-port";
 import _locreq from "locreq";
 import {
   BackendTSBuilder,
-  CSSBuilder,
   FontsBuilder,
   FrontendTSBuilder
 } from "./builder.js";
+import { CSSBuilder } from "./CSSBuilder.js";
 const target_locreq = _locreq(process.cwd());
 async function get_notifier_port() {
   return getPort({ port: 4e3 });
@@ -24,10 +24,11 @@ async function write_notifier_config(watch, port) {
   );
 }
 async function build(watch) {
-  const fonts_builder = new FontsBuilder();
-  const backend_ts_builder = new BackendTSBuilder();
-  const frontend_ts_builder = new FrontendTSBuilder();
-  const css_builder = new CSSBuilder();
+  const project_dir = target_locreq.resolve("");
+  const fonts_builder = new FontsBuilder(project_dir);
+  const backend_ts_builder = new BackendTSBuilder(project_dir);
+  const frontend_ts_builder = new FrontendTSBuilder(project_dir);
+  const css_builder = new CSSBuilder(project_dir);
   const builders = [
     fonts_builder,
     backend_ts_builder,

package/lib/builder.js

@@ -1,16 +1,16 @@
-import { build, context } from "esbuild";
+import { build } 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";
 class Builder {
-  constructor() {
+  constructor(project_dir) {
+    this.project_dir = project_dir;
     this.ongoing_build = null;
   }
   build(notifier) {
@@ -26,55 +26,6 @@ class Builder {
     return this.ongoing_build;
   }
 }
-class CSSBuilder extends Builder {
-  getName() {
-    return "css";
-  }
-  ownsFile(file_path) {
-    return file_path.endsWith(".css") && !file_path.endsWith("/includes.css");
-  }
-  async dispose() {
-    return (await this.getBuildContext()).dispose();
-  }
-  async getBuildContext() {
-    if (!this.context_promise) {
-      const loader = Object.fromEntries(
-        [
-          "png",
-          "svg",
-          "jpg",
-          "gif",
-          "jpeg",
-          "otf",
-          "ttf",
-          "woff",
-          "woff2"
-        ].map((ext) => ["." + ext, "file"])
-      );
-      const context_promise = context({
-        entryPoints: ["./src/main.css"],
-        sourcemap: true,
-        bundle: true,
-        outdir: "./public/dist",
-        logLevel: "info",
-        // plugins: [sassPlugin()],
-        loader,
-        minify: true,
-        target: ["safari16.5"]
-        // to make css nesting work without manually adding `&`
-      });
-      this.context_promise = context_promise;
-      return context_promise;
-    } else {
-      return this.context_promise;
-    }
-  }
-  async _build() {
-    const context2 = await this.getBuildContext();
-    await generate_css_includes();
-    await context2.rebuild();
-  }
-}
 class FontsBuilder extends Builder {
   getName() {
     return "fonts";
@@ -153,7 +104,6 @@ class FrontendTSBuilder extends Builder {
 export {
   BackendTSBuilder,
   Builder,
-  CSSBuilder,
   FontsBuilder,
   FrontendTSBuilder
 };

package/lib/cli.js

@@ -3,7 +3,6 @@ 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";
@@ -19,7 +18,6 @@ const actions = {
   "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>`");

package/lib/find-css-includes.js

@@ -1,27 +1,3 @@
-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());
-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)
-    )
-  )).sort();
-  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")}
-`
-  );
-  console.log("Successfuly generated new src/includes.css file");
-}
-export {
-  generate_css_includes
-};
 //# sourceMappingURL=find-css-includes.js.map

package/lib/utils/walk.js

@@ -8,7 +8,13 @@ async function walkDir(dir) {
       continue;
     }
     const fullpath = resolve(dir, entry);
-    const info = await fs.stat(fullpath);
+    let info;
+    try {
+      info = await fs.stat(fullpath);
+    } catch (e) {
+      console.error(e);
+      return [];
+    }
     if (info.isDirectory()) {
       ret = [...ret, ...await walkDir(fullpath)];
     } else {

package/package.json

@@ -1,12 +1,13 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.15.63",
+	"version": "0.16.1-beta2",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"type": "module",
 	"scripts": {
 		"prebuild": "npm run lint && rm -rf lib",
 		"build": "node ./build.js",
+		"watch": "npm run build -- --watch",
 		"postbuild": "npm run build-types",
 		"pretest": "npm run build",
 		"test": "node test.cjs",

package/src/CSSBuilder.ts

@@ -0,0 +1,154 @@
+import { build } from "esbuild";
+import { resolve, relative, basename, dirname } from "node:path";
+import glob from "tiny-glob";
+import { promises as fs } from "fs";
+import { walkDir } from "./utils/walk.js";
+import { Builder } from "./builder.js";
+
+export class CSSClump {
+	public files: string[] = [];
+	constructor(public project_dir: string, public name: string) {}
+
+	addFile(full_path: string) {
+		this.files.push(full_path);
+	}
+
+	async build() {
+		await this.makeEntrypoint();
+		const loader = Object.fromEntries(
+			(<const>[
+				"png",
+				"svg",
+				"jpg",
+				"gif",
+				"jpeg",
+				"otf",
+				"ttf",
+				"woff",
+				"woff2",
+			]).map((ext) => <const>["." + ext, "file"])
+		);
+		const result = await build({
+			entryPoints: [relative(this.project_dir, this.getEntrypointPath())],
+			sourcemap: true,
+			bundle: true,
+			outdir: "./public/dist",
+			logLevel: "info",
+			loader,
+			minify: true,
+			target: ["safari16.5"], // to make css nesting work without manually adding `&`
+			metafile: true,
+		});
+
+		await fs.writeFile(
+			relative(this.project_dir, "public/dist") +
+				"/" +
+				this.name +
+				".meta.json",
+			JSON.stringify(result.metafile)
+		);
+	}
+
+	getEntrypointPath(): string {
+		return resolve(
+			this.project_dir,
+			`src/style-entrypoints/${this.name}.entrypoint.css`
+		);
+	}
+
+	async makeEntrypoint() {
+		const entrypoint_path = this.getEntrypointPath();
+		await fs.mkdir(dirname(entrypoint_path), { recursive: true });
+		await fs.writeFile(
+			entrypoint_path,
+			[
+				`/* DO NOT EDIT! Automatically generated by sealgen */`,
+				...this.files
+					.sort()
+					.map(
+						(fullpath) =>
+							`@import "${relative(
+								dirname(entrypoint_path),
+								fullpath
+							)}";`
+					),
+			].join("\n")
+		);
+	}
+
+	static assignFileToClumps(file_path: string): string[] {
+		const segments = basename(file_path).split(".");
+		segments.shift(); // filename
+		segments.pop(); // extension
+		if (!segments.length) {
+			if (file_path.includes("/jdd-components/")) {
+				const component_name = file_path.match(
+					/jdd-components\/([^/]+)\//
+				)?.[1];
+				if (!component_name) {
+					return [];
+				}
+				return ["jdd-component__" + component_name];
+			} else {
+				// no segments, default clump
+				return ["default"];
+			}
+		}
+		if (segments.length == 1 && segments[0] == "entrypoint") {
+			return [];
+		}
+		return segments;
+	}
+
+	static async findCSSClumps(project_dir: string): Promise<CSSClump[]> {
+		const clumps: Record<string, CSSClump> = {};
+		const all_files = await walkDir(resolve(project_dir, "src"));
+		for (const file of all_files) {
+			if (!file.endsWith(".css")) continue;
+			const clump_names = CSSClump.assignFileToClumps(file);
+			for (const clump_name of clump_names) {
+				if (!clump_name) continue;
+				if (!clumps[clump_name]) {
+					clumps[clump_name] = new CSSClump(project_dir, clump_name);
+				}
+				clumps[clump_name]?.addFile(file);
+			}
+		}
+		return Object.values(clumps);
+	}
+}
+
+export class CSSBuilder extends Builder {
+	getName(): string {
+		return "css";
+	}
+
+	ownsFile(file_path: string) {
+		return (
+			file_path.endsWith(".css") && !file_path.endsWith("/includes.css")
+		);
+	}
+
+	async dispose(): Promise<void> {
+		//noop
+	}
+
+	async _build() {
+		try {
+			const entrypoints = await glob(`./src/*.entrypoint.css`);
+			await Promise.allSettled(
+				entrypoints.map((rel_path) =>
+					fs.unlink(resolve(this.project_dir, rel_path))
+				)
+			);
+			const clumps = await CSSClump.findCSSClumps(this.project_dir);
+			console.log(
+				"clumps!",
+				clumps.map((c) => c.name)
+			);
+			await Promise.all(clumps.map((clump) => clump.build()));
+		} catch (e) {
+			console.error(e);
+		}
+	}
+}

package/src/build.ts

@@ -7,10 +7,10 @@ import _locreq from "locreq";
 
 import {
 	BackendTSBuilder,
-	CSSBuilder,
 	FontsBuilder,
 	FrontendTSBuilder,
 } from "./builder.js";
+import { CSSBuilder } from "./CSSBuilder.js";
 const target_locreq = _locreq(process.cwd());
 
 async function get_notifier_port() {
@@ -29,10 +29,11 @@ async function write_notifier_config(watch: boolean, port?: number) {
 }
 
 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 project_dir = target_locreq.resolve("");
+	const fonts_builder = new FontsBuilder(project_dir);
+	const backend_ts_builder = new BackendTSBuilder(project_dir);
+	const frontend_ts_builder = new FrontendTSBuilder(project_dir);
+	const css_builder = new CSSBuilder(project_dir);
 	const builders = [
 		fonts_builder,
 		backend_ts_builder,

package/src/builder.ts

@@ -1,9 +1,8 @@
-import { build, BuildContext, context } from "esbuild";
+import { build } 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";
@@ -16,6 +15,8 @@ export abstract class Builder {
 	abstract _build(): Promise<void>;
 	abstract dispose(): Promise<void>;
 
+	constructor(public project_dir: string) {}
+
 	public ongoing_build: Promise<void> | null = null;
 
 	public build(notifier?: (message: string) => void) {
@@ -34,63 +35,6 @@ export abstract class Builder {
 	}
 }
 
-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",
-					"woff",
-					"woff2",
-				]).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,
-				minify: true,
-				target: ["safari16.5"], // to make css nesting work without manually adding `&`
-			});
-			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";

package/src/cli.ts

@@ -3,7 +3,6 @@ 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";
@@ -23,7 +22,6 @@ const actions: Record<
 	"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>`");

package/src/find-css-includes.ts

@@ -4,34 +4,3 @@ import { relative } from "path";
 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)
-				)
-		)
-	).sort();
-
-	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");
-}

package/src/utils/walk.ts

@@ -10,8 +10,14 @@ export async function walkDir(dir: string): Promise<string[]> {
 		}
 		const fullpath = resolve(dir, entry);
 
-		// eslint-disable-next-line no-await-in-loop
-		const info = await fs.stat(fullpath);
+		let info;
+		try {
+			// eslint-disable-next-line no-await-in-loop
+			info = await fs.stat(fullpath);
+		} catch (e) {
+			console.error(e);
+			return [];
+		}
 
 		if (info.isDirectory()) {
 			// eslint-disable-next-line no-await-in-loop