@bonsae/nrg 0.5.4 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonsae/nrg",
-  "version": "0.5.4",
+  "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",

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

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 {
@@ -206,6 +216,7 @@ interface FormField {
   types?: string[];
   configType?: string;
   language?: string;
+  toggle?: boolean;
 }
 
 function formatLabel(key: string): string {
@@ -292,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":
@@ -368,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/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);

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";

package/src/core/server/nodes/factories.ts

@@ -0,0 +1,133 @@
+import { type TSchema } from "@sinclair/typebox";
+import type { Schema } from "../schemas/types";
+import type { RED } from "../types";
+import type {
+  InferOr,
+  InferOutputs,
+  IONodeDefinition,
+  ConfigNodeDefinition,
+  HexColor,
+} from "./types";
+import { IONode } from "./io-node";
+import { ConfigNode } from "./config-node";
+
+function defineIONode<
+  TConfigSchema extends TSchema | undefined = undefined,
+  TCredsSchema extends TSchema | undefined = undefined,
+  TSettingsSchema extends TSchema | undefined = undefined,
+  TInputSchema extends TSchema | undefined = undefined,
+  TOutputsSchema extends TSchema | readonly TSchema[] | undefined = undefined,
+>(
+  def: IONodeDefinition<
+    TConfigSchema,
+    TCredsSchema,
+    TSettingsSchema,
+    TInputSchema,
+    TOutputsSchema
+  >,
+) {
+  const NodeClass = class extends IONode<
+    InferOr<TConfigSchema, any>,
+    InferOr<TCredsSchema, any>,
+    InferOr<TInputSchema, any>,
+    InferOutputs<TOutputsSchema>,
+    InferOr<TSettingsSchema, any>
+  > {
+    static override readonly type: string = def.type;
+    static override readonly category: string = def.category ?? "function";
+    static override readonly color: HexColor = def.color ?? "#a6bbcf";
+    static override readonly inputs: number = def.inputs ?? 1;
+    static override readonly outputs: number = def.outputs ?? 1;
+    static override readonly paletteLabel = def.paletteLabel;
+    static override readonly inputLabels = def.inputLabels;
+    static override readonly outputLabels = def.outputLabels;
+    static override readonly align = def.align;
+    static override readonly labelStyle = def.labelStyle;
+
+    static override readonly configSchema: Schema | undefined =
+      def.configSchema as Schema | undefined;
+    static override readonly credentialsSchema: Schema | undefined =
+      def.credentialsSchema as Schema | undefined;
+    static override readonly settingsSchema: Schema | undefined =
+      def.settingsSchema as Schema | undefined;
+    static override readonly inputSchema: Schema | undefined =
+      def.inputSchema as Schema | undefined;
+    static override readonly outputsSchema: Schema | Schema[] | undefined =
+      def.outputsSchema as Schema | Schema[] | undefined;
+    static override readonly validateInput: boolean =
+      def.validateInput ?? false;
+    static override readonly validateOutput: boolean =
+      def.validateOutput ?? false;
+
+    static override _registered(RED: RED) {
+      this.validateSettings(RED);
+      return def.registered?.(RED);
+    }
+
+    async input(msg: InferOr<TInputSchema, any>) {
+      return def.input.call(this as any, msg);
+    }
+
+    override async created() {
+      if (def.created) return def.created.call(this as any);
+    }
+
+    override async closed(removed?: boolean) {
+      if (def.closed) return def.closed.call(this as any, removed);
+    }
+  };
+
+  Object.defineProperty(NodeClass, "name", {
+    value: def.type.replace(/(^|-)(\w)/g, (_, __, c: string) =>
+      c.toUpperCase(),
+    ),
+    configurable: true,
+  });
+
+  return NodeClass;
+}
+
+function defineConfigNode<
+  TConfigSchema extends TSchema | undefined = undefined,
+  TCredsSchema extends TSchema | undefined = undefined,
+  TSettingsSchema extends TSchema | undefined = undefined,
+>(def: ConfigNodeDefinition<TConfigSchema, TCredsSchema, TSettingsSchema>) {
+  const NodeClass = class extends ConfigNode<
+    InferOr<TConfigSchema, any>,
+    InferOr<TCredsSchema, any>,
+    InferOr<TSettingsSchema, any>
+  > {
+    static override readonly type: string = def.type;
+
+    static override readonly configSchema: Schema | undefined =
+      def.configSchema as Schema | undefined;
+    static override readonly credentialsSchema: Schema | undefined =
+      def.credentialsSchema as Schema | undefined;
+    static override readonly settingsSchema: Schema | undefined =
+      def.settingsSchema as Schema | undefined;
+
+    static override _registered(RED: RED) {
+      this.validateSettings(RED);
+      return def.registered?.(RED);
+    }
+
+    override async created() {
+      if (def.created) return def.created.call(this as any);
+    }
+
+    override async closed(removed?: boolean) {
+      if (def.closed) return def.closed.call(this as any, removed);
+    }
+  };
+
+  Object.defineProperty(NodeClass, "name", {
+    value: def.type.replace(/(^|-)(\w)/g, (_, __, c: string) =>
+      c.toUpperCase(),
+    ),
+    configurable: true,
+  });
+
+  return NodeClass;
+}
+
+export { defineIONode, defineConfigNode };

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

@@ -1,4 +1,5 @@
 export { Node } from "./node";
 export { IONode } from "./io-node";
 export { ConfigNode } from "./config-node";
+export { defineIONode, defineConfigNode } from "./factories";
 export type * from "./types";

package/src/core/server/nodes/io-node.ts

@@ -3,6 +3,7 @@ import type { RED } from "../../server/types";
 import { validator } from "../validator";
 import { Node } from "./node";
 import type {
+  HexColor,
   IONodeContext,
   IONodeContextScope,
   IONodeStatus,
@@ -19,7 +20,7 @@ abstract class IONode<
   TSettings = any,
 > extends Node<TConfig, TCredentials, TSettings> {
   public static readonly align?: "left" | "right";
-  public static readonly color: `#${string}`;
+  public static readonly color: HexColor;
   public static readonly labelStyle?:
     | "node_label"
     | "node_label_italic"