test: test dynamic base on browser

Author: hi-ogawa

packages/plugin-rsc/e2e/fixture.ts

@@ -200,7 +200,7 @@ function editFileJson(filepath: string, edit: (s: string) => string) {
 export async function setupInlineFixture(options: {
   src: string
   dest: string
-  files?: Record<string, string>
+  files?: Record<string, string | { edit: (s: string) => string }>
 }) {
   fs.rmSync(options.dest, { recursive: true, force: true })
   fs.mkdirSync(options.dest, { recursive: true })
@@ -214,6 +214,12 @@ export async function setupInlineFixture(options: {
   // write additional files
   if (options.files) {
     for (let [filename, contents] of Object.entries(options.files)) {
+      if (typeof contents === 'object' && 'edit' in contents) {
+        const file = path.join(options.dest, filename)
+        const editted = contents.edit(fs.readFileSync(file, 'utf-8'))
+        fs.writeFileSync(file, editted)
+        continue
+      }
       let filepath = path.join(options.dest, filename)
       fs.mkdirSync(path.dirname(filepath), { recursive: true })
       // strip indent

packages/plugin-rsc/e2e/starter.test.ts

@@ -249,10 +249,9 @@ test.describe(() => {
   const root = 'examples/e2e/temp/renderBuiltUrl-runtime'
 
   test.beforeAll(async () => {
-    // TODO: test client shared chunk
     const renderBuiltUrl = (filename: string) => {
       return {
-        runtime: `globalThis.__dynamicBase + ${JSON.stringify(filename)}`,
+        runtime: `__dynamicBase + ${JSON.stringify(filename)}`,
       }
     }
     await setupInlineFixture({
@@ -293,11 +292,36 @@ test.describe(() => {
                 }
               }
             ],
+            // tweak chunks to test "__dynamicBase" used on browser for "__vite__mapDeps"
+            environments: {
+              client: {
+                build: {
+                  rollupOptions: {
+                    output: {
+                      manualChunks: (id) => {
+                        if (id.includes('node_modules/react/')) {
+                          return 'lib-react';
+                        }
+                      }
+                    },
+                  }
+                }
+              }
+            },
             experimental: {
               renderBuiltUrl: ${renderBuiltUrl.toString()}
-            }
+            },
           })
         `,
+        'src/root.tsx': {
+          // define __dynamicBase on browser via head script
+          edit: (s: string) =>
+            s.replace(
+              '</head>',
+              () =>
+                `<script>{\`globalThis.__dynamicBase = $\{JSON.stringify(globalThis.__dynamicBase ?? "/")}\`}</script></head>`,
+            ),
+        },
       },
     })
   })