chore: nextjs compatibility (#3351)

* fix: esm/cjs exports

* fix: guard visibility state WebAPI

* fix: nextjs styled-components imports

* fix: add ethers' optional deps

* fix: document access in useHasFocus

* fix: suffix babel-plugin-macros config for commonjs

* chore: rollup sourcemaps

* chore: export fonts separately

* chore: mv redux to peer dep

* fix: run tests off cjs config

* fix: run cosmos off cjs config

cosmos.config.json

@@ -4,7 +4,7 @@
   ],
   "webpack": {
     "configPath": "react-scripts/config/webpack.config",
-    "overridePath": "cosmos.override.js"
+    "overridePath": "cosmos.override.cjs"
   },
   "port": 5001
 }

package.json

@@ -3,13 +3,25 @@
   "version": "0.0.14-beta",
   "description": "Uniswap Interface",
   "homepage": ".",
-  "main": "dist/widgets.js",
-  "module": "dist/widgets.esm.js",
-  "types": "dist/widgets.d.ts",
+  "type": "module",
   "files": [
     "lib",
     "dist"
   ],
+  "exports": {
+    ".": {
+    "types": "./dist/widgets.d.ts",
+    "import": "./dist/widgets.esm.js",
+    "require": "./dist/widgets.js"
+    },
+    "./fonts.css": {
+      "import": "./dist/fonts.css",
+      "require": "./dist/fonts.css"
+    }
+  },
+  "types": "./dist/widgets.d.ts",
+  "module": "./dist/widgets.esm.js",
+  "main": "./dist/widgets.js",
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
@@ -73,13 +85,6 @@
     "@uniswap/v3-periphery": "^1.1.1",
     "@web3-react/metamask": "8.0.16-alpha.0",
     "@web3-react/walletconnect": "8.0.16-alpha.0",
-    "web3-react-abstract-connector": "npm:@web3-react/abstract-connector@^6.0.7",
-    "web3-react-fortmatic-connector": "npm:@web3-react/fortmatic-connector@^6.0.9",
-    "web3-react-injected-connector": "npm:@web3-react/injected-connector@^6.0.7",
-    "web3-react-portis-connector": "npm:@web3-react/portis-connector@^6.0.9",
-    "web3-react-types": "npm:@web3-react/types@^6.0.7",
-    "web3-react-walletconnect-connector": "npm:@web3-react/walletconnect-connector@^7.0.2-alpha.0",
-    "web3-react-walletlink-connector": "npm:@web3-react/walletlink-connector@^6.2.11",
     "array.prototype.flat": "^1.2.4",
     "array.prototype.flatmap": "^1.2.4",
     "babel-plugin-macros": "^3.1.0",
@@ -110,10 +115,12 @@
     "react-ga": "^2.5.7",
     "react-is": "^17.0.2",
     "react-markdown": "^4.3.1",
+    "react-redux": "^7.2.2",
     "react-router-dom": "^5.0.0",
     "react-scripts": "^4.0.3",
     "react-spring": "^8.0.27",
     "react-use-gesture": "^6.0.14",
+    "redux": "^4.1.2",
     "redux-localstorage-simple": "^2.3.1",
     "rollup": "^2.63.0",
     "rollup-plugin-copy": "^3.4.0",
@@ -132,6 +139,13 @@
     "use-resize-observer": "^8.0.0",
     "wcag-contrast": "^3.0.0",
     "web-vitals": "^2.1.0",
+    "web3-react-abstract-connector": "npm:@web3-react/abstract-connector@^6.0.7",
+    "web3-react-fortmatic-connector": "npm:@web3-react/fortmatic-connector@^6.0.9",
+    "web3-react-injected-connector": "npm:@web3-react/injected-connector@^6.0.7",
+    "web3-react-portis-connector": "npm:@web3-react/portis-connector@^6.0.9",
+    "web3-react-types": "npm:@web3-react/types@^6.0.7",
+    "web3-react-walletconnect-connector": "npm:@web3-react/walletconnect-connector@^7.0.2-alpha.0",
+    "web3-react-walletlink-connector": "npm:@web3-react/walletlink-connector@^6.2.11",
     "workbox-core": "^6.1.0",
     "workbox-precaching": "^6.1.0",
     "workbox-routing": "^6.1.0"
