fix: popper imports for common js (#781)

* fix: popper imports for common js * Update package.json Co-Authored-By: Jimmy Jia <tesrin@gmail.com> * Update src/popper.js Co-authored-by: Jimmy Jia <tesrin@gmail.com>

Author: jquense

package.json

@@ -30,7 +30,7 @@
  "scripts": {
  "bootstrap": "yarn && yarn --cwd www",
  "build": "rimraf lib && yarn build:cjs && yarn build:esm && yarn build:pick",
- "build:cjs": "babel src -d lib/cjs",
+ "build:cjs": "babel src -d lib/cjs && rollup src/popper.js --file lib/cjs/popper.js --format cjs --name popper --plugin @rollup/plugin-node-resolve",
  "build:esm": "babel src -d lib/esm --env-name esm",
  "build:pick": "cherry-pick ../src --cjs-dir=cjs --esm-dir=esm --cwd=lib",
  "deploy-docs": "yarn --cwd www build --prefix-paths && gh-pages -d www/public",
@@ -83,6 +83,7 @@
  "@babel/preset-env": "^7.8.7",
  "@babel/preset-react": "^7.8.3",
  "@react-bootstrap/eslint-config": "^1.3.2",
+ "@rollup/plugin-node-resolve": "^7.1.1",
  "babel-eslint": "^10.1.0",
  "babel-plugin-add-module-exports": "^1.0.2",
  "babel-plugin-istanbul": "^6.0.0",
@@ -118,6 +119,7 @@
  "react-dom": "^16.13.0",
  "react-transition-group": "^4.3.0",
  "rimraf": "^3.0.2",
+ "rollup": "^2.0.0",
  "simulant": "^0.2.2",
  "sinon": "^9.0.0",
  "sinon-chai": "^3.5.0",

src/Overlay.js

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
-import { placements } from '@popperjs/core/lib/enums';
 import useCallbackRef from '@restart/hooks/useCallbackRef';
 import useMergedRefs from '@restart/hooks/useMergedRefs';
+import { placements } from './popper';
 import usePopper, { toModifierMap } from './usePopper';
 import useRootClose from './useRootClose';
 import useWaitForDOMRef from './utils/useWaitForDOMRef';

src/popper.js

@@ -0,0 +1,25 @@
+import arrow from '@popperjs/core/lib/modifiers/arrow';
+import computeStyles from '@popperjs/core/lib/modifiers/computeStyles';
+import eventListeners from '@popperjs/core/lib/modifiers/eventListeners';
+import flip from '@popperjs/core/lib/modifiers/flip';
+import hide from '@popperjs/core/lib/modifiers/hide';
+import popperOffsets from '@popperjs/core/lib/modifiers/popperOffsets';
+import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
+import { placements } from '@popperjs/core/lib/enums';
+import { popperGenerator } from '@popperjs/core/lib/popper-base';
+
+// For the common JS build we will turn this file into a bundle with no imports.
+// This is b/c the Popper lib is all esm files, and would break in a common js only environment
+export const createPopper = popperGenerator({
+ defaultModifiers: [
+ hide,
+ popperOffsets,
+ computeStyles,
+ eventListeners,
+ flip,
+ preventOverflow,
+ arrow,
+ ],
+});
+
+export { placements };

src/usePopper.js

@@ -1,25 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import arrow from '@popperjs/core/lib/modifiers/arrow';
-import computeStyles from '@popperjs/core/lib/modifiers/computeStyles';
-import eventListeners from '@popperjs/core/lib/modifiers/eventListeners';
-import flip from '@popperjs/core/lib/modifiers/flip';
-import hide from '@popperjs/core/lib/modifiers/hide';
-import popperOffsets from '@popperjs/core/lib/modifiers/popperOffsets';
-import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
-import { popperGenerator } from '@popperjs/core/lib/popper-base';
 import useSafeState from '@restart/hooks/useSafeState';
-
-const createPopper = popperGenerator({
- defaultModifiers: [
- hide,
- popperOffsets,
- computeStyles,
- eventListeners,
- flip,
- preventOverflow,
- arrow,
- ],
-});
+import { createPopper } from './popper';
 
 const initialPopperStyles = {
  position: 'absolute',

yarn.lock

@@ -1231,6 +1231,24 @@
  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.3.21.tgz#5264d12019ffb844dc1fc44d55517ded7b580ee2"
  integrity sha512-Wcu3CFJV+iiqPEIoPVx3/CYnZBRgPeRABo6bLJByRH9ptJXyObn7WYPG7Rv0cg3+55bqcBbG0xEfovzwE2PNXg==
 
+"@rollup/plugin-node-resolve@^7.1.1":
+ version "7.1.1"
+ resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.1.tgz#8c6e59c4b28baf9d223028d0e450e06a485bb2b7"
+ integrity sha512-14ddhD7TnemeHE97a4rLOhobfYvUVcaYuqTnL8Ti7Jxi9V9Jr5LY7Gko4HZ5k4h4vqQM0gBQt6tsp9xXW94WPA==
+ dependencies:
+ "@rollup/pluginutils" "^3.0.6"
+ "@types/resolve" "0.0.8"
+ builtin-modules "^3.1.0"
+ is-module "^1.0.0"
+ resolve "^1.14.2"
+
+"@rollup/pluginutils@^3.0.6":
+ version "3.0.8"
+ resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.0.8.tgz#4e94d128d94b90699e517ef045422960d18c8fde"
+ integrity sha512-rYGeAc4sxcZ+kPG/Tw4/fwJODC3IXHYDH4qusdN/b6aLw5LPUbzpecYbEJh4sVQGPFJxd2dBU4kc1H3oy9/bnw==
+ dependencies:
+ estree-walker "^1.0.1"
+
 "@samverschueren/stream-to-observable@^0.3.0":
  version "0.3.0"
  resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
@@ -1355,6 +1373,13 @@
  "@types/prop-types" "*"
  csstype "^2.2.0"
 
+"@types/resolve@0.0.8":
+ version "0.0.8"
+ resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
+ integrity sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==
+ dependencies:
+ "@types/node" "*"
+
 "@webassemblyjs/ast@1.8.5":
  version "1.8.5"
  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
@@ -2296,6 +2321,11 @@ buffer@^5.2.0:
  base64-js "^1.0.2"
  ieee754 "^1.1.4"
 
+builtin-modules@^3.1.0:
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484"
+ integrity sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==
+
 builtin-status-codes@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
@@ -4320,6 +4350,11 @@ estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1:
  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
 
+estree-walker@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
+ integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
+
 esutils@^2.0.0, esutils@^2.0.2:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@@ -4882,7 +4917,7 @@ fsevents@^1.2.7:
  nan "^2.12.1"
  node-pre-gyp "^0.12.0"
 
-fsevents@~2.1.1:
+fsevents@~2.1.1, fsevents@~2.1.2:
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.2.tgz#4c0a1fb34bc68e543b4b82a9ec392bfbda840805"
  integrity sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==
@@ -5969,6 +6004,11 @@ is-interactive@^1.0.0:
  resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-1.0.0.tgz#cea6e6ae5c870a7b0a0004070b7b587e0252912e"
  integrity sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==
 
+is-module@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
+ integrity sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=
+
 is-number-object@^1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
@@ -9351,6 +9391,13 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
  hash-base "^3.0.0"
  inherits "^2.0.1"
 
+rollup@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.0.0.tgz#0bd7a09bd7cdaa70a19ad5a356f2fab90fd2f401"
+ integrity sha512-tbvWownITR+0ebaX6iRr7IcLkziTCJacRpmWz03NIj3CZDmGlergYSwdG8wPx68LT0ms1YzqmbjUQHb6ut8pdw==
+ optionalDependencies:
+ fsevents "~2.1.2"
+
 rst-selector-parser@^2.2.3:
  version "2.2.3"
  resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91"