@bonsae/nrg 0.5.3 → 0.6.0

package/build/vite/index.js

@@ -1594,7 +1594,9 @@ async function build2(clientBuildOptions, buildContext) {
     throw new BuildError("client", error);
   } finally {
     if (generatedEntry) {
-      fs10.unlinkSync(entryPath);
+      if (fs10.existsSync(entryPath)) {
+        fs10.unlinkSync(entryPath);
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonsae/nrg",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "NRG framework — build Node-RED nodes with Vue 3, TypeScript, and JSON Schema",
   "author": "Allan Oricil <allanoricil@duck.com>",
   "license": "MIT",
@@ -17,6 +17,10 @@
     "pnpm": ">=10.11.0"
   },
   "scripts": {
+    "test": "vitest run && vitest run --config vitest.e2e.config.ts",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest",
+    "test:e2e": "vitest run --config vitest.e2e.config.ts",
     "build": "node build.mjs",
     "typecheck": "tsc -p src/core/server/tsconfig.json --noEmit && tsc -p src/core/client/tsconfig.json --noEmit",
     "lint": "eslint src/",
@@ -103,6 +107,7 @@
     "@types/node": "^22.15.18",
     "@typescript-eslint/eslint-plugin": "^8.32.1",
     "@typescript-eslint/parser": "^8.32.1",
+    "@vitest/coverage-v8": "^4.1.5",
     "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-vue": "^10.1.0",
@@ -113,6 +118,7 @@
     "semantic-release": "^24.2.4",
     "typescript-eslint": "^8.32.1",
     "vite": "^6.3.4",
+    "vitest": "^4.1.5",
     "vue": "^3.5.14"
   }
 }

package/src/core/client/app.vue

@@ -2,32 +2,22 @@
   <div
     v-if="features.hasInputSchema || features.hasOutputSchema"
     class="form-row"
-    style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap"
+    style="display: flex; align-items: center; gap: 12px"
   >
-    <template v-if="features.hasInputSchema">
-      <input
-        :id="`node-input-validateInput-${localNode.id}`"
-        type="checkbox"
-        :checked="localNode.validateInput"
-        style="width: auto; margin: 0"
-        @change="
-          localNode.validateInput = ($event.target as HTMLInputElement).checked
-        "
-      />
-      <NodeRedInputLabel label="Validate Input" style="width: auto" />
-    </template>
-    <template v-if="features.hasOutputSchema">
-      <input
-        :id="`node-input-validateOutput-${localNode.id}`"
-        type="checkbox"
-        :checked="localNode.validateOutput"
-        style="width: auto; margin: 0"
-        @change="
-          localNode.validateOutput = ($event.target as HTMLInputElement).checked
-        "
-      />
-      <NodeRedInputLabel label="Validate Output" style="width: auto" />
-    </template>
+    <NodeRedToggle
+      v-if="features.hasInputSchema"
+      :model-value="localNode.validateInput"
+      label="Validate Input"
+      style="flex: 1"
+      @update:model-value="localNode.validateInput = $event"
+    />
+    <NodeRedToggle
+      v-if="features.hasOutputSchema"
+      :model-value="localNode.validateOutput"
+      label="Validate Output"
+      style="flex: 1"
+      @update:model-value="localNode.validateOutput = $event"
+    />
   </div>
   <div style="width: 100%; padding-bottom: 12px">
     <NodeRedNodeForm
@@ -162,7 +152,7 @@ export default defineComponent({
             error.instancePath,
           );
           if (
-            error.parentSchema.format === "password" &&
+            error.parentSchema?.format === "password" &&
             errorValue === "__PWD__"
           ) {
             return acc;

package/src/core/client/components/node-red-json-schema-form.vue

@@ -12,12 +12,20 @@
         @update:value="node[field.key] = $event"
       />
 
+      <div v-else-if="field.inputType === 'boolean' && field.toggle">
+        <NodeRedToggle
+          :model-value="node[field.key]"
+          :label="field.label"
+          :icon="field.icon"
+          @update:model-value="node[field.key] = $event"
+        />
+      </div>
+
       <div v-else-if="field.inputType === 'boolean'">
         <NodeRedInputLabel
           :label="field.label"
           :icon="field.icon"
           :required="field.required"
-          style="width: auto"
         />
         <input
           type="checkbox"
@@ -144,6 +152,7 @@
 import type { PropType } from "vue";
 import { defineComponent } from "vue";
 import NodeRedInputLabel from "./node-red-input-label.vue";
+import NodeRedToggle from "./node-red-toggle.vue";
 import NodeRedInput from "./node-red-input.vue";
 import NodeRedSelectInput from "./node-red-select-input.vue";
 import NodeRedTypedInput from "./node-red-typed-input.vue";
@@ -169,6 +178,7 @@ interface NrgFormOptions {
   icon?: string;
   typedInputTypes?: string[];
   editorLanguage?: string;
+  toggle?: boolean;
 }
 
 interface FieldSchema {
@@ -197,7 +207,8 @@ interface FormField {
     | "select"
     | "typed"
     | "config"
-    | "editor";
+    | "editor"
+    | "array-text";
   required: boolean;
   htmlType?: "text" | "number" | "password";
   options?: Array<{ value: string; label: string }>;
@@ -205,6 +216,7 @@ interface FormField {
   types?: string[];
   configType?: string;
   language?: string;
+  toggle?: boolean;
 }
 
 function formatLabel(key: string): string {
@@ -291,7 +303,14 @@ function buildField(
 
   switch (rawType) {
     case "boolean":
-      return { key, label, icon, inputType: "boolean", required };
+      return {
+        key,
+        label,
+        icon,
+        inputType: "boolean",
+        required,
+        toggle: form.toggle,
+      };
 
     case "number":
     case "integer":
@@ -367,6 +386,7 @@ export default defineComponent({
   name: "NodeRedJsonSchemaForm",
   components: {
     NodeRedInputLabel,
+    NodeRedToggle,
     NodeRedInput,
     NodeRedSelectInput,
     NodeRedTypedInput,

package/src/core/client/components/node-red-toggle.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="nrg-toggle-wrapper">
+    <label class="nrg-toggle" :class="{ 'nrg-toggle--checked': modelValue }">
+      <input
+        type="checkbox"
+        :checked="modelValue"
+        class="nrg-toggle__input"
+        @change="
+          $emit(
+            'update:modelValue',
+            ($event.target as HTMLInputElement).checked,
+          )
+        "
+      />
+      <span v-if="icon || label" class="nrg-toggle__label">
+        <i v-if="icon" :class="iconClass"></i>
+        {{ label }}
+      </span>
+      <span class="nrg-toggle__slider"></span>
+    </label>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "NodeRedToggle",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    iconClass(): string {
+      if (!this.icon) return "";
+      const name = this.icon.startsWith("fa-") ? this.icon : `fa-${this.icon}`;
+      return `fa ${name}`;
+    },
+  },
+});
+</script>
+
+<style scoped>
+.nrg-toggle-wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+
+.nrg-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  gap: 8px;
+  user-select: none;
+}
+
+.nrg-toggle__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.nrg-toggle__slider {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  min-width: 36px;
+  height: 20px;
+  background-color: var(--red-ui-secondary-border-color, #ccc);
+  border-radius: 10px;
+  transition: background-color 0.2s ease;
+}
+
+.nrg-toggle__slider::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  background-color: white;
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+}
+
+.nrg-toggle--checked .nrg-toggle__slider {
+  background-color: var(--red-ui-text-color-link, #0070d2);
+}
+
+.nrg-toggle--checked .nrg-toggle__slider::after {
+  transform: translateX(16px);
+}
+
+.nrg-toggle__label {
+  cursor: default;
+  white-space: nowrap;
+}
+
+.nrg-toggle__label i {
+  margin-right: 2px;
+}
+</style>

package/src/core/client/components/node-red-typed-input.vue

@@ -136,6 +136,12 @@ export default defineComponent({
       this.onChange();
     });
   },
+  beforeUnmount() {
+    if (this._observer) {
+      this._observer.disconnect();
+      this._observer = null;
+    }
+  },
   methods: {
     onChange() {
       const newValue = this.$input.typedInput("value");

package/src/core/client/index.ts

@@ -9,6 +9,7 @@ import NodeRedConfigInput from "./components/node-red-config-input.vue";
 import NodeRedSelectInput from "./components/node-red-select-input.vue";
 import NodeRedEditorInput from "./components/node-red-editor-input.vue";
 import NodeRedInputLabel from "./components/node-red-input-label.vue";
+import NodeRedToggle from "./components/node-red-toggle.vue";
 import NodeRedJsonSchemaForm from "./components/node-red-json-schema-form.vue";
 
 const _schemas: Record<string, any> = {};
@@ -165,6 +166,7 @@ function createNodeRedVueApp(
   });
 
   app.component("NodeRedInputLabel", NodeRedInputLabel);
+  app.component("NodeRedToggle", NodeRedToggle);
   app.component("NodeRedInput", NodeRedInput);
   app.component("NodeRedTypedInput", NodeRedTypedInput);
   app.component("NodeRedConfigInput", NodeRedConfigInput);
@@ -203,7 +205,7 @@ function getNodeState(node: Node): NodeState {
   const state: NodeState = {
     credentials: {},
   };
-  Object.keys(node._def.defaults).forEach((prop) => {
+  Object.keys(node._def.defaults ?? {}).forEach((prop) => {
     state[prop] = node[prop];
   });
   if (node._def.credentials) {
@@ -300,8 +302,6 @@ function defineNode<T extends NodeDefinition>(options: T): T {
 async function registerType(definition: NodeDefinition): Promise<void> {
   const { type } = definition;
   try {
-    console.log(`Registering node type: ${type}`);
-
     const nodeDefinition = {
       ...(_schemas[type] ?? {}),
       ...definition,
@@ -311,9 +311,6 @@ async function registerType(definition: NodeDefinition): Promise<void> {
     const defaults = nodeDefinition.defaults ?? undefined;
     const credentials = nodeDefinition.credentials ?? undefined;
 
-    console.log("defaults", defaults);
-    console.log("credentials", credentials);
-
     const appContainerId = `nrg-app-${type}`;
 
     $("<script>", {
@@ -323,21 +320,20 @@ async function registerType(definition: NodeDefinition): Promise<void> {
     }).appendTo("body");
 
     function oneditprepare(this: Node) {
-      console.log("oneditprepare");
-      console.log(this);
-
-      const validationSchema = nodeDefinition.credentialsSchema?.properties
-        ? {
-            ...nodeDefinition.configSchema,
-            properties: {
-              ...nodeDefinition.configSchema.properties,
-              credentials: {
-                type: "object",
-                properties: nodeDefinition.credentialsSchema.properties,
+      const validationSchema =
+        nodeDefinition.configSchema &&
+        nodeDefinition.credentialsSchema?.properties
+          ? {
+              ...nodeDefinition.configSchema,
+              properties: {
+                ...nodeDefinition.configSchema.properties,
+                credentials: {
+                  type: "object",
+                  properties: nodeDefinition.credentialsSchema.properties,
+                },
               },
-            },
-          }
-        : nodeDefinition.configSchema;
+            }
+          : nodeDefinition.configSchema;
 
       const form =
         definition.form ??
@@ -360,7 +356,7 @@ async function registerType(definition: NodeDefinition): Promise<void> {
       const changed = !!Object.keys(changes)?.length;
       if (!changed) return false;
 
-      Object.keys(node._def.defaults).forEach((prop) => {
+      Object.keys(node._def.defaults ?? {}).forEach((prop) => {
         if (!node._def.defaults?.[prop]?.type) return;
         const oldConfigNodeId: string = node[prop] as string;
         const newConfigNodeId: string = node._newState![prop] as string;
@@ -376,7 +372,7 @@ async function registerType(definition: NodeDefinition): Promise<void> {
         }
       });
 
-      Object.keys(node._def.defaults).forEach((prop) => {
+      Object.keys(node._def.defaults ?? {}).forEach((prop) => {
         if (!node._def.defaults?.[prop]?.type) return;
         const newConfigNodeId: string = node._newState![prop] as string;
         if (!newConfigNodeId) return;
@@ -400,7 +396,7 @@ async function registerType(definition: NodeDefinition): Promise<void> {
       // overwriting the correctly-typed values already set by merge() above.
       const isConfigNode = definition.category === "config";
       if (isConfigNode) {
-        Object.keys(node._def.defaults).forEach((prop) => {
+        Object.keys(node._def.defaults ?? {}).forEach((prop) => {
           if (node._def.defaults[prop].type) return; // config-node refs handled separately
           const inputId = `node-config-input-${prop}`;
           let input = $(`#${inputId}`);
@@ -484,9 +480,7 @@ async function registerType(definition: NodeDefinition): Promise<void> {
  */
 async function registerTypes(nodes: NodeDefinition[]): Promise<void> {
   try {
-    console.log("Registering node types in parallel");
     await Promise.all(nodes.map((definition) => registerType(definition)));
-    console.log("All node types registered in parallel");
   } catch (error) {
     console.error("Error registering node types:", error);
     throw error;

package/src/core/server/api/index.ts

@@ -0,0 +1 @@
+export { serveNrgResources } from "./serve-nrg-resources";

package/src/core/server/api/serve-nrg-resources.ts

@@ -0,0 +1,54 @@
+import path from "path";
+import fs from "fs";
+import type { RED } from "../types";
+
+const MIME: Record<string, string> = {
+  ".js": "application/javascript",
+  ".mjs": "application/javascript",
+  ".css": "text/css",
+  ".json": "application/json",
+  ".map": "application/json",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+};
+
+let _registered = false;
+
+function serveNrgResources(RED: RED): void {
+  if (_registered) return;
+  _registered = true;
+
+  const clientDir = path.resolve(__dirname, "./resources");
+  if (!fs.existsSync(clientDir)) return;
+
+  const httpAdmin = (RED as any).httpAdmin;
+  if (!httpAdmin) return;
+
+  // /nrg/assets/ is not handled by Node-RED's editorApp, so our handler
+  // appended via use() is reached normally without any stack manipulation.
+  httpAdmin.use(function (req: any, res: any, next: any) {
+    const prefix = "/nrg/assets/";
+    if (!(req.path as string).startsWith(prefix)) return next();
+    let reqPath = (req.path as string).slice(prefix.length);
+    // Serve the Vue dev build in development for devtools support
+    if (
+      reqPath === "vue.esm-browser.prod.js" &&
+      process.env.NODE_ENV !== "production"
+    ) {
+      const devPath = path.resolve(clientDir, "vue.esm-browser.js");
+      if (fs.existsSync(devPath)) {
+        reqPath = "vue.esm-browser.js";
+      }
+    }
+    const filePath = path.resolve(clientDir, reqPath);
+    const rel = path.relative(clientDir, filePath);
+    if (rel.startsWith("..") || path.isAbsolute(rel)) return next();
+    if (!fs.existsSync(filePath) || !fs.statSync(filePath).isFile())
+      return next();
+    const ext = path.extname(filePath);
+    res.setHeader("Content-Type", MIME[ext] ?? "application/octet-stream");
+    fs.createReadStream(filePath).pipe(res);
+  });
+}
+
+export { serveNrgResources };

package/src/core/server/index.ts

@@ -1,60 +1,10 @@
-import path from "path";
-import fs from "fs";
 import { getCredentialsFromSchema } from "./utils";
 import { Node } from "./nodes";
 import { type RED } from "./types";
 import { initValidator } from "./validator";
+import { serveNrgResources } from "./api";
 import { NrgError } from "../errors";
 
-const MIME: Record<string, string> = {
-  ".js": "application/javascript",
-  ".mjs": "application/javascript",
-  ".css": "text/css",
-  ".json": "application/json",
-  ".map": "application/json",
-  ".png": "image/png",
-  ".svg": "image/svg+xml",
-};
-
-let _nrgResourcesRegistered = false;
-
-function serveNrgResources(RED: RED): void {
-  if (_nrgResourcesRegistered) return;
-  _nrgResourcesRegistered = true;
-
-  const clientDir = path.resolve(__dirname, "./resources");
-  if (!fs.existsSync(clientDir)) return;
-
-  const httpAdmin = (RED as any).httpAdmin;
-  if (!httpAdmin) return;
-
-  // /nrg/assets/ is not handled by Node-RED's editorApp, so our handler
-  // appended via use() is reached normally without any stack manipulation.
-  httpAdmin.use(function (req: any, res: any, next: any) {
-    const prefix = "/nrg/assets/";
-    if (!(req.path as string).startsWith(prefix)) return next();
-    let reqPath = (req.path as string).slice(prefix.length);
-    // Serve the Vue dev build in development for devtools support
-    if (
-      reqPath === "vue.esm-browser.prod.js" &&
-      process.env.NODE_ENV !== "production"
-    ) {
-      const devPath = path.resolve(clientDir, "vue.esm-browser.js");
-      if (fs.existsSync(devPath)) {
-        reqPath = "vue.esm-browser.js";
-      }
-    }
-    const filePath = path.resolve(clientDir, reqPath);
-    const rel = path.relative(clientDir, filePath);
-    if (rel.startsWith("..") || path.isAbsolute(rel)) return next();
-    if (!fs.existsSync(filePath) || !fs.statSync(filePath).isFile())
-      return next();
-    const ext = path.extname(filePath);
-    res.setHeader("Content-Type", MIME[ext] ?? "application/octet-stream");
-    fs.createReadStream(filePath).pipe(res);
-  });
-}
-
 type AnyNodeClass = (abstract new (...args: any[]) => Node) &
   Partial<typeof Node>;
 
@@ -187,7 +137,7 @@ async function registerType(RED: RED, NodeClass: AnyNodeClass) {
   RED.log.debug(`Type registered: ${NC.type}`);
 }
 
-type NodeRedPackageFunction = ((RED: RED) => Promise<void>) & {
+type RegistrationFunction = ((RED: RED) => Promise<void>) & {
   nodes: AnyNodeClass[];
 };
 
@@ -199,7 +149,7 @@ type NodeRedPackageFunction = ((RED: RED) => Promise<void>) & {
  *
  * @param nodes - Array of node classes to register
  */
-function registerTypes(nodes: AnyNodeClass[]): NodeRedPackageFunction {
+function registerTypes(nodes: AnyNodeClass[]): RegistrationFunction {
   const fn = async function (RED: RED) {
     initValidator(RED);
     serveNrgResources(RED);
@@ -214,12 +164,26 @@ function registerTypes(nodes: AnyNodeClass[]): NodeRedPackageFunction {
       throw error;
     }
   };
-  (fn as NodeRedPackageFunction).nodes = nodes;
-  return fn as NodeRedPackageFunction;
+  (fn as RegistrationFunction).nodes = nodes;
+  return fn as RegistrationFunction;
+}
+
+interface ModuleDefinition {
+  nodes: AnyNodeClass[];
+}
+
+function defineModule(definition: ModuleDefinition): ModuleDefinition {
+  return definition;
 }
 
-export { registerType, registerTypes };
-export { Node, IONode, ConfigNode } from "./nodes";
+export { registerType, registerTypes, defineModule };
+export {
+  Node,
+  IONode,
+  ConfigNode,
+  defineIONode,
+  defineConfigNode,
+} from "./nodes";
 export { NrgError } from "../errors";
 export type { RED } from "./types";
 export { SchemaType, defineSchema } from "./schemas";