fix: use rollup for bundling

package.json

@@ -5,13 +5,15 @@
   "version": "0.0.1",
   "source": "src/lib/index.ts",
   "main": "build/index.js",
-  "module": "build/index.module.js",
+  "module": "build/index.es.js",
+  "jsnext:main": "build/index.es.js",
   "unpkg": "build/index.umd.js",
   "typings": "build/index.d.ts",
   "files": [
     "build",
-    "lib"
+    "src/lib"
   ],
+  "types": "build/index.d.ts",
   "sideEffects": false,
   "engines": {
     "node": ">=12"
@@ -24,8 +26,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "microbundle build --jsx React.createElement --compress --entry src/lib/index.ts --output build/index.js --no-pkg-main --tsconfig tsconfig.lib.json",
-    "start": "microbundle watch --jsx React.createElement --no-compress --entry src/lib/index.ts --output build/index.js --no-pkg-main --tsconfig tsconfig.lib.json --format modern",
+    "build": "NODE_ENV=production BABEL_ENV=production rollup -c",
+    "start": "NODE_ENV=development BABEL_ENV=development rollup -c -w",
     "dev": "yarn run dokz:dev",
     "lint": "eslint src",
     "typecheck": "tsc --noEmit",
@@ -41,15 +43,25 @@
     "react-uid": "^2.3.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.11.6",
+    "@babel/plugin-transform-runtime": "^7.11.5",
+    "@babel/preset-env": "^7.11.5",
+    "@babel/preset-react": "^7.10.4",
     "@chakra-ui/core": "^0.8.0",
     "@emotion/core": "^10.0.35",
     "@emotion/styled": "^10.0.27",
+    "@rollup/plugin-babel": "^5.2.1",
+    "@rollup/plugin-commonjs": "^15.1.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-url": "^5.0.1",
+    "@svgr/rollup": "^5.4.0",
     "@types/jest": "^26.0.14",
     "@types/node": "^14.11.2",
     "@types/react": "^16.9.50",
     "@typescript-eslint/eslint-plugin": "^4.3.0",
     "@typescript-eslint/parser": "^4.3.0",
     "babel-eslint": "^10.1.0",
+    "babel-preset-react-app": "^9.1.2",
     "dokz": "^1.0.79",
     "eslint": "^7.10.0",
     "eslint-config-react-app": "^5.2.1",
@@ -60,14 +72,17 @@
     "eslint-plugin-react-hooks": "^4.1.2",
     "husky": "^4.3.0",
     "jest": "^26.4.2",
-    "microbundle": "^0.12.4",
     "next": "^9.5.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.1.2",
     "pretty-quick": "^3.0.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-icons": "^3.11.0",
+    "rollup": "^2.28.2",
+    "rollup-plugin-peer-deps-external": "^2.2.3",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.27.3",
     "typescript": "^4.0.3"
   },
   "resolutions": {

rollup.config.js

@@ -0,0 +1,70 @@
+import { DEFAULT_EXTENSIONS } from '@babel/core'
+import babel from '@rollup/plugin-babel'
+import typescript from 'rollup-plugin-typescript2'
+import commonjs from '@rollup/plugin-commonjs'
+import external from 'rollup-plugin-peer-deps-external'
+import resolve from '@rollup/plugin-node-resolve'
+import url from '@rollup/plugin-url'
+import svgr from '@svgr/rollup'
+import { terser } from 'rollup-plugin-terser'
+
+import pkg from './package.json'
+
+export default {
+  input: 'src/lib/index.ts',
+  output: [
+    {
+      file: pkg.module,
+      format: 'es',
+      sourcemap: true,
+    },
+    {
+      file: pkg.main,
+      format: 'cjs',
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    external({
+      includeDependencies: true,
+    }),
+    typescript({
+      typescript: require('typescript'),
+      tsconfig: './tsconfig.lib.json',
+      include: ['*.js+(|x)', '**/*.js+(|x)'],
+      exclude: [
+        'coverage',
+        'config',
+        'dist',
+        'build',
+        'node_modules/**',
+        '*.test.{js+(|x), ts+(|x)}',
+        '**/*.test.{js+(|x), ts+(|x)}',
+      ],
+    }),
+    babel({
+      presets: [
+        'react-app',
+      ],
+      extensions: [
+        ...DEFAULT_EXTENSIONS,
+        '.ts',
+        '.tsx',
+      ],
+      plugins: [
+        '@babel/plugin-proposal-object-rest-spread',
+        '@babel/plugin-proposal-optional-chaining',
+        '@babel/plugin-syntax-dynamic-import',
+        '@babel/plugin-proposal-class-properties',
+        'transform-react-remove-prop-types',
+      ],
+      exclude: 'node_modules/**',
+      babelHelpers: 'runtime',
+    }),
+    url(),
+    svgr(),
+    resolve(),
+    commonjs(),
+    terser(),
+  ],
+}

src/lib/Menu/MenuList.tsx

@@ -2,8 +2,9 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 import Portal from '../Portal';
 import { useMenu, useMenuControlState, useMenuOpenState } from './utils';
 import { FocusManagerOptions, FocusScope, useFocusManager } from '@react-aria/focus';
-import useOnClickOutside, { useAllHandlers, useKeyboardHandles } from '../utils';
+import { useAllHandlers, useOnClickOutside, useForkRef, useKeyboardHandles, usePopper } from '../utils';
 import { styled } from '../stitches.config';
+import type { Options } from '@popperjs/core';
 
 const List = styled('ul', {
   maxHeight: '240px',
@@ -17,13 +18,19 @@ const List = styled('ul', {
   paddingInlineStart: 0,
 });
 
-const UlList: React.FC<UlListProps> = (ulProps) => {
+type UlListProps = React.ComponentProps<typeof List>;
+type Props = UlListProps & {
+  offset: number;
+  placement: Options['placement'];
+};
+
+const UlList: React.FC<Props> = (ulProps) => {
   const props = useMenuProps(ulProps);
 
   return <List {...props} />;
 };
 
-const MenuList: React.FC<UlListProps> = (props) => {
+const MenuList: React.FC<Props> = (props) => {
   const isOpen = useMenuOpenState();
 
   if (!isOpen) {
@@ -43,10 +50,37 @@ export default MenuList;
 
 const focusOptions: FocusManagerOptions = { wrap: true };
 
-function useMenuProps(props: UlListProps): UlListProps {
-  const { popoverRef, seed, onAction } = useMenu();
+function useMenuProps({ placement = 'bottom-start', offset = 8, ...props }: Props): UlListProps {
+  const { triggerRef, popoverRef, seed, onAction } = useMenu();
   const { close, stateRef } = useMenuControlState();
   const focusManager = useFocusManager();
+  const popperRef = usePopper(
+    triggerRef,
+    useMemo<Options>(
+      () => ({
+        placement,
+        strategy: 'fixed',
+        modifiers: [
+          { name: 'offset', options: { offset: [0, offset] } },
+          {
+            name: 'minWidth',
+            enabled: true,
+            phase: 'beforeWrite',
+            requires: ['computeStyles'],
+            fn({ state }) {
+              const { width } = state.rects.reference;
+              state.styles.popper.minWidth = `${width}px`;
+            },
+            effect({ state }) {
+              const { width } = state.elements.reference.getBoundingClientRect();
+              state.elements.popper.style.minWidth = `${width}px`;
+            },
+          },
+        ],
+      }),
+      [placement, offset]
+    )
+  );
 
   useOnClickOutside(popoverRef, close);
 
@@ -100,14 +134,14 @@ function useMenuProps(props: UlListProps): UlListProps {
 
   const onKeyDown = useAllHandlers(props.onKeyDown, handleKeyDown);
 
+  const ref = useForkRef(popperRef, popoverRef);
+
   return {
     ...props,
     'role': 'menu',
     'id': seed('menu'),
     'aria-labelledby': seed('button'),
-    'ref': popoverRef,
+    ref,
     onKeyDown,
   };
 }
-
-type UlListProps = React.ComponentProps<typeof List>;

src/lib/Menu/utils.tsx

@@ -1,5 +1,4 @@
-import React, { useContext, createContext, useEffect, useMemo, useRef, useCallback, useState } from 'react';
-import { Options, createPopper, Instance, VirtualElement } from '@popperjs/core';
+import React, { useContext, createContext, useMemo, useRef, useState } from 'react';
 import { useUIDSeed } from 'react-uid';
 
 type MenuStaticContextValue = {
@@ -11,34 +10,12 @@ type MenuStaticContextValue = {
 
 const menuContext = createContext<MenuStaticContextValue>({} as any);
 
-const options: Options = {
-  placement: 'bottom-start',
-  strategy: 'fixed',
-  modifiers: [
-    { name: 'offset', options: { offset: [0, 8] } },
-    {
-      name: 'minWidth',
-      enabled: true,
-      phase: 'beforeWrite',
-      requires: ['computeStyles'],
-      fn({ state }) {
-        const { width } = state.rects.reference;
-        state.styles.popper.minWidth = `${width}px`;
-      },
-      effect({ state }) {
-        const { width } = state.elements.reference.getBoundingClientRect();
-        state.elements.popper.style.minWidth = `${width}px`;
-      },
-    },
-  ],
-};
-
 export const MenuProvider: React.FC<{
   onAction?: (key: string) => void;
 }> = ({ children, onAction }) => {
   const seed = useUIDSeed();
   const triggerRef = useRef<HTMLElement>(null);
-  const popoverRef = usePopper(triggerRef, options);
+  const popoverRef = useRef<HTMLElement>(null);
 
   const menuContextValue = useMemo(
     () => ({
@@ -84,39 +61,6 @@ export function useMenuControlState() {
   return useContext(menuStateControlsContext);
 }
 
-function usePopper(
-  triggerRef: React.RefObject<Element | VirtualElement>,
-  options?: Partial<Options>
-): React.RefObject<HTMLElement> {
-  const popoverRef = useRef<HTMLElement>(null);
-  const popperInstanceRef = useRef<Instance>();
-
-  const instantiatePopper = useCallback(() => {
-    if (!triggerRef.current || !popoverRef.current) return;
-
-    popperInstanceRef.current?.destroy();
-    popperInstanceRef.current = createPopper(triggerRef.current, popoverRef.current, options);
-  }, [triggerRef, options]);
-
-  useEffect(() => {
-    return () => {
-      popperInstanceRef.current?.destroy();
-    };
-  }, []);
-
-  return useMemo(() => {
-    return {
-      get current() {
-        return popoverRef.current;
-      },
-      set current(node) {
-        (popoverRef as React.MutableRefObject<any>).current = node;
-        instantiatePopper();
-      },
-    };
-  }, [popoverRef, instantiatePopper]);
-}
-
 type InternalState = { lastKey: string | null; items: Map<HTMLLIElement, { action: string }> };
 type MenuControlFunctions = {
   stateRef: {

src/lib/ThemeProvider/ThemeProvider.tsx

@@ -8,7 +8,11 @@ type Props = {
   theme?: Theme;
 };
 
-const themeContext = createContext<Props['theme']>('default');
+const themeContext = createContext<Props['theme']>('blue');
+
+const css = {
+  display: 'contents',
+};
 
 const ThemeProvider: React.FC<Props> = ({ theme, children }) => {
   const contextTheme = useContext(themeContext);
@@ -20,7 +24,7 @@ const ThemeProvider: React.FC<Props> = ({ theme, children }) => {
 
   return (
     <themeContext.Provider value={theme}>
-      <Box className={themeClass} as="span">
+      <Box className={themeClass} css={css} as="span">
         {children}
       </Box>
     </themeContext.Provider>

src/lib/theme/themes.ts

@@ -2,7 +2,7 @@ import * as palette from './palette';
 import { css } from '../stitches.config';
 import colors from './colors';
 
-const filtered = ['grey'];
+const filtered = ['grey', 'default'];
 
 const swatches: Array<readonly [string, Swatch]> = Object.entries(palette)
   .filter(([name]) => !filtered.includes(name))