feat: provide usable UMD builds for all packages (#2141)

scripts/externals.js

@@ -0,0 +1,108 @@
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Takes a dash [-] separated name and makes it camel-cased
+ * netlify-cms-something to NetlifyCmsSomething
+ * @param {} string
+ */
+const toGlobalName = name =>
+  `${name}`
+    .replace(new RegExp(/[-_/]+/, 'g'), ' ')
+    .replace(new RegExp(/[^\w\s]/, 'g'), '')
+    .replace(
+      new RegExp(/\s+(.)(\w+)/, 'g'),
+      ($1, $2, $3) => `${$2.toUpperCase() + $3.toLowerCase()}`,
+    )
+    .replace(new RegExp(/\s/, 'g'), '')
+    .replace(new RegExp(/\w/), s => s.toUpperCase());
+
+const packages = fs.readdirSync(path.resolve(__dirname, '../packages'));
+
+const packageExports = {};
+packages.map(name => {
+  packageExports[name] = {
+    root: `${toGlobalName(name)}`.split('.'),
+    commonjs2: name,
+    commonjs: name,
+    amd: name,
+    umd: name,
+  };
+});
+
+module.exports = {
+  toGlobalName,
+  externals: {
+    ...packageExports,
+    lodash: {
+      root: ['NetlifyCmsDefaultExports', 'Lodash'],
+      commonjs2: 'lodash',
+      commonjs: 'lodash',
+      amd: 'lodash',
+      umd: 'lodash',
+    },
+    '@emotion/core': {
+      root: ['NetlifyCmsDefaultExports', 'EmotionCore'],
+      commonjs2: '@emotion/core',
+      commonjs: '@emotion/core',
+      amd: '@emotion/core',
+      umd: '@emotion/core',
+    },
+    '@emotion/styled': {
+      root: ['NetlifyCmsDefaultExports', 'EmotionStyled'],
+      commonjs2: '@emotion/styled',
+      commonjs: '@emotion/styled',
+      amd: '@emotion/styled',
+      umd: '@emotion/styled',
+    },
+    immutable: {
+      root: ['NetlifyCmsDefaultExports', 'Immutable'],
+      commonjs2: 'immutable',
+      commonjs: 'immutable',
+      amd: 'immutable',
+      umd: 'immutable',
+    },
+    moment: {
+      root: ['NetlifyCmsDefaultExports', 'Moment'],
+      commonjs2: 'moment',
+      commonjs: 'moment',
+      amd: 'moment',
+      umd: 'moment',
+    },
+    'prop-types': {
+      root: ['NetlifyCmsDefaultExports', 'PropTypes'],
+      commonjs2: 'prop-types',
+      commonjs: 'prop-types',
+      amd: 'prop-types',
+      umd: 'prop-types',
+    },
+    'react-immutable-proptypes': {
+      root: ['NetlifyCmsDefaultExports', 'ImmutablePropTypes'],
+      commonjs2: 'react-immutable-proptypes',
+      commonjs: 'react-immutable-proptypes',
+      amd: 'react-immutable-proptypes',
+      umd: 'react-immutable-proptypes',
+    },
+    react: {
+      root: 'React',
+      commonjs2: 'react',
+      commonjs: 'react',
+      amd: 'react',
+      umd: 'react',
+    },
+    'react-dom': {
+      root: 'ReactDOM',
+      commonjs2: 'react-dom',
+      commonjs: 'react-dom',
+      amd: 'react-dom',
+      umd: 'react-dom',
+    },
+    uuid: {
+      root: ['NetlifyCmsDefaultExports', 'UUId'],
+      commonjs2: 'uuid',
+      commonjs: 'uuid',
+      amd: 'uuid',
+      umd: 'uuid',
+    },
+  },
+};

scripts/webpack.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const webpack = require('webpack');
 const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
+const { toGlobalName, externals } = require('./externals');
 const pkg = require(path.join(process.cwd(), 'package.json'));
 
 const isProduction = process.env.NODE_ENV === 'production';
@@ -16,6 +17,11 @@ const rules = () => ({
       },
     },
   }),
