feat: ship universal modules with ESM (#979)

semoal · web-flow · commit 6cd5fe0a71dd · 2021-02-23T13:39:48.000+01:00
diff --git a/.eslintignore b/.eslintignore
@@ -4,3 +4,4 @@
 **/locale/*
 docs/*
 README.md
+**/npm/*
diff --git a/packages/core/npm/esm/index.js b/packages/core/npm/esm/index.js
@@ -1,6 +1,18 @@
-import i18nModule from '../index.js'
+import {
+    i18n as i18nProd,
+    setupI18n as setupI18nProd,
+    formats as formatsProd,
+    I18n as I18nProd
+} from './core.esm';
 
-export const setupI18n = i18nModule.setupI18n
-export const I18n = i18nModule.I18n
-export const i18n = i18nModule.i18n
-export const formats = i18nModule.formats
+import {
+    i18n as i18nDev,
+    setupI18n as setupI18nDev,
+    formats as formatsDev,
+    I18n as I18nDev
+} from './dev.esm';
+
+export const i18n = process.env.NODE_ENV === 'production' ? i18nProd : i18nDev;
+export const setupI18n = process.env.NODE_ENV === 'production' ? setupI18nProd : setupI18nDev;
+export const formats = process.env.NODE_ENV === 'production' ? formatsProd : formatsDev;
+export const I18n = process.env.NODE_ENV === 'production' ? I18nProd : I18nDev;
diff --git a/packages/core/npm/esm/package.json b/packages/core/npm/esm/package.json
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -3,6 +3,7 @@
   "version": "3.5.1",
   "description": "I18n tools for javascript",
   "main": "index.js",
+  "module": "esm/index.js",
   "types": "cjs/index.d.ts",
   "author": {
     "name": "Tomáš Ehrlich",
diff --git a/packages/detect-locale/npm/esm/index.js b/packages/detect-locale/npm/esm/index.js
@@ -1,11 +1 @@
-import detectLocaleModule from '../index.js'
-
-export const detect = detectLocaleModule.detect
-export const multipleDetect = detectLocaleModule.multipleDetect
-export const fromCookie = detectLocaleModule.fromCookie
-export const fromHtmlTag = detectLocaleModule.fromHtmlTag
-export const fromNavigator = detectLocaleModule.fromNavigator
-export const fromPath = detectLocaleModule.fromPath
-export const fromStorage = detectLocaleModule.fromStorage
-export const fromSubdomain = detectLocaleModule.fromSubdomain
-export const fromUrl = detectLocaleModule.fromUrl
+export * from './detect-locale.esm'
diff --git a/packages/detect-locale/npm/esm/package.json b/packages/detect-locale/npm/esm/package.json
diff --git a/packages/detect-locale/package.json b/packages/detect-locale/package.json
@@ -3,6 +3,7 @@
   "version": "3.5.1",
   "description": "@Lingui package to help you find the correct browser/server locale",
   "main": "index.js",
+  "module": "esm/index.js",
   "types": "cjs/index.d.ts",
   "license": "MIT",
   "keywords": [
diff --git a/packages/react/npm/esm/index.js b/packages/react/npm/esm/index.js
@@ -0,0 +1 @@
+export * from './react.esm'
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -3,6 +3,7 @@
   "version": "3.5.1",
   "description": "React components for translations",
   "main": "index.js",
+  "module": "esm/index.js",
   "types": "cjs/index.d.ts",
   "author": {
     "name": "Tomáš Ehrlich",
@@ -33,7 +34,8 @@
     "LICENSE",
     "README.md",
     "index.js",
-    "cjs/"
+    "cjs/",
+    "esm/"
   ],
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"
diff --git a/scripts/build/bundles.js b/scripts/build/bundles.js
@@ -3,7 +3,8 @@
 const bundleTypes = {
   UNIVERSAL: "UNIVERSAL",
   NODE: "NODE",
-  NOOP: "NOOP"
+  NOOP: "NOOP",
+  ESM: "ESM",
 }
 
 const bundles = [
diff --git a/scripts/build/index.js b/scripts/build/index.js
@@ -34,7 +34,7 @@ function shouldSkipBundle(bundle, bundleType) {
 }
 
 async function buildEverything() {
-  await asyncRimRaf("build")
+  await asyncRimRaf("packages/**/build")
 
   // Run them serially for better console output
   // and to avoid any potential race conditions.
diff --git a/scripts/build/packaging.js b/scripts/build/packaging.js
@@ -10,7 +10,7 @@ const {
   asyncRimRaf
 } = require("./utils")
 
-const { UNIVERSAL, NODE, NOOP } = Bundles.bundleTypes
+const { UNIVERSAL, NODE, NOOP, ESM } = Bundles.bundleTypes
 
 function getPackageName(name) {
   return name.split("/", 2).reverse()[0]
@@ -24,6 +24,8 @@ function getBundleOutputPaths(bundleType, filename, packageName) {
     case NOOP:
     case NODE:
       return [`packages/${name}/build/${_filename}`]
+    case ESM:
+      return [`packages/${name}/build/esm/${_filename}`]
     case UNIVERSAL:
       return [`packages/${name}/build/cjs/${_filename}`]
     // case UMD_DEV:
diff --git a/scripts/build/rollup.js b/scripts/build/rollup.js
@@ -26,6 +26,7 @@ const UMD_DEV = "UMD_DEV"
 const UMD_PROD = "UMD_PROD"
 const NODE_DEV = "NODE_DEV"
 const NODE_PROD = "NODE_PROD"
+const ESM_PROD = "ESM_PROD"
 
 const extensions = [".js", ".ts", ".tsx"]
 
@@ -65,10 +66,12 @@ function getFormat(bundleType) {
   switch (bundleType) {
     case UMD_DEV:
     case UMD_PROD:
-      return `umd`
+      return 'umd'
     case NODE_DEV:
     case NODE_PROD:
-      return `cjs`
+      return 'cjs'
+    case ESM_PROD:
+      return 'es'
   }
 }
 
@@ -81,6 +84,8 @@ function getFilename(bundle, bundleType) {
     case UMD_PROD:
     case NODE_PROD:
       return `${filename}.production.min.js`
+    case ESM_PROD:
+      return `${filename}.esm.js`
   }
 }
 
@@ -91,6 +96,7 @@ function isProductionBundleType(bundleType) {
       return false
     case UMD_PROD:
     case NODE_PROD:
+    case ESM_PROD:
       return true
     default:
       throw new Error(`Unknown type: ${bundleType}`)
@@ -285,7 +291,7 @@ async function build(bundle, bundleType) {
     ),
   }
   const [mainOutputPath, ...otherOutputPaths] = Packaging.getBundleOutputPaths(
-    "UNIVERSAL",
+    bundleType === ESM_PROD ? "ESM" : "UNIVERSAL",
     filename,
     packageName
   )
@@ -314,6 +320,7 @@ async function build(bundle, bundleType) {
 module.exports = async function (bundle) {
   await build(bundle, NODE_DEV)
   await build(bundle, NODE_PROD)
+  await build(bundle, ESM_PROD)
   // await build(bundle, UMD_DEV)
   // await build(bundle, UMD_PROD)
 }

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,8 @@`
`3`	`3`	`const bundleTypes = {`
`4`	`4`	`UNIVERSAL: "UNIVERSAL",`
`5`	`5`	`NODE: "NODE",`
`6`		`- NOOP: "NOOP"`
	`6`	`+ NOOP: "NOOP",`
	`7`	`+ ESM: "ESM",`
`7`	`8`	`}`
`8`	`9`
`9`	`10`	`const bundles = [`