@shijiu/jsview 2.1.340-test.0 → 2.1.362-test.0

package/patches/node_modules/@vitejs/plugin-vue/dist/index.mjs

@@ -1,16 +1,13 @@
 import fs from 'node:fs';
 import { isCSSRequest, normalizePath as normalizePath$1, transformWithEsbuild, formatPostcssSourceMap, createFilter } from 'vite';
-import { shallowRef, computed } from 'vue';
 import { createRequire } from 'node:module';
 import path from 'node:path';
 import { createHash } from 'node:crypto';
 import require$$0 from 'tty';
 import require$$1 from 'util';
 
-const version = "5.0.3";
-
 function resolveCompiler(root) {
-  const compiler = tryResolveCompiler(root) || tryResolveCompiler();
+  const compiler = tryRequire("vue/compiler-sfc", root) || tryRequire("vue/compiler-sfc");
   if (!compiler) {
     throw new Error(
       `Failed to resolve vue/compiler-sfc.
@@ -19,12 +16,6 @@ function resolveCompiler(root) {
   }
   return compiler;
 }
-function tryResolveCompiler(root) {
-  const vueMeta = tryRequire("vue/package.json", root);
-  if (vueMeta && vueMeta.version.split(".")[0] >= 3) {
-    return tryRequire("vue/compiler-sfc", root);
-  }
-}
 const _require = createRequire(import.meta.url);
 function tryRequire(id, from) {
   try {
@@ -58,7 +49,7 @@ function parseVueRequest(id) {
 }
 
 function slash(path) {
-	const isExtendedLengthPath = path.startsWith('\\\\?\\');
+	const isExtendedLengthPath = /^\\\\\?\\/.test(path);
 
 	if (isExtendedLengthPath) {
 		return path;
@@ -68,43 +59,34 @@ function slash(path) {
 }
 
 const cache = /* @__PURE__ */ new Map();
-const hmrCache = /* @__PURE__ */ new Map();
 const prevCache = /* @__PURE__ */ new Map();
-function createDescriptor(filename, source, { root, isProduction, sourceMap, compiler, template }, hmr = false) {
+function createDescriptor(filename, source, { root, isProduction, sourceMap, compiler }) {
   const { descriptor, errors } = compiler.parse(source, {
     filename,
-    sourceMap,
-    templateParseOptions: template?.compilerOptions
+    sourceMap
   });
   const normalizedPath = slash(path.normalize(path.relative(root, filename)));
   descriptor.id = getHash(normalizedPath + (isProduction ? source : ""));
-  (hmr ? hmrCache : cache).set(filename, descriptor);
+  cache.set(filename, descriptor);
   return { descriptor, errors };
 }
 function getPrevDescriptor(filename) {
   return prevCache.get(filename);
 }
-function invalidateDescriptor(filename, hmr = false) {
-  const _cache = hmr ? hmrCache : cache;
-  const prev = _cache.get(filename);
-  _cache.delete(filename);
-  if (prev) {
-    prevCache.set(filename, prev);
-  }
+function setPrevDescriptor(filename, entry) {
+  prevCache.set(filename, entry);
 }
-function getDescriptor(filename, options, createIfNotFound = true, hmr = false, code) {
-  const _cache = hmr ? hmrCache : cache;
-  if (_cache.has(filename)) {
-    return _cache.get(filename);
+function getDescriptor(filename, options, createIfNotFound = true) {
+  if (cache.has(filename)) {
+    return cache.get(filename);
   }
   if (createIfNotFound) {
     const { descriptor, errors } = createDescriptor(
       filename,
-      code ?? fs.readFileSync(filename, "utf-8"),
-      options,
-      hmr
+      fs.readFileSync(filename, "utf-8"),
+      options
     );
-    if (errors.length && !hmr) {
+    if (errors.length) {
       throw errors[0];
     }
     return descriptor;
@@ -116,20 +98,6 @@ function getSrcDescriptor(filename, query) {
   }
   return cache.get(filename);
 }
-function getTempSrcDescriptor(filename, query) {
-  return {
-    filename,
-    id: query.id || "",
-    styles: [
-      {
-        scoped: query.scoped,
-        loc: {
-          start: { line: 0, column: 0 }
-        }
-      }
-    ]
-  };
-}
 function setSrcDescriptor(filename, entry, scoped) {
   if (scoped) {
     cache.set(`${filename}?src=${entry.id}`, entry);
@@ -160,15 +128,8 @@ function createRollupError(id, error) {
   return rollupError;
 }
 
-async function transformTemplateAsModule(code, descriptor, options, pluginContext, ssr, customElement) {
-  const result = compile(
-    code,
-    descriptor,
-    options,
-    pluginContext,
-    ssr,
-    customElement
-  );
+async function transformTemplateAsModule(code, descriptor, options, pluginContext, ssr) {
+  const result = compile(code, descriptor, options, pluginContext, ssr);
   let returnCode = result.code;
   if (options.devServer && options.devServer.config.server.hmr !== false && !ssr && !options.isProduction) {
     returnCode += `
@@ -181,15 +142,8 @@ import.meta.hot.accept(({ render }) => {
     map: result.map
   };
 }
-function transformTemplateInMain(code, descriptor, options, pluginContext, ssr, customElement) {
-  const result = compile(
-    code,
-    descriptor,
-    options,
-    pluginContext,
-    ssr,
-    customElement
-  );
+function transformTemplateInMain(code, descriptor, options, pluginContext, ssr) {
+  const result = compile(code, descriptor, options, pluginContext, ssr);
   return {
     ...result,
     code: result.code.replace(
@@ -198,9 +152,8 @@ function transformTemplateInMain(code, descriptor, options, pluginContext, ssr,
     )
   };
 }
-function compile(code, descriptor, options, pluginContext, ssr, customElement) {
+function compile(code, descriptor, options, pluginContext, ssr) {
   const filename = descriptor.filename;
-  resolveScript(descriptor, options, ssr, customElement);
   const result = options.compiler.compileTemplate({
     ...resolveTemplateCompilerOptions(descriptor, options, ssr),
     source: code
@@ -236,8 +189,7 @@ function resolveTemplateCompilerOptions(descriptor, options, ssr) {
     if (filename.startsWith(options.root)) {
       const devBase = options.devServer.config.base;
       assetUrlOptions = {
-        base: (options.devServer.config.server?.origin ?? "") + devBase + slash(path.relative(options.root, path.dirname(filename))),
-        includeAbsolute: !!devBase
+        base: (options.devServer.config.server?.origin ?? "") + devBase + slash(path.relative(options.root, path.dirname(filename)))
       };
     }
   } else if (transformAssetUrls !== false) {
@@ -272,7 +224,6 @@ function resolveTemplateCompilerOptions(descriptor, options, ssr) {
   return {
     ...options.template,
     id,
-    ast: canReuseAST(options.compiler.version) ? descriptor.template?.ast : void 0,
     filename,
     scoped: hasScoped,
     slotted: descriptor.slotted,
@@ -281,7 +232,7 @@ function resolveTemplateCompilerOptions(descriptor, options, ssr) {
     ssr,
     ssrCssVars: cssVars,
     transformAssetUrls,
-    preprocessLang: block.lang === "html" ? void 0 : block.lang,
+    preprocessLang: block.lang,
     preprocessOptions,
     compilerOptions: {
       ...options.template?.compilerOptions,
@@ -292,26 +243,9 @@ function resolveTemplateCompilerOptions(descriptor, options, ssr) {
     }
   };
 }
-function canReuseAST(version) {
-  if (version) {
-    const [_, minor, patch] = version.split(".").map(Number);
-    if (minor >= 4 && patch >= 3) {
-      return true;
-    }
-  }
-  return false;
-}
 
 const clientCache = /* @__PURE__ */ new WeakMap();
 const ssrCache = /* @__PURE__ */ new WeakMap();
-const typeDepToSFCMap = /* @__PURE__ */ new Map();
-function invalidateScript(filename) {
-  const desc = cache.get(filename);
-  if (desc) {
-    clientCache.delete(desc);
-    ssrCache.delete(desc);
-  }
-}
 function getResolvedScript(descriptor, ssr) {
   return (ssr ? ssrCache : clientCache).get(descriptor);
 }
@@ -321,16 +255,16 @@ function setResolvedScript(descriptor, script, ssr) {
 function isUseInlineTemplate(descriptor, isProd) {
   return isProd && !!descriptor.scriptSetup && !descriptor.template?.src;
 }
-const scriptIdentifier = `_sfc_main`;
-function resolveScript(descriptor, options, ssr, customElement) {
+function resolveScript(descriptor, options, ssr) {
   if (!descriptor.script && !descriptor.scriptSetup) {
     return null;
   }
+  const cacheToUse = ssr ? ssrCache : clientCache;
 // JsView Added >>>
 // 1. 解决style内容发生变化，不使用cache，在templete class和style同时发生变化没有被更新问题。
 // 2. 解决@import的css文件没有被更新问题。
-  // const cached = getResolvedScript(descriptor, ssr);
-  let cached = getResolvedScript(descriptor, ssr);
+  // const cached = cacheToUse.get(descriptor);
+  let cached = cacheToUse.get(descriptor);
   if (cached && descriptor.filename?.endsWith('.vue') && descriptor.styles) {
     for (const style of descriptor.styles) {
       let useCache = false;
@@ -362,42 +296,13 @@ function resolveScript(descriptor, options, ssr, customElement) {
     id: descriptor.id,
     isProd: options.isProduction,
     inlineTemplate: isUseInlineTemplate(descriptor, !options.devServer),
+    reactivityTransform: options.reactivityTransform !== false,
     templateOptions: resolveTemplateCompilerOptions(descriptor, options, ssr),
-    sourceMap: options.sourceMap,
-    genDefaultAs: canInlineMain(descriptor, options) ? scriptIdentifier : void 0,
-    customElement
+    sourceMap: options.sourceMap
   });
-  if (!options.isProduction && resolved?.deps) {
-    for (const [key, sfcs] of typeDepToSFCMap) {
-      if (sfcs.has(descriptor.filename) && !resolved.deps.includes(key)) {
-        sfcs.delete(descriptor.filename);
-      }
-    }
-    for (const dep of resolved.deps) {
-      const existingSet = typeDepToSFCMap.get(dep);
-      if (!existingSet) {
-        typeDepToSFCMap.set(dep, /* @__PURE__ */ new Set([descriptor.filename]));
-      } else {
-        existingSet.add(descriptor.filename);
-      }
-    }
-  }
-  setResolvedScript(descriptor, resolved, ssr);
+  cacheToUse.set(descriptor, resolved);
   return resolved;
 }
-function canInlineMain(descriptor, options) {
-  if (descriptor.script?.src || descriptor.scriptSetup?.src) {
-    return false;
-  }
-  const lang = descriptor.script?.lang || descriptor.scriptSetup?.lang;
-  if (!lang || lang === "js") {
-    return true;
-  }
-  if (lang === "ts" && options.devServer) {
-    return true;
-  }
-  return false;
-}
 
 const comma = ','.charCodeAt(0);
 const semicolon = ';'.charCodeAt(0);
@@ -882,7 +787,7 @@ class TraceMap {
         const { version, file, names, sourceRoot, sources, sourcesContent } = parsed;
         this.version = version;
         this.file = file;
-        this.names = names || [];
+        this.names = names;
         this.sourceRoot = sourceRoot;
         this.sources = sources;
         this.sourcesContent = sourcesContent;
@@ -1872,8 +1777,8 @@ function requireBrowser () {
 			} catch (error) {
 				return '[UnexpectedJSONParseError]: ' + error.message;
 			}
-		}; 
-	} (browser, browser.exports));
+		};
+} (browser, browser.exports));
 	return browser.exports;
 }
 
@@ -2147,8 +2052,8 @@ function requireNode () {
 		formatters.O = function (v) {
 			this.inspectOpts.colors = this.useColors;
 			return util.inspect(v, this.inspectOpts);
-		}; 
-	} (node, node.exports));
+		};
+} (node, node.exports));
 	return node.exports;
 }
 
@@ -2157,32 +2062,42 @@ function requireNode () {
  * treat as a browser.
  */
 
-if (typeof process === 'undefined' || process.type === 'renderer' || process.browser === true || process.__nwjs) {
-	src.exports = requireBrowser();
-} else {
-	src.exports = requireNode();
-}
+(function (module) {
+	if (typeof process === 'undefined' || process.type === 'renderer' || process.browser === true || process.__nwjs) {
+		module.exports = requireBrowser();
+	} else {
+		module.exports = requireNode();
+	}
+} (src));
 
-var srcExports = src.exports;
-const _debug = /*@__PURE__*/getDefaultExportFromCjs(srcExports);
+const _debug = /*@__PURE__*/getDefaultExportFromCjs(src.exports);
 
 const debug = _debug("vite:hmr");
 const directRequestRE = /(?:\?|&)direct\b/;
-async function handleHotUpdate({ file, modules, read }, options, customElement) {
-  const prevDescriptor = getDescriptor(file, options, false, true);
+async function handleHotUpdate({ file, modules, read, server }, options) {
+  const prevDescriptor = getDescriptor(file, options, false);
   if (!prevDescriptor) {
     return;
   }
+  setPrevDescriptor(file, prevDescriptor);
   const content = await read();
-  const { descriptor } = createDescriptor(file, content, options, true);
+  const { descriptor } = createDescriptor(file, content, options);
   let needRerender = false;
   const affectedModules = /* @__PURE__ */ new Set();
-  const mainModule = getMainModule(modules);
+  const mainModule = modules.filter((m) => !/type=/.test(m.url) || /type=script/.test(m.url)).sort((m1, m2) => {
+    return m1.url.length - m2.url.length;
+  })[0];
   const templateModule = modules.find((m) => /type=template/.test(m.url));
-  resolveScript(descriptor, options, false, customElement);
   const scriptChanged = hasScriptChanged(prevDescriptor, descriptor);
   if (scriptChanged) {
-    affectedModules.add(getScriptModule(modules) || mainModule);
+    let scriptModule;
+    if (descriptor.scriptSetup?.lang && !descriptor.scriptSetup.src || descriptor.script?.lang && !descriptor.script.src) {
+      const scriptModuleRE = new RegExp(
+        `type=script.*&lang.${descriptor.scriptSetup?.lang || descriptor.script?.lang}$`
+      );
+      scriptModule = modules.find((m) => scriptModuleRE.test(m.url));
+    }
+    affectedModules.add(scriptModule || mainModule);
   }
   if (!isEqualBlock(descriptor.template, prevDescriptor.template)) {
     if (!scriptChanged) {
@@ -2226,6 +2141,11 @@ async function handleHotUpdate({ file, modules, read }, options, customElement)
   if (prevStyles.length > nextStyles.length) {
     affectedModules.add(mainModule);
   }
+// JsView Added >>>
+// 当Style发生变化时，更新Script，同步CSS to JS
+  // 貌似没有作用，已经被上面修改的一起处理了。
+  // affectedModules.add(mainModule);
+// JsView Added <<<
   const prevCustoms = prevDescriptor.customBlocks || [];
   const nextCustoms = descriptor.customBlocks || [];
   if (prevCustoms.length !== nextCustoms.length) {
@@ -2262,11 +2182,6 @@ async function handleHotUpdate({ file, modules, read }, options, customElement)
     updateType.push(`style`);
   }
   if (updateType.length) {
-    if (file.endsWith(".vue")) {
-      invalidateDescriptor(file);
-    } else {
-      cache.set(file, descriptor);
-    }
     debug(`[vue:update(${updateType.join("&")})] ${file}`);
   }
   return [...affectedModules].filter(Boolean);
@@ -2290,62 +2205,11 @@ function isEqualBlock(a, b) {
 function isOnlyTemplateChanged(prev, next) {
   return !hasScriptChanged(prev, next) && prev.styles.length === next.styles.length && prev.styles.every((s, i) => isEqualBlock(s, next.styles[i])) && prev.customBlocks.length === next.customBlocks.length && prev.customBlocks.every((s, i) => isEqualBlock(s, next.customBlocks[i]));
 }
-function deepEqual(obj1, obj2, excludeProps = [], deepParentsOfObj1 = []) {
-  if (typeof obj1 !== typeof obj2) {
-    return false;
-  }
-  if (obj1 == null || obj2 == null || typeof obj1 !== "object" || deepParentsOfObj1.includes(obj1)) {
-    return obj1 === obj2;
-  }
-  const keys1 = Object.keys(obj1);
-  const keys2 = Object.keys(obj2);
-  if (keys1.length !== keys2.length) {
-    return false;
-  }
-  for (const key of keys1) {
-    if (excludeProps.includes(key)) {
-      continue;
-    }
-    if (!deepEqual(obj1[key], obj2[key], excludeProps, [
-      ...deepParentsOfObj1,
-      obj1
-    ])) {
-      return false;
-    }
-  }
-  return true;
-}
-function isEqualAst(prev, next) {
-  if (typeof prev === "undefined" || typeof next === "undefined") {
-    return prev === next;
-  }
-  if (prev.length !== next.length) {
-    return false;
-  }
-  for (let i = 0; i < prev.length; i++) {
-    const prevNode = prev[i];
-    const nextNode = next[i];
-    if (!deepEqual(prevNode, nextNode, [
-      "start",
-      "end",
-      "loc",
-      "range",
-      "leadingComments",
-      "trailingComments",
-      "innerComments"
-    ])) {
-      return false;
-    }
-  }
-  return true;
-}
 function hasScriptChanged(prev, next) {
-  const prevScript = getResolvedScript(prev, false);
-  const nextScript = getResolvedScript(next, false);
-  if (!isEqualBlock(prev.script, next.script) && !isEqualAst(prevScript?.scriptAst, nextScript?.scriptAst)) {
+  if (!isEqualBlock(prev.script, next.script)) {
     return true;
   }
-  if (!isEqualBlock(prev.scriptSetup, next.scriptSetup) && !isEqualAst(prevScript?.scriptSetupAst, nextScript?.scriptSetupAst)) {
+  if (!isEqualBlock(prev.scriptSetup, next.scriptSetup)) {
     return true;
   }
   const prevResolvedScript = getResolvedScript(prev, false);
@@ -2355,26 +2219,6 @@ function hasScriptChanged(prev, next) {
   }
   return false;
 }
-function getMainModule(modules) {
-  return modules.filter((m) => !/type=/.test(m.url) || /type=script/.test(m.url)).sort((m1, m2) => {
-    return m1.url.length - m2.url.length;
-  })[0];
-}
-function getScriptModule(modules) {
-  return modules.find((m) => /type=script.*&lang\.\w+$/.test(m.url));
-}
-function handleTypeDepChange(affectedComponents, { modules, server: { moduleGraph } }) {
-  const affected = /* @__PURE__ */ new Set();
-  for (const file of affectedComponents) {
-    invalidateScript(file);
-    const mods = moduleGraph.getModulesByFile(file);
-    if (mods) {
-      const arr = [...mods];
-      affected.add(getScriptModule(arr) || getMainModule(arr));
-    }
-  }
-  return [...modules, ...affected];
-}
 
 const EXPORT_HELPER_ID = "\0plugin-vue:export-helper";
 const helperCode = `
@@ -2387,25 +2231,10 @@ export default (sfc, props) => {
 }
 `;
 
-async function transformMain(code, filename, options, pluginContext, ssr, customElement) {
+async function transformMain(code, filename, options, pluginContext, ssr, asCustomElement) {
   const { devServer, isProduction, devToolsEnabled } = options;
   const prevDescriptor = getPrevDescriptor(filename);
   const { descriptor, errors } = createDescriptor(filename, code, options);
-  if (fs.existsSync(filename)) {
-    getDescriptor(
-      filename,
-      options,
-      true,
-      true,
-      // for vue files, create descriptor from fs read to be consistent with
-      // logic in handleHotUpdate()
-      // for non vue files, e.g. md files in vitepress, we assume
-      // `hmrContext.read` is overwriten so handleHotUpdate() is dealing with
-      // post-transform code, so we populate the descriptor with post-transform
-      // code here as well.
-      filename.endsWith(".vue") ? void 0 : code
-    );
-  }
   if (errors.length) {
     errors.forEach(
       (error) => pluginContext.error(createRollupError(filename, error))
@@ -2418,8 +2247,7 @@ async function transformMain(code, filename, options, pluginContext, ssr, custom
     descriptor,
     options,
     pluginContext,
-    ssr,
-    customElement
+    ssr
   );
   const hasTemplateImport = descriptor.template && !isUseInlineTemplate(descriptor, !devServer);
   let templateCode = "";
@@ -2429,8 +2257,7 @@ async function transformMain(code, filename, options, pluginContext, ssr, custom
       descriptor,
       options,
       pluginContext,
-      ssr,
-      customElement
+      ssr
     ));
   }
   if (hasTemplateImport) {
@@ -2445,7 +2272,7 @@ async function transformMain(code, filename, options, pluginContext, ssr, custom
   const stylesCode = await genStyleCode(
     descriptor,
     pluginContext,
-    customElement,
+    asCustomElement,
     attachedProps
   );
   const customBlocksCode = await genCustomBlockCode(descriptor, pluginContext);
@@ -2504,12 +2331,9 @@ async function transformMain(code, filename, options, pluginContext, ssr, custom
   if (options.sourceMap) {
     if (scriptMap && templateMap) {
       const gen = fromMap(
-        // version property of result.map is declared as string
-        // but actually it is `3`
         scriptMap
       );
       const tracer = new TraceMap(
-        // same above
         templateMap
       );
       const offset = (scriptCode.match(/\r?\n/g)?.length ?? 0) + 1;
@@ -2567,17 +2391,16 @@ async function transformMain(code, filename, options, pluginContext, ssr, custom
     }
   };
 }
-async function genTemplateCode(descriptor, options, pluginContext, ssr, customElement) {
+async function genTemplateCode(descriptor, options, pluginContext, ssr) {
   const template = descriptor.template;
   const hasScoped = descriptor.styles.some((style) => style.scoped);
-  if ((!template.lang || template.lang === "html") && !template.src) {
+  if (!template.lang && !template.src) {
     return transformTemplateInMain(
       template.content,
       descriptor,
       options,
       pluginContext,
-      ssr,
-      customElement
+      ssr
     );
   } else {
     if (template.src) {
@@ -2601,23 +2424,19 @@ async function genTemplateCode(descriptor, options, pluginContext, ssr, customEl
     };
   }
 }
-async function genScriptCode(descriptor, options, pluginContext, ssr, customElement) {
-  let scriptCode = `const ${scriptIdentifier} = {}`;
+async function genScriptCode(descriptor, options, pluginContext, ssr) {
+  let scriptCode = `const _sfc_main = {}`;
   let map;
-  const script = resolveScript(descriptor, options, ssr, customElement);
+  const script = resolveScript(descriptor, options, ssr);
   if (script) {
-    if (canInlineMain(descriptor, options)) {
-      if (!options.compiler.version) {
-        const userPlugins = options.script?.babelParserPlugins || [];
-        const defaultPlugins = script.lang === "ts" ? userPlugins.includes("decorators") ? ["typescript"] : ["typescript", "decorators-legacy"] : [];
-        scriptCode = options.compiler.rewriteDefault(
-          script.content,
-          scriptIdentifier,
-          [...defaultPlugins, ...userPlugins]
-        );
-      } else {
-        scriptCode = script.content;
-      }
+    if ((!script.lang || script.lang === "ts" && options.devServer) && !script.src) {
+      const userPlugins = options.script?.babelParserPlugins || [];
+      const defaultPlugins = script.lang === "ts" ? userPlugins.includes("decorators") ? ["typescript"] : ["typescript", "decorators-legacy"] : [];
+      scriptCode = options.compiler.rewriteDefault(
+        script.content,
+        "_sfc_main",
+        [...defaultPlugins, ...userPlugins]
+      );
       map = script.map;
     } else {
       if (script.src) {
@@ -2638,7 +2457,7 @@ export * from ${request}`;
     map
   };
 }
-async function genStyleCode(descriptor, pluginContext, customElement, attachedProps) {
+async function genStyleCode(descriptor, pluginContext, asCustomElement, attachedProps) {
   let stylesCode = ``;
   let cssModulesMap;
   if (descriptor.styles.length) {
@@ -2655,12 +2474,12 @@ async function genStyleCode(descriptor, pluginContext, customElement, attachedPr
       const src = style.src || descriptor.filename;
       const attrsQuery = attrsToQuery(style.attrs, "css");
       const srcQuery = style.src ? style.scoped ? `&src=${descriptor.id}` : "&src=true" : "";
-      const directQuery = customElement ? `&inline` : ``;
+      const directQuery = asCustomElement ? `&inline` : ``;
       const scopedQuery = style.scoped ? `&scoped=${descriptor.id}` : ``;
       const query = `?vue&type=style&index=${i}${srcQuery}${directQuery}${scopedQuery}`;
       const styleRequest = src + query + attrsQuery;
       if (style.module) {
-        if (customElement) {
+        if (asCustomElement) {
           throw new Error(
             `<style module> is not supported in custom elements mode.`
           );
@@ -2673,7 +2492,7 @@ async function genStyleCode(descriptor, pluginContext, customElement, attachedPr
         stylesCode += importCode;
         Object.assign(cssModulesMap || (cssModulesMap = {}), nameMap);
       } else {
-        if (customElement) {
+        if (asCustomElement) {
           stylesCode += `
 import _style_${i} from ${JSON.stringify(
             styleRequest
@@ -2684,7 +2503,7 @@ import ${JSON.stringify(styleRequest)}`;
         }
       }
     }
-    if (customElement) {
+    if (asCustomElement) {
       attachedProps.push([
         `styles`,
         `[${descriptor.styles.map((_, i) => `_style_${i}`).join(",")}]`
@@ -2736,16 +2555,7 @@ async function linkSrcToDescriptor(src, descriptor, pluginContext, scoped) {
   const srcFile = (await pluginContext.resolve(src, descriptor.filename))?.id || src;
   setSrcDescriptor(srcFile.replace(/\?.*$/, ""), descriptor, scoped);
 }
-const ignoreList = [
-  "id",
-  "index",
-  "src",
-  "type",
-  "lang",
-  "module",
-  "scoped",
-  "generic"
-];
+const ignoreList = ["id", "index", "src", "type", "lang", "module", "scoped"];
 function attrsToQuery(attrs, langFallback, forceLangFallback = false) {
   let query = ``;
   for (const name in attrs) {
@@ -2793,8 +2603,6 @@ async function transformStyle(code, descriptor, index, options, pluginContext, f
     return null;
   }
   const map = result.map ? await formatPostcssSourceMap(
-    // version property of result.map is declared as string
-    // but actually it is a number
     result.map,
     filename
   ) : { mappings: "" };
@@ -2805,49 +2613,35 @@ async function transformStyle(code, descriptor, index, options, pluginContext, f
 }
 
 function vuePlugin(rawOptions = {}) {
-  const options = shallowRef({
+  const {
+    include = /\.vue$/,
+    exclude,
+    customElement = /\.ce\.vue$/,
+    reactivityTransform = false
+  } = rawOptions;
+  const filter = createFilter(include, exclude);
+  const customElementFilter = typeof customElement === "boolean" ? () => customElement : createFilter(customElement);
+  const refTransformFilter = reactivityTransform === false ? () => false : reactivityTransform === true ? createFilter(/\.(j|t)sx?$/, /node_modules/) : createFilter(reactivityTransform);
+  let options = {
     isProduction: process.env.NODE_ENV === "production",
     compiler: null,
-    // to be set in buildStart
-    include: /\.vue$/,
-    customElement: /\.ce\.vue$/,
     ...rawOptions,
+    include,
+    exclude,
+    customElement,
+    reactivityTransform,
     root: process.cwd(),
     sourceMap: true,
     cssDevSourcemap: false,
     devToolsEnabled: process.env.NODE_ENV !== "production"
-  });
-  const filter = computed(
-    () => createFilter(options.value.include, options.value.exclude)
-  );
-  const customElementFilter = computed(
-    () => typeof options.value.customElement === "boolean" ? () => options.value.customElement : createFilter(options.value.customElement)
-  );
+  };
   return {
     name: "vite:vue",
-    api: {
-      get options() {
-        return options.value;
-      },
-      set options(value) {
-        options.value = value;
-      },
-      version
-    },
     handleHotUpdate(ctx) {
-      if (options.value.compiler.invalidateTypeCache) {
-        options.value.compiler.invalidateTypeCache(ctx.file);
-      }
-      if (typeDepToSFCMap.has(ctx.file)) {
-        return handleTypeDepChange(typeDepToSFCMap.get(ctx.file), ctx);
-      }
-      if (filter.value(ctx.file)) {
-        return handleHotUpdate(
-          ctx,
-          options.value,
-          customElementFilter.value(ctx.file)
-        );
+      if (!filter(ctx.file)) {
+        return;
       }
+      return handleHotUpdate(ctx, options);
     },
     config(config) {
       return {
@@ -2856,18 +2650,16 @@ function vuePlugin(rawOptions = {}) {
         },
         define: {
           __VUE_OPTIONS_API__: config.define?.__VUE_OPTIONS_API__ ?? true,
-          __VUE_PROD_DEVTOOLS__: config.define?.__VUE_PROD_DEVTOOLS__ ?? false,
-          __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: config.define?.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ ?? false
+          __VUE_PROD_DEVTOOLS__: config.define?.__VUE_PROD_DEVTOOLS__ ?? false
         },
         ssr: {
-          // @ts-ignore -- config.legacy.buildSsrCjsExternalHeuristics will be removed in Vite 5
           external: config.legacy?.buildSsrCjsExternalHeuristics ? ["vue", "@vue/server-renderer"] : []
         }
       };
     },
     configResolved(config) {
-      options.value = {
-        ...options.value,
+      options = {
+        ...options,
         root: config.root,
         sourceMap: config.command === "build" ? !!config.build.sourcemap : true,
         cssDevSourcemap: config.css?.devSourcemap ?? false,
@@ -2876,15 +2668,10 @@ function vuePlugin(rawOptions = {}) {
       };
     },
     configureServer(server) {
-      options.value.devServer = server;
+      options.devServer = server;
     },
     buildStart() {
-      const compiler = options.value.compiler = options.value.compiler || resolveCompiler(options.value.root);
-      if (compiler.invalidateTypeCache) {
-        options.value.devServer?.watcher.on("unlink", (file) => {
-          compiler.invalidateTypeCache(file);
-        });
-      }
+      options.compiler = options.compiler || resolveCompiler(options.root);
     },
     async resolveId(id) {
       if (id === EXPORT_HELPER_ID) {
@@ -2904,7 +2691,7 @@ function vuePlugin(rawOptions = {}) {
         if (query.src) {
           return fs.readFileSync(filename, "utf-8");
         }
-        const descriptor = getDescriptor(filename, options.value);
+        const descriptor = getDescriptor(filename, options);
         let block;
         if (query.type === "script") {
           block = getResolvedScript(descriptor, ssr);
@@ -2929,35 +2716,34 @@ function vuePlugin(rawOptions = {}) {
       if (query.raw || query.url) {
         return;
       }
-      if (!filter.value(filename) && !query.vue) {
+      if (!filter(filename) && !query.vue) {
+        if (!query.vue && refTransformFilter(filename) && options.compiler.shouldTransformRef(code)) {
+          return options.compiler.transformRef(code, {
+            filename,
+            sourceMap: true
+          });
+        }
         return;
       }
       if (!query.vue) {
         return transformMain(
           code,
           filename,
-          options.value,
+          options,
           this,
           ssr,
-          customElementFilter.value(filename)
+          customElementFilter(filename)
         );
       } else {
-        const descriptor = query.src ? getSrcDescriptor(filename, query) || getTempSrcDescriptor(filename, query) : getDescriptor(filename, options.value);
+        const descriptor = query.src ? getSrcDescriptor(filename, query) : getDescriptor(filename, options);
         if (query.type === "template") {
-          return transformTemplateAsModule(
-            code,
-            descriptor,
-            options.value,
-            this,
-            ssr,
-            customElementFilter.value(filename)
-          );
+          return transformTemplateAsModule(code, descriptor, options, this, ssr);
         } else if (query.type === "style") {
           return transformStyle(
             code,
             descriptor,
-            Number(query.index || 0),
-            options.value,
+            Number(query.index),
+            options,
             this,
             filename
           );