@shijiu/jsview 2.1.200 → 2.1.340-test.0

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

@@ -1,13 +1,16 @@
 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 = tryRequire("vue/compiler-sfc", root) || tryRequire("vue/compiler-sfc");
+  const compiler = tryResolveCompiler(root) || tryResolveCompiler();
   if (!compiler) {
     throw new Error(
       `Failed to resolve vue/compiler-sfc.
@@ -16,6 +19,12 @@ 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 {
@@ -49,7 +58,7 @@ function parseVueRequest(id) {
 }
 
 function slash(path) {
-	const isExtendedLengthPath = /^\\\\\?\\/.test(path);
+	const isExtendedLengthPath = path.startsWith('\\\\?\\');
 
 	if (isExtendedLengthPath) {
 		return path;
@@ -59,34 +68,43 @@ 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 }) {
+function createDescriptor(filename, source, { root, isProduction, sourceMap, compiler, template }, hmr = false) {
   const { descriptor, errors } = compiler.parse(source, {
     filename,
-    sourceMap
+    sourceMap,
+    templateParseOptions: template?.compilerOptions
   });
   const normalizedPath = slash(path.normalize(path.relative(root, filename)));
   descriptor.id = getHash(normalizedPath + (isProduction ? source : ""));
-  cache.set(filename, descriptor);
+  (hmr ? hmrCache : cache).set(filename, descriptor);
   return { descriptor, errors };
 }
 function getPrevDescriptor(filename) {
   return prevCache.get(filename);
 }
-function setPrevDescriptor(filename, entry) {
-  prevCache.set(filename, entry);
+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 getDescriptor(filename, options, createIfNotFound = true) {
-  if (cache.has(filename)) {
-    return cache.get(filename);
+function getDescriptor(filename, options, createIfNotFound = true, hmr = false, code) {
+  const _cache = hmr ? hmrCache : cache;
+  if (_cache.has(filename)) {
+    return _cache.get(filename);
   }
   if (createIfNotFound) {
     const { descriptor, errors } = createDescriptor(
       filename,
-      fs.readFileSync(filename, "utf-8"),
-      options
+      code ?? fs.readFileSync(filename, "utf-8"),
+      options,
+      hmr
     );
-    if (errors.length) {
+    if (errors.length && !hmr) {
       throw errors[0];
     }
     return descriptor;
@@ -98,6 +116,20 @@ 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);
@@ -128,8 +160,15 @@ function createRollupError(id, error) {
   return rollupError;
 }
 
-async function transformTemplateAsModule(code, descriptor, options, pluginContext, ssr) {
-  const result = compile(code, descriptor, options, pluginContext, ssr);
+async function transformTemplateAsModule(code, descriptor, options, pluginContext, ssr, customElement) {
+  const result = compile(
+    code,
+    descriptor,
+    options,
+    pluginContext,
+    ssr,
+    customElement
+  );
   let returnCode = result.code;
   if (options.devServer && options.devServer.config.server.hmr !== false && !ssr && !options.isProduction) {
     returnCode += `
@@ -142,8 +181,15 @@ import.meta.hot.accept(({ render }) => {
     map: result.map
   };
 }
-function transformTemplateInMain(code, descriptor, options, pluginContext, ssr) {
-  const result = compile(code, descriptor, options, pluginContext, ssr);
+function transformTemplateInMain(code, descriptor, options, pluginContext, ssr, customElement) {
+  const result = compile(
+    code,
+    descriptor,
+    options,
+    pluginContext,
+    ssr,
+    customElement
+  );
   return {
     ...result,
     code: result.code.replace(
@@ -152,8 +198,9 @@ function transformTemplateInMain(code, descriptor, options, pluginContext, ssr)
     )
   };
 }
-function compile(code, descriptor, options, pluginContext, ssr) {
+function compile(code, descriptor, options, pluginContext, ssr, customElement) {
   const filename = descriptor.filename;
+  resolveScript(descriptor, options, ssr, customElement);
   const result = options.compiler.compileTemplate({
     ...resolveTemplateCompilerOptions(descriptor, options, ssr),
     source: code
@@ -189,7 +236,8 @@ 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)))
+        base: (options.devServer.config.server?.origin ?? "") + devBase + slash(path.relative(options.root, path.dirname(filename))),
+        includeAbsolute: !!devBase
       };
     }
   } else if (transformAssetUrls !== false) {
@@ -224,6 +272,7 @@ 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,
@@ -232,7 +281,7 @@ function resolveTemplateCompilerOptions(descriptor, options, ssr) {
     ssr,
     ssrCssVars: cssVars,
     transformAssetUrls,
-    preprocessLang: block.lang,
+    preprocessLang: block.lang === "html" ? void 0 : block.lang,
     preprocessOptions,
     compilerOptions: {
       ...options.template?.compilerOptions,
@@ -243,9 +292,26 @@ 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);
 }
@@ -255,16 +321,16 @@ function setResolvedScript(descriptor, script, ssr) {
 function isUseInlineTemplate(descriptor, isProd) {
   return isProd && !!descriptor.scriptSetup && !descriptor.template?.src;
 }
-function resolveScript(descriptor, options, ssr) {
+const scriptIdentifier = `_sfc_main`;
+function resolveScript(descriptor, options, ssr, customElement) {
   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 = cacheToUse.get(descriptor);
-  let cached = cacheToUse.get(descriptor);
+  // const cached = getResolvedScript(descriptor, ssr);
+  let cached = getResolvedScript(descriptor, ssr);
   if (cached && descriptor.filename?.endsWith('.vue') && descriptor.styles) {
     for (const style of descriptor.styles) {
       let useCache = false;
@@ -296,13 +362,42 @@ function resolveScript(descriptor, options, ssr) {
     id: descriptor.id,
     isProd: options.isProduction,
     inlineTemplate: isUseInlineTemplate(descriptor, !options.devServer),
-    reactivityTransform: options.reactivityTransform !== false,
     templateOptions: resolveTemplateCompilerOptions(descriptor, options, ssr),
-    sourceMap: options.sourceMap
+    sourceMap: options.sourceMap,
+    genDefaultAs: canInlineMain(descriptor, options) ? scriptIdentifier : void 0,
+    customElement
   });
-  cacheToUse.set(descriptor, resolved);
+  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);
   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);
@@ -787,7 +882,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;
@@ -1777,8 +1872,8 @@ function requireBrowser () {
 			} catch (error) {
 				return '[UnexpectedJSONParseError]: ' + error.message;
 			}
-		};
-} (browser, browser.exports));
+		}; 
+	} (browser, browser.exports));
 	return browser.exports;
 }
 
