Merge pull request #162 from OleksiiKachan/microbundle

build(environment): replace tsdx with bundlephobia

.babelrc

@@ -1,4 +1,9 @@
 {
+  "presets": [
+    "@babel/preset-env",
+    ["@babel/preset-react", { "runtime": "automatic" }],
+    "@babel/preset-typescript"
+  ],
   "plugins": [
     "babel-plugin-styled-components",
     [

jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  verbose: true,
+  testEnvironment: `jsdom`,
+  transform: {
+    '\\.[jt]sx?$': ['babel-jest', { configFile: './.babelrc' }],
+  },
+  setupFiles: [`<rootDir>/tests/setup.js`],
+  snapshotSerializers: [`enzyme-to-json/serializer`],
+};

package.json

@@ -2,9 +2,15 @@
   "name": "wonder-engine",
   "version": "0.0.21",
   "description": "Engine for ui kits and design systems",
-  "main": "dist/index.js",
-  "typings": "types/index.d.ts",
-  "module": "dist/wonder-engine.esm.js",
+  "source": "src/index.ts",
+  "typings": "./dist/index.d.ts",
+  "exports": {
+    "require": "./dist/wonder-engine.cjs",
+    "default": "./dist/wonder-engine.modern.js"
+  },
+  "main": "./dist/wonder-engine.cjs",
+  "module": "./dist/wonder-engine.module.js",
+  "unpkg": "./dist/wonder-engine.umd.js",
   "size-limit": [
     {
       "path": "dist/wonder-engine.cjs.production.min.js",
@@ -27,10 +33,10 @@
     "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
   },
   "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
+    "start": "microbundle watch",
+    "build": "microbundle",
+    "test": "NODE_ENV=test jest",
+    "lint": "eslint",
     "prepare": "husky install",
     "size": "size-limit",
     "analyze": "size-limit --why",
@@ -44,6 +50,9 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.4",
+    "@babel/preset-react": "^7.16.0",
+    "@babel/preset-typescript": "^7.16.0",
     "@size-limit/preset-small-lib": "^7.0.3",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-docs": "^6.3.9",
@@ -54,27 +63,29 @@
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "@types/styled-components": "^5.1.15",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
+    "babel-jest": "^27.3.1",
     "babel-loader": "^8.2.3",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-styled-components": "^2.0.1",
     "commitlint": "^15.0.0",
     "cz-customizable": "^6.3.0",
+    "enzyme": "^3.11.0",
+    "enzyme-to-json": "^3.6.2",
     "eslint": "^8.3.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "husky": "^7.0.4",
     "jest": "^27.3.1",
+    "microbundle": "^0.14.2",
     "path": "^0.12.7",
     "prettier": "^2.5.0",
     "pretty-quick": "^3.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
-    "rollup-plugin-typescript2": "^0.31.1",
     "size-limit": "^7.0.3",
     "styled-components": "^5.3.3",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.3.1",
     "typescript": "^4.5.2"
   },
   "config": {

src/components/aspect-ratio-box/__stories__/index.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
 import AspectRatioBox from '../index';

src/components/aspect-ratio-box/__tests__/index.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import * as ReactDOM from 'react-dom';
 import AspectRatioBox from '../index';
 

src/components/aspect-ratio-box/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import styled from 'styled-components';
 
 import { IAspectRatioBox } from '../../../types/AspectRatioBox';

src/components/base-button/__stories__/index.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import config from '../../../__stories__/defaultContext';
 

src/components/base-button/index.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, forwardRef } from 'react';
+import { MouseEvent, forwardRef } from 'react';
 
 import { useWonderEngineContext } from '../../context';
 

src/components/portal/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { createPortal } from 'react-dom';
 
 import { IPortal } from '../../../types/Portal';

src/components/toggle/__stories__/index.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import config from '../../../__stories__/defaultContext';
 

src/components/toggle/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 import { useWonderEngineContext } from '../../context';
 

src/context/provider.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 import Context from './context';
 
 import { WonderEngineContext } from '../../types/context';

tests/setup.js

@@ -0,0 +1,3 @@
+import { configure } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+configure({ adapter: new Adapter() });

tsconfig.json

@@ -1,37 +1,33 @@
 {
-  "$schema": "https://json.schemastore.org/tsconfig",
-  // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
-  "include": ["src", "types"],
+  "include": ["src"],
+  "exclude": ["**/__tests__/**", "**/__stories__/**"],
   "compilerOptions": {
     "module": "esnext",
+    "target": "esnext",
     "lib": ["dom", "esnext"],
     "importHelpers": true,
-    // output .d.ts declaration files for consumers
-    "declaration": false,
-    // output .js.map sourcemap files for consumers
+    "declaration": true,
     "sourceMap": true,
-    // match output dir to input dir. e.g. dist/index instead of dist/src/index
     "rootDir": "./src",
-    // stricter type-checking for stronger correctness. Recommended by TS
     "strict": true,
-    // linter checks for common issues
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    // noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative
+    "strictNullChecks": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    // use Node's module resolution algorithm, instead of the legacy TS one
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
     "moduleResolution": "node",
-    // transpile JSX to React.createElement
-    "jsx": "react",
-    // interop between ESM and CJS modules. Recommended by TS
+    "jsx": "react-jsx",
+    "jsxFactory": "",
     "esModuleInterop": true,
-    // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS
+    "allowJs": false,
+    "baseUrl": ".",
+    "typeRoots": ["node_modules/@types", "types"],
+    "composite": true,
+    "declarationMap": true,
+    "strictPropertyInitialization": false,
+    "useUnknownInCatchVariables": false,
     "skipLibCheck": true,
-    // error out if import and file system have a casing mismatch. Recommended by TS
     "forceConsistentCasingInFileNames": true,
-    // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
-    "noEmit": true,
-    "typeRoots": ["types", "node_modules/@types"]
+    "outDir": "dist"
   }
 }

types/BaseButton.d.ts

@@ -1,4 +1,4 @@
-import React, {
+import {
   FunctionComponent,
   RefAttributes,
   ButtonHTMLAttributes,

types/LinkContainer.d.ts

@@ -1,4 +1,4 @@
-import React, {
+import {
   ComponentClass,
   FunctionComponent,
   RefAttributes,

types/Toggle.d.ts

@@ -1,4 +1,4 @@
-import React, {
+import {
   FunctionComponent,
   RefAttributes,
   LabelHTMLAttributes,