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

Commit

Permalink
fix: v0.x dist builds to ensure SSR works properly and popper.js is i…
Browse files Browse the repository at this point in the history
…ncluded in the dist builds (#146)

* fix: v0.x dist builds to ensure SSR works properly

* fix: Ensure /dist folder structure uses best-practice with module types separated by folder.
  • Loading branch information
virgofx authored and FezVrasta committed Apr 30, 2018
1 parent 65a8cbf commit fb7d798
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 30 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 }]
]
}
}
}
16 changes: 14 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,23 @@ 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 (exposed as `ReactPopper`) provides various single-file distributions, which are hosted on the following CDNs:

* [**cdnjs**](https://cdnjs.com/libraries/react-popper)
```html
<script src="https://unpkg.com/react-popper/dist/react-popper.js"></script>
(UMD library exposed as `ReactPopper`)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-popper/0.10.2/umd/react-popper.min.js"></script>
```

* [**unpkg**](https://unpkg.com/react-popper/)
```html
<script src="https://unpkg.com/[email protected]/dist/umd/react-popper.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": "MINIFY=true rollup -c --output.format umd --output.name ReactPopper --output.file dist/react-popper.umd.min.js",
"build:cjs-min": "MINIFY=true 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
66 changes: 45 additions & 21 deletions rollup.config.js
Original file line number Diff line number Diff line change
@@ -1,26 +1,50 @@
import babel from 'rollup-plugin-babel';
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: [
babel({
babelrc: false,
presets: [['env', { modules: false }], 'stage-2', 'react'],
plugins: [
'external-helpers',
['transform-react-remove-prop-types', { mode: 'wrap' }],
],
}),
process.env.MINIFY ? minify() : false,
].filter(Boolean),
external: ['react', 'react-dom', 'prop-types', 'popper.js'],
output: {
sourcemap: true,
globals: {
react: 'React',
'prop-types': 'PropTypes',
'popper.js': 'Popper',
const baseConfig = (outputFormat) => {
const isProduction = process.env.NODE_ENV === 'production';

let file;
switch (outputFormat) {
case 'umd':
case 'cjs':
file = 'dist/' + outputFormat + '/react-popper' + (isProduction ? '.min' : '') + '.js';
break;

default:
throw new Error('Unsupported output format: ' + outputFormat);
}

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

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

0 comments on commit fb7d798

Please sign in to comment.