refactor: use rollup (#760)

* refactor: use rollup

* chore: use sourcemaps files

* fix: increase size limit

Author: dangreen

.size-limit

@@ -1,7 +1,7 @@
 [
   {
     "path": "dist/index.js",
-    "limit": "2 KB",
+    "limit": "2.5 KB",
     "webpack": false,
     "running": false
   },
@@ -12,13 +12,13 @@
   },
   {
     "path": "dist/index.modern.js",
-    "limit": "1.8 KB",
+    "limit": "2.3 KB",
     "webpack": false,
     "running": false
   },
   {
     "path": "dist/index.modern.js",
-    "limit": "9.3 KB",
+    "limit": "9.4 KB",
     "import": "ChartComponent"
   }
 ]

package.json

@@ -2,7 +2,6 @@
   "name": "react-chartjs-2",
   "version": "3.0.5",
   "description": "React components for Chart.js",
-  "source": "src/index.tsx",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "author": "Jeremy Ayerst",
@@ -24,16 +23,14 @@
     "react-chart.js"
   ],
   "scripts": {
-    "build": "microbundle-crl --no-compress --format modern,cjs",
-    "start": "microbundle-crl watch --no-compress --format modern,cjs",
-    "dev": "microbundle-crl --no-compress --no-sourcemap watch",
+    "emitDeclarations": "tsc --skipLibCheck --emitDeclarationOnly",
+    "build": "rollup -c & yarn emitDeclarations",
     "prepublishOnly": "yarn build",
     "test:lint": "eslint 'src/**/*.{ts,tsx}' 'test/**/*.{ts,tsx}'",
     "test:unit": "jest -c jest.config.json",
-    "test:types": "tsc --skipLibCheck --noEmit",
-    "test:size": "size-limit",
     "test:build": "yarn build",
-    "test": "yarn test:lint && yarn test:unit && yarn test:types && yarn test:build && yarn test:size",
+    "test:size": "size-limit",
+    "test": "yarn test:lint && yarn test:unit && yarn test:build && yarn test:size",
     "format": "prettier --write src",
     "predeploy": "cd example && yarn && yarn build",
     "deploy": "gh-pages -d example/build",
@@ -47,8 +44,10 @@
     "react": "^16.8.0 || ^17.0.0"
   },
   "devDependencies": {
+    "@rollup/plugin-node-resolve": "^13.0.5",
     "@size-limit/preset-big-lib": "^6.0.3",
     "@swc/core": "^1.2.95",
+    "@swc/helpers": "^0.2.13",
     "@swc/jest": "^0.2.4",
     "@testing-library/jest-dom": "^5.5.0",
     "@testing-library/react": "^12.1.2",
@@ -57,7 +56,7 @@
     "@types/react": "^17.0.28",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
-    "babel-eslint": "^10.0.3",
+    "browserslist": "^4.17.3",
     "chart.js": "^3.1.0",
     "clean-publish": "^3.4.1",
     "eslint": "^7.32.0",
@@ -73,11 +72,12 @@
     "jest": "^27.2.5",
     "jest-canvas-mock": "^2.2.0",
     "lint-staged": "^11.2.3",
-    "microbundle-crl": "^0.13.11",
     "prettier": "^2.0.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-test-renderer": "^17.0.1",
+    "rollup": "^2.58.0",
+    "rollup-plugin-swc": "^0.2.0",
     "simple-git-hooks": "^2.6.1",
     "size-limit": "^6.0.3",
     "typescript": "^4.4.3"

rollup.config.js

@@ -0,0 +1,56 @@
+import swc from 'rollup-plugin-swc';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import pkg from './package.json';
+
+const extensions = ['.js', '.ts', '.tsx'];
+const external = _ => /node_modules/.test(_) && !/@swc\/helpers/.test(_);
+const plugins = [
+  nodeResolve({
+    extensions,
+  }),
+  swc({
+    jsc: {
+      parser: {
+        syntax: 'typescript',
+        tsx: true,
+      },
+      transform: {
+        react: {
+          useBuiltins: true,
+        },
+      },
+      externalHelpers: true,
+    },
+    env: {
+      targets: 'defaults',
+    },
+    module: {
+      type: 'es6',
+    },
+    sourceMaps: true,
+  }),
+];
+
+export default [
+  {
+    input: 'src/index.tsx',
+    plugins,
+    external,
+    output: {
+      file: pkg.main,
+      format: 'cjs',
+      exports: 'named',
+      sourcemap: true,
+    },
+  },
+  {
+    input: 'src/index.tsx',
+    plugins,
+    external,
+    output: {
+      file: pkg.module,
+      format: 'es',
+      sourcemap: true,
+    },
+  },
+];

tsconfig.json

@@ -16,14 +16,13 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "allowSyntheticDefaultImports": true,
-    "target": "es5",
+    "target": "esnext",
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true
+    "isolatedModules": true
   },
   "include": ["src"],
   "exclude": ["node_modules", "dist", "example"]