Hello everyone,
SIR is here to help you creating node editors more easily. If you ever struggled with the HTML part of a node's editor and with all the jQuery stuff, you may want to take a closer look at SIR:
SIR integrates Svelte into Node-RED and allows to write the editor-part of your node using Svelte templates. Svelte itself is thereby only needed during development - anyone using your node will only use the generated HTML file.
Especially for editors that change dynamically or that have computed properties, life gets a lot easier. Or if you want to extract parts of your editor as reusable components: SIR will take care of it.
Creating an input and binding it's value to your node's property is as easy as this:
<script context="module">
RED.nodes.registerType("test-node", {
// Node definitions like category, inputs, outputs, color, label, etc. go here as always
defaults: {
name: { value: "", label: "Name" } // Set the label of your property directly in the defaults
},
// Some boilerplate that is needed to handle the editor lifecycle.
// Anyway, you won't have to deal with anything else here: everything dynamic
// is done directly in the Svelte template.
oneditprepare: function () {
render(this)
},
oneditsave: function () {
update(this)
},
oneditcancel: function () {
revert(this)
}
});
</script>
<script>
export let node
// Import the components you need.
// Many more are available like EditableList, TypedInput, Group, Collapsible, etc.
import { Input } from 'svelte-integration-red/components'
</script>
<!-- Adding an input is as easy as that: -->
<Input bind:node prop="name" />
<!-- That's it. Everything else is handled by SIR. -->
The documentation part is done in an extra file with a .doc.html extension. This separation of concerns helps maintaining a neat project structure.
A simple sir from within your project's root directory now starts the compilation process and you will get an .html file that conforms to Node-RED's specification.
Interested? Take a look at the project's home page on Gitlab for more details.
Warning: SIR is still a work in progress. It is already basically usable, but things may change unexpectedly. Furthermore important things like i8n-support or validation are not yet implemented. Feel free to play with it and if you like it, keep an eye on the project: The missing parts will sooner or later arrive.
I hope you like SIR. Feedback is welcome.
Cheers
Chris
The compiler approach of Svelte is great though it makes things a bit more complicated for frameworks like uibuilder. Anyway, you could think of an automatic build as soon as a Svelte template gets copied over. In that case frameworks like rollup or snowpack could be very helpful. The latter is what I want to build upon with the next release of pekfinger-RED.
