feat: add ES module builds (decaporg#2215)

babel.config.js

@@ -1,6 +1,9 @@
 const path = require('path');
+const version = require('./packages/netlify-cms/package.json').version;
+const coreVersion = require('./packages/netlify-cms-core/package.json').version;
 const isProduction = process.env.NODE_ENV === 'production';
 const isTest = process.env.NODE_ENV === 'test';
+const isESM = process.env.NODE_ENV === 'esm';
 
 const presets = () => {
   if (isTest) {
@@ -32,23 +35,48 @@ const plugins = () => {
     '@babel/plugin-proposal-export-default-from',
     [
       'module-resolver',
-      {
-        root: path.join(__dirname, 'packages/netlify-cms-core/src/components'),
-        alias: {
-          coreSrc: path.join(__dirname, 'packages/netlify-cms-core/src'),
-          Actions: path.join(__dirname, 'packages/netlify-cms-core/src/actions/'),
-          Constants: path.join(__dirname, 'packages/netlify-cms-core/src/constants/'),
-          Formats: path.join(__dirname, 'packages/netlify-cms-core/src/formats/'),
-          Integrations: path.join(__dirname, 'packages/netlify-cms-core/src/integrations/'),
-          Lib: path.join(__dirname, 'packages/netlify-cms-core/src/lib/'),
-          Reducers: path.join(__dirname, 'packages/netlify-cms-core/src/reducers/'),
-          ReduxStore: path.join(__dirname, 'packages/netlify-cms-core/src/redux/'),
-          Routing: path.join(__dirname, 'packages/netlify-cms-core/src/routing/'),
-          ValueObjects: path.join(__dirname, 'packages/netlify-cms-core/src/valueObjects/'),
-          redux: 'redux',
-          localforage: 'localforage',
-        },
-      },
+      isESM
+        ? {
+            root: ['./src'],
+            alias: {
+              coreSrc: './src',
+              Actions: './src/actions',
+              App: './src/components/App',
+              Collection: './src/components/Collection',
+              Constants: './src/constants',
+              Editor: './src/components/Editor',
+              EditorWidgets: './src/components/EditorWidgets',
+              Formats: './src/formats',
+              Integrations: './src/integrations',
+              Lib: './src/lib',
+              MediaLibrary: './src/components/MediaLibrary',
+              Reducers: './src/reducers',
+              ReduxStore: './src/redux',
+              Routing: './src/routing',
+              UI: './src/components/UI',
+              Workflow: './src/components/Workflow',
+              ValueObjects: './src/valueObjects',
+              localforage: 'localforage',
+              redux: 'redux',
+            },
+          }
+        : {
+            root: path.join(__dirname, 'packages/netlify-cms-core/src/components'),
+            alias: {
+              coreSrc: path.join(__dirname, 'packages/netlify-cms-core/src'),
+              Actions: path.join(__dirname, 'packages/netlify-cms-core/src/actions/'),
+              Constants: path.join(__dirname, 'packages/netlify-cms-core/src/constants/'),
+              Formats: path.join(__dirname, 'packages/netlify-cms-core/src/formats/'),
+              Integrations: path.join(__dirname, 'packages/netlify-cms-core/src/integrations/'),
+              Lib: path.join(__dirname, 'packages/netlify-cms-core/src/lib/'),
+              Reducers: path.join(__dirname, 'packages/netlify-cms-core/src/reducers/'),
+              ReduxStore: path.join(__dirname, 'packages/netlify-cms-core/src/redux/'),
+              Routing: path.join(__dirname, 'packages/netlify-cms-core/src/routing/'),
+              ValueObjects: path.join(__dirname, 'packages/netlify-cms-core/src/valueObjects/'),
+              localforage: 'localforage',
+              redux: 'redux',
+            },
+          },
     ],
   ];
 
@@ -65,6 +93,34 @@ const plugins = () => {
     ];
   }
 
+  if (isESM) {
+    return [
+      ...defaultPlugins,
+      [
+        'transform-define',
+        {
+          NETLIFY_CMS_VERSION: `${version}`,
+          NETLIFY_CMS_CORE_VERSION: `${coreVersion}`,
+        },
+      ],
+      [
+        'emotion',
+        {
+          hoist: true,
+          autoLabel: true,
+        },
+      ],
+      [
+        'inline-svg',
+        {
+          svgo: {
+            plugins: [{ removeViewBox: false }],
+          },
+        },
+      ],
+    ];
+  }
+
   if (isTest) {
     return [
       ...defaultPlugins,

package.json

@@ -4,8 +4,9 @@
     "start": "run-s bootstrap develop",
     "watch": "lerna run watch --parallel",
     "develop": "lerna run develop --parallel",
-    "build": "run-s clean build:lerna",
+    "build": "run-s clean build:esm build:lerna",
     "build:lerna": "lerna run build",
+    "build:esm": "lerna run build:esm",
     "build-preview": "run-s build build-preview:lerna",
     "build-preview:lerna": "lerna run build-preview",
     "clean": "rimraf packages/*/dist dev-test/*.js",
@@ -82,6 +83,7 @@
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-module-resolver": "^3.2.0",
     "babel-plugin-transform-builtin-extend": "^1.1.2",
+    "babel-plugin-transform-define": "1.3.1",
     "babel-plugin-transform-export-extensions": "^6.22.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
     "cache-me-outside": "^0.0.4",

packages/netlify-cms-backend-bitbucket/package.json

@@ -4,6 +4,7 @@
   "version": "2.2.0",
   "repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-backend-bitbucket",
   "bugs": "https://github.com/netlify/netlify-cms/issues",
+  "module": "dist/esm/index.js",
   "main": "dist/netlify-cms-backend-bitbucket.js",
   "license": "MIT",
   "keywords": [
@@ -16,7 +17,8 @@
   "scripts": {
     "watch": "webpack -w",
     "develop": "npm run watch",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore src/**/__tests__/* --root-mode upward"
   },
   "dependencies": {
     "js-base64": "^2.5.1",

packages/netlify-cms-backend-git-gateway/package.json

@@ -4,6 +4,7 @@
   "version": "2.3.1-beta.0",
   "repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-backend-git-gateway",
   "bugs": "https://github.com/netlify/netlify-cms/issues",
+  "module": "dist/esm/index.js",
   "main": "dist/netlify-cms-backend-git-gateway.js",
   "license": "MIT",
   "keywords": [
@@ -17,7 +18,8 @@
   "scripts": {
     "watch": "webpack -w",
     "develop": "npm run watch",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore src/**/__tests__/* --root-mode upward"
   },
   "dependencies": {
     "gotrue-js": "^0.9.24",

packages/netlify-cms-backend-github/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-backend-github",
   "bugs": "https://github.com/netlify/netlify-cms/issues",
+  "module": "dist/esm/index.js",
   "main": "dist/netlify-cms-backend-github.js",
   "keywords": [
     "netlify",
@@ -16,7 +17,8 @@
   "scripts": {
     "watch": "webpack -w",
     "develop": "npm run watch",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore src/**/__tests__/* --root-mode upward"
   },
   "dependencies": {
     "common-tags": "^1.8.0",

packages/netlify-cms-backend-gitlab/package.json

@@ -5,6 +5,7 @@
   "repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-backend-gitlab",
   "bugs": "https://github.com/netlify/netlify-cms/issues",
   "license": "MIT",
+  "module": "dist/esm/index.js",
   "main": "dist/netlify-cms-backend-gitlab.js",
   "keywords": [
     "netlify",
@@ -16,7 +17,8 @@
   "scripts": {
     "watch": "webpack -w",
     "develop": "npm run watch",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore src/**/__tests__/* --root-mode upward"
   },
   "dependencies": {
     "js-base64": "^2.5.1",

packages/netlify-cms-backend-test/package.json

@@ -5,6 +5,7 @@
   "repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-backend-test",
   "bugs": "https://github.com/netlify/netlify-cms/issues",
   "license": "MIT",
+  "module": "dist/esm/index.js",
   "main": "dist/netlify-cms-backend-test.js",
   "keywords": [
     "netlify",
@@ -15,7 +16,8 @@
   "scripts": {
     "watch": "webpack -w",
     "develop": "npm run watch",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore src/**/__tests__/* --root-mode upward"
   },
   "peerDependencies": {
     "@emotion/core": "^10.0.9",

packages/netlify-cms-core/package.json

@@ -4,13 +4,15 @@
   "version": "2.9.1-beta.0",
   "repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-core",
   "bugs": "https://github.com/netlify/netlify-cms/issues",
+  "module": "dist/esm/index.js",
   "main": "dist/netlify-cms-core.js",
   "files": [
     "src/",
     "dist/"
   ],
   "scripts": {
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore src/**/__tests__/* --root-mode upward"
   },
   "keywords": [
     "netlify",

packages/netlify-cms-core/src/bootstrap.js

@@ -23,9 +23,7 @@ function bootstrap(opts = {}) {
   /**
    * Log the version number.
    */
-  if (NETLIFY_CMS_VERSION) {
-    console.log(`netlify-cms ${NETLIFY_CMS_VERSION}`);
-  } else if (NETLIFY_CMS_CORE_VERSION) {
+  if (typeof NETLIFY_CMS_CORE_VERSION === 'string') {
     console.log(`netlify-cms-core ${NETLIFY_CMS_CORE_VERSION}`);
   }
 

packages/netlify-cms-default-exports/package.json

@@ -4,6 +4,7 @@
   "description": "NetlifyCMS default exports",
   "repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-default-exports",
   "bugs": "https://github.com/netlify/netlify-cms/issues",
+  "module": "dist/esm/index.js",
   "main": "dist/netlify-cms-editor-component-image.js",
   "license": "MIT",
   "keywords": [
@@ -17,7 +18,7 @@
     "watch": "webpack -w",
     "develop": "npm run watch",
     "build": "cross-env NODE_ENV=production webpack",
-    "build:dev": "cross-env NODE_ENV=development webpack"
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore src/**/__tests__/* --root-mode upward"
   },
   "dependencies": {
     "@emotion/core": "^10.0.9",

packages/netlify-cms-editor-component-image/package.json

@@ -4,6 +4,7 @@
   "version": "2.3.0",
   "repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-editor-component-image",
   "bugs": "https://github.com/netlify/netlify-cms/issues",
+  "module": "dist/esm/index.js",
   "main": "dist/netlify-cms-editor-component-image.js",
   "license": "MIT",
   "keywords": [
@@ -16,7 +17,8 @@
   "scripts": {
     "watch": "webpack -w",
     "develop": "npm run watch",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore src/**/__tests__/* --root-mode upward"
   },
   "devDependencies": {
     "cross-env": "^5.2.0",

packages/netlify-cms-lib-auth/package.json

@@ -4,6 +4,7 @@
   "version": "2.1.0",
   "repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-lib-auth",
   "bugs": "https://github.com/netlify/netlify-cms/issues",
+  "module": "dist/esm/index.js",
   "main": "dist/netlify-cms-lib-auth.js",
   "license": "MIT",
   "files": [
@@ -17,7 +18,8 @@
   "scripts": {
     "watch": "webpack -w",
     "develop": "npm run watch",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore src/**/__tests__/* --root-mode upward"
   },
   "peerDependencies": {
     "immutable": "^3.7.6",

packages/netlify-cms-lib-util/package.json

@@ -4,6 +4,7 @@
   "version": "2.2.0",
   "repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-lib-util",
   "bugs": "https://github.com/netlify/netlify-cms/issues",
+  "module": "dist/esm/index.js",
   "main": "dist/netlify-cms-lib-util.js",
   "license": "MIT",
   "keywords": [
@@ -13,7 +14,8 @@
   "scripts": {
     "watch": "webpack -w",
     "develop": "npm run watch",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore src/**/__tests__/* --root-mode upward"
   },
   "dependencies": {
     "js-sha256": "^0.9.0",

packages/netlify-cms-media-library-cloudinary/package.json

@@ -4,6 +4,7 @@
   "version": "1.2.0",
   "repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-media-library-cloudinary",
   "bugs": "https://github.com/netlify/netlify-cms/issues",
+  "module": "dist/esm/index.js",
   "main": "dist/netlify-cms-media-library-cloudinary.js",
   "license": "MIT",
   "keywords": [
@@ -21,7 +22,8 @@
   "scripts": {
     "watch": "webpack -w",
     "develop": "npm run watch",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore src/**/__tests__/* --root-mode upward"
   },
   "peerDependencies": {
     "netlify-cms-lib-util": "^2.1.3-beta.0"

packages/netlify-cms-media-library-uploadcare/package.json

@@ -4,6 +4,7 @@
   "version": "0.4.0",
   "repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-media-library-uploadcare",
   "bugs": "https://github.com/netlify/netlify-cms/issues",
+  "module": "dist/esm/index.js",
   "main": "dist/netlify-cms-media-library-uploadcare.js",
   "license": "MIT",
   "keywords": [
@@ -19,7 +20,8 @@
   "scripts": {
     "watch": "webpack -w",
     "develop": "npm run watch",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore src/**/__tests__/* --root-mode upward"
   },
   "dependencies": {
     "uploadcare-widget": "^3.7.0",

packages/netlify-cms-ui-default/package.json

@@ -5,6 +5,7 @@
   "repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-ui-default",
   "bugs": "https://github.com/netlify/netlify-cms/issues",
   "license": "MIT",
+  "module": "dist/esm/index.js",
   "main": "dist/netlify-cms-ui-default.js",
   "keywords": [
     "netlify-cms"
@@ -13,7 +14,8 @@
   "scripts": {
     "watch": "webpack -w",
     "develop": "npm run watch",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore src/**/__tests__/* --root-mode upward"
   },
   "dependencies": {
     "react-aria-menubutton": "^6.0.0",

packages/netlify-cms-widget-boolean/package.json

@@ -5,6 +5,7 @@
   "homepage": "https://www.netlifycms.org/docs/widgets/#boolean",
   "repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-widget-boolean",
   "bugs": "https://github.com/netlify/netlify-cms/issues",
+  "module": "dist/esm/index.js",
   "main": "dist/netlify-cms-widget-boolean.js",
   "license": "MIT",
   "keywords": [
@@ -17,7 +18,8 @@
   "scripts": {
     "watch": "webpack -w",
     "develop": "npm run watch",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore src/**/__tests__/* --root-mode upward"
   },
   "peerDependencies": {
     "@emotion/core": "^10.0.9",