Merge pull request #437 from shamansir/move-vendor-to-node-modules

Replace /vendor with /node_modules, use`npm install` for dependencies

.flowconfig

@@ -1,8 +1,9 @@
 [version]
-^0.37.4
+^0.38.0
 
 [ignore]
 .*/node_modules/.*/test/.*
+.*/node_modules/.*/tests/.*
 
 [include]
 

.gitignore

@@ -2,7 +2,6 @@
 .idea/
 node_modules/
 dist/
-vendor/
 examples/.pd
 spec/lib
 spec/Runner.html

.travis.yml

@@ -1,11 +1,11 @@
 language: node_js
 node_js:
-    - "0.12"
+    - "7.5.0"
     - "iojs"
 script: npm test
 before_script:
+    - npm install --no-optional
     - npm install -g gulp
-    - gulp get-deps
     - npm install -g flow-bin
     - flow version
 

README.md

@@ -163,11 +163,19 @@ RPD provides following features (though probably I forgot a dozen):
 
 ## Using
 
-See [Setup](http://shamansir.guthub.io/rpd/sections/setup.html) and [Network](http://shamansir.guthub.io/rpd/sections/network.html) sections in Official Documentation.
+See [Setup](http://shamansir.github.io/rpd/sections/setup.html) and [Network](http://shamansir.github.io/rpd/sections/network.html) sections in Official Documentation.
+
+Just as a quick note (detailed descriptions are for the pages mentioned above), RPD is available from NPM since latest versions, so just do:
+
+```sh
+npm install rpd --no-optional
+```
+
+Or, if you plan to run examples locally from `node_modules`, omit the `--no-optional` flag.
 
 ## Participating
 
-See [Participation](http://shamansir.guthub.io/rpd/sections/participate.html) sections in Official Documentation.
+See [Participation](http://shamansir.github.io/rpd/sections/participate.html) sections in Official Documentation.
 
 Feel free to fix issues or do Pull Requests!
 
@@ -188,10 +196,7 @@ Feel free to fix issues or do Pull Requests!
 [kefir]: http://rpominov.github.io/kefir/
 [kefir-src]: http://rpominov.github.io/kefir/dist/kefir.min.js
 [timbre]: http://mohayonao.github.io/timbre.js/
-[timbre-src]: http://mohayonao.github.io/timbre.js/timbre.js
 [animatron]: http://animatron.com
-<!-- [animatron-src]: http://player.animatron.com/latest/bundle/animatron.min.js -->
-[animatron-src]: http://shamansir.github.io/rpd/vendor/anm-player.min.js
 [puredata]: http://puredata.info/
 [closure-compiler]: https://developers.google.com/closure/compiler/
 

docs/sections/setup.md

@@ -12,10 +12,69 @@ RPD with default options can be downloaded here:
 * HTML renderer, Quartz style, no I/O: [`rpd-html.min.js`][default-html-js]  (_~40KB_, _~11KB_ gzipped) + [`rpd-html.css`][default-html-css] (_~10KB_, _~2KB_ gzipped);
 
 You'll also need [Kefir.js][kefir], since RPD code is based on Reactive Streams, which it provides.
-​
 
 But default options restrict your choice, while RPD provides truly a lot more. See [Compilation](#Compilation) section below for details. And you are surely safe to transfer your network code to use it with other options, if you already have one, the only requirement could be is to change few string values.
+
+### NPM
+
+You also may install RPD from NPM and use the unminified sources from `./node_modules/rpd/src` for development, and then use compiled version in production.
+
+So, install the latest RPD with `npm`:
+
+```sh
+$ npm install rpd --no-optional
+```
+​
+To build everything, you'll need `gulp` build tool installed globally:
+
+```sh
+$ npm install -g gulp
+```
+
+And then just use the `gulp html-head` command from `./node_modules/rpd` to get the list of files you need to include in your HTML file to make everything work, like this:
+
+```sh
+$ cd ./node_modules/rpd
+$ gulp html-head --root ./node_modules/rpd
+```
+
+This returns you the default setup (HTML rendering and Quartz style), but there are much more options [described below](#compilation-options). These options may be used both for compilation and to generate `html-head`.
+
+So, to compile your version in one file (actually, two, `./dist/rpd.min.js` and `./dist/rpd.css`), just use:
+
+```sh
+$ gulp # -- here you may pass the same options you used for `html-head`
+```
+
+To get the complete list of commands could be used with `gulp`, use:
+
+```sh
+$ gulp help
+```
 ​
+If you want to run examples, you'll need to install optional dependencies as well, so omit the `--no-optional` flag this time:
+
+```sh
+$ cd <YourProjectDir>
+$ npm install rpd
+$ ls -laF ./node_modules/rpd/examples/
+```
+
+Then just try to open pages under `./examples` directory. If they are still not working, ensure you also have installed optional dependencies like `codemirror`, `p5` etc.
+
+### Clone
+
+You may do the same things as above using Github:
+
+```sh
+$ git clone git@github.com:shamansir/rpd.git
+$ npm install
+$ npm install -g gulp
+$ gulp help
+$ gulp [<..options>] # if you want to compile your custom version
+$ gulp html-head --root <PathToYourClone> [<..options>] # if you want to use unminified sourses
+```
+
 ### Setup
 ​
 To use either downloaded or compiled version of RPD, you need to include three files in a page head:
@@ -55,7 +114,7 @@ To use either downloaded or compiled version of RPD, you need to include three f
 > to build them, so it is always easy to get what is included just by looking
 > inside.
 
-For the local version, paths would be `./dist/rpd.css`, `./vendor/kefir.min.js` and `./dist/rpd.min.js` respectively.
+For the local version, paths would be `./dist/rpd.css`, `./node_modules/kefir/dist/kefir.min.js` and `./dist/rpd.min.js` respectively.
 ​
 To test if it works and see it in action, add the target `div` to the `body` and some code to the bottom of the page:
 ​
@@ -83,7 +142,7 @@ To test if it works and see it in action, add the target `div` to the `body` and
         metro1.outlets['bang'].connect(genA.inlets['bang']);
         metro2.outlets['bang'].connect(genB.inlets['bang']);
     </script>
-</body>    
+</body>
 ```
 
 Detailed instructions on constructing your own Patch Network you may find [in the Network section](./network.html).
@@ -119,6 +178,8 @@ $ gulp help
 ```
 
 There are a lot more options and commands than I describe here, but in contrast with this literary text, `gulp help` provides you with far more bureaucratic style.
+
+Also note
 ​
 Now it's time to use all the powers and to configure your preferences:
 
@@ -127,7 +188,7 @@ Now it's time to use all the powers and to configure your preferences:
     * _`svg`_: renders your Patch using SVG tags;
 * *Styles* (`-s` or `--style`): determines the look of your nodes and backgrounds, see [list of styles below](#styles-and-renderers) or [examples](../examples.htm);
     * _`quartz`_ (HTML & SVG): intended to be used on a full page; default style, normal-sized font, rounded borders for the nodes, connectors are circles, inlets are placed in a vertical column on the left side of the node and distributed over this side, outlets are placed in a vertical column on the right side of the node and distributed over this side;
-    * _`pd`_ (HTML & SVG): intended to be used on a full page; normal-sized font, rectangular nodes, header takes the left connectors are circles, inlets are placed in a horizontal row on the top side of the node, outlets are placed in a horizontal row on the bottom side of the node;   
+    * _`pd`_ (HTML & SVG): intended to be used on a full page; normal-sized font, rectangular nodes, header takes the left connectors are circles, inlets are placed in a horizontal row on the top side of the node, outlets are placed in a horizontal row on the bottom side of the node;
     * _`plain`_ (HTML & SVG): intended to be used on a small areas, most minimal style, majorly in black and white; font size is small, nodes are rectangular, titles do not belong to the nodes, inlets are placed in a horizontal row above the node, outlets are placed in a horizontal row below the node;
     * _`compact`_ (HTML & SVG): intended to be used on a small areas; font size is small, nodes are rectangular, node headers are tiny on the left side or absent, inlets are placed in a horizontal row above the node, outlets are placed in a horizontal row below the node;
     * _`compact-v`_ (SVG only): intended to be used on a small areas; font size is small, nodes are rectangular, node headers are tiny or absent, on the top side, inlets are placed in a vertical column on the right side of the node, outlets are placed in a vertical column on the left side the node;

examples/anm-compact.html

@@ -23,7 +23,7 @@
         <link rel="stylesheet" href="../src/toolkit/anm/html.css"></style>
 
         <!-- Kefir -->
-        <script src="../vendor/kefir.min.js"></script>
+        <script src="../node_modules/kefir/dist/kefir.min.js"></script>
         <!-- RPD's d3_tiny.js -->
         <script src="../src/d3_tiny.js"></script>
         <!-- RPD -->

examples/anm-plain.html

@@ -23,7 +23,7 @@
         <link rel="stylesheet" href="../src/toolkit/anm/html.css"></style>
 
         <!-- Kefir -->
-        <script src="../vendor/kefir.min.js"></script>
+        <script src="../node_modules/kefir/dist/kefir.min.js"></script>
         <!-- RPD's d3_tiny.js -->
         <script src="../src/d3_tiny.js"></script>
         <!-- RPD -->

examples/anm.html

@@ -23,7 +23,7 @@
         <link rel="stylesheet" href="../src/toolkit/anm/html.css"></style>
 
         <!-- Kefir -->
-        <script src="../vendor/kefir.min.js"></script>
+        <script src="../node_modules/kefir/dist/kefir.min.js"></script>
         <!-- RPD's d3_tiny.js -->
         <script src="../src/d3_tiny.js"></script>
         <!-- RPD -->

examples/docs-patch.html

@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8" />
 
-        <script src="../vendor/d3.v3.min.js"></script>
+        <script src="../node_modules/d3/build/d3.min.js"></script>
 
         <!-- Built with RPD v2.0.0 <http://shamansir.github.io/rpd> -->
 
@@ -15,7 +15,7 @@
         <link rel="stylesheet" href="../src/style/compact-v/svg.css"></style>
 
         <!-- Kefir -->
-        <script src="../vendor/kefir.min.js"></script>
+        <script src="../node_modules/kefir/dist/kefir.min.js"></script>
         <!-- RPD's d3_tiny.js -->
         <script src="../src/d3_tiny.js"></script>
         <!-- RPD -->

examples/index-page.html

@@ -16,7 +16,7 @@
         <link rel="stylesheet" href="../src/toolkit/util/html.css"></style>
 
         <!-- Kefir -->
-        <script src="../vendor/kefir.min.js"></script>
+        <script src="../node_modules/kefir/dist/kefir.min.js"></script>
         <!-- RPD's d3_tiny.js -->
         <script src="../src/d3_tiny.js"></script>
         <!-- RPD -->

examples/network.html

@@ -16,7 +16,7 @@
         <link rel="stylesheet" href="../src/toolkit/util/svg.css"></style>
 
         <!-- Kefir -->
-        <script src="../vendor/kefir.min.js"></script>
+        <script src="../node_modules/kefir/dist/kefir.min.js"></script>
         <!-- RPD's d3_tiny.js -->
         <script src="../src/d3_tiny.js"></script>
         <!-- RPD -->

examples/pd-file.html

@@ -21,10 +21,10 @@
 
         <!-- WebPd -->
         <!-- <script src="http://rawgit.com/sebpiq/WebPd/master/dist/webpd-latest.min.js"></script> -->
-        <!-- <script src="../vendor/webpd-latest.min.js"></script> -->
-        <script src="../vendor/webpd-latest.js"></script>
+        <!-- <script src="../node-modules/webpd/dist/webpd-latest.min.js"></script> -->
+        <script src="../node-modules/webpd/dist/webpd-latest.js"></script>
         <!-- Kefir -->
-        <script src="../vendor/kefir.min.js"></script>
+        <script src="../node_modules/kefir/dist/kefir.min.js"></script>
         <!-- RPD's d3_tiny.js -->
         <script src="../src/d3_tiny.js"></script>
         <!-- RPD -->

examples/pd.html

@@ -21,10 +21,10 @@
 
         <!-- WebPd -->
         <!-- <script src="http://rawgit.com/sebpiq/WebPd/master/dist/webpd-latest.min.js"></script> -->
-        <!-- <script src="../vendor/webpd-latest.min.js"></script> -->
-        <script src="../vendor/webpd-latest.js"></script>
+        <!-- <script src="../node-modules/webpd/dist/webpd-latest.min.js"></script> -->
+        <script src="../node-modules/webpd/dist/webpd-latest.js"></script>
         <!-- Kefir -->
-        <script src="../vendor/kefir.min.js"></script>
+        <script src="../node_modules/kefir/dist/kefir.min.js"></script>
         <!-- RPD's d3_tiny.js -->
         <script src="../src/d3_tiny.js"></script>
         <!-- RPD -->

examples/processing-compact-v.html

@@ -15,7 +15,7 @@
         <link rel="stylesheet" href="../src/toolkit/util/svg.css"></style>
 
         <!-- Kefir -->
-        <script src="../vendor/kefir.min.js"></script>
+        <script src="../node_modules/kefir/dist/kefir.min.js"></script>
         <!-- RPD's d3_tiny.js -->
         <script src="../src/d3_tiny.js"></script>
         <!-- RPD -->

examples/processing-compact.html

@@ -15,7 +15,7 @@
         <link rel="stylesheet" href="../src/toolkit/util/svg.css"></style>
 
         <!-- Kefir -->
-        <script src="../vendor/kefir.min.js"></script>
+        <script src="../node_modules/kefir/dist/kefir.min.js"></script>
         <!-- RPD's d3_tiny.js -->
         <script src="../src/d3_tiny.js"></script>
         <!-- RPD -->

examples/processing-plain.html

@@ -15,7 +15,7 @@
         <link rel="stylesheet" href="../src/toolkit/util/svg.css"></style>
 
         <!-- Kefir -->
-        <script src="../vendor/kefir.min.js"></script>
+        <script src="../node_modules/kefir/dist/kefir.min.js"></script>
         <!-- RPD's d3_tiny.js -->
         <script src="../src/d3_tiny.js"></script>
         <!-- RPD -->

examples/processing.html

@@ -15,7 +15,7 @@
         <link rel="stylesheet" href="../src/toolkit/util/html.css"></style>
 
         <!-- Kefir -->
-        <script src="../vendor/kefir.min.js"></script>
+        <script src="../node_modules/kefir/dist/kefir.min.js"></script>
         <!-- RPD's d3_tiny.js -->
         <script src="../src/d3_tiny.js"></script>
         <!-- RPD -->

examples/sandbox.html

@@ -14,10 +14,10 @@
         <!-- RPD Toolkit: util (svg) -->
         <link rel="stylesheet" href="../src/toolkit/util/svg.css"></style>
 
-        <link rel="stylesheet" href="../vendor/codemirror.css"></style>
+        <link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css"></style>
 
         <!-- Kefir -->
-        <script src="../vendor/kefir.min.js"></script>
+        <script src="../node_modules/kefir/dist/kefir.min.js"></script>
         <!-- RPD's d3_tiny.js -->
         <script src="../src/d3_tiny.js"></script>
         <!-- RPD -->
@@ -35,8 +35,8 @@
         <!-- RPD Toolkit: util (svg) -->
         <script src="../src/toolkit/util/svg.js"></script>
 
-        <script src="../vendor/codemirror.js"></script>
-        <script src="../vendor/javascript.min.js"></script>
+        <script src="../node_modules/codemirror/lib/codemirror.js"></script>
+        <script src="../node_modules/codemirror/mode/javascript/javascript.js"></script>
 
         <style>
             body {

examples/timbre.html

@@ -24,7 +24,7 @@
         <!-- Timbre -->
         <script src="http://mohayonao.github.io/timbre.js/timbre.js"></script>
         <!-- Kefir -->
-        <script src="../vendor/kefir.min.js"></script>
+        <script src="../node_modules/kefir/dist/kefir.min.js"></script>
         <!-- RPD's d3_tiny.js -->
         <script src="../src/d3_tiny.js"></script>
         <!-- RPD -->

examples/two-patches.html

@@ -13,9 +13,8 @@
   <!-- RPD Toolkit: util (html) -->
   <link rel="stylesheet" href="../src/toolkit/util/html.css"></style>
 
-
   <!-- Kefir -->
-  <script src="../vendor/kefir.min.js"></script>
+  <script src="../node_modules/kefir/dist/kefir.min.js"></script>
   <!-- RPD's d3_tiny.js -->
   <script src="../src/d3_tiny.js"></script>
   <!-- RPD -->

examples/util-ableton-out.html

@@ -15,7 +15,7 @@
         <link rel="stylesheet" href="../src/toolkit/util/svg.css"></style>
 
         <!-- Kefir -->
-        <script src="../vendor/kefir.min.js"></script>
+        <script src="../node_modules/kefir/dist/kefir.min.js"></script>
         <!-- RPD's d3_tiny.js -->
         <script src="../src/d3_tiny.js"></script>
         <!-- RPD -->

examples/util-ableton.html

@@ -15,7 +15,7 @@
         <link rel="stylesheet" href="../src/toolkit/util/svg.css"></style>
 
         <!-- Kefir -->
-        <script src="../vendor/kefir.min.js"></script>
+        <script src="../node_modules/kefir/dist/kefir.min.js"></script>
         <!-- RPD's d3_tiny.js -->
         <script src="../src/d3_tiny.js"></script>
         <!-- RPD -->

examples/util-black-white.html

@@ -15,7 +15,7 @@
         <link rel="stylesheet" href="../src/toolkit/util/svg.css"></style>
 
         <!-- Kefir -->
-        <script src="../vendor/kefir.min.js"></script>
+        <script src="../node_modules/kefir/dist/kefir.min.js"></script>
         <!-- RPD's d3_tiny.js -->
         <script src="../src/d3_tiny.js"></script>
         <!-- RPD -->

examples/util-blender.html

@@ -15,7 +15,7 @@
         <link rel="stylesheet" href="../src/toolkit/util/svg.css"></style>
 
         <!-- Kefir -->
-        <script src="../vendor/kefir.min.js"></script>
+        <script src="../node_modules/kefir/dist/kefir.min.js"></script>
         <!-- RPD's d3_tiny.js -->
         <script src="../src/d3_tiny.js"></script>
         <!-- RPD -->

examples/util-compact-v.html

@@ -15,7 +15,7 @@
         <link rel="stylesheet" href="../src/toolkit/util/svg.css"></style>
 
         <!-- Kefir -->
-        <script src="../vendor/kefir.min.js"></script>
+        <script src="../node_modules/kefir/dist/kefir.min.js"></script>
         <!-- RPD's d3_tiny.js -->
         <script src="../src/d3_tiny.js"></script>
         <!-- RPD -->

examples/util-svg.html

@@ -15,7 +15,7 @@
         <link rel="stylesheet" href="../src/toolkit/util/svg.css"></style>
 
         <!-- Kefir -->
-        <script src="../vendor/kefir.min.js"></script>
+        <script src="../node_modules/kefir/dist/kefir.min.js"></script>
         <!-- RPD's d3_tiny.js -->
         <script src="../src/d3_tiny.js"></script>
         <!-- RPD -->