Merge pull request #21 from react-hook-form/improve-rollup-config

improve rollup config

Author: bluebill1049

package.json

@@ -4,10 +4,11 @@
   "description": "React Hook Form error message component",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
-  "umd:main": "dist/index.umd.min.js",
-  "unpkg": "dist/index.umd.min.js",
-  "jsdelivr": "dist/index.umd.min.js",
+  "umd:main": "dist/index.umd.production.min.js",
+  "unpkg": "dist/index.umd.production.min.js",
+  "jsdelivr": "dist/index.umd.production.min.js",
   "jsnext:main": "dist/index.esm.js",
+  "source": "src/index.tsx",
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "files": [
@@ -18,13 +19,13 @@
   },
   "scripts": {
     "clean": "rimraf dist",
-    "build": "npm run clean && rollup -c",
-    "lint": "eslint '**/*.{js,ts,tsx}'",
+    "prebuild": "npm run clean",
+    "build": "node rollup/writeCjsEntryFile.js && rollup -c",
+    "lint": "eslint '**/*.{js,ts}'",
     "lint:fix": "npm run lint -- --fix",
     "lint:types": "tsc --noEmit",
     "test": "jest --runInBand",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
+    "test:watch": "npm run test -- --watchAll --coverage",
     "postversion": "git push && git push origin v$npm_package_version",
     "prepublishOnly": "npm run lint && npm run lint:types && npm test && npm run build"
   },
@@ -53,6 +54,7 @@
     "@rollup/plugin-commonjs": "^13.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^8.0.1",
+    "@rollup/plugin-replace": "^2.3.3",
     "@testing-library/react": "^10.2.1",
     "@testing-library/react-hooks": "^3.2.1",
     "@types/jest": "^26.0.0",

rollup.config.js

@@ -1,61 +1,51 @@
-import external from 'rollup-plugin-peer-deps-external';
-import json from '@rollup/plugin-json';
-import typescript from 'rollup-plugin-typescript2';
-import commonjs from '@rollup/plugin-commonjs';
-import resolve from '@rollup/plugin-node-resolve';
-import sourcemaps from 'rollup-plugin-sourcemaps';
-import { terser } from 'rollup-plugin-terser';
+import { createRollupConfig } from './rollup/createRollupConfig';
 import pkg from './package.json';
 
