feat: use vite8

Author: Sepush

build/utils/tsToJs.ts

@@ -1,19 +1,16 @@
-import { transformSync } from 'esbuild'
+import { transformSync } from 'oxc-transform'
 
 export function tsToJs(content: string | null): string {
   if (!content) {
     return ''
   }
-  // esbuild will remove blank line
-  const beforeTransformContent = content.replace(
-    /\n(\s)*\n/g,
-    '\n__blankline\n'
-  )
-  const { code } = transformSync(beforeTransformContent, {
-    loader: 'ts',
-    minify: false,
-    minifyWhitespace: false,
-    charset: 'utf8'
+  const { code, errors } = transformSync('file.ts', content, {
+    typescript: {
+      onlyRemoveTypeImports: true
+    }
   })
-  return code.trim().replace(/__blankline;/g, '')
+  if (errors.length > 0) {
+    console.error('oxc-transform errors:', errors)
+  }
+  return code.trim()
 }

build/vite-plugin-demo.ts

@@ -6,11 +6,11 @@ import { demoIndexTransFormPlugin } from './vite-plugin-index-tranform'
 
 const fileRegex = /\.(md|vue)$/
 
-const vuePlugin = vue({
-  include: [/\.vue$/, /\.md$/]
-})
-
 export function createDemoPlugin(): Plugin[] {
+  const vuePlugin = vue({
+    include: [/\.vue$/, /\.md$/]
+  })
+
   const naiveDemoVitePlugin: Plugin = {
     name: 'demo-vite',
     async transform(_, id) {
@@ -23,22 +23,8 @@ export function createDemoPlugin(): Plugin[] {
       if (fileRegex.test(file)) {
         const code = await getTransformedVueSrc(file)
         if (code === undefined)
-          return []
-
-        const { handleHotUpdate } = vuePlugin
-        if (typeof handleHotUpdate === 'function') {
-          return handleHotUpdate({
-            ...ctx,
-            read: () => code
-          })
-        }
-        else if (handleHotUpdate?.handler) {
-          return handleHotUpdate.handler({
-            ...ctx,
-            read: () => code
-          })
-        }
-        return []
+          return
+        ctx.read = () => code
       }
     }
   }

package.json

@@ -35,7 +35,8 @@
   "scripts": {
     "start": "pnpm run dev",
     "dev": "pnpm run clean && pnpm run gen-version && pnpm run gen-volar-dts && NODE_ENV=development vite",
-    "build:package": "pnpm run gen-version && pnpm run clean && pnpm run gen-volar-dts && tsc -b --force tsconfig.esm.json && tsx scripts/pre-build/pre-cjs-build.ts && tsc -b --force tsconfig.cjs.json && rollup -c && pnpm run test:umd && pnpm run test:esm && pnpm run post-build && rimraf {es,lib}/*.tsbuildinfo",
+    "build:package": "pnpm run gen-version && pnpm run clean && pnpm run gen-volar-dts && tsc -b --force tsconfig.esm.json && tsx scripts/pre-build/pre-cjs-build.ts && tsc -b --force tsconfig.cjs.json && pnpm run build:dist && pnpm run test:umd && pnpm run test:esm && pnpm run post-build && rimraf {es,lib}/*.tsbuildinfo",
+    "build:dist": "BUILD_ENV=development vite build -c vite.build.mts && BUILD_ENV=production vite build -c vite.build.mts",
     "build:themes": "tsc -b --force themes/tusimple/tsconfig.esm.json && tsc -b --force themes/tusimple/tsconfig.cjs.json",
     "build:site": "bash ./scripts/pre-build-site/pre-build-site.sh && NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 vite build && bash ./scripts/post-build-site/post-build-site.sh",
     "clean": "rimraf site lib es dist node_modules/naive-ui themes/tusimple/es themes/tusimple/lib",
@@ -98,10 +99,6 @@
     "@babel/traverse": "^7.28.0",
     "@lylajs/web": "^2.1.0",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-replace": "^6.0.2",
-    "@rollup/plugin-terser": "^0.4.4",
     "@types/babel__core": "^7.20.5",
     "@types/babel__generator": "^7.27.0",
     "@types/babel__traverse": "^7.28.0",
@@ -112,16 +109,15 @@
     "@vicons/fluent": "^0.13.0",
     "@vicons/ionicons4": "^0.13.0",
     "@vicons/ionicons5": "^0.13.0",
-    "@vitejs/plugin-vue": "^6.0.0",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vitest/coverage-v8": "^4.0.15",
     "@vue/compiler-sfc": "^3.5.21",
     "@vue/server-renderer": "^3.5.21",
     "@vue/test-utils": "^2.4.6",
     "autoprefixer": "^10.4.21",
     "codesandbox": "^2.2.3",
     "cssnano": "^7.1.0",
     "deepmerge": "^4.3.1",
-    "esbuild": "0.25.10",
     "eslint": "^9.6.0",
     "express": "^5.1.0",
     "fast-glob": "^3.3.1",
@@ -134,22 +130,22 @@
     "katex": "^0.16.22",
     "lint-staged": "^16.1.6",
     "marked": "^12.0.2",
+    "oxc-transform": "^0.101.0",
     "prettier": "^3.6.2",
     "rimraf": "^6.0.1",
-    "rollup": "^4.45.1",
-    "rollup-plugin-esbuild": "^6.2.1",
     "superagent": "^10.2.2",
     "tsx": "^4.20.3",
     "typescript": "^5.9.2",
     "vfonts": "^0.0.3",
-    "vite": "^7.0.4",
-    "vitest": "^3.2.4",
+    "vite": "8.0.0-beta.0",
+    "vitest": "^4.0.15",
     "vue": "^3.5.21",
     "vue-router": "^4.5.1",
     "vue-tsc": "^3.0.7"
   },
   "pnpm": {
     "overrides": {
+      "vite": "8.0.0-beta.0",
       "cssstyle": "5.2.1"
     },
     "peerDependencyRules": {

rollup.config.mjs

@@ -0,0 +1,55 @@
+import path from 'node:path'
+import process from 'node:process'
+import { babel } from '@rollup/plugin-babel'
+import { defineConfig } from 'vite'
+
+const extensions = ['.mjs', '.js', '.json', '.ts', '.tsx']
+
+const isDev = process.env.BUILD_ENV === 'development'
+
+export default defineConfig({
+  build: {
+    emptyOutDir: false,
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      name: 'naive',
+      formats: ['es', 'umd'],
+      fileName: (format) => {
+        if (format === 'umd') {
+          return isDev ? 'index.js' : 'index.prod.js'
+        }
+        return isDev ? 'index.mjs' : 'index.prod.mjs'
+      }
+    },
+    outDir: 'dist',
+    sourcemap: true,
+    minify: !isDev,
+    rolldownOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue'
+        },
+        exports: 'named'
+      },
+      plugins: [
+        babel({
+          extensions,
+          babelHelpers: 'bundled'
+        })
+      ]
+    }
+  },
+  oxc: {
+    jsx: {
+      runtime: 'classic',
+      pragma: 'h',
+      pragmaFrag: 'Fragment',
+      development: false
+    }
+  },
+  define: {
+    __DEV__: JSON.stringify(isDev),
+    'process.env.NODE_ENV': JSON.stringify(isDev ? 'development' : 'production')
+  }
+})

tsconfig.esbuild.json

@@ -17,7 +17,9 @@ const testExclude = isBuildTimeTest
 
 export default defineConfig({
   root: __dirname,
-  plugins: createDemoPlugin(),
+  plugins: [
+    ...createDemoPlugin()
+  ],
   resolve: {
     // In production site build, we want to import naive-ui from node_modules
     alias:
@@ -73,11 +75,19 @@ export default defineConfig({
   },
   build: {
     outDir: 'site',
-    rollupOptions: {
+    rolldownOptions: {
       output: {
-        manualChunks: {
-          'grapheme-splitter': ['grapheme-splitter'],
-          katex: ['katex']
+        advancedChunks: {
+          groups: [
+            {
+              name: 'grapheme-splitter',
+              test: /grapheme-splitter/
+            },
+            {
+              name: 'katex',
+              test: /katex/
+            }
+          ]
         }
       },
       plugins: [
@@ -87,10 +97,14 @@ export default defineConfig({
       ]
     }
   },
-  esbuild: {
-    jsx: 'transform',
-    jsxFactory: 'h',
-    jsxFragment: 'Fragment'
+  oxc: {
+    jsx: {
+      runtime: 'classic',
+      pragma: 'h',
+      pragmaFrag: 'Fragment',
+      // Disable React-specific development features that add __source and __self props
+      development: false
+    }
   },
   test: {
     globals: true,