This repository has been archived by the owner on Dec 5, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 226
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: v0.x dist builds to ensure SSR works properly and popper.js is i…
…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
Showing
4 changed files
with
78 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 }] | ||
] | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'), | ||
]; |