@sealcode/sealgen 0.14.4 → 0.14.5

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

@@ -0,0 +1,36 @@
+import { BuildContext } from "esbuild";
+export declare abstract class Builder {
+    abstract ownsFile(file_path: string): boolean;
+    abstract getName(): string;
+    abstract _build(): Promise<void>;
+    abstract dispose(): Promise<void>;
+    constructor();
+    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;
+    dispose(): Promise<void>;
+    _build(): Promise<void>;
+}
+export declare class BackendTSBuilder extends Builder {
+    getName(): string;
+    ownsFile(file_path: string): boolean;
+    dispose(): Promise<void>;
+    _build(): Promise<void>;
+}
+export declare class FrontendTSBuilder extends Builder {
+    getName(): string;
+    ownsFile(file_path: string): boolean;
+    dispose(): Promise<void>;
+    _build(): Promise<void>;
+}

package/@types/src/embeddable-file-extensions.d.ts

@@ -0,0 +1 @@
+export declare const embeddable_file_extensions: string[];

package/@types/src/esbuild-plugins/load-assets.d.ts

@@ -0,0 +1,4 @@
+export declare const load_assets_plugin: {
+    name: string;
+    setup(build: any): void;
+};

package/@types/src/esbuild-plugins/rewrite-asset-imports.d.ts

@@ -0,0 +1,4 @@
+export declare const rewrite_asset_imports_plugin: {
+    name: string;
+    setup(build: any): void;
+};

package/@types/src/generate-stimulus.d.ts

@@ -0,0 +1 @@
+export declare function generateStimulusControllers(): Promise<void>;

package/@types/src/page/stateful-page.d.ts

@@ -30,7 +30,7 @@ export declare abstract class StatefulPage<State extends Record<string, unknown>
         readonly message: "";
     }>;
     constructor();
