@sealcode/sealgen 0.12.10 → 0.12.11

package/@types/remove-named-imports.d.ts

@@ -1,4 +1,5 @@
-export namespace remove_named_imports {
+export function removeNamedImports(content: any): any;
+export namespace remove_named_imports_plugin {
     const name: string;
     function setup(build: any): void;
 }

package/dist/build.js

@@ -9,8 +9,11 @@ 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 { 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";
 const target_locreq = _locreq(process.cwd());
 async function get_notifier_port() {
   return getPort({ port: 4e3 });
@@ -25,15 +28,30 @@ async function write_notifier_config(watch, port) {
     JSON.stringify(config)
   );
 }
+function addSuffix(filename, suffix) {
+  return filename.replace(/(\.[a-zA-Z0-9]+)?$/, suffix + "$1");
+}
+async function makeResourceURL(file_path) {
+  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 entryPoints = (await glob("./src/back/**/*.{ts,tsx}")).filter(
-    (path) => !path.includes(".#")
-  );
+  const embeddable_file_extensions = ["svg", "png", "jpg", "jpeg", "webp"];
+  const entryPoints = (await glob(
+    `./src/back/**/*.{ts,tsx,${embeddable_file_extensions.join(",")}}`
+  )).filter((path2) => !path2.includes(".#"));
   try {
     await build({
       entryPoints,
@@ -45,7 +63,72 @@ async function build_ts() {
       platform: "node",
       target: "es2022",
       format: "esm",
-      plugins: [remove_named_imports]
+      loader: Object.fromEntries(
+        embeddable_file_extensions.map((ext) => ["." + ext, "js"])
+      ),
+      plugins: [
+        {
+          name: "sealgen-rewrite-asset-imports",
+          setup(build2) {
+            build2.onLoad(
+              { filter: /\.tsx?$/ },
+              async (args) => {
+                let contents = await fs.readFile(
+                  args.path,
+                  "utf8"
+                );
+                for (const ext of embeddable_file_extensions) {
+                  contents = contents.replaceAll(
+                    new RegExp(
+                      `^import (w+|{[^}]+}) from "([^"]+.${ext})";`,
+                      "gm"
+                    ),
+                    (line) => line.replace(`.${ext}"`, '.js"')
+                  );
+                }
+                contents = removeNamedImports(contents);
+                return {
+                  contents,
+                  loader: extname(args.path) === ".tsx" ? "tsx" : "ts"
+                };
+              }
+            );
+          }
+        },
+        {
+          name: "sealgen-load-assets",
+          setup(build2) {
+            build2.onLoad(
+              {
+                filter: new RegExp(
+                  `\\.(${embeddable_file_extensions.join(
+                    "|"
+                  )})$`
+                )
+              },
+              async (args) => {
+                const mode = "url";
+                let contents = `export const url =  "${await makeResourceURL(
+                  args.path
+                )}";
+
+import fs from "fs";
+let content_promise = null;
+
+export const content = function(){
+	if(content_promise) return content_promise;
+	content_promise = fs.promises.readFile("${args.path}", "utf-8");
+	return content_promise;
+}
+`;
+                return {
+                  contents
+                };
+              }
+            );
+          }
+        }
+      ]
     });
   } catch (e) {
     console.error(e.message);
@@ -74,12 +157,12 @@ async function complex_build(watch) {
     const port = await get_notifier_port();
     const notifier = make_notifier(port);
     await write_notifier_config(watch, port);
-    watcher.on("all", async (_, path) => {
+    watcher.on("all", async (_, path2) => {
       if (!css_build)
         return;
-      if (path.includes(".#"))
+      if (path2.includes(".#"))
         return;
-      if (path.endsWith(".css") && !path.endsWith("/includes.css")) {
+      if (path2.endsWith(".css") && !path2.endsWith("/includes.css")) {
         if (ongoing_css) {
           return;
         }
@@ -87,7 +170,7 @@ async function complex_build(watch) {
         await generate_css_includes();
         try {
           await css_build?.rebuild?.();
-          console.log(`Built main.css [on ${path}]`);
+          console.log(`Built main.css [on ${path2}]`);
         } catch (e) {
           console.error(e.message);
           await sleep(200);
@@ -99,7 +182,7 @@ async function complex_build(watch) {
         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 ((path2.endsWith(".ts") || path2.endsWith(".tsx")) && !path2.endsWith("src/back/collections/collections.ts") && !path2.endsWith("src/back/routes/routes.ts") && !path2.endsWith("src/back/routes/urls.ts")) {
         if (ongoing_ts) {
           return;
         }
@@ -108,7 +191,7 @@ async function complex_build(watch) {
         await ongoing_ts_promise;
         notifier("ts");
         ongoing_ts_promise = null;
-        console.log(`Finished TS build [on ${path}]`);
+        console.log(`Finished TS build [on ${path2}]`);
         ongoing_ts = false;
       }
     });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.12.10",
+	"version": "0.12.11",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "dist/index.js",
 	"type": "module",
@@ -24,6 +24,7 @@
 	"devDependencies": {
 		"@playwright/test": "^1.30.0",
 		"@types/koa__router": "^12.0.4",
+		"@types/md5": "^2.3.5",
 		"@types/node": "^20.8.4",
 		"@types/prettier": "^2.7.0",
 		"@types/prompts": "^2.0.14",
@@ -56,6 +57,7 @@
 		"esbuild": "^0.20.0",
 		"js-convert-case": "^4.2.0",
 		"locreq": "^3.0.0",
+		"md5": "^2.3.0",
 		"merge": "^2.1.1",
 		"prettier": "^2.7.1",
 		"prompts": "^2.4.2",

package/remove-named-imports.js

@@ -10,54 +10,57 @@ const generate_names = (function* generate_names() {
 	}
 })();
 
-export const remove_named_imports = {
+export function removeNamedImports(content) {
+	const named_and_default_regex =
+		/^import\s+((\S+),\s+)?({\s*[^}]+})\s+from\s+("[^"]+");\s*$/gm;
+	return 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 */
+		}
+	);
+}
+
+export const remove_named_imports_plugin = {
 	name: "remove-named-imports", // named imports sometime cause some esm incompatibilities, like the "is a CommonJS module, which may not support all module.exports as named exports." error
 	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 */
-				}
-			);
+		build.onLoad({ filter: /\.[t]sx?$/ }, async ({ path }) => {
+			const content = await fs.readFile(path, "utf-8");
+			const contents = removeNamedImports(content);
 			return {
-				contents,
+				pluginData: {
+					contents,
+				},
 				loader: extname(path) === ".tsx" ? "tsx" : "ts",
 			};
 		});

package/src/build.ts

@@ -9,9 +9,12 @@ 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 { removeNamedImports } from "../remove-named-imports.js";
+import md5 from "md5";
 
 import _locreq from "locreq";
+import path, { basename, extname } from "path";
+import { copyFile, writeFile } from "fs/promises";
 const target_locreq = _locreq(process.cwd());
 
 async function get_notifier_port() {
@@ -29,15 +32,35 @@ 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 entryPoints = (await glob("./src/back/**/*.{ts,tsx}")).filter(
-		(path) => !path.includes(".#")
-	);
+	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,
@@ -49,7 +72,78 @@ async function build_ts() {
 			platform: "node",
 			target: "es2022",
 			format: "esm",
-			plugins: [remove_named_imports],
+			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) {
+									contents = contents.replaceAll(
+										new RegExp(
+											`^import (\w+|{[^}]+}) from "([^"]+.${ext})";`,
+											"gm"
+										),
+										(line) =>
+											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) => {
+								const mode = "url";
+								let contents = `export const url =  "${await makeResourceURL(
+									args.path
+								)}";
+
+import fs from "fs";
+let content_promise = null;
+
+export const content = function(){
+	if(content_promise) return content_promise;
+	content_promise = fs.promises.readFile("${args.path}", "utf-8");
+	return content_promise;
+}
+`;
+								return {
+									contents,
+								};
+							}
+						);
+					},
+				},
+			],
 		});
 	} catch (e) {
 		// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access