From 3f417284d136fdd0a3a7e9057af518bb96cf534c Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Wed, 9 Jan 2019 14:48:11 -0800 Subject: [PATCH 1/5] update webpack externals --- packages/webpack-build-scripts/externals.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/webpack-build-scripts/externals.js b/packages/webpack-build-scripts/externals.js index ce02e81750..4070670680 100644 --- a/packages/webpack-build-scripts/externals.js +++ b/packages/webpack-build-scripts/externals.js @@ -16,11 +16,14 @@ module.exports = externalize({ "jquery": "$", "moment": "moment", "moment-timezone": "moment", + "popper.js": "Popper", "react": "React", - "react-transition-group": "ReactTransitionGroup", "react-day-picker": "DayPicker", "react-dom": "ReactDOM", - "tslib": "tslib", + "react-popper": "ReactPopper", + "react-transition-group": "ReactTransitionGroup", + "resize-observer-polyfill": "ResizeObserver", + "tslib": "window", }); /** From 7aef0275d1048054448a3f5535018fc7cb8324aa Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Wed, 9 Jan 2019 14:55:11 -0800 Subject: [PATCH 2/5] update CDN guide in getting started --- packages/docs-app/src/getting-started.md | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/docs-app/src/getting-started.md b/packages/docs-app/src/getting-started.md index 847892d657..ff14075eef 100644 --- a/packages/docs-app/src/getting-started.md +++ b/packages/docs-app/src/getting-started.md @@ -80,20 +80,27 @@ These bundles _do not include_ external dependencies; your application will need Blueprint Starter Kit + + - - + + + + + - - + + + +
+ ``` @## JS environment From d2f8b78d77e6ed229162a81c5b55ccd2e067cc53 Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Wed, 9 Jan 2019 15:05:45 -0800 Subject: [PATCH 3/5] push CDN section to the bottom (to avoid distraction) --- packages/docs-app/src/getting-started.md | 157 +++++++++++------------ 1 file changed, 75 insertions(+), 82 deletions(-) diff --git a/packages/docs-app/src/getting-started.md b/packages/docs-app/src/getting-started.md index ff14075eef..7ccd41ad88 100644 --- a/packages/docs-app/src/getting-started.md +++ b/packages/docs-app/src/getting-started.md @@ -2,27 +2,20 @@ @## Installing Blueprint -@### NPM packages - -Blueprint is available as a collection of NPM packages under the `@blueprintjs` scope. -Each package appears at the top level of the sidebar, along with its current version. +Blueprint is available as a collection of NPM packages under the `@blueprintjs` +scope. Each package appears at the top level of the sidebar to the left, along +with its current version. Each package contains a CSS file and a collection of CommonJS modules exposing React components. The `main` module exports all symbols from all modules so you don't have to import individual files (though you can if you want to). The JavaScript components are stable and their APIs adhere to [semantic versioning](http://semver.org/). -1. Install the core package with an NPM client like `npm` or `yarn`, pulling in all relevant - dependencies: +1. Install the core package and its peer dependencies with an NPM client like + `npm` or `yarn`, pulling in all relevant dependencies: ```sh - yarn add @blueprintjs/core - ``` - -1. If you see `UNMET PEER DEPENDENCY` errors, you should manually install React (v15.3 or greater): - - ```sh - yarn add react react-dom + yarn add @blueprintjs/core react react-dom ``` 1. After installation, you'll be able to import the React components in your application: @@ -37,83 +30,32 @@ The `main` module exports all symbols from all modules so you don't have to impo const myButton = React.createElement(Button, { intent: Intent.SUCCESS }, "button content"); ``` -1. Don't forget to include the main CSS file from each Blueprint package! Additionally, the +1. **Don't forget to include the main CSS file from each Blueprint package!** Additionally, the `resources/` directory contains supporting media such as fonts and images. - ```html - - - - - ... - - - - - - ... - - ... - - ``` - ```css.scss - // or, using node-style package resolution in a CSS file: + // using node-style package resolution in a CSS file: + @import "~normalize.css"; @import "~@blueprintjs/core/lib/css/blueprint.css"; @import "~@blueprintjs/icons/lib/css/blueprint-icons.css"; ``` -@### CDN consumption - -Blueprint supports the venerable [unpkg CDN](https://unpkg.com). Each package provides a UMD -`dist/[name].bundle.js` file containing the bundled source code. The UMD wrapper exposes each -library on the `Blueprint` global variable: `Blueprint.Core`, `Blueprint.Datetime`, etc. - -These bundles _do not include_ external dependencies; your application will need to ensure that -`normalize.css`, `classnames`, `dom4`, `react`, `react-dom`, `react-transition-group`, `popper.js`, and -`react-popper` are available at runtime. - -```html - - - - - - Blueprint Starter Kit - - - - - - - - - - - - - - - - - - - - - - -
- - - + ```html + + + + + + + + + ``` -``` +
+

CDN-only usage

+ Blueprint can instead be quickly added to a page using the Unpkg CDN. + [See below for instructions](#blueprint/getting-started.cdn-consumption). +
@## JS environment @@ -197,3 +139,54 @@ npm install --save @blueprintjs/core react react-dom react-transition-group Import components from the `@blueprintjs/core` module into your project. Don't forget to include the main CSS stylesheet too! + +@## CDN consumption + +Blueprint supports the venerable [unpkg CDN](https://unpkg.com). Each package provides a UMD +`dist/[name].bundle.js` file containing the bundled source code. The UMD wrapper exposes each +library on the `Blueprint` global variable: `Blueprint.Core`, `Blueprint.Datetime`, etc. + +These bundles _do not include_ external dependencies; your application will need to ensure that +`normalize.css`, `classnames`, `dom4`, `react`, `react-dom`, `react-transition-group`, `popper.js`, and +`react-popper` are available at runtime. + +```html + + + + + + Blueprint Starter Kit + + + + + + + + + + + + + + + + + + + + + + +
+ + + +``` From 9ec79497690bc4c44c13b53decdd20f1b7b11522 Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Wed, 9 Jan 2019 15:16:42 -0800 Subject: [PATCH 4/5] remove repeated install notes --- packages/docs-app/src/getting-started.md | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/docs-app/src/getting-started.md b/packages/docs-app/src/getting-started.md index 7ccd41ad88..0e43772cd4 100644 --- a/packages/docs-app/src/getting-started.md +++ b/packages/docs-app/src/getting-started.md @@ -131,15 +131,6 @@ ReactDOM.unmountComponentAtNode(myContainerElement); Check out the [React API docs](https://facebook.github.io/react/docs/react-api.html) for more details. -You'll need to install React v15.3 or greater alongside Blueprint. - -```sh -npm install --save @blueprintjs/core react react-dom react-transition-group -``` - -Import components from the `@blueprintjs/core` module into your project. -Don't forget to include the main CSS stylesheet too! - @## CDN consumption Blueprint supports the venerable [unpkg CDN](https://unpkg.com). Each package provides a UMD From 0261da98c2ae098cc20691790b7934f5cde3459a Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Thu, 10 Jan 2019 13:47:18 -0800 Subject: [PATCH 5/5] remove jquery --- packages/webpack-build-scripts/externals.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/webpack-build-scripts/externals.js b/packages/webpack-build-scripts/externals.js index 4070670680..0b8605ef86 100644 --- a/packages/webpack-build-scripts/externals.js +++ b/packages/webpack-build-scripts/externals.js @@ -13,7 +13,6 @@ module.exports = externalize({ "@blueprintjs/timezone": ["Blueprint", "Timezone"], "classnames": "classNames", "dom4": "window", - "jquery": "$", "moment": "moment", "moment-timezone": "moment", "popper.js": "Popper",