feat: allow tree shaking on design-system, use vite to build output (#33

)

* build: move bundler to vite

* chore: remove unused rollup deps after moving to vite

* refactor: use treeshakeable lodash import

* build(vite): add esm and cjs outputs

* feat: update target to es6 for better compat

* fix(storybook): add empty package.json so it can run with main.js

since root package.json is now type: module, .js files are now treated as ESM files... which storybook does not support.
See storybookjs/storybook#11587 (comment)

.gitignore

@@ -1,4 +1,5 @@
 node_modules
-build
+dist
 build-storybook.log
 storybook-static
+.DS_Store

react/.storybook/main.js

@@ -1,6 +1,7 @@
 const path = require('path')
 
 module.exports = {
+  framework: '@storybook/react',
   features: {
     emotionAlias: false,
     storyStoreV7: true,
@@ -31,7 +32,6 @@ module.exports = {
       ...config.resolve.alias,
       '~': path.resolve(__dirname, '../src/'),
     }
-
     return config
   },
 }

react/.storybook/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

react/package.json

@@ -2,17 +2,27 @@
   "name": "@opengovsg/design-system-react",
   "version": "0.0.6",
   "description": "React components",
-  "main": "build/index.js",
   "homepage": "https://github.com/opengovsg/design-system/react#readme",
   "bugs": "https://github.com/opengovsg/design-system/issues",
   "sideEffects": false,