@@ -152,7 +166,7 @@
     "prepublishOnly": "yarn widgets:build",
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=./custom-test-env.js",
+    "test": "react-scripts test --env=./custom-test-env.cjs",
     "test:e2e": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run --record'",
     "widgets:start": "cosmos",
     "widgets:build": "rollup --config --failAfterWarnings --configPlugin typescript2"
@@ -201,7 +215,11 @@
     "@uniswap/token-lists": "^1.0.0-beta.27",
     "@uniswap/v2-sdk": "^3.0.1",
     "@uniswap/v3-sdk": "^3.8.2",
-    "web3-react-core": "npm:@web3-react/core@^6.0.9",
+    "@web3-react/core": "8.0.16-alpha.0",
+    "@web3-react/eip1193": "8.0.16-alpha.0",
+    "@web3-react/empty": "8.0.17-alpha.0",
+    "@web3-react/types": "8.0.16-alpha.0",
+    "@web3-react/url": "8.0.17-alpha.0",
     "ajv": "^6.12.3",
     "cids": "^1.0.0",
     "immer": "^9.0.6",
@@ -216,25 +234,26 @@
     "popper-max-size-modifier": "^0.2.0",
     "react-feather": "^2.0.8",
     "react-popper": "^2.2.3",
-    "react-redux": "^7.2.2",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
     "rebass": "^4.0.7",
-    "redux": "^4.1.2",
     "setimmediate": "^1.0.5",
     "styled-components": "^5.3.0",
     "tiny-invariant": "^1.2.0",
     "wcag-contrast": "^3.0.0",
-    "@web3-react/core": "8.0.16-alpha.0",
-    "@web3-react/eip1193": "8.0.16-alpha.0",
-    "@web3-react/empty": "8.0.17-alpha.0",
-    "@web3-react/types": "8.0.16-alpha.0",
-    "@web3-react/url": "8.0.17-alpha.0",
+    "web3-react-core": "npm:@web3-react/core@^6.0.9",
     "wicg-inert": "^3.1.1"
   },
   "peerDependencies": {
     "@babel/runtime": "^7.17.0",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react-dom": "^17.0.1",
+    "react-redux": "^7.2.2",
+    "redux": "^4.1.2"
+  },
+  "optionalDependencies": {
+    "bufferutil": "^4.0.6",
+    "encoding": "^0.1.13",
+    "utf-8-validate": "^5.0.8"
   }
 }

rollup.config.ts

