improve rollup config (#37)

Author: kotarella1110

index.js

@@ -4,10 +4,11 @@
   "description": "React Hook Form dev tool to help debugging forms",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
-  "jsnext:main": "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.development.js",
+  "unpkg": "dist/index.umd.development.js",
+  "jsdelivr": "dist/index.umd.development.js",
+  "jsnext:main": "dist/index.esm.js",
+  "source": "src/index.tsx",
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "files": [
@@ -18,7 +19,8 @@
   },
   "scripts": {
     "clean": "rimraf dist",
-    "build": "npm run clean && rollup -c",
+    "prebuild": "npm run clean",
+    "build": "node rollup/writeCjsEntryFile.js && rollup -c",
     "lint": "eslint '**/*.{js,ts,tsx}'",
     "lint:fix": "npm run lint -- --fix",
     "lint:types": "tsc --noEmit",
@@ -62,6 +64,7 @@
     "@rollup/plugin-commonjs": "^13.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^8.1.0",
+    "@rollup/plugin-replace": "^2.3.3",
     "@testing-library/react": "^10.0.4",
     "@types/jest": "^25.2.3",
     "@types/react": "^16.9.35",
@@ -78,7 +81,7 @@
     "prettier": "^2.0.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-hook-form": "^5.7.2",
+    "react-hook-form": "^6.0.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.10.7",
     "rollup-plugin-peer-deps-external": "^2.2.2",

package.json

@@ -1,61 +1,29 @@
-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 = 'ReactHookFormDevTools';
+const options = [
   {
-    input: 'src/index.tsx',
-    output: {
-      name: 'ReactHookFormDevTools',
-      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: 'esm',
+    input: pkg.source,
+  },
+  {
+    name,
+    umdName,
+    format: 'umd',
+    env: 'development',
+    input: pkg.source,
   },
 ];
+
+export default options.map((option) => createRollupConfig(option));

rollup.config.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) {
+  const name = options.name || safePackageName(pkg.name);
+  const umdName = options.undName || 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('.');
+
+  return {
+    input: options.input,
+    output: {
+      file: outputName,
+      format: options.format,
+      name: umdName,
+      sourcemap: true,
+      globals: {
+        react: 'React',
+        'react-dom': 'ReactDOM',
+        '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,
+          },
+        }),
+      options.plugins,
+    ],
+  };
+}

rollup/createRollupConfig.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/pascalcase.js

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

rollup/safePackageName.js

@@ -0,0 +1,40 @@
+/* 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') {
+  module.exports = {
+    DevTool: () => null,
+  };
+} 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');

rollup/writeCjsEntryFile.js

@@ -1,10 +1,9 @@
 import colors from './colors';
 import * as React from 'react';
-import { FormStateProxy } from 'react-hook-form';
 import { Button, paraGraphDefaultStyle } from './styled';
 
 type Props = {
-  formState: FormStateProxy<Record<string, any>>;
+  formState: any;
   showFormState: boolean;
   setShowFormState: (payload: boolean) => void;
 };

src/formStateTable.tsx

@@ -621,6 +621,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":
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.0.10.tgz#a659b9025920378494cd8f8c59fbf9b3a50d5f12"
@@ -3416,7 +3424,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==
@@ -4041,10 +4049,10 @@ react-dom@^16.13.1:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
-react-hook-form@^5.7.2:
-  version "5.7.2"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-5.7.2.tgz#a84e259e5d37dd30949af4f79c4dac31101b79ac"
-  integrity sha512-bJvY348vayIvEUmSK7Fvea/NgqbT2racA2IbnJz/aPlQ3GBtaTeDITH6rtCa6y++obZzG6E3Q8VuoXPir7QYUg==
+react-hook-form@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.0.0.tgz#b51faa638aadfa3d4d9758dc1f8d0f67c2b1aa97"
+  integrity sha512-qFUMMnAMnZ84mcMFu/UZ6zkuEUQg/dAKdb9/wbjmOJ/KOgrobTx15aMGPhZyemzk6yLHwG7NmJCEOusRTV9UMg==
 
 react-is@^16.12.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.12.0"