@bonsae/nrg 0.4.0 → 0.5.1

package/build/vite/index.js

@@ -1211,7 +1211,7 @@ function getDefaultsFromSchema(schema) {
     result[key] = {
       required: false,
       value: prop.default ?? void 0,
-      type: prop["node-type"]
+      type: prop["x-nrg-node-type"]
     };
   }
   return result;
@@ -1443,11 +1443,13 @@ async function build2(clientBuildOptions, buildContext) {
   if (fs10.existsSync(physicalEntryPath)) {
     entryPath = physicalEntryPath;
   } else {
-    if (!fs10.existsSync(path10.dirname(physicalEntryPath))) {
-      fs10.mkdirSync(path10.dirname(physicalEntryPath), { recursive: true });
+    const cacheDir = path10.resolve("node_modules", ".nrg", "client");
+    const cachedEntryPath = path10.resolve(cacheDir, entry);
+    if (!fs10.existsSync(cacheDir)) {
+      fs10.mkdirSync(cacheDir, { recursive: true });
     }
-    fs10.writeFileSync(physicalEntryPath, "// auto-generated entry\n");
-    entryPath = physicalEntryPath;
+    fs10.writeFileSync(cachedEntryPath, "// auto-generated entry\n");
+    entryPath = cachedEntryPath;
     generatedEntry = true;
   }
   const iconsDir = path10.resolve(
@@ -1592,7 +1594,7 @@ async function build2(clientBuildOptions, buildContext) {
     throw new BuildError("client", error);
   } finally {
     if (generatedEntry) {
-      fs10.unlinkSync(physicalEntryPath);
+      fs10.unlinkSync(entryPath);
     }
   }
 }
@@ -1841,10 +1843,22 @@ function buildPlugin(options) {
         const tsconfigsToCheck = [serverTsconfig, clientTsconfig].filter(
           (p) => fs11.existsSync(p)
         );
-        for (const tsconfig of tsconfigsToCheck) {
-          execSync(`npx tsc -p ${tsconfig} --noEmit`, { stdio: "inherit" });
+        try {
+          for (const tsconfig of tsconfigsToCheck) {
+            execSync(`npx tsc -p ${tsconfig} --noEmit`, {
+              stdio: ["inherit", "pipe", "pipe"],
+              encoding: "utf-8"
+            });
+          }
+          logger.stopSpinner("Type checked");
+        } catch (e) {
+          logger.stopSpinner("Type check failed");
+          const output = (e.stdout || "") + (e.stderr || "");
+          if (output) {
+            console.error(output);
+          }
+          throw new BuildError("type-check", e);
         }
-        logger.stopSpinner("Type checked");
         logger.startSpinner("Cleaning");
         cleanDir(buildContext.outDir);
         logger.stopSpinner("Cleaned");

package/package.json

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

@@ -14,7 +14,7 @@
           localNode.validateInput = ($event.target as HTMLInputElement).checked
         "
       />
-      <span class="nrg-label" style="width: auto">Validate Input</span>
+      <NodeRedInputLabel label="Validate Input" style="width: auto" />
     </template>
     <template v-if="features.hasOutputSchema">
       <input
@@ -26,7 +26,7 @@
           localNode.validateOutput = ($event.target as HTMLInputElement).checked
         "
       />
-      <span class="nrg-label" style="width: auto">Validate Output</span>
+      <NodeRedInputLabel label="Validate Output" style="width: auto" />
     </template>
   </div>
   <div style="width: 100%; padding-bottom: 12px">
@@ -185,12 +185,6 @@ export default defineComponent({
   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"]) {

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

@@ -1,5 +1,13 @@
 <template>
   <div style="display: flex; flex-direction: column; width: 100%">
+    <slot name="label">
+      <NodeRedInputLabel
+        v-if="label"
+        :label="label"
+        :icon="icon"
+        :required="required"
+      />
+    </slot>
     <input :id="inputId" type="text" style="width: 100%" />
     <div v-if="error" class="node-red-vue-input-error-message">
       {{ error }}
@@ -9,7 +17,9 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import NodeRedInputLabel from "./node-red-input-label.vue";
 export default defineComponent({
+  components: { NodeRedInputLabel },
   props: {
     value: {
       type: String,
@@ -27,6 +37,18 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    label: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
     error: {
       type: String,
       default: "",

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

@@ -1,13 +1,23 @@
 <template>
   <div ref="container" class="container">
-    <button
-      ref="expand-button"
-      class="red-ui-button red-ui-button-small expand-button"
-      @click="onClickExpand"
-    >
-      <i class="fa fa-expand"></i>
-    </button>
-    <div :id="editorId" ref="editor"></div>
+    <slot name="label">
+      <NodeRedInputLabel
+        v-if="label"
+        :label="label"
+        :icon="icon"
+        :required="required"
+      />
+    </slot>
+    <div class="editor-wrapper">
+      <button
+        ref="expand-button"
+        class="red-ui-button red-ui-button-small expand-button"
+        @click="onClickExpand"
+      >
+        <i class="fa fa-expand"></i>
+      </button>
+      <div :id="editorId" ref="editor"></div>
+    </div>
     <div v-show="error" class="node-red-vue-input-error-message">
       {{ error }}
     </div>
@@ -17,7 +27,9 @@
 <script lang="ts">
 // TODO: expose editor apis
 import { defineComponent } from "vue";
+import NodeRedInputLabel from "./node-red-input-label.vue";
 export default defineComponent({
+  components: { NodeRedInputLabel },
   props: {
     value: {
       type: String,
@@ -121,6 +133,18 @@ export default defineComponent({
         return isValid;
       },
     },
+    label: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
     error: {
       type: String,
       default: "",
@@ -268,7 +292,7 @@ export default defineComponent({
 });
 </script>
 <style scoped>
-.container {
+.editor-wrapper {
   position: relative;
 }
 

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

@@ -0,0 +1,53 @@
+<template>
+  <span class="nrg-label">
+    <i v-if="icon" :class="iconClass"></i>
+    <slot>{{ label }}</slot>
+    <span v-if="required" class="nrg-required">*</span>
+  </span>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "NodeRedInputLabel",
+  props: {
+    label: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  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-label {
+  display: inline-block;
+  width: 100%;
+  cursor: default;
+}
+
+.nrg-label i {
+  margin-right: 5px;
+}
+
+.nrg-required {
+  color: var(--red-ui-text-color-error);
+  margin-left: 2px;
+}
+</style>

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

@@ -1,5 +1,13 @@
 <template>
   <div style="display: flex; flex-direction: column; width: 100%">
+    <slot name="label">
+      <NodeRedInputLabel
+        v-if="label"
+        :label="label"
+        :icon="icon"
+        :required="required"
+      />
+    </slot>
     <input
       ref="inputField"
       :type="type"
@@ -18,10 +26,12 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import NodeRedInputLabel from "./node-red-input-label.vue";
 
 const SECRET_PATTERN = "*************";
 
 export default defineComponent({
+  components: { NodeRedInputLabel },
   props: {
     value: {
       type: String,
@@ -35,6 +45,18 @@ export default defineComponent({
       type: String,
       default: "",
     },
+    label: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
     error: {
       type: String,
       default: "",

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

@@ -1,36 +1,44 @@
 <template>
   <div>
     <div v-for="field in configFields" :key="field.key" class="form-row">
-      <span class="nrg-label">
-        {{ field.label }}
-        <span v-if="field.required" class="nrg-required">*</span>
-      </span>
-
       <NodeRedInput
         v-if="field.inputType === 'text' || field.inputType === 'number'"
         :value="node[field.key]"
         :type="field.htmlType"
+        :label="field.label"
+        :icon="field.icon"
+        :required="field.required"
         :error="errors[`node.${field.key}`]"
         @update:value="node[field.key] = $event"
       />
 
-      <input
-        v-else-if="field.inputType === 'boolean'"
-        type="checkbox"
-        :checked="node[field.key]"
-        style="width: auto; margin: 0"
-        @change="
-          (e) => {
-            node[field.key] = (e.target as HTMLInputElement).checked;
-          }
-        "
-      />
+      <div v-else-if="field.inputType === 'boolean'">
+        <NodeRedInputLabel
+          :label="field.label"
+          :icon="field.icon"
+          :required="field.required"
+          style="width: auto"
+        />
+        <input
+          type="checkbox"
+          :checked="node[field.key]"
+          style="width: auto; margin: 0"
+          @change="
+            (e) => {
+              node[field.key] = (e.target as HTMLInputElement).checked;
+            }
+          "
+        />
+      </div>
 
       <NodeRedSelectInput
         v-else-if="field.inputType === 'select'"
         :value="node[field.key]"
         :options="field.options!"
         :multiple="field.multiple"
+        :label="field.label"
+        :icon="field.icon"
+        :required="field.required"
         :error="errors[`node.${field.key}`]"
         @update:value="node[field.key] = $event"
       />
@@ -39,6 +47,9 @@
         v-else-if="field.inputType === 'typed'"
         :value="node[field.key]"
         :types="field.types"
+        :label="field.label"
+        :icon="field.icon"
+        :required="field.required"
         :error="errors[`node.${field.key}`]"
         @update:value="node[field.key] = $event"
       />
@@ -49,11 +60,19 @@
         :type="field.configType!"
         :node="node"
         :prop-name="field.key"
+        :label="field.label"
+        :icon="field.icon"
+        :required="field.required"
         :error="errors[`node.${field.key}`]"
         @update:value="node[field.key] = $event"
       />
 
       <div v-else-if="field.inputType === 'array-text'">
+        <NodeRedInputLabel
+          :label="field.label"
+          :icon="field.icon"
+          :required="field.required"
+        />
         <span
           style="
             display: block;
@@ -95,6 +114,9 @@
         v-else-if="field.inputType === 'editor'"
         :value="node[field.key]"
         :language="field.language"
+        :label="field.label"
+        :icon="field.icon"
+        :required="field.required"
         :error="errors[`node.${field.key}`]"
         @update:value="node[field.key] = $event"
       />
@@ -105,14 +127,12 @@
       :key="`cred-${field.key}`"
       class="form-row"
     >
-      <span class="nrg-label">
-        {{ field.label }}
-        <span v-if="field.required" class="nrg-required">*</span>
-      </span>
-
       <NodeRedInput
         :value="node.credentials[field.key]"
         :type="field.htmlType"
+        :label="field.label"
+        :icon="field.icon"
+        :required="field.required"
         :error="errors[`node.credentials.${field.key}`]"
         @update:value="node.credentials[field.key] = $event"
       />
@@ -123,6 +143,7 @@
 <script lang="ts">
 import type { PropType } from "vue";
 import { defineComponent } from "vue";
+import NodeRedInputLabel from "./node-red-input-label.vue";
 import NodeRedInput from "./node-red-input.vue";
 import NodeRedSelectInput from "./node-red-select-input.vue";
 import NodeRedTypedInput from "./node-red-typed-input.vue";
@@ -144,6 +165,12 @@ const SKIP_FIELDS = new Set([
   "validateOutput",
 ]);
 
+interface NrgFormOptions {
+  icon?: string;
+  typedInputTypes?: string[];
+  editorLanguage?: string;
+}
+
 interface FieldSchema {
   type?: string | string[];
   properties?: Record<string, FieldSchema>;
@@ -154,15 +181,15 @@ interface FieldSchema {
   description?: string;
   default?: any;
   items?: FieldSchema;
-  "node-type"?: string;
-  "x-typed-types"?: string[];
-  "x-editor-language"?: string;
+  "x-nrg-node-type"?: string;
+  "x-nrg-form"?: NrgFormOptions;
   [key: string]: any;
 }
 
 interface FormField {
   key: string;
   label: string;
+  icon: string;
   inputType:
     | "text"
     | "number"
@@ -201,15 +228,18 @@ function buildField(
   required: boolean,
 ): FormField {
   const label = schema.title || formatLabel(key);
+  const form = schema["x-nrg-form"] ?? {};
+  const icon = form.icon || "";
 
   // NodeRef → config input
-  if (schema["node-type"]) {
+  if (schema["x-nrg-node-type"]) {
     return {
       key,
       label,
+      icon,
       inputType: "config",
       required,
-      configType: schema["node-type"],
+      configType: schema["x-nrg-node-type"],
     };
   }
 
@@ -218,9 +248,10 @@ function buildField(
     return {
       key,
       label,
+      icon,
       inputType: "typed",
       required,
-      types: schema["x-typed-types"],
+      types: form.typedInputTypes,
     };
   }
 
@@ -229,6 +260,7 @@ function buildField(
     return {
       key,
       label,
+      icon,
       inputType: "select",
       required,
       multiple: true,
@@ -244,6 +276,7 @@ function buildField(
     return {
       key,
       label,
+      icon,
       inputType: "select",
       required,
       multiple: false,
@@ -258,53 +291,71 @@ function buildField(
 
   switch (rawType) {
     case "boolean":
-      return { key, label, inputType: "boolean", required };
+      return { key, label, icon, inputType: "boolean", required };
 
     case "number":
     case "integer":
-      return { key, label, inputType: "number", required, htmlType: "number" };
+      return {
+        key,
+        label,
+        icon,
+        inputType: "number",
+        required,
+        htmlType: "number",
+      };
 
     case "array":
-      if (schema["x-editor-language"]) {
+      if (form.editorLanguage) {
         return {
           key,
           label,
+          icon,
           inputType: "editor",
           required,
-          language: schema["x-editor-language"],
+          language: form.editorLanguage,
         };
       }
       // Plain array of strings → comma-separated text input
-      return { key, label, inputType: "array-text", required };
+      return { key, label, icon, inputType: "array-text", required };
 
     case "object":
-      if (schema["x-editor-language"]) {
+      if (form.editorLanguage) {
         return {
           key,
           label,
+          icon,
           inputType: "editor",
           required,
-          language: schema["x-editor-language"],
+          language: form.editorLanguage,
         };
       }
       // Plain object → text input (stored as JSON string)
-      return { key, label, inputType: "text", required, htmlType: "text" };
+      return {
+        key,
+        label,
+        icon,
+        inputType: "text",
+        required,
+        htmlType: "text",
+      };
 
     default:
       // string with editor language → code editor
-      if (schema["x-editor-language"]) {
+      if (form.editorLanguage) {
         return {
           key,
           label,
+          icon,
           inputType: "editor",
           required,
-          language: schema["x-editor-language"],
+          language: form.editorLanguage,
         };
       }
       // string (or untyped)
       return {
         key,
         label,
+        icon,
         inputType: "text",
         required,
         htmlType: schema.format === "password" ? "password" : "text",
@@ -315,6 +366,7 @@ function buildField(
 export default defineComponent({
   name: "NodeRedJsonSchemaForm",
   components: {
+    NodeRedInputLabel,
     NodeRedInput,
     NodeRedSelectInput,
     NodeRedTypedInput,
@@ -370,10 +422,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style scoped>
-.nrg-required {
-  color: var(--red-ui-text-color-error);
-  margin-left: 2px;
-}
-</style>

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

@@ -1,5 +1,13 @@
 <template>
   <div style="display: flex; flex-direction: column; width: 100%">
+    <slot name="label">
+      <NodeRedInputLabel
+        v-if="label"
+        :label="label"
+        :icon="icon"
+        :required="required"
+      />
+    </slot>
     <input
       ref="selectInput"
       type="text"
@@ -14,7 +22,9 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import NodeRedInputLabel from "./node-red-input-label.vue";
 export default defineComponent({
+  components: { NodeRedInputLabel },
   props: {
     value: {
       type: [String, Array],
@@ -53,6 +63,18 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    label: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
     error: {
       type: String,
       default: "",