perf: scrolling performance

Author: tannerlinsley

.babelrc.js

@@ -0,0 +1,37 @@
+const { NODE_ENV, BABEL_ENV } = process.env
+const cjs = NODE_ENV === 'test' || BABEL_ENV === 'commonjs'
+const loose = true
+
+module.exports = {
+  presets: [
+    [
+      '@babel/env',
+      {
+        loose,
+        modules: false,
+        exclude: ['@babel/plugin-transform-regenerator'],
+      },
+    ],
+    '@babel/preset-typescript',
+    '@babel/react',
+  ],
+  plugins: [
+    [
+      'const-enum',
+      {
+        transform: 'constObject',
+      },
+    ],
+    'babel-plugin-transform-async-to-promises',
+    cjs && ['@babel/transform-modules-commonjs', { loose }],
+    [
+      '@babel/transform-runtime',
+      {
+        useESModules: !cjs,
+        version: require('./package.json').dependencies[
+          '@babel/runtime'
+        ].replace(/^[^0-9]*/, ''),
+      },
+    ],
+  ].filter(Boolean),
+}

.gitignore

@@ -22,3 +22,6 @@ size-plugin.json
 stats.html
 yarn-debug.log*
 yarn-error.log*
+es
+lib
+types

examples/simple/src/index.tsx

@@ -43,7 +43,7 @@ export default function App() {
           </div>
         );
       })}
-      <div style={{ height: "5rem" }} />
+      <div style={{ height: "50rem" }} />
     </div>
   );
 }

package.json

@@ -1,32 +1,47 @@
 {
   "name": "react-charts",
-  "author": "Tanner Linsley",
-  "description": "Charts for React",
-  "repository": "tannerlinsley/react-charts",
-  "module": "dist/react-charts.esm.js",
-  "version": "0.1.0",
+  "version": "1.0.0-semantic-release",
+  "description": "Hooks for managing, caching and syncing asynchronous and remote data in React",
+  "author": "tannerlinsley",
   "license": "MIT",
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "repository": "tannerlinsley/react-charts",
+  "homepage": "https://github.com/tannerlinsley/react-charts#readme",
   "funding": {
     "type": "github",
     "url": "https://github.com/sponsors/tannerlinsley"
   },
+  "main": "lib/index.js",
+  "unpkg": "dist/react-charts.development.js",
+  "types": "types/index.d.ts",
+  "module": "es/index.js",
   "files": [
     "dist",
-    "src"
+    "es",
+    "lib",
+    "scripts",
+    "types"
   ],
-  "engines": {
-    "node": ">=10"
-  },
   "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
-    "prepare": "tsdx build",
-    "size": "size-limit",
-    "analyze": "size-limit --why",
+    "test": "is-ci \"test:ci\" \"test:dev\"",
+    "test:dev": "npm run test:types && npm run test:eslint && jest --watch",
+    "test:ci": "npm run test:types && npm run test:eslint && jest",
+    "test:coverage": "yarn test:ci; open coverage/lcov-report/index.html",
+    "test:types": "tsc",
+    "test:eslint": "eslint --ext .ts,.tsx ./src",
+    "build": "yarn build:commonjs && yarn build:es && yarn build:umd && yarn build:types",
+    "build:commonjs": "rimraf ./lib && cross-env BABEL_ENV=commonjs babel --extensions .ts,.tsx --ignore ./src/**/tests/**/* ./src --out-dir lib",
+    "build:es": "rimraf ./es && babel --extensions .ts,.tsx --ignore ./src/**/tests/**/* ./src --out-dir es",
+    "build:umd": "rimraf ./dist && cross-env NODE_ENV=production rollup -c && rollup-plugin-visualizer stats-react.json",
+    "build:types": "rimraf ./types && tsc --project ./tsconfig.types.json && replace 'import type' 'import' ./types -r --silent && replace 'export type' 'export' ./types -r --silent",
+    "watch": "yarn watch:commonjs & yarn watch:es & yarn watch:umd & yarn watch:types",
+    "watch:commonjs": "rimraf ./lib && cross-env BABEL_ENV=commonjs babel --watch --extensions .ts,.tsx --ignore ./src/**/tests/**/* ./src --out-dir lib",
+    "watch:es": "rimraf ./es && babel --watch --extensions .ts,.tsx --ignore ./src/**/tests/**/* ./src --out-dir es",
+    "watch:umd": "rimraf ./dist && cross-env NODE_ENV=production rollup -w -c && rollup-plugin-visualizer stats-react.json",
+    "watch:types": "rimraf ./types && tsc --watch --project ./tsconfig.types.json && replace 'import type' 'import' ./types -r --silent && replace 'export type' 'export' ./types -r --silent",
+    "now-build": "yarn && cd www && yarn && yarn build",
+    "start": "yarn watch",
+    "format": "prettier {.,src,src/**,example/src,example/src/**,types}/*.{md,js,jsx,tsx,json} --write",
+    "stats": "open ./stats.html",
     "typedoc": "typedoc"
   },
   "peerDependencies": {
@@ -54,55 +69,73 @@
       "pre-commit": "tsdx lint"
     }
   },
