fix: issue with ooo stream with and io stream followed by ooo stream

marko-js · May 10, 2024 · 7691418 · 7691418
1 parent 5c59829
commit 7691418
Show file tree

Hide file tree

Showing 21 changed files with 77 additions and 8 deletions.
diff --git a/.changeset/chilly-plums-happen.md b/.changeset/chilly-plums-happen.md
@@ -0,0 +1,5 @@
+---
+"marko": patch
+---
+
+Fix issue where an out of order await contained an in order await and then another out of order await. This previously caused a race condition where if the final out of order await resolved first, it'd try to send it's content without it's placeholder location being available.
diff --git a/packages/marko/src/core-tags/core/await/renderer.js b/packages/marko/src/core-tags/core/await/renderer.js
@@ -106,6 +106,7 @@ module.exports = function awaitTag(input, out) {
   };
 
   if (clientReorder) {
+    awaitInfo.parent = out;
     awaitInfo.after = input.showAfter;
 
     clientReorderContext =

diff --git a/packages/marko/src/core-tags/core/await/reorderer-renderer.js b/packages/marko/src/core-tags/core/await/reorderer-renderer.js
@@ -50,9 +50,27 @@ module.exports = function (input, out) {
     }
 
     function handleAwait(awaitInfo) {
+      let flushedScript = false;
+      let flushedContent = false;
+      let flushedPlaceholder = false;
+      awaitInfo.parent.on("___toString", () => {
+        flushedPlaceholder = true;
+        if (!flushedScript && flushedContent) {
+          flushedScript = true;
+          asyncOut.script(
+            `$${reorderFunctionId}(` +
+              (typeof awaitInfo.id === "number"
+                ? awaitInfo.id
+                : '"' + awaitInfo.id + '"') +
+              (awaitInfo.after ? ',"' + awaitInfo.after + '"' : "") +
+              ")",
+          );
+        }
+      });
       awaitInfo.out
         .on("___toString", out.emit.bind(out, "___toString"))
         .on("finish", function (result) {
+          flushedContent = true;
           if (!global._afRuntime) {
             // Minified version of ./client-reorder-runtime.js
             asyncOut.script(
@@ -86,14 +104,17 @@ module.exports = function (input, out) {
             );
           }
 
-          asyncOut.script(
-            `$${reorderFunctionId}(` +
-              (typeof awaitInfo.id === "number"
-                ? awaitInfo.id
-                : '"' + awaitInfo.id + '"') +
-              (awaitInfo.after ? ',"' + awaitInfo.after + '"' : "") +
-              ")",
-          );
+          if (!flushedScript && flushedPlaceholder) {
+            flushedScript = true;
+            asyncOut.script(
+              `$${reorderFunctionId}(` +
+                (typeof awaitInfo.id === "number"
+                  ? awaitInfo.id
+                  : '"' + awaitInfo.id + '"') +
+                (awaitInfo.after ? ',"' + awaitInfo.after + '"' : "") +
+                ")",
+            );
+          }
 
           awaitInfo.out.writer = asyncOut.writer;
 

diff --git a/packages/marko/test/render/fixtures-async-callback/await-client-reorder-cspnonce/test.js b/packages/marko/test/render/fixtures-async-callback/await-client-reorder-cspnonce/test.js
@@ -15,6 +15,7 @@ exports.checkEvents = function (events, snapshot, out) {
     expect(arg.out != null).to.equal(true);
 
     delete arg.out; // Not serializable
+    delete arg.parent; // Not serializable
     delete arg.asyncValue; // Not serializable
 
     return {

diff --git a/packages/marko/test/render/fixtures-async-callback/await-client-reorder-invoked-once/test.js b/packages/marko/test/render/fixtures-async-callback/await-client-reorder-invoked-once/test.js
@@ -18,6 +18,7 @@ exports.checkEvents = function (events, snapshot, out) {
     expect(arg.out != null).to.equal(true);
 
     delete arg.out; // Not serializable
+    delete arg.parent; // Not serializable
     delete arg.asyncValue; // Not serializable
 
     return {

diff --git a/packages/marko/test/render/fixtures-async-callback/await-client-reorder-mixed/test.js b/packages/marko/test/render/fixtures-async-callback/await-client-reorder-mixed/test.js
@@ -13,6 +13,7 @@ exports.checkEvents = function (events, snapshot, out) {
     expect(arg.out != null).to.equal(true);
 
     delete arg.out; // Not serializable
+    delete arg.parent; // Not serializable
     delete arg.asyncValue; // Not serializable
 
     return {

diff --git a/packages/marko/test/render/fixtures-async-callback/await-client-reorder-nested/test.js b/packages/marko/test/render/fixtures-async-callback/await-client-reorder-nested/test.js
@@ -15,6 +15,7 @@ exports.checkEvents = function (events, snapshot, out) {
     expect(arg.out != null).to.equal(true);
 
     delete arg.out; // Not serializable
+    delete arg.parent; // Not serializable
     delete arg.asyncValue; // Not serializable
 
     return {

diff --git a/packages/marko/test/render/fixtures-async-callback/await-client-reorder-sync/test.js b/packages/marko/test/render/fixtures-async-callback/await-client-reorder-sync/test.js
@@ -13,6 +13,7 @@ exports.checkEvents = function (events, snapshot) {
     expect(arg.out != null).to.equal(true);
 
     delete arg.out; // Not serializable
+    delete arg.parent; // Not serializable
     delete arg.asyncValue; // Not serializable
 
     return {

diff --git a/packages/marko/test/render/fixtures-async-callback/await-client-reorder/test.js b/packages/marko/test/render/fixtures-async-callback/await-client-reorder/test.js
@@ -14,6 +14,7 @@ exports.checkEvents = function (events, snapshot, out) {
     expect(arg.out != null).to.equal(true);
 
     delete arg.out; // Not serializable
+    delete arg.parent; // Not serializable
     delete arg.asyncValue; // Not serializable
 
     return {

diff --git a/.../marko/test/render/fixtures-async-callback/await-out-of-order-with-in-order/expected.html b/.../marko/test/render/fixtures-async-callback/await-out-of-order-with-in-order/expected.html
@@ -0,0 +1 @@
+BEFORE-OUT-OF-ORDER <noscript id="afpha"></noscript> AFTER-OUT-OF-ORDER <div id="afc" style="display:none">NESTED-OUT-OF-ORDER</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<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<f;b++)c(a[b])}}</script><!--FLUSH--><div id="afa" style="display:none">BEFORE-IN-ORDER INSIDE-IN-ORDER<noscript id="afphc"></noscript> AFTER-IN-ORDER</div><script>$af("a");$af("c")</script>
diff --git a/...marko/test/render/fixtures-async-callback/await-out-of-order-with-in-order/template.marko b/...marko/test/render/fixtures-async-callback/await-out-of-order-with-in-order/template.marko
@@ -0,0 +1,17 @@
+---
+BEFORE-OUT-OF-ORDER
+<await(new Promise(r => setTimeout(r))) name="a" client-reorder>
+    <@then>
+        BEFORE-IN-ORDER
+        <await(new Promise(r => setTimeout(r))) name="b">
+            <@then>INSIDE-IN-ORDER</>
+        </>
+        <await(Promise.resolve()) name="c" client-reorder>
+            <@then>NESTED-OUT-OF-ORDER</>
+        </>
+        AFTER-IN-ORDER
+    </>
+</>
+AFTER-OUT-OF-ORDER
+<await-reorderer/>
+---
diff --git a/packages/marko/test/render/fixtures-async-callback/await-out-of-order-with-in-order/test.js b/packages/marko/test/render/fixtures-async-callback/await-out-of-order-with-in-order/test.js
@@ -0,0 +1,7 @@
+const { callbackProvider } = require("../../../__util__/async-helpers");
+
+exports.templateData = {
+  testDataProvider: callbackProvider(1, { name: "Frank" }),
+};
+
+exports.skip_vdom = "client-reorder/placeholders are not supported in vdom";
diff --git a/packages/marko/test/render/fixtures-async-callback/await-timeout/test.js b/packages/marko/test/render/fixtures-async-callback/await-timeout/test.js
@@ -20,6 +20,9 @@ exports.checkEvents = function (events, snapshot) {
     expect(arg.out != null).to.equal(true);
 
     delete arg.out; // Not serializable
+    delete arg.parent; // Not serializable
+    delete arg.parent; // Not serializable
+
     delete arg.asyncValue; // Not serializable
 
     return {

diff --git a/packages/marko/test/render/fixtures/await-client-reorder-cspnonce/test.js b/packages/marko/test/render/fixtures/await-client-reorder-cspnonce/test.js
@@ -14,6 +14,7 @@ exports.checkEvents = function (events, snapshot, out) {
     expect(arg.out != null).to.equal(true);
 
     delete arg.out; // Not serializable
+    delete arg.parent; // Not serializable
     delete arg.asyncValue; // Not serializable
 
     return {

diff --git a/packages/marko/test/render/fixtures/await-client-reorder-invoked-once/test.js b/packages/marko/test/render/fixtures/await-client-reorder-invoked-once/test.js
@@ -17,6 +17,7 @@ exports.checkEvents = function (events, snapshot, out) {
     expect(arg.out != null).to.equal(true);
 
     delete arg.out; // Not serializable
+    delete arg.parent; // Not serializable
     delete arg.asyncValue; // Not serializable
 
     return {

diff --git a/packages/marko/test/render/fixtures/await-client-reorder-mixed/test.js b/packages/marko/test/render/fixtures/await-client-reorder-mixed/test.js
@@ -12,6 +12,7 @@ exports.checkEvents = function (events, snapshot, out) {
     expect(arg.out != null).to.equal(true);
 
     delete arg.out; // Not serializable
+    delete arg.parent; // Not serializable
     delete arg.asyncValue; // Not serializable
 
     return {

diff --git a/packages/marko/test/render/fixtures/await-client-reorder-nested/test.js b/packages/marko/test/render/fixtures/await-client-reorder-nested/test.js
@@ -14,6 +14,7 @@ exports.checkEvents = function (events, snapshot, out) {
     expect(arg.out != null).to.equal(true);
 
     delete arg.out; // Not serializable
+    delete arg.parent; // Not serializable
     delete arg.asyncValue; // Not serializable
 
     return {

diff --git a/packages/marko/test/render/fixtures/await-client-reorder-sync/test.js b/packages/marko/test/render/fixtures/await-client-reorder-sync/test.js
@@ -11,6 +11,7 @@ exports.checkEvents = function (events, snapshot) {
     expect(arg.out != null).to.equal(true);
 
     delete arg.out; // Not serializable
+    delete arg.parent; // Not serializable
     delete arg.asyncValue; // Not serializable
 
     return {

diff --git a/packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/test.js b/packages/marko/test/render/fixtures/await-client-reorder-with-runtimeId/test.js
@@ -17,6 +17,7 @@ exports.checkEvents = function (events, snapshot, out) {
     expect(arg.out != null).to.equal(true);
 
     delete arg.out; // Not serializable
+    delete arg.parent; // Not serializable
     delete arg.asyncValue; // Not serializable
 
     return {

diff --git a/packages/marko/test/render/fixtures/await-client-reorder/test.js b/packages/marko/test/render/fixtures/await-client-reorder/test.js
@@ -13,6 +13,7 @@ exports.checkEvents = function (events, snapshot, out) {
     expect(arg.out != null).to.equal(true);
 
     delete arg.out; // Not serializable
+    delete arg.parent; // Not serializable
     delete arg.asyncValue; // Not serializable
 
     return {

diff --git a/packages/marko/test/render/fixtures/await-timeout/test.js b/packages/marko/test/render/fixtures/await-timeout/test.js
@@ -14,6 +14,7 @@ exports.checkEvents = function (events, snapshot) {
     expect(arg.out != null).to.equal(true);
 
     delete arg.out; // Not serializable
+    delete arg.parent; // Not serializable
     delete arg.asyncValue; // Not serializable
 
     return {