refactor: drop virtual prefix

Author: hunyan-io

src/cache.ts

@@ -1,12 +1,13 @@
 import fs from "node:fs";
 import type { SFCDescriptor } from "vue/compiler-sfc";
 import { type ResolvedConfig } from "vite";
-import { CompilerSfc, resolveCompiler } from "./compiler";
+import { resolveCompiler } from "./compiler";
 import { pascalCase } from "./utils";
 
 export default function createCache(config: ResolvedConfig) {
-  const descriptorCache: Map<string, SFCDescriptor> = new Map();
-  const compiler: CompilerSfc = resolveCompiler(config.root);
+  const descriptorCache = new Map<string, SFCDescriptor>();
+  const nestedComponentNames = new Set<string>();
+  const compiler = resolveCompiler(config.root);
 
   return {
     getDescriptor(filename: string) {
@@ -45,5 +46,17 @@ export default function createCache(config: ResolvedConfig) {
     hasFile(filename: string) {
       return descriptorCache.has(filename);
     },
+    registerNestedComponent(filename: string, component: string) {
+      if (filename.startsWith(config.root)) {
+        filename = filename.slice(config.root.length);
+      }
+      nestedComponentNames.add(`${filename}/${component}.vue`);
+    },
+    isNestedComponent(filename: string) {
+      if (filename.startsWith(config.root)) {
+        filename = filename.slice(config.root.length);
+      }
+      return nestedComponentNames.has(filename);
+    },
   };
 }

src/gen.ts

@@ -1,9 +1,6 @@
-export function genComponentBlockCode(
-  virtualFilename: string,
-  component: string
-) {
+export function genComponentBlockCode(filename: string, component: string) {
   return (
-    `import ${component} from '${virtualFilename}/${component}.vue';\n` +
+    `import ${component} from '${filename}/${component}.vue';\n` +
     "export default function(Comp) {\n" +
     "  if (!Comp.components) {\n" +
     "    Comp.components = {};\n" +
@@ -14,7 +11,7 @@ export function genComponentBlockCode(
 }
 
 export function genExportsCode(
-  virtualFilename: string,
+  filename: string,
   components: string[],
   mainCode: string
 ) {
@@ -24,7 +21,7 @@ export function genExportsCode(
       "export { default as ",
       component,
       " } from '",
-      virtualFilename,
+      filename,
       "/",
       component,
       ".vue';\n"

src/index.ts

@@ -1,16 +1,15 @@
+import path from "node:path";
 import type { PluginOption, ResolvedConfig } from "vite";
 import createCache from "./cache";
 import { genComponentBlockCode, genExportsCode } from "./gen";
 import { parseVueRequest, pascalCase } from "./utils";
 
 export default function vueNestedSFC(): PluginOption {
-  const prefix = "virtual:vue-nested-sfc";
-
   let config: ResolvedConfig;
   let cache: ReturnType<typeof createCache>;
 
   return {
-    name: "vue-nested-sfc",
+    name: "vite:vue-nested-sfc",
 
     configResolved(resolvedConfig) {
       config = resolvedConfig;
@@ -20,19 +19,34 @@ export default function vueNestedSFC(): PluginOption {
       cache = createCache(config);
     },
 
-    resolveId(id) {
-      if (id.startsWith(prefix)) {
+    resolveId(id, importerFile) {
+      if (cache.isNestedComponent(id)) {
         return id;
       }
+      if (importerFile && cache.isNestedComponent(importerFile)) {
+        let [, importerDir] = importerFile.match(/^(.*)(?:\/[^/]+){2}\.vue$/)!;
+        if (!importerDir.startsWith(config.root)) {
+          importerDir = config.root + importerDir;
+        }
+        return path.resolve(importerDir, id);
+      }
     },
 
     load(id) {
-      if (!id.startsWith(prefix)) {
+      if (!cache.isNestedComponent(id)) {
         return;
       }
 
-      const [, filename, component] =
-        id.slice(prefix.length).match(/^(.*)\/([^/]+)\.vue$/) || [];
+      const match = id.match(/^(.*)\/([^/]+)\.vue$/);
+      if (!match) {
+        return;
+      }
+      let filename = match[1];
+      const component = match[2];
+
+      if (!filename.startsWith(config.root)) {
+        filename = config.root + filename;
+      }
 
       const descriptor = cache.getDescriptor(filename);
 
@@ -53,21 +67,27 @@ export default function vueNestedSFC(): PluginOption {
     transform(code, id) {
       const request = parseVueRequest(id);
 
-      if (request.filename.startsWith(prefix)) {
+      if (cache.isNestedComponent(id)) {
         return;
       }
 
       if (!request.query.vue && request.filename.endsWith(".vue")) {
-        return genExportsCode(
-          prefix + request.filename,
-          cache.getNestedComponents(id),
-          code
-        );
+        const components = cache.getNestedComponents(id);
+        for (const componentName of components) {
+          cache.registerNestedComponent(request.filename, componentName);
+        }
+        return {
+          code: genExportsCode(request.filename, components, code),
+          // eslint-disable-next-line unicorn/no-null
+          map: null,
+        };
       } else if (request.query.type === "component" && request.query.name) {
-        return genComponentBlockCode(
-          prefix + request.filename,
-          pascalCase(request.query.name)
-        );
+        const componentName = pascalCase(request.query.name);
+        cache.registerNestedComponent(request.filename, componentName);
+        return {
+          code: genComponentBlockCode(request.filename, componentName),
+          map: { mappings: "" },
+        };
       }
     },
 
@@ -117,9 +137,11 @@ export default function vueNestedSFC(): PluginOption {
         if (!nextBlock || block.content === nextBlock.content) {
           continue;
         }
-        const componentModule = server.moduleGraph.getModuleById(
-          `${prefix}${file}/${name}.vue`
-        );
+        const componentModule =
+          server.moduleGraph.getModuleById(`${file}/${name}.vue`) ||
+          server.moduleGraph.getModuleById(
+            `${file.replace(config.root, "")}/${name}.vue`
+          );
         if (!componentModule) {
           continue;
         }
@@ -129,10 +151,15 @@ export default function vueNestedSFC(): PluginOption {
             m.url.includes("type=component") &&
             m.url.includes(`name=${nextBlock.attrs.name}`)
         );
-        if (!blockModule) {
-          continue;
+        if (blockModule) {
+          affectedModules.add(blockModule);
+        }
+        const subModules = [...componentModule.importedModules].filter((m) =>
+          m.url.startsWith(componentModule.url)
+        );
+        for (const subModule of subModules) {
+          affectedModules.add(subModule);
         }
-        affectedModules.add(blockModule);
       }
 
       return [...affectedModules];