fix: exports (#3379)

* fix: cjs in cra

* chore: wrap cjs for mjs

* chore: export cjs and esm

* chore: export chunks

* fix: correctly export locales

* chore: note exports compat

* fix: use cjs for common deps

* chore: bump to v0.0.20-beta

* chore: rm outdated comment

.gitignore

@@ -19,6 +19,7 @@
 
 # builds
 /build
+/cosmos-export
 /dist
 /dts
 

cosmos.config.json

@@ -4,7 +4,7 @@
   ],
   "webpack": {
     "configPath": "react-scripts/config/webpack.config",
-    "overridePath": "cosmos.override.js"
+    "overridePath": "cosmos.override.cjs"
   },
   "port": 5001
-}
+}
\ No newline at end of file

package.json

 {
   "name": "@uniswap/widgets",
-  "version": "0.0.18-beta",
+  "version": "0.0.20-beta",
   "description": "Uniswap Interface",
   "homepage": ".",
   "files": [
-    "lib",
     "dist"
   ],
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {
-      "types": "./dist/widgets.d.ts",
-      "import": "./dist/widgets.cjs",
-      "require": "./dist/widgets.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/cjs/index.cjs"
+    },
+    "./locales/*": {
+      "import": "./dist/locales/*.js",
+      "require": "./dist/cjs/locales/*.cjs"
     },
     "./fonts.css": {
       "import": "./dist/fonts.css",
       "require": "./dist/fonts.css"
     }
   },
-  "types": "./dist/widgets.d.ts",
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
@@ -30,6 +35,9 @@
     "@graphql-codegen/typescript-operations": "^1.18.2",
     "@graphql-codegen/typescript-rtk-query": "^1.1.1",
     "@lingui/cli": "^3.9.0",
+    "@lingui/core": "^3.9.0",
+    "@lingui/macro": "^3.9.0",
+    "@lingui/react": "^3.9.0",
     "@metamask/jazzicon": "^2.0.0",
     "@reach/dialog": "^0.10.3",
     "@reach/portal": "^0.10.3",
@@ -80,8 +88,8 @@
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "^1.1.1",
-    "@web3-react/metamask": "8.0.10-beta.0",
-    "@web3-react/walletconnect": "8.0.15-beta.0",
+    "@web3-react/metamask": "8.0.13-beta.0",
+    "@web3-react/walletconnect": "8.0.18-beta.0",
     "array.prototype.flat": "^1.2.4",
     "array.prototype.flatmap": "^1.2.4",
     "babel-plugin-macros": "^3.1.0",
@@ -123,6 +131,7 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-dts": "^4.1.0",
+    "rollup-plugin-multi-input": "^1.3.1",
     "rollup-plugin-node-externals": "^3.1.2",
     "rollup-plugin-scss": "^3.0.0",
     "rollup-plugin-typescript2": "^0.31.1",
@@ -163,7 +172,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"
@@ -200,9 +209,6 @@
     "@ethersproject/wallet": "^5.4.0",
     "@fontsource/ibm-plex-mono": "^4.5.1",
     "@fontsource/inter": "^4.5.1",
-    "@lingui/core": "^3.9.0",
-    "@lingui/macro": "^3.9.0",
-    "@lingui/react": "^3.9.0",
     "@popperjs/core": "^2.4.4",
     "@reduxjs/toolkit": "^1.6.1",
     "@uniswap/redux-multicall": "^1.0.0",
@@ -212,11 +218,11 @@
     "@uniswap/token-lists": "^1.0.0-beta.27",
     "@uniswap/v2-sdk": "^3.0.1",
     "@uniswap/v3-sdk": "^3.8.2",
-    "@web3-react/core": "8.0.14-beta.0",
-    "@web3-react/eip1193": "8.0.9-beta.0",
-    "@web3-react/empty": "8.0.7-beta.0",
-    "@web3-react/types": "8.0.7-beta.0",
-    "@web3-react/url": "8.0.9-beta.0",
+    "@web3-react/core": "8.0.17-beta.0",
+    "@web3-react/eip1193": "8.0.12-beta.0",
+    "@web3-react/empty": "8.0.10-beta.0",
+    "@web3-react/types": "8.0.10-beta.0",
+    "@web3-react/url": "8.0.12-beta.0",
     "ajv": "^6.12.3",
     "cids": "^1.0.0",
     "immer": "^9.0.6",
@@ -253,4 +259,4 @@
     "encoding": "^0.1.13",
     "utf-8-validate": "^5.0.8"
   }
-}
+}
\ No newline at end of file

rollup.config.ts

@@ -17,6 +17,8 @@ import { RollupWarning } from 'rollup'
 import copy from 'rollup-plugin-copy'
 import del from 'rollup-plugin-delete'
 import dts from 'rollup-plugin-dts'
+// @ts-ignore // missing types
+import multi from 'rollup-plugin-multi-input'
 import externals from 'rollup-plugin-node-externals'
 import sass from 'rollup-plugin-scss'
 import { CompilerOptions } from 'typescript'
@@ -24,6 +26,8 @@ import { CompilerOptions } from 'typescript'
 const REPLACEMENTS = {
   'process.env.REACT_APP_IS_WIDGET': true,
   'process.env.REACT_APP_LOCALES': '"./locales"',
+  // esm requires fully-specified paths:
+  'react/jsx-runtime': 'react/jsx-runtime.js',
 }
 
 const EXTENSIONS = ['.js', '.jsx', '.ts', '.tsx']