@@ -2052,8 +2147,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;
 }
 
@@ -2062,42 +2157,32 @@ function requireNode () {
  * treat as a browser.
  */
 
-(function (module) {
-	if (typeof process === 'undefined' || process.type === 'renderer' || process.browser === true || process.__nwjs) {
-		module.exports = requireBrowser();
-	} else {
-		module.exports = requireNode();
-	}
-} (src));
+if (typeof process === 'undefined' || process.type === 'renderer' || process.browser === true || process.__nwjs) {
+	src.exports = requireBrowser();
+} else {
+	src.exports = requireNode();
+}
 
-const _debug = /*@__PURE__*/getDefaultExportFromCjs(src.exports);
+var srcExports = src.exports;
+const _debug = /*@__PURE__*/getDefaultExportFromCjs(srcExports);
 
 const debug = _debug("vite:hmr");
 const directRequestRE = /(?:\?|&)direct\b/;
-async function handleHotUpdate({ file, modules, read, server }, options) {
-  const prevDescriptor = getDescriptor(file, options, false);
+async function handleHotUpdate({ file, modules, read }, options, customElement) {
+  const prevDescriptor = getDescriptor(file, options, false, true);
   if (!prevDescriptor) {
     return;
   }
-  setPrevDescriptor(file, prevDescriptor);
   const content = await read();
-  const { descriptor } = createDescriptor(file, content, options);
+  const { descriptor } = createDescriptor(file, content, options, true);
   let needRerender = false;
   const affectedModules = /* @__PURE__ */ new Set();
-  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 mainModule = getMainModule(modules);
   const templateModule = modules.find((m) => /type=template/.test(m.url));
+  resolveScript(descriptor, options, false, customElement);
   const scriptChanged = hasScriptChanged(prevDescriptor, descriptor);
   if (scriptChanged) {
-    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);
+    affectedModules.add(getScriptModule(modules) || mainModule);
   }
   if (!isEqualBlock(descriptor.template, prevDescriptor.template)) {
     if (!scriptChanged) {
@@ -2141,11 +2226,6 @@ async function handleHotUpdate({ file, modules, read, server }, options) {
   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) {
@@ -2182,6 +2262,11 @@ async function handleHotUpdate({ file, modules, read, server }, options) {
     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);
@@ -2205,11 +2290,62 @@ 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) {
-  if (!isEqualBlock(prev.script, next.script)) {
+  const prevScript = getResolvedScript(prev, false);
+  const nextScript = getResolvedScript(next, false);
+  if (!isEqualBlock(prev.script, next.script) && !isEqualAst(prevScript?.scriptAst, nextScript?.scriptAst)) {
     return true;
   }
-  if (!isEqualBlock(prev.scriptSetup, next.scriptSetup)) {
+  if (!isEqualBlock(prev.scriptSetup, next.scriptSetup) && !isEqualAst(prevScript?.scriptSetupAst, nextScript?.scriptSetupAst)) {
     return true;
   }
   const prevResolvedScript = getResolvedScript(prev, false);
@@ -2219,6 +2355,26 @@ 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 = `
@@ -2231,10 +2387,25 @@ export default (sfc, props) => {
 }
 `;
 
-async function transformMain(code, filename, options, pluginContext, ssr, asCustomElement) {
+async function transformMain(code, filename, options, pluginContext, ssr, customElement) {
   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))
@@ -2247,7 +2418,8 @@ async function transformMain(code, filename, options, pluginContext, ssr, asCust
     descriptor,
     options,
     pluginContext,
-    ssr
+    ssr,
+    customElement
   );
   const hasTemplateImport = descriptor.template && !isUseInlineTemplate(descriptor, !devServer);
   let templateCode = "";
@@ -2257,7 +2429,8 @@ async function transformMain(code, filename, options, pluginContext, ssr, asCust
       descriptor,
       options,
       pluginContext,
-      ssr
+      ssr,
+      customElement
     ));
   }
   if (hasTemplateImport) {
@@ -2272,7 +2445,7 @@ async function transformMain(code, filename, options, pluginContext, ssr, asCust
   const stylesCode = await genStyleCode(
     descriptor,
     pluginContext,
-    asCustomElement,
+    customElement,
     attachedProps
   );
   const customBlocksCode = await genCustomBlockCode(descriptor, pluginContext);
@@ -2331,9 +2504,12 @@ async function transformMain(code, filename, options, pluginContext, ssr, asCust
   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;
@@ -2391,16 +2567,17 @@ async function transformMain(code, filename, options, pluginContext, ssr, asCust
     }
   };
 }
-async function genTemplateCode(descriptor, options, pluginContext, ssr) {
+async function genTemplateCode(descriptor, options, pluginContext, ssr, customElement) {
   const template = descriptor.template;
   const hasScoped = descriptor.styles.some((style) => style.scoped);
-  if (!template.lang && !template.src) {
+  if ((!template.lang || template.lang === "html") && !template.src) {
     return transformTemplateInMain(
       template.content,
       descriptor,
       options,
       pluginContext,
-      ssr
+      ssr,
+      customElement
     );
   } else {
     if (template.src) {
@@ -2424,19 +2601,23 @@ async function genTemplateCode(descriptor, options, pluginContext, ssr) {
     };
   }
 }
-async function genScriptCode(descriptor, options, pluginContext, ssr) {
-  let scriptCode = `const _sfc_main = {}`;
+async function genScriptCode(descriptor, options, pluginContext, ssr, customElement) {
+  let scriptCode = `const ${scriptIdentifier} = {}`;
   let map;
-  const script = resolveScript(descriptor, options, ssr);
+  const script = resolveScript(descriptor, options, ssr, customElement);
   if (script) {
-    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]
-      );
+    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;
+      }
       map = script.map;
     } else {
       if (script.src) {
@@ -2457,7 +2638,7 @@ export * from ${request}`;
     map
   };
 }
-async function genStyleCode(descriptor, pluginContext, asCustomElement, attachedProps) {
+async function genStyleCode(descriptor, pluginContext, customElement, attachedProps) {
   let stylesCode = ``;
   let cssModulesMap;
   if (descriptor.styles.length) {
@@ -2474,12 +2655,12 @@ async function genStyleCode(descriptor, pluginContext, asCustomElement, attached
       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 = asCustomElement ? `&inline` : ``;
+      const directQuery = customElement ? `&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 (asCustomElement) {
+        if (customElement) {
           throw new Error(
             `<style module> is not supported in custom elements mode.`
           );
@@ -2492,7 +2673,7 @@ async function genStyleCode(descriptor, pluginContext, asCustomElement, attached
         stylesCode += importCode;
         Object.assign(cssModulesMap || (cssModulesMap = {}), nameMap);
       } else {
-        if (asCustomElement) {
+        if (customElement) {
           stylesCode += `
 import _style_${i} from ${JSON.stringify(
             styleRequest
@@ -2503,7 +2684,7 @@ import ${JSON.stringify(styleRequest)}`;
         }
       }
     }
-    if (asCustomElement) {
+    if (customElement) {
       attachedProps.push([
         `styles`,
         `[${descriptor.styles.map((_, i) => `_style_${i}`).join(",")}]`
@@ -2555,7 +2736,16 @@ 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"];
+const ignoreList = [
+  "id",
+  "index",
+  "src",
+  "type",
+  "lang",
+  "module",
+  "scoped",
+  "generic"
+];
 function attrsToQuery(attrs, langFallback, forceLangFallback = false) {
   let query = ``;
   for (const name in attrs) {
@@ -2603,6 +2793,8 @@ 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: "" };
@@ -2613,35 +2805,49 @@ async function transformStyle(code, descriptor, index, options, pluginContext, f
 }
 
 function vuePlugin(rawOptions = {}) {
-  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 = {
+  const options = shallowRef({
     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 (!filter(ctx.file)) {
-        return;
+      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)
+        );
       }
-      return handleHotUpdate(ctx, options);
     },
     config(config) {
       return {
@@ -2650,16 +2856,18 @@ function vuePlugin(rawOptions = {}) {
         },
         define: {
           __VUE_OPTIONS_API__: config.define?.__VUE_OPTIONS_API__ ?? true,
-          __VUE_PROD_DEVTOOLS__: config.define?.__VUE_PROD_DEVTOOLS__ ?? false
+          __VUE_PROD_DEVTOOLS__: config.define?.__VUE_PROD_DEVTOOLS__ ?? false,
+          __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: config.define?.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ ?? false
         },
         ssr: {
+          // @ts-ignore -- config.legacy.buildSsrCjsExternalHeuristics will be removed in Vite 5
           external: config.legacy?.buildSsrCjsExternalHeuristics ? ["vue", "@vue/server-renderer"] : []
         }
       };
     },
     configResolved(config) {
-      options = {
-        ...options,
+      options.value = {
+        ...options.value,
         root: config.root,
         sourceMap: config.command === "build" ? !!config.build.sourcemap : true,
         cssDevSourcemap: config.css?.devSourcemap ?? false,
@@ -2668,10 +2876,15 @@ function vuePlugin(rawOptions = {}) {
       };
     },
     configureServer(server) {
-      options.devServer = server;
+      options.value.devServer = server;
     },
     buildStart() {
-      options.compiler = options.compiler || resolveCompiler(options.root);
+      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);
+        });
+      }
     },
     async resolveId(id) {
       if (id === EXPORT_HELPER_ID) {
@@ -2691,7 +2904,7 @@ function vuePlugin(rawOptions = {}) {
         if (query.src) {
           return fs.readFileSync(filename, "utf-8");
         }
-        const descriptor = getDescriptor(filename, options);
+        const descriptor = getDescriptor(filename, options.value);
         let block;
         if (query.type === "script") {
           block = getResolvedScript(descriptor, ssr);
@@ -2716,34 +2929,35 @@ function vuePlugin(rawOptions = {}) {
       if (query.raw || query.url) {
         return;
       }
-      if (!filter(filename) && !query.vue) {
-        if (!query.vue && refTransformFilter(filename) && options.compiler.shouldTransformRef(code)) {
-          return options.compiler.transformRef(code, {
-            filename,
-            sourceMap: true
-          });
-        }
+      if (!filter.value(filename) && !query.vue) {
         return;
       }
       if (!query.vue) {
         return transformMain(
           code,
           filename,
-          options,
+          options.value,
           this,
           ssr,
-          customElementFilter(filename)
+          customElementFilter.value(filename)
         );
       } else {
-        const descriptor = query.src ? getSrcDescriptor(filename, query) : getDescriptor(filename, options);
+        const descriptor = query.src ? getSrcDescriptor(filename, query) || getTempSrcDescriptor(filename, query) : getDescriptor(filename, options.value);
         if (query.type === "template") {
-          return transformTemplateAsModule(code, descriptor, options, this, ssr);
+          return transformTemplateAsModule(
+            code,
+            descriptor,
+            options.value,
+            this,
+            ssr,
+            customElementFilter.value(filename)
+          );
         } else if (query.type === "style") {
           return transformStyle(
             code,
             descriptor,
-            Number(query.index),
-            options,
+            Number(query.index || 0),
+            options.value,
             this,
             filename
           );