Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

PLUS-for-Node-RED/node-red-vue-template

Open more actions menu
 
 

Repository files navigation

NPM Version build status

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

Image

💻 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
│   ├── nodes/
│   │   └── node-type.ts
│   ├── index.ts
│   └── tsconfig.json
├── examples/
│   └── flow.json
├── icons/
│   └── icon.png
├── locales/
│   ├── docs/
│   │   └── node-type/
│   │       ├── en-US.html
│   │       └── pt-BR.md
│   └── labels/
│       └── node-type/
│           ├── en-US.json
│           └── pt-BR.json
├── public/
│   └── image.png
├── 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
  +g: string
  +configs: TConfigs
  +credentials: TCredentials
  +constructor(configs: TConfigs)
  +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
}

class IONode {
  <<abstract>>
  +wires: string[][]
  +x: number
  +y: number
  +constructor(configs: TConfigs)
  +onInput(msg, send, done): void | Promise<void>
  +onClose(removed, done): void | Promise<void>
  +close(removed: boolean): Promise<void>
  +context(): Context
  +emit(event: string, ...args: any[]): void
  +on(event: string, callback: (...args: any[]) => void): 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
  -setupEventHandlers()
}

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

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

🤝 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.

Buy Me A Coffee

About

Write Node-RED nodes using Vue and Typescript

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Morty Proxy This is a proxified and sanitized view of the page, visit original site.