@@ -45,7 +49,6 @@ const aliases = Object.entries({ ...paths }).flatMap(([find, replacements]) => {
 
 const plugins = [
   // Dependency resolution
-  externals({ exclude: ['constants'], deps: true, peerDeps: true }), // marks builtins, dependencies, and peerDependencies external
   resolve({ extensions: EXTENSIONS }), // resolves third-party modules within node_modules/
   alias({ entries: aliases }), // resolves paths aliased through the tsconfig (babel does not use tsconfig path resolution)
 
@@ -56,32 +59,69 @@ const plugins = [
 
 const check = {
   input: 'src/lib/index.tsx',
-  output: { file: 'dist/widgets.tsc' },
+  output: { file: 'dist/widgets.tsc', inlineDynamicImports: true },
   external: isAsset,
-  plugins: [...plugins, typescript({ tsconfig: TS_CONFIG })],
+  plugins: [
+    externals({ exclude: ['constants'], deps: true, peerDeps: true }), // marks builtins, dependencies, and peerDependencies external
+    ...plugins,
+    typescript({ tsconfig: TS_CONFIG }),
+  ],
   onwarn: squelchTranspilationWarnings, // this pipeline is only for typechecking and generating definitions
 }
 
 const type = {
   input: 'dist/dts/lib/index.d.ts',
-  output: { file: 'dist/widgets.d.ts' },
+  output: { file: 'dist/index.d.ts' },
   external: isAsset,
   plugins: [
+    externals({ exclude: ['constants'], deps: true, peerDeps: true }),
     dts({ compilerOptions: { baseUrl: 'dist/dts' } }),
     process.env.ROLLUP_WATCH ? undefined : del({ hook: 'buildEnd', targets: ['dist/widgets.tsc', 'dist/dts'] }),
   ],
 }
 
+/**
+ * This exports scheme works for nextjs and for CRA5.
+ *
+ * It will also work for CRA4 if you use direct imports:
+ *   instead of `import { SwapWidget } from '@uniswap/widgets'`,
+ *              `import { SwapWidget } from '@uniswap/widgets/dist/index.js'`.
+ * I do not know why CRA4 does not seem to use exports for resolution.
+ *
+ * Note that chunks are enabled. This is so the tokenlist spec can be loaded async,
+ * to improve first load time (due to ajv). Locales are also in separate chunks.
+ *
+ * Lastly, note that JSON and lingui are bundled into the library, as neither are fully
+ * supported/compatible with ES Modules. Both _could_ be bundled only with esm, but this
+ * yields a less complex pipeline.
+ */
+
 const transpile = {
   input: 'src/lib/index.tsx',
   output: [
     {
-      file: 'dist/widgets.cjs',
+      dir: 'dist',
+      format: 'esm',
+      sourcemap: false,
+    },
+    {
+      dir: 'dist/cjs',
+      entryFileNames: '[name].cjs',
+      chunkFileNames: '[name]-[hash].cjs',
       format: 'cjs',
-      sourcemap: true,
+      sourcemap: false,
     },
   ],
   plugins: [
+    externals({
+      exclude: [
+        'constants',
+        /@lingui\/(core|react)/, // @lingui incorrectly exports esm, so it must be bundled in
+        /\.json$/, // esm does not support JSON loading, so it must be bundled in
+      ],
+      deps: true,
+      peerDeps: true,
+    }),
     ...plugins,
 
     // Source code transformation
@@ -99,16 +139,30 @@ const transpile = {
         '@babel/plugin-transform-runtime', // embeds the babel runtime for library distribution
       ],
     }),
+  ],
+  onwarn: squelchTypeWarnings, // this pipeline is only for transpilation
+}
 
+const locales = {
+  input: 'src/locales/*.js',
+  output: [
+    {
+      dir: 'dist',
+      format: 'esm',
+      sourcemap: false,
+    },
+  ],
+  plugins: [
     copy({
       copyOnce: true,
-      targets: [{ src: 'src/locales/*.js', dest: 'dist/locales' }],
+      targets: [{ src: 'src/locales/*.js', dest: 'dist/cjs/locales', rename: (name) => `${name}.cjs` }],
     }),
+    commonjs(),
+    multi(),
   ],
-  onwarn: squelchTypeWarnings, // this pipeline is only for transpilation
 }
 
-const config = [check, type, transpile]
+const config = [check, type, transpile, locales]
 export default config
 
 function squelchTranspilationWarnings(warning: RollupWarning, warn: (warning: RollupWarning) => void) {

src/lib/i18n.tsx

@@ -82,7 +82,8 @@ export async function dynamicActivate(locale: SupportedLocale) {
   // see https://github.com/lingui/js-lingui/issues/388#issuecomment-497779030
   const catalog =
     locale === DEFAULT_LOCALE ? DEFAULT_CATALOG : await import(`${process.env.REACT_APP_LOCALES}/${locale}`)
-  i18n.load(locale, catalog.messages)
+  // Bundlers will either export it as default or as a named export named default.
+  i18n.load(locale, catalog.messages || catalog.default.messages)
   i18n.activate(locale)
 }