+  css: () => ({
+    test: /\.css$/,
+    include: [/(ol|redux-notifications|react-datetime)/],
+    use: ['to-string-loader', 'css-loader'],
+  }),
   svg: () => ({
     test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
     exclude: [/node_modules/],
@@ -51,16 +57,54 @@ const stats = () => {
   };
 };
 
-const getConfig = () => ({
+const umdPath = path.resolve(process.cwd(), 'dist');
+const umdDirPath = path.resolve(process.cwd(), 'dist/umd');
+const cjsPath = path.resolve(process.cwd(), 'dist/cjs');
+const targetOutputs = () => {
+  console.log(`Building [${pkg.name}, library: ${toGlobalName(pkg.name)}]`);
+  return {
+    umd: {
+      path: umdPath,
+      filename: `${pkg.name}.js`,
+      library: toGlobalName(pkg.name),
+      libraryTarget: 'umd',
+      libraryExport: toGlobalName(pkg.name),
+      umdNamedDefine: true,
+      globalObject: 'window',
+    },
+    umddir: {
+      path: umdDirPath,
+      filename: `index.js`,
+      library: toGlobalName(pkg.name),
+      libraryTarget: 'umd',
+      libraryExport: toGlobalName(pkg.name),
+      umdNamedDefine: true,
+      globalObject: 'window',
+    },
+    cjs: {
+      path: cjsPath,
+      filename: 'index.js',
+      library: toGlobalName(pkg.name),
+      libraryTarget: 'window',
+    },
+  };
+};
+
+const umdExternals = Object.keys(pkg.peerDependencies || {}).reduce((previous, key) => {
+  if (!externals[key]) throw `Missing external [${key}]`;
+  previous[key] = externals[key] || null;
+  return previous;
+}, {});
+
+/**
+ * Use [getConfig({ target:'umd' }), getConfig({ target:'cjs' })] for
+ *  getting multiple configs and add the new output in targetOutputs if needed.
+ * Default: umd
+ */
+const baseConfig = ({ target = isProduction ? 'umd' : 'umddir' } = {}) => ({
   mode: isProduction ? 'production' : 'development',
   entry: './src/index.js',
-  output: {
-    path: process.cwd(),
-    filename: pkg.main,
-    library: pkg.name,
-    libraryTarget: 'umd',
-    umdNamedDefine: true,
-  },
+  output: targetOutputs()[target],
   module: {
     rules: Object.values(rules()).map(rule => rule()),
   },
@@ -71,16 +115,25 @@ const getConfig = () => ({
   /**
    * Exclude peer dependencies from package bundles.
    */
-  externals: (context, request, cb) => {
-    const localExternals = pkg.localExternals || [];
-    const peerDeps = Object.keys(pkg.peerDependencies || {});
-    const externals = isProduction ? peerDeps : [...localExternals, ...peerDeps];
-    const isPeerDep = dep => new RegExp(`^${dep}($|/)`).test(request);
-    return externals.some(isPeerDep) ? cb(null, request) : cb();
-  },
+  externals:
+    target.substr(0, 3) === 'umd'
+      ? umdExternals
+      : (context, request, cb) => {
+          const externals = Object.keys(pkg.peerDependencies || {});
+          const isPeerDep = dep => new RegExp(`^${dep}($|/)`).test(request);
+          return externals.some(isPeerDep) ? cb(null, request) : cb();
+        },
   stats: stats(),
 });
 
+const getConfig = ({ baseOnly = false } = {}) => {
+  if (baseOnly) {
+    // netlify-cms build
+    return baseConfig({ target: 'umd' });
+  }
+  return [baseConfig({ target: 'umd' })];
+};
+
 module.exports = {
   getConfig,
   rules: rules(),