@bonsae/nrg 0.1.0

package/build/vite/utils.js

@@ -0,0 +1,60 @@
+// src/vite/utils.ts
+import fs from "fs";
+import path from "path";
+function cleanDir(dir) {
+  if (fs.existsSync(dir)) {
+    fs.rmSync(dir, { recursive: true });
+  }
+  fs.mkdirSync(dir, { recursive: true });
+}
+function copyFiles(targets, outDir) {
+  for (const { src, dest } of targets) {
+    const srcPath = path.resolve(src);
+    const destPath = path.join(outDir, dest);
+    if (!fs.existsSync(srcPath)) {
+      continue;
+    }
+    const stat = fs.statSync(srcPath);
+    if (stat.isDirectory()) {
+      fs.cpSync(srcPath, destPath, { recursive: true });
+    } else {
+      fs.mkdirSync(path.dirname(destPath), { recursive: true });
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+function getPackageName() {
+  const pkgPath = path.resolve("./package.json");
+  if (fs.existsSync(pkgPath)) {
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+    return pkg.name;
+  }
+  return "node-red-nodes";
+}
+function mergeOptions(defaults, overrides) {
+  if (!overrides) return { ...defaults };
+  const result = { ...defaults };
+  for (const key of Object.keys(overrides)) {
+    const overrideVal = overrides[key];
+    const defaultVal = defaults[key];
+    if (overrideVal !== void 0 && !Array.isArray(overrideVal) && !Array.isArray(defaultVal) && typeof overrideVal === "object" && typeof defaultVal === "object" && overrideVal !== null && defaultVal !== null) {
+      result[key] = mergeOptions(
+        defaultVal,
+        overrideVal
+      );
+    } else if (overrideVal !== void 0) {
+      result[key] = overrideVal;
+    }
+  }
+  return result;
+}
+function defineRuntimeSettings(settings) {
+  return settings;
+}
+export {
+  cleanDir,
+  copyFiles,
+  defineRuntimeSettings,
+  getPackageName,
+  mergeOptions
+};

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "@bonsae/nrg",
+  "version": "0.1.0",
+  "description": "NRG framework — build Node-RED nodes with Vue 3, TypeScript, and JSON Schema",
+  "author": "Allan Oricil <allanoricil@duck.com>",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "url": "https://github.com/bonsaedev/nrg",
+    "type": "git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=22",
+    "pnpm": ">=10.11.0"
+  },
+  "scripts": {
+    "build": "node build.mjs",
+    "typecheck": "tsc -p src/core/server/tsconfig.json --noEmit && tsc -p src/core/client/tsconfig.json --noEmit",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "format": "prettier --write \"src/**/*.{ts,vue,json}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,vue,json}\"",
+    "prepare": "husky"
+  },
+  "files": [
+    "src/",
+    "build/"
+  ],
+  "exports": {
+    "./server": {
+      "types": "./src/core/server/index.ts",
+      "require": "./build/server/index.cjs",
+      "default": "./build/server/index.cjs"
+    },
+    "./client": "./src/core/client/index.ts",
+    "./schemas": "./src/core/server/schemas/index.ts",
+    "./schemas/types": "./src/core/server/schemas/types/index.ts",
+    "./vite": {
+      "types": "./src/vite/index.ts",
+      "default": "./build/vite/index.js"
+    },
+    "./vite/utils": {
+      "types": "./src/vite/utils.ts",
+      "default": "./build/vite/utils.js"
+    },
+    "./tsconfig/base.json": "./src/tsconfig/base.json",
+    "./tsconfig/client.json": "./src/tsconfig/client.json",
+    "./tsconfig/server.json": "./src/tsconfig/server.json"
+  },
+  "peerDependencies": {
+    "@sinclair/typebox": "^0.34.33",
+    "vite": "^6.0.0",
+    "vue": "^3.5.14"
+  },
+  "dependencies": {
+    "@clack/prompts": "^1.0.1",
+    "@sinclair/typebox": "^0.34.33",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "ajv": "^8.17.1",
+    "ajv-errors": "^3.0.0",
+    "ajv-formats": "^3.0.1",
+    "chokidar": "^5.0.0",
+    "detect-port": "^2.1.0",
+    "es-toolkit": "^1.37.2",
+    "esbuild": "^0.25.4",
+    "get-port": "^7.1.0",
+    "jsonpointer": "^5.0.1",
+    "mime-types": "^3.0.1",
+    "tree-kill": "^1.2.2",
+    "typescript": "^5.8.3",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-static-copy": "^3.1.0"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,vue}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "src/**/*.json": [
+      "prettier --write"
+    ]
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^20.5.0",
+    "@commitlint/config-conventional": "^20.5.0",
+    "@eslint/js": "^9.27.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/exec": "^7.1.0",
+    "@semantic-release/git": "^10.0.1",
+    "@types/express": "^5.0.1",
+    "@types/mime-types": "^2.1.4",
+    "@types/node": "^22.15.18",
+    "@typescript-eslint/eslint-plugin": "^8.32.1",
+    "@typescript-eslint/parser": "^8.32.1",
+    "eslint": "^9.27.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-vue": "^10.1.0",
+    "globals": "^16.1.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.4.0",
+    "prettier": "^3.5.3",
+    "semantic-release": "^24.2.4",
+    "typescript-eslint": "^8.32.1",
+    "vite": "^6.3.4",
+    "vue": "^3.5.14"
+  }
+}

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

