chore: migrate to Vite2 (#347)

* chore: migrate to vite2

* styles: remove unsed code

* chore: update package.json

Co-authored-by: Volankey <jiwen.bai@tusimple.ai>

build/vite-plugin-css-render.js

@@ -2,16 +2,14 @@ const cleanCssr = require('./utils/clean-cssr')
 
 module.exports = () => {
   return {
-    configureServer: [
-      async ({ app }) => {
-        app.use(async (ctx, next) => {
-          await next()
-          // if not ctx.body, it should be a http 304
-          if (ctx.path.endsWith('.cssr.js') && ctx.body) {
-            ctx.body = cleanCssr(ctx.body.toString())
-          }
-        })
+    name: 'css-render-vite',
+    transform (src, id) {
+      if (id.endsWith('.cssr.js')) {
+        return {
+          code: cleanCssr(src),
+          map: null
+        }
       }
-    ]
+    }
   }
 }

build/vite-plugin-demo.js

@@ -1,32 +1,53 @@
+const createVuePlugin = require('@vitejs/plugin-vue')
 const getDemoByPath = require('./utils/get-demo-by-path')
+const createRollupCssRenderPlugin = require('./rollup-plugin-css-render')
+const demoIndexTransFormPlugin = require('./vite-plugin-index-tranform')
 
-module.exports = function () {
-  const configureServer = [
-    async ({ app, resolver, watcher }) => {
-      // check and send hmr message
-      watcher.on('change', async (file) => {
-        if (file.endsWith('.md')) {
-          const content = await getDemoByPath(file)
-          watcher.handleVueReload(file, Date.now(), content)
-        }
-      })
-      app.use(async (ctx, next) => {
-        if (/\/@modules\/naive-ui\/?/.test(ctx.path)) {
-          ctx.path = ctx.path.replace(/\/@modules\/naive-ui\/?/, '/@naive-ui/index.js')
-        }
-        if (/\.md$/.test(ctx.path) || /\.entry$/.test(ctx.path)) {
-          const publicPath = ctx.path
-          const filePath = resolver.requestToFile(publicPath)
-          const content = await getDemoByPath(filePath)
-          // make it Treat as vue
-          ctx.vue = true
-          ctx.body = content
-        }
-        await next()
-      })
+const fileRegex = /\.(md)|(entry)$/
+
+const fn = async (id) => {
+  if (fileRegex.test(id)) {
+    const code = await getDemoByPath(id)
+    return {
+      code: code,
+      map: null
     }
-  ]
-  return {
-    configureServer
   }
 }
+const vuePlugin = createVuePlugin({
+  include: [/\.vue$/, /\.md$/, /\.entry$/]
+})
+
+const createNaiveDemoVitePlugin = () => {
+  const naiveDemoVitePlugin = {
+    name: 'demo-vite',
+    transform (_, id) {
+      return fn(id)
+    },
+    config () {
+      return {
+        transformInclude: /\.(md|entry)$/
+      }
+    },
+    async handleHotUpdate (ctx) {
+      const { file } = ctx
+      if (fileRegex.test(file)) {
+        const code = await getDemoByPath(file)
+        return vuePlugin.handleHotUpdate({
+          ...ctx,
+          read: () => code
+        })
+      }
+    }
+  }
+  const rollupCssRenderPlugin = createRollupCssRenderPlugin()
+
+  return [
+    demoIndexTransFormPlugin,
+    naiveDemoVitePlugin,
+    vuePlugin,
+    rollupCssRenderPlugin
+  ]
+}
+
+module.exports = createNaiveDemoVitePlugin

build/vite-plugin-index-tranform.js

@@ -0,0 +1,28 @@
+const transformIndexHtml = (code) => {
+  const isTusimple = !!process.env.TUSIMPLE
+  switch (process.env.NODE_ENV) {
+    case 'production':
+      return code.replace(
+        /__INDEX__/,
+        '/demo/index.' + (isTusimple ? 'ts-prod.js' : 'prod.js')
+      )
+    default:
+      return code.replace(
+        /__INDEX__/,
+        '/demo/index.' + (isTusimple ? 'ts-dev.js' : 'dev.js')
+      )
+  }
+}
+const demoIndexTransFormPlugin = {
+  name: 'demo-transform',
+  enforce: 'pre',
+  // vite build is production will not invoke `transformIndexHtml`
+  transform (code, id) {
+    if (id.endsWith('.html')) {
+      return { code: transformIndexHtml(code), map: null }
+    }
+  },
+  transformIndexHtml
+}
+
+module.exports = demoIndexTransFormPlugin

package.json

@@ -64,6 +64,7 @@
     "@rollup/plugin-replace": "^2.3.4",
     "@types/jest": "^26.0.15",
     "@vue/compiler-sfc": "^3.0.5",
+    "@vitejs/plugin-vue": "^1.0.4",
     "@vue/eslint-config-standard": "^5.1.2",
     "@vue/test-utils": "^2.0.0-beta.12",
     "autoprefixer": "^9.8.6",
@@ -90,7 +91,7 @@
     "rollup-plugin-vue": "^6.0.0-beta.11",
     "tinycolor2": "^1.4.2",
     "typescript": "^4.0.5",
-    "vite": "^1.0.0-rc.13",
+    "vite": "^2.0.0-beta.23",
     "vue-jest": "^5.0.0-alpha.5",
     "vue-router": "^4.0.0-rc.1"
   },
@@ -119,4 +120,4 @@
     }
   },
   "sideEffects": false
-}
+}

