@bonsae/nrg 0.18.0 → 0.18.2

package/README.md

@@ -22,9 +22,12 @@ Build Node-RED nodes with Vue 3, TypeScript, JSON Schema validations, Vite and V
 | `@bonsae/nrg/client` | Client-side registration (`registerTypes`, `defineNode`, `useFormNode`, `Infer`) |
 | `@bonsae/nrg/vite` | Vite plugin for building and developing Node-RED packages |
 | `@bonsae/nrg/test/server/unit` | Server unit test helpers (`createNode`, `createRED`, `MockRED`) |
-| `@bonsae/nrg/test/client/unit` | Client unit test config and mocks (`defaultConfig`, `createRED`, `createJQuery`) |
+| `@bonsae/nrg/test/server/unit/config` | Server unit test default vitest config (`defaultConfig`) |
+| `@bonsae/nrg/test/client/unit` | Client unit test mocks (`createRED`, `createJQuery`, `useFormNode`) |
+| `@bonsae/nrg/test/client/unit/config` | Client unit test default vitest config (`defaultConfig`) |
 | `@bonsae/nrg/test/client/unit/setup` | Setup file that installs `RED` and `$` mocks on `window` |
-| `@bonsae/nrg/test/client/component` | Client component test helpers (`createNode`, `defaultConfig`, `createRED`, `createJQuery`) |
+| `@bonsae/nrg/test/client/component` | Client component test helpers (`createNode`, `createRED`, `createJQuery`, `useFormNode`) |
+| `@bonsae/nrg/test/client/component/config` | Client component test default vitest config (`defaultConfig`) |
 | `@bonsae/nrg/test/client/component/setup` | Setup file that installs `RED` and `$` mocks on `window` with Vue i18n |
 | `@bonsae/nrg/test/client/e2e` | Browser E2E test helpers (`NodeRedEditor`, `NodeRedField`, `setup`, `teardown`) |
 | `@bonsae/nrg/tsconfig/base.json` | Base TypeScript configuration |