@@ -0,0 +1,17 @@
+import { type NodeDefinitionApiResponse } from "../../server/types";
+
+async function fetchNodeDefinition(
+  type: string,
+): Promise<NodeDefinitionApiResponse> {
+  const response = await fetch(`/nrg/nodes/${type}`);
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to fetch node definition for "${type}": ${response.status}`,
+    );
+  }
+
+  return response.json() as Promise<NodeDefinitionApiResponse>;
+}
+
+export { fetchNodeDefinition };

package/src/core/client/app.vue

@@ -0,0 +1,201 @@
+<template>
+  <div
+    v-if="features.hasInputSchema || features.hasOutputSchema"
+    class="form-row"
+    style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap"
+  >
+    <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
+        "
+      />
+      <span class="nrg-label" style="width: auto">Validate Input</span>
+    </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
+        "
+      />
+      <span class="nrg-label" style="width: auto">Validate Output</span>
+    </template>
+  </div>
+  <div style="width: 100%; padding-bottom: 12px">
+    <NodeRedNodeForm
+      :node="localNode"
+      :schema="schema"
+      :errors="errors"
+      style="width: 100%"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import jsonpointer from "jsonpointer";
+import { type JSONSchemaType } from "ajv";
+import type { PropType } from "vue";
+import { defineComponent } from "vue";
+import { validator } from "../validator";
+
+export default defineComponent({
+  name: "NodeRedVueApp",
+  props: {
+    node: {
+      type: Object,
+      required: true,
+    },
+    schema: {
+      type: Object as PropType<JSONSchemaType<any>>,
+      required: true,
+    },
+    features: {
+      type: Object as PropType<{
+        hasInputSchema: boolean;
+        hasOutputSchema: boolean;
+      }>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      localNode: this.node,
+      errors: {},
+    };
+  },
+  beforeMount() {
+    // Normalize array-typed properties to actual arrays. Nodes saved with an
+    // older version of the code may have stored array values as comma-separated
+    // strings; this ensures validation and future saves always see real arrays.
+    if (this.schema?.properties) {
+      for (const [prop, propSchema] of Object.entries(this.schema.properties)) {
+        if (
+          (propSchema as any).type === "array" &&
+          !Array.isArray(this.localNode[prop])
+        ) {
+          const val = this.localNode[prop];
+          this.localNode[prop] = val
+            ? String(val).split(",").filter(Boolean)
+            : [];
+        }
+      }
+    }
+
+    // Set __PWD__ for existing password fields before the first validation so
+    // the password-skip logic in validate() sees the sentinel value correctly.
+    if (this.localNode._def.credentials) {
+      Object.keys(this.localNode._def.credentials).forEach((prop) => {
+        if (
+          this.localNode._def.credentials[prop].type === "password" &&
+          this.localNode.credentials[`has_${prop}`]
+        ) {
+          this.localNode.credentials[prop] = "__PWD__";
+        }
+      });
+    }
+
+    this.validate();
+
+    if (this.localNode._def.defaults) {
+      Object.keys(this.localNode._def.defaults).forEach((prop) => {
+        this.$watch(
+          () => this.localNode[prop],
+          () => {
+            this.validate();
+          },
+          { deep: true },
+        );
+      });
+    }
+
+    if (this.localNode._def.credentials) {
+      Object.keys(this.localNode._def.credentials).forEach((prop) => {
+        this.$watch(
+          () => this.localNode.credentials[prop],
+          (newVal, oldVal) => {
+            this.validate();
+
+            if (
+              this.localNode._def.credentials[prop].type === "password" &&
+              newVal !== oldVal
+            ) {
+              this.localNode.credentials[`has_${prop}`] = !!newVal;
+            }
+          },
+          { deep: true },
+        );
+      });
+    }
+  },
+  beforeUnmount() {
+    // NOTE: must set credentials prop to undefined to avoid updating it to __PWD__ in the server
+    if (this.localNode._def.credentials) {
+      Object.keys(this.localNode._def.credentials).forEach((prop) => {
+        if (
+          this.localNode._def.credentials[prop].type === "password" &&
+          this.localNode.credentials?.[`has_${prop}`] &&
+          this.localNode.credentials?.[prop] === "__PWD__"
+        ) {
+          this.localNode.credentials[prop] = undefined;
+        }
+      });
+    }
+  },
+  methods: {
+    validate() {
+      const result = validator.validate(this.localNode, this.schema, {
+        cacheKey: `node-schema-${this.node.type}`,
+      });
+
+      if (!result.valid) {
+        this.errors = result.errors.reduce((acc, error) => {
+          const errorValue = jsonpointer.get(
+            this.localNode,
+            error.instancePath,
+          );
+          if (
+            error.parentSchema.format === "password" &&
+            errorValue === "__PWD__"
+          ) {
+            return acc;
+          } else {
+            const key = `node${error.instancePath.replaceAll("/", ".")}`;
+            acc[key] = error.message;
+            return acc;
+          }
+        }, {});
+      } else {
+        this.errors = {};
+      }
+    },
+  },
+});
+</script>
+
+<style scoped>
+:deep(.node-red-vue-input-error-message) {
+  color: var(--red-ui-text-color-error);
+}
+
+:deep(.nrg-label) {
+  display: inline-block;
+  width: 100%;
+  cursor: default;
+}
+
+:deep(.form-row input[type="text"]),
+:deep(.form-row input[type="number"]),
+:deep(.form-row input[type="password"]) {
+  height: 34px;
+  padding: 0 8px;
+  box-sizing: border-box;
+}
+</style>

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

@@ -0,0 +1,57 @@
+<template>
+  <div style="display: flex; flex-direction: column; width: 100%">
+    <input :id="inputId" type="text" style="width: 100%" />
+    <div v-if="error" class="node-red-vue-input-error-message">
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+    node: {
+      type: Object,
+      required: true,
+    },
+    propName: {
+      type: String,
+      required: true,
+    },
+    error: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: ["update:value"],
+  computed: {
+    inputId() {
+      return "node-input-" + this.propName;
+    },
+  },
+  mounted() {
+    RED.editor.prepareConfigNodeSelect(
+      this.node,
+      this.propName,
+      this.type,
+      "node-input",
+    );
+
+    const input = $("#" + this.inputId);
+    input.on("change", () => {
+      this.$emit("update:value", input.val());
+    });
+
+    input.val(this.value || "_ADD_");
+  },
+});
+</script>