fix: vite plugin cause source map error (#108)

* fix: fix source map error

* fix: import way of @mui

* fix: istanbul only when test is true

.github/workflows/web_coverage.yaml

@@ -9,6 +9,7 @@ on:
 env:
   NODE_VERSION: "18.16.0"
   PNPM_VERSION: "8.5.0"
+  COVERAGE: "true"
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
@@ -45,10 +46,14 @@ jobs:
           build: pnpm run build
           start: pnpm run start
           browser: chrome
+        env:
+          COVERAGE: "true"
 
       - name: Jest run
         run: |
           pnpm run test:unit
+        env:
+          COVERAGE: "true"
 
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v2

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev:coverage": "cross-env COVERAGE=true vite",
     "build": "vite build",
     "lint": "tsc --noEmit --project tsconfig.web.json && eslint --ext .js,.ts,.tsx . --ignore-path .eslintignore.web",
     "start": "vite preview --port 3000",
@@ -14,8 +15,10 @@
     "test": "pnpm run test:unit && pnpm run test:components",
     "test:components": "cypress run --component --browser chrome --headless",
     "test:unit": "jest --coverage",
+    "test:unit:coverage": "cross-env COVERAGE=true jest --coverage",
+    "test:components:coverage": "cross-env COVERAGE=true cypress run --component --browser chrome --headless",
     "test:cy": "cypress run",
-    "coverage": "pnpm run test:unit && pnpm run test:components",
+    "coverage": "cross-env COVERAGE=true pnpm run test:unit && cross-env COVERAGE=true pnpm run test:components",
     "generate-tokens": "node scripts/system-token/convert-tokens.cjs"
   },
   "dependencies": {

src/components/_shared/color-picker/ColorPicker.tsx

@@ -5,7 +5,7 @@ import React, { useCallback, useRef, useMemo } from 'react';
 import Typography from '@mui/material/Typography';
 
 import { useTranslation } from 'react-i18next';
-import { TitleOutlined } from '@mui/icons-material';
+import TitleOutlined from '@mui/icons-material/TitleOutlined';
 
 export interface ColorPickerProps {
   onChange?: (format: EditorMarkFormat.FontColor | EditorMarkFormat.BgColor, color: string) => void;

src/components/_shared/modal/IndexedDBCleaner.tsx

@@ -1,5 +1,8 @@
 import { notify } from '@/components/_shared/notify';
-import { TaskAltRounded } from '@mui/icons-material';
+
+import TaskAltRounded from '@mui/icons-material/TaskAltRounded';
+import DeleteIcon from '@mui/icons-material/Delete';
+
 import React, { useState, useEffect } from 'react';
 import {
   Box,
@@ -11,7 +14,6 @@ import {
   ListItemText,
   Typography,
 } from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
 
 const MAX_DELETE = 50;
 const IndexedDBCleaner = () => {
@@ -139,4 +141,4 @@ const IndexedDBCleaner = () => {
   );
 };
 
-export default IndexedDBCleaner;
+export default IndexedDBCleaner;

src/components/_shared/more-actions/importer/ImporterDialogContent.tsx

@@ -2,6 +2,7 @@ import FileDropzone from '@/components/_shared/file-dropzone/FileDropzone';
 import { notify } from '@/components/_shared/notify';
 import { TabPanel, ViewTab, ViewTabs } from '@/components/_shared/tabs/ViewTabs';
 import { AFConfigContext } from '@/components/main/app.hooks';
+
 import LinearProgress from '@mui/material/LinearProgress';
 import React, { useCallback, useContext } from 'react';
 import { useTranslation } from 'react-i18next';

src/components/_shared/notify/CustomSnackbar.tsx

@@ -1,10 +1,8 @@
-import {
-  ErrorOutline,
-  HighlightOff,
-  PowerSettingsNew,
-  TaskAltRounded,
-} from '@mui/icons-material';
-import { IconButton } from '@mui/material';
+import ErrorOutline from '@mui/icons-material/ErrorOutline';
+import HighlightOff from '@mui/icons-material/HighlightOff';
+import PowerSettingsNew from '@mui/icons-material/PowerSettingsNew';
+import TaskAltRounded from '@mui/icons-material/TaskAltRounded';
+import IconButton from '@mui/material/IconButton';
 import React from 'react';
 import { useSnackbar, SnackbarContent, CustomContentProps } from 'notistack';
 import { ReactComponent as CloseIcon } from '@/assets/icons/close.svg';
@@ -58,4 +56,4 @@ const CustomSnackbar = React.forwardRef<HTMLDivElement, CustomContentProps>((pro
   );
 });
 
-export default CustomSnackbar;
+export default CustomSnackbar;

src/components/app/landing-pages/RequestAccess.tsx

@@ -2,8 +2,11 @@ import { NormalModal } from '@/components/_shared/modal';
 import { notify } from '@/components/_shared/notify';
 import { useAppViewId, useCurrentWorkspaceId } from '@/components/app/app.hooks';
 import { AFConfigContext, useCurrentUser, useService } from '@/components/main/app.hooks';
-import { TaskAltRounded } from '@mui/icons-material';
-import { Button, Divider, Typography } from '@mui/material';
+
+import TaskAltRounded from '@mui/icons-material/TaskAltRounded';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import Typography from '@mui/material/Typography';
 import React, { useContext } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 import { ReactComponent as AppflowyLogo } from '@/assets/icons/appflowy.svg';

src/components/main/withAppWrapper.tsx

@@ -5,7 +5,8 @@ import AppTheme from '@/components/main/AppTheme';
 import AppConfig from '@/components/main/AppConfig';
 import { Suspense } from 'react';
 import { SnackbarProvider } from 'notistack';
-import { styled } from '@mui/material';
+
+import { styled } from '@mui/material/styles';
 import { InfoSnackbar } from '../_shared/notify';
 
 const StyledSnackbarProvider = styled(SnackbarProvider)`

src/pages/AcceptInvitationPage.tsx

@@ -4,7 +4,7 @@ import ChangeAccount from '@/components/_shared/modal/ChangeAccount';
 import { notify } from '@/components/_shared/notify';
 import { getAvatar } from '@/components/_shared/view-icon/utils';
 import { AFConfigContext, useCurrentUser, useService } from '@/components/main/app.hooks';
-import { EmailOutlined } from '@mui/icons-material';
+import EmailOutlined from '@mui/icons-material/EmailOutlined';
 import { Avatar, Button, Divider } from '@mui/material';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';

src/pages/ImportPage.tsx

@@ -1,5 +1,6 @@
 import Import from '@/components/_shared/more-actions/importer/Import';
-import { Typography } from '@mui/material';
+
+import Typography from '@mui/material/Typography';
 import React from 'react';
 import { ReactComponent as AppflowyLogo } from '@/assets/icons/appflowy.svg';
 import { useSearchParams } from 'react-router-dom';

vite.config.ts

@@ -1,8 +1,7 @@
-import { defineConfig } from 'vite';
+import { defineConfig, Plugin } from 'vite';
 import react from '@vitejs/plugin-react';
 import svgr from 'vite-plugin-svgr';
 import { visualizer } from 'rollup-plugin-visualizer';
-import usePluginImport from 'vite-plugin-importer';
 import { totalBundleSize } from 'vite-plugin-total-bundle-size';
 import path from 'path';
 import istanbul from 'vite-plugin-istanbul';
@@ -12,6 +11,7 @@ import { viteExternalsPlugin } from 'vite-plugin-externals';
 const resourcesPath = path.resolve(__dirname, '../resources');
 const isDev = process.env.NODE_ENV === 'development';
 const isProd = process.env.NODE_ENV === 'production';
+const isTest = process.env.NODE_ENV === 'test' || process.env.COVERAGE === 'true';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -34,7 +34,6 @@ export default defineConfig({
     isProd ? viteExternalsPlugin({
       react: 'React',
       'react-dom': 'ReactDOM',
-
     }) : undefined,
     svgr({
       svgrOptions: {
@@ -72,7 +71,8 @@ export default defineConfig({
         },
       },
     }),
-    istanbul({
+    // Enable istanbul for code coverage (active if isTest is true)
+    isTest ? istanbul({
       cypress: true,
       requireEnv: false,
       include: ['src/**/*'],
@@ -81,13 +81,7 @@ export default defineConfig({
         'cypress/**/*',
         'node_modules/**/*',
       ],
-    }),
-    usePluginImport({
-      libraryName: '@mui/icons-material',
-      libraryDirectory: '',
-      camel2DashComponentName: false,
-      style: false,
-    }),
+    }) : undefined,
     process.env.ANALYZE_MODE
       ? visualizer({
         emitFile: true,
@@ -109,15 +103,20 @@ export default defineConfig({
       ignored: ['node_modules'],
     },
     cors: false,
+    sourcemapIgnoreList: false,
   },
   envPrefix: ['AF'],
   esbuild: {
+    keepNames: true,
+    sourcesContent: true,
+    sourcemap: true,
+    minifyIdentifiers: false, // Disable identifier minification in development
+    minifySyntax: false,      // Disable syntax minification in development
     pure: !isDev ? ['console.log', 'console.debug', 'console.info', 'console.trace'] : [],
   },
   build: {
     target: `esnext`,
     reportCompressedSize: true,
-    sourcemap: isDev,
     rollupOptions: isProd
       ? {