noflo via browserify and polymer and react update

mich31 · Aug 4, 2014 · feb7af9 · feb7af9
1 parent adcfa17
commit feb7af9
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 13 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -29,6 +29,19 @@
           command: 'node ./scripts/build-font-awesome-javascript.js '
         }
       },
+      browserify: {
+        libs: {
+          files: {
+            'build/noflo.js': ['index.js'],
+          },
+          options: {
+            transform: ['coffeeify']
+          },
+          browserifyOptions: {
+            require: 'noflo'
+          }
+        }
+      },
       jshint: {
         options: jshintOptions,
         all: {
@@ -104,10 +117,11 @@
     this.loadNpmTasks('grunt-contrib-jshint');
     this.loadNpmTasks('grunt-lint-inline');
     this.loadNpmTasks('grunt-contrib-connect');
+    this.loadNpmTasks('grunt-browserify');
 
     this.registerTask('dev', ['test', 'connect:server', 'watch']);
     this.registerTask('test', ['jshint:all', 'inlinelint:all']);
-    this.registerTask('build', ['exec:build_stylus', 'exec:build_fa']);
+    this.registerTask('build', ['exec:build_stylus', 'exec:build_fa', 'browserify:libs']);
     this.registerTask('default', ['test']);
   };
 

diff --git a/bower.json b/bower.json
@@ -8,11 +8,11 @@
   ],
   "description": "HTML custom elements for dataflow graph editing",
   "dependencies": {
-    "polymer": "Polymer/polymer#0.2.4",
+    "polymer": "Polymer/polymer#0.3.4",
     "hammerjs": "~1.1.2",
     "font-awesome": "~4.1.0",
-    "react": "~0.10.0",
-    "klay-js": "~0.0.8"
+    "react": "~0.11.1",
+    "klay-js": "~0.1.0"
   },
   "license": "MIT",
   "ignore": [

diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "description": "polymer components for flow-based programming graph editing",
   "main": "the-graph-editor/index.html",
   "dependencies": {
+    "noflo": "^0.5.7"
   },
   "devDependencies": {
     "stylus": "~0.42.3",
@@ -12,7 +13,9 @@
     "grunt-contrib-jshint": "~0.6.3",
     "grunt-lint-inline": "~0.3.1",
     "grunt-contrib-watch": "~0.5.3",
-    "grunt-contrib-connect": "~0.5.0"
+    "grunt-contrib-connect": "~0.5.0",
+    "grunt-browserify": "^2.1.4",
+    "coffeeify": "^0.7.0"
   },
   "scripts": {
     "test": "grunt test"

diff --git a/the-graph-editor/demo-simple.html b/the-graph-editor/demo-simple.html
@@ -4,12 +4,14 @@
     <title>Graph Editor Demo</title>
     <meta charset="utf-8">
 
-    <!-- Libraries -->
+    <!-- Bower Libraries -->
     <script src="../bower_components/platform/platform.js"></script>
     <script src="../bower_components/react/react.js"></script>
-    <script src="../bower_components/noflo/browser/noflo.js"></script>
     <script src="../bower_components/klay-js/klay.js"></script>
-    <script src="../bower_components/hammerjs/hammer.js"></script>
+    <script src="../bower_components/hammerjs/hammer.min.js"></script>
+
+    <!-- Browserify Libraries -->
+    <script src="../build/noflo.js"></script>
 
     <!-- Custom elements -->
     <link rel="import" href="../bower_components/polymer/polymer.html">

diff --git a/the-graph-editor/index.html b/the-graph-editor/index.html
@@ -4,12 +4,14 @@
     <title>Graph Editor</title>
     <meta charset="utf-8">
 
-    <!-- Libraries -->
+    <!-- Bower Libraries -->
     <script src="../bower_components/platform/platform.js"></script>
     <script src="../bower_components/react/react.js"></script>
-    <script src="../bower_components/noflo/browser/noflo.js"></script>
     <script src="../bower_components/klay-js/klay.js"></script>
-    <script src="../bower_components/hammerjs/hammer.js"></script>
+    <script src="../bower_components/hammerjs/hammer.min.js"></script>
+
+    <!-- Browserify Libraries -->
+    <script src="../build/noflo.js"></script>
 
     <!-- Custom elements -->
     <link rel="import" href="../bower_components/polymer/polymer.html">

diff --git a/the-graph-editor/the-graph-editor.html b/the-graph-editor/the-graph-editor.html
@@ -197,7 +197,20 @@
           this.nofloGraph = this.graph;
           return;
         }
-        require('noflo').graph.loadJSON(this.graph, function(nofloGraph){
+
+        var noflo;
+        if ('noflo' in window) {
+          noflo = window.noflo;
+        }
+        if (!noflo && 'require' in window) {
+          noflo = require('noflo');
+        }
+        if (!noflo) {
+          console.warn('Missing noflo dependency! Should be built with Component.io or Browserify to require it.');
+          return;
+        }
+
+        noflo.graph.loadJSON(this.graph, function(nofloGraph){
           this.buildInitialLibrary(nofloGraph);
           this.nofloGraph = nofloGraph;
         }.bind(this));

diff --git a/the-graph/the-graph-node.js b/the-graph/the-graph-node.js
@@ -250,7 +250,7 @@
         nextProps.ports !== this.props.ports ||
         nextProps.selected !== this.props.selected ||
         nextProps.highlightPort !== this.props.highlightPort ||
-        nextProps.ports.dirty
+        nextProps.ports.dirty === true
       );
     },
     componentDidUpdate: function (prevProps, prevState) {