@bonsae/nrg 0.1.0

package/src/vite/client/build.ts

@@ -0,0 +1,223 @@
+import type { Plugin, InlineConfig } from "vite";
+import { build as viteBuild } from "vite";
+import vue from "@vitejs/plugin-vue";
+import fs from "fs";
+import path from "path";
+import { BuildError } from "../errors";
+import { logger } from "../logger";
+import type { ClientBuildOptions, BuildContext, CopyTarget } from "../types";
+import {
+  htmlGenerator,
+  localesGenerator,
+  minifier,
+  nodeDefinitionsInliner,
+  staticCopy,
+} from "./plugins";
+
+async function build(
+  clientBuildOptions: ClientBuildOptions,
+  buildContext: BuildContext,
+): Promise<void> {
+  const {
+    srcDir = "./client",
+    entry = "index.ts",
+    name = "NodeRedNodes",
+    format = "es",
+    licensePath = "./LICENSE",
+    locales,
+    staticDirs = {},
+    external = ["jquery", "node-red", "vue"],
+    globals = { jquery: "$", "node-red": "RED", vue: "Vue" },
+    manualChunks,
+    plugins: userPlugins = [],
+  } = clientBuildOptions;
+
+  const physicalEntryPath = path.resolve(srcDir, entry);
+  let entryPath: string;
+  let generatedEntry = false;
+
+  if (fs.existsSync(physicalEntryPath)) {
+    entryPath = physicalEntryPath;
+  } else {
+    // No physical entry — create a minimal empty file that the inliner
+    // will prepend auto-registration code into.
+    if (!fs.existsSync(path.dirname(physicalEntryPath))) {
+      fs.mkdirSync(path.dirname(physicalEntryPath), { recursive: true });
+    }
+    fs.writeFileSync(physicalEntryPath, "// auto-generated entry\n");
+    entryPath = physicalEntryPath;
+    generatedEntry = true;
+  }
+
+  const iconsDir = path.resolve(
+    staticDirs.icons ?? path.join(path.dirname(path.resolve(srcDir)), "icons"),
+  );
+
+  const plugins: Plugin[] = [
+    vue(),
+    nodeDefinitionsInliner(
+      buildContext.outDir,
+      entryPath,
+      fs.existsSync(iconsDir) ? iconsDir : undefined,
+      path.resolve(srcDir, "components"),
+      path.resolve(srcDir, "nodes"),
+      !generatedEntry,
+    ),
+    ...userPlugins,
+  ];
+
+  plugins.push(
+    htmlGenerator({
+      packageName: buildContext.packageName,
+      licensePath: licensePath ? path.resolve(licensePath) : undefined,
+    }),
+  );
+
+  if (locales) {
+    const {
+      docsDir = "./locales/docs",
+      labelsDir = "./locales/labels",
+      languages = [
+        "en-US",
+        "de",
+        "es-ES",
+        "fr",
+        "ko",
+        "pt-BR",
+        "ru",
+        "ja",
+        "zh-CN",
+        "zh-TW",
+      ],
+    } = locales;
+
+    plugins.push(
+      localesGenerator({
+        outDir: path.join(buildContext.outDir, "locales"),
+        docsDir: path.resolve(docsDir),
+        labelsDir: path.resolve(labelsDir),
+        languages,
+      }),
+    );
+  }
+
+  const copyTargets: CopyTarget[] = [];
+
+  const publicDir = path.resolve(
+    staticDirs.public ?? path.join(srcDir, "public"),
+  );
+  if (fs.existsSync(publicDir)) {
+    copyTargets.push({
+      src: publicDir,
+      dest: path.join(buildContext.outDir, "resources"),
+    });
+  }
+
+  if (fs.existsSync(iconsDir)) {
+    copyTargets.push({
+      src: iconsDir,
+      dest: path.join(buildContext.outDir, "icons"),
+    });
+  }
+
+  if (copyTargets.length > 0) {
+    plugins.push(staticCopy({ targets: copyTargets }));
+  }
+
+  if (!buildContext.isDev && format === "es") {
+    plugins.push(minifier());
+  }
+
+  // Intercept '@bonsae/nrg/client' before Vite's resolver so it stays external.
+  // Rollup's string-array external check runs against the *resolved* file path,
+  // which wouldn't match the original specifier. 'vue' is handled by the
+  // external array directly (Vite keeps the bare specifier for known packages).
+  plugins.unshift({
+    name: "nrg-client-external",
+    enforce: "pre",
+    resolveId(id) {
+      if (id === "@bonsae/nrg/client")
+        return { id: "@bonsae/nrg/client", external: true };
+    },
+  } as Plugin);
+
+  const defaultManualChunks = (id: string): string | undefined => {
+    if (!id.includes("node_modules")) return undefined;
+
+    const parts = id
+      .substring(id.lastIndexOf("node_modules/") + "node_modules/".length)
+      .split("/");
+
+    const pkgName = parts[0].startsWith("@")
+      ? `${parts[0]}/${parts[1]}`
+      : parts[0];
+
+    if (["jsonpointer", "es-toolkit"].includes(pkgName)) return "vendor-utils";
+    return "vendor";
+  };
+
+  const config: InlineConfig = {
+    configFile: false,
+    logLevel: "warn",
+    base: `/${path.join("resources", buildContext.packageName)}`,
+    publicDir: path.resolve(srcDir, "public"),
+    resolve: {
+      alias: {
+        "@": path.resolve(srcDir),
+      },
+    },
+    plugins,
+    css: {
+      devSourcemap: buildContext.isDev,
+    },
+    build: {
+      outDir: buildContext.outDir,
+      emptyOutDir: false,
+      sourcemap: buildContext.isDev ? "inline" : true,
+      minify: !buildContext.isDev && format !== "es",
+      copyPublicDir: false,
+      lib: {
+        entry: entryPath,
+        name,
+        fileName: "index",
+        formats: [format],
+      },
+      rollupOptions: {
+        external,
+        treeshake: false,
+        output: {
+          entryFileNames: path.join("resources", "index.[hash].js"),
+          chunkFileNames: path.join("resources", "vendor.[hash].js"),
+          assetFileNames: path.join("resources", "[name].[hash].[ext]"),
+          globals,
+          paths: {
+            vue: "/nrg/assets/vue.esm-browser.prod.js",
+            "@bonsae/nrg/client": "/nrg/assets/nrg-client.js",
+          },
+          sourcemapPathTransform: (relativeSourcePath) => {
+            return relativeSourcePath.replace(/\/client\//g, "/");
+          },
+          manualChunks: manualChunks ?? defaultManualChunks,
+        },
+      },
+    },
+    define: {
+      "process.env.NODE_ENV": JSON.stringify(
+        buildContext.isDev ? "development" : "production",
+      ),
+      "process.env": {},
+    },
+  };
+
+  try {
+    await viteBuild(config);
+  } catch (error) {
+    throw new BuildError("client", error as Error);
+  } finally {
+    if (generatedEntry) {
+      fs.unlinkSync(physicalEntryPath);
+    }
+  }
+}
+
+export { build };

package/src/vite/client/index.ts

@@ -0,0 +1 @@
+export { build } from "./build";

package/src/vite/client/plugins/html-generator.ts

@@ -0,0 +1,75 @@
+import type { Plugin } from "vite";
+import mime from "mime-types";
+import fs from "fs";
+import path from "path";
+
+function htmlGenerator(options: {
+  packageName: string;
+  licensePath?: string;
+}): Plugin {
+  const { packageName, licensePath } = options;
+
+  return {
+    name: "vite-plugin-node-red:client:html-generator",
+    apply: "build",
+    enforce: "post",
+
+    generateBundle(_, bundle) {
+      const resourcesTags = Object.keys(bundle)
+        .map((fileName) => {
+          const asset = bundle[fileName];
+          const srcPath = path.join(
+            "resources",
+            packageName,
+            fileName.replace(/^resources\/?/, ""),
+          );
+
+          const content =
+            asset.type === "asset"
+              ? asset.source
+              : asset.type === "chunk"
+                ? asset.code
+                : null;
+
+          if (typeof content !== "string" && !(content instanceof Uint8Array))
+            return null;
+
+          const mimeType = mime.lookup(fileName);
+
+          switch (mimeType) {
+            case "application/javascript":
+            case "text/javascript":
+              return `<script type="module" src="${srcPath}" defer></script>`;
+            case "text/css":
+              return `<link rel="stylesheet" href="${srcPath}">`;
+            case "font/woff":
+            case "font/woff2":
+            case "application/font-woff":
+            case "application/font-woff2":
+            case "application/x-font-ttf":
+            case "application/x-font-opentype":
+            case "font/ttf":
+            case "font/otf":
+              return `<link rel="preload" as="font" href="${srcPath}" type="${mimeType}">`;
+            default:
+              return null;
+          }
+        })
+        .filter(Boolean)
+        .join("\n");
+
+      const licenseBanner =
+        licensePath && fs.existsSync(licensePath)
+          ? `<!--\n${fs.readFileSync(licensePath, "utf-8")}\n-->`
+          : "";
+
+      this.emitFile({
+        type: "asset",
+        fileName: "index.html",
+        source: `${licenseBanner}\n${resourcesTags}`,
+      });
+    },
+  };
+}
+
+export { htmlGenerator };

package/src/vite/client/plugins/index.ts

@@ -0,0 +1,5 @@
+export { htmlGenerator } from "./html-generator";
+export { localesGenerator } from "./locales-generator";
+export { minifier } from "./minifier";
+export { nodeDefinitionsInliner } from "./node-definitions-inliner";
+export { staticCopy } from "./static-copy";

package/src/vite/client/plugins/locales-generator.ts

@@ -0,0 +1,126 @@
+import type { Plugin } from "vite";
+import fs from "fs";
+import path from "path";
+
+function localesGenerator(options: {
+  outDir: string;
+  docsDir: string;
+  labelsDir: string;
+  languages: string[];
+}): Plugin {
+  const { outDir, docsDir, labelsDir, languages } = options;
+
+  return {
+    name: "vite-plugin-node-red:client:locales-generator",
+    apply: "build",
+    enforce: "post",
+
+    closeBundle() {
+      function validateLanguage(lang: string, filePath: string) {
+        if (!languages.includes(lang)) {
+          throw new Error(
+            `[locales] Invalid language "${lang}" in "${filePath}".\n` +
+              `Supported: ${languages.join(", ")}`,
+          );
+        }
+      }
+
+      function forEachFile<T>(
+        baseDir: string,
+        fileExtensions: string[],
+        processFile: (params: {
+          ext: string;
+          filePath: string;
+          nodeType: string;
+        }) => T | null,
+      ): Map<string, T extends unknown[] ? T : Record<string, T>> {
+        const langMap = new Map();
+
+        if (!fs.existsSync(baseDir)) return langMap;
+
+        const nodeDirs = fs
+          .readdirSync(baseDir, { withFileTypes: true })
+          .filter((d) => d.isDirectory());
+
+        for (const nodeDir of nodeDirs) {
+          const nodeType = nodeDir.name;
+          const nodePath = path.join(baseDir, nodeType);
+          const files = fs.readdirSync(nodePath);
+
+          for (const file of files) {
+            const ext = path.extname(file);
+            if (!fileExtensions.includes(ext)) continue;
+
+            const lang = path.basename(file, ext);
+            const filePath = path.join(nodePath, file);
+            validateLanguage(lang, filePath);
+
+            const value = processFile({ ext, filePath, nodeType });
+            if (value == null) continue;
+
+            if (!langMap.has(lang)) {
+              langMap.set(lang, Array.isArray(value) ? [] : {});
+            }
+
+            if (Array.isArray(value)) {
+              langMap.get(lang).push(...value);
+            } else {
+              langMap.get(lang)[nodeType] = value;
+            }
+          }
+        }
+
+        return langMap;
+      }
+
+      function writeOutput<T>(
+        langMap: Map<string, T>,
+        fileName: string,
+        serialize: (value: T) => string,
+      ) {
+        for (const [lang, data] of langMap.entries()) {
+          const langOutDir = path.join(outDir, lang);
+          fs.mkdirSync(langOutDir, { recursive: true });
+          fs.writeFileSync(
+            path.join(langOutDir, fileName),
+            serialize(data),
+            "utf-8",
+          );
+        }
+      }
+
+      const docLangs = forEachFile(
+        docsDir,
+        [".html", ".md"],
+        ({ ext, filePath, nodeType }) => {
+          const type =
+            ext === ".html"
+              ? "text/html"
+              : ext === ".md"
+                ? "text/markdown"
+                : null;
+          if (!type) return null;
+
+          const content = fs.readFileSync(filePath, "utf-8");
+          return [
+            `<script type="${type}" data-help-name="${nodeType}">\n${content}\n</script>`,
+          ];
+        },
+      );
+
+      writeOutput(docLangs, "index.html", (value: string[]) =>
+        value.join("\n"),
+      );
+
+      const labelLangs = forEachFile(labelsDir, [".json"], ({ filePath }) =>
+        JSON.parse(fs.readFileSync(filePath, "utf-8")),
+      );
+
+      writeOutput(labelLangs, "index.json", (value) =>
+        JSON.stringify(value, null, 2),
+      );
+    },
+  };
+}
+
+export { localesGenerator };

package/src/vite/client/plugins/minifier.ts

@@ -0,0 +1,22 @@
+import type { Plugin } from "vite";
+import { transform } from "esbuild";
+
+function minifier(): Plugin {
+  return {
+    name: "vite-plugin-node-red:client:minifier",
+    apply: "build",
+
+    renderChunk: {
+      order: "post",
+      async handler(code, chunk, outputOptions) {
+        if (outputOptions.format === "es" && chunk.fileName.endsWith(".js")) {
+          const result = await transform(code, { minify: true });
+          return result.code;
+        }
+        return code;
+      },
+    },
+  };
+}
+
+export { minifier };

package/src/vite/client/plugins/node-definitions-inliner.ts

@@ -0,0 +1,224 @@
+import type { Plugin } from "vite";
+import { createRequire } from "module";
+import { pathToFileURL } from "url";
+import path from "path";
+import fs from "fs";
+import mime from "mime-types";
+
+const VIRTUAL_ID = "virtual:nrg/node-definitions";
+const RESOLVED_ID = "\0" + VIRTUAL_ID;
+
+const VIRTUAL_ENTRY_ID = "virtual:nrg/client-entry";
+const RESOLVED_ENTRY_ID = "\0" + VIRTUAL_ENTRY_ID;
+
+const SKIP_DEFAULTS = new Set(["x", "y", "z", "g", "wires", "type", "id"]);
+
+function getDefaultsFromSchema(
+  schema: any,
+):
+  | Record<string, { type?: string; required: boolean; value: any }>
+  | undefined {
+  if (!schema?.properties) return undefined;
+  const result: Record<
+    string,
+    { type?: string; required: boolean; value: any }
+  > = {};
+  for (const [key, prop] of Object.entries(schema.properties) as [
+    string,
+    any,
+  ][]) {
+    if (SKIP_DEFAULTS.has(key)) continue;
+    result[key] = {
+      required: false,
+      value: prop.default ?? undefined,
+      type: prop["node-type"],
+    };
+  }
+  return result;
+}
+
+function getCredentialsFromSchema(
+  schema: any,
+): Record<string, { type: string; required: boolean; value: any }> | undefined {
+  if (!schema?.properties) return undefined;
+  const result: Record<
+    string,
+    { type: string; required: boolean; value: any }
+  > = {};
+  for (const [key, prop] of Object.entries(schema.properties) as [
+    string,
+    any,
+  ][]) {
+    result[key] = {
+      required: false,
+      type: prop.format === "password" ? "password" : "text",
+      value: prop.default ?? undefined,
+    };
+  }
+  return result;
+}
+
+function resolveIcon(iconsDir: string, type: string): string | undefined {
+  if (!fs.existsSync(iconsDir)) return undefined;
+  return fs.readdirSync(iconsDir).find((f) => {
+    if (path.basename(f, path.extname(f)) !== type) return false;
+    const mimeType = mime.lookup(f);
+    return mimeType !== false && mimeType.startsWith("image/");
+  });
+}
+
+function nodeDefinitionsInliner(
+  serverOutDir: string,
+  entryPath: string,
+  iconsDir?: string,
+  componentsDir?: string,
+  nodesDir?: string,
+  hasUserEntry: boolean = true,
+): Plugin {
+  let _nodeTypes: string[] = [];
+  let _definitions: Record<string, any> = {};
+
+  return {
+    name: "vite-plugin-node-red:client:node-definitions-inliner",
+    enforce: "pre",
+
+    // Load the server bundle in buildStart so _nodeTypes is populated
+    // before any load/transform hooks run.
+    async buildStart() {
+      _nodeTypes = [];
+      _definitions = {};
+
+      const esmEntryPath = path.resolve(serverOutDir, "index.mjs");
+      const cjsEntryPath = path.resolve(serverOutDir, "index.js");
+
+      let packageFn: any;
+      if (fs.existsSync(esmEntryPath)) {
+        const fileUrl = pathToFileURL(esmEntryPath).href + `?t=${Date.now()}`;
+        const mod = await import(fileUrl);
+        packageFn = mod?.default ?? mod;
+      } else if (fs.existsSync(cjsEntryPath)) {
+        const require = createRequire(import.meta.url);
+        delete require.cache[cjsEntryPath];
+        const rawMod = require(cjsEntryPath);
+        packageFn = rawMod?.default ?? rawMod;
+      }
+
+      const nodeClasses: any[] = packageFn?.nodes ?? [];
+
+      for (const NodeClass of nodeClasses) {
+        const type = NodeClass.type;
+        if (!type) continue;
+        _nodeTypes.push(type);
+        const configSchema = NodeClass.configSchema ?? null;
+        const credentialsSchema = NodeClass.credentialsSchema ?? null;
+        const inputSchema = NodeClass.inputSchema ?? null;
+        const outputsSchema = NodeClass.outputsSchema ?? null;
+
+        // Pre-compute defaults and credentials at build time
+        const defaults = getDefaultsFromSchema(configSchema);
+        if (defaults && inputSchema) {
+          defaults.validateInput = { required: false, value: false };
+        }
+        if (defaults && outputsSchema) {
+          defaults.validateOutput = { required: false, value: false };
+        }
+        const credentials = getCredentialsFromSchema(credentialsSchema);
+
+        _definitions[type] = {
+          type,
+          category: NodeClass.category,
+          configSchema,
+          credentialsSchema,
+          settingsSchema: NodeClass.settingsSchema ?? null,
+          defaults: defaults ?? undefined,
+          credentials: credentials ?? undefined,
+          align: NodeClass.align,
+          color: NodeClass.color,
+          icon: iconsDir ? resolveIcon(iconsDir, type) : undefined,
+          labelStyle: NodeClass.labelStyle,
+          paletteLabel: NodeClass.paletteLabel,
+          inputs: NodeClass.inputs,
+          outputs: NodeClass.outputs,
+          inputLabels: NodeClass.inputLabels,
+          outputLabels: NodeClass.outputLabels,
+          inputSchema,
+          outputsSchema,
+        };
+      }
+    },
+
+    resolveId(id) {
+      if (id === VIRTUAL_ID) return RESOLVED_ID;
+      if (id === VIRTUAL_ENTRY_ID) return RESOLVED_ENTRY_ID;
+    },
+
+    load(id) {
+      if (id === RESOLVED_ENTRY_ID) return "";
+      if (id !== RESOLVED_ID) return;
+      return `export default ${JSON.stringify(_definitions)};`;
+    },
+
+    transform(code, id) {
+      if (id !== entryPath && id !== RESOLVED_ENTRY_ID) return;
+
+      const nrgImports = new Set<string>(["__setSchemas"]);
+      const lines = [`import __nrgSchemas from "${VIRTUAL_ID}";`];
+      const postLines: string[] = [`__setSchemas(__nrgSchemas);`];
+
+      // Auto-detect form components by convention: {componentsDir}/{type}.vue
+      if (componentsDir && fs.existsSync(componentsDir)) {
+        const formImports: string[] = [];
+        const formEntries: string[] = [];
+
+        for (const type of _nodeTypes) {
+          const componentPath = path.resolve(componentsDir, `${type}.vue`);
+          if (fs.existsSync(componentPath)) {
+            const varName = `__nrgForm_${type.replace(/-/g, "_")}`;
+            formImports.push(
+              `import ${varName} from ${JSON.stringify(componentPath)};`,
+            );
+            formEntries.push(`${JSON.stringify(type)}: ${varName}`);
+          }
+        }
+
+        if (formImports.length > 0) {
+          lines.push(...formImports);
+          nrgImports.add("__setForms");
+          postLines.push(`__setForms({ ${formEntries.join(", ")} });`);
+        }
+      }
+
+      // Auto-register only when no user entry was provided.
+      // When the user provides client/index.ts, they control registration.
+      if (!hasUserEntry) {
+        const defVarNames: string[] = [];
+        for (const type of _nodeTypes) {
+          const varName = `__nrgNodeDef_${type.replace(/-/g, "_")}`;
+          const tsPath = nodesDir ? path.resolve(nodesDir, `${type}.ts`) : null;
+
+          if (tsPath && fs.existsSync(tsPath)) {
+            lines.push(`import ${varName} from ${JSON.stringify(tsPath)};`);
+          } else {
+            lines.push(`const ${varName} = { type: ${JSON.stringify(type)} };`);
+          }
+          defVarNames.push(varName);
+        }
+
+        if (defVarNames.length > 0) {
+          nrgImports.add("registerTypes");
+          postLines.push(`registerTypes([${defVarNames.join(", ")}]);`);
+        }
+      }
+
+      // Build the @bonsae/nrg/client import line
+      const importLine = `import { ${[...nrgImports].join(", ")} } from "@bonsae/nrg/client";`;
+      lines.splice(1, 0, importLine);
+
+      lines.push(...postLines);
+      lines.push("");
+      return { code: lines.join("\n") + code, map: null };
+    },
+  };
+}
+
+export { nodeDefinitionsInliner };