From 27f091b956732403d3cbaa703f3fa7fa6289c1eb Mon Sep 17 00:00:00 2001 From: Pionxzh Date: Tue, 7 Mar 2023 18:56:06 +0800 Subject: [PATCH] Revert "fix: reduce MUI size by using `@swc/plugin-transform-imports` (#169)" This reverts commit f5739d6346d3c7365c6f0c62713dcace54deb314. --- .eslintrc.js | 9 --- .gitignore | 1 - package.json | 1 - rollup.config.ts | 168 ++++++++++++++++++++++------------------------- src/index.tsx | 6 +- yarn.lock | 8 --- 6 files changed, 84 insertions(+), 109 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index b577e881..7724ec3d 100644 --- a/.eslintrc.js +++ b/.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'], diff --git a/.gitignore b/.gitignore index e56e0801..8b1f7f33 100644 --- a/.gitignore +++ b/.gitignore @@ -15,7 +15,6 @@ tsconfig.tsbuildinfo .eslintcache node_modules -.swc .next .vercel coverage diff --git a/package.json b/package.json index d65de78d..de2d7284 100644 --- a/package.json +++ b/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", diff --git a/rollup.config.ts b/rollup.config.ts index 99177728..a49f3c0f 100644 --- a/rollup.config.ts +++ b/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] = [ - '@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] = [ - '@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: `/// `, - globals: externalDeps.reduce((object, module) => { - if (typeof module === 'string') { - object[module] = module - } + globals: external.reduce((object, module) => { + object[module] = module return object }, {} as Record) })) @@ -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 diff --git a/src/index.tsx b/src/index.tsx index 1a05a7fd..eb98fefc 100644 --- a/src/index.tsx +++ b/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' diff --git a/yarn.lock b/yarn.lock index 3eb294c9..3b32012d 100644 --- a/yarn.lock +++ b/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