fix: async issues

.changeset/ripe-pandas-do.md

@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Fix issue where client side placeholders were not clearing batched effects, causing extra execution.

.changeset/spotty-trees-design.md

@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Fix issue moving @placeholder/@catch content when the replacement range was not yet flushed.

.sizes.json

@@ -7,8 +7,8 @@
     {
       "name": "*",
       "total": {
-        "min": 19362,
-        "brotli": 7336
+        "min": 19377,
+        "brotli": 7348
       }
     },
     {

.sizes/dom.js

@@ -1,4 +1,4 @@
-// size: 19362 (min) 7336 (brotli)
+// size: 19377 (min) 7348 (brotli)
 var empty = [],
   rest = Symbol();
 function attrTag(attrs) {
@@ -1206,8 +1206,11 @@ function _await(nodeAccessor, renderer) {
                       tryWithPlaceholder.h.parentNode,
                       placeholderBranch.h,
                     ),
-                    removeAndDestroyBranch(placeholderBranch)),
-                  tryWithPlaceholder.H && runEffects(tryWithPlaceholder.H, !0));
+                    removeAndDestroyBranch(placeholderBranch)));
+                let pendingEffects2 = tryWithPlaceholder.H;
+                pendingEffects2 &&
+                  ((tryWithPlaceholder.H = []),
+                  runEffects(pendingEffects2, !0));
               }
             },
             -1,

packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/ssr.expected.md

@@ -111,6 +111,7 @@ INSERT html/body/script0
 INSERT html/body/script0/#text
 REMOVE html/head/style after html/body/div
 INSERT html/head/style
+REMOVE t after html/body/div
 INSERT t
 INSERT html/body/div/div/div
 INSERT html/body/div/div/div/#comment0
@@ -125,23 +126,17 @@ INSERT t
 INSERT #comment
 INSERT html/body/script1
 INSERT html/body/script1/#text
-REMOVE html/body/div/div/div in t
-REMOVE #comment in t
-INSERT html/body/div/div/div
 REMOVE t after html/body/script0
 REMOVE #text after #comment
 REMOVE #comment after html/body/div/div/#comment0
-REMOVE html/body/div/div/div in t
 REMOVE #comment after html/body/div/div/#comment0
 INSERT html/body/div/div/div
-REMOVE t after html/body/div
+REMOVE t after html/body/script0
 INSERT t
 INSERT html/body/script2
 INSERT html/body/script2/#text
-REMOVE #comment in t
 REMOVE t after html/body/script1
 REMOVE #text after #comment
 REMOVE #comment after html/body/div/div/div/div/#comment0
 REMOVE #comment after html/body/div/div/div/div/#comment0