-export default [
+const name = 'index';
+const umdName = 'ReactHookFormErrorMessage';
+const options = [
   {
-    input: 'src/index.tsx',
-    output: {
-      name: 'ReactHookFormErrorMessage',
-      file: pkg.unpkg,
-      format: 'umd',
-      sourcemap: true,
-      globals: {
-        react: 'React',
-        'react-dom': 'ReactDOM',
-        'react-hook-form': 'ReactHookForm',
-      },
-    },
-    plugins: [
-      external(),
-      json(),
-      typescript({
-        clean: true,
-      }),
-      commonjs(),
-      resolve(),
-      sourcemaps(),
-      terser(),
-    ],
+    name,
+    umdName,
+    format: 'cjs',
+    env: 'development',
+    input: pkg.source,
   },
   {
-    input: 'src/index.tsx',
-    output: [
-      {
-        file: pkg.main,
-        format: 'cjs',
-        sourcemap: true,
-      },
-      {
-        file: pkg.module,
-        format: 'es',
-        sourcemap: true,
-      },
-    ],
-    plugins: [
-      external(),
-      json(),
-      typescript({
-        clean: true,
-      }),
-      commonjs(),
-      resolve(),
-      sourcemaps(),
-    ],
+    name,
+    umdName,
+    format: 'cjs',
+    env: 'production',
+    input: pkg.source,
+  },
+  {
+    name,
+    umdName,
+    format: 'esm',
+    input: pkg.source,
+  },
+  {
+    name,
+    umdName,
+    format: 'umd',
+    env: 'development',
+    input: pkg.source,
+  },
+  {
+    name,
+    umdName,
+    format: 'umd',
+    env: 'production',
+    input: pkg.source,
+  },
+  {
+    name,
+    umdName,
+    format: 'esm',
+    formatName: 'ie11',
+    input: pkg.source,
+    tsconfig: './tsconfig.ie11.json',
   },
 ];
+
+export default options.map((option) => createRollupConfig(option));

rollup/createRollupConfig.js

@@ -0,0 +1,80 @@
+import ts from 'typescript';
+import path from 'path';
+import external from 'rollup-plugin-peer-deps-external';
+import json from '@rollup/plugin-json';
+import replace from '@rollup/plugin-replace';
+import typescript from 'rollup-plugin-typescript2';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import sourcemaps from 'rollup-plugin-sourcemaps';
+import { terser } from 'rollup-plugin-terser';
+import { safePackageName } from './safePackageName';
+import { pascalcase } from './pascalcase';
+import pkg from '../package.json';
+
+export function createRollupConfig(options, callback) {
+  const name = options.name || safePackageName(pkg.name);
+  const umdName = options.umdName || pascalcase(safePackageName(pkg.name));
+  const shouldMinify = options.minify || options.env === 'production';
+  const tsconfigPath = options.tsconfig || 'tsconfig.json';
+  const tsconfigJSON = ts.readConfigFile(tsconfigPath, ts.sys.readFile).config;
+  const tsCompilerOptions = ts.parseJsonConfigFileContent(
+    tsconfigJSON,
+    ts.sys,
+    './',
+  ).options;
+
+  const outputName = [
+    path.join(tsCompilerOptions.outDir, name),
+    options.formatName || options.format,
+    options.env,
+    shouldMinify ? 'min' : '',
+    'js',
+  ]
+    .filter(Boolean)
+    .join('.');
+
+  const config = {
+    input: options.input,
+    output: {
+      file: outputName,
+      format: options.format,
+      name: umdName,
+      sourcemap: true,
+      globals: {
+        react: 'React',
+        'react-hook-form': 'ReactHookForm',
+      },
+      exports: 'named',
+    },
+    plugins: [
+      external({
+        includeDependencies: options.format !== 'umd',
+      }),
+      json(),
+      typescript({
+        tsconfig: options.tsconfig,
+        clean: true,
+      }),
+      resolve(),
+      options.format === 'umd' &&
+        commonjs({
+          include: /\/node_modules\//,
+        }),
+      options.env !== undefined &&
+        replace({
+          'process.env.NODE_ENV': JSON.stringify(options.env),
+        }),
+      sourcemaps(),
+      shouldMinify &&
+        terser({
+          output: { comments: false },
+          compress: {
+            drop_console: true,
+          },
+        }),
+    ].filter(Boolean),
+  };
+
+  return callback ? callback(config) : config;
+}

rollup/pascalcase.js

@@ -0,0 +1,25 @@
+const titlecase = (input) => input[0].toLocaleUpperCase() + input.slice(1);
+
+export const pascalcase = (value) => {
+  if (value === null || value === void 0) {
+    return '';
+  }
+  if (typeof value.toString !== 'function') {
+    return '';
+  }
+
+  let input = value.toString().trim();
+  if (input === '') {
+    return '';
+  }
+  if (input.length === 1) {
+    return input.toLocaleUpperCase();
+  }
+
+  let match = input.match(/[a-zA-Z0-9]+/g);
+  if (match) {
+    return match.map((m) => titlecase(m)).join('');
+  }
+
+  return input;
+};

rollup/safePackageName.js

@@ -0,0 +1,4 @@
+export const safePackageName = (name) =>
+  name
+    .toLowerCase()
+    .replace(/(^@.*\/)|((^[^a-zA-Z]+)|[^\w.-])|([^a-zA-Z0-9]+$)/g, '');

rollup/writeCjsEntryFile.js

@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const ts = require('typescript');
+const fs = require('fs-extra');
+const path = require('path');
+const pkg = require('../package.json');
+
+function writeCjsEntryFile(
+  name = pkg.name,
+  formatName = 'cjs',
+  tsconfig = 'tsconfig.json',
+) {
+  const baseLine = `module.exports = require('./${name}`;
+  const contents = `
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  ${baseLine}.${formatName}.production.min.js')
+} else {
+  ${baseLine}.${formatName}.development.js')
+}
+`;
+
+  const tsconfigJSON = ts.readConfigFile(tsconfig, ts.sys.readFile).config;
+  const tsCompilerOptions = ts.parseJsonConfigFileContent(
+    tsconfigJSON,
+    ts.sys,
+    './',
+  ).options;
+
+  const filename =
+    formatName === 'cjs'
+      ? [name, 'js'].join('.')
+      : [name, formatName, 'js'].join('.');
+
+  return fs.outputFile(path.join(tsCompilerOptions.outDir, filename), contents);
+}
+
+writeCjsEntryFile('index');

tsconfig.ie11.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "target": "es5",
+    "downlevelIteration": true
+  }
+}

yarn.lock

@@ -505,6 +505,14 @@
     is-module "^1.0.0"
     resolve "^1.14.2"
 
+"@rollup/plugin-replace@^2.3.3":
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.3.3.tgz#cd6bae39444de119f5d905322b91ebd4078562e7"
+  integrity sha512-XPmVXZ7IlaoWaJLkSCDaa0Y6uVo5XQYHhiMFzOd5qSv5rE+t/UJToPIOE56flKIxBFQI27ONsxb7dqHnwSsjKQ==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.8"
+    magic-string "^0.25.5"
+
 "@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.0.9":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
@@ -3212,7 +3220,7 @@ loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-magic-string@^0.25.2:
+magic-string@^0.25.2, magic-string@^0.25.5:
   version "0.25.7"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
   integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==