@@ -142,7 +145,21 @@ See the [consumer template](https://github.com/AllanOricil/node-red-vue-template
 
 ## Testing
 
-NRG provides four test libraries:
+NRG provides four test libraries and bundles most test infrastructure as direct dependencies. Install `vitest` plus any optional peer dependencies you need:
+
+```bash
+pnpm add -D vitest
+```
+
+Optional peer dependencies:
+
+| Package | When to install |
+| --- | --- |
+| `@vitest/browser-playwright` | Component tests (Playwright browser provider for Vitest) |
+| `playwright` | Component tests or E2E tests (direct `import` in test files) |
+| `vitest-browser-vue` | Component tests (`render` helper for Vue components) |
+| `@vitest/coverage-v8` | Coverage with `--coverage` (V8 provider) |
+| `@vitest/coverage-istanbul` | Coverage with `--coverage` (Istanbul provider) |
 
 - `@bonsae/nrg/test/server/unit` — server-side unit tests
 - `@bonsae/nrg/test/client/unit` — client-side unit tests (TypeScript logic)
@@ -174,15 +191,15 @@ describe("my-node", () => {
 Test client-side TypeScript logic (validation, utilities) with mocked `RED` and `$` globals:
 
 ```typescript
-// vitest.config.ts
-import { defineConfig } from "vitest/config";
-import { defaultConfig } from "@bonsae/nrg/test/client/unit";
+// vitest.client.unit.config.ts
+import { defineConfig, mergeConfig } from "vitest/config";
+import { defaultConfig } from "@bonsae/nrg/test/client/unit/config";
 
-export default defineConfig({
+export default mergeConfig(defaultConfig, defineConfig({
   test: {
-    ...defaultConfig,
+    include: ["tests/client/unit/**/*.test.ts"],
   },
-});
+}));
 ```
 
 ```typescript
@@ -199,46 +216,49 @@ describe("myUtil", () => {
 
 ### Client Component Tests
 
-Test your Vue editor components with mocked Node-RED globals:
+Test your Vue editor components with mocked Node-RED globals. Components that use `useFormNode()` receive their node data via Vue's `provide`/`inject` — use `createNode().provide` to supply it in tests:
 
 ```typescript
-// vitest.config.ts
-import { defineConfig } from "vitest/config";
-import { playwright } from "@vitest/browser-playwright";
-import vue from "@vitejs/plugin-vue";
-import { defaultConfig } from "@bonsae/nrg/test/client/component";
+// vitest.client.component.config.ts
+import { defineConfig, mergeConfig } from "vitest/config";
+import { defaultConfig } from "@bonsae/nrg/test/client/component/config";
 
-export default defineConfig({
-  plugins: [vue()],
+export default mergeConfig(defaultConfig, defineConfig({
   test: {
-    ...defaultConfig,
-    browser: {
-      ...defaultConfig.browser,
-      provider: playwright(),
-    },
+    include: ["tests/client/component/**/*.test.ts"],
   },
-});
+}));
 ```
 
 ```typescript
-// tests/client/component/my-component.test.ts
+// tests/client/component/my-form.test.ts
 import { describe, test, expect, vi } from "vitest";
 import { render } from "vitest-browser-vue";
 import { createNode } from "@bonsae/nrg/test/client/component";
-import MyComponent from "../src/client/components/my-component.vue";
+import MyForm from "../src/client/components/my-form.vue";
+
+describe("MyForm", () => {
+  test("renders fields from injected node", async () => {
+    const { provide } = createNode({ name: "test", url: "https://example.com" });
+    const screen = render(MyForm, {
+      global: { provide },
+    });
+    await expect.element(screen.getByDisplayValue("test")).toBeInTheDocument();
+  });
 
-describe("MyComponent", () => {
-  test("renders with node props", async () => {
-    const { node } = createNode({ name: "test" });
-    const screen = render(MyComponent, {
-      props: { node },
+  test("accesses node id for API calls", async () => {
+    const fetchSpy = vi.fn().mockResolvedValue({ ok: true, json: () => ({}) });
+    vi.stubGlobal("fetch", fetchSpy);
+    const { node, provide } = createNode({ name: "test" });
+    render(MyForm, { global: { provide } });
+    await vi.waitFor(() => {
+      expect(fetchSpy).toHaveBeenCalledWith(`my-api/${node.id}`);
     });
-    await expect.element(screen.getByText("test")).toBeInTheDocument();
   });
 
-  test("calls RED.editor API", async () => {
-    const { node, RED } = createNode();
-    render(MyComponent, { props: { node, value: "" } });
+  test("asserts RED.editor API calls", async () => {
+    const { RED, provide } = createNode();
+    render(MyForm, { global: { provide } });
     expect(RED.editor.createEditor).toHaveBeenCalled();
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonsae/nrg",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "description": "NRG framework — build Node-RED nodes with Vue 3, TypeScript, and JSON Schema",
   "author": "Allan Oricil <allanoricil@duck.com>",
   "license": "MIT",
@@ -51,15 +51,18 @@
       "types": "./types/test-server-unit.d.ts",
       "default": "./test/server/unit/index.js"
     },
+    "./test/server/unit/config": "./test/server/unit/config.js",
     "./test/client/component": {
       "types": "./types/test-client-component.d.ts",
       "default": "./test/client/component/index.js"
     },
+    "./test/client/component/config": "./test/client/component/config.js",
     "./test/client/component/setup": "./test/client/component/setup.js",
     "./test/client/unit": {
       "types": "./types/test-client-unit.d.ts",
       "default": "./test/client/unit/index.js"
     },
+    "./test/client/unit/config": "./test/client/unit/config.js",
     "./test/client/unit/setup": "./test/client/unit/setup.js",
     "./test/client/e2e": {
       "types": "./types/test-client-e2e.d.ts",
@@ -75,7 +78,30 @@
   },
   "peerDependencies": {
     "vite": "^6.0.0",
-    "vue": "^3.5.14"
+    "vitest": "^4.0.0",
+    "vue": "^3.5.14",
+    "@vitest/coverage-istanbul": "^4.0.0",
+    "@vitest/coverage-v8": "^4.0.0",
+    "@vitest/browser-playwright": "^4.0.0",
+    "playwright": "^1.50.0",
+    "vitest-browser-vue": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vitest/coverage-istanbul": {
+      "optional": true
+    },
+    "@vitest/coverage-v8": {
+      "optional": true
+    },
+    "@vitest/browser-playwright": {
+      "optional": true
+    },
+    "playwright": {
+      "optional": true
+    },
+    "vitest-browser-vue": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@clack/prompts": "^1.0.1",
@@ -95,6 +121,10 @@
     "typescript": "^5.8.3",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-static-copy": "^3.1.0",
-    "vue": "^3.5.14"
+    "vue": "^3.5.14",
+    "@vitest/browser-playwright": "^4.1.5",
+    "happy-dom": "^20.10.2",
+    "playwright": "^1.60.0",
+    "vitest-browser-vue": "^2.1.0"
   }
 }

package/test/client/component/config.js

@@ -0,0 +1,37 @@
+// src/test/client/component/config.ts
+import path from "path";
+import vue from "@vitejs/plugin-vue";
+import { playwright } from "@vitest/browser-playwright";
+var defaultConfig = {
+  plugins: [vue()],
+  esbuild: {
+    tsconfigRaw: "{}"
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(process.cwd(), "src"),
+      "@bonsae/nrg/client": "@bonsae/nrg/test/client/component"
+    }
+  },
+  server: {
+    fs: {
+      allow: [".."]
+    }
+  },
+  test: {
+    testTimeout: 3e4,
+    setupFiles: ["@bonsae/nrg/test/client/component/setup"],
+    browser: {
+      enabled: true,
+      instances: [
+        { browser: "chromium" },
+        { browser: "firefox" },
+        { browser: "webkit" }
+      ],
+      provider: playwright()
+    }
+  }
+};
+export {
+  defaultConfig
+};

package/test/client/component/index.js

@@ -190,15 +190,25 @@ function createJQuery() {
   };
 }
 
-// src/test/client/component/index.ts
-var defaultConfig = {
-  testTimeout: 3e4,
-  setupFiles: ["@bonsae/nrg/test/client/component/setup"],
-  browser: {
-    enabled: true,
-    instances: [{ browser: "chromium" }]
+// src/core/client/use-form-node.ts
+import { inject } from "vue";
+function useFormNode() {
+  const node = inject("__nrg_form_node");
+  const schema = inject("__nrg_form_schema");
+  const errors = inject("__nrg_form_errors");
+  if (!node) {
+    throw new Error(
+      "useFormNode() must be called inside a form component mounted by NRG."
+    );
   }
-};
+  return {
+    node,
+    schema,
+    errors
+  };
+}
+
+// src/test/client/component/index.ts
 function createNode(overrides = {}) {
   const node = {
     id: `test-${Math.random().toString(36).slice(2, 10)}`,
@@ -210,7 +220,12 @@ function createNode(overrides = {}) {
   };
   const RED = getMockRED();
   spyOnRED(RED);
-  return { node, RED };
+  const provide = {
+    __nrg_form_node: node,
+    __nrg_form_schema: {},
+    __nrg_form_errors: {}
+  };
+  return { node, RED, provide };
 }
 function spyIfNeeded(obj, method) {
   if (!vi.isMockFunction(obj[method])) {
@@ -240,5 +255,5 @@ export {
   createJQuery,
   createNode,
   createRED,
-  defaultConfig
+  useFormNode
 };

package/test/client/unit/config.js

@@ -0,0 +1,26 @@
+// src/test/client/unit/config.ts
+import path from "path";
+var defaultConfig = {
+  esbuild: {
+    tsconfigRaw: "{}"
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(process.cwd(), "src"),
+      "@bonsae/nrg/client": "@bonsae/nrg/test/client/unit"
+    }
+  },
+  server: {
+    fs: {
+      allow: [".."]
+    }
+  },
+  test: {
+    testTimeout: 3e4,
+    environment: "happy-dom",
+    setupFiles: ["@bonsae/nrg/test/client/unit/setup"]
+  }
+};
+export {
+  defaultConfig
+};

package/test/client/unit/index.js

@@ -187,14 +187,25 @@ function createJQuery() {
   };
 }
 
-// src/test/client/unit/index.ts
-var defaultConfig = {
-  testTimeout: 3e4,
-  environment: "happy-dom",
-  setupFiles: ["@bonsae/nrg/test/client/unit/setup"]
-};
+// src/core/client/use-form-node.ts
+import { inject } from "vue";
+function useFormNode() {
+  const node = inject("__nrg_form_node");
+  const schema = inject("__nrg_form_schema");
+  const errors = inject("__nrg_form_errors");
+  if (!node) {
+    throw new Error(
+      "useFormNode() must be called inside a form component mounted by NRG."
+    );
+  }
+  return {
+    node,
+    schema,
+    errors
+  };
+}
 export {
   createJQuery,
   createRED,
-  defaultConfig
+  useFormNode
 };

package/test/server/unit/config.js

@@ -0,0 +1,15 @@
+// src/test/server/unit/config.ts
+import path from "path";
+var defaultConfig = {
+  resolve: {
+    alias: {
+      "@": path.resolve(process.cwd(), "src")
+    }
+  },
+  test: {
+    testTimeout: 3e4
+  }
+};
+export {
+  defaultConfig
+};

package/types/test-client-component.d.ts

@@ -1,5 +1,8 @@
 // Generated by dts-bundle-generator v9.5.1
 
+import { SchemaOptions, Static, TSchema } from '@sinclair/typebox';
+import { App } from 'vue';
+
 export interface MockEditor {
 	getValue(): string;
 	setValue(val: string): void;
@@ -43,16 +46,92 @@ export interface MockRED {
 }
 export declare function createRED(): MockRED;
 export declare function createJQuery(): (selector: any, attrs?: Record<string, any>) => any;
-export declare const defaultConfig: {
-	testTimeout: number;
-	setupFiles: string[];
-	browser: {
-		enabled: boolean;
-		instances: {
-			browser: string;
-		}[];
+interface NodeRefResolved<T = any> {
+	readonly __nrg_node_ref: true;
+	readonly __instance: T;
+}
+interface NodeRedNodeButtonDefinition {
+	toggle: string;
+	onclick: () => void;
+	enabled?: () => boolean;
+	visible?: () => boolean;
+}
+interface NodeRedNode {
+	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: NodeRedNode) => string) | string;
+		inputs?: number;
+		outputs?: number;
+		paletteLabel?: ((this: NodeRedNode) => string) | string;
+		labelStyle?: ((this: NodeRedNode) => string) | string;
+		inputLabels?: ((this: NodeRedNode, index: number) => string) | string;
+		outputLabels?: ((this: NodeRedNode, index: number) => string) | string;
+		align?: "left" | "right";
+		button?: NodeRedNodeButtonDefinition;
 	};
-};
+	_newState?: NodeRedNode;
+	_app?: App | null;
+	_: (str: string) => string;
+	[key: string]: any;
+}
+interface TypedInputValue {
+	value: string;
+	type: string;
+}
+type _ToClient<T> = T extends NodeRefResolved<any> ? string : T extends {
+	resolve(...args: any[]): any;
+	value: unknown;
+	type: string;
+} ? TypedInputValue : T extends (...args: any[]) => any ? T : T extends Array<infer I> ? _ToClient<I>[] : T extends object ? {
+	[K in keyof T]: _ToClient<T[K]>;
+} : T;
+interface FormNode<TConfig extends TSchema = TSchema, TCredentials extends TSchema = TSchema> {
+	node: NodeRedNode & _ToClient<Static<TConfig>> & {
+		credentials: _ToClient<Static<TCredentials>> & Record<string, any>;
+	};
+	schema: Record<string, any>;
+	errors: Record<string, string>;
+}
+/**
+ * Composable that provides typed access to the form node, schema, and errors.
+ * Replaces `defineProps` in custom form components — no props declaration needed.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { useFormNode } from "@bonsae/nrg/client";
+ * import type { ConfigsSchema, CredentialsSchema } from "../../server/schemas/my-node";
+ *
+ * const { node, errors } = useFormNode<typeof ConfigsSchema, typeof CredentialsSchema>();
+ * node.name      // string — typed from ConfigsSchema
+ * node.credentials.apiKey  // string — typed from CredentialsSchema
+ * </script>
+ * ```
+ */
+export declare function useFormNode<TConfig extends TSchema = TSchema, TCredentials extends TSchema = TSchema>(): FormNode<TConfig, TCredentials>;
 export interface TestNode {
 	id: string;
 	type: string;
@@ -61,9 +140,15 @@ export interface TestNode {
 	_: (key: string) => string;
 	[key: string]: any;
 }
+interface FormProvide {
+	__nrg_form_node: TestNode;
+	__nrg_form_schema: Record<string, any>;
+	__nrg_form_errors: Record<string, string>;
+}
 interface CreateNodeResult {
 	node: TestNode;
 	RED: MockRED;
+	provide: FormProvide;
 }
 export declare function createNode(overrides?: Record<string, any>): CreateNodeResult;
 

package/types/test-client-unit.d.ts

@@ -1,5 +1,8 @@
 // Generated by dts-bundle-generator v9.5.1
 
+import { SchemaOptions, Static, TSchema } from '@sinclair/typebox';
+import { App } from 'vue';
+
 export interface MockEditor {
 	getValue(): string;
 	setValue(val: string): void;
@@ -43,10 +46,91 @@ export interface MockRED {
 }
 export declare function createRED(): MockRED;
 export declare function createJQuery(): (selector: any, attrs?: Record<string, any>) => any;
-export declare const defaultConfig: {
-	testTimeout: number;
-	environment: "happy-dom";
-	setupFiles: string[];
-};
+interface NodeRefResolved<T = any> {
+	readonly __nrg_node_ref: true;
+	readonly __instance: T;
+}
+interface NodeRedNodeButtonDefinition {
+	toggle: string;
+	onclick: () => void;
+	enabled?: () => boolean;
+	visible?: () => boolean;
+}
+interface NodeRedNode {
+	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: NodeRedNode) => string) | string;
+		inputs?: number;
+		outputs?: number;
+		paletteLabel?: ((this: NodeRedNode) => string) | string;
+		labelStyle?: ((this: NodeRedNode) => string) | string;
+		inputLabels?: ((this: NodeRedNode, index: number) => string) | string;
+		outputLabels?: ((this: NodeRedNode, index: number) => string) | string;
+		align?: "left" | "right";
+		button?: NodeRedNodeButtonDefinition;
+	};
+	_newState?: NodeRedNode;
+	_app?: App | null;
+	_: (str: string) => string;
+	[key: string]: any;
+}
+interface TypedInputValue {
+	value: string;
+	type: string;
+}
+type _ToClient<T> = T extends NodeRefResolved<any> ? string : T extends {
+	resolve(...args: any[]): any;
+	value: unknown;
+	type: string;
+} ? TypedInputValue : T extends (...args: any[]) => any ? T : T extends Array<infer I> ? _ToClient<I>[] : T extends object ? {
+	[K in keyof T]: _ToClient<T[K]>;
+} : T;
+interface FormNode<TConfig extends TSchema = TSchema, TCredentials extends TSchema = TSchema> {
+	node: NodeRedNode & _ToClient<Static<TConfig>> & {
+		credentials: _ToClient<Static<TCredentials>> & Record<string, any>;
+	};
+	schema: Record<string, any>;
+	errors: Record<string, string>;
+}
+/**
+ * Composable that provides typed access to the form node, schema, and errors.
+ * Replaces `defineProps` in custom form components — no props declaration needed.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { useFormNode } from "@bonsae/nrg/client";
+ * import type { ConfigsSchema, CredentialsSchema } from "../../server/schemas/my-node";
+ *
+ * const { node, errors } = useFormNode<typeof ConfigsSchema, typeof CredentialsSchema>();
+ * node.name      // string — typed from ConfigsSchema
+ * node.credentials.apiKey  // string — typed from CredentialsSchema
+ * </script>
+ * ```
+ */
+export declare function useFormNode<TConfig extends TSchema = TSchema, TCredentials extends TSchema = TSchema>(): FormNode<TConfig, TCredentials>;
 
 export {};