@bonsae/nrg 0.6.1 → 0.6.2

package/src/core/client/index.ts

@@ -1,500 +0,0 @@
-import type { Component, App } from "vue";
-import { createApp } from "vue";
-import { cloneDeep, isEqual } from "es-toolkit";
-import type { JSONSchemaType } from "ajv";
-import NodeRedVueApp from "./app.vue";
-import NodeRedInput from "./components/node-red-input.vue";
-import NodeRedTypedInput from "./components/node-red-typed-input.vue";
-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> = {};
-const _forms: Record<string, Component> = {};
-
-function __setSchemas(schemas: Record<string, any>): void {
-  Object.assign(_schemas, schemas);
-}
-
-function __setForms(forms: Record<string, Component>): void {
-  Object.assign(_forms, forms);
-}
-
-interface NodeStateCredentials {
-  [key: string]: any;
-}
-
-interface NodeState {
-  credentials: NodeStateCredentials;
-  [key: string]: any;
-}
-
-interface Node {
-  id: string;
-  type: string;
-  name: string;
-  category: string;
-  x: string;
-  y: string;
-  g: string;
-  z: string;
-  credentials: Record<string, any>;
-  _def: {
-    defaults: Record<
-      string,
-      { value: string; type?: string; label?: string; required?: boolean }
-    >;
-    credentials: Record<
-      string,
-      {
-        value: string;
-        type?: "password" | "text";
-        label?: string;
-        required?: boolean;
-      }
-    >;
-    category: string;
-    color?: string;
-    icon?: string;
-    label?: ((this: Node) => string) | string;
-    inputs?: number;
-    outputs?: number;
-    paletteLabel?: ((this: Node) => string) | string;
-    labelStyle?: ((this: Node) => string) | string;
-    inputLabels?: ((this: Node) => string) | string;
-    outputLabels?: ((this: Node) => string) | string;
-    align?: "left" | "right";
-    button?: NodeButtonDefinition;
-    onPaletteAdd?: (this: Node) => void;
-    onPaletteRemove?: (this: Node) => void;
-    form: NodeFormDefinition;
-  };
-  _newState?: Node;
-  _app?: App | null;
-  _: (str: string) => string;
-  [key: string]: any;
-}
-
-/**
- * Interface representing the button configuration for a Node.
- *
- * @interface NodeButtonDefinition
- * @property {string} toggle - Text to display when toggling the button.
- * @property {function(): void} onclick - Function to execute when the button is clicked.
- * @property {function(): boolean} [enabled] - Function that determines whether the button should be
- *   enabled. Returns true if the button should be enabled, false otherwise.
- * @property {function(): boolean} [visible] - Function that determines whether the button should be
- *   visible. Returns true if the button should be visible, false otherwise.
- */
-interface NodeButtonDefinition {
-  toggle: string;
-  onclick: () => void;
-  enabled?: () => boolean;
-  visible?: () => boolean;
-}
-
-/**
- * Interface representing the form configuration for a Node.
- *
- * @interface NodeFormDefinition
- * @property {Component} [component] - Vue 3 component.
- */
-interface NodeFormDefinition {
-  component?: Component;
-}
-
-/**
- * Interface representing the Node options used during registration
- *
- * @type NodeDefinition
- * @property {string} type - The unique identifier for this node type.
- * @property {string} category - The category this node belongs to in the palette.
- * @property {string} [color] - The color associated with this node, in hex format.
- * @property {string} [icon] - The icon to display for this node.
- * @property {(function(): string)|string} [label] - The label to display on the node. Can be a static string or a function returning a string.
- * @property {number} [inputs] - Number of input ports the node should have.
- * @property {number} [outputs] - Number of output ports the node should have.
- * @property {(function(): string)|string} [paletteLabel] - The label to show in the palette. Can be a static string or a function returning a string.
- * @property {(function(): string)|string} [labelStyle] - CSS style to apply to the node label. Can be a static string or a function returning a string.
- * @property {(function(): string)|string} [inputLabels] - Labels for the input ports. Can be a static string or a function returning a string.
- * @property {(function(): string)|string} [outputLabels] - Labels for the output ports. Can be a static string or a function returning a string.
- * @property {"left"|"right"} [align] - Alignment of the node content.
- * @property {NodeButtonDefinition} [button] - Configuration for a button on the node.
- * @property {function(): void} [onPaletteAdd] - Function called when the node is added to the palette.
- * @property {function(): void} [onPaletteRemove] - Function called when the node is removed from the palette.
- * @property {NodeFormDefinition} form - The form component to use for configuring the node.
- * @property {JSONSchemaType} [schema] - Schema definition for validation.
- */
-interface NodeDefinition {
-  type: string;
-  category?: string;
-  color?: string;
-  icon?: ((this: Node) => string) | string;
-  label?: ((this: Node) => string) | string;
-  inputs?: number;
-  outputs?: number;
-  paletteLabel?: ((this: Node) => string) | string;
-  labelStyle?: ((this: Node) => string) | string;
-  inputLabels?: ((this: Node) => string) | string;
-  outputLabels?: ((this: Node) => string) | string;
-  align?: "left" | "right";
-  button?: NodeButtonDefinition;
-  onEditResize?: (this: Node, size: { width: number; height: number }) => void;
-  onPaletteAdd?: (this: Node) => void;
-  onPaletteRemove?: (this: Node) => void;
-  form?: NodeFormDefinition;
-}
-
-interface NodeFeatures {
-  hasInputSchema: boolean;
-  hasOutputSchema: boolean;
-}
-
-function createNodeRedVueApp(
-  node: Node,
-  form: NodeFormDefinition | undefined,
-  schema: JSONSchemaType<any>,
-  features: NodeFeatures,
-): App<Element> {
-  const app = createApp(NodeRedVueApp, {
-    node,
-    schema,
-    features,
-  });
-
-  app.component("NodeRedInputLabel", NodeRedInputLabel);
-  app.component("NodeRedToggle", NodeRedToggle);
-  app.component("NodeRedInput", NodeRedInput);
-  app.component("NodeRedTypedInput", NodeRedTypedInput);
-  app.component("NodeRedConfigInput", NodeRedConfigInput);
-  app.component("NodeRedSelectInput", NodeRedSelectInput);
-  app.component("NodeRedEditorInput", NodeRedEditorInput);
-  app.component("NodeRedJsonSchemaForm", NodeRedJsonSchemaForm);
-  app.component("NodeRedNodeForm", form?.component ?? NodeRedJsonSchemaForm);
-
-  // NOTE: now every form can use $i18n to access Node-RED built in i18n features
-  app.config.globalProperties.$i18n = (label: string) =>
-    node._(`${node.type}.${label}`);
-  return app;
-}
-
-function mountApp(
-  node: Node,
-  form: NodeFormDefinition | undefined,
-  schema: JSONSchemaType<any>,
-  features: NodeFeatures,
-  containerId: string,
-) {
-  $(`#${containerId}`).empty();
-  node._newState = cloneDeep(node);
-  node._app = createNodeRedVueApp(node._newState, form, schema, features);
-  node._app.mount(`#${containerId}`);
-}
-
-function unmountApp(node: Node) {
-  if (node._app) {
-    node._app.unmount();
-    node._app = null;
-  }
-}
-
-function getNodeState(node: Node): NodeState {
-  const state: NodeState = {
-    credentials: {},
-  };
-  Object.keys(node._def.defaults ?? {}).forEach((prop) => {
-    state[prop] = node[prop];
-  });
-  if (node._def.credentials) {
-    Object.keys(node._def.credentials).forEach((prop) => {
-      state.credentials[prop] = node.credentials?.[prop];
-
-      if (node._def.credentials[prop].type === "password") {
-        state.credentials[`has_${prop}`] =
-          node.credentials?.[`has_${prop}`] || false;
-      }
-    });
-  }
-
-  return state;
-}
-
-function getChanges(
-  o: Record<any, any>,
-  n: Record<any, any>,
-): Record<string, any> {
-  const changes: Record<string, any> = {};
-
-  const allKeys = new Set([...Object.keys(o), ...Object.keys(n ?? {})]);
-  allKeys.forEach((prop) => {
-    const _o = o[prop];
-    const _n = (n ?? {})[prop];
-
-    if (!Array.isArray(_o) && typeof _o === "object" && _o !== null) {
-      const _changes = getChanges(_o, _n);
-      if (Object.keys(_changes).length) {
-        changes[prop] = _changes;
-      }
-    } else if (!isEqual(_o, _n)) {
-      changes[prop] = _o;
-    }
-  });
-
-  return changes;
-}
-
-// Deep-merge source into target, but replace arrays wholesale instead of
-// merging them element-by-element (es-toolkit merge keeps old array items
-// when the source is shorter, e.g. going from ["a","b"] to [] keeps ["a","b"]).
-function applyState(target: any, source: any): void {
-  for (const key of Object.keys(source)) {
-    const srcVal = source[key];
-    if (Array.isArray(srcVal)) {
-      target[key] = [...srcVal];
-    } else if (srcVal !== null && typeof srcVal === "object") {
-      if (
-        !target[key] ||
-        typeof target[key] !== "object" ||
-        Array.isArray(target[key])
-      ) {
-        target[key] = {};
-      }
-      applyState(target[key], srcVal);
-    } else {
-      target[key] = srcVal;
-    }
-  }
-}
-
-function defineNode<T extends NodeDefinition>(options: T): T {
-  return options;
-}
-
-/**
- * Prepares a node registration function using the provided base configuration.
- *
- * This is a higher-order function that returns a function which can be used
- * to register the node with a specific type at runtime.
- *
- * @param {Object} options - The static configuration shared by all nodes of this kind
- * @param {string} [options.category="undefined"] - The category this node belongs to in the palette
- * @param {string} [options.color="#FFFFFF"] - The color associated with this node, in hex format
- * @param {string} [options.icon] - The icon to display for this node
- * @param {(function(): string)|string} [options.label] - The label to display on the node
- * @param {number} [options.inputs=0] - Number of input ports the node should have
- * @param {number} [options.outputs=0] - Number of output ports the node should have
- * @param {(function(): string)|string} [options.paletteLabel] - The label to show in the palette
- * @param {(function(): string)|string} [options.labelStyle] - CSS style to apply to the node label
- * @param {(function(): string)|string} [options.inputLabels] - Labels for the input ports
- * @param {(function(): string)|string} [options.outputLabels] - Labels for the output ports
- * @param {"left"|"right"} [options.align="left"] - Alignment of the node content
- * @param {NodeButtonDefinition} [options.button] - Configuration for a button on the node
- * @param {function(): void} [options.onPaletteAdd] - Function called when the node is added to the palette
- * @param {function(): void} [options.onPaletteRemove] - Function called when the node is removed from the palette
- * @param {Component} options.form - The form component to use for configuring the node
- * @param {JSONSchemaType} [options.schema] - Schema definition for validation
- *
- * @returns A function that registers the node with the specified type
- */
-async function registerType(definition: NodeDefinition): Promise<void> {
-  const { type } = definition;
-  try {
-    const nodeDefinition = {
-      ...(_schemas[type] ?? {}),
-      ...definition,
-    };
-
-    // defaults and credentials are pre-computed at build time by the inliner
-    const defaults = nodeDefinition.defaults ?? undefined;
-    const credentials = nodeDefinition.credentials ?? undefined;
-
-    const appContainerId = `nrg-app-${type}`;
-
-    $("<script>", {
-      type: "text/html",
-      "data-template-name": type,
-      html: `<div id="${appContainerId}"></div>`,
-    }).appendTo("body");
-
-    function oneditprepare(this: Node) {
-      const validationSchema =
-        nodeDefinition.configSchema &&
-        nodeDefinition.credentialsSchema?.properties
-          ? {
-              ...nodeDefinition.configSchema,
-              properties: {
-                ...nodeDefinition.configSchema.properties,
-                credentials: {
-                  type: "object",
-                  properties: nodeDefinition.credentialsSchema.properties,
-                },
-              },
-            }
-          : nodeDefinition.configSchema;
-
-      const form =
-        definition.form ??
-        (_forms[type] ? { component: _forms[type] } : undefined);
-      const features: NodeFeatures = {
-        hasInputSchema: !!nodeDefinition.inputSchema,
-        hasOutputSchema: !!nodeDefinition.outputsSchema,
-      };
-      mountApp(this, form, validationSchema, features, appContainerId);
-    }
-
-    function oneditsave(this: Node) {
-      // eslint-disable-next-line @typescript-eslint/no-this-alias
-      const node = this;
-      unmountApp(node);
-
-      const newState = getNodeState(node._newState!);
-      const oldState = getNodeState(node);
-      const changes = getChanges(oldState, newState);
-      const changed = !!Object.keys(changes)?.length;
-      if (!changed) return false;
-
-      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;
-        if (oldConfigNodeId === newConfigNodeId) return;
-        const oldConfigNode = RED.nodes.node(oldConfigNodeId);
-        if (oldConfigNode && oldConfigNode._def.category === "config") {
-          const idx = oldConfigNode.users.findIndex(
-            (_node) => _node.id === node.id,
-          );
-          if (idx !== -1) {
-            oldConfigNode.users.splice(idx, 1);
-          }
-        }
-      });
-
-      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;
-        const newConfigNode = RED.nodes.node(newConfigNodeId);
-        if (newConfigNode && newConfigNode._def.category === "config") {
-          const idx = newConfigNode.users.findIndex(
-            (_node) => _node.id === node.id,
-          );
-          if (idx === -1) {
-            newConfigNode.users.push(node);
-          }
-        }
-      });
-
-      applyState(node, newState);
-
-      // For config nodes, populate the standard Node-RED input elements so
-      // pane.apply() can read the new values after oneditsave returns.
-      // Regular nodes must NOT have hidden inputs created here: pane.apply()
-      // reads them back via input.val() which coerces arrays/objects to strings,
-      // overwriting the correctly-typed values already set by merge() above.
-      const isConfigNode = definition.category === "config";
-      if (isConfigNode) {
-        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}`);
-          if (!input.length) {
-            input = $("<input>", { type: "hidden", id: inputId });
-            $(`#${appContainerId}`).append(input);
-          }
-          input.val(newState[prop] ?? "");
-        });
-        return undefined;
-      }
-
-      return {
-        changed,
-        history: [
-          {
-            t: "edit",
-            node,
-            changes,
-            links: [],
-            dirty: RED.nodes.dirty(),
-            changed,
-          },
-        ],
-      };
-    }
-
-    function oneditcancel(this: Node) {
-      unmountApp(this);
-    }
-
-    function oneditdelete(this: Node) {
-      unmountApp(this);
-    }
-
-    RED.nodes.registerType(type, {
-      type,
-      defaults,
-      credentials,
-      category: nodeDefinition.category,
-      color: nodeDefinition.color || "#FFFFFF",
-      icon: nodeDefinition.icon,
-      inputs: nodeDefinition.inputs || 0,
-      outputs: nodeDefinition.outputs || 0,
-      label:
-        nodeDefinition.label ||
-        function (this: Node) {
-          return this.name || this._(`${type}.label`);
-        },
-      paletteLabel: nodeDefinition.paletteLabel || type,
-      labelStyle: nodeDefinition.labelStyle,
-      inputLabels: nodeDefinition.inputLabels,
-      outputLabels: nodeDefinition.outputLabels,
-      align: nodeDefinition.align || "left",
-      button: nodeDefinition.button,
-      oneditprepare,
-      oneditsave,
-      oneditcancel,
-      oneditdelete,
-      oneditresize: nodeDefinition.onEditResize,
-      onpaletteadd: nodeDefinition.onPaletteAdd,
-      onpaletteremove: nodeDefinition.onPaletteRemove,
-    });
-  } catch (error) {
-    console.error(`Error while registering node type ${type}:`, error);
-    throw error;
-  }
-}
-
-/**
- * Registers multiple nodes with Node-RED in parallel.
- *
- * @param {Array<[string, NodeDefinition]>} nodes - Array of tuples containing node type and definition
- * @returns Resolves when all nodes are registered
- *
- * @example
- * await registerTypes([
- *   ["remote-server", remoteServer],
- *   ["your-node", yourNode],
- * ]);
- */
-async function registerTypes(nodes: NodeDefinition[]): Promise<void> {
-  try {
-    await Promise.all(nodes.map((definition) => registerType(definition)));
-  } catch (error) {
-    console.error("Error registering node types:", error);
-    throw error;
-  }
-}
-
-export {
-  __setSchemas,
-  __setForms,
-  defineNode,
-  registerType,
-  registerTypes,
-  NodeDefinition,
-  NodeButtonDefinition,
-  NodeFormDefinition,
-  Node,
-};

package/src/core/client/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "noEmit": true,
-    "noImplicitAny": false,
-    "noImplicitOverride": true,
-    "resolveJsonModule": true
-  },
-  "files": ["shims-vue.d.ts", "components.d.ts", "globals.d.ts"],
-  "include": ["**/*.ts", "**/*.vue", "../constants.ts", "../validator.ts"],
-  "exclude": ["node_modules"]
-}

package/src/core/constants.ts

@@ -1,18 +0,0 @@
-const TYPED_INPUT_TYPES = [
-  "msg",
-  "flow",
-  "global",
-  "str",
-  "num",
-  "bool",
-  "json",
-  "bin",
-  "re",
-  "jsonata",
-  "date",
-  "env",
-  "node",
-  "cred",
-] as const;
-
-export { TYPED_INPUT_TYPES };

package/src/core/errors.ts

@@ -1,9 +0,0 @@
-class NrgError extends Error {
-  constructor(message: string) {
-    super(message);
-    this.name = "NrgError";
-    Object.setPrototypeOf(this, NrgError.prototype);
-  }
-}
-
-export { NrgError };

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

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

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

@@ -1,54 +0,0 @@
-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 };