Skip to content
This repository has been archived by the owner on Dec 5, 2024. It is now read-only.

Commit

Permalink
fix: Improve dist builds to include both popper.js and non-popper.js …
Browse files Browse the repository at this point in the history
…versions, rollup cleanup, and Readme update.
  • Loading branch information
virgofx committed Apr 22, 2018
1 parent 814128a commit eec8d1a
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 41 deletions.
18 changes: 16 additions & 2 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,4 +1,18 @@
{
"presets": [["env", { "modules": false }], "stage-2", "react"],
"plugins": ["transform-class-properties"]
"presets": [
["env", { "modules": false }],
"stage-2",
"react"
],
"plugins": [
"external-helpers",
"transform-class-properties"
],
"env": {
"production": {
"plugins": [
["transform-react-remove-prop-types", { "removeImport": true }]
]
}
}
}
25 changes: 23 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,32 @@ React wrapper around [PopperJS](https://github.com/FezVrasta/popper.js/).

`npm install react-popper --save` or `yarn add react-popper`


### CDN

If you prefer to include React Popper globally by marking `react-popper` as external in your application, the `react-popper` library (expose as `ReactPopper`) provides various single-file distributions, which are hosted on the following CDNs:

* [**cdnjs**](https://cdnjs.com/libraries/react-popper)
```html
<!-- Wrapper only version (Excludes popper.js) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-popper/0.10.2/react-popper.umd.min.js"></script>

<!-- Full version (Includes popper.js) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-popper/0.10.2/react-popper.full.umd.min.js"></script>
```

* [**unpkg**](https://unpkg.com/react-popper/)
```html
<script src="https://unpkg.com/react-popper/dist/react-popper.js"></script>
(UMD library exposed as `ReactPopper`)
<!-- Wrapper only version (Excludes popper.js) -->
<script src="https://unpkg.com/[email protected]/dist/react-popper.umd.min.js"></script>

<!-- Full version (Includes popper.js) -->
<script src="https://unpkg.com/[email protected]/dist/react-popper.full.umd.min.js"></script>
```

> **Note**: To load a specific version of React Popper replace `0.10.2` with the version number.

## Usage

```js
Expand Down
8 changes: 3 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,11 @@
"react-popper.d.ts"
],
"scripts": {
"build": "npm run build:clean && npm run build:es && npm run build:umd && npm run build:cjs && npm run build:umd-min && npm run build:cjs-min",
"build": "npm run build:clean && npm run build:es && npm run build:dist && npm run build:dist:prod",
"build:clean": "rm -rf dist/ && rm -rf lib/",
"build:es": "babel src --out-dir lib && mv lib/index.js lib/react-popper.js",
"build:umd": "rollup -c --output.format umd --output.name ReactPopper --output.file dist/react-popper.umd.js",
"build:cjs": "rollup -c --output.format cjs --output.name ReactPopper --output.file dist/react-popper.js",
"build:umd-min": "NODE_ENV=production rollup -c --output.format umd --output.name ReactPopper --output.file dist/react-popper.umd.min.js",
"build:cjs-min": "NODE_ENV=production rollup -c --output.format cjs --output.name ReactPopper --output.file dist/react-popper.min.js",
"build:dist": "rollup -c",
"build:dist:prod": "NODE_ENV=production rollup -c",
"demo": "parcel --out-dir demo/dist demo/index.html",
"prepare": "npm run build",
"precommit": "lint-staged",
Expand Down
68 changes: 36 additions & 32 deletions rollup.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,42 @@ import minify from 'rollup-plugin-babel-minify';
import replace from 'rollup-plugin-replace';
import nodeResolve from 'rollup-plugin-node-resolve';

export default {
input: 'src/index.js',
plugins: [
nodeResolve(),
babel({
babelrc: false,
presets: [['env', { modules: false }], 'stage-2', 'react'],
plugins: [
'external-helpers',
],
env: {
production: {
plugins: [
['transform-react-remove-prop-types', { removeImport: true }],
],
},
const baseConfig = (outputFormat, fullVersion) => {
const isProduction = process.env.NODE_ENV === 'production';

return {
input: 'src/index.js',
plugins: [
nodeResolve(),
babel(),
replace({
'process.env.NODE_ENV': JSON.stringify('production')
}),
isProduction ? minify({
comments: false,
}) : false,
],
external: fullVersion
? ['react', 'react-dom', 'prop-types']
: ['react', 'react-dom', 'prop-types', 'popper.js'],
output: {
name: 'ReactPopper',
file: 'dist/react-popper.' + (fullVersion ? 'full.' : '') +
outputFormat + (isProduction ? '.min' : '') + '.js',
format: outputFormat,
sourcemap: true,
globals: {
react: 'React',
'prop-types': 'PropTypes',
'popper.js': 'Popper',
},
}),
replace({
'process.env.NODE_ENV': JSON.stringify('production')
}),
process.env.NODE_ENV === 'production' ? minify({
comments: false,
}) : false,
].filter(Boolean),
external: ['react', 'react-dom', 'prop-types'],
output: {
sourcemap: true,
globals: {
react: 'React',
'prop-types': 'PropTypes',
'popper.js': 'Popper',
},
},
};
};

export default [
baseConfig('cjs', true),
baseConfig('cjs', false),
baseConfig('umd', true),
baseConfig('umd', false),
];

0 comments on commit eec8d1a

Please sign in to comment.