From 4e8eb538a3715b4f46d437ce4305d5406c00db37 Mon Sep 17 00:00:00 2001
From: Ulric Wilfred
Date: Fri, 10 Feb 2017 18:46:54 +0100
Subject: [PATCH 1/6] #428 a huge moving from vendor to node_modules, part 1,
not all of the examples successfully moved
---
README.md | 17 +++++---
docs/sections/setup.md | 69 ++++++++++++++++++++++++++++--
examples/anm-compact.html | 2 +-
examples/anm-plain.html | 2 +-
examples/anm.html | 2 +-
examples/docs-patch.html | 4 +-
examples/index-page.html | 2 +-
examples/network.html | 2 +-
examples/pd-file.html | 6 +--
examples/pd.html | 6 +--
examples/processing-compact-v.html | 2 +-
examples/processing-compact.html | 2 +-
examples/processing-plain.html | 2 +-
examples/processing.html | 2 +-
examples/sandbox.html | 8 ++--
examples/timbre.html | 2 +-
examples/two-patches.html | 2 +-
examples/util-ableton-out.html | 2 +-
examples/util-ableton.html | 2 +-
examples/util-black-white.html | 2 +-
examples/util-blender.html | 2 +-
examples/util-compact-v.html | 2 +-
examples/util-svg.html | 2 +-
examples/util.html | 2 +-
examples/visual-history.html | 2 +-
gulpfile.js | 39 +++--------------
package.json | 16 +++++--
spec/Runner.html | 13 +++---
spec/karma.conf.js | 2 +-
29 files changed, 134 insertions(+), 84 deletions(-)
diff --git a/README.md b/README.md
index e977141..e336f3f 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@
-
+
**[Closed Milestones](https://github.com/shamansir/rpd/milestones?state=closed)**
@@ -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://shamansir.github.io/rpd/vendor/anm-player.min.js
[puredata]: http://puredata.info/
[closure-compiler]: https://developers.google.com/closure/compiler/
diff --git a/docs/sections/setup.md b/docs/sections/setup.md
index c174ba4..352aba6 100755
--- a/docs/sections/setup.md
+++ b/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
+$ 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 [<..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']);
-
+
```
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;
diff --git a/examples/anm-compact.html b/examples/anm-compact.html
index 59a7346..1a85de1 100644
--- a/examples/anm-compact.html
+++ b/examples/anm-compact.html
@@ -23,7 +23,7 @@
-
+
diff --git a/examples/anm-plain.html b/examples/anm-plain.html
index df165eb..66b66ed 100644
--- a/examples/anm-plain.html
+++ b/examples/anm-plain.html
@@ -23,7 +23,7 @@
-
+
diff --git a/examples/anm.html b/examples/anm.html
index 5102ce9..5d6128a 100644
--- a/examples/anm.html
+++ b/examples/anm.html
@@ -23,7 +23,7 @@
-
+
diff --git a/examples/docs-patch.html b/examples/docs-patch.html
index 655b71b..78a7d9b 100644
--- a/examples/docs-patch.html
+++ b/examples/docs-patch.html
@@ -3,7 +3,7 @@
-
+
@@ -15,7 +15,7 @@
-
+
diff --git a/examples/index-page.html b/examples/index-page.html
index 54f1237..d3c9e26 100644
--- a/examples/index-page.html
+++ b/examples/index-page.html
@@ -16,7 +16,7 @@
-
+
diff --git a/examples/network.html b/examples/network.html
index 9043182..f076672 100644
--- a/examples/network.html
+++ b/examples/network.html
@@ -16,7 +16,7 @@
-
+
diff --git a/examples/pd-file.html b/examples/pd-file.html
index 8ee6263..7d317d7 100644
--- a/examples/pd-file.html
+++ b/examples/pd-file.html
@@ -21,10 +21,10 @@
-
-
+
+
-
+
diff --git a/examples/pd.html b/examples/pd.html
index e2bce56..974966b 100644
--- a/examples/pd.html
+++ b/examples/pd.html
@@ -21,10 +21,10 @@
-
-
+
+
-
+
diff --git a/examples/processing-compact-v.html b/examples/processing-compact-v.html
index fa68e62..1362658 100644
--- a/examples/processing-compact-v.html
+++ b/examples/processing-compact-v.html
@@ -15,7 +15,7 @@
-
+
diff --git a/examples/processing-compact.html b/examples/processing-compact.html
index 39089da..b771294 100644
--- a/examples/processing-compact.html
+++ b/examples/processing-compact.html
@@ -15,7 +15,7 @@
-
+
diff --git a/examples/processing-plain.html b/examples/processing-plain.html
index 1eca849..72a46a0 100644
--- a/examples/processing-plain.html
+++ b/examples/processing-plain.html
@@ -15,7 +15,7 @@
-
+
diff --git a/examples/processing.html b/examples/processing.html
index f4abdc5..89c5ab3 100644
--- a/examples/processing.html
+++ b/examples/processing.html
@@ -15,7 +15,7 @@
-
+
diff --git a/examples/sandbox.html b/examples/sandbox.html
index 3ccc465..9a715b4 100644
--- a/examples/sandbox.html
+++ b/examples/sandbox.html
@@ -14,10 +14,10 @@
-
+
-
+
@@ -35,8 +35,8 @@
-
-
+
+
-
+
diff --git a/examples/util-ableton.html b/examples/util-ableton.html
index 3b04811..23d17f7 100644
--- a/examples/util-ableton.html
+++ b/examples/util-ableton.html
@@ -15,7 +15,7 @@
-
+
diff --git a/examples/util-black-white.html b/examples/util-black-white.html
index 499bdd4..6abc038 100644
--- a/examples/util-black-white.html
+++ b/examples/util-black-white.html
@@ -15,7 +15,7 @@
-
+
diff --git a/examples/util-blender.html b/examples/util-blender.html
index e5dbbd9..5c307cc 100644
--- a/examples/util-blender.html
+++ b/examples/util-blender.html
@@ -15,7 +15,7 @@
-
+
diff --git a/examples/util-compact-v.html b/examples/util-compact-v.html
index 243f5e2..2a18383 100644
--- a/examples/util-compact-v.html
+++ b/examples/util-compact-v.html
@@ -15,7 +15,7 @@
-
+
diff --git a/examples/util-svg.html b/examples/util-svg.html
index 5a6ad61..d67e1e6 100644
--- a/examples/util-svg.html
+++ b/examples/util-svg.html
@@ -15,7 +15,7 @@
-
+
diff --git a/examples/util.html b/examples/util.html
index 65e372f..390c989 100644
--- a/examples/util.html
+++ b/examples/util.html
@@ -15,7 +15,7 @@
-
+
diff --git a/examples/visual-history.html b/examples/visual-history.html
index d5bbb3d..df845ff 100644
--- a/examples/visual-history.html
+++ b/examples/visual-history.html
@@ -24,7 +24,7 @@
-
+
diff --git a/gulpfile.js b/gulpfile.js
index a50c816..24e4f68 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -6,8 +6,6 @@ var gulp = require('gulp'),
del = require('del'),
concat = require('gulp-concat'),
gzip = require('gulp-gzip'),
- // to get vendor files
- download = require('gulp-download'),
// to build documentation
fs = require('fs'),
rename = require('gulp-rename'),
@@ -24,10 +22,10 @@ var Paths = {
Root: '.',
Destination: './dist',
Src: function() { return Paths.Root + '/src'; },
- Vendor: function() { return Paths.Root + '/vendor'; },
+ NodeModules: function() { return Paths.Root + '/node_modules'; },
Rpd: function() { return Paths.Src() + '/rpd.js'; },
- Kefir: function() { return Paths.Vendor() + '/kefir.min.js'; },
- D3: function() { return Paths.Vendor() + '/d3.min.js'; },
+ Kefir: function() { return Paths.NodeModules() + '/kefir.min.js'; },
+ D3: function() { return Paths.NodeModules() + '/d3.min.js'; },
D3Tiny: function() { return Paths.Src() + '/d3_tiny.js'; },
RenderModel: function() { return Paths.Src() + '/render/shared.js'; },
Renderer: function(renderer) { return Paths.Src() + '/render/' + renderer; },
@@ -48,8 +46,6 @@ var yargs = require('yargs')
.command('help', 'show this message')
.command('build [options]', '(default) compile the RPD library with given options, if specified; all the options listed below are supported')
.command('build-with-gzip [options]', 'additionally to what `build` performs, compile the gzipped version of the library; all the options listed below are supported')
- .command('get-deps', 'download the dependencies (currently only Kefir.js) required for using RPD to `./vendor` directory; may be called only once to get the most recent version of the dependencies')
- .command('get-dev-deps', 'download the development dependencies required for developing with RPD or running the examples to `./vendor` directory; may be called only once to get the most recent version of the dependencies')
.command('test', 'run the Jasmine tests to check if API is consistent (the same command runs on Travis CI)')
.command('list-options [options]', 'get the information for given options, may be used to be sure if you specified all the options correctly without compiling the library; all the options listed below are supported')
.command('html-head [options]', 'get the full list of all the required files with given options to include into HTML file head if you use not the compiled version, but the files from `./src` directly; all the options listed below are supported')
@@ -115,24 +111,9 @@ var Server = require('karma').Server;
var KARMA_CONF_PATH = 'spec/karma.conf.js';
var CLOSURE_COMPILER_PATH = 'node_modules/google-closure-compiler/compiler.jar';
-var DEPENDENCIES = [ 'https://cdn.jsdelivr.net/kefir/3.0.0/kefir.min.js' ];
-
var DOC_HIGHLIGHT_STYLE = 'docco', // default, tomorrow, foundation, github-gist, xcode
DOC_HIGHLIGHT_STYLE_FILENAME = DOC_HIGHLIGHT_STYLE + '.min.css';
-var DEV_DEPENDENCIES = [
- 'https://cdn.jsdelivr.net/kefir/3.3.0/kefir.min.js', // Kefir
- 'http://mohayonao.github.io/timbre.js/timbre.js', // timbre
- 'http://player-dev.animatron.com/latest/bundle/animatron.min.js', // animatron
- 'https://raw.githubusercontent.com/sebpiq/WebPd/master/dist/webpd-latest.min.js', // WebPd
- 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/p5.min.js', // p5
- 'https://d3js.org/d3.v4.min.js', // d3
- 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.15.2/codemirror.js',
- 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.15.2/codemirror.css',
- 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.15.2/mode/javascript/javascript.min.js',
- 'http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/' + DOC_HIGHLIGHT_STYLE_FILENAME // highlight.js style for documentation
- ];
-
var COMPILATION_LEVELS = {
'whitespace': 'WHITESPACE_ONLY',
'simple': 'SIMPLE_OPTIMIZATIONS',
@@ -147,14 +128,6 @@ var valueColor = gutil.colors.yellow,
gulp.task('default', ['build']);
-gulp.task('get-deps', function() {
- download(DEPENDENCIES).pipe(gulp.dest('./vendor'));
-});
-
-gulp.task('get-dev-deps', function() {
- download(DEV_DEPENDENCIES).pipe(gulp.dest('./vendor'));
-});
-
gulp.task('build', ['check-paths', 'list-opts', 'concat-css'], function() {
var targetName = argv['target-name'];
@@ -436,8 +409,8 @@ gulp.task('docs-clean-dir', function() {
});
gulp.task('docs-copy-dependencies', function() {
- var dependencies = ['./vendor/kefir.min.js',
- './vendor/d3.v3.min.js',
+ var dependencies = ['./node_modules/kefir/dist/kefir.min.js',
+ './node_modules/d3/build/d3.min.js',
'./examples/docs-patch.js',
'./dist/rpd-docs.css',
'./dist/rpd-docs.min.js'/*,
@@ -474,6 +447,7 @@ gulp.task('docs-copy-assets', function() {
});
gulp.task('docs-copy-vendor', function() {
+ // FIXME: all vendor files are moved to node_modules now
return gulp.src([ './vendor/*.*' ])
.pipe(gulp.dest('./docs/compiled/vendor'));
});
@@ -510,6 +484,7 @@ gulp.task('docs-copy-root-assets', function() {
});
gulp.task('docs-copy-highlight-css', function() {
+ // FIXME: all vendor files are moved to node_modules now
return gulp.src('./vendor/' + DOC_HIGHLIGHT_STYLE_FILENAME)
.pipe(rename('highlight-js.min.css'))
.pipe(gulp.dest('./docs/compiled/'));
diff --git a/package.json b/package.json
index 94dc14d..a2c0440 100644
--- a/package.json
+++ b/package.json
@@ -29,12 +29,12 @@
],
"main": "./src/rpd.js",
"dependencies": {
- "kefir": "^3.7.0"
+ "kefir": "^3.7.1"
},
"devDependencies": {
"del": "^2.2.0",
- "google-closure-compiler": "^20150901.0.0",
"flow-bin": "^0.37.4",
+ "google-closure-compiler": "^20150901.0.0",
"gulp": "^3.9.0",
"gulp-closure-compiler": "^0.3.0",
"gulp-concat": "^2.6.0",
@@ -50,8 +50,8 @@
"gulp-size": "^2.0.0",
"gulp-util": "^3.0.6",
"gulp-watch": "^4.3.5",
- "highlight.js": "^9.3.0",
- "jasmine-core": "^2.3.4",
+ "jasmine": "^2.5.3",
+ "jasmine-core": "^2.5.2",
"karma": "^0.13.9",
"karma-chrome-launcher": "^0.1.12",
"karma-jasmine": "^0.3.5",
@@ -60,6 +60,14 @@
"through2": "^2.0.0",
"yargs": "^3.25.0"
},
+ "optionalDependencies": {
+ "codemirror": "^5.23.0",
+ "d3": "^4.5.0",
+ "highlight.js": "^9.9.0",
+ "p5": "^0.5.7",
+ "timbre": "^14.11.25",
+ "webpd": "^0.4.2"
+ },
"scripts": {
"test": "gulp test && flow check"
},
diff --git a/spec/Runner.html b/spec/Runner.html
index 5631dbe..a48a374 100644
--- a/spec/Runner.html
+++ b/spec/Runner.html
@@ -4,8 +4,8 @@