feat: add support for ESM module when transpiling code

mjmlio · May 28, 2021 · 12f8f19 · 12f8f19
1 parent 0fc8b3b
commit 12f8f19
Show file tree

Hide file tree

Showing 33 changed files with 168 additions and 62 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -1,7 +1,10 @@
+const ESM = process.env.ESM === 'true'
+
 module.exports = {
   presets: [['@babel/env', {
     targets: { node: '10' },
     include: ['transform-classes'],
+    ...(ESM ? { modules: false } : {}),
   }]],
   plugins: [
     '@babel/proposal-class-properties',
@@ -15,6 +18,6 @@ module.exports = {
       },
     ],
     'add-module-exports',
-    'lodash',
+    ...(ESM ? [] : ['lodash']),
   ],
 }
diff --git a/package.json b/package.json
@@ -3,7 +3,9 @@
   "private": true,
   "scripts": {
     "build:watch": "lerna run build --parallel -- -- -w",
-    "build": "lerna run build --parallel --ignore mjml-browser",
+    "build": "yarn run build:cjs && yarn run build:esm",
+    "build:cjs": "lerna run build --parallel --ignore mjml-browser",
+    "build:esm": "cross-env ESM=true lerna run build:esm --parallel --ignore mjml-browser --ignore mjml-cli --ignore mjml-migrate",
     "build-browser": "cd packages/mjml-browser && yarn build",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
@@ -22,6 +24,7 @@
     "babel-eslint": "^10.1.0",
     "babel-plugin-add-module-exports": "^1.0.2",
     "babel-plugin-lodash": "^3.3.4",
+    "cross-env": "^7.0.3",
     "eslint": "^6.8.0",
     "eslint-config-airbnb-base": "^14.1.0",
     "eslint-config-prettier": "^6.11.0",

diff --git a/packages/mjml-accordion/package.json b/packages/mjml-accordion/package.json
@@ -2,7 +2,8 @@
   "name": "mjml-accordion",
   "description": "mjml-accordion",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "files": [
     "lib"
   ],
@@ -18,7 +19,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",

diff --git a/packages/mjml-body/package.json b/packages/mjml-body/package.json
@@ -2,7 +2,8 @@
   "name": "mjml-body",
   "description": "mjml-body",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "files": [
     "lib"
   ],
@@ -18,7 +19,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",

diff --git a/packages/mjml-button/package.json b/packages/mjml-button/package.json
@@ -2,7 +2,8 @@
   "name": "mjml-button",
   "description": "mjml-button",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "files": [
     "lib"
   ],
@@ -18,7 +19,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",

diff --git a/packages/mjml-carousel/package.json b/packages/mjml-carousel/package.json
@@ -2,7 +2,8 @@
   "name": "mjml-carousel",
   "description": "mjml-carousel",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "files": [
     "lib"
   ],
@@ -18,7 +19,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",

diff --git a/packages/mjml-column/package.json b/packages/mjml-column/package.json
@@ -2,7 +2,8 @@
   "name": "mjml-column",
   "description": "mjml-column",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "files": [
     "lib"
   ],
@@ -18,7 +19,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",

diff --git a/packages/mjml-core/package.json b/packages/mjml-core/package.json
@@ -2,7 +2,8 @@
   "name": "mjml-core",
   "description": "mjml-core",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "files": [
     "lib"
   ],
@@ -18,7 +19,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward",
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward",
     "test": "node ./tests/index.js"
   },
   "dependencies": {

diff --git a/packages/mjml-divider/package.json b/packages/mjml-divider/package.json
@@ -2,7 +2,8 @@
   "name": "mjml-divider",
   "description": "mjml-divider",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "files": [
     "lib"
   ],
@@ -18,7 +19,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",

diff --git a/packages/mjml-group/package.json b/packages/mjml-group/package.json
@@ -2,7 +2,8 @@
   "name": "mjml-group",
   "description": "mjml-group",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "files": [
     "lib"
   ],
@@ -18,7 +19,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",

diff --git a/packages/mjml-head-attributes/package.json b/packages/mjml-head-attributes/package.json
@@ -2,7 +2,8 @@
   "name": "mjml-head-attributes",
   "description": "mjml-head-attributes",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "files": [
     "lib"
   ],
@@ -18,7 +19,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",

diff --git a/packages/mjml-head-breakpoint/package.json b/packages/mjml-head-breakpoint/package.json
@@ -2,7 +2,8 @@
   "name": "mjml-head-breakpoint",
   "description": "mjml-head-breakpoint",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "files": [
     "lib"
   ],
@@ -18,7 +19,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",

diff --git a/packages/mjml-head-font/package.json b/packages/mjml-head-font/package.json
@@ -2,7 +2,8 @@
   "name": "mjml-head-font",
   "description": "mjml-head-font",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "files": [
     "lib"
   ],
@@ -18,7 +19,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",

diff --git a/packages/mjml-head-html-attributes/package.json b/packages/mjml-head-html-attributes/package.json
@@ -2,7 +2,8 @@
   "name": "mjml-head-html-attributes",
   "description": "mjml-head-html-attributes",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "files": [
     "lib"
   ],
@@ -18,7 +19,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",

diff --git a/packages/mjml-head-preview/package.json b/packages/mjml-head-preview/package.json
@@ -2,7 +2,8 @@
   "name": "mjml-head-preview",
   "description": "mjml-head-preview",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "files": [
     "lib"
   ],
@@ -18,7 +19,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",

diff --git a/packages/mjml-head-style/package.json b/packages/mjml-head-style/package.json
@@ -2,7 +2,8 @@
   "name": "mjml-head-style",
   "description": "mjml-head-style",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "files": [
     "lib"
   ],
@@ -18,7 +19,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",

diff --git a/packages/mjml-head-title/package.json b/packages/mjml-head-title/package.json
@@ -2,7 +2,8 @@
   "name": "mjml-head-title",
   "description": "mjml-head-title",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "files": [
     "lib"
   ],
@@ -18,7 +19,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",

diff --git a/packages/mjml-head/package.json b/packages/mjml-head/package.json
@@ -2,7 +2,8 @@
   "name": "mjml-head",
   "description": "mjml-head",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "files": [
     "lib"
   ],
@@ -18,7 +19,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",

diff --git a/packages/mjml-hero/package.json b/packages/mjml-hero/package.json
@@ -2,7 +2,8 @@
   "name": "mjml-hero",
   "description": "mjml-hero",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "files": [
     "lib"
   ],
@@ -18,7 +19,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",

diff --git a/packages/mjml-image/package.json b/packages/mjml-image/package.json
@@ -2,7 +2,8 @@
   "name": "mjml-image",
   "description": "mjml-image",
   "version": "4.9.3",
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "files": [
     "lib"
   ],
@@ -18,7 +19,8 @@
   "homepage": "https://mjml.io",
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib --root-mode upward"
+    "build": "babel src --out-dir lib/cjs --root-mode upward",
+    "build:esm": "babel src --out-dir lib/esm --root-mode upward"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.7",