-    abstract wrapInLayout(ctx: BaseContext, content: Templatable): Templatable;
+    abstract wrapInLayout(ctx: BaseContext, content: Templatable, state: State): Templatable;
     wrapInForm(state: State, content: Templatable): Templatable;
     extractActionAndLabel<ActionName extends keyof Actions>(action_description: StatefulPageActionDescription<ActionName>): {
         action: string;

package/@types/src/templates/stimulus-controller.d.ts

@@ -0,0 +1 @@
+export declare function jddComponentTemplate(controller_name: string): string;

package/dist/build.js

@@ -1,20 +1,14 @@
-import { build, 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() {
   return getPort({ port: 4e3 });
@@ -29,222 +23,44 @@ 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 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,
-      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(build2) {
-            build2.onLoad(
-              { filter: /\.tsx?$/ },
-              async (args) => {
-                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(build2) {
-            build2.onLoad(
-              {
-                filter: new RegExp(
-                  `\\.(${embeddable_file_extensions.join(
-                    "|"
-                  )})$`
-                )
-              },
-              async (args) => {
-                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) {
-    console.error(e.message);
-  }
-}
-async function complex_build(watch) {
-  const loader = Object.fromEntries(
-    ["png", "svg", "jpg", "gif", "jpeg", "otf", "ttf"].map(
-      (ext) => ["." + ext, "file"]
-    )
-  );
-  let css_build = 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 = null;
+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 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 (_, path2) => {
-      if (!css_build)
-        return;
-      if (path2.includes(".#"))
-        return;
-      if (path2 == FONTS_CONFIG_PATH) {
-        if (!ongoing_fonts) {
-          ongoing_fonts = true;
-          await getFonts();
-          ongoing_fonts = false;
-        }
-        return;
-      }
-      if (path2.endsWith(".css") && !path2.endsWith("/includes.css")) {
-        if (ongoing_css) {
-          return;
-        }
-        ongoing_css = true;
-        await generate_css_includes();
-        try {
-          await css_build?.rebuild?.();
-          console.log(`Built main.css [on ${path2}]`);
-        } catch (e) {
-          console.error(e.message);
-          await sleep(200);
-          css_build?.rebuild?.().catch((e2) => console.error(e2?.message));
-        }
-        if (ongoing_ts_promise) {
-          await ongoing_ts_promise;
-        }
-        notifier("css");
-        ongoing_css = false;
-      }
-      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;
+    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);
         }
-        ongoing_ts = true;
-        ongoing_ts_promise = build_ts();
-        await ongoing_ts_promise;
-        notifier("ts");
-        ongoing_ts_promise = null;
-        console.log(`Finished TS build [on ${path2}]`);
-        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();
+    });
   }
 }
 async function buildProject({
   watch
 }) {
   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!");
     console.error(e.message);

package/dist/builder.js

@@ -0,0 +1,145 @@
+import { build, 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";
+class Builder {
+  constructor() {
+    this.ongoing_build = null;
+  }
+  build(notifier) {
+    if (!this.ongoing_build) {
+      const build2 = this._build().catch((err) => {
+        console.error(err);
+      }).then(() => {
+        notifier?.(this.getName());
+        this.ongoing_build = null;
+      });
+      this.ongoing_build = build2;
+    }
+    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"].map(
+          (ext) => ["." + 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 context2 = await this.getBuildContext();
+    await generate_css_includes();
+    await context2.rebuild();
+  }
+}
+class FontsBuilder extends Builder {
+  getName() {
+    return "fonts";
+  }
+  ownsFile(file_path) {
+    return file_path == FONTS_CONFIG_PATH;
+  }
+  async dispose() {
+  }
+  async _build() {
+    return getFonts();
+  }
+}
+class BackendTSBuilder extends Builder {
+  getName() {
+    return "backend-ts";
+  }
+  ownsFile(file_path) {
+    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() {
+  }
+  async _build() {
+    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]
+    });
+  }
+}
+class FrontendTSBuilder extends Builder {
+  getName() {
+    return "frontend-ts";
+  }
+  ownsFile(file_path) {
+    return file_path.startsWith("src/front") || file_path.endsWith(".stimulus.ts");
+  }
+  async dispose() {
+  }
+  async _build() {
+    await generateStimulusControllers();
+    await build({
+      entryPoints: ["./src/front/index.ts"],
+      sourcemap: true,
+      outfile: "./public/dist/bundle.js",
+      logLevel: "info",
+      bundle: true,
+      minify: true
+    });
+  }
+}
+export {
+  BackendTSBuilder,
+  Builder,
+  CSSBuilder,
+  FontsBuilder,
+  FrontendTSBuilder
+};
+//# sourceMappingURL=builder.js.map

package/dist/cli.js

@@ -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 = {
   "add-collection": addCollection,
   "add-route": addRoute,
@@ -26,7 +27,8 @@ const actions = {
   },
   "make-env": makeEnv,
   "add-component": addJDDComponent,
-  "get-fonts": getFonts
+  "get-fonts": getFonts,
+  "generate-stimulus": generateStimulusControllers
 };
 void async function() {
   const action = process.argv.at(2);

package/dist/embeddable-file-extensions.js

@@ -0,0 +1,5 @@
+const embeddable_file_extensions = ["svg", "png", "jpg", "jpeg", "webp"];
+export {
+  embeddable_file_extensions
+};
+//# sourceMappingURL=embeddable-file-extensions.js.map

package/dist/esbuild-plugins/load-assets.js

@@ -0,0 +1,67 @@
+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, 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;
+}
+const load_assets_plugin = {
+  name: "sealgen-load-assets",
+  setup(build) {
+    build.onLoad(
+      {
+        filter: new RegExp(
+          `\\.(${embeddable_file_extensions.join("|")})$`
+        )
+      },
+      async (args) => {
+        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
+        };
+      }
+    );
+  }
+};
+export {
+  load_assets_plugin
+};
+//# sourceMappingURL=load-assets.js.map

package/dist/esbuild-plugins/rewrite-asset-imports.js

@@ -0,0 +1,30 @@
+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";
+const rewrite_asset_imports_plugin = {
+  name: "sealgen-rewrite-asset-imports",
+  setup(build) {
+    build.onLoad({ filter: /\.tsx?$/ }, async (args) => {
+      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"
+      };
+    });
+  }
+};
+export {
+  rewrite_asset_imports_plugin
+};
+//# sourceMappingURL=rewrite-asset-imports.js.map

package/dist/generate-stimulus.js

@@ -0,0 +1,41 @@
+import _locreq from "locreq";
+import * as prettier from "prettier";
+import { promises as fs } from "fs";
+import { getPrettierConfig } from "./utils/prettier.js";
+import recursive from "recursive-readdir";
+import path, { dirname } from "path";
+import { toKebabCase, toPascalCase } from "js-convert-case";
+const target_locreq = _locreq(process.cwd());
+async function generateStimulusControllers() {
+  const output_file = "src/front/controllers.ts";
+  const stimulus_search_dir = target_locreq.resolve("src/");
+  const controller_names = (await recursive(stimulus_search_dir)).filter((c) => c.endsWith(".stimulus.ts")).sort();
+  const controller_data = controller_names.map(
+    (p) => "./" + path.relative(target_locreq.resolve(dirname(output_file)), p).replace(/\.[tj]sx?$/, ".js")
+  ).map((relative_path) => {
+    const name = relative_path.match(/\/([^\/]+).stimulus/)?.[1];
+    return { name, relative_path };
+  });
+  const content = `// DO NOT EDIT! This file is generated automaticaly with 'npm run generate-stimulus'
+
+import * as Turbo from "@hotwired/turbo";
+import { Application } from "stimulus";
+const application = Application.start();
+${controller_data.map(
+    (c) => `
+	import { default as ${toPascalCase(c.name)} } from "${c.relative_path}";
+	application.register("${toKebabCase(c.name)}", ${toPascalCase(c.name)});`
+  ).join("\n")}
+
+export { Turbo };
+`;
+  await fs.writeFile(
+    target_locreq.resolve(output_file),
+    prettier.format(content, await getPrettierConfig())
+  );
+  console.log(`Successfuly generated new ${output_file} file`);
+}
+export {
+  generateStimulusControllers
+};
+//# sourceMappingURL=generate-stimulus.js.map

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;