From b0e920962beb3b2455a09e981041e1ca95773cfe Mon Sep 17 00:00:00 2001 From: Tom Demulielr--Chevret Date: Thu, 18 Jan 2018 11:24:44 +0100 Subject: [PATCH 1/7] Add instruction to build with Angular CLI --- README.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/README.md b/README.md index 05cf93f1aa9..10aada5d112 100644 --- a/README.md +++ b/README.md @@ -122,6 +122,41 @@ A repo that demonstrates how to build plotly.js with Webpack can be found [here] ... ``` +#### Building plotly.js with Angular CLI + +Currently Angular CLI use Webpack under the hood to bundle and build your Angular application. +Sadly it doesn't allow to override its Webpack config, and therefore to use the plugin mentioned in [Building plotly.js with Webpack](#building-plotly.js-with-webpack). +Without this plugin your build will fail when it tries to build glslify for GLSL plots. + +Currently 2 solutions exists to circumvent this issue : +1) If you need to use GLSL plots, you can create a Webpack config from your Angular CLI projet with [ng eject](https://github.com/angular/angular-cli/wiki/eject). +This will allow you to follow the instructions regarding Webpack. +2) If you don't need to use GLSL plots, you can make a custom build containing only the required modules for your plots. +The clean way to do it with Angular CLI is not the method described in [Modules](#modules) but the following : +```typescript +// in the Component you want to create a graph +import * as Plotly from 'plotly.js'; +``` + +```json +// in src/tsconfig.app.json +... + "compilerOptions": { + ... + "paths": { + "plotly.js": [ + // List here the modules you want to import + // this exemple is enough for scatter plots + "../node_modules/plotly.js/lib/core.js", + "../node_modules/plotly.js/lib/scatter.js" + ] + } + ... + } +... + +``` + ## Bugs and feature requests Have a bug or a feature request? Please first read the [issues guidelines](https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md#opening-issues). From 794a175872a2d2bbb49f917f97c4674ed93163b5 Mon Sep 17 00:00:00 2001 From: Tom Demulielr--Chevret Date: Thu, 18 Jan 2018 11:30:41 +0100 Subject: [PATCH 2/7] Fix inter section link & json example --- README.md | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 10aada5d112..c9d23a52f79 100644 --- a/README.md +++ b/README.md @@ -125,7 +125,7 @@ A repo that demonstrates how to build plotly.js with Webpack can be found [here] #### Building plotly.js with Angular CLI Currently Angular CLI use Webpack under the hood to bundle and build your Angular application. -Sadly it doesn't allow to override its Webpack config, and therefore to use the plugin mentioned in [Building plotly.js with Webpack](#building-plotly.js-with-webpack). +Sadly it doesn't allow to override its Webpack config, and therefore to use the plugin mentioned in [Building plotly.js with Webpack](#building-plotlyjs-with-webpack). Without this plugin your build will fail when it tries to build glslify for GLSL plots. Currently 2 solutions exists to circumvent this issue : @@ -140,21 +140,18 @@ import * as Plotly from 'plotly.js'; ```json // in src/tsconfig.app.json -... +// List here the modules you want to import +// this exemple is for scatter plots +{ "compilerOptions": { - ... "paths": { "plotly.js": [ - // List here the modules you want to import - // this exemple is enough for scatter plots "../node_modules/plotly.js/lib/core.js", "../node_modules/plotly.js/lib/scatter.js" ] } - ... } -... - +} ``` ## Bugs and feature requests From 757a77c1c2bf52df8ee163f86262ef215f5c7e07 Mon Sep 17 00:00:00 2001 From: etienne Date: Wed, 23 May 2018 12:09:42 -0400 Subject: [PATCH 3/7] first cut BUILDING.md file - move webpack instructions to BUILDING.md - move (new) angular cli instruction to BUILDING.md - fixup links - add browserify instructions --- BUILDING.md | 78 +++++++++++++++++++++++++++++++++++++++++++++++++++++ README.md | 52 +++-------------------------------- 2 files changed, 81 insertions(+), 49 deletions(-) create mode 100644 BUILDING.md diff --git a/BUILDING.md b/BUILDING.md new file mode 100644 index 00000000000..0df1ef928ca --- /dev/null +++ b/BUILDING.md @@ -0,0 +1,78 @@ +# Building plotly.js + +## Webpack + +For plotly.js to build with Webpack you will need to install [ify-loader@v1.1.0+](https://github.com/hughsk/ify-loader) and add it to your `webpack.config.json`. This adds Browserify transform compatibility to Webpack which is necessary for some plotly.js dependencies. + +A repo that demonstrates how to build plotly.js with Webpack can be found [here](https://github.com/plotly/plotly-webpack). In short add `ify-loader` to the `module` section in your `webpack.config.js`: + +```js +... + module: { + rules: [ + { + test: /\.js$/, + loader: 'ify-loader' + } + ] + }, +... +``` + +## Browserify + +Given source file: + +```js +// file: index.js + +var Plotly = require('plotly.js'); + +// .... +``` + +then simply run, + + +``` +browserify index.js > bundle.js +``` + +to trim meta information (and thus save a few bytes), run: + + +``` +browserify -t path/to/plotly.js/tasks/util/compress_attributes.js index.js > bundle.js +``` + +## Angular CLI + +Currently Angular CLI use Webpack under the hood to bundle and build your Angular application. +Sadly it doesn't allow to override its Webpack config, and therefore to use the plugin mentioned in the [Webpack](#webpack) section. +Without this plugin your build will fail when it tries to build glslify for WebGL plots. + +Currently 2 solutions exists to circumvent this issue : + +1) If you need to use WebGL plots, you can create a Webpack config from your Angular CLI projet with [ng eject](https://github.com/angular/angular-cli/wiki/eject). This will allow you to follow the instructions regarding Webpack. +2) If you don't need to use WebGL plots, you can make a custom build containing only the required modules for your plots. The clean way to do it with Angular CLI is not the method described in the [Modules]((https://github.com/plotly/plotly.js/blob/master/README.md#modules) section of the README but the following : + +```typescript +// in the Component you want to create a graph +import * as Plotly from 'plotly.js'; +``` + +```json +// in src/tsconfig.app.json +// List here the modules you want to import +// this exemple is for scatter plots +{ + "compilerOptions": { + "paths": { + "plotly.js": [ + "../node_modules/plotly.js/lib/core.js", + "../node_modules/plotly.js/lib/scatter.js" + ] + } + } +} +``` diff --git a/README.md b/README.md index c9d23a52f79..0aa8d193366 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,7 @@ and more. * [Quick start options](#quick-start-options) * [Modules](#modules) +* [Building plotly.js](#building-plotly.js) * [Bugs and feature requests](#bugs-and-feature-requests) * [Documentation](#documentation) * [Contributing](#contributing) @@ -103,56 +104,9 @@ Important: the plotly.js code base contains some non-ascii characters. Therefore ``` +## Building plotly.js -#### Building plotly.js with Webpack - -For plotly.js to build with Webpack you will need to install [ify-loader@v1.1.0+](https://github.com/hughsk/ify-loader) and add it to your `webpack.config.json`. This adds Browserify transform compatibility to Webpack which is necessary for some plotly.js dependencies. - -A repo that demonstrates how to build plotly.js with Webpack can be found [here](https://github.com/rreusser/plotly-webpack). In short add `ify-loader` to the `module` section in your `webpack.config.js`: -```js -... - module: { - rules: [ - { - test: /\.js$/, - loader: 'ify-loader' - } - ] - }, -... -``` - -#### Building plotly.js with Angular CLI - -Currently Angular CLI use Webpack under the hood to bundle and build your Angular application. -Sadly it doesn't allow to override its Webpack config, and therefore to use the plugin mentioned in [Building plotly.js with Webpack](#building-plotlyjs-with-webpack). -Without this plugin your build will fail when it tries to build glslify for GLSL plots. - -Currently 2 solutions exists to circumvent this issue : -1) If you need to use GLSL plots, you can create a Webpack config from your Angular CLI projet with [ng eject](https://github.com/angular/angular-cli/wiki/eject). -This will allow you to follow the instructions regarding Webpack. -2) If you don't need to use GLSL plots, you can make a custom build containing only the required modules for your plots. -The clean way to do it with Angular CLI is not the method described in [Modules](#modules) but the following : -```typescript -// in the Component you want to create a graph -import * as Plotly from 'plotly.js'; -``` - -```json -// in src/tsconfig.app.json -// List here the modules you want to import -// this exemple is for scatter plots -{ - "compilerOptions": { - "paths": { - "plotly.js": [ - "../node_modules/plotly.js/lib/core.js", - "../node_modules/plotly.js/lib/scatter.js" - ] - } - } -} -``` +Building instructions using `webpack`, browserify` and other build frameworks in [`BUILDING.md`](https://github.com/plotly/plotly.js/blob/master/BUILDING.md) ## Bugs and feature requests From 54c2e600435bb70166e070b25cfeccb0d2905581 Mon Sep 17 00:00:00 2001 From: etienne Date: Wed, 23 May 2018 12:16:35 -0400 Subject: [PATCH 4/7] fixups --- BUILDING.md | 2 +- README.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/BUILDING.md b/BUILDING.md index 0df1ef928ca..2282f7120b9 100644 --- a/BUILDING.md +++ b/BUILDING.md @@ -54,7 +54,7 @@ Without this plugin your build will fail when it tries to build glslify for WebG Currently 2 solutions exists to circumvent this issue : 1) If you need to use WebGL plots, you can create a Webpack config from your Angular CLI projet with [ng eject](https://github.com/angular/angular-cli/wiki/eject). This will allow you to follow the instructions regarding Webpack. -2) If you don't need to use WebGL plots, you can make a custom build containing only the required modules for your plots. The clean way to do it with Angular CLI is not the method described in the [Modules]((https://github.com/plotly/plotly.js/blob/master/README.md#modules) section of the README but the following : +2) If you don't need to use WebGL plots, you can make a custom build containing only the required modules for your plots. The clean way to do it with Angular CLI is not the method described in the [Modules](https://github.com/plotly/plotly.js/blob/master/README.md#modules) section of the README but the following : ```typescript // in the Component you want to create a graph diff --git a/README.md b/README.md index 0aa8d193366..b48b8040861 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ and more. * [Quick start options](#quick-start-options) * [Modules](#modules) -* [Building plotly.js](#building-plotly.js) +* [Building plotly.js](##building-plotlyjs) * [Bugs and feature requests](#bugs-and-feature-requests) * [Documentation](#documentation) * [Contributing](#contributing) @@ -106,7 +106,7 @@ Important: the plotly.js code base contains some non-ascii characters. Therefore ## Building plotly.js -Building instructions using `webpack`, browserify` and other build frameworks in [`BUILDING.md`](https://github.com/plotly/plotly.js/blob/master/BUILDING.md) +Building instructions using `webpack`, `browserify` and other build frameworks in [`BUILDING.md`](https://github.com/plotly/plotly.js/blob/master/BUILDING.md) ## Bugs and feature requests From 3cf0c5c6daf3ddb35dac09087cbde53804e935f2 Mon Sep 17 00:00:00 2001 From: etienne Date: Wed, 23 May 2018 12:21:51 -0400 Subject: [PATCH 5/7] add BUILDING.md to lower-case-only whitelist --- tasks/test_syntax.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tasks/test_syntax.js b/tasks/test_syntax.js index 31c2d55b34b..3163322aafb 100644 --- a/tasks/test_syntax.js +++ b/tasks/test_syntax.js @@ -205,6 +205,7 @@ function assertFileNames() { base === 'CONTRIBUTING.md' || base === 'CHANGELOG.md' || base === 'SECURITY.md' || + base === 'BUILDING.md' || file.indexOf('mathjax') !== -1 ) return; From 9199e8ea8191140ca660284d65cf3d29fb9e114e Mon Sep 17 00:00:00 2001 From: alexcjohnson Date: Wed, 23 May 2018 12:35:47 -0400 Subject: [PATCH 6/7] clean up a few typos & style in BUILDING.md --- BUILDING.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/BUILDING.md b/BUILDING.md index 2282f7120b9..639809c394a 100644 --- a/BUILDING.md +++ b/BUILDING.md @@ -47,14 +47,14 @@ browserify -t path/to/plotly.js/tasks/util/compress_attributes.js index.js > bun ## Angular CLI -Currently Angular CLI use Webpack under the hood to bundle and build your Angular application. -Sadly it doesn't allow to override its Webpack config, and therefore to use the plugin mentioned in the [Webpack](#webpack) section. +Currently Angular CLI uses Webpack under the hood to bundle and build your Angular application. +Sadly it doesn't allow you to override its Webpack config in order to add the plugin mentioned in the [Webpack](#webpack) section. Without this plugin your build will fail when it tries to build glslify for WebGL plots. -Currently 2 solutions exists to circumvent this issue : +Currently 2 solutions exists to circumvent this issue: -1) If you need to use WebGL plots, you can create a Webpack config from your Angular CLI projet with [ng eject](https://github.com/angular/angular-cli/wiki/eject). This will allow you to follow the instructions regarding Webpack. -2) If you don't need to use WebGL plots, you can make a custom build containing only the required modules for your plots. The clean way to do it with Angular CLI is not the method described in the [Modules](https://github.com/plotly/plotly.js/blob/master/README.md#modules) section of the README but the following : +1) If you need to use WebGL plots, you can create a Webpack config from your Angular CLI project with [ng eject](https://github.com/angular/angular-cli/wiki/eject). This will allow you to follow the instructions regarding Webpack. +2) If you don't need to use WebGL plots, you can make a custom build containing only the required modules for your plots. The clean way to do it with Angular CLI is not the method described in the [Modules](https://github.com/plotly/plotly.js/blob/master/README.md#modules) section of the README but the following: ```typescript // in the Component you want to create a graph @@ -64,7 +64,7 @@ import * as Plotly from 'plotly.js'; ```json // in src/tsconfig.app.json // List here the modules you want to import -// this exemple is for scatter plots +// this example is for scatter plots { "compilerOptions": { "paths": { From b8e1beaf8da3464c8bf1caa6007deb0a25e9a7a6 Mon Sep 17 00:00:00 2001 From: alexcjohnson Date: Wed, 23 May 2018 12:37:59 -0400 Subject: [PATCH 7/7] update link & style in README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b48b8040861..f1b1e83fe03 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ and more. * [Quick start options](#quick-start-options) * [Modules](#modules) -* [Building plotly.js](##building-plotlyjs) +* [Building plotly.js](#building-plotlyjs) * [Bugs and feature requests](#bugs-and-feature-requests) * [Documentation](#documentation) * [Contributing](#contributing) @@ -106,7 +106,7 @@ Important: the plotly.js code base contains some non-ascii characters. Therefore ## Building plotly.js -Building instructions using `webpack`, `browserify` and other build frameworks in [`BUILDING.md`](https://github.com/plotly/plotly.js/blob/master/BUILDING.md) +Building instructions using `webpack`, `browserify` and other build frameworks are in [`BUILDING.md`](https://github.com/plotly/plotly.js/blob/master/BUILDING.md) ## Bugs and feature requests