node-red-vue-template

[!IMPORTANT] The nrg-cli v3 is going to replace the build script in this repo once this template is fully functional.

Build Node-RED nodes using:

• Vue 3
• JSON Schemas (V7 draft)
• Typescript
• ESM module system

💻 Dev Environment

Dependency	Version
node	v18.18.0
node-red	v4.0.9
pnpm	v10.11.0

📖 Guides

📚 How to build

pnpm install
pnpm build

📚 How to test

After building these nodes, install the ./dist folder to your Node-RED instance:

cd ~/.node-red
npm install $PACKAGE_PATH/dist

🏛️ Architecture

Why ajv + typebox instead of zod?

Ajv is much faster than zod for types and data validations.

https://codetain.com/blog/benchmark-of-node-js-validators/#:~:text=Ajv%20turned%20to%20be%20the,2%20times%20faster%20than%20zod.

Folder Structure

.
├── client/
│   ├── assets/
│   │   └── image.png
│   ├── components/
│   │   └── node-type-form.ue
│   ├── icons/
│   │   └── icon.png
│   ├── nodes/
│   │   └── node-type.ts
│   ├── public/
│   │   └── image.png
│   ├── index.ts
│   └── tsconfig.json
├── examples/
│   └── flow.json
├── locales/
│   ├── docs/
│   │   └── node-type/
│   │       ├── en-US.html
│   │       └── pt-BR.md
│   └── labels/
│       └── node-type/
│           ├── en-US.json
│           └── pt-BR.json
├── schemas/
│   └── node-type.ts
├── server/
│   ├── nodes/
│   │   └── node-type.ts
│   ├── index.ts
│   └── tsconfig.json
├── package.json
└── tsconfig.json

Class Diagram

classDiagram
class Node {
  <<abstract>>
  +id: string
  +type: string
  +name: string
  +z: string
  +configs: TConfigs
  +credentials: TCredentials
  +constructor(configs: TConfigs)
  +close(removed: boolean): Promise<void>
  +on(event: string, callback: (...args: any[]) => void): void
  +onClose(removed, done): void | Promise<void>
  +static init(): void | Promise<void>
  +static getNode<T>(id: string): T | undefined
  +error(logMessage: string, msg: any): void
  +debug(msg: any): void
  +trace(msg: any): void
  +log(msg: any): void
  +warn(msg: any): void
  - registerOnCloseEventHandler(): void
}

class IONode {
  <<abstract>>
  +wires: string[][]
  +x: number
  +y: number
  +g: string
  +constructor(configs: TConfigs)
  *onInput(msg, send, done): void | Promise<void>*
  +context(): Context
  +emit(event: string, ...args: any[]): void
  +receive(msg: TInputMessage): void
  +removeAllListeners(name: string): void
  +removeListener(name: string): void
  +send(msg: TOutputMessage): void
  +updateWires(wires: string[][]): void
  +metric(eventName: string, msg: Message, metricValue: number): boolean | void
  +status(status: object | string): void
  -registerOnInputEventHandler() : void
}

class ConfigNode {
  <<abstract>>
  +users: string[]
  +constructor(configs: TConfigs)
}

IONode --|> Node
ConfigNode --|> Node

[!NOTE] Both ConfigNode and IONode inherit from the Node class, which extends an event emitter. However, the diagram above omits some commonly inherited methods from ConfigNode. These methods are also not shown in IntelliSense, but they are available at runtime since the framework does not alter the core Node class.

🤝 Contributing

I welcome contributions! If you'd like to help improve this template, feel free to open issues or submit pull requests. Your feedback is appreciated.

📜 License

This project is licensed under the MIT License.

💖 Become a Sponsor

If this template has made your life easier, consider supporting its development by clicking the button below.