+  "main": "dist/cjs/design-system-react.cjs.js",
+  "module": "dist/design-system-react.es.js",
+  "types": "dist/types/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/design-system-react.cjs.js",
+      "import": "./dist/design-system-react.es.js"
+    },
+    "./dist/fonts/inter.css": "./dist/fonts/inter.css"
+  },
   "files": [
-    "build"
+    "dist"
   ],
   "license": "SEE LICENSE IN LICENSE.md",
   "peerDependencies": {
-    "@chakra-ui/cli": "^1.7.0",
-    "@chakra-ui/react": "^1.7.5",
+    "@chakra-ui/cli": "^1.9.0",
+    "@chakra-ui/react": "^1.8.6",
     "libphonenumber-js": "^1.9.44",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -21,9 +31,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
-    "@chakra-ui/react": "^1.7.5",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@chakra-ui/react": "^1.8.6",
     "@storybook/addon-actions": "^6.4.10",
     "@storybook/addon-essentials": "^6.4.10",
     "@storybook/addon-links": "^6.4.10",
@@ -34,31 +42,33 @@
     "@types/mdx": "^2.0.1",
     "@types/react": "^17.0.38",
     "@types/uuid": "^8.3.4",
-    "@zerollup/ts-transform-paths": "^1.7.18",
+    "@vitejs/plugin-react": "^1.0.7",
     "babel-loader": "^8.2.2",
     "chromatic": "^6.3.4",
     "dayjs": "^1.10.7",
     "libphonenumber-js": "^1.9.44",
     "mockdate": "^3.0.5",
+    "npm-run-all": "^4.1.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.24.2",
     "react-icons": "^4.3.1",
     "react-markdown": "^6.0.3",
     "rimraf": "^3.0.2",
-    "rollup": "^2.63.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-typescript2": "^0.31.1",
-    "ttypescript": "^1.5.13",
-    "typescript": "^4.5.4"
+    "tsc-alias": "^1.6.4",
+    "typescript": "^4.5.4",
+    "vite": "^2.8.0"
   },
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "prebuild": "rimraf build",
-    "build": "rollup -c",
-    "typecheck": "tsc --noEmit -p tsconfig.lint.json"
+    "prebuild": "rimraf dist",
+    "typecheck": "tsc --noEmit -p tsconfig.lint.json",
+    "build": "run-p build:*",
+    "build:lib": "vite build",
+    "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly && tsc-alias"
   },
   "dependencies": {
     "country-flag-icons": "^1.4.19",

react/src/DatePicker/Calendar/CalendarContext.tsx

@@ -7,15 +7,15 @@ import {
   useMemo,
   useState,
 } from 'react'
-import { useKey } from 'react-use'
+import useKey from 'react-use/lib/useKey'
 import {
   addMonths,
   differenceInCalendarMonths,
   isFirstDayOfMonth,
   isSameDay,
 } from 'date-fns'
 import { Props as DayzedProps, RenderProps, useDayzed } from 'dayzed'
-import { inRange } from 'lodash'
+import inRange from 'lodash/inRange'
 
 import { DatePickerProps } from '../DatePicker'
 import {

react/src/DatePicker/DateRangeInput.tsx

@@ -251,7 +251,6 @@ export const DateRangeInput = forwardRef<DateRangeInputProps, 'input'>(
                   <PopoverBody p={0}>
                     <DateRangePicker
                       selectedDates={datePickerDates}
-                      hoveredDate={hoveredDate}
                       isDateInRange={isDateInRange}
                       onMouseEnterHighlight={onMouseEnterHighlight}
                       onMouseLeaveCalendar={onMouseLeaveCalendar}

react/src/DatePicker/index.ts

@@ -1 +1 @@
-export { DateInput as default } from './DateInput'
+export * from './DateInput'

react/src/Rating/Rating.tsx

@@ -144,7 +144,6 @@ export const Rating = forwardRef<RatingProps, 'input'>(
                       variant={variant}
                       colorScheme={colorScheme}
                       value={value}
-                      numberOfRatings={numberOfRatings}
                       onChange={handleRatingChange}
                       selectedValue={currentValue}
                       {...(i === 0 ? { ref } : {})}

react/tsconfig.build.json

@@ -1,15 +1,9 @@
 {
   "extends": "./tsconfig",
   "compilerOptions": {
-    "plugins": [
-      {
-        "transform": "@zerollup/ts-transform-paths",
-        "exclude": ["*"]
-      }
-    ],
-    "importHelpers": true
+    "skipLibCheck": true
   },
-  "include": ["src/**/*"],
+  "include": ["src"],
   "exclude": [
     ".storybook",
     "node_modules",

react/tsconfig.json

@@ -2,24 +2,26 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "~/*": ["./src/*"]
+      "~/*": ["src/*"]
     },
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
+    "skipLibCheck": false,
+    "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
-    "declaration": true,
-    "declarationDir": "build",
-    "esModuleInterop": true,
-    "outDir": "./build",
-    "jsx": "react-jsx",
-    "lib": ["es6", "dom", "es2016", "es2017"],
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmit": true,
-    "resolveJsonModule": true,
-    "sourceMap": true,
     "strict": true,
-    "target": "es5"
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "outDir": "dist/types",
+    "declaration": true,
+    "declarationMap": true
   },
-  "exclude": ["node_modules", "build"],
-  "include": ["src/**/*", ".storybook/**/*"]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

react/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}

react/vite.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+import peerDepsExternal from 'rollup-plugin-peer-deps-external'
+import copy from 'rollup-plugin-copy'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '~': resolve(__dirname, './src'),
+    },
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src', 'index.ts'),
+      name: 'design-system-react',
+      formats: ['cjs', 'es'],
+      // for UMD name: 'GlobalName'
+    },
+    rollupOptions: {
+      plugins: [
+        peerDepsExternal(),
+        copy({
+          targets: [{ src: 'src/fonts', dest: 'dist' }],
+          hook: 'writeBundle',
+        }),
+      ],
+      output: [
+        {
+          dir: 'dist/cjs',
+          format: 'cjs',
+        },
+        {
+          exports: 'named',
+          dir: 'dist',
+          preserveModules: true,
+          preserveModulesRoot: 'src',
+          format: 'es',
+        },
+      ],
+    },
+    target: 'es6',
+    sourcemap: true,
+  },
+})