Revert "fix: reduce MUI size by using @swc/plugin-transform-imports (#169)"

This reverts commit 8cf9039.

Author: pionxzh

.eslintrc.js

@@ -88,15 +88,6 @@ module.exports = {
     '@typescript-eslint/no-restricted-imports': [
       'error',
       {
-        paths: [
-          {
-            name: '@mui/material',
-            importNames: ['styled', 'createTheme', 'ThemeProvider'],
-            message: `
-Use "import { styled } from '@mui/material/styles'" instead.
-Use "import { createTheme, ThemeProvider } from '@mui/material/styles'" instead.`
-          }
-        ],
         patterns: [
           {
             group: ['**/dist'],

.gitignore

@@ -15,7 +15,6 @@ tsconfig.tsbuildinfo
 .eslintcache
 node_modules
 
-.swc
 .next
 .vercel
 coverage

package.json

@@ -81,7 +81,6 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.2",
     "@swc/core": "^1.3.27",
-    "@swc/plugin-transform-imports": "^1.5.36",
     "@testing-library/react": "^13.4.0",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.27",

rollup.config.ts

@@ -8,21 +8,26 @@ import replace from '@rollup/plugin-replace'
 import type {
   ModuleFormat,
   OutputOptions,
+  RollupCache,
   RollupOptions
 } from 'rollup'
 import dts from 'rollup-plugin-dts'
 import { defineRollupSwcOption, swc } from 'rollup-plugin-swc3'
 import { fileURLToPath } from 'url'
 
+let cache: RollupCache
+
+const dtsOutput = new Set<[string, string]>()
+
 const outputDir = fileURLToPath(new URL('dist', import.meta.url))
 
-const externalDeps = [
+const external = [
   '@emotion/react',
   '@emotion/styled',
   '@emotion/react/jsx-runtime',
   '@emotion/react/jsx-dev-runtime',
   '@mui/material',
-  /@mui\/material\/.*/,
+  '@mui/material/styles',
   'copy-to-clipboard',
   'zustand',
   'zustand/context',
@@ -32,50 +37,17 @@ const externalDeps = [
   'react-dom',
   'react-dom/client'
 ]
-
-const aliasPlugin = alias({
-  entries: [
-    { find: 'react', replacement: '@emotion/react' },
-    { find: 'react/jsx-runtime', replacement: '@emotion/react/jsx-runtime' },
-    { find: 'react/jsx-dev-runtime', replacement: '@emotion/react/jsx-dev-runtime' }
-  ]
-})
-
-const replacePlugin = replace({
-  preventAssignment: true,
-  'process.env.NODE_ENV': JSON.stringify('production'),
-  'typeof window': JSON.stringify('object')
-})
-
-const esmTransformImportsPlugin: [string, Record<string, any>] = [
-  '@swc/plugin-transform-imports',
-  {
-    '@mui/material': { transform: '@mui/material/{{member}}/index.js' },
-    '@mui/material/styles': { transform: '@mui/material/styles/{{member}}.js' }
-  }
-]
-
-const cjsTransformImportsPlugin: [string, Record<string, any>] = [
-  '@swc/plugin-transform-imports',
-  {
-    '@mui/material': { transform: '@mui/material/node/{{member}}' },
-    '@mui/material/styles': { transform: '@mui/material/node/styles/{{member}}' }
-  }
-]
-
 const outputMatrix = (
   name: string, format: ModuleFormat[]): OutputOptions[] => {
   const baseName = basename(name)
-  return format.map(format => ({
+  return format.flatMap(format => ({
     file: resolve(outputDir, `${baseName}.${format === 'es' ? 'm' : ''}js`),
     sourcemap: false,
     name: 'JsonViewer',
     format,
     banner: `/// <reference types="./${baseName}.d.ts" />`,
-    globals: externalDeps.reduce((object, module) => {
-      if (typeof module === 'string') {
-        object[module] = module
-      }
+    globals: external.reduce((object, module) => {
+      object[module] = module
       return object
     }, {} as Record<string, string>)
   }))
@@ -84,64 +56,84 @@ const outputMatrix = (
 const buildMatrix = (input: string, output: string, config: {
   format: ModuleFormat[]
   browser: boolean
-}): RollupOptions[] => {
-  return [
-    ...config.format.map(format => ({
-      input,
-      output: outputMatrix(output, [format]),
-      external: config.browser ? [] : externalDeps,
-
-      plugins: [
-        !config.browser && aliasPlugin,
-        config.browser && replacePlugin,
-        commonjs(),
-        nodeResolve(),
-        swc(defineRollupSwcOption({
-          jsc: {
-            externalHelpers: true,
-            parser: {
-              syntax: 'typescript',
-              tsx: true
-            },
-            transform: {
-              react: {
-                runtime: 'automatic',
-                importSource: '@emotion/react'
+  dts: boolean
+}): RollupOptions => {
+  if (config.dts) {
+    dtsOutput.add([input, output])
+  }
+  return {
+    input,
+    output: outputMatrix(output, config.format),
+    cache,
+    external: config.browser ? [] : external,
+    plugins: [
+      alias({
+        entries: config.browser
+          ? []
+          : [
+              { find: 'react', replacement: '@emotion/react' },
+              {
+                find: 'react/jsx-dev-runtime',
+                replacement: '@emotion/react/jsx-dev-runtime'
+              },
+              {
+                find: 'react/jsx-runtime',
+                replacement: '@emotion/react/jsx-runtime'
               }
-            },
-            experimental: {
-              plugins: config.browser
-                ? []
-                : format === 'es'
-                  ? [esmTransformImportsPlugin]
-                  : [cjsTransformImportsPlugin]
+            ]
+      }),
+      config.browser && replace({
+        preventAssignment: true,
+        'process.env.NODE_ENV': JSON.stringify('production'),
+        'typeof window': JSON.stringify('object')
+      }),
+      commonjs(),
+      nodeResolve(),
+      swc(defineRollupSwcOption({
+        jsc: {
+          externalHelpers: true,
+          parser: {
+            syntax: 'typescript',
+            tsx: true
+          },
+          transform: {
+            react: {
+              runtime: 'automatic',
+              importSource: '@emotion/react'
             }
           }
-        }))
-      ]
-    })),
-    {
-      input,
-      output: {
-        file: resolve(outputDir, `${output}.d.ts`),
-        format: 'es'
-      },
-      plugins: [
-        dts()
-      ]
-    }
-  ]
+        }
+      }))
+    ]
+  }
+}
+
+const dtsMatrix = (): RollupOptions[] => {
+  return [...dtsOutput.values()].flatMap(([input, output]) => ({
+    input,
+    cache,
+    output: {
+      file: resolve(outputDir, `${output}.d.ts`),
+      format: 'es'
+    },
+    plugins: [
+      dts()
+    ]
+  }))
 }
 
 const build: RollupOptions[] = [
-  ...buildMatrix('./src/index.tsx', 'index', {
-    format: ['es', 'cjs'],
-    browser: false
+  buildMatrix('./src/index.tsx', 'index', {
+    format: ['es', 'umd'],
+    browser: false,
+    dts: true
   }),
-  ...buildMatrix('./src/browser.tsx', 'browser', {
+  buildMatrix('./src/browser.tsx', 'browser', {
     format: ['es', 'umd'],
-    browser: true
-  })
+    browser: true,
+    dts: true
+  }),
+  ...dtsMatrix()
 ]
 
 export default build

src/index.tsx

@@ -1,5 +1,7 @@
-import { Paper } from '@mui/material'
-import { createTheme, ThemeProvider } from '@mui/material/styles'
+import {
+  createTheme, Paper,
+  ThemeProvider
+} from '@mui/material'
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 
 import { DataKeyPair } from './components/DataKeyPair'

yarn.lock

@@ -1721,13 +1721,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/plugin-transform-imports@npm:^1.5.36":
-  version: 1.5.36
-  resolution: "@swc/plugin-transform-imports@npm:1.5.36"
-  checksum: b47cbb9bdd29d20ac391050ac19afe862cc3bd86c17de5405789ff2e815e710d4ad2ab3356427c73a0b6da11f8757f707171cbd2ad325970f29af525dfb654e2
-  languageName: node
-  linkType: hard
-
 "@testing-library/dom@npm:^8.5.0":
   version: 8.18.1
   resolution: "@testing-library/dom@npm:8.18.1"
@@ -1791,7 +1784,6 @@ __metadata:
     "@rollup/plugin-node-resolve": ^15.0.1
     "@rollup/plugin-replace": ^5.0.2
     "@swc/core": ^1.3.27
-    "@swc/plugin-transform-imports": ^1.5.36
     "@testing-library/react": ^13.4.0
     "@types/node": ^18.11.18
     "@types/react": ^18.0.27