exporting esm and cjs

docs/package.json

@@ -17,8 +17,6 @@
   },
   "devDependencies": {
     "@types/node": "^18.11.18",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
     "next-transpile-modules": "^10.0.0",
     "typescript": "^4.9.4"
   }

package.json

@@ -31,19 +31,14 @@
     "tree-view",
     "treeview"
   ],
+  "sideEffects": false,
   "types": "dist/index.d.ts",
-  "jsdelivr": "dist/browser.js",
-  "browser": {
-    "vanilla": "dist/browser.js"
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "main": "dist/cjs/index.js",
+  "module": "dist/index.js",
   "exports": {
-    ".": {
-      "types": "./src/type.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    }
+    "types": "./src/type.d.ts",
+    "import": "./dist/index.js",
+    "require": "./dist/index.js"
   },
   "files": [
     "dist"
@@ -56,12 +51,10 @@
     "postpack": "pinst --enable",
     "lint": "npx eslint . --ext .ts,.tsx,.js,.jsx --cache --fix",
     "lint:ci": "npx eslint . --ext .ts,.tsx,.js,.jsx --cache",
-    "build": "rollup -c rollup.config.ts --configPlugin swc3"
+    "build": "tsc && rollup -c rollup.config.ts --configPlugin swc3"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@mui/material": "^5.11.4",
+    "@mui/material": "^5.11.0",
     "copy-to-clipboard": "^3.3.3",
     "group-items": "^2.2.0",
     "zustand": "^4.1.5"
@@ -71,12 +64,16 @@
     "*.{ts,tsx,js,jsx}": "npx eslint --cache --fix"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.10",
+    "@emotion/styled": "^11.10",
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.4.2",
     "@commitlint/config-angular": "^17.4.2",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
     "@rollup/plugin-alias": "^4.0.2",
     "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
@@ -86,7 +83,6 @@
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
-    "@types/web": "^0.0.87",
     "@typescript-eslint/eslint-plugin": "^5.48.1",
     "@typescript-eslint/parser": "^5.48.1",
     "@vitejs/plugin-react": "^2.2.0",

rollup.config.ts

@@ -3,8 +3,7 @@ import { basename, resolve } from 'node:path'
 
 import alias from '@rollup/plugin-alias'
 import commonjs from '@rollup/plugin-commonjs'
-import { nodeResolve } from '@rollup/plugin-node-resolve'
-import replace from '@rollup/plugin-replace'
+import nodeResolve from '@rollup/plugin-node-resolve'
 import type {
   ModuleFormat,
   OutputOptions,
@@ -19,7 +18,7 @@ let cache: RollupCache
 
 const dtsOutput = new Set<[string, string]>()
 
-const outputDir = fileURLToPath(new URL('dist', import.meta.url))
+const outputDir = fileURLToPath(new URL('dist/cjs', import.meta.url))
 
 const external = [
   '@emotion/react',
@@ -66,7 +65,7 @@ const buildMatrix = (input: string, output: string, config: {
     input,
     output: outputMatrix(output, config.format),
     cache,
-    external: config.browser ? [] : external,
+    external,
     plugins: [
       alias({
         entries: config.browser
@@ -83,11 +82,6 @@ const buildMatrix = (input: string, output: string, config: {
               }
             ]
       }),
-      config.browser && replace({
-        preventAssignment: true,
-        'process.env.NODE_ENV': JSON.stringify('production'),
-        'typeof window': JSON.stringify('object')
-      }),
       commonjs(),
       nodeResolve(),
       swc(defineRollupSwcOption({
@@ -115,7 +109,7 @@ const dtsMatrix = (): RollupOptions[] => {
     cache,
     output: {
       file: resolve(outputDir, `${output}.d.ts`),
-      format: 'es'
+      format: 'umd'
     },
     plugins: [
       dts()
@@ -125,15 +119,10 @@ const dtsMatrix = (): RollupOptions[] => {
 
 const build: RollupOptions[] = [
   buildMatrix('./src/index.tsx', 'index', {
-    format: ['es', 'umd'],
+    format: ['umd'],
     browser: false,
     dts: true
   }),
-  buildMatrix('./src/browser.tsx', 'browser', {
-    format: ['es', 'umd'],
-    browser: true,
-    dts: true
-  }),
   ...dtsMatrix()
 ]
 

tsconfig.json

@@ -1,15 +1,18 @@
 {
   "compilerOptions": {
-    "target": "ES5",
-    "outDir": "./dist/out/",
-    "rootDir": "./src/",
+    "module": "es6",
+    "target": "es2019",
+    "outDir": "dist",
+    "lib": ["dom", "dom.iterable", "es2020"],
     "jsx": "react-jsx",
     "jsxImportSource": "@emotion/react",
-    "incremental": false,
-    "declaration": true,
     "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "declaration": true,
+    "sourceMap": true,
+    "strict": true
   },
-  "include": ["src/**/*.ts"],
+  "include": ["src"],
   "exclude": ["node_modules"]
 }