Merge pull request finos#295 from jpmorganchase/worker-loader

Worker loader
qj · Nov 7, 2018 · 0b9a316 · 0b9a316
2 parents a25eabd + 0594ff0
commit 0b9a316
Show file tree

Hide file tree

Showing 49 changed files with 826 additions and 569 deletions.
diff --git a/.gitignore b/.gitignore
@@ -121,4 +121,5 @@ website/static/css/material.dark.css
 
 # CPP Compile
 /include/boost
-obj
+obj
+packages/perspective/es5
diff --git a/docs/installation.md b/docs/installation.md
@@ -15,10 +15,25 @@ after detecting whether or not WebAssembly is supported by your browser. The
 assets can be found in the `build/` directory of the
 `@jpmorganchase/perspective` and `@jpmorganchase/perspective-viewer` packages.
 
-This can be achieved by using the built-in `WorkerHost` Node.js server, hosting
-the contents of a packages `build/` in your application's build script, using
-`webpack` and `CopyWebpackPlugin`, or otherwise making sure these directories
-are visible to your web server, e.g.:
+When importing from NPM modules, you can use the Perspective Webpack plugin to
+manage the `.worker.*.js` and `.wasm` assets for you. A sample config:
+
+```javascript
+const PerspectivePlugin = require("@jpmorganchase/perspective/webpack-plugin");
+
+module.exports = {
+    entry: "./in.js",
+    output: {
+        filename: "out.js",
+        path: "build"
+    },
+    plugins: [new PerspectivePlugin()]
+};
+```
+
+Alternatively, you may use the built-in `WorkerHost` Node.js server, host
+the contents of a package's `build/` in your application's build script, or
+otherwise making sure these directories are visible to your web server, e.g.:
 
 ```javascript
 cp -r node_modules/@jpmorganchase/perspective/build my_build/assets/

diff --git a/docs/usage.md b/docs/usage.md
@@ -135,7 +135,7 @@ Hence, there is no `worker()` method, and the module object itself directly
 exports the full `perspective` API.
 
 ```javascript
