diff --git a/packages/docs-app/src/getting-started.md b/packages/docs-app/src/getting-started.md index 847892d657..0e43772cd4 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: - - ```sh - yarn add @blueprintjs/core - ``` - -1. If you see `UNMET PEER DEPENDENCY` errors, you should manually install React (v15.3 or greater): +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 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,75 +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 @@ -181,11 +131,53 @@ 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. +@## CDN consumption -```sh -npm install --save @blueprintjs/core react react-dom react-transition-group -``` +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 -Import components from the `@blueprintjs/core` module into your project. -Don't forget to include the main CSS stylesheet too! + + + + + + + + + + + + + + + + + + + + + +
+ + + +``` diff --git a/packages/webpack-build-scripts/externals.js b/packages/webpack-build-scripts/externals.js index ce02e81750..0b8605ef86 100644 --- a/packages/webpack-build-scripts/externals.js +++ b/packages/webpack-build-scripts/externals.js @@ -13,14 +13,16 @@ module.exports = externalize({ "@blueprintjs/timezone": ["Blueprint", "Timezone"], "classnames": "classNames", "dom4": "window", - "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", }); /**