Skip to content

NPM pkg for dist bundles #2670

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Jul 5, 2018
Merged

NPM pkg for dist bundles #2670

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
e20dbbd
add 'sync packages' tasks that create pkg
etpinard May 25, 2018
b3480f7
run 'sync packages' tasks as postpublish step
etpinard May 25, 2018
a1238e7
touch up sync_packages.js
etpinard May 30, 2018
e40b369
adapt README and BUILDING for 'sub' npm pacakges
etpinard May 30, 2018
c731350
adapt item about build/ in CONTRIBUTING
etpinard May 30, 2018
0a5cca2
adapt dist/README.md for npm sub packages
etpinard May 30, 2018
c90bfbf
add installation & usage section to each sub package README
etpinard May 30, 2018
f9ee7ee
fix typos + add \n in sub pkgs package.json
etpinard May 31, 2018
ab2b5cd
add link to npmjs page
etpinard May 31, 2018
b1f32e3
clean bundle info tables
etpinard May 31, 2018
3903e6d
add LICENSE to sub pkgs
etpinard May 31, 2018
f6a19f9
list pkg files (to make sure npm doesn't grab them from repo root)
etpinard May 31, 2018
2bdce23
nicolaskruchten-proof README
etpinard May 31, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions BUILDING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Building plotly.js

The easiest way to bundle plotly.js into your application is to use the one of the distributed plotly.js packages on npm. These distributed packages should just work with **any** build framework. That said, if you're looking to save a few bytes, read the section below corresponding to your building framework.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use the one of the distributed...

Do you want to include a link that points to a list of these modules on npm? I guess we can add that later once it actually exists ;)


## Webpack

For plotly.js to build with Webpack you will need to install [[email protected]+](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.
Expand Down
41 changes: 19 additions & 22 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,48 +32,45 @@ and more.

## Quick start options

#### Download the latest release
[Latest Release on Github](https://github.com/plotly/plotly.js/releases/)
#### Use the plotly.js CDN hosted by Fastly

and use the plotly.js `dist` file(s). More info [here](https://github.com/plotly/plotly.js/blob/master/dist/README.md).
```html
<!-- Latest compiled and minified plotly.js JavaScript -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

#### Clone the repo
<!-- OR use a specific plotly.js release (e.g. version 1.5.0) -->
<script src="https://cdn.plot.ly/plotly-1.5.0.min.js"></script>

```bash
git clone https://github.com/plotly/plotly.js.git
<!-- OR an un-minified version is also available -->
<script src="https://cdn.plot.ly/plotly-latest.js" charset="utf-8"></script>
```

and use the plotly.js `dist` file(s).
and use the `Plotly` object in the window scope.

#### Install with `npm`

```bash
npm install plotly.js
npm install plotly.js-dist
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we please move this up above the CDN option?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Personally, using the CDN is still the "quickest" way to start using plotly.js (hence its first spot in the "Quick start options" section), but ok.

```

and require plotly.js using CommonJS as `var Plotly = require('plotly.js');` or use the plotly.js `dist` file(s).
and import plotly.js as `import Plotly from 'plotly.js-dist';` or `var Plotly = require('plotly.js-dist');`.

#### Use the plotly.js CDN hosted by Fastly
```html
<!-- Latest compiled and minified plotly.js JavaScript -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<!-- OR use a specific plotly.js release (e.g. version 1.5.0) -->
<script src="https://cdn.plot.ly/plotly-1.5.0.min.js"></script>
#### Download the latest release

<!-- OR an un-minified version is also available -->
<script src="https://cdn.plot.ly/plotly-latest.js"></script>
```
[Latest Release on Github](https://github.com/plotly/plotly.js/releases/)

and use the `Plotly` object in the window scope.
and use the plotly.js `dist` file(s). More info [here](https://github.com/plotly/plotly.js/blob/master/dist/README.md).

##### Read the [Getting started page](https://plot.ly/javascript/getting-started/) for more examples.


## Modules

Starting in `v1.15.0`, plotly.js also ships with several _partial_ bundles (more info [here](https://github.com/plotly/plotly.js/blob/master/dist/README.md#partial-bundles)).
Starting in `v1.15.0`, plotly.js ships with several _partial_ bundles (more info [here](https://github.com/plotly/plotly.js/blob/master/dist/README.md#partial-bundles)).

Starting in `v1.39.0`, plotly.js publishes _distributed_ npm packages with no dependencies. For example, run `npm install plotly.js-geo-dist` and add `import Plotly from 'plotly.js-geo-dist';` to your code to start using the plotly.js geo package.

If you would like to manually pick which plotly.js modules to include, you can create a *custom* bundle by using `plotly.js/lib/core`, and loading only the trace types that you need (e.g. `pie` or `choropleth`). The recommended way to do this is by creating a *bundling file*:
If you would like to manually pick which plotly.js modules to include, you'll first need to run `npm install plotly.js` and then create a *custom* bundle by using `plotly.js/lib/core`, and loading only the trace types that you need (e.g. `pie` or `choropleth`). The recommended way to do this is by creating a *bundling file*. For example, in CommonJS:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I might prefix this with something like "If none of the distributed NPM packages meet your needs, and you would like to..." to encourage people to go with the flow :)

Copy link
Contributor Author

@etpinard etpinard May 30, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should encourage people that want to save bytes to save bytes, but ok.


```javascript
// in custom-plotly.js
Expand Down