@sealcode/sealgen 0.12.9 → 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/build.js

@@ -1,12 +1,13 @@
 import * as esbuild from "esbuild";
 import { default as glob } from "tiny-glob";
-import { remove_named_imports } from "./remove-named-imports.js";
+// commented out as it seemingly works without that
+// import { remove_named_imports } from "./remove-named-imports.js";
 
 const entryPoints = (await glob("./src/**/*.{js,ts,tsx}")).filter(
 	(path) => !path.includes(".#")
 );
 
-await esbuild.build({
+const args = {
 	entryPoints,
 	sourcemap: true,
 	bundle: false,
@@ -16,4 +17,11 @@ await esbuild.build({
 	target: "es2022",
 	format: "esm",
 	//	plugins: [remove_named_imports],
-});
+};
+
+if (process.argv.includes("--watch")) {
+	const context = await esbuild.context(args);
+	context.watch();
+} else {
+	esbuild.build(args);
+}

package/dist/add-collection.js

@@ -4,18 +4,18 @@ import { promises as fs, existsSync } from "fs";
 import { question } from "./utils/question.js";
 import { collectionTemplate } from "./templates/collection.js";
 import { generateCollections } from "./generate-collections.js";
+import { toKebabCase, toPascalCase } from "js-convert-case";
 const target_locreq = _locreq(process.cwd());
 async function addCollection() {
-  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) => s.length > 3 && regex_pattern.test(s)
+  const collection_name = toPascalCase(
+    await question(
+      "What's the name of the collection class: ",
+      (s) => s.length > 3
+    )
   );
-  const url = await question(
-    "Enter the url-friendly name for the collection (e.g. secret-documents): ",
-    (s) => !s.includes("/") && !s.includes(" ")
+  const file_path = target_locreq.resolve(
+    `src/back/collections/${toKebabCase(collection_name)}.ts`
   );
-  const file_path = target_locreq.resolve(`src/back/collections/${url}.ts`);
   if (existsSync(file_path)) {
     console.error(`ERROR: File ${file_path} already exists.`);
     return;

package/dist/add-route.js

@@ -6,6 +6,7 @@ import { testTemplate } from "./templates/route-test.js";
 import { escape_url_params } from "./utils/escape-url-params.js";
 import prompts from "prompts";
 import { Templates } from "./templates/templates.js";
+import { toKebabCase, toPascalCase } from "js-convert-case";
 async function addRoute(params, app_directory = process.cwd()) {
   const target_locreq = _locreq(app_directory);
   prompts.override(params);
@@ -14,13 +15,19 @@ async function addRoute(params, app_directory = process.cwd()) {
       type: "text",
       name: "action",
       message: `What's the name of the action (e.g. "AddUser"): `,
-      validate: (s) => s.length > 3 ? true : "Should be at least 3 characters long"
+      validate: (s) => s.length > 3 ? true : "Should be at least 3 characters long",
+      format: function(action2) {
+        return toPascalCase(action2);
+      }
     },
     {
       type: "text",
       name: "url",
       message: "Enter a full absolute path for the new route (for example: /admin/users/:id/edit): ",
-      validate: (s) => s.trim()[0] == "/" ? true : "Should start with a '/'"
+      validate: (s) => s.trim()[0] == "/" ? true : "Should start with a '/'",
+      initial: function(_, { action: action2 }) {
+        return "/" + toKebabCase(action2);
+      }
     },
     {
       type: "select",
@@ -56,7 +63,9 @@ async function addRoute(params, app_directory = process.cwd()) {
   }
   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));
+  if (mode !== "lpr") {
+    await fs.writeFile(test_file_path, testTemplate(action, file_path));
+  }
   console.log(`${file_path} created`);
   console.log(`${test_file_path} created`);
   await generateRoutes();

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/dist/templates/form.js

@@ -2,7 +2,14 @@ import { curryImportPath } from "../utils/import-path.js";
 async function formTemplate(action_name, newfilefullpath) {
   const rel = curryImportPath(newfilefullpath);
   return `import { Context } from "koa";
-import { Form, FormData, FormDataValue, Fields, Controls } from "@sealcode/sealgen";
+import {
+	Form,
+	FormData,
+	FormDataValue,
+	Fields,
+	Controls,
+	fieldsToShape,
+} from "@sealcode/sealgen";
 import html from "${rel("src/back/html.js")}";
 import { Users } from "${rel("src/back/collections/collections.js")}";
 
@@ -28,10 +35,10 @@ export default new (class ${action_name}Form extends Form<typeof fields, void> {
 		ctx: Context,
 		data: Record<string, FormDataValue>
 	): Promise<{ valid: boolean; error: string }> {
-		// just an example
+		// just a silly example, please remove this with better logic
 		const { parsed: email } = await this.fields.email.getValue(ctx, data);
 		const { parsed: password } = await this.fields.password.getValue(ctx, data);
-		if ((password || "").length > (email || "").length) {
+		if ((password || "").length > ((email as string) || "").length) {
 			return { valid: false, error: "Password cannot be longer than email" };
 		} else {
 			return { valid: true, error: "" };

package/dist/templates/list.js

@@ -75,7 +75,11 @@ ${collection_fields.map((field) => {
     }
     return `	{ field: "${field.name}", label: "${field.name}" }`;
   }).join(",\n")}
-];
+] as {
+	field: string;
+	label: string;
+	format?: (value: unknown) => FlatTemplatable;
+}[];
 
 export default new (class ${action_name}Page extends SealiousItemListPage<
 	typeof ${uppercase_collection},
@@ -94,8 +98,8 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 				}
 				return <input
 					type="hidden"
-					name="\${key}"
-					value="\${value}"
+					name={key}
+					value={value}
 				/>;
 			})}
 			{filterFields.map(({ field, render }) => {

package/dist/templates/long-running-process.js

@@ -1,3 +1,4 @@
+import { toSentenceCase } from "js-convert-case";
 import { curryImportPath } from "../utils/import-path.js";
 async function LongRunningProcessTemplate(action_name, newfilefullpath) {
   const rel = curryImportPath(newfilefullpath);
@@ -20,38 +21,34 @@ export default new (class PatroniteAutoImportStatusPage extends Page {
 	async render(ctx: Context) {
 		const lpr_id = ctx.params.id;
 		const lpr_data = LongRunningProcess.getByID(ctx.$context, lpr_id);
-		const render_script = lpr_data.state !== "error" && lpr_data.state !== "finished";
-		const script = /* HTML */ \`<script>
-			setTimeout(() => {
-				document.location = document.location;
-			}, \${this.interval});
-		</script>\`;
 
 		return html(
 			ctx,
-			"PatroniteAutoImportStatus",
-			<div>
-				{lpr_data.then((lpr_data) => {
-					return (
-						<div>
-							<div>status: {lpr_data.state}</div>
-							<div style="height: 20px; width: 100%">
-								<div
-									style="height: 100%; background-color: green; width: {Math.round(
-												lpr_data.progress * 100
-											)}%"
-								></div>
-							</div>
-							<div>
-								{lpr_data.events.map((e) => (
-									<div>{e.message}</div>
-								))}
-							</div>
-							{render_script ? { script } : ""}
-						</div>
-					);
-				})}
-			</div>
+			"${toSentenceCase(action_name)}",
+			lpr_data.then((lpr_data) => (
+				<div>
+					<div>status: {lpr_data.state}</div>
+					<div style="height: 20px; width: 100%">
+						<div
+							style={\`height: 100%; background-color: green; width: \${Math.round(
+								lpr_data.progress * 100
+							)}%\`}
+						></div>
+					</div>
+					<div>
+						{lpr_data.events.map((e) => (
+							/* HTML */ <div>{e.message}</div>
+						))}
+					</div>
+					{lpr_data.state !== "error" && lpr_data.state !== "finished"
+						? /* HTML */ \`<script>
+								setTimeout(() => {
+									document.location = document.location;
+								}, \${this.interval});
+						  </script>\`
+						: ""}
+				</div>
+			))
 		);
 	}
 })();

package/dist/templates/multiform.js

@@ -13,7 +13,7 @@ const fields1 = {
 	password: new Fields.SimpleFormField(true),
 };
 
-const form1 = new (class extends Form<typeof fields1> {
+const form1 = new (class extends Form<typeof fields1, unknown> {
 	defaultSuccessMessage = "Form1 done!";
 	controls = [
 		new Controls.FormHeader("form1"),
@@ -30,7 +30,7 @@ const fields2 = {
 	surname: new Fields.SimpleFormField(true),
 };
 
-const form2 = new (class extends Form<Record<never, unknown>> {
+const form2 = new (class extends Form<typeof fields2, unknown> {
 	defaultSuccessMessage = "Form2 done!";
 	controls = [new Controls.FormHeader("form2"), new Controls.SimpleInput(fields2.name)];
 	fields = fields2;
@@ -47,7 +47,11 @@ export default new (class extends Multiform {
 		messages: FormMessage[],
 		prerenderedForms?: Record<string, FlatTemplatable | undefined>
 	): Promise<FlatTemplatable> {
-		return html(ctx, "${action_name}", await super.render(ctx, messages, prerenderedForms));
+		return html(
+			ctx,
+			"${action_name}",
+			await super.render(ctx, messages, prerenderedForms, false)
+		);
 	}
 })();
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.12.9",
+	"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/add-collection.ts

@@ -4,19 +4,20 @@ import { promises as fs, existsSync } from "fs";
 import { question } from "./utils/question.js";
 import { collectionTemplate } from "./templates/collection.js";
 import { generateCollections } from "./generate-collections.js";
+import { toKebabCase, toPascalCase } from "js-convert-case";
 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 collection_name = toPascalCase(
+		await question(
+			"What's the name of the collection class: ",
+			(s: string) => s.length > 3
+		)
 	);
-	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/${toKebabCase(collection_name)}.ts`
 	);
-	const file_path = target_locreq.resolve(`src/back/collections/${url}.ts`);
 
 	if (existsSync(file_path)) {
 		// eslint-disable-next-line no-console

package/src/add-route.ts

@@ -6,6 +6,7 @@ import { testTemplate } from "./templates/route-test.js";
 import { escape_url_params } from "./utils/escape-url-params.js";
 import prompts from "prompts";
 import { Templates } from "./templates/templates.js";
+import { toKebabCase, toPascalCase } from "js-convert-case";
 
 export async function addRoute(
 	params: Partial<{ [key in "action" | "url" | "mode"]: string }>,
@@ -20,6 +21,9 @@ export async function addRoute(
 			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",
+			format: function (action) {
+				return toPascalCase(action);
+			},
 		},
 		{
 			type: "text",
@@ -28,6 +32,9 @@ export async function addRoute(
 				"Enter a full absolute path for the new route (for example: /admin/users/:id/edit): ",
 			validate: (s: string) =>
 				s.trim()[0] == "/" ? true : "Should start with a '/'",
+			initial: function (_, { action }) {
+				return "/" + toKebabCase(action);
+			},
 		},
 		{
 			type: "select",
@@ -70,7 +77,9 @@ export async function addRoute(
 	}
 	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));
+	if (mode !== "lpr") {
+		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

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

package/src/templates/form.ts

@@ -6,7 +6,14 @@ export async function formTemplate(
 ): Promise<string> {
 	const rel = curryImportPath(newfilefullpath);
 	return `import { Context } from "koa";
-import { Form, FormData, FormDataValue, Fields, Controls } from "@sealcode/sealgen";
+import {
+	Form,
+	FormData,
+	FormDataValue,
+	Fields,
+	Controls,
+	fieldsToShape,
+} from "@sealcode/sealgen";
 import html from "${rel("src/back/html.js")}";
 import { Users } from "${rel("src/back/collections/collections.js")}";
 
@@ -32,10 +39,10 @@ export default new (class ${action_name}Form extends Form<typeof fields, void> {
 		ctx: Context,
 		data: Record<string, FormDataValue>
 	): Promise<{ valid: boolean; error: string }> {
-		// just an example
+		// just a silly example, please remove this with better logic
 		const { parsed: email } = await this.fields.email.getValue(ctx, data);
 		const { parsed: password } = await this.fields.password.getValue(ctx, data);
-		if ((password || "").length > (email || "").length) {
+		if ((password || "").length > ((email as string) || "").length) {
 			return { valid: false, error: "Password cannot be longer than email" };
 		} else {
 			return { valid: true, error: "" };

package/src/templates/list.ts

@@ -90,7 +90,11 @@ ${collection_fields
 		return `	{ field: "${field.name}", label: "${field.name}" }`;
 	})
 	.join(",\n")}
-];
+] as {
+	field: string;
+	label: string;
+	format?: (value: unknown) => FlatTemplatable;
+}[];
 
 export default new (class ${action_name}Page extends SealiousItemListPage<
 	typeof ${uppercase_collection},
@@ -109,8 +113,8 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 				}
 				return <input
 					type="hidden"
-					name="\${key}"
-					value="\${value}"
+					name={key}
+					value={value}
 				/>;
 			})}
 			{filterFields.map(({ field, render }) => {

package/src/templates/long-running-process.ts

@@ -1,3 +1,4 @@
+import { toSentenceCase } from "js-convert-case";
 import { curryImportPath } from "../utils/import-path.js";
 
 export async function LongRunningProcessTemplate(
@@ -24,38 +25,34 @@ export default new (class PatroniteAutoImportStatusPage extends Page {
 	async render(ctx: Context) {
 		const lpr_id = ctx.params.id;
 		const lpr_data = LongRunningProcess.getByID(ctx.$context, lpr_id);
-		const render_script = lpr_data.state !== "error" && lpr_data.state !== "finished";
-		const script = /* HTML */ \`<script>
-			setTimeout(() => {
-				document.location = document.location;
-			}, \${this.interval});
-		</script>\`;
 
 		return html(
 			ctx,
-			"PatroniteAutoImportStatus",
-			<div>
-				{lpr_data.then((lpr_data) => {
-					return (
-						<div>
-							<div>status: {lpr_data.state}</div>
-							<div style="height: 20px; width: 100%">
-								<div
-									style="height: 100%; background-color: green; width: {Math.round(
-												lpr_data.progress * 100
-											)}%"
-								></div>
-							</div>
-							<div>
-								{lpr_data.events.map((e) => (
-									<div>{e.message}</div>
-								))}
-							</div>
-							{render_script ? { script } : ""}
-						</div>
-					);
-				})}
-			</div>
+			"${toSentenceCase(action_name)}",
+			lpr_data.then((lpr_data) => (
+				<div>
+					<div>status: {lpr_data.state}</div>
+					<div style="height: 20px; width: 100%">
+						<div
+							style={\`height: 100%; background-color: green; width: \${Math.round(
+								lpr_data.progress * 100
+							)}%\`}
+						></div>
+					</div>
+					<div>
+						{lpr_data.events.map((e) => (
+							/* HTML */ <div>{e.message}</div>
+						))}
+					</div>
+					{lpr_data.state !== "error" && lpr_data.state !== "finished"
+						? /* HTML */ \`<script>
+								setTimeout(() => {
+									document.location = document.location;
+								}, \${this.interval});
+						  </script>\`
+						: ""}
+				</div>
+			))
 		);
 	}
 })();

package/src/templates/multiform.ts

@@ -17,7 +17,7 @@ const fields1 = {
 	password: new Fields.SimpleFormField(true),
 };
 
-const form1 = new (class extends Form<typeof fields1> {
+const form1 = new (class extends Form<typeof fields1, unknown> {
 	defaultSuccessMessage = "Form1 done!";
 	controls = [
 		new Controls.FormHeader("form1"),
@@ -34,7 +34,7 @@ const fields2 = {
 	surname: new Fields.SimpleFormField(true),
 };
 
-const form2 = new (class extends Form<Record<never, unknown>> {
+const form2 = new (class extends Form<typeof fields2, unknown> {
 	defaultSuccessMessage = "Form2 done!";
 	controls = [new Controls.FormHeader("form2"), new Controls.SimpleInput(fields2.name)];
 	fields = fields2;
@@ -51,7 +51,11 @@ export default new (class extends Multiform {
 		messages: FormMessage[],
 		prerenderedForms?: Record<string, FlatTemplatable | undefined>
 	): Promise<FlatTemplatable> {
-		return html(ctx, "${action_name}", await super.render(ctx, messages, prerenderedForms));
+		return html(
+			ctx,
+			"${action_name}",
+			await super.render(ctx, messages, prerenderedForms, false)
+		);
 	}
 })();
 `;