Merge pull request #25 from jorisre/reduce-bundle-size

Reduce bundle size

Author: bluebill1049

.github/workflows/size.yml

@@ -0,0 +1,12 @@
+name: size
+on: [pull_request]
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/checkout@v1
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

jest.config.js

@@ -1,13 +1,6 @@
 module.exports = {
   roots: ['<rootDir>/src'],
-  transform: {
-    '^.+\\.tsx?$': 'ts-jest',
-  },
-  globals: {
-    'ts-jest': {
-      tsConfig: 'tsconfig.jest.json',
-    },
-  },
+  preset: 'ts-jest',
   testMatch: ['**/?(*.)+(spec|test).ts?(x)'],
   transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$'],
   moduleFileExtensions: ['ts', 'tsx', 'js'],

package.json

@@ -2,13 +2,14 @@
   "name": "@hookform/error-message",
   "version": "0.0.4",
   "description": "React Hook Form error message component",
+  "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
-  "umd:main": "dist/index.umd.production.min.js",
-  "unpkg": "dist/index.umd.production.min.js",
-  "jsdelivr": "dist/index.umd.production.min.js",
+  "esmodule": "dist/index.modern.js",
   "jsnext:main": "dist/index.esm.js",
-  "source": "src/index.ts",
+  "unpkg": "dist/index.umd.js",
+  "umd:main": "dist/index.umd.js",
+  "jsdelivr": "dist/index.umd.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "files": [
@@ -17,10 +18,24 @@
   "publishConfig": {
     "access": "public"
   },
+  "size-limit": [
+    {
+      "path": "dist/index.js",
+      "limit": "264 B"
+    },
+    {
+      "path": "dist/index.esm.js",
+      "limit": "288 B"
+    },
+    {
+      "path": "dist/index.umd.js",
+      "limit": "270 B"
+    }
+  ],
   "scripts": {
     "clean": "rimraf dist",
     "prebuild": "npm run clean",
-    "build": "node rollup/writeCjsEntryFile.js && rollup -c",
+    "build": "microbundle build --jsx React.createElement",
     "lint": "eslint '**/*.{js,ts}'",
     "lint:fix": "npm run lint -- --fix",
     "lint:types": "tsc --noEmit",
@@ -51,39 +66,33 @@
   },
   "homepage": "https://react-hook-form.com",
   "devDependencies": {
-    "@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",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.4",
-    "@types/react-test-renderer": "^16.9.0",
-    "@typescript-eslint/eslint-plugin": "^3.2.0",
-    "@typescript-eslint/parser": "^3.2.0",
-    "eslint": "^7.2.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.13.0",
-    "eslint-plugin-react-hooks": "^4.0.4",
-    "husky": "^4.2.5",
-    "jest": "^26.0.1",
-    "lint-staged": "^10.2.2",
-    "prettier": "^2.0.5",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-hook-form": "^6.7.0",
-    "react-test-renderer": "^16.9.0",
+    "@size-limit/preset-small-lib": "^4.9.0",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/react-hooks": "^3.4.2",
+    "@types/jest": "^26.0.15",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/react-test-renderer": "^17.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.8.1",
+    "@typescript-eslint/parser": "^4.8.1",
+    "eslint": "^7.14.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "husky": "^4.3.0",
+    "jest": "^26.6.3",
+    "lint-staged": "^10.5.1",
+    "microbundle": "^0.12.4",
+    "prettier": "^2.2.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-hook-form": "^6.11.4",
+    "react-test-renderer": "^17.0.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.15.0",
-    "rollup-plugin-peer-deps-external": "^2.2.2",
-    "rollup-plugin-sourcemaps": "^0.6.2",
-    "rollup-plugin-terser": "^6.1.0",
-    "rollup-plugin-typescript2": "^0.27.1",
-    "ts-jest": "^26.1.0",
-    "typescript": "^3.7.2"
+    "size-limit": "^4.9.0",
+    "ts-jest": "^26.4.4",
+    "typescript": "^4.1.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -100,8 +109,7 @@
       "npm run lint:fix"
     ],
     "*.{md,json}": [
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ]
   }
 }

rollup.config.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useFormContext, get, FieldErrors } from 'react-hook-form';
 import { Props } from './types';
 
@@ -25,25 +25,18 @@ const ErrorMessage = <
   }
 
   const { message: messageFromRegister, types } = error;
-  const props = {
-    ...rest,
+  const props = Object.assign({}, rest, {
     children: messageFromRegister || message,
-  };
+  });
 
-  return as ? (
-    React.isValidElement(as) ? (
-      React.cloneElement(as, props)
-    ) : (
-      React.createElement(as as string, props)
-    )
-  ) : render ? (
-    (render({
-      message: messageFromRegister || message,
-      messages: types,
-    }) as React.ReactElement)
-  ) : (
-    <React.Fragment {...props} />
-  );
+  return React.isValidElement(as)
+    ? React.cloneElement(as, props)
+    : render
+    ? (render({
+        message: messageFromRegister || message,
+        messages: types,
+      }) as React.ReactElement)
+    : React.createElement((as as string) || React.Fragment, props);
 };
 
 export { ErrorMessage };