fix: check for out.global.req/request when looking for incomingMessage

marko-js · Nov 29, 2022 · d469c64 · d469c64
1 parent 385f054
commit d469c64
Show file tree

Hide file tree

Showing 16 changed files with 205 additions and 4 deletions.
diff --git a/..._tests__/__snapshots__/micro-frame-sse/ssr-behind-reorder/renders.expected/loading.0.html b/..._tests__/__snapshots__/micro-frame-sse/ssr-behind-reorder/renders.expected/loading.0.html
@@ -0,0 +1,6 @@
+<div>
+  Host app
+</div>
+<noscript
+  id="GENERATED-0"
+/>
diff --git a/..._tests__/__snapshots__/micro-frame-sse/ssr-behind-reorder/renders.expected/loading.1.html b/..._tests__/__snapshots__/micro-frame-sse/ssr-behind-reorder/renders.expected/loading.1.html
@@ -0,0 +1,38 @@
+<div>
+  Host app
+</div>
+<noscript
+  id="GENERATED-0"
+/>
+<div
+  id="GENERATED-1"
+  style="display:none"
+/>
+<div
+  id="GENERATED-2"
+  style="display:none"
+>
+  <div
+    data-src="embed"
+    id="GENERATED-3"
+  >
+    <noscript
+      id="GENERATED-4"
+    />
+  </div>
+  <div
+    data-from="test"
+    data-slot="slot_1"
+    id="GENERATED-5"
+  >
+    Could not get request from stream/global. Please assign out.global.req with proper request object.
+  </div>
+  <div
+    data-from="test"
+    data-slot="slot_2"
+    id="GENERATED-6"
+  />
+</div>
+<script>
+  function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(1);$af(0)
+</script>
diff --git a/..._tests__/__snapshots__/micro-frame-sse/ssr-behind-reorder/renders.expected/loading.2.html b/..._tests__/__snapshots__/micro-frame-sse/ssr-behind-reorder/renders.expected/loading.2.html
@@ -0,0 +1,30 @@
+<div>
+  Host app
+</div>
+<div
+  data-src="embed"
+  id="GENERATED-0"
+/>
+<div
+  data-from="test"
+  data-slot="slot_1"
+  id="GENERATED-1"
+>
+  Could not get request from stream/global. Please assign out.global.req with proper request object.
+</div>
+<div
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-2"
+/>
+<div
+  id="GENERATED-3"
+  style="display:none"
+/>
+<div
+  id="GENERATED-4"
+  style="display:none"
+/>
+<script>
+  function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(1);$af(0)
+</script>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-behind-reorder/embed.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-behind-reorder/embed.marko
@@ -0,0 +1,25 @@
+import { wait } from "../../../../../__tests__/queue";
+import fs from "fs";
+import path from "path";
+
+$ const slot_1_html = fs.readFileSync(path.resolve(__dirname ,'slot_1.html'), 'utf8');
+$ const slot_2_html = fs.readFileSync(path.resolve(__dirname ,'slot_2.html'), 'utf8');
+$ const first = `id: slot_1\ndata: ${slot_1_html.replace(/\r?\n/g, '')}\n\n`;
+$ const second = `id: slot_2\ndata: ${slot_2_html.replace(/\r?\n/g, '')}\n\n`;
+$ const third = `id: slot_1\ntype: update\ndata: next chunk for slot_1`;
+
+<await(wait())>
+  <@then>
+    $!{first}
+    <await(wait())>
+      <@then>
+        $!{second}
+        <await(wait())>
+          <@then>
+            $!{third}
+          </@then>
+        </await>
+      </@then>
+    </await>
+  </@then>
+</await>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-behind-reorder/index.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-behind-reorder/index.marko
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Example</title>
+    <esbuild-assets/>
+  </head>
+  <body>
+    <div>Host app</div>
+    <await(new Promise((res) => setTimeout(res))) client-reorder>
+      <@then>
+        <micro-frame-sse
+          src="embed"
+          name="test"
+          read=((e) => [e.lastEventId, e.data])
+        />
+        <micro-frame-slot from="test" slot="slot_1">
+          <@catch|err|>${err.message}</@catch>
+        </micro-frame-slot>
+        <micro-frame-slot from="test" slot="slot_2"/>
+      </@then>
+    </await>
+  </body>
+</html>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-behind-reorder/slot_1.html b/src/components/micro-frame-sse/__tests__/fixtures/ssr-behind-reorder/slot_1.html
@@ -0,0 +1 @@
+<p>test_html for slot_1</p>
diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-behind-reorder/slot_2.html b/src/components/micro-frame-sse/__tests__/fixtures/ssr-behind-reorder/slot_2.html
@@ -0,0 +1 @@
+<p>test_html for slot_2</p>
diff --git a/src/components/micro-frame-sse/__tests__/server.test.ts b/src/components/micro-frame-sse/__tests__/server.test.ts
@@ -196,4 +196,9 @@ describe("micro-frame-sse", () => {
     "ssr timeout",
     fixture(path.join(__dirname, "fixtures/ssr-timeout"))
   );
+
+  describe(
+    "ssr behind reorder",
+    fixture(path.join(__dirname, "fixtures/ssr-behind-reorder"))
+  );
 });
