build: change tsc to babel for build

.eslintrc

@@ -25,6 +25,8 @@
     "@typescript-eslint/array-type": "off",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
-    "@typescript-eslint/member-delimiter-style": "off"
+    "@typescript-eslint/member-delimiter-style": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/ban-types": "off"
   }
 }

babel.config.js

@@ -0,0 +1,33 @@
+const BABEL_ENV = process.env.BABEL_ENV
+const isCommonJS = BABEL_ENV !== undefined && BABEL_ENV === "cjs"
+const isESM = BABEL_ENV !== undefined && BABEL_ENV === "esm"
+
+module.exports = function (api) {
+  api.cache(true)
+
+  const presets = [
+    [
+      "@babel/env",
+      {
+        loose: true,
+        modules: isCommonJS ? "commonjs" : false,
+        targets: {
+          esmodules: isESM ? true : undefined,
+        },
+      },
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react",
+  ]
+
+  return {
+    presets,
+    ignore: [
+      "**/*.test.tsx",
+      "**/*.test.ts",
+      "**/*.stories.tsx",
+      "**/*/tests/*",
+      "**/*/stories/*",
+    ],
+  }
+}

package.json

@@ -154,6 +154,13 @@
     "rimraf": "3.0.2",
     "shelljs": "0.8.4",
     "ts-jest": "26.1.0",
-    "typescript": "3.9.5"
+    "typescript": "3.9.5",
+    "@babel/cli": "7.10.1",
+    "@babel/core": "7.10.2",
+    "@babel/preset-env": "7.10.2",
+    "@babel/preset-react": "7.10.1",
+    "@babel/preset-typescript": "7.10.1",
+    "@babel/runtime": "7.10.2",
+    "microbundle": "0.12.0"
   }
 }

packages/accordion/package.json

@@ -38,11 +38,12 @@
     "prebuild": "rimraf dist",
     "start": "nodemon --exec yarn build -e ts,tsx --ignore dist/ --ignore src/tests/ --ignore \"*.stories.tsx\"",
     "build": "concurrently yarn:build:*",
+    "copy:types": "cp -r dist/types/* dist/esm",
     "test": "jest --env=jsdom --passWithNoTests",
     "lint": "concurrently yarn:lint:*",
     "version": "yarn build",
-    "build:esm": "tsc --module esnext --outDir dist/esm --declaration false",
-    "build:cjs": "tsc --module commonjs --outDir dist/cjs --declaration false",
+    "build:esm": "BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps --delete-dir-on-start",
+    "build:cjs": "BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps --delete-dir-on-start",
     "build:types": "tsc --emitDeclarationOnly --declaration --declarationMap --declarationDir dist/types",
     "test:cov": "yarn test --coverage",
     "lint:src": "eslint src --ext .ts,.tsx --config ../../.eslintrc",

packages/accordion/tsconfig.json

@@ -1,5 +1,9 @@
 {
   "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "jsxFactory": "React.createElement"
+  },
   "include": ["src", "../../types"],
   "exclude": ["src/tests", "**/*/*.stories.tsx"]
 }

packages/system/src/create-styled.tsx

@@ -20,7 +20,7 @@ import {
 import { ChakraComponent, Options } from "./system.types"
 import { getDisplayName } from "./system.utils"
 
-function createStyled<T extends As, P = {}>(
+function createStyled<T extends As, P extends Dict>(
   component: T,
   options?: Options<T, P>,
 ) {

packages/system/src/system.types.ts

@@ -1,6 +1,7 @@
 import { SystemProps } from "@chakra-ui/parser"
 import { ValidHTMLProps } from "./should-forward-prop"
 import { ColorMode } from "@chakra-ui/color-mode"
+import { Dict } from "@chakra-ui/utils"
 
 export interface Options<T extends As, P> {
   /**
@@ -160,8 +161,8 @@ export type WithChakra<P> = P extends { transition?: any }
  * - Add the `as` prop. in this case, it doesn't do anything special.
  * - Return a JSX Element
  */
-type RegularComponent<T extends As, P, O extends string> = (
-  props: WithChakra<Omit<PropsOf<T>, keyof P | O>> & P & { as?: As },
+type RegularComponent<T extends As, P> = (
+  props: WithChakra<Omit<PropsOf<T>, keyof P>> & P & { as?: As },
 ) => JSX.Element
 
 /**
@@ -172,21 +173,15 @@ type RegularComponent<T extends As, P, O extends string> = (
  * - Use the `WithAs` to merge the base component prop with `as` component prop
  * - Add Chakra props to the resulting types.
  */
-type ExtensibleComponent<T extends As, P, O extends string> = <
-  TT extends As = T
->(
-  props: WithChakra<WithAs<Omit<PropsOf<T>, O>, TT>> & P,
+type ExtensibleComponent<T extends As, P> = <TT extends As = T>(
+  props: WithChakra<WithAs<PropsOf<T>, TT>> & P,
 ) => JSX.Element
 
-type Component<T extends As, P, O extends string> =
-  | RegularComponent<T, P, O>
-  | ExtensibleComponent<T, P, O>
+type Component<T extends As, P> =
+  | RegularComponent<T, P>
+  | ExtensibleComponent<T, P>
 
-export type ChakraComponent<
-  T extends As,
-  P = {},
-  O extends string = ""
-> = Component<T, P, O> & {
+export type ChakraComponent<T extends As, P extends Dict> = Component<T, P> & {
   displayName?: string
   propTypes?: React.WeakValidationMap<PropsOf<T> & P>
   defaultProps?: Partial<PropsOf<T> & P & ChakraProps>