-REMOVE t after html/body/script0
 ```

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-isolated-boundaries/__snapshots__/.name-cache.json

@@ -0,0 +1,7 @@
+{
+  "vars": {
+    "props": {
+      "$_": "e"
+    }
+  }
+}

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-isolated-boundaries/__snapshots__/csr-sanitized.expected.md

@@ -0,0 +1,16 @@
+# Render
+
+
+# Render ASYNC
+```html
+Rejected B
+```
+
+
+# Render ASYNC
+```html
+<div>
+  Resolved A: A Value
+</div>
+Rejected B
+```

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-isolated-boundaries/__snapshots__/csr.expected.md

@@ -0,0 +1,50 @@
+# Render
+```html
+<!---->
+<!---->
+<!---->
+<!---->
+<!---->
+<!---->
+```
+
+# Mutations
+```
+INSERT #comment0, #comment1, #text0, #comment2, #comment3, #text1, #comment4, #comment5
+```
+
+# Render ASYNC
+```html
+<!---->
+<!---->
+<!---->
+Rejected B
+<!---->
+```
+
+# Mutations
+```
+INSERT #text1
+REMOVE #comment after #text1
+REMOVE #text after #text1
+REMOVE #comment after #text1
+```
+
+# Render ASYNC
+```html
+<!---->
+<!---->
+<div>
+  Resolved A: A Value
+</div>
+<!---->
+Rejected B
+<!---->
+```
+
+# Mutations
+```
+INSERT div
+REMOVE #text after div
+UPDATE div/#text1 "" => "A Value"
+```

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-isolated-boundaries/__snapshots__/dom.expected/template.hydrate.js

@@ -0,0 +1,5 @@
+// size: 118 (min) 67 (brotli)
+(_._enable_catch(),
+  _._enable_catch(),
+  _._content_resume("a0", "Rejected B", "b"),
+  _._content_resume("a1", "Rejected A", "b"));

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-isolated-boundaries/__snapshots__/dom.expected/template.js

@@ -0,0 +1,39 @@
+export const $template = "<!><!><!><!>";
+export const $walks = /* over(1), replace, over(1), replace, over(2) */"b%b%c";
+import { resolveAfter, rejectAfter } from "../../utils/resolve";
+import * as _ from "@marko/runtime-tags/debug/dom";
+_._enable_catch();
+_._enable_catch();
+const $await_content2__v = /* @__PURE__ */_._const("v", ($scope, v) => _._text($scope["#text/0"], v));
+const $await_content2__$params = /* @__PURE__ */_._const("$params3", ($scope, $params3) => $await_content2__v($scope, $params3[0]));
+const $await_content2 = /* @__PURE__ */_._content_branch("<div>Resolved B: <!></div>", /* next(1), over(1), replace, out(1) */"Db%l", 0, $await_content2__$params);
+const $catch_content2 = _._content_resume("__tests__/template.marko_5_content", "Rejected B", /* over(1) */"b");
+const $try_content2__await = /* @__PURE__ */_._await("#text/0", $await_content2);
+const $try_content2__setup = $scope => {
+  $try_content2__await($scope, rejectAfter(new Error("rejected b"), 1));
+};
+const $try_content2 = /* @__PURE__ */_._content_branch("<!><!><!>", /* over(1), replace, over(2) */"b%c", $try_content2__setup);
+const $await_content__v = /* @__PURE__ */_._const("v", ($scope, v) => _._text($scope["#text/0"], v));
+const $await_content__$params = /* @__PURE__ */_._const("$params2", ($scope, $params2) => $await_content__v($scope, $params2[0]));
+const $await_content = /* @__PURE__ */_._content_branch("<div>Resolved A: <!></div>", /* next(1), over(1), replace, out(1) */"Db%l", 0, $await_content__$params);
+const $catch_content = _._content_resume("__tests__/template.marko_2_content", "Rejected A", /* over(1) */"b");
+const $try_content__await = /* @__PURE__ */_._await("#text/0", $await_content);
+const $try_content__setup = $scope => {
+  $try_content__await($scope, resolveAfter("A Value", 2));
+};
+const $try_content = /* @__PURE__ */_._content_branch("<!><!><!>", /* over(1), replace, over(2) */"b%c", $try_content__setup);
+const $try = /* @__PURE__ */_._try("#text/0", $try_content);
+const $try2 = /* @__PURE__ */_._try("#text/1", $try_content2);
+export function $setup($scope) {
+  $try($scope, {
+    catch: _.attrTag({
+      content: $catch_content($scope)
+    })
+  });
+  $try2($scope, {
+    catch: _.attrTag({
+      content: $catch_content2($scope)
+    })
+  });
+}
+export default /* @__PURE__ */_._template("__tests__/template.marko", $template, $walks, $setup);

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-isolated-boundaries/__snapshots__/html.expected/template.js

@@ -0,0 +1,33 @@
+import { resolveAfter, rejectAfter } from "../../utils/resolve";
+import * as _ from "@marko/runtime-tags/debug/html";
+export default _._template("__tests__/template.marko", input => {
+  const $scope0_id = _._scope_id();
+  _._try($scope0_id, "#text/0", _._content_resume("__tests__/template.marko_1_content", () => {
+    const $scope1_id = _._scope_id();
+    _._await($scope1_id, "#text/0", resolveAfter("A Value", 2), v => {
+      const $scope3_id = _._scope_id();
+      _._html(`<div>Resolved A: ${_._escape(v)}</div>`);
+    }, 0);
+  }, $scope0_id), {
+    catch: _.attrTag({
+      content: _._content_resume("__tests__/template.marko_2_content", () => {
+        const $scope2_id = _._scope_id();
+        _._html("Rejected A");
+      }, $scope0_id)
+    })
+  });
+  _._try($scope0_id, "#text/1", _._content_resume("__tests__/template.marko_4_content", () => {
+    const $scope4_id = _._scope_id();
+    _._await($scope4_id, "#text/0", rejectAfter(new Error("rejected b"), 1), v => {
+      const $scope6_id = _._scope_id();
+      _._html(`<div>Resolved B: ${_._escape(v)}</div>`);
+    }, 0);
+  }, $scope0_id), {
+    catch: _.attrTag({
+      content: _._content_resume("__tests__/template.marko_5_content", () => {
+        const $scope5_id = _._scope_id();
+        _._html("Rejected B");
+      }, $scope0_id)
+    })
+  });
+});

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-isolated-boundaries/__snapshots__/resume-sanitized.expected.md

@@ -0,0 +1,7 @@
+# Render
+```html
+<div>
+  Resolved A: A Value
+</div>
+Rejected B
+```

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-isolated-boundaries/__snapshots__/resume.expected.md

@@ -0,0 +1,53 @@
+# Render
+```html
+<!--M_!^b-->
+<html>
+  <head>
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.d = [0, _.a = {
+        "ConditionalScope:#text/0": _.b = {
+          "#BranchAccessor": "#text/0"
+        },
+        "ConditionalScope:#text/1": _.c = {
+          "#BranchAccessor": "#text/1"
+        }
+      }, _.b, _.c], _.b["#CatchContent"] = _._[
+        "__tests__/template.marko_2_content"
+        ](_.a), _.c["#CatchContent"] = _._[
+        "__tests__/template.marko_5_content"
+        ](_.a), _.d)]
+    </script>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <!--M_[-->
+    <script>
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+    <div>
+      Resolved A: A Value
+    </div>
+    <!--M_!b-->
+    <!--M_]1 #text/0 2-->
+    <!--M_[-->
+    Rejected B
+    <!--M_]1 #text/1 3-->
+    <script>
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+REMOVE html/body/#comment0 before #comment
+INSERT html/body/#comment0
+INSERT html/body/#text0
+```

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-isolated-boundaries/__snapshots__/ssr-sanitized.expected.md

@@ -0,0 +1,7 @@
+# Render End
+```html
+<div>
+  Resolved A: A Value
+</div>
+Rejected B
+```