Bound preview rewriting to REST URLs

Author: chubes4

packages/runtime-playground/src/preview-server.ts

@@ -242,15 +242,21 @@ function shouldRewriteProxyResponse(headers: IncomingHttpHeaders): boolean {
     && (contentType.startsWith("text/") || /(?:^|\/)(?:[^;]+\+)?(?:json|javascript|xml)(?:;|$)/.test(contentType))
 }
 
-function rewritePreviewOrigin(body: string, targetOrigin: string, proxyOrigin: string): string {
+function rewritePreviewBodyOrigin(body: string, targetOrigin: string, proxyOrigin: string): string {
   return body
+    .replaceAll(`${targetOrigin}/wp-json`, `${proxyOrigin}/wp-json`)
+    .replaceAll(`${targetOrigin.replaceAll("/", "\\/")}\\/wp-json`, `${proxyOrigin.replaceAll("/", "\\/")}\\/wp-json`)
+}
+
+function rewritePreviewHeaderOrigin(value: string, targetOrigin: string, proxyOrigin: string): string {
+  return value
     .replaceAll(targetOrigin, proxyOrigin)
     .replaceAll(targetOrigin.replaceAll("/", "\\/"), proxyOrigin.replaceAll("/", "\\/"))
 }
 
 function previewOriginRewriteStream(targetOrigin: string, proxyOrigin: string): Transform {
   const decoder = new StringDecoder("utf8")
-  const patterns = [targetOrigin, targetOrigin.replaceAll("/", "\\/")]
+  const patterns = [`${targetOrigin}/wp-json`, `${targetOrigin.replaceAll("/", "\\/")}\\/wp-json`]
   const retainedCharacters = Math.max(...patterns.map((pattern) => pattern.length)) - 1
   let pending = ""
 
@@ -264,10 +270,10 @@ function previewOriginRewriteStream(targetOrigin: string, proxyOrigin: string):
         }
       }
       pending = text.slice(splitAt)
-      callback(null, rewritePreviewOrigin(text.slice(0, splitAt), targetOrigin, proxyOrigin))
+      callback(null, rewritePreviewBodyOrigin(text.slice(0, splitAt), targetOrigin, proxyOrigin))
     },
     flush(callback) {
-      callback(null, rewritePreviewOrigin(pending + decoder.end(), targetOrigin, proxyOrigin))
+      callback(null, rewritePreviewBodyOrigin(pending + decoder.end(), targetOrigin, proxyOrigin))
     },
   })
 }
@@ -345,8 +351,8 @@ function proxyResponseHeaders(headers: IncomingHttpHeaders, targetOrigin?: strin
 
   if (targetOrigin && proxyOrigin) {
     for (const [name, value] of Object.entries(forwarded)) {
-      if (typeof value === "string") forwarded[name] = rewritePreviewOrigin(value, targetOrigin, proxyOrigin)
-      else if (Array.isArray(value)) forwarded[name] = value.map((item) => rewritePreviewOrigin(item, targetOrigin, proxyOrigin))
+      if (typeof value === "string") forwarded[name] = rewritePreviewHeaderOrigin(value, targetOrigin, proxyOrigin)
+      else if (Array.isArray(value)) forwarded[name] = value.map((item) => rewritePreviewHeaderOrigin(item, targetOrigin, proxyOrigin))
     }
   }
 

tests/browser-callback-materialization-contracts.test.ts

@@ -151,7 +151,7 @@ const targetServer = createServer(async (request, response) => {
     const escapedOrigin = targetServerUrl.replaceAll("/", "\\/")
     const splitAt = Math.floor(escapedOrigin.length / 2)
     response.write(`<script>window.wpApiSettings={"root":"${escapedOrigin.slice(0, splitAt)}`)
-    response.end(`${escapedOrigin.slice(splitAt)}\\/wp-json\\/"}</script>`)
+    response.end(`${escapedOrigin.slice(splitAt)}\\/wp-json\\/","asset":"${escapedOrigin}\\/wp-includes\\/editor.js"}</script>`)
     return
   }
   if (request.url === "/wp-json/wp/v2/pages/5") {
@@ -194,6 +194,8 @@ try {
   const editorHtml = await fetch(`${proxied.serverUrl}/editor`).then((response) => response.text())
   const restUrl = editorHtml.match(/root":"([^\"]+)/)?.[1]?.replaceAll("\\/", "/")
   assert.equal(restUrl, `${proxied.serverUrl}/wp-json/`, "WordPress browser URLs use the preview proxy origin")
+  const assetUrl = editorHtml.match(/asset":"([^\"]+)/)?.[1]?.replaceAll("\\/", "/")
+  assert.equal(assetUrl, `${targetServerUrl}/wp-includes/editor.js`, "unrelated asset URLs remain on the upstream origin")
 
   const mutationUrl = new URL("wp/v2/pages/5", restUrl).toString()
   const preflight = await fetch(mutationUrl, {