rollup.config.js

@@ -5,7 +5,9 @@ const replace = require('@rollup/plugin-replace')
 const { babel } = require('@rollup/plugin-babel')
 
 function externalValidator (patterns) {
-  return (id) => patterns.some((pattern) => id.startsWith(pattern))
+  return (id) => {
+    return patterns.some((pattern) => id.startsWith(pattern))
+  }
 }
 
 // do not use babel when build library, use it when only build the site

vite.config.js

@@ -1,65 +1,40 @@
 const path = require('path')
 const { babel } = require('@rollup/plugin-babel')
-const rollupCssRenderPlugin = require('./build/rollup-plugin-css-render')
-const rollupDemoPlugin = require('./build/rollup-plugin-demo')
-const viteCssRenderPlugin = require('./build/vite-plugin-css-render')
-const viteDemoPlugin = require('./build/vite-plugin-demo')
+const createNaiveDemoVitePlugin = require('./build/vite-plugin-demo')
 
 module.exports = {
   root: __dirname,
-  plugins: [
-    viteDemoPlugin(),
-    viteCssRenderPlugin()
+  plugins: createNaiveDemoVitePlugin(),
+  alias: [
+    {
+      find: 'naive-ui',
+      replacement: path.resolve(__dirname, './src')
+    }
   ],
-  outDir: 'site',
+  define: {
+    'process.env.NODE_ENV': `'${process.env.NODE_ENV}'`,
+    __DEV__: process.env.NODE_ENV !== 'production'
+  },
   optimizeDeps: {
     include: [
       'highlight.js/lib/core',
       'highlight.js/lib/languages/cpp',
       'highlight.js/lib/languages/javascript',
-      'highlight.js/lib/languages/python'
+      'highlight.js/lib/languages/python',
+      '@vicons/fluent/Compose16Regular.js',
+      'date-fns/locale'
     ]
   },
-  alias: {
-    '/@naive-ui/': path.resolve(__dirname, './src'),
-    src: path.resolve(__dirname, './src')
-  },
-  define: {
-    'process.env.NODE_ENV': `'${process.env.NODE_ENV}'`,
-    __DEV__: process.env.NODE_ENV !== 'production'
-  },
-  minify: false,
-  rollupPluginVueOptions: {
-    include: /\.(vue|md|demo.md|demo-entry.md|entry)$/
-  },
-  rollupInputOptions: {
-    plugins: [
-      rollupDemoPlugin(),
-      rollupCssRenderPlugin(),
-      babel({
-        babelHelpers: 'bundled'
-        // exclude: 'node_modules/highlight.js/**'
-      })
-    ]
-  },
-  indexHtmlTransforms: [
-    {
-      apply: 'pre',
-      transform ({ code }) {
-        const isTusimple = !!process.env.TUSIMPLE
-        switch (process.env.NODE_ENV) {
-          case 'production':
-            return code.replace(
-              /__INDEX__/,
-              '/demo/index.' + (isTusimple ? 'ts-prod.js' : 'prod.js')
-            )
-          default:
-            return code.replace(
-              /__INDEX__/,
-              '/demo/index.' + (isTusimple ? 'ts-dev.js' : 'dev.js')
-            )
-        }
-      }
+  build: {
+    outDir: 'site',
+    minify: false,
+    rollupOptions: {
+      plugins: [
+        babel({
+          babelHelpers: 'bundled'
+          // exclude: 'node_modules/highlight.js/**'
+        })
+      ]
     }
-  ]
+  }
 }