-const perspective = require("@jpmorganchase/perspective/build/perspective.node.js");
+const perspective = require("@jpmorganchase/perspective");
 ```
 
 ### Loading data with `table()`

diff --git a/examples/git_history/server.js b/examples/git_history/server.js
@@ -7,7 +7,7 @@
  *
  */
 
-const {WebSocketHost} = require("@jpmorganchase/perspective/build/perspective.node.js");
+const {WebSocketHost} = require("@jpmorganchase/perspective");
 const exec = require("child_process").exec;
 
 function execute(command, callback) {

diff --git a/examples/simple/server.js b/examples/simple/server.js
@@ -7,5 +7,5 @@
  *
  */
 
-const {WebSocketHost} = require("@jpmorganchase/perspective/build/perspective.node.js");
+const {WebSocketHost} = require("@jpmorganchase/perspective");
 new WebSocketHost({assets: [__dirname]});
diff --git a/...es/perspective-jupyterlab/src/js/embed.js → examples/webpack/in.js b/...es/perspective-jupyterlab/src/js/embed.js → examples/webpack/in.js
@@ -7,8 +7,7 @@
  *
  */
 
-import worker from "worker-loader?inline=true&fallback=false!@jpmorganchase/perspective/src/js/perspective.wasm.js";
-import buffer from "arraybuffer-loader!@jpmorganchase/perspective/build/psp.async.wasm";
+const perspective = require("@jpmorganchase/perspective").default;
 
-window.__PSP_WORKER__ = worker;
-window.__PSP_WASM__ = buffer;
+const table = perspective.worker().table([{x: 1}]);
+table.view().to_json(console.log);
diff --git a/examples/webpack/package.json b/examples/webpack/package.json
@@ -0,0 +1,15 @@
+{
+    "name": "webpack",
+    "private": true,
+    "version": "0.2.3",
+    "description": "An example of using the Perspective Webpack plugin to build a JS file with Webpack.",
+    "scripts": {
+        "start": "node server.js",
+        "webpack": "webpack --config webpack.config.js --color"
+    },
+    "keywords": [],
+    "license": "Apache-2.0",
+    "dependencies": {
+        "@jpmorganchase/perspective": "^0.2.3"
+    }
+}
diff --git a/examples/webpack/webpack.config.js b/examples/webpack/webpack.config.js
@@ -0,0 +1,24 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2017, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+const PerspectivePlugin = require("@jpmorganchase/perspective/webpack-plugin");
+const path = require("path");
+
+module.exports = {
+    entry: "./in.js",
+    output: {
+        filename: "out.js",
+        library: "out",
+        libraryTarget: "umd",
+        libraryExport: "default",
+        path: path.resolve(__dirname, "./build")
+    },
+    plugins: [new PerspectivePlugin()],
+    devtool: "source-map"
+};
diff --git a/package.json b/package.json
@@ -1,16 +1,50 @@
 {
     "devDependencies": {
+        "@apache-arrow/es5-esm": "^0.3.1",
+        "@webpack-contrib/schema-utils": "^1.0.0-beta.0",
+        "arraybuffer-loader": "^1.0.2",
+        "babel-cli": "^6.26.0",
+        "babel-core": "^6.26.0",
         "babel-eslint": "^8.2.3",
+        "babel-loader": "^7.1.2",
+        "babel-plugin-transform-custom-element-classes": "^0.1.0",
+        "babel-plugin-transform-decorators-legacy": "^1.3.4",
+        "babel-plugin-transform-es2015-for-of": "^6.23.0",
+        "babel-plugin-transform-runtime": "^6.23.0",
+        "babel-polyfill": "^6.26.0",
+        "babel-preset-env": "^1.6.0",
+        "chart.js": "^2.7.1",
+        "clean-css-cli": "4.2.1",
+        "clean-css-loader": "^1.1.0",
+        "codemirror": "^5.30.0",
+        "codemirror-javascript": "^0.2.0",
+        "core-js": "^2.5.7",
+        "css-loader": "^0.28.7",
+        "documentation": "^5.3.3",
         "eslint": "^4.19.1",
         "eslint-config-prettier": "^3.0.1",
         "eslint-plugin-prettier": "^2.6.2",
+        "file-loader": "^2.0.0",
+        "html-loader": "^0.5.1",
+        "jasmine": "^2.8.0",
+        "jasmine-core": "^2.8.0",
+        "jest": "^22.0.4",
         "js-beautify": "^1.8.6",
         "lerna": "^2.11.0",
+        "less": "^2.7.2",
+        "less-loader": "^4.0.5",
         "minimist": "^1.2.0",
         "mkdirp": "^0.5.1",
+        "npm-run-all": "^4.1.3",
         "pre-commit": "^1.2.2",
         "prettier": "^1.14.2",
-        "rimraf": "^2.6.2"
+        "rimraf": "^2.6.2",
+        "style-loader": "^0.18.2",
+        "ts-loader": "^3.5.0",
+        "typescript": "~2.9.2",
+        "uglifyjs-webpack-plugin": "^0.4.6",
+        "webpack": "^3.5.6",
+        "worker-loader": "^2.0.0"
     },
     "pre-commit": [
         "precommit"

diff --git a/packages/perspective-jupyterlab/package.json b/packages/perspective-jupyterlab/package.json
@@ -43,30 +43,6 @@
         "@types/socket.io-client": "^1.4.0",
         "socket.io": "2.0.3"
     },
-    "devDependencies": {
-        "arraybuffer-loader": "^1.0.2",
-        "babel-core": "^6.26.0",
-        "babel-loader": "^7.1.2",
-        "babel-plugin-transform-custom-element-classes": "^0.1.0",
-        "babel-plugin-transform-es2015-for-of": "^6.23.0",
-        "babel-plugin-transform-promise-to-bluebird": "^1.1.1",
-        "babel-plugin-transform-runtime": "^6.23.0",
-        "babel-polyfill": "^6.26.0",
-        "babel-preset-env": "^1.6.0",
-        "css-loader": "^0.28.7",
-        "documentation": "^5.3.3",
-        "html-loader": "^0.5.1",
-        "jest": "^22.0.4",
-        "less": "^2.7.2",
-        "less-loader": "^4.0.5",
-        "rimraf": "^2.6.2",
-        "style-loader": "^0.18.2",
-        "ts-loader": "^3.5.0",
-        "typescript": "~2.9.2",
-        "uglifyjs-webpack-plugin": "^0.4.6",
-        "webpack": "^3.5.6",
-        "worker-loader": "~1.1.1"
-    },
     "jupyterlab": {
         "extension": "build/index.js"
     }

diff --git a/packages/perspective-jupyterlab/src/config/mimerenderer.config.js b/packages/perspective-jupyterlab/src/config/mimerenderer.config.js
@@ -10,30 +10,21 @@
 const path = require("path");
 const common = require("@jpmorganchase/perspective/src/config/common.config.js");
 
-const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
-const webpack = require("webpack");
-
-const plugins = [new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /(en|es|fr)$/)];
-
-if (!process.env.PSP_NO_MINIFY && !process.env.PSP_DEBUG) {
-    plugins.push(
-        new UglifyJSPlugin({
-            sourceMap: false,
-            mangle: false,
-            output: {
-                ascii_only: true
-            }
-        })
-    );
-}
 module.exports = Object.assign({}, common(), {
     entry: "./src/ts/mimerenderer.ts",
-    plugins: plugins,
+    module: {
+        rules: [
+            {
+                test: /\.css$/,
+                exclude: ["@jpmorganchase"],
+                use: [{loader: "css-loader"}]
+            },
+            {test: /\.ts?$/, loader: "ts-loader"}
+        ]
+    },
     output: {
         filename: "mime.js",
         libraryTarget: "umd",
         path: path.resolve(__dirname, "../../build")
     }
 });
-
-module.exports.module.rules.push({test: /\.ts?$/, loader: "ts-loader"});
diff --git a/packages/perspective-jupyterlab/src/config/plugin.config.js b/packages/perspective-jupyterlab/src/config/plugin.config.js
@@ -8,33 +8,25 @@
  */
 
 const path = require("path");
-const common = require("@jpmorganchase/perspective/src/config/common.config.js");
-
-const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
+const PerspectivePlugin = require("@jpmorganchase/perspective/webpack-plugin");
 const webpack = require("webpack");
 
-const plugins = [new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /(en|es|fr)$/)];
-
-if (!process.env.PSP_NO_MINIFY && !process.env.PSP_DEBUG) {
-    plugins.push(
-        new UglifyJSPlugin({
-            sourceMap: true,
-            mangle: false,
-            output: {
-                ascii_only: true
-            }
-        })
-    );
-}
-module.exports = Object.assign({}, common(), {
+module.exports = {
     entry: "./src/ts/index.ts",
-    plugins: plugins,
     externals: ["@jupyter-widgets/base"],
+    plugins: [new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /(en|es|fr)$/), new PerspectivePlugin()],
+    module: {
+        rules: [
+            {
+                test: /\.css$/,
+                use: [{loader: "css-loader"}]
+            },
+            {test: /\.ts?$/, loader: "ts-loader"}
+        ]
+    },
     output: {
         filename: "index.js",
         libraryTarget: "umd",
         path: path.resolve(__dirname, "../../build")
     }
-});
-
-module.exports.module.rules.push({test: /\.ts?$/, loader: "ts-loader"});
+};
diff --git a/packages/perspective-jupyterlab/src/ts/widget.ts b/packages/perspective-jupyterlab/src/ts/widget.ts
@@ -27,9 +27,6 @@ import "@jpmorganchase/perspective-viewer";
 import "@jpmorganchase/perspective-viewer-hypergrid";
 import "@jpmorganchase/perspective-viewer-highcharts";
 
-/* embed wasm */
-import "../js/embed.js";
-
 /* css */
 import '../less/material.less';
 

diff --git a/packages/perspective-viewer-highcharts/package.json b/packages/perspective-viewer-highcharts/package.json
@@ -2,21 +2,39 @@
     "name": "@jpmorganchase/perspective-viewer-highcharts",
     "version": "0.2.3",
     "description": "Perspective.js",
-    "main": "build/highcharts.plugin.cjs.js",
-    "directories": {
-        "test": "test"
-    },
+    "main": "src/js/highcharts.js",
     "files": [
-        "src/*",
-        "build/*"
+        "build/**/*",
+        "src/**/*"
     ],
+    "babel": {
+        "ignore": ["test"],
+        "presets": [
+            [
+                "env",
+                {
+                    "useBuiltIns": true
+                }
+            ]
+        ],
+        "plugins": [
+            "transform-decorators-legacy",
+            "transform-custom-element-classes",
+            "transform-runtime",
+            "transform-object-rest-spread",
+            [
+                "transform-es2015-for-of",
+                {
+                    "loose": true
+                }
+            ]
+        ]
+    },
     "scripts": {
         "bench": "npm-run-all bench:build bench:run",
         "bench:build": "echo \"No Benchmarks\"",
         "bench:run": "echo \"No Benchmarks\"",
-        "build:highcharts": "webpack --color --config src/config/highcharts.plugin.config.js",
-        "build:cjs": "webpack --color --config src/config/highcharts.plugin.cjs.config.js",
-        "build": "npm-run-all build:*",
+        "build": "webpack --color --config src/config/highcharts.plugin.config.js",
         "test:build": "cp test/html/* build",
         "watch": "webpack --color --watch --config src/config/highcharts.plugin.config.js",
         "test:run": "jest --silent --color 2>&1",
@@ -49,22 +67,5 @@
         "highcharts": "6.1.0",
         "highcharts-grouped-categories": "1.1.2",
         "highcharts-more": "^0.1.2"
-    },
-    "devDependencies": {
-        "babel-core": "^6.26.0",
-        "babel-loader": "^7.1.2",
-        "babel-plugin-transform-custom-element-classes": "^0.1.0",
-        "babel-plugin-transform-es2015-for-of": "^6.23.0",
-        "babel-plugin-transform-runtime": "^6.23.0",
-        "babel-polyfill": "^6.26.0",
-        "babel-preset-env": "^1.6.0",
-        "css-loader": "^0.28.7",
-        "html-loader": "^0.5.1",
-        "jest": "^22.0.4",
-        "less": "^2.7.2",
-        "less-loader": "^4.0.5",
-        "style-loader": "^0.18.2",
-        "uglifyjs-webpack-plugin": "^0.4.6",
-        "webpack": "^3.5.6"
     }
 }
diff --git a/packages/perspective-viewer-highcharts/src/config/highcharts.plugin.cjs.config.js b/packages/perspective-viewer-highcharts/src/config/highcharts.plugin.cjs.config.js
diff --git a/packages/perspective-viewer-highcharts/src/js/draw.js b/packages/perspective-viewer-highcharts/src/js/draw.js
@@ -16,7 +16,8 @@ import {COLORS_10, COLORS_20} from "./externals.js";
 import {color_axis} from "./color_axis.js";
 import {make_tree_data, make_y_data, make_xy_data, make_xyz_data, make_xy_column_data} from "./series.js";
 import {set_boost, set_category_axis, set_both_axis, default_config, set_tick_size} from "./config.js";
-import {bindTemplate, detectIE} from "../../../perspective-viewer/src/js/utils";
+import {bindTemplate} from "@jpmorganchase/perspective-viewer/src/js/utils";
+import {detectIE} from "@jpmorganchase/perspective/src/js/utils";
 
 export const PRIVATE = Symbol("Highcharts private");