-  "size-limit": [
-    {
-      "path": "dist/react-charts-1.cjs.production.min.js",
-      "limit": "10 KB"
-    },
-    {
-      "path": "dist/react-charts-1.esm.js",
-      "limit": "10 KB"
-    }
-  ],
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@size-limit/preset-small-lib": "^5.0.1",
-    "@trivago/prettier-plugin-sort-imports": "^2.0.2",
-    "@types/d3-shape": "^3.0.1",
-    "@types/react": "^17.0.14",
-    "@types/react-dom": "^17.0.9",
-    "@typescript-eslint/eslint-plugin": "^4.28.2",
-    "@typescript-eslint/parser": "^4.28.2",
-    "babel-loader": "^8.2.2",
-    "eslint": "^7.30.0",
+    "@babel/cli": "^7.11.6",
+    "@babel/core": "^7.11.6",
+    "@babel/plugin-transform-runtime": "^7.11.5",
+    "@babel/preset-env": "^7.11.5",
+    "@babel/preset-react": "^7.10.4",
+    "@babel/preset-typescript": "^7.10.4",
+    "@rollup/plugin-replace": "^2.3.3",
+    "@svgr/rollup": "^5.4.0",
+    "@testing-library/react": "^12.0.0",
+    "@types/jest": "^26.0.4",
+    "@typescript-eslint/eslint-plugin": "^4.8.1",
+    "@typescript-eslint/parser": "^4.8.1",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^27.0.6",
+    "babel-plugin-const-enum": "^1.0.1",
+    "babel-plugin-transform-async-to-promises": "^0.8.15",
+    "cross-env": "^7.0.2",
+    "eslint": "7.x",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^6.0.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-config-standard-react": "^11.0.1",
+    "eslint-plugin-flowtype": "5.x",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "6.x",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-react": "7.24.0",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-standard": "^5.0.0",
+    "is-ci-cli": "^2.1.1",
+    "jest": "^27.0.6",
+    "prettier": "2.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
+    "react-error-boundary": "^3.1.3",
+    "replace": "^1.2.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.16.1",
     "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-jscc": "^2.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "size-limit": "^5.0.1",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.3.0",
-    "typedoc": "^0.21.2",
+    "rollup-plugin-peer-deps-external": "^2.2.2",
+    "rollup-plugin-prettier": "^2.1.0",
+    "rollup-plugin-size": "^0.2.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-visualizer": "^5.5.2",
     "typescript": "^4.3.5"
   },
   "dependencies": {
+    "@babel/runtime": "^7.14.6",
+    "@reach/observe-rect": "^1.2.0",
+    "@react-spring/web": "^9.2.3",
     "@types/d3-array": "^3.0.1",
     "@types/d3-scale": "^4.0.1",
+    "@types/d3-shape": "^3.0.1",
     "@types/raf": "^3.4.0",
-    "@reach/observe-rect": "^1.2.0",
-    "@react-spring/web": "^9.2.3",
-    "d3-array": "^3.0.1",
-    "d3-scale": "^4.0.0",
-    "d3-shape": "^3.0.1",
-    "d3-time": "^3.0.0",
-    "jotai": "^1.1.2",
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9",
+    "d3-array": "^2.12.1",
+    "d3-scale": "^3.3.0",
+    "d3-shape": "^2.1.0",
+    "d3-time": "^2.1.1",
+    "jotai": "^1.1.3",
     "ts-toolbelt": "^9.6.0"
-  },
-  "resolutions": {
-    "typescript": "^4.3.2"
   }
 }

rollup.config.js

@@ -0,0 +1,74 @@
+import babel from 'rollup-plugin-babel'
+import commonJS from 'rollup-plugin-commonjs'
+import resolve from 'rollup-plugin-node-resolve'
+import externalDeps from 'rollup-plugin-peer-deps-external'
+import size from 'rollup-plugin-size'
+import { terser } from 'rollup-plugin-terser'
+import visualizer from 'rollup-plugin-visualizer'
+
+import replace from '@rollup/plugin-replace'
+
+const external = ['react', 'react-dom', 'react-charts']
+
+const globals = {
+  react: 'React',
+  'react-dom': 'ReactDOM',
+  'react-charts': 'ReactCharts',
+}
+
+const inputSrcs = [['src/index.ts', 'ReactCharts', 'react-charts']]
+
+const extensions = ['.js', '.jsx', '.es6', '.es', '.mjs', '.ts', '.tsx']
+const babelConfig = { extensions, runtimeHelpers: true }
+const resolveConfig = { extensions }
+
+export default inputSrcs
+  .map(([input, name, file]) => {
+    return [
+      {
+        input: input,
+        output: {
+          name,
+          file: `dist/${file}.development.js`,
+          format: 'umd',
+          sourcemap: true,
+          globals,
+        },
+        external,
+        plugins: [
+          resolve(resolveConfig),
+          babel(babelConfig),
+          commonJS(),
+          externalDeps(),
+        ],
+      },
+      {
+        input: input,
+        output: {
+          name,
+          file: `dist/${file}.production.min.js`,
+          format: 'umd',
+          sourcemap: true,
+          globals,
+        },
+        external,
+        plugins: [
+          replace({
+            'process.env.NODE_ENV': `"production"`,
+            delimiters: ['', ''],
+          }),
+          resolve(resolveConfig),
+          babel(babelConfig),
+          commonJS(),
+          externalDeps(),
+          terser(),
+          size(),
+          visualizer({
+            filename: 'stats-react.json',
+            json: true,
+          }),
+        ],
+      },
+    ]
+  })
+  .flat()