diff --git a/...ts/micro-frame/__tests__/__snapshots__/ssr-behind-reorder/renders.expected/loading.0.html b/...ts/micro-frame/__tests__/__snapshots__/ssr-behind-reorder/renders.expected/loading.0.html
@@ -0,0 +1,6 @@
+<div>
+  Host app
+</div>
+<noscript
+  id="GENERATED-0"
+/>
diff --git a/...ts/micro-frame/__tests__/__snapshots__/ssr-behind-reorder/renders.expected/loading.1.html b/...ts/micro-frame/__tests__/__snapshots__/ssr-behind-reorder/renders.expected/loading.1.html
@@ -0,0 +1,20 @@
+<div>
+  Host app
+</div>
+<noscript
+  id="GENERATED-0"
+/>
+<div
+  id="GENERATED-1"
+  style="display:none"
+>
+  <div
+    data-src="embed"
+    id="GENERATED-2"
+  >
+    Could not get request from stream/global. Please assign out.global.req with proper request object.
+  </div>
+</div>
+<script>
+  function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(0)
+</script>
diff --git a/...ts/micro-frame/__tests__/__snapshots__/ssr-behind-reorder/renders.expected/loading.2.html b/...ts/micro-frame/__tests__/__snapshots__/ssr-behind-reorder/renders.expected/loading.2.html
@@ -0,0 +1,16 @@
+<div>
+  Host app
+</div>
+<div
+  data-src="embed"
+  id="GENERATED-0"
+>
+  Could not get request from stream/global. Please assign out.global.req with proper request object.
+</div>
+<div
+  id="GENERATED-1"
+  style="display:none"
+/>
+<script>
+  function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(0)
+</script>
diff --git a/src/components/micro-frame/__tests__/fixtures/ssr-behind-reorder/embed.marko b/src/components/micro-frame/__tests__/fixtures/ssr-behind-reorder/embed.marko
@@ -0,0 +1,4 @@
+<esbuild-assets/>
+<div>
+  Embedded App.
+</div>
diff --git a/src/components/micro-frame/__tests__/fixtures/ssr-behind-reorder/index.marko b/src/components/micro-frame/__tests__/fixtures/ssr-behind-reorder/index.marko
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Example</title>
+    <esbuild-assets/>
+  </head>
+  <body>
+    <div>Host app</div>
+    <await(new Promise((res) => setTimeout(res))) client-reorder>
+      <@then>
+        <micro-frame src="embed">
+          <@catch|err|>${err.message}</@catch>
+        </micro-frame>
+      </@then>
+    </await>
+  </body>
+</html>
diff --git a/src/components/micro-frame/__tests__/server.test.ts b/src/components/micro-frame/__tests__/server.test.ts
@@ -129,3 +129,8 @@ describe(
   "ssr custom fetch",
   fixture(path.join(__dirname, "fixtures/ssr-custom-fetch"))
 );
+
+describe(
+  "ssr behind reorder",
+  fixture(path.join(__dirname, "fixtures/ssr-behind-reorder"))
+);
diff --git a/src/components/micro-frame/component/node.marko b/src/components/micro-frame/component/node.marko
@@ -5,10 +5,10 @@ static const cachePath = path.resolve("node_modules/.cache/fetch");
 static const strictSSL = process.env.NODE_TLS_REJECT_UNAUTHORIZED !== "0";
 
 static async function fetchStream(input, out) {
-  const incomingMessage = out.stream && (out.stream.req || out.stream.request);
+  const incomingMessage = out.stream && (out.stream.req || out.stream.request) || out.global.req || out.global.request;
 
   if (!incomingMessage) {
-    throw new Error("Could not get request from stream.");
+    throw new Error("Could not get request from stream/global. Please assign out.global.req with proper request object.");
   }
 
   const url = new URL(input.src, `${incomingMessage.protocol}://${incomingMessage.headers.host}`);

diff --git a/src/components/stream-source/component/node.marko b/src/components/stream-source/component/node.marko
@@ -5,10 +5,10 @@ import StreamSource, { STREAM_SOURCE_MAP } from "./StreamSource";
 static const cachePath = path.resolve("node_modules/.cache/fetch");
 
 $ const request = async () => {
-  const incomingMessage = out.stream && (out.stream.req || out.stream.request);
+  const incomingMessage = out.stream && (out.stream.req || out.stream.request) || out.global.req || out.global.request;
 
   if (!incomingMessage) {
-    throw new Error("Could not get request from stream.");
+    throw new Error("Could not get request from stream/global. Please assign out.global.req with proper request object.");
   }
 
   const url = new URL(input.src, `${incomingMessage.protocol}://${incomingMessage.headers.host}`);