@@ -78,12 +78,12 @@ const transpile = {
     {
       file: 'dist/widgets.js',
       format: 'cjs',
-      sourcemap: false,
+      sourcemap: true,
     },
     {
       file: 'dist/widgets.esm.js',
       format: 'esm',
-      sourcemap: false,
+      sourcemap: true,
     },
   ],
   plugins: [
@@ -92,7 +92,7 @@ const transpile = {
     // Source code transformation
     url({ include: ASSET_EXTENSIONS.map((extname) => '**/*' + extname) }), // imports assets as data URIs
     svgr({ exportType: 'named', svgo: false }), // imports svgs as React components
-    sass({ insert: true }), // imports inlined sass styles
+    sass({ output: 'dist/fonts.css' }), // generates widgets.css
     commonjs(), // transforms cjs dependencies into tree-shakeable ES modules
 
     babel({

src/hooks/useIsWindowVisible.ts

@@ -1,9 +1,11 @@
 import { useCallback, useEffect, useState } from 'react'
 
-const VISIBILITY_STATE_SUPPORTED = 'visibilityState' in document
+function isVisibilityStateSupported() {
+  return 'visibilityState' in document
+}
 
 function isWindowVisible() {
-  return !VISIBILITY_STATE_SUPPORTED || document.visibilityState !== 'hidden'
+  return !isVisibilityStateSupported() || document.visibilityState !== 'hidden'
 }
 
 /**
@@ -16,7 +18,7 @@ export default function useIsWindowVisible(): boolean {
   }, [setFocused])
 
   useEffect(() => {
-    if (!VISIBILITY_STATE_SUPPORTED) return undefined
+    if (!isVisibilityStateSupported()) return undefined
 
     document.addEventListener('visibilitychange', listener)
     return () => {

src/lib/hooks/useHasFocus.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 
 export default function useHasFocus(node: Node | null | undefined): boolean {
-  const [hasFocus, setHasFocus] = useState(node?.contains(document.activeElement) ?? false)
+  const [hasFocus, setHasFocus] = useState(node?.contains(document?.activeElement) ?? false)
   const onFocus = useCallback(() => setHasFocus(true), [])
   const onBlur = useCallback((e) => setHasFocus(node?.contains(e.relatedTarget) ?? false), [node])
   useEffect(() => {

src/lib/theme/styled.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-restricted-imports */
-import styled, {
+import styledDefault, {
   css as styledCss,
   keyframes as styledKeyframes,
   ThemedBaseStyledInterface,
@@ -11,8 +11,13 @@ import styled, {
 
 import { ComputedTheme } from './theme'
 
-export default styled as unknown as ThemedBaseStyledInterface<ComputedTheme>
 export const css = styledCss as unknown as ThemedCssFunction<ComputedTheme>
 export const keyframes = styledKeyframes
 export const useTheme = useStyled as unknown as () => ComputedTheme
 export const ThemedProvider = StyledProvider as unknown as ThemeProviderComponent<ComputedTheme>
+
+// nextjs imports all of styled-components/macro instead of its default. Check for and resolve this at runtime.
+const styled = (styledDefault instanceof Function
+  ? styledDefault
+  : (styledDefault as { default: typeof styledDefault }).default) as unknown as ThemedBaseStyledInterface<ComputedTheme>
+export default styled

yarn.lock

@@ -7122,6 +7122,13 @@ buffer@^5.2.0, buffer@^5.4.3, buffer@^5.5.0, buffer@^5.7.0:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
+bufferutil@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/bufferutil/-/bufferutil-4.0.6.tgz#ebd6c67c7922a0e902f053e5d8be5ec850e48433"
+  integrity sha512-jduaYOYtnio4aIAyc6UbvPCVcgq7nYpVnucyxr6eCYg/Woad9Hf/oxxBRDnGGjPfjUm6j5O/uBWhIu4iLebFaw==
+  dependencies:
+    node-gyp-build "^4.3.0"
+
 builtin-modules@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.2.0.tgz#45d5db99e7ee5e6bc4f362e008bf917ab5049887"
@@ -9525,6 +9532,13 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
+encoding@^0.1.13:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
+  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
+  dependencies:
+    iconv-lite "^0.6.2"
+
 end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -11866,7 +11880,7 @@ [email protected], iconv-lite@^0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-[email protected]:
+[email protected], iconv-lite@^0.6.2:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
   integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
@@ -14718,6 +14732,11 @@ node-gyp-build@^4.2.0:
   resolved "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.2.3.tgz"
   integrity sha512-MN6ZpzmfNCRM+3t57PTJHgHyw/h4OWnZ6mR8P5j/uZtqQr46RRuDE/P+g3n0YR/AiYXeWixZZzaip77gdICfRg==
 
+node-gyp-build@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.3.0.tgz#9f256b03e5826150be39c764bf51e993946d71a3"
+  integrity sha512-iWjXZvmboq0ja1pUGULQBexmxq8CV4xBhX7VDOTbL7ZR4FOowwY/VOtRxBN/yKxmdGoIp4j5ysNT4u3S2pDQ3Q==
+
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
@@ -20004,6 +20023,13 @@ use@^3.1.0:
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
+utf-8-validate@^5.0.8:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-5.0.8.tgz#4a735a61661dbb1c59a0868c397d2fe263f14e58"
+  integrity sha512-k4dW/Qja1BYDl2qD4tOMB9PFVha/UJtxTc1cXYOe3WwA/2m0Yn4qB7wLMpJyLJ/7DR0XnTut3HsCSzDT4ZvKgA==
+  dependencies:
+    node-gyp-build "^4.3.0"
+
 utif@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/utif/-/utif-2.0.1.tgz"