fix(plugins): fix rscManagedPlugin (#1019)

follows `\0` technique described in
https://vite.dev/guide/api-plugin#virtual-modules-convention

related: vitejs/vite#18223

Author: dai-shi

packages/waku/src/lib/plugins/vite-plugin-rsc-entries.ts

@@ -41,9 +41,7 @@ globalThis.__WAKU_CLIENT_IMPORT__ = (id) => loadModule('${opts.ssrDir}/' + id);
     configResolved(config) {
       entriesFile = joinPath(config.root, opts.srcDir, SRC_ENTRIES);
       if (existsSync(CONFIG_FILE)) {
-        const file = normalizePath(
-          path.relative(path.dirname(entriesFile), path.resolve(CONFIG_FILE)),
-        );
+        const file = normalizePath(path.resolve(CONFIG_FILE));
         codeToAppend += `
 export const loadConfig = async () => (await import('${file}')).default;
 `;
@@ -60,7 +58,7 @@ export const loadConfig = async () => ({});
       ) {
         return codeToPrepend + code;
       }
-      if (stripExt(id) === entriesFile) {
+      if (stripExt(id).endsWith(entriesFile)) {
         return code + codeToAppend;
       }
     },

packages/waku/src/lib/plugins/vite-plugin-rsc-managed.ts

@@ -1,34 +1,30 @@
 import type { Plugin } from 'vite';
 
 import { EXTENSIONS, SRC_MAIN, SRC_ENTRIES } from '../constants.js';
-import { extname, joinPath } from '../utils/path.js';
+import { extname, joinPath, filePathToFileURL } from '../utils/path.js';
 
 const stripExt = (fname: string) => {
   const ext = extname(fname);
   return ext ? fname.slice(0, -ext.length) : fname;
 };
 
-const getManagedEntries = () => `
+const getManagedEntries = (filePath: string, srcDir: string) => `
 import { fsRouter } from 'waku/router/server';
 
 export default fsRouter(
-  import.meta.url,
-  (file) => import.meta.glob('./pages/**/*.{${EXTENSIONS.map((ext) =>
+  '${filePathToFileURL(filePath)}',
+  (file) => import.meta.glob('/${srcDir}/pages/**/*.{${EXTENSIONS.map((ext) =>
     ext.replace(/^\./, ''),
-  ).join(',')}}')[\`./pages/\${file}\`]?.(),
+  ).join(',')}}')[\`/${srcDir}/pages/\${file}\`]?.(),
 );
 `;
 
 const getManagedMain = () => `
-import { StrictMode } from 'react';
+import { StrictMode, createElement } from 'react';
 import { createRoot, hydrateRoot } from 'react-dom/client';
 import { Router } from 'waku/router/client';
 
-const rootElement = (
-  <StrictMode>
-    <Router />
-  </StrictMode>
-);
+const rootElement = createElement(StrictMode, null, createElement(Router));
 
 if (globalThis.__WAKU_HYDRATE__) {
   hydrateRoot(document, rootElement);
@@ -46,8 +42,6 @@ export function rscManagedPlugin(opts: {
   let entriesFile: string | undefined;
   let mainFile: string | undefined;
   const mainPath = `${opts.basePath}${opts.srcDir}/${SRC_MAIN}`;
-  let managedEntries = false;
-  let managedMain = false;
   return {
     name: 'rsc-managed-plugin',
     enforce: 'pre',
@@ -73,28 +67,23 @@ export function rscManagedPlugin(opts: {
     },
     async resolveId(id, importer, options) {
       const resolved = await this.resolve(id, importer, options);
-      if ((!resolved || resolved.id === id) && id === entriesFile) {
-        managedEntries = true;
-        return entriesFile + '.jsx';
-      }
-      if ((!resolved || resolved.id === id) && id === mainFile) {
-        managedMain = true;
-        return mainFile + '.jsx';
-      }
-      if ((!resolved || resolved.id === id) && stripExt(id) === mainPath) {
-        managedMain = true;
-        return mainPath + '.jsx';
+      if (!resolved || resolved.id === id) {
+        if (id === entriesFile) {
+          return '\0' + entriesFile + '.js';
+        }
+        if (id === mainFile) {
+          return '\0' + mainFile + '.js';
+        }
+        if (stripExt(id) === mainPath) {
+          return '\0' + mainPath + '.js';
+        }
       }
-      return resolved;
     },
     load(id) {
-      if (managedEntries && id === entriesFile + '.jsx') {
-        return getManagedEntries();
+      if (id === '\0' + entriesFile + '.js') {
+        return getManagedEntries(entriesFile + '.js', opts.srcDir);
       }
-      if (
-        managedMain &&
-        (id === mainFile + '.jsx' || id === mainPath + '.jsx')
-      ) {
+      if (id === '\0' + mainFile + '.js' || id === '\0' + mainPath + '.js') {
         return getManagedMain();
       }
     },