feat(vite): support build watch mode (#963)

examples/vite-watch-mode/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local

examples/vite-watch-mode/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

examples/vite-watch-mode/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "vite-watch-mode",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  },
+  "devDependencies": {
+    "@iconify-json/logos": "^1.1.5",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.3",
+    "@unocss/core": "link:../../packages/core",
+    "@unocss/preset-attributify": "link:../../packages/preset-attributify",
+    "@unocss/preset-icons": "link:../../packages/presets-icons",
+    "@vitejs/plugin-react": "^1.3.2",
+    "cross-env": "^7.0.3",
+    "typescript": "^4.6.4",
+    "unocss": "link:../../packages/unocss",
+    "vite": "^2.9.8"
+  }
+}

examples/vite-watch-mode/src/App.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div className="text-center">
+      <header className="bg-#282c34 min-h-100vh flex flex-col items-center justify-center color-white">
+        <div className="logo" />
+        <h1 className="mt-2em animate-bounce-alt animate-2s">Hello Vite + React!</h1>
+        <p>
+          <button
+            className="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600"
+            type="button"
+            onClick={() => setCount(count => count + 1)}
+          >
+            count is: {count}
+          </button>
+
+          <button
+            bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
+            text="sm white"
+            font="mono light"
+            p="y-2 x-4"
+            m="l-1em"
+            border="2 rounded blue-200"
+            type="button"
+
+            onClick={() => setCount(count => count + 1)}
+          >
+            count is: {count}
+          </button>
+
+        </p>
+        <p>
+          Edit <code>App.tsx</code> and save to test HMR updates.
+        </p>
+        <p>
+          <a
+            className="color-#61dafb"
+            href="https://reactjs.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn React
+          </a>
+          {' | '}
+          <a
+            className="color-#61dafb"
+            href="https://vitejs.dev/guide/features.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Vite Docs
+          </a>
+        </p>
+      </header>
+    </div>
+  )
+}
+
+export default App

examples/vite-watch-mode/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

examples/vite-watch-mode/src/main.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+import 'uno.css'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root'),
+)

examples/vite-watch-mode/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

examples/vite-watch-mode/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["./src"]
+}

examples/vite-watch-mode/vite.config.ts

@@ -0,0 +1,41 @@
+import type { PluginOption } from 'vite'
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import UnoCss from 'unocss/vite'
+import presetIcons from '@unocss/preset-icons'
+import presetUno from '@unocss/preset-uno'
+import presetAttributify from '@unocss/preset-attributify'
+
+const plugins: (PluginOption | PluginOption[])[] = [
+  UnoCss({
+    shortcuts: [
+      { logo: 'i-logos-react w-6em h-6em transform transition-800 hover:rotate-180' },
+    ],
+    inspector: false,
+    presets: [
+      presetUno(
+      ),
+      presetAttributify(),
+      presetIcons({
+        extraProperties: {
+          'display': 'inline-block',
+          'vertical-align': 'middle',
+        },
+      }),
+    ],
+  }),
+]
+
+plugins.push(react())
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins,
+  build: {
+    lib: {
+      formats: ['es', 'cjs'],
+      name: 'main',
+      entry: 'src/main.tsx',
+    },
+  },
+})

packages/vite/src/modes/global/build.ts

@@ -43,7 +43,6 @@ export function GlobalModeBuildPlugin({ uno, ready, extract, tokens, modules, fi
       enforce: 'pre',
       buildStart() {
         tasks = []
-        vfsLayerMap.clear()
       },
       transform(code, id) {
         if (filter(code, id))