Last active
April 8, 2016 21:12
-
-
Save gabejohnson/e1edacafba2133a86f3773fe6a116260 to your computer and use it in GitHub Desktop.
This gist demonstrates a pattern for using es2015 in the authoring of https://github.com/node-red/node-red nodes. It also contains a gulpfile to build and deploy nodes to a user folder and restart the node-red server. It currently requires the 0.14.0 branch of node-red for proper inheritance.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
title file |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
RED.nodes.registerType('example node',{ | |
category: 'output', | |
color:"rgb(100,100,200)", | |
defaults: { | |
name: {value: ""} | |
}, | |
inputs:1, | |
outputs:1, | |
icon: "white-globe.png", | |
label() { return this. name|| "Example Node"; }, | |
labelStyle() { return this.name ? "node_label_italic" : ""; } | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script type="text/x-red" data-template-name="example node"> | |
<div class="form-row"> | |
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"> Name</span></label> | |
<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name"> | |
</div> | |
</script> | |
<script type="text/javascript" src="browser-node.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { ExampleSuperNode } from "./example-super"; | |
module.exports = function({ nodes, settings, _ }) { | |
class ExampleNode extends ExampleSuperNode { | |
constructor(n) {; | |
super({ nodes }, n); | |
this.name = `i'm customizing this name`; | |
} | |
onInput(msg) { | |
msg.payload.exampleData = "example data"; | |
super.onInput(msg); | |
} | |
} | |
nodes.registerType("example node", ExampleNode, {}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// have to pass 'nodes' into the constructor as we can't require node-red here | |
// it wouldn't necessarily be the same version as the server's version | |
export class ExampleSuperNode { | |
constructor({ nodes }, n, propsToCopy) { | |
nodes.createNode(this, n); | |
const { name="Default Name" } = n; | |
Object.assign(this,{ name }, propsToCopy); | |
this.on('input', this.onInput); | |
} | |
onInput(msg) { | |
this.send(msg) | |
} | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var gulp = require('gulp'), | |
install = require('gulp-install'), | |
babel = require('gulp-babel'), | |
inline = require('gulp-inline'), | |
spawn = require('child_process').spawn, | |
fs = require('fs'), | |
homeDir = require('os').homedir(), | |
node; | |
var nodeSrc = 'nodes/', | |
dest = homeDir + '/.node-red'; | |
gulp.task('create-user-folder', function() { | |
try { | |
var stats = fs.statSync(dest); | |
} catch(e) { | |
fs.mkdirSync(dest); | |
fs.mkdirSync(dest+'/nodes'); | |
} | |
}); | |
gulp.task('inject-js', function() { | |
return gulp.src([nodeSrc+'**/*.html', '!'+nodeSrc+'node_modules{,/**}'], {base: './'}) | |
.pipe(inline({ | |
base: './nodes/', | |
js: babel | |
})) | |
.pipe(gulp.dest(dest)); | |
}); | |
gulp.task('process-server-nodes', function() { | |
return gulp.src([nodeSrc+'/**/*.js', '!'+nodeSrc+'**/browser-node.js', '!'+nodeSrc+'/node_modules{,/**}'], {base: './'}) | |
.pipe(babel()) | |
.pipe(gulp.dest(dest)); | |
}); | |
gulp.task('install-dependencies',['copy-package-json'], function() { | |
return gulp.src(dest + '/nodes/package.json', {base: './'}) | |
.pipe(install()); | |
}); | |
gulp.task('copy-package-json', function() { | |
return gulp.src([nodeSrc+'package.json'], {base: './nodes'}) | |
.pipe(gulp.dest(dest + '/nodes')); | |
}); | |
gulp.task('copy-settings', function() { | |
return gulp.src('./settings.js') | |
.pipe(gulp.dest(dest)); | |
}); | |
gulp.task('watch-settings', ['copy-settings'], function () { | |
return gulp.watch('settings.js',function(stream) { | |
if(stream.type === 'changed') { | |
gulp.src(stream.path, {base: './'}) | |
.pipe(gulp.dest(dest)); | |
} | |
}); | |
}); | |
gulp.task('watch-server-nodes', ['process-server-nodes'], function() { | |
return gulp.watch([nodeSrc+'**/*.js', '!'+nodeSrc+'**/browser-node.js', '!'+nodeSrc+'node_modules{,/**}'], function(stream) { | |
if(stream.type === 'changed') { | |
gulp.src(stream.path, {base: './'}) | |
.pipe(babel()) | |
.pipe(gulp.dest(dest)); | |
} | |
}); | |
}); | |
gulp.task('watch-html', ['inject-js'], function() { | |
return gulp.watch([nodeSrc+'**/*.html', '!'+nodeSrc+'**/node_modules{,/**}'], function(stream) { | |
if(stream.type === 'changed') { | |
gulp.src(stream.path, {base: './'}) | |
.pipe(inline({ | |
base: './nodes/', | |
js: babel | |
})) | |
.pipe(gulp.dest(dest)); | |
} | |
}); | |
}); | |
gulp.task('watch-browser-nodes', ['inject-js'], function() { | |
return gulp.watch(nodeSrc+'**/browser-node.js', function(stream) { | |
if(stream.type === 'changed') { | |
gulp.src(stream.path.replace('browser-node.js', '*.html'), {base: './'}) | |
.pipe(inline({ | |
base: './nodes/', | |
js: babel | |
})) | |
.pipe(gulp.dest(dest)); | |
} | |
}); | |
}); | |
function restartNodeRed() { | |
if(node) { | |
node.kill(); | |
} | |
node = spawn('node', ['./node_modules/node-red/red.js', '-v'], {stdio: 'inherit'}); | |
node.on('exit', function(code,signal) { | |
if(code === 8) { | |
gulp.log('Error detected, waiting for changes...'); | |
} | |
}); | |
} | |
gulp.task('node-red', restartNodeRed); | |
gulp.task('init', ['make-user-folder', 'copy-package-json', 'install-dependencies', 'process-server-nodes', 'inject-js', 'copy-settings']); | |
gulp.task('dev-prep' ,['copy-package-json', 'install-dependencies']); | |
gulp.task('dev', ['watch-server-nodes', | |
'watch-browser-nodes', | |
'watch-html', | |
'watch-style', | |
'watch-settings'], function() { | |
restartNodeRed(); | |
return gulp.watch(dest + '/nodes/**/*.{js,html}', function(e) { | |
restartNodeRed(); | |
}); | |
}); | |
process.on('exit', function() { | |
if(node) node.kill(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment