Merge pull request flowhub#320 from flowhub/librarify

Move logic from Polymer elements to plain JS files

.gitignore

@@ -2,5 +2,6 @@ bower_components/
 node_modules/
 /.idea
 /build
+/dist
 npm-debug.log
 /spec/*.js

.npmignore

@@ -0,0 +1,3 @@
+/build
+/bower_components
+*.tgz

CHANGES.md

@@ -1,5 +1,14 @@
 ## dev
 
+## 0.7.0 (unreleased)
+
+Breaking changes
+
+* Polymer elements no longer automatically include the neccesary JS files.
+Instead users must include `dist/the-graph.js`, which bundles the needed JavaScript and provides API under `window.TheGraph`.
+The file is included in `the-graph` NPM packages.
+This is preparation for removing the Polymer dependency, instead providing JS APIs and React components.
+
 ## 0.6.0 (2017 January 5)
 
 * Add all dependencies besides Polymer to NPM.

Gruntfile.js

@@ -7,7 +7,7 @@
       "* Copyright (c) <%= grunt.template.today('yyyy') %> <%= pkg.author.name %>; Licensed <%= _.pluck(pkg.licenses, 'type').join(', ') %> */\n";
 
     var sources = {
-      scripts: ['Gruntfile.js', 'the-*/*.js', 'the-*/*.html'],
+      scripts: ['Gruntfile.js', 'the-*/*.js', 'the-*/*.html', 'index.js'],
       // elements: ['the-*/*.html'],
       stylus: ['themes/*/*.styl'],
       css: ['themes/*.css'],
@@ -51,20 +51,20 @@
       browserify: {
         libs: {
           files: {
-            'build/the-graph.js': ['index.js'],
+            'dist/the-graph.js': ['index.js'],
           },
           options: {
-            transform: ['coffeeify']
-          },
-          browserifyOptions: {
-            require: 'noflo'
+            transform: ['coffeeify'],
+            browserifyOptions: {
+              standalone: 'TheGraph'
+            }
           }
         }
       },
       jshint: {
         options: { 
           extract: 'auto',
-          strict: true,
+          strict: false,
           newcap: false,
           "globals": { "Polymer": true }
         },
@@ -88,7 +88,7 @@
       watch: {
         scripts: {
           files: sources.scripts,
-          tasks: ['jshint:force'],
+          tasks: ['jshint:force', 'browserify:libs'],
           options: {
             livereload: true
           }

examples/demo-full.html

@@ -14,7 +14,7 @@
     <script src="../bower_components/react.animate-djdeath/react.animate.js"></script>
 
     <!-- Browserify Libraries -->
-    <script src="../build/the-graph.js"></script>
+    <script src="../dist/the-graph.js"></script>
 
     <!-- Custom elements -->
     <link rel="import" href="../bower_components/polymer/polymer.html">

examples/demo-simple.html

@@ -14,7 +14,7 @@
     <script src="../bower_components/react.animate-djdeath/react.animate.js"></script>
 
     <!-- Browserify Libraries -->
-    <script src="../build/the-graph.js"></script>
+    <script src="../dist/the-graph.js"></script>
 
     <!-- Custom elements -->
     <link rel="import" href="../bower_components/polymer/polymer.html">

examples/demo-thumbnail.html

@@ -4,9 +4,11 @@
     <title>the-graph-thumb documentation</title>
     <meta charset="utf-8">
 
-    <!-- Polymer deps -->
+    <!-- Deps -->
     <script src="../node_modules/webcomponents.js/webcomponents.js"></script>
-    <script src="../build/the-graph.js"></script>
+    <script src="../node_modules/react/dist/react.js"></script>
+    <script src="../node_modules/react-dom/dist/react-dom.js"></script>
+    <script src="../dist/the-graph.js"></script>
 
     <link rel="import" href="../bower_components/polymer/polymer.html">
     <link rel="import" href="../the-graph-thumb/the-graph-thumb.html">

index.js

@@ -1,2 +1,28 @@
 // Build required libs
 fbpGraph = require('fbp-graph');
+
+var g = { TheGraph: {} };
+
+require("./the-graph/the-graph.js").register(g);
+require("./the-graph/the-graph-app.js").register(g);
+require("./the-graph/the-graph-graph.js").register(g);
+require("./the-graph/the-graph-node.js").register(g);
+require("./the-graph/the-graph-node-menu.js").register(g);
+require("./the-graph/the-graph-node-menu-port.js").register(g);
+require("./the-graph/the-graph-node-menu-ports.js").register(g);
+require("./the-graph/the-graph-port.js").register(g);
+require("./the-graph/the-graph-edge.js").register(g);
+require("./the-graph/the-graph-iip.js").register(g);
+require("./the-graph/the-graph-group.js").register(g);
+require("./the-graph/the-graph-tooltip.js").register(g);
+require("./the-graph/the-graph-menu.js").register(g);
+require("./the-graph/the-graph-clipboard.js").register(g);
+require("./the-graph/font-awesome-unicode-map.js").register(g);
+
+g.TheGraph.thumb = require('./the-graph-thumb/the-graph-thumb.js');
+g.TheGraph.nav = require('./the-graph-nav/the-graph-nav.js');
+g.TheGraph.autolayout = require('./the-graph/the-graph-autolayout.js');
+g.TheGraph.library = require('./the-graph/the-graph-library.js');
+g.TheGraph.editor = require('./the-graph-editor/the-graph-editor.js');
+
+module.exports = g.TheGraph;

package.json

@@ -4,7 +4,7 @@
   "description": "flow-based programming graph editing",
   "author": "Forrest Oliphant, the Grid",
   "license": "MIT",
-  "main": "the-graph-editor/index.html",
+  "main": "index.js",
   "dependencies": {
     "fbp-graph": "^0.1.0",
     "font-awesome": "^4.6.3",

scripts/build-font-awesome-javascript.js

@@ -26,10 +26,10 @@ var generateFile = function (err, data) {
   });
 
   var output = "/*\n  this file is generated via `grunt build` \n*/\n\n"+
-    "(function (context) {\n"+
-    "\"use strict\";\n\n"+
+    "module.exports.register = function (context) {\n"+
+    "\n"+
     "context.TheGraph.FONT_AWESOME = "+JSON.stringify(icons, null, 2)+";\n\n"+
-    "})(this);";
+    "};";
 
   fs.writeFile(__dirname+'/../the-graph/font-awesome-unicode-map.js', output, function (err) {
     if (err) {
@@ -39,4 +39,4 @@ var generateFile = function (err, data) {
   });
 };
 
-fs.readFile( __dirname+'/../node_modules/font-awesome/less/variables.less', 'utf8', generateFile );
+fs.readFile( __dirname+'/../node_modules/font-awesome/less/variables.less', 'utf8', generateFile);

spec/runner.html

@@ -15,7 +15,7 @@
     <script src="../bower_components/react.animate-djdeath/react.animate.js"></script>
 
     <!-- Browserify Libraries -->
-    <script src="../build/the-graph.js"></script>
+    <script src="../dist/the-graph.js"></script>
 
     <!-- Custom elements -->
     <link rel="import" href="../bower_components/polymer/polymer.html">