feat(vite): add client fetch mode (#3255)

unocss · Oct 23, 2023 · 37fd456 · 37fd456
1 parent 96f6449
commit 37fd456
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/packages/vite/src/client.ts b/packages/vite/src/client.ts
@@ -1,8 +1,9 @@
 /// <reference types="vite/client" />
 /// <reference lib="dom" />
 
-function post(data: any) {
+function post(data: any, config: any) {
   return fetch('__POST_PATH__', {
+    ...config,
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -33,7 +34,10 @@ function schedule() {
     clearTimeout(_timer)
   _timer = setTimeout(() => {
     if (pendingClasses.size) {
-      post({ type: 'add-classes', data: Array.from(pendingClasses) })
+      post(
+        { type: 'add-classes', data: Array.from(pendingClasses) },
+        { mode: '__POST_FETCH_MODE__' },
+      )
       include(visitedClasses, pendingClasses)
       pendingClasses.clear()
     }

diff --git a/packages/vite/src/devtool.ts b/packages/vite/src/devtool.ts
@@ -5,6 +5,7 @@ import type { Plugin, ResolvedConfig, ViteDevServer } from 'vite'
 import type { IncomingMessage } from 'connect'
 import type { UnocssPluginContext } from '@unocss/core'
 import { toEscapedSelector } from '@unocss/core'
+import type { VitePluginConfig } from './types'
 
 const _dirname = typeof __dirname !== 'undefined' ? __dirname : dirname(fileURLToPath(import.meta.url))
 
@@ -39,7 +40,7 @@ function getBodyJson(req: IncomingMessage) {
   })
 }
 
-export function createDevtoolsPlugin(ctx: UnocssPluginContext): Plugin[] {
+export function createDevtoolsPlugin(ctx: UnocssPluginContext, pluginConfig: VitePluginConfig<any>): Plugin[] {
   let config: ResolvedConfig
   let server: ViteDevServer | undefined
   let clientCode = ''
@@ -144,6 +145,7 @@ export function createDevtoolsPlugin(ctx: UnocssPluginContext): Plugin[] {
             ]
               .join('\n')
               .replace('__POST_PATH__', `${(config.server?.origin ?? '')}${postPath}`)
+              .replace('__POST_FETCH_MODE__', pluginConfig.fetchMode ?? 'cors')
           }
           return config.command === 'build'
             ? ''

diff --git a/packages/vite/src/index.ts b/packages/vite/src/index.ts
@@ -42,7 +42,7 @@ export default function UnocssPlugin<Theme extends object>(
   const plugins = [
     ConfigHMRPlugin(ctx),
     ...createTransformerPlugins(ctx),
-    ...createDevtoolsPlugin(ctx),
+    ...createDevtoolsPlugin(ctx, inlineConfig),
     {
       name: 'unocss:api',
       api: <UnocssVitePluginAPI>{

diff --git a/packages/vite/src/types.ts b/packages/vite/src/types.ts
@@ -47,4 +47,14 @@ export interface VitePluginConfig<Theme extends object = object> extends UserCon
    * @default true
    */
   hmrTopLevelAwait?: boolean
+
+  /**
+   * Fetch mode in devtools.
+   *
+   * Some server does not configure its CORS and you may want to set this to 'no-cors'.
+   * See https://github.com/unocss/unocss/issues/2822.
+   *
+   * @default 'cors'
+   */
+  fetchMode?: 'cors' | 'navigate' | 'no-cors' | 'same-origin'
 }