feat(rsc): add support for renderBuiltInUrl on assets metadata

Author: hlimas

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

@@ -1,10 +1,10 @@
 import { createHash } from 'node:crypto'
-import { readFileSync } from 'node:fs'
 import { type Page, expect, test } from '@playwright/test'
 import { type Fixture, setupIsolatedFixture, useFixture } from './fixture'
 import {
   expectNoPageError,
   expectNoReload,
+  loadRSCManifest,
   testNoJs,
   waitForHydration,
 } from './helper'
@@ -177,12 +177,9 @@ function defineTest(f: Fixture) {
         .evaluateAll((elements) =>
           elements.map((el) => el.getAttribute('href')),
         )
-      const manifest = JSON.parse(
-        readFileSync(
-          f.root + '/dist/ssr/__vite_rsc_assets_manifest.js',
-          'utf-8',
-        ).slice('export default '.length),
-      )
+
+      const manifest = await loadRSCManifest(f.root)
+
       const hashString = (v: string) =>
         createHash('sha256').update(v).digest().toString('hex').slice(0, 12)
       const deps =

packages/plugin-rsc/e2e/helper.ts

@@ -1,4 +1,5 @@
 import test, { type Page, expect } from '@playwright/test'
+import { readFileSync } from 'node:fs'
 
 export const testNoJs = test.extend({
   javaScriptEnabled: ({}, use) => use(false),
@@ -54,3 +55,16 @@ export function expectNoPageError(page: Page) {
     },
   }
 }
+
+export async function loadRSCManifest(root: string) {
+  // Use dynamic "data:" import instead of URL path imports so it is
+  // not cached by the runtime.
+  const manifestFileContent = readFileSync(
+    root + '/dist/ssr/__vite_rsc_assets_manifest.js',
+    'utf-8',
+  )
+  const manifest = (await import('data:text/javascript,' + manifestFileContent))
+    .default
+
+  return manifest
+}

packages/plugin-rsc/e2e/react-router.test.ts

@@ -1,8 +1,12 @@
 import { createHash } from 'node:crypto'
 import { expect, test } from '@playwright/test'
 import { type Fixture, useFixture } from './fixture'
-import { expectNoReload, testNoJs, waitForHydration } from './helper'
-import { readFileSync } from 'node:fs'
+import {
+  expectNoReload,
+  loadRSCManifest,
+  testNoJs,
+  waitForHydration,
+} from './helper'
 
 test.describe('dev-default', () => {
   const f = useFixture({ root: 'examples/react-router', mode: 'dev' })
@@ -74,12 +78,9 @@ function defineTest(f: Fixture) {
         .evaluateAll((elements) =>
           elements.map((el) => el.getAttribute('href')),
         )
-      const manifest = JSON.parse(
-        readFileSync(
-          f.root + '/dist/ssr/__vite_rsc_assets_manifest.js',
-          'utf-8',
-        ).slice('export default '.length),
-      )
+
+      const manifest = await loadRSCManifest(f.root)
+
       const hashString = (v: string) =>
         createHash('sha256').update(v).digest().toString('hex').slice(0, 12)
       const deps =

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

@@ -245,6 +245,112 @@ test.describe(() => {
   })
 })
 
+test.describe(() => {
+  const root = 'examples/e2e/temp/base'
+
+  test.beforeAll(async () => {
+    await setupInlineFixture({
+      src: 'examples/starter',
+      dest: root,
+      files: {
+        'vite.config.ts': /* js */ `
+          import rsc from '@vitejs/plugin-rsc'
+          import react from '@vitejs/plugin-react'
+          import { defineConfig } from 'vite'
+
+          export default defineConfig({
+            plugins: [
+              react(),
+              rsc({
+                entries: {
+                  client: './src/framework/entry.browser.tsx',
+                  ssr: './src/framework/entry.ssr.tsx',
+                  rsc: './src/framework/entry.rsc.tsx',
+                }
+              }),
+            ],
+            experimental: {
+              renderBuiltUrl(filename) {
+                return {
+                  runtime: \`'/' + \${JSON.stringify(filename)}\`
+                }
+              }
+            }
+          })
+        `,
+      },
+    })
+  })
+
+  test.describe('dev-render-built-url-runtime', () => {
+    const f = useFixture({ root, mode: 'dev' })
+    defineTest({
+      ...f,
+      url: (url) => new URL(url ?? './', f.url('./custom-base/')).href,
+    })
+  })
+
+  test.describe('build-render-built-url-runtime', () => {
+    const f = useFixture({ root, mode: 'build' })
+    defineTest({
+      ...f,
+      url: (url) => new URL(url ?? './', f.url('./custom-base/')).href,
+    })
+  })
+})
+
+test.describe(() => {
+  const root = 'examples/e2e/temp/base'
+
+  test.beforeAll(async () => {
+    await setupInlineFixture({
+      src: 'examples/starter',
+      dest: root,
+      files: {
+        'vite.config.ts': /* js */ `
+          import rsc from '@vitejs/plugin-rsc'
+          import react from '@vitejs/plugin-react'
+          import { defineConfig } from 'vite'
+
+          export default defineConfig({
+            plugins: [
+              react(),
+              rsc({
+                entries: {
+                  client: './src/framework/entry.browser.tsx',
+                  ssr: './src/framework/entry.ssr.tsx',
+                  rsc: './src/framework/entry.rsc.tsx',
+                }
+              }),
+            ],
+            experimental: {
+              renderBuiltUrl(filename) {
+                return '/' + filename;
+              }
+            }
+          })
+        `,
+      },
+    })
+  })
+
+  test.describe('dev-render-built-url-string', () => {
+    const f = useFixture({ root, mode: 'dev' })
+    defineTest({
+      ...f,
+      url: (url) => new URL(url ?? './', f.url('./custom-base/')).href,
+    })
+  })
+
+  test.describe('build-render-built-url-string', () => {
+    const f = useFixture({ root, mode: 'build' })
+    defineTest({
+      ...f,
+      url: (url) => new URL(url ?? './', f.url('./custom-base/')).href,
+    })
+  })
+})
+
 function defineTest(f: Fixture, variant?: 'no-ssr' | 'dev-production') {
   const waitForHydration: typeof waitForHydration_ = (page) =>
     waitForHydration_(page, variant === 'no-ssr' ? '#root' : 'body')