From 40413b7da9d7920abda8e51f8b73fd2417b8e123 Mon Sep 17 00:00:00 2001 From: Ryan Turnquist Date: Fri, 21 Nov 2025 13:31:56 -0800 Subject: [PATCH] fix: handle await closures, delay renders in pending scopes --- .changeset/open-facts-obey.md | 5 + .sizes.json | 40 +- .sizes/comments.ssr/entry.js | 2 +- .sizes/counter.ssr/entry.js | 2 +- .sizes/dom.js | 352 ++++++++--------- .sizes/name-cache.json | 2 +- package-lock.json | 8 +- package.json | 2 +- .../__snapshots__/csr-sanitized.expected.md | 28 ++ .../__snapshots__/csr.expected.md | 70 +++- .../dom.expected/tags/recurse.js | 5 +- .../html.expected/tags/recurse.js | 12 +- .../resume-sanitized.expected.md | 64 ++++ .../__snapshots__/resume.expected.md | 330 +++++++++++++++- .../__snapshots__/ssr-sanitized.expected.md | 30 +- .../__snapshots__/ssr.expected.md | 296 +++++++++++---- .../async-deep-recursive/tags/recurse.marko | 3 +- .../fixtures/async-deep-recursive/test.ts | 4 +- .../__snapshots__/csr-sanitized.expected.md | 23 ++ .../__snapshots__/csr.expected.md | 41 +- .../resume-sanitized.expected.md | 34 ++ .../__snapshots__/resume.expected.md | 186 ++++++++- .../__snapshots__/ssr-sanitized.expected.md | 2 +- .../__snapshots__/ssr.expected.md | 2 +- .../test.ts | 6 +- .../resume-sanitized.expected.md | 18 + .../__snapshots__/resume.expected.md | 46 +++ .../__snapshots__/ssr-sanitized.expected.md | 2 +- .../__snapshots__/ssr.expected.md | 2 +- .../async-nested-resolve-in-order/test.ts | 6 +- .../resume-sanitized.expected.md | 6 + .../__snapshots__/resume.expected.md | 109 ++++++ .../__snapshots__/ssr-sanitized.expected.md | 2 +- .../__snapshots__/ssr.expected.md | 2 +- .../test.ts | 4 +- .../resume-sanitized.expected.md | 6 + .../__snapshots__/resume.expected.md | 89 +++++ .../__snapshots__/ssr-sanitized.expected.md | 2 +- .../__snapshots__/ssr.expected.md | 2 +- .../test.ts | 4 +- .../__snapshots__/csr-sanitized.expected.md | 32 -- .../__snapshots__/csr.expected.md | 68 +--- .../dom.expected/template.hydrate.js | 6 +- .../__snapshots__/dom.expected/template.js | 8 +- .../resume-sanitized.expected.md | 22 ++ .../__snapshots__/resume.expected.md | 136 +++++++ .../__snapshots__/ssr-sanitized.expected.md | 2 +- .../__snapshots__/ssr.expected.md | 2 +- .../test.ts | 4 +- .../resume-sanitized.expected.md | 12 + .../__snapshots__/resume.expected.md | 31 ++ .../__snapshots__/ssr-sanitized.expected.md | 2 +- .../__snapshots__/ssr.expected.md | 2 +- .../fixtures/async-resolve-in-order/test.ts | 6 +- .../resume-sanitized.expected.md | 6 + .../__snapshots__/resume.expected.md | 16 + .../__snapshots__/ssr-sanitized.expected.md | 2 +- .../__snapshots__/ssr.expected.md | 2 +- .../async-resolve-out-of-order/test.ts | 6 +- .../resume-sanitized.expected.md | 9 + .../__snapshots__/resume.expected.md | 61 +++ .../__snapshots__/ssr-sanitized.expected.md | 2 +- .../async-state/__snapshots__/ssr.expected.md | 2 +- .../__tests__/fixtures/async-state/test.ts | 4 +- .../__snapshots__/.name-cache.json | 13 + .../__snapshots__/csr-sanitized.expected.md | 68 ++++ .../__snapshots__/csr.expected.md | 98 +++++ .../dom.expected/template.hydrate.js | 18 + .../__snapshots__/dom.expected/template.js | 24 ++ .../__snapshots__/html.expected/template.js | 28 ++ .../resume-sanitized.expected.md | 59 +++ .../__snapshots__/resume.expected.md | 172 +++++++++ .../__snapshots__/ssr-sanitized.expected.md | 20 + .../__snapshots__/ssr.expected.md | 92 +++++ .../await-closure-in-order/template.marko | 7 + .../fixtures/await-closure-in-order/test.ts | 18 + .../__snapshots__/.name-cache.json | 12 + .../__snapshots__/csr-sanitized.expected.md | 15 + .../__snapshots__/csr.expected.md | 45 +++ .../dom.expected/template.hydrate.js | 2 + .../__snapshots__/dom.expected/template.js | 25 ++ .../__snapshots__/html.expected/template.js | 22 ++ .../resume-sanitized.expected.md | 12 + .../__snapshots__/resume.expected.md | 82 ++++ .../__snapshots__/ssr-sanitized.expected.md | 12 + .../__snapshots__/ssr.expected.md | 107 ++++++ .../await-closure-inert/template.marko | 6 + .../fixtures/await-closure-inert/test.ts | 3 + .../__snapshots__/.name-cache.json | 13 + .../__snapshots__/csr-sanitized.expected.md | 46 +++ .../__snapshots__/csr.expected.md | 100 +++++ .../dom.expected/template.hydrate.js | 19 + .../__snapshots__/dom.expected/template.js | 37 ++ .../__snapshots__/html.expected/template.js | 38 ++ .../resume-sanitized.expected.md | 43 +++ .../__snapshots__/resume.expected.md | 240 ++++++++++++ .../__snapshots__/ssr-sanitized.expected.md | 15 + .../__snapshots__/ssr.expected.md | 136 +++++++ .../await-closure-within/template.marko | 9 + .../fixtures/await-closure-within/test.ts | 7 + .../__snapshots__/.name-cache.json | 12 + .../__snapshots__/csr-sanitized.expected.md | 64 ++++ .../__snapshots__/csr.expected.md | 107 ++++++ .../dom.expected/template.hydrate.js | 20 + .../__snapshots__/dom.expected/template.js | 33 ++ .../__snapshots__/html.expected/template.js | 39 ++ .../resume-sanitized.expected.md | 56 +++ .../__snapshots__/resume.expected.md | 286 ++++++++++++++ .../__snapshots__/ssr-sanitized.expected.md | 18 + .../__snapshots__/ssr.expected.md | 148 ++++++++ .../fixtures/await-closure/template.marko | 7 + .../__tests__/fixtures/await-closure/test.ts | 16 + .../resume-sanitized.expected.md | 21 ++ .../__snapshots__/resume.expected.md | 101 +++++ .../__snapshots__/ssr-sanitized.expected.md | 2 +- .../__snapshots__/ssr.expected.md | 2 +- .../fixtures/await-remove-parent/test.ts | 6 +- .../await-tag/__snapshots__/csr.expected.md | 6 +- .../resume-sanitized.expected.md | 16 + .../__snapshots__/resume.expected.md | 96 +++++ .../__snapshots__/ssr-sanitized.expected.md | 2 +- .../await-tag/__snapshots__/ssr.expected.md | 2 +- .../src/__tests__/fixtures/await-tag/test.ts | 6 +- .../__snapshots__/.name-cache.json | 16 + .../__snapshots__/csr-sanitized.expected.md | 98 +++++ .../__snapshots__/csr.expected.md | 144 +++++++ .../dom.expected/template.hydrate.js | 31 ++ .../__snapshots__/dom.expected/template.js | 41 ++ .../__snapshots__/html.expected/template.js | 41 ++ .../resume-sanitized.expected.md | 87 +++++ .../__snapshots__/resume.expected.md | 353 ++++++++++++++++++ .../__snapshots__/ssr-sanitized.expected.md | 26 ++ .../__snapshots__/ssr.expected.md | 157 ++++++++ .../await-update-after-resume/template.marko | 11 + .../await-update-after-resume/test.ts | 3 + .../__snapshots__/csr-sanitized.expected.md | 15 +- .../__snapshots__/csr.expected.md | 58 +-- .../dom.expected/template.hydrate.js | 26 +- .../__snapshots__/dom.expected/template.js | 17 +- .../__snapshots__/html.expected/template.js | 8 +- .../resume-sanitized.expected.md | 36 +- .../__snapshots__/resume.expected.md | 140 ++++++- .../__snapshots__/ssr-sanitized.expected.md | 4 +- .../__snapshots__/ssr.expected.md | 21 +- .../await-update-before-resume/template.marko | 9 +- .../await-update-before-resume/test.ts | 4 +- .../resume-sanitized.expected.md | 6 + .../__snapshots__/resume.expected.md | 44 +++ .../__snapshots__/ssr-sanitized.expected.md | 2 +- .../__snapshots__/ssr.expected.md | 2 +- .../catch-single-reject-async/test.ts | 6 +- .../resume-sanitized.expected.md | 6 + .../__snapshots__/resume.expected.md | 31 ++ .../__snapshots__/ssr-sanitized.expected.md | 2 +- .../__snapshots__/ssr.expected.md | 2 +- .../catch-single-success-async/test.ts | 6 +- .../resume-sanitized.expected.md | 12 + .../__snapshots__/resume.expected.md | 89 +++++ .../__snapshots__/ssr-sanitized.expected.md | 2 +- .../__snapshots__/ssr.expected.md | 2 +- .../fixtures/placeholder-single/test.ts | 6 +- .../resume-sanitized.expected.md | 6 + .../__snapshots__/resume.expected.md | 29 ++ .../__snapshots__/ssr-sanitized.expected.md | 2 +- .../__snapshots__/ssr.expected.md | 2 +- .../fixtures/placeholder-skipped/test.ts | 6 +- .../__snapshots__/csr.expected.md | 6 +- .../resume-sanitized.expected.md | 18 + .../__snapshots__/resume.expected.md | 153 ++++++++ .../__snapshots__/ssr-sanitized.expected.md | 2 +- .../__snapshots__/ssr.expected.md | 2 +- .../fixtures/placeholders-nested/test.ts | 6 +- .../__snapshots__/dom.expected/template.js | 1 - .../__snapshots__/html.expected/template.js | 1 - .../script-tag-value-no-scope/template.marko | 1 - .../__snapshots__/.name-cache.json | 21 +- .../dom.expected/template.hydrate.js | 2 +- .../resume-sanitized.expected.md | 10 + .../__snapshots__/resume.expected.md | 76 ++++ .../__snapshots__/ssr-sanitized.expected.md | 2 +- .../__snapshots__/ssr.expected.md | 2 +- .../fixtures/try-effects-async/test.ts | 4 +- .../runtime-tags/src/__tests__/main.test.ts | 170 ++++++--- .../src/__tests__/utils/create-browser.ts | 115 +++--- .../src/__tests__/utils/resolve.ts | 12 +- .../runtime-tags/src/common/accessor.debug.ts | 2 + packages/runtime-tags/src/common/accessor.ts | 2 + packages/runtime-tags/src/common/types.ts | 10 +- packages/runtime-tags/src/dom/control-flow.ts | 253 +++++++------ packages/runtime-tags/src/dom/queue.ts | 67 ++-- packages/runtime-tags/src/dom/resume.ts | 15 +- packages/runtime-tags/src/dom/signals.ts | 4 + .../runtime-tags/src/translator/core/try.ts | 9 + .../src/translator/util/optional.ts | 7 + .../src/translator/util/signals.ts | 78 +++- 195 files changed, 6818 insertions(+), 863 deletions(-) create mode 100644 .changeset/open-facts-obey.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/__snapshots__/.name-cache.json create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/__snapshots__/csr-sanitized.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/__snapshots__/csr.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/__snapshots__/dom.expected/template.hydrate.js create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/__snapshots__/dom.expected/template.js create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/__snapshots__/html.expected/template.js create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/__snapshots__/resume-sanitized.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/__snapshots__/resume.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/__snapshots__/ssr-sanitized.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/__snapshots__/ssr.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/template.marko create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/test.ts create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/.name-cache.json create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/csr-sanitized.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/csr.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/dom.expected/template.hydrate.js create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/dom.expected/template.js create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/html.expected/template.js create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/resume-sanitized.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/resume.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/ssr-sanitized.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/ssr.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/template.marko create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/test.ts create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/.name-cache.json create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/csr-sanitized.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/csr.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/dom.expected/template.hydrate.js create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/dom.expected/template.js create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/html.expected/template.js create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/resume-sanitized.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/resume.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/ssr-sanitized.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/ssr.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-within/template.marko create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure-within/test.ts create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/.name-cache.json create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/csr-sanitized.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/csr.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/dom.expected/template.hydrate.js create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/dom.expected/template.js create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/html.expected/template.js create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/resume-sanitized.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/resume.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/ssr-sanitized.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/ssr.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure/template.marko create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-closure/test.ts create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/__snapshots__/.name-cache.json create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/__snapshots__/csr-sanitized.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/__snapshots__/csr.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/__snapshots__/dom.expected/template.hydrate.js create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/__snapshots__/dom.expected/template.js create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/__snapshots__/html.expected/template.js create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/__snapshots__/resume-sanitized.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/__snapshots__/resume.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/__snapshots__/ssr-sanitized.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/__snapshots__/ssr.expected.md create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/template.marko create mode 100644 packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/test.ts diff --git a/.changeset/open-facts-obey.md b/.changeset/open-facts-obey.md new file mode 100644 index 000000000..bc7ea676c --- /dev/null +++ b/.changeset/open-facts-obey.md @@ -0,0 +1,5 @@ +--- +"@marko/runtime-tags": patch +--- + +Handle updating closures in a pending await and delay running renders in pending scopes diff --git a/.sizes.json b/.sizes.json index 0f31194bb..ed5deb8d1 100644 --- a/.sizes.json +++ b/.sizes.json @@ -7,8 +7,8 @@ { "name": "*", "total": { - "min": 20156, - "brotli": 7726 + "min": 20366, + "brotli": 7839 } }, { @@ -18,27 +18,27 @@ "brotli": 140 }, "runtime": { - "min": 4043, - "brotli": 1820 + "min": 4076, + "brotli": 1832 }, "total": { - "min": 4217, - "brotli": 1960 + "min": 4250, + "brotli": 1972 } }, { "name": "counter 💧", "user": { "min": 96, - "brotli": 89 + "brotli": 87 }, "runtime": { - "min": 2191, - "brotli": 1154 + "min": 2209, + "brotli": 1163 }, "total": { - "min": 2287, - "brotli": 1243 + "min": 2305, + "brotli": 1250 } }, { @@ -48,27 +48,27 @@ "brotli": 398 }, "runtime": { - "min": 7099, - "brotli": 3111 + "min": 7132, + "brotli": 3114 }, "total": { - "min": 7834, - "brotli": 3509 + "min": 7867, + "brotli": 3512 } }, { "name": "comments 💧", "user": { "min": 130, - "brotli": 116 + "brotli": 115 }, "runtime": { - "min": 2343, - "brotli": 1196 + "min": 2361, + "brotli": 1204 }, "total": { - "min": 2473, - "brotli": 1312 + "min": 2491, + "brotli": 1319 } } ] diff --git a/.sizes/comments.ssr/entry.js b/.sizes/comments.ssr/entry.js index 3c2877f6f..789100243 100644 --- a/.sizes/comments.ssr/entry.js +++ b/.sizes/comments.ssr/entry.js @@ -1,4 +1,4 @@ -// size: 130 (min) 116 (brotli) +// size: 130 (min) 115 (brotli) const $for_content__open__script = _script("a0", ($scope) => _on($scope.c, "click", function () { $for_content__open($scope, !$scope.m); diff --git a/.sizes/counter.ssr/entry.js b/.sizes/counter.ssr/entry.js index 8e04ef531..f607b914d 100644 --- a/.sizes/counter.ssr/entry.js +++ b/.sizes/counter.ssr/entry.js @@ -1,4 +1,4 @@ -// size: 96 (min) 89 (brotli) +// size: 96 (min) 87 (brotli) const $clickCount__script = _script("a0", ($scope) => _on($scope.a, "click", function () { $clickCount($scope, $scope.c + 1); diff --git a/.sizes/dom.js b/.sizes/dom.js index 9b3e6a7a8..434a48d29 100644 --- a/.sizes/dom.js +++ b/.sizes/dom.js @@ -1,4 +1,4 @@ -// size: 20156 (min) 7726 (brotli) +// size: 20366 (min) 7839 (brotli) var empty = [], rest = Symbol(); function attrTag(attrs) { @@ -76,7 +76,7 @@ function normalizeDynamicRenderer(value) { if (value) { if ("string" == typeof value) return value; let normalized = value.content || value.default || value; - if ("g" in normalized) return normalized; + if ("f" in normalized) return normalized; } } var decodeAccessor = (num) => @@ -240,7 +240,6 @@ function init(runtimeId = "M") { ( branchId, branch, - childBranch, endedBranches, accessor, singleNode, @@ -270,6 +269,8 @@ function init(runtimeId = "M") { (branch = scopeLookup[branchId] ||= { L: branchId }), ), (branch.F = branch), + (branch.O = render.p?.[branchId]) && + (branch.O.m = render.m), singleNode) ) { for ( @@ -296,8 +297,8 @@ function init(runtimeId = "M") { ? startVisit : parent.insertBefore(new Text(), visit))); for (; i && orphanBranches[--i].L > branchId; ) - (((childBranch = orphanBranches.pop()).N = branch), - (branch.D ||= new Set()).add(childBranch)); + ((orphanBranches[i].N = branch), + (branch.D ||= new Set()).add(orphanBranches.pop())); nextToken(); } (endedBranches && @@ -745,9 +746,9 @@ function subscribeToScopeSet(ownerScope, accessor, scope) { )); } function _closure(...closureSignals) { - let [{ l: ___scopeInstancesAccessor, n: ___signalIndexAccessor }] = + let [{ k: ___scopeInstancesAccessor, l: ___signalIndexAccessor }] = closureSignals; - for (let i = closureSignals.length; i--; ) closureSignals[i].t = i; + for (let i = closureSignals.length; i--; ) closureSignals[i].q = i; return (scope) => { if (scope[___scopeInstancesAccessor]) for (let childScope of scope[___scopeInstancesAccessor]) @@ -759,20 +760,21 @@ function _closure(...closureSignals) { ); }; } -function _closure_get(valueAccessor, fn, getOwnerScope) { +function _closure_get(valueAccessor, fn, getOwnerScope, resumeId) { valueAccessor = decodeAccessor(valueAccessor); let closureSignal = (scope) => { - ((scope[closureSignal.n] = closureSignal.t), + ((scope[closureSignal.l] = closureSignal.q), fn(scope), subscribeToScopeSet( getOwnerScope ? getOwnerScope(scope) : scope._, - closureSignal.l, + closureSignal.k, scope, )); }; return ( - (closureSignal.l = "B" + valueAccessor), - (closureSignal.n = "C" + valueAccessor), + (closureSignal.k = "B" + valueAccessor), + (closureSignal.l = "C" + valueAccessor), + resumeId && _resume(resumeId, closureSignal), closureSignal ); } @@ -891,12 +893,12 @@ function _content(id, template, walks, setup, params, dynamicScopesAccessor) { walk((branch.S = branch.K = new Text()), walks, branch); }; return (owner) => ({ - g: id, + f: id, h: clone, e: owner, j: setup, - a: params, - b: dynamicScopesAccessor, + b: params, + d: dynamicScopesAccessor, }); } function _content_resume( @@ -919,8 +921,8 @@ function _content_closures(renderer, closureFns) { return (owner, closureValues) => { let instance = renderer(owner); return ( - (instance.o = closureSignals), - (instance.u = closureValues), + (instance.n = closureSignals), + (instance.t = closureValues), instance ); }; @@ -1097,13 +1099,13 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) { function _attr_content(scope, nodeAccessor, value) { let content = (function (value) { let renderer = normalizeDynamicRenderer(value); - if (renderer && renderer.g) return renderer; + if (renderer && renderer.f) return renderer; })(value), rendererAccessor = "D" + nodeAccessor; - scope[rendererAccessor] !== (scope[rendererAccessor] = content?.g) && + scope[rendererAccessor] !== (scope[rendererAccessor] = content?.f) && (setConditionalRenderer(scope, nodeAccessor, content, createAndSetupBranch), - content?.b && - subscribeToScopeSet(content.e, content.b, scope["A" + nodeAccessor])); + content?.d && + subscribeToScopeSet(content.e, content.d, scope["A" + nodeAccessor])); } function _attrs_script(scope, nodeAccessor) { let el = scope[nodeAccessor], @@ -1181,132 +1183,127 @@ function toInsertNode(startNode, endNode) { } function _await_promise(nodeAccessor, params) { let promiseAccessor = "L" + (nodeAccessor = decodeAccessor(nodeAccessor)), - branchAccessor = "A" + nodeAccessor, - rendererAccessor = "D" + nodeAccessor; + branchAccessor = "A" + nodeAccessor; return ( _enable_catch(), (scope, promise) => { - let awaitCounter, - renderData, - tryWithPlaceholder = findBranchWithKey(scope, "Q"); - tryWithPlaceholder - ? ((renderData = - self[tryWithPlaceholder.$.runtimeId]?.[ - tryWithPlaceholder.$.renderId - ]), - (awaitCounter = tryWithPlaceholder.O ||= - renderData?.p?.[tryWithPlaceholder.L]), - awaitCounter?.i || - (awaitCounter = tryWithPlaceholder.O = - { - d: 1, - i: 0, - c() { - if (!--awaitCounter.i) { - let placeholderBranch = tryWithPlaceholder.P; - ((tryWithPlaceholder.P = 0), - placeholderBranch && - (placeholderBranch.S.parentNode.insertBefore( - tryWithPlaceholder.S.parentNode, - placeholderBranch.S, - ), - removeAndDestroyBranch(placeholderBranch)), - queueEffect(tryWithPlaceholder, (scope2) => { - let pendingEffects2 = scope2.J; - pendingEffects2 && - ((scope2.J = []), runEffects(pendingEffects2, !0)); - })); - } - }, - }), - placeholderShown.add(pendingEffects), - !scope[promiseAccessor] && - !awaitCounter.i++ && + let awaitBranch = scope[branchAccessor], + tryBranch = findBranchWithKey(scope, "Q") || awaitBranch, + awaitCounter = tryBranch.O; + (awaitCounter?.i || + (awaitCounter = tryBranch.O = + { + i: 0, + c() { + if (--awaitCounter.i) return 1; + if (tryBranch === scope[branchAccessor]) + scope[nodeAccessor].parentNode && + scope[nodeAccessor].replaceWith( + scope[branchAccessor].S.parentNode, + ); + else { + let placeholderBranch = tryBranch.P; + placeholderBranch && + ((tryBranch.P = 0), + placeholderBranch.S.parentNode.insertBefore( + tryBranch.S.parentNode, + placeholderBranch.S, + ), + removeAndDestroyBranch(placeholderBranch)); + } + queueEffect(tryBranch, (scope2) => { + let pendingEffects2 = scope2.J; + pendingEffects2 && + ((scope2.J = []), runEffects(pendingEffects2, 1)); + }); + }, + }), + placeholderShown.add(pendingEffects), + scope[promiseAccessor] || + (awaitBranch && (awaitBranch.W ||= []), + awaitCounter.i++ || requestAnimationFrame( () => awaitCounter.i && runEffects( prepareEffects(() => queueRender( - tryWithPlaceholder, + tryBranch === awaitBranch ? scope : tryBranch, () => { - (insertBranchBefore( - (tryWithPlaceholder.P = createAndSetupBranch( - scope.$, - tryWithPlaceholder.Q, - tryWithPlaceholder._, - tryWithPlaceholder.S.parentNode, - )), - tryWithPlaceholder.S.parentNode, - tryWithPlaceholder.S, - ), - tempDetachBranch(tryWithPlaceholder)); + tryBranch.Q + ? (insertBranchBefore( + (tryBranch.P = createAndSetupBranch( + scope.$, + tryBranch.Q, + tryBranch._, + tryBranch.S.parentNode, + )), + tryBranch.S.parentNode, + tryBranch.S, + ), + tempDetachBranch(tryBranch)) + : awaitBranch.V || + (awaitBranch.S.parentNode.insertBefore( + scope[nodeAccessor], + awaitBranch.S, + ), + tempDetachBranch(tryBranch)); }, -1, ), ), ), - )) - : scope[branchAccessor] && - !scope[promiseAccessor] && - (scope[branchAccessor].S.parentNode.insertBefore( - scope[nodeAccessor], - scope[branchAccessor].S, - ), - tempDetachBranch(scope[branchAccessor])); + ))); let thisPromise = (scope[promiseAccessor] = promise.then( (data) => { - thisPromise === scope[promiseAccessor] && + if (thisPromise === scope[promiseAccessor]) { + let referenceNode = scope[nodeAccessor]; ((scope[promiseAccessor] = 0), - schedule(), - queueRender( - scope, - () => { - if ( - (scope[branchAccessor] - ? tryWithPlaceholder || - scope[nodeAccessor].replaceWith( - scope[branchAccessor].S.parentNode, - ) - : (insertBranchBefore( - (scope[branchAccessor] = createAndSetupBranch( - scope.$, - scope[rendererAccessor], - scope, - scope[nodeAccessor].parentNode, - )), - scope[nodeAccessor].parentNode, - scope[nodeAccessor], - ), - scope[nodeAccessor].remove()), - params?.(scope[branchAccessor], [data]), - awaitCounter && - (placeholderShown.add(pendingEffects), + queueMicrotask(run), + queueRender( + scope, + () => { + ((awaitBranch = scope[branchAccessor]).V && + (pendingScopes.push(awaitBranch), + setupBranch(awaitBranch.V, awaitBranch), + (awaitBranch.V = 0), + insertBranchBefore( + awaitBranch, + scope[nodeAccessor].parentNode, + scope[nodeAccessor], + ), + referenceNode.remove()), + params?.(awaitBranch, [data])); + let pendingRenders2 = awaitBranch.W; + if ( + ((awaitBranch.W = 0), + pendingRenders2?.forEach(queuePendingRender), + placeholderShown.add(pendingEffects), awaitCounter.c(), - !awaitCounter.d)) - ) { - let fnScopes = new Map(), - effects = renderData.m(); - for (let i = 0; i < pendingEffects.length; ) { - let fn = pendingEffects[i++], - scopes = fnScopes.get(fn); - (scopes || fnScopes.set(fn, (scopes = new Set())), - scopes.add(pendingEffects[i++])); + awaitCounter.m) + ) { + let fnScopes = new Map(), + effects = awaitCounter.m(); + for (let i = 0; i < pendingEffects.length; ) { + let fn = pendingEffects[i++], + scopes = fnScopes.get(fn); + (scopes || fnScopes.set(fn, (scopes = new Set())), + scopes.add(pendingEffects[i++])); + } + for (let i = 0; i < effects.length; ) { + let fn = effects[i++], + scope2 = effects[i++]; + fnScopes.get(fn)?.has(scope2) || queueEffect(scope2, fn); + } } - for (let i = 0; i < effects.length; ) { - let fn = effects[i++], - scope2 = effects[i++]; - fnScopes.get(fn)?.has(scope2) || queueEffect(scope2, fn); - } - } - }, - -1, - )); + }, + -1, + )); + } }, (error) => { thisPromise === scope[promiseAccessor] && - (awaitCounter && (awaitCounter.i = 0), - (scope[promiseAccessor] = 0), + ((awaitCounter.i = scope[promiseAccessor] = 0), schedule(), queueRender(scope, renderCatch, -1, error)); }, @@ -1315,10 +1312,16 @@ function _await_promise(nodeAccessor, params) { ); } function _await_content(nodeAccessor, template, walks, setup) { - let rendererAccessor = "D" + decodeAccessor(nodeAccessor), + let branchAccessor = "A" + (nodeAccessor = decodeAccessor(nodeAccessor)), renderer = _content("", template, walks, setup)(); return (scope) => { - scope[rendererAccessor] = renderer; + (((scope[branchAccessor] = createBranch( + scope.$, + renderer, + scope, + scope[nodeAccessor].parentNode, + )).V = renderer), + pendingScopes.pop()); }; } function _try(nodeAccessor, template, walks, setup) { @@ -1356,7 +1359,7 @@ function renderCatch(scope, error) { tryWithCatch.E, createAndSetupBranch, ), - tryWithCatch.E.a?.(owner["A" + tryWithCatch.C], [error])); + tryWithCatch.E.b?.(owner["A" + tryWithCatch.C], [error])); } } function _if(nodeAccessor, ...branchesArgs) { @@ -1390,7 +1393,7 @@ var _dynamic_tag = function (nodeAccessor, getContent, getTagVar, inputIsArgs) { if ( scope[rendererAccessor] !== (scope[rendererAccessor] = - normalizedRenderer?.g || normalizedRenderer) || + normalizedRenderer?.f || normalizedRenderer) || (getContent && !normalizedRenderer && !scope[childScopeAccessor]) ) if ( @@ -1413,18 +1416,18 @@ var _dynamic_tag = function (nodeAccessor, getContent, getTagVar, inputIsArgs) { content, createAndSetupBranch, ), - content.b && + content.d && subscribeToScopeSet( content.e, - content.b, + content.d, scope[childScopeAccessor].Aa, )); } } else - normalizedRenderer?.b && + normalizedRenderer?.d && subscribeToScopeSet( normalizedRenderer.e, - normalizedRenderer.b, + normalizedRenderer.d, scope[childScopeAccessor], ); if (normalizedRenderer) { @@ -1439,14 +1442,14 @@ var _dynamic_tag = function (nodeAccessor, getContent, getTagVar, inputIsArgs) { (childScope.Ia || childScope.Ea) && queueEffect(childScope, dynamicTagScript)); else { - for (let accessor in normalizedRenderer.o) - normalizedRenderer.o[accessor]( + for (let accessor in normalizedRenderer.n) + normalizedRenderer.n[accessor]( childScope, - normalizedRenderer.u[accessor], + normalizedRenderer.t[accessor], ); - if (normalizedRenderer.a) + if (normalizedRenderer.b) if (inputIsArgs) - normalizedRenderer.a( + normalizedRenderer.b( childScope, normalizedRenderer._ ? args[0] : args, ); @@ -1454,7 +1457,7 @@ var _dynamic_tag = function (nodeAccessor, getContent, getTagVar, inputIsArgs) { let inputWithContent = getContent ? { ...args, content: getContent(scope) } : args || {}; - normalizedRenderer.a( + normalizedRenderer.b( childScope, normalizedRenderer._ ? inputWithContent : [inputWithContent], ); @@ -1728,7 +1731,8 @@ function bySecondArg(_item, index) { function byFirstArg(name) { return name; } -var rendering, +var asyncRendersLookup, + rendering, pendingRenders = [], pendingRendersLookup = new Map(), caughtError = new WeakSet(), @@ -1738,48 +1742,53 @@ var rendering, scopeKeyOffset = 1e3; function queueRender(scope, signal, signalKey, value, scopeKey = scope.L) { let key = scopeKey * scopeKeyOffset + signalKey, - existingRender = signalKey >= 0 && pendingRendersLookup.get(key); - if (existingRender) existingRender.q = value; - else { - let render = { f: key, k: scope, x: signal, q: value }, - i = pendingRenders.push(render) - 1; - for (; i; ) { - let parentIndex = (i - 1) >> 1, - parent = pendingRenders[parentIndex]; - if (key - parent.f >= 0) break; - ((pendingRenders[i] = parent), (i = parentIndex)); - } - (signalKey >= 0 && pendingRendersLookup.set(key, render), - (pendingRenders[i] = render)); + render = signalKey >= 0 && pendingRendersLookup.get(key); + render + ? (render.o = value) + : (queuePendingRender((render = { a: key, g: scope, u: signal, o: value })), + signalKey >= 0 && pendingRendersLookup.set(key, render)); +} +function queuePendingRender(render) { + let i = pendingRenders.push(render) - 1; + for (; i; ) { + let parentIndex = (i - 1) >> 1, + parent = pendingRenders[parentIndex]; + if (render.a - parent.a >= 0) break; + ((pendingRenders[i] = parent), (i = parentIndex)); } + pendingRenders[i] = render; } function queueEffect(scope, fn) { pendingEffects.push(fn, scope); } function run() { let effects = pendingEffects; + asyncRendersLookup = new Map(); try { ((rendering = 1), runRenders()); } finally { - ((pendingRenders = []), - (pendingRendersLookup = new Map()), - (pendingEffects = []), - (rendering = 0)); + ((pendingRendersLookup = asyncRendersLookup), + (asyncRendersLookup = rendering = 0), + (pendingRenders = []), + (pendingEffects = [])); } runEffects(effects); } function prepareEffects(fn) { let prevRenders = pendingRenders, - prevRendersLookup = pendingRendersLookup, prevEffects = pendingEffects, + prevLookup = asyncRendersLookup, preparedEffects = (pendingEffects = []); - ((pendingRenders = []), (pendingRendersLookup = new Map())); + ((pendingRenders = []), + (asyncRendersLookup = pendingRendersLookup), + (pendingRendersLookup = new Map())); try { ((rendering = 1), fn(), runRenders()); } finally { ((rendering = 0), + (pendingRendersLookup = asyncRendersLookup), + (asyncRendersLookup = prevLookup), (pendingRenders = prevRenders), - (pendingRendersLookup = prevRendersLookup), (pendingEffects = prevEffects)); } return preparedEffects; @@ -1794,27 +1803,27 @@ function runRenders() { if (render !== item) { let i = 0, mid = pendingRenders.length >> 1, - key = (pendingRenders[0] = item).f; + key = (pendingRenders[0] = item).a; for (; i < mid; ) { let bestChild = 1 + (i << 1), right = bestChild + 1; if ( (right < pendingRenders.length && - pendingRenders[right].f - pendingRenders[bestChild].f < 0 && + pendingRenders[right].a - pendingRenders[bestChild].a < 0 && (bestChild = right), - pendingRenders[bestChild].f - key >= 0) + pendingRenders[bestChild].a - key >= 0) ) break; ((pendingRenders[i] = pendingRenders[bestChild]), (i = bestChild)); } pendingRenders[i] = item; } - render.k.F?.I || runRender(render); + render.g.F?.I || runRender(render); } for (let scope of pendingScopes) scope.H = 0; pendingScopes = []; } -var runRender = (render) => render.x(render.k, render.q), +var runRender = (render) => render.u(render.g, render.o), _enable_catch = () => { ((_enable_catch = () => {}), enableBranches()); let handlePendingTry = (fn, scope, branch) => { @@ -1843,9 +1852,18 @@ var runRender = (render) => render.x(render.k, render.q), )(runEffects)), (runRender = ((runRender2) => (render) => { try { + let branch = render.g.F; + for (; branch; ) { + if (branch.W) + return ( + asyncRendersLookup.set(render.a, render), + branch.W.push(render) + ); + branch = branch.N; + } runRender2(render); } catch (error) { - renderCatch(render.k, error); + renderCatch(render.g, error); } })(runRender))); }; @@ -1934,7 +1952,7 @@ var classIdToBranch = new Map(), renderer.e, document.body, ))), - renderer.a?.(branch, renderer._ ? args[0] : args)); + renderer.b?.(branch, renderer._ ? args[0] : args)); })), created) ) @@ -1972,7 +1990,7 @@ function mount(input = {}, reference, position) { (nextSibling = reference.nextSibling)); } let curValue, - args = this.a, + args = this.b, effects = prepareEffects(() => { ((branch = createBranch($global, this, void 0, parentNode)), (branch.T = (newValue) => { diff --git a/.sizes/name-cache.json b/.sizes/name-cache.json index e0c23ec23..68c3584b0 100644 --- a/.sizes/name-cache.json +++ b/.sizes/name-cache.json @@ -1 +1 @@ -{"vars":{"props":{"$empty":"e","$rest":"t","$attrTag":"n","$attrTags":"r","$attrTagIterator":"o","$_assert_hoist":"i","$forIn":"l","$forOf":"u","$forTo":"f","$forUntil":"a","$_call":"c","$stringifyClassObject":"s","$stringifyStyleObject":"d","$toDelimitedString":"h","$isEventHandler":"p","$getEventHandlerName":"g","$normalizeDynamicRenderer":"v","$decodeAccessor":"b","$toArray":"m","$push":"S","$defaultDelegator":"y","$_on":"A","$createDelegator":"k","$handleDelegated":"C","$stripSpacesAndPunctuation":"N","$nextScopeId":"_","$createScope":"w","$skipScope":"E","$findBranchWithKey":"I","$destroyBranch":"M","$destroyNestedBranches":"x","$removeAndDestroyBranch":"F","$insertBranchBefore":"L","$tempDetachBranch":"T","$walker":"$","$walk":"O","$walkInternal":"D","$branchesEnabled":"K","$isResuming":"G","$registeredValues":"R","$enableBranches":"B","$init":"H","$_resume":"U","$_var_resume":"V","$_el":"P","$_attr_input_checked":"W","$_attr_input_checked_script":"j","$_attr_input_checkedValue":"q","$_attr_input_checkedValue_script":"J","$_attr_input_value":"Q","$_attr_input_value_script":"X","$_attr_select_value":"Z","$_attr_select_value_script":"z","$setSelectOptions":"Y","$_attr_details_or_dialog_open":"ee","$_attr_details_or_dialog_open_script":"te","$inputType":"ne","$setValueAndUpdateSelection":"re","$setCheckboxValue":"oe","$controllableDelegate":"ie","$syncControllable":"le","$handleChange":"ue","$handleFormReset":"fe","$hasValueChanged":"ae","$hasCheckboxChanged":"ce","$hasSelectChanged":"se","$hasFormElementChanged":"de","$normalizeStrProp":"he","$normalizeBoolProp":"pe","$toValueProp":"ge","$isScheduled":"ve","$channel":"be","$parsers":"me","$parseHTML":"Se","$schedule":"ye","$flushAndWaitFrame":"Ae","$triggerMacroTask":"ke","$_let":"Ce","$_const":"Ne","$_or":"_e","$_for_closure":"we","$_if_closure":"Ee","$subscribeToScopeSet":"Ie","$_closure":"Me","$_closure_get":"xe","$_child_setup":"Fe","$_var":"Le","$_return":"Te","$_return_change":"$e","$_var_change":"Oe","$tagIdsByGlobal":"De","$_id":"Ke","$_script":"Ge","$_el_read":"Re","$traverseAllHoisted":"Be","$_hoist":"He","$createBranch":"Ue","$createAndSetupBranch":"Ve","$setupBranch":"Pe","$_content":"We","$_content_resume":"je","$_content_closures":"qe","$cloneCache":"Je","$_attr":"Qe","$setAttribute":"Xe","$_attr_class":"Ze","$_attr_class_items":"ze","$_attr_class_item":"Ye","$_attr_style":"et","$_attr_style_items":"tt","$_attr_style_item":"nt","$_text":"rt","$_text_content":"ot","$_attrs":"it","$_attrs_content":"lt","$hasAttrAlias":"ut","$_attrs_partial":"ft","$_attrs_partial_content":"at","$attrsInternal":"ct","$_attr_content":"st","$_attrs_script":"dt","$_html":"ht","$normalizeAttrValue":"pt","$normalizeString":"gt","$_lifecycle":"vt","$removeChildNodes":"bt","$insertChildNodes":"mt","$toInsertNode":"St","$_await":"yt","$_try":"At","$renderCatch":"kt","$_if":"Ct","$_dynamic_tag":"Nt","$_resume_dynamic_tag":"_t","$dynamicTagScript":"wt","$setConditionalRenderer":"Et","$_for_of":"It","$_for_in":"Mt","$_for_to":"xt","$_for_until":"Ft","$loop":"Lt","$createBranchWithTagNameOrRenderer":"Tt","$bySecondArg":"$t","$byFirstArg":"Ot","$rendering":"Dt","$pendingRenders":"Kt","$pendingRendersLookup":"Gt","$caughtError":"Rt","$placeholderShown":"Bt","$pendingEffects":"Ht","$pendingScopes":"Ut","$scopeKeyOffset":"Vt","$queueRender":"Pt","$queueEffect":"Wt","$run":"jt","$prepareEffects":"qt","$runEffects":"Jt","$runRenders":"Qt","$runRender":"Xt","$_enable_catch":"Zt","$$signalReset":"zt","$$signal":"Yt","$abort":"en","$classIdToBranch":"tn","$compat":"nn","$_template":"rn","$mount":"on","$$clickCount__script":"ta","$$clickCount":"aa","$$setup":"na","$forEach":"ln","$$if_content__setup":"sa","$$if_content__comment_comments":"ca","$$if_content__id":"ia","$$for_content__id":"la","$$for_content__input_path__OR__i":"ma","$$for_content__input_path":"oa","$$for_content__i":"ua","$$for_content__open__script":"ba","$$for_content__open":"ea","$$for_content__setup":"_a","$$for_content__comment_text":"da","$$for_content__if":"fa","$$for_content__comment_comments":"ha","$$for_content__$params":"ja","$$for_content__comment":"pa","$$for":"ga","$$input_comments":"ka","$$input_path":"ra","$isInit":"un","$runResumeEffects":"fn","$_await_promise":"an","$_await_content":"cn","$$input$1":"xa","$_title":"sn","$_to_text":"dn","$_attr_nonce":"hn"}}} \ No newline at end of file +{"vars":{"props":{"$empty":"e","$rest":"t","$attrTag":"n","$attrTags":"r","$attrTagIterator":"i","$_assert_hoist":"o","$forIn":"l","$forOf":"u","$forTo":"f","$forUntil":"a","$_call":"c","$stringifyClassObject":"s","$stringifyStyleObject":"d","$toDelimitedString":"h","$isEventHandler":"p","$getEventHandlerName":"g","$normalizeDynamicRenderer":"v","$decodeAccessor":"b","$toArray":"m","$push":"S","$defaultDelegator":"y","$_on":"A","$createDelegator":"N","$handleDelegated":"k","$stripSpacesAndPunctuation":"C","$nextScopeId":"_","$createScope":"w","$skipScope":"E","$findBranchWithKey":"T","$destroyBranch":"I","$destroyNestedBranches":"F","$removeAndDestroyBranch":"M","$insertBranchBefore":"x","$tempDetachBranch":"L","$walker":"$","$walk":"O","$walkInternal":"D","$branchesEnabled":"K","$isResuming":"V","$registeredValues":"G","$enableBranches":"R","$init":"B","$runResumeEffects":"H","$_resume":"U","$_var_resume":"q","$_el":"P","$_attr_input_checked":"j","$_attr_input_checked_script":"W","$_attr_input_checkedValue":"J","$_attr_input_checkedValue_script":"Q","$_attr_input_value":"X","$_attr_input_value_script":"Z","$_attr_select_value":"z","$_attr_select_value_script":"Y","$setSelectOptions":"ee","$_attr_details_or_dialog_open":"te","$_attr_details_or_dialog_open_script":"ne","$inputType":"re","$setValueAndUpdateSelection":"ie","$setCheckboxValue":"oe","$controllableDelegate":"le","$syncControllable":"ue","$handleChange":"fe","$handleFormReset":"ae","$hasValueChanged":"ce","$hasCheckboxChanged":"se","$hasSelectChanged":"de","$hasFormElementChanged":"he","$normalizeStrProp":"pe","$normalizeBoolProp":"ge","$toValueProp":"ve","$isScheduled":"be","$channel":"me","$parsers":"Se","$parseHTML":"ye","$schedule":"Ae","$flushAndWaitFrame":"Ne","$triggerMacroTask":"ke","$_let":"Ce","$_const":"_e","$_or":"we","$_for_closure":"Ee","$_if_closure":"Te","$subscribeToScopeSet":"Ie","$_closure":"Fe","$_closure_get":"Me","$_child_setup":"xe","$_var":"Le","$_return":"$e","$_return_change":"Oe","$_var_change":"De","$tagIdsByGlobal":"Ke","$_id":"Ve","$_script":"Ge","$_el_read":"Re","$traverseAllHoisted":"Be","$_hoist":"He","$createBranch":"Ue","$createAndSetupBranch":"qe","$setupBranch":"Pe","$_content":"je","$_content_resume":"We","$_content_closures":"Je","$cloneCache":"Qe","$_to_text":"Xe","$_attr":"Ze","$setAttribute":"ze","$_attr_class":"Ye","$_attr_class_items":"et","$_attr_class_item":"tt","$_attr_style":"nt","$_attr_style_items":"rt","$_attr_style_item":"it","$_text":"ot","$_text_content":"lt","$_attrs":"ut","$_attrs_content":"ft","$hasAttrAlias":"at","$_attrs_partial":"ct","$_attrs_partial_content":"st","$attrsInternal":"dt","$_attr_content":"ht","$_attrs_script":"pt","$_html":"gt","$normalizeAttrValue":"vt","$normalizeString":"bt","$_lifecycle":"mt","$removeChildNodes":"St","$insertChildNodes":"yt","$toInsertNode":"At","$_await_promise":"Nt","$_await_content":"kt","$_try":"Ct","$renderCatch":"_t","$_if":"wt","$_dynamic_tag":"Et","$_resume_dynamic_tag":"Tt","$dynamicTagScript":"It","$setConditionalRenderer":"Ft","$_for_of":"Mt","$_for_in":"xt","$_for_to":"Lt","$_for_until":"$t","$loop":"Ot","$createBranchWithTagNameOrRenderer":"Dt","$bySecondArg":"Kt","$byFirstArg":"Vt","$asyncRendersLookup":"Gt","$rendering":"Rt","$pendingRenders":"Bt","$pendingRendersLookup":"Ht","$caughtError":"Ut","$placeholderShown":"qt","$pendingEffects":"Pt","$pendingScopes":"jt","$scopeKeyOffset":"Wt","$queueRender":"Jt","$queuePendingRender":"Qt","$queueEffect":"Xt","$run":"Zt","$prepareEffects":"zt","$runEffects":"Yt","$runRenders":"en","$runRender":"tn","$_enable_catch":"nn","$$signalReset":"rn","$$signal":"on","$abort":"ln","$classIdToBranch":"un","$compat":"fn","$_template":"an","$mount":"cn","$$clickCount__script":"ta","$$clickCount":"aa","$$setup":"na","$forEach":"sn","$$if_content__setup":"sa","$$if_content__comment_comments":"ia","$$if_content__id":"ca","$$for_content__id":"la","$$for_content__input_path__OR__i":"ma","$$for_content__input_path":"oa","$$for_content__i":"ua","$$for_content__open__script":"ba","$$for_content__open":"ea","$$for_content__setup":"_a","$$for_content__comment_text":"da","$$for_content__if":"fa","$$for_content__comment_comments":"ha","$$for_content__$params":"ja","$$for_content__comment":"pa","$$for":"ra","$$input_comments":"ga","$$input_path":"ka","$_attr_nonce":"dn"}}} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 88bb86ec4..56c6552b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,7 +51,7 @@ "lint-staged": "^16.2.6", "mocha": "^11.7.5", "mocha-autotest": "^1.1.3", - "mocha-snap": "^5.0.0", + "mocha-snap": "^5.0.1", "prettier": "^3.6.2", "prettier-plugin-packagejson": "^2.5.19", "pretty-format": "^30.2.0", @@ -7706,9 +7706,9 @@ } }, "node_modules/mocha-snap": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/mocha-snap/-/mocha-snap-5.0.0.tgz", - "integrity": "sha512-tl0iQb2zkN1pE1vzQSSnuEyR8GkB/uECMdvK5dcXPEjC316K4bzNd36TgLEXadMyQDhy0ny6FZxChm6rJAs9+Q==", + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/mocha-snap/-/mocha-snap-5.0.1.tgz", + "integrity": "sha512-uEBt7J6qDm9ACi0+RhW1VkR8ER9GqwTW3iKE/O2Q07u8jxVentb7OfpAnWRnDmbP//K517olc7VlX1GG52Lc2w==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 70370b99e..1de6deee6 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "lint-staged": "^16.2.6", "mocha": "^11.7.5", "mocha-autotest": "^1.1.3", - "mocha-snap": "^5.0.0", + "mocha-snap": "^5.0.1", "prettier": "^3.6.2", "prettier-plugin-packagejson": "^2.5.19", "pretty-format": "^30.2.0", diff --git a/packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/csr-sanitized.expected.md b/packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/csr-sanitized.expected.md index 024ec7e61..eeba312ea 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/csr-sanitized.expected.md +++ b/packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/csr-sanitized.expected.md @@ -6,6 +6,16 @@ ``` +# Render ASYNC +```html +
+ LOADING... +
+``` + + # Render ASYNC ```html
+
+
+ LOADING... +
+
+
+``` + + # Render ASYNC ```html
+ +
+ LOADING... +
+ + +``` + +# Mutations +``` +INSERT div/#text +REMOVE #document-fragment/#comment0 after div/#text +REMOVE #document-fragment/#text after div/#text +REMOVE #document-fragment/#comment1 after div/#text +``` + # Render ASYNC ```html @@ -43,8 +64,8 @@ INSERT #comment0, #comment1, div, #comment2, #comment3 # Mutations ``` -INSERT div/#comment1, div/#comment2, #text, div/#comment3, div/#comment4 -REMOVE #text after div/#comment4 +INSERT div/#comment0, div/#comment1, div/#comment2, #text, div/#comment3, div/#comment4, div/#comment5 +REMOVE #text after div/#comment5 INSERT div/div REMOVE #text after div/div UPDATE div/div[data-level] null => "3" @@ -128,6 +149,47 @@ INSERT div/div/div/#comment0, div/div/div/#text, div/div/div/#comment1 REMOVE #text after div/div/div/#comment1 ``` +# Render ASYNC +```html + + +
+ + + +
+ + + +
+ LOADING... +
+ + + +
+ + + +
+ + +``` + +# Mutations +``` +INSERT div/div/div/#text +REMOVE #document-fragment/#comment0 after div/div/div/#text +REMOVE #document-fragment/#text after div/div/div/#text +REMOVE #document-fragment/#comment1 after div/div/div/#text +``` + # Render ASYNC ```html @@ -174,8 +236,8 @@ REMOVE #text after div/div/div/#comment1 # Mutations ``` -INSERT div/div/div/#comment1, div/div/div/#comment2, #text, div/div/div/#comment3, div/div/div/#comment4 -REMOVE #text after div/div/div/#comment4 +INSERT div/div/div/#comment0, div/div/div/#comment1, div/div/div/#comment2, #text, div/div/div/#comment3, div/div/div/#comment4, div/div/div/#comment5 +REMOVE #text after div/div/div/#comment5 INSERT div/div/div/div REMOVE #text after div/div/div/div UPDATE div/div/div/div[data-level] null => "1" diff --git a/packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/dom.expected/tags/recurse.js b/packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/dom.expected/tags/recurse.js index ad8023855..05c15460c 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/dom.expected/tags/recurse.js +++ b/packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/dom.expected/tags/recurse.js @@ -1,6 +1,7 @@ export const $template = ""; export const $walks = /* over(1), replace, over(2) */"b%c"; export const $setup = () => {}; +import { resolveAfter } from "../../../utils/resolve"; import * as _ from "@marko/runtime-tags/debug/dom"; _._enable_catch(); const $placeholder_content = _._content_resume("__tests__/tags/recurse.marko_4_content", "LOADING...", /* over(1) */"b"); @@ -8,12 +9,12 @@ const $await_content__setup = $scope => { $setup($scope["#childScope/0"]); $await_content__input_level($scope); }; -const $await_content__input_level = /* @__PURE__ */_._closure_get("input_level", $scope => $input_level($scope["#childScope/0"], $scope._._._.input_level - 1), $scope => $scope._._._); +const $await_content__input_level = /* @__PURE__ */_._closure_get("input_level", $scope => $input_level($scope["#childScope/0"], $scope._._._.input_level - 1), $scope => $scope._._._, "__tests__/tags/recurse.marko_3_input_level"); const $await_content = /* @__PURE__ */_._await_content("#text/0", `${$template}`, /* over(1), , over(1) */`b/${$walks}&b`, $await_content__setup); const $try_content__await_promise = /* @__PURE__ */_._await_promise("#text/0"); const $try_content__setup = $scope => { $await_content($scope); - $try_content__await_promise($scope, new Promise(setImmediate)); + $try_content__await_promise($scope, resolveAfter(0, 1)); }; const $if_content__input_level = /* @__PURE__ */_._if_closure("#text/0", 0, $scope => _._attr($scope["#div/0"], "data-level", $scope._.input_level)); const $if_content__try = /* @__PURE__ */_._try("#text/1", "", /* over(1), replace, over(2) */"b%c", $try_content__setup); diff --git a/packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/html.expected/tags/recurse.js b/packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/html.expected/tags/recurse.js index 0ffc21a85..b19826ea1 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/html.expected/tags/recurse.js +++ b/packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/html.expected/tags/recurse.js @@ -1,3 +1,4 @@ +import { resolveAfter } from "../../../utils/resolve"; import * as _ from "@marko/runtime-tags/debug/html"; const $content = input => { const $scope0_reason = _._scope_reason(); @@ -10,23 +11,24 @@ const $content = input => { _._try($scope1_id, "#text/1", _._content_resume("__tests__/tags/recurse.marko_2_content", () => { const $scope2_id = _._scope_id(); const $scope2_reason = _._scope_reason(); - _._await($scope2_id, "#text/0", new Promise(setImmediate), () => { + _._await($scope2_id, "#text/0", resolveAfter(0, 1), () => { const $scope3_id = _._scope_id(); + _._serialize_if($scope0_reason, /* input.level */0) && _._script($scope3_id, "__tests__/tags/recurse.marko_3_input_level"); const $childScope = _._peek_scope_id(); _._set_serialize_reason(_._serialize_guard($scope0_reason, /* input.level */0)); $content({ level: input.level - 1 }); - _._serialize_if($scope0_reason, /* input.level */0) && _._subscribe($input_level__closures, _._scope($scope3_id, { + _._serialize_if($scope0_reason, /* input.level */0) && _._scope($scope3_id, { _: _._scope_with_id($scope2_id), "#childScope/0": _._serialize_if($scope0_reason, /* input.level */0) && _._existing_scope($childScope), "ClosureSignalIndex:input_level": _._serialize_if($scope0_reason, /* input.level */0) && 0 - }, "__tests__/tags/recurse.marko", "5:7")); + }, "__tests__/tags/recurse.marko", "6:7"); _._resume_branch($scope3_id); }, _._serialize_guard($scope0_reason, /* input.level */0)); _._serialize_if($scope0_reason, /* input.level */0) && _._scope($scope2_id, { _: _._scope_with_id($scope1_id) - }, "__tests__/tags/recurse.marko", "3:5"); + }, "__tests__/tags/recurse.marko", "4:5"); }, $scope1_id), { placeholder: _.attrTag({ content: _._content_resume("__tests__/tags/recurse.marko_4_content", () => { @@ -38,7 +40,7 @@ const $content = input => { _._html(`
${_._el_resume($scope1_id, "#div/0", _._serialize_guard($scope0_reason, /* input.level */0))}`); _._serialize_if($scope0_reason, /* input.level */0) && _._scope($scope1_id, { _: _._scope_with_id($scope0_id) - }, "__tests__/tags/recurse.marko", "1:1"); + }, "__tests__/tags/recurse.marko", "2:1"); return 0; } }, $scope0_id, "#text/0", _._serialize_guard($scope0_reason, /* input.level */0), _._serialize_guard($scope0_reason, /* input.level */0), _._serialize_guard($scope0_reason, /* input.level */0), 0, 1); diff --git a/packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/resume-sanitized.expected.md b/packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/resume-sanitized.expected.md index 2e38a8c04..391c57ff3 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/resume-sanitized.expected.md +++ b/packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/resume-sanitized.expected.md @@ -1,5 +1,69 @@ # Render ```html +
+ LOADING... +
+``` + + +# Render FLUSH +```html +
+
+ LOADING... +
+
+``` + + +# Render FLUSH +```html +
+
+
+ LOADING... +
+
+
+``` + + +# Render FLUSH +```html +
+
+
+
+ LOADING... +
+
+
+
+``` + + +# Render FLUSH +```html
diff --git a/packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/resume.expected.md b/packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/resume.expected.md index eb71446e9..8ac69b1a0 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/resume.expected.md +++ b/packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/resume.expected.md @@ -1,5 +1,202 @@ # Render ```html + + + + + +
+ + + LOADING... + + +
+ + + +``` + +# Mutations +``` +INSERT html/body/div/#text1 +``` + +# Render FLUSH +```html + + + + + +
+ +
+ + + LOADING... + + +
+ +
+ + + + +``` + +# Mutations +``` +INSERT t +INSERT html/body/div/div +INSERT html/body/div/div/#comment0 +INSERT html/body/div/div/#comment1 +INSERT html/body/div/div/#text0 +INSERT html/body/div/div/#comment2 +INSERT html/body/div/div/#comment3 +INSERT t +INSERT t/#comment +REMOVE t after html/body/script0 +REMOVE #text after #comment +REMOVE #comment after html/body/div/#comment0 +REMOVE #comment after html/body/div/#comment0 +INSERT html/body/div/div +REMOVE t after html/body/script0 +INSERT html/body/div/div/#text1 +INSERT html/body/script1 +``` + +# Render FLUSH +```html + + + + + +
+ +
+ +
+ + + LOADING... + + +
+ +
+ +
+ + + + + +``` + +# Mutations +``` +INSERT t +INSERT html/body/div/div/div +INSERT html/body/div/div/div/#comment0 +INSERT html/body/div/div/div/#comment1 +INSERT html/body/div/div/div/#text0 +INSERT html/body/div/div/div/#comment2 +INSERT html/body/div/div/div/#comment3 +INSERT t +INSERT t/#comment +REMOVE t after html/body/script1 +REMOVE #text after #comment +REMOVE #comment after html/body/div/div/#comment0 +REMOVE #comment after html/body/div/div/#comment0 +INSERT html/body/div/div/div +REMOVE t after html/body/script1 +INSERT html/body/div/div/div/#text1 +INSERT html/body/script2 +``` + +# Render FLUSH +```html + + +
+ +
+ +
+ +
+ + +
+ +
+ +
+ +
+ + + + +
LOADING...
``` # Write ```html -
LOADING...
 +
LOADING...
 ``` # Write ```html - +
LOADING...
 +``` + +# Write +```html +
LOADING...
 +``` + +# Write +```html + ``` # Render ASYNC @@ -28,15 +38,9 @@ data-level="4" > -
- - - LOADING... - - -
+ + LOADING... +
@@ -66,13 +65,10 @@ INSERT html/head INSERT html/body INSERT html/body/div INSERT html/body/div/#comment0 -INSERT html/body/div/div -INSERT html/body/div/div/#comment0 -INSERT html/body/div/div/#comment1 -INSERT html/body/div/div/#text -INSERT html/body/div/div/#comment2 -INSERT html/body/div/div/#comment3 INSERT html/body/div/#comment1 +INSERT html/body/div/#text +INSERT html/body/div/#comment2 +INSERT html/body/div/#comment3 INSERT html/head/style INSERT html/head/style/#text INSERT t @@ -102,22 +98,10 @@ INSERT html/body/script data-level="3" > -
- -
- - - LOADING... - - -
- -
- + + LOADING... + + @@ -128,27 +112,102 @@ INSERT html/body/script "#PlaceholderContent": _.c = {} }], _.a["#PlaceholderContent"] = _._[ "__tests__/tags/recurse.marko_4_content" - ](_.c), _.b), _ => (_.e = [3, _.d = { + ](_.c), _.b)]; + REORDER_RUNTIME(M._); + M._.w() + + + + +``` + +# Mutations +``` +INSERT t +INSERT html/body/div/div +INSERT html/body/div/div/#comment0 +INSERT html/body/div/div/#comment1 +INSERT html/body/div/div/#text +INSERT html/body/div/div/#comment2 +INSERT html/body/div/div/#comment3 +INSERT t +INSERT t/#comment +REMOVE t after html/body/script0 +REMOVE #text after #comment +REMOVE #comment after html/body/div/#comment0 +REMOVE #comment after html/body/div/#comment0 +INSERT html/body/div/div +REMOVE t after html/body/script0 +INSERT html/body/script1 +``` + +# Render ASYNC +```html + + + + + +
+ +
+ +
+ + + LOADING... + + +
+ +
+ +
+ + @@ -160,22 +219,19 @@ INSERT html/body/script INSERT t INSERT html/body/div/div/div INSERT html/body/div/div/div/#comment0 -INSERT html/body/div/div/div/div -INSERT html/body/div/div/div/div/#comment0 -INSERT html/body/div/div/div/div/#comment1 -INSERT html/body/div/div/div/div/#text -INSERT html/body/div/div/div/div/#comment2 -INSERT html/body/div/div/div/div/#comment3 INSERT html/body/div/div/div/#comment1 +INSERT html/body/div/div/div/#text +INSERT html/body/div/div/div/#comment2 +INSERT html/body/div/div/div/#comment3 INSERT t INSERT t/#comment -REMOVE t after html/body/script0 +REMOVE t after html/body/script1 REMOVE #text after #comment REMOVE #comment after html/body/div/div/#comment0 REMOVE #comment after html/body/div/div/#comment0 INSERT html/body/div/div/div -REMOVE t after html/body/script0 -INSERT html/body/script1 +REMOVE t after html/body/script1 +INSERT html/body/script2 ``` # Render ASYNC @@ -205,11 +261,14 @@ INSERT html/body/script1 data-level="1" > - + + LOADING... + + - + - + @@ -220,13 +279,17 @@ INSERT html/body/script1 "#PlaceholderContent": _.c = {} }], _.a["#PlaceholderContent"] = _._[ "__tests__/tags/recurse.marko_4_content" - ](_.c), _.b), _ => (_.e = [3, _.d = { + ](_.c), _.b)]; + REORDER_RUNTIME(M._); + M._.w() + + + + + +``` + +# Mutations +``` +INSERT t +INSERT html/body/div/div/div/div +INSERT html/body/div/div/div/div/#comment0 +INSERT html/body/div/div/div/div/#comment1 +INSERT html/body/div/div/div/div/#text +INSERT html/body/div/div/div/div/#comment2 +INSERT html/body/div/div/div/div/#comment3 +INSERT t +INSERT t/#comment +REMOVE t after html/body/script2 +REMOVE #text after #comment +REMOVE #comment after html/body/div/div/div/#comment0 +REMOVE #comment after html/body/div/div/div/#comment0 +INSERT html/body/div/div/div/div +REMOVE t after html/body/script2 +INSERT html/body/script3 +``` + +# Render End +```html + + + + + +
+ +
+ +
+ +
+ + +
+ +
+ +
+ +
+ + + + +

+ + +``` + + +# Render FLUSH +```html @@ -84,12 +112,160 @@ ``` +# Mutations +``` +INSERT html/body/p0/#comment2 +INSERT html/body/p0/#text3 +INSERT html/body/p0/#comment3 +INSERT html/body/p0/#comment4 +INSERT html/body/p1 +INSERT html/body/p1/#text0 +INSERT html/body/p1/#comment0 +INSERT html/body/p1/#text1 +INSERT html/body/p1/#comment1 +INSERT html/body/p1/#text2 +INSERT html/body/p1/#comment2 +INSERT html/body/p1/#text3 +INSERT html/body/p1/#comment3 +INSERT html/body/p1/#comment4 +INSERT html/body/p2 +INSERT html/body/p2/#text0 +INSERT html/body/p2/#comment0 +INSERT html/body/p2/#text1 +INSERT html/body/p2/#comment1 +INSERT html/body/p2/#text2 +INSERT html/body/p2/#comment2 +INSERT html/body/p2/#text3 +INSERT html/body/p2/#comment3 +INSERT html/body/p2/#comment4 +INSERT html/body/p3 +INSERT html/body/p3/#text0 +INSERT html/body/p3/#comment0 +INSERT html/body/p3/#text1 +INSERT html/body/p3/#comment1 +INSERT html/body/p3/#text2 +INSERT html/body/p3/#comment2 +INSERT html/body/p3/#text3 +INSERT html/body/p3/#comment3 +INSERT html/body/p3/#comment4 +INSERT html/body/p4 +INSERT html/body/p4/#text0 +INSERT html/body/p4/#comment0 +INSERT html/body/p4/#text1 +INSERT html/body/p4/#comment1 +INSERT html/body/p4/#text2 +INSERT html/body/p4/#comment2 +INSERT html/body/p4/#text3 +INSERT html/body/p4/#comment3 +INSERT html/body/p4/#comment4 +INSERT html/body/p0/#text4 +INSERT html/body/p1/#text4 +INSERT html/body/p2/#text4 +INSERT html/body/p3/#text4 +INSERT html/body/p4/#text4 +INSERT html/body/script +``` # Render ```js container.querySelector("button").click(); ``` ```html + + + + + +

+ 1 * + + 3 + + = + + + 2 + + +

+

+ 2 * + + 3 + + = + + 4 + + +

+

+ 3 * + + 3 + + = + + 6 + + +

+

+ 4 * + + 3 + + = + + 8 + + +

+

+ 5 * + + 3 + + = + + 10 + + +

+ + + +``` + +# Mutations +``` +UPDATE html/body/p0/#text1 "2" => "3" +UPDATE html/body/p1/#text1 "2" => "3" +UPDATE html/body/p2/#text1 "2" => "3" +UPDATE html/body/p3/#text1 "2" => "3" +UPDATE html/body/p4/#text1 "2" => "3" +``` + +# Render ASYNC +```html @@ -161,11 +337,6 @@ container.querySelector("button").click(); # Mutations ``` -UPDATE html/body/p0/#text1 "2" => "3" -UPDATE html/body/p1/#text1 "2" => "3" -UPDATE html/body/p2/#text1 "2" => "3" -UPDATE html/body/p3/#text1 "2" => "3" -UPDATE html/body/p4/#text1 "2" => "3" REMOVE html/body/p0/#comment2 after #document-fragment/#text1 INSERT html/body/p0/#comment2 REMOVE #document-fragment/#comment0 after html/body/p0/#comment2 @@ -283,17 +454,12 @@ REMOVE #document-fragment/#text1 after html/body/p4/#comment2 ``` REMOVE #comment after html/body/p0/script INSERT html/body/p0/#comment2, html/body/p0/#text3, html/body/p0/#comment3, html/body/p0/#text4 -UPDATE html/body/p0/#text3 "2" => "3" REMOVE #comment after html/body/p4/#text2 INSERT html/body/p4/#comment2, html/body/p4/#text3, html/body/p4/#comment3, html/body/p4/#text4 -UPDATE html/body/p4/#text3 "10" => "15" REMOVE #comment after html/body/p3/#text2 INSERT html/body/p3/#comment2, html/body/p3/#text3, html/body/p3/#comment3, html/body/p3/#text4 -UPDATE html/body/p3/#text3 "8" => "12" REMOVE #comment after html/body/p2/#text2 INSERT html/body/p2/#comment2, html/body/p2/#text3, html/body/p2/#comment3, html/body/p2/#text4 -UPDATE html/body/p2/#text3 "6" => "9" REMOVE #comment after html/body/p1/#text2 INSERT html/body/p1/#comment2, html/body/p1/#text3, html/body/p1/#comment3, html/body/p1/#text4 -UPDATE html/body/p1/#text3 "4" => "6" ``` \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/async-multi-resolve-in-order-and-update/__snapshots__/ssr-sanitized.expected.md b/packages/runtime-tags/src/__tests__/fixtures/async-multi-resolve-in-order-and-update/__snapshots__/ssr-sanitized.expected.md index 896849d7b..0768ee59b 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/async-multi-resolve-in-order-and-update/__snapshots__/ssr-sanitized.expected.md +++ b/packages/runtime-tags/src/__tests__/fixtures/async-multi-resolve-in-order-and-update/__snapshots__/ssr-sanitized.expected.md @@ -9,7 +9,7 @@ ``` -# Render ASYNC +# Render End ```html + + + + LOADING... + + + + + +``` + +# Mutations +``` +INSERT html/body/#text1 +``` + +# Render FLUSH +```html + + + + + loading... + + + + + +``` + +# Mutations +``` +INSERT html/body/#text1 +``` + +# Render FLUSH +```html + + + + + + + + 1 + + + + + + +``` + +# Mutations +``` +INSERT t +INSERT html/body/span +INSERT html/body/span/#text +REMOVE t after html/body/script0 +REMOVE #text after #comment +REMOVE #comment after html/body/#comment0 +REMOVE #comment after html/body/#comment0 +INSERT html/body/span +INSERT html/body/script1 +``` \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/ssr-sanitized.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/ssr-sanitized.expected.md new file mode 100644 index 000000000..4828abc61 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/ssr-sanitized.expected.md @@ -0,0 +1,12 @@ +# Render ASYNC +```html +loading... +``` + + +# Render End +```html + + 1 + +``` diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/ssr.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/ssr.expected.md new file mode 100644 index 000000000..f744de3b0 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/ssr.expected.md @@ -0,0 +1,107 @@ +# Write +```html + loading... +``` + +# Write +```html + 1 +``` + +# Render ASYNC +```html + + + + + + + + loading... + + + + + +``` + +# Mutations +``` +INSERT html +INSERT html/head +INSERT html/body +INSERT html/body/#comment0 +INSERT html/body/#comment1 +INSERT html/body/#text +INSERT html/body/#comment2 +INSERT html/body/#comment3 +INSERT html/head/style +INSERT html/head/style/#text +INSERT t +INSERT t/#comment +REMOVE html/head/style after html/body/#comment3 +INSERT html/head/style +REMOVE t after html/body/#comment3 +INSERT html/body/script +``` + +# Render End +```html + + + + + + + + 1 + + + + + + +``` + +# Mutations +``` +INSERT t +INSERT html/body/span +INSERT html/body/span/#text +REMOVE t after html/body/script0 +REMOVE #text after #comment +REMOVE #comment after html/body/#comment0 +REMOVE #comment after html/body/#comment0 +INSERT html/body/span +INSERT html/body/script1 +``` \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/template.marko b/packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/template.marko new file mode 100644 index 000000000..cdd884703 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/template.marko @@ -0,0 +1,6 @@ +import { resolveAfter } from "../../utils/resolve"; +let/value=1 +try + @placeholder -- loading... + await=resolveAfter(0, 1) + span -- ${value} \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/test.ts b/packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/test.ts new file mode 100644 index 000000000..60ebc0521 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/test.ts @@ -0,0 +1,3 @@ +import { flush, wait } from "../../utils/resolve"; + +export const steps = [{}, flush, wait(1)]; diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/.name-cache.json b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/.name-cache.json new file mode 100644 index 000000000..7438a5bff --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/.name-cache.json @@ -0,0 +1,13 @@ +{ + "vars": { + "props": { + "$_": "t", + "$init": "a", + "$$if_content__value": "o", + "$$if_content__setup": "_", + "$$await_content__if": "n", + "$$await_content__value__script": "e", + "$$await_content__value": "m" + } + } +} diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/csr-sanitized.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/csr-sanitized.expected.md new file mode 100644 index 000000000..99c68aed2 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/csr-sanitized.expected.md @@ -0,0 +1,46 @@ +# Render + + +# Render ASYNC +```html +loading... +``` + + +# Render ASYNC +```html + + + 1 + +``` + + +# Render +```js +container.querySelector("button").click(); +``` +```html + + + 2 + +``` + + +# Render +```js +container.querySelector("button").click(); +``` +```html + + + 3 + +``` diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/csr.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/csr.expected.md new file mode 100644 index 000000000..7de1d4509 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/csr.expected.md @@ -0,0 +1,100 @@ +# Render +```html + + + + +``` + +# Mutations +``` +INSERT #comment0, #comment1, #text, #comment2, #comment3 +``` + +# Render ASYNC +```html + +loading... + +``` + +# Mutations +``` +INSERT #text +REMOVE #document-fragment/#comment0 after #text +REMOVE #document-fragment/#text after #text +REMOVE #document-fragment/#comment1 after #text +``` + +# Render ASYNC +```html + + + + + 1 + + + + +``` + +# Mutations +``` +INSERT #comment1, button, #text, #comment2, #comment3 +REMOVE #text after #comment3 +UPDATE button/#text " " => "1" +INSERT span +REMOVE #text after span +UPDATE span/#text " " => "1" +``` + +# Render +```js +container.querySelector("button").click(); +``` +```html + + + + + 2 + + + + +``` + +# Mutations +``` +UPDATE button/#text "1" => "2" +UPDATE span/#text "1" => "2" +``` + +# Render +```js +container.querySelector("button").click(); +``` +```html + + + + + 3 + + + + +``` + +# Mutations +``` +UPDATE button/#text "2" => "3" +UPDATE span/#text "2" => "3" +``` \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/dom.expected/template.hydrate.js b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/dom.expected/template.hydrate.js new file mode 100644 index 000000000..b1bd1a783 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/dom.expected/template.hydrate.js @@ -0,0 +1,19 @@ +// size: 274 (min) 180 (brotli) +_._enable_catch(); +const $if_content__value = _._if_closure(2, 0, ($scope) => + _._text($scope.a, $scope._.d), + ), + $if_content__setup = $if_content__value, + $await_content__if = _._if(2, " ", "D l", $if_content__setup), + $await_content__value__script = _._script("a0", ($scope) => + _._on($scope.a, "click", function () { + $await_content__value($scope, $scope.d + 1); + }), + ), + $await_content__value = _._let(3, ($scope) => { + (_._text($scope.b, $scope.d), + $await_content__if($scope, $scope.d > 0 ? 0 : 1), + $if_content__value($scope), + $await_content__value__script($scope)); + }); +(_._content_resume("a1", "loading...", "b"), init()); diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/dom.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/dom.expected/template.js new file mode 100644 index 000000000..c0321803c --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/dom.expected/template.js @@ -0,0 +1,37 @@ +export const $template = ""; +export const $walks = /* over(1), replace, over(2) */"b%c"; +import { resolveAfter } from "../../utils/resolve"; +import * as _ from "@marko/runtime-tags/debug/dom"; +_._enable_catch(); +const $if_content__value = /* @__PURE__ */_._if_closure("#text/2", 0, $scope => _._text($scope["#text/0"], $scope._.value)); +const $if_content__setup = $if_content__value; +const $await_content__if = /* @__PURE__ */_._if("#text/2", " ", /* next(1), get, out(1) */"D l", $if_content__setup); +const $await_content__value__script = _._script("__tests__/template.marko_3_value", $scope => _._on($scope["#button/0"], "click", function () { + $await_content__value($scope, $scope.value + 1); +})); +const $await_content__value = /* @__PURE__ */_._let("value/3", $scope => { + debugger; + _._text($scope["#text/1"], $scope.value); + $await_content__if($scope, $scope.value > 0 ? 0 : 1); + $if_content__value($scope); + $await_content__value__script($scope); +}); +const $await_content__setup = $scope => { + $await_content__value($scope, 1); +}; +const $placeholder_content = _._content_resume("__tests__/template.marko_2_content", "loading...", /* over(1) */"b"); +const $await_content = /* @__PURE__ */_._await_content("#text/0", "", /* get, next(1), get, out(1), replace, over(2) */" D l%c", $await_content__setup); +const $try_content__await_promise = /* @__PURE__ */_._await_promise("#text/0"); +const $try_content__setup = $scope => { + $await_content($scope); + $try_content__await_promise($scope, resolveAfter(0, 1)); +}; +const $try = /* @__PURE__ */_._try("#text/0", "", /* over(1), replace, over(2) */"b%c", $try_content__setup); +export function $setup($scope) { + $try($scope, { + placeholder: _.attrTag({ + content: $placeholder_content($scope) + }) + }); +} +export default /* @__PURE__ */_._template("__tests__/template.marko", $template, $walks, $setup); \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/html.expected/template.js new file mode 100644 index 000000000..971792916 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/html.expected/template.js @@ -0,0 +1,38 @@ +import { resolveAfter } 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(0, 1), () => { + const $scope3_id = _._scope_id(); + let value = 1; + debugger; + _._html(`${_._el_resume($scope3_id, "#button/0")}`); + _._if(() => { + if (value > 0) { + const $scope4_id = _._scope_id(); + _._html(`${_._escape(value)}${_._el_resume($scope4_id, "#text/0")}`); + _._scope($scope4_id, { + _: _._scope_with_id($scope3_id) + }, "__tests__/template.marko", "8:5"); + return 0; + } + }, $scope3_id, "#text/2", 1, /* value */1, /* value */1, 0, 1); + _._script($scope3_id, "__tests__/template.marko_3_value"); + _._scope($scope3_id, { + value + }, "__tests__/template.marko", "4:3", { + value: "5:9" + }); + _._resume_branch($scope3_id); + }); + }, $scope0_id), { + placeholder: _.attrTag({ + content: _._content_resume("__tests__/template.marko_2_content", () => { + const $scope2_id = _._scope_id(); + _._html("loading..."); + }, $scope0_id) + }) + }); +}); \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/resume-sanitized.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/resume-sanitized.expected.md new file mode 100644 index 000000000..f7196fa1c --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/resume-sanitized.expected.md @@ -0,0 +1,43 @@ +# Render +```html +loading... +``` + + +# Render FLUSH +```html + + + 1 + +``` + + +# Render +```js +container.querySelector("button").click(); +``` +```html + + + 2 + +``` + + +# Render +```js +container.querySelector("button").click(); +``` +```html + + + 3 + +``` diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/resume.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/resume.expected.md new file mode 100644 index 000000000..6888bfd71 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/resume.expected.md @@ -0,0 +1,240 @@ +# Render +```html + + + + + + + + loading... + + + + + +``` + +# Mutations +``` +INSERT html/body/#text1 +``` + +# Render FLUSH +```html + + + + + + + + + + + 1 + + + + + + + + + +``` + +# Mutations +``` +INSERT t +INSERT html/body/#comment1 +INSERT html/body/button +INSERT html/body/button/#text +INSERT html/body/button/#comment +INSERT html/body/#comment2 +INSERT html/body/span +INSERT html/body/span/#text +INSERT html/body/span/#comment +INSERT html/body/#comment3 +INSERT html/body/#comment4 +REMOVE t after html/body/script0 +REMOVE #text after #comment +REMOVE #comment after html/body/#comment0 +REMOVE #comment after html/body/#comment0 +INSERT html/body/#comment1, html/body/button, html/body/#comment2, html/body/span, html/body/#comment3, html/body/#comment4 +INSERT html/body/#text0 +INSERT html/body/script1 +``` + +# Render +```js +container.querySelector("button").click(); +``` +```html + + + + + + + + + + + 2 + + + + + + + + +``` + +# Mutations +``` +UPDATE html/body/button/#text "1" => "2" +INSERT html/body/span +REMOVE span after html/body/span +UPDATE html/body/span/#text " " => "2" +``` + +# Render +```js +container.querySelector("button").click(); +``` +```html + + + + + + + + + + + 3 + + + + + + + + +``` + +# Mutations +``` +UPDATE html/body/button/#text "2" => "3" +UPDATE html/body/span/#text "2" => "3" +``` \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/ssr-sanitized.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/ssr-sanitized.expected.md new file mode 100644 index 000000000..55c4bc4c6 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/ssr-sanitized.expected.md @@ -0,0 +1,15 @@ +# Render ASYNC +```html +loading... +``` + + +# Render End +```html + + + 1 + +``` diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/ssr.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/ssr.expected.md new file mode 100644 index 000000000..2dbb2ec15 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/ssr.expected.md @@ -0,0 +1,136 @@ +# Write +```html + loading... +``` + +# Write +```html + 1 +``` + +# Render ASYNC +```html + + + + + + + + loading... + + + + + +``` + +# Mutations +``` +INSERT html +INSERT html/head +INSERT html/body +INSERT html/body/#comment0 +INSERT html/body/#comment1 +INSERT html/body/#text +INSERT html/body/#comment2 +INSERT html/body/#comment3 +INSERT html/head/style +INSERT html/head/style/#text +INSERT t +INSERT t/#comment +REMOVE html/head/style after html/body/#comment3 +INSERT html/head/style +REMOVE t after html/body/#comment3 +INSERT html/body/script +``` + +# Render End +```html + + + + + + + + + + + 1 + + + + + + + + + +``` + +# Mutations +``` +INSERT t +INSERT html/body/#comment1 +INSERT html/body/button +INSERT html/body/button/#text +INSERT html/body/button/#comment +INSERT html/body/#comment2 +INSERT html/body/span +INSERT html/body/span/#text +INSERT html/body/span/#comment +INSERT html/body/#comment3 +INSERT html/body/#comment4 +REMOVE t after html/body/script0 +REMOVE #text after #comment +REMOVE #comment after html/body/#comment0 +REMOVE #comment after html/body/#comment0 +INSERT html/body/#comment1, html/body/button, html/body/#comment2, html/body/span, html/body/#comment3, html/body/#comment4 +INSERT html/body/script1 +``` \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/template.marko b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/template.marko new file mode 100644 index 000000000..00ed093ff --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/template.marko @@ -0,0 +1,9 @@ +import { resolveAfter } from "../../utils/resolve"; +try + @placeholder -- loading... + await=resolveAfter(0, 1) + let/value=1 + debug=value + button onClick() { value++ } -- ${value} + if=(value > 0) + span -- ${value} \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/test.ts b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/test.ts new file mode 100644 index 000000000..bf6163c0c --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure-within/test.ts @@ -0,0 +1,7 @@ +import { flush, wait } from "../../utils/resolve"; + +export const steps = [{}, flush, wait(2), click, wait(1), click]; + +function click(container: Element) { + container.querySelector("button")!.click(); +} diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/.name-cache.json b/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/.name-cache.json new file mode 100644 index 000000000..fcb4bc75c --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/.name-cache.json @@ -0,0 +1,12 @@ +{ + "vars": { + "props": { + "$_": "t", + "$init": "_", + "$$await_content__value": "o", + "$$value__closure": "a", + "$$value__script": "e", + "$$value": "r" + } + } +} diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/csr-sanitized.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/csr-sanitized.expected.md new file mode 100644 index 000000000..b3ad12290 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/csr-sanitized.expected.md @@ -0,0 +1,64 @@ +# Render +```html + +``` + + +# Render ASYNC +```html + +loading... +``` + + +# Render +```js +container.querySelector("button").click(); +``` +```html + +loading... +``` + + +# Render +```js +container.querySelector("button").click(); +``` +```html + +loading... +``` + + +# Render ASYNC +```html + + + 3 + +``` + + +# Render +```js +container.querySelector("button").click(); +``` +```html + + + 4 + +``` diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/csr.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/csr.expected.md new file mode 100644 index 000000000..87ff54560 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/csr.expected.md @@ -0,0 +1,107 @@ +# Render +```html + + + + +``` + +# Mutations +``` +INSERT button, #comment0, #text, #comment1, #comment2 +``` + +# Render ASYNC +```html + +loading... + +``` + +# Mutations +``` +INSERT #text +REMOVE #document-fragment/#comment0 after #text +REMOVE #document-fragment/#text after #text +REMOVE #document-fragment/#comment1 after #text +``` + +# Render +```js +container.querySelector("button").click(); +``` +```html + +loading... + +``` + +# Mutations +``` +UPDATE button/#text "1" => "2" +``` + +# Render +```js +container.querySelector("button").click(); +``` +```html + +loading... + +``` + +# Mutations +``` +UPDATE button/#text "2" => "3" +``` + +# Render ASYNC +```html + + + + 3 + + + +``` + +# Mutations +``` +INSERT #comment0, span, #comment1 +REMOVE #text after #comment1 +UPDATE span/#text " " => "3" +``` + +# Render +```js +container.querySelector("button").click(); +``` +```html + + + + 4 + + + +``` + +# Mutations +``` +UPDATE button/#text "3" => "4" +UPDATE span/#text "3" => "4" +``` \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/dom.expected/template.hydrate.js b/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/dom.expected/template.hydrate.js new file mode 100644 index 000000000..2569bb852 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/dom.expected/template.hydrate.js @@ -0,0 +1,20 @@ +// size: 250 (min) 157 (brotli) +(_._enable_catch(), _._content_resume("a0", "loading...", "b")); +const $await_content__value = _._closure_get( + 3, + ($scope) => _._text($scope.a, $scope._._.d), + ($scope) => $scope._._, + "a1", + ), + $value__closure = _._closure($await_content__value), + $value__script = _._script("a2", ($scope) => + _._on($scope.a, "click", function () { + $value($scope, $scope.d + 1); + }), + ), + $value = _._let(3, ($scope) => { + (_._text($scope.b, $scope.d), + $value__closure($scope), + $value__script($scope)); + }); +init(); diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/dom.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/dom.expected/template.js new file mode 100644 index 000000000..11abff145 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/dom.expected/template.js @@ -0,0 +1,33 @@ +export const $template = ""; +export const $walks = /* get, next(1), get, out(1), replace, over(2) */" D l%c"; +import { resolveAfter } from "../../utils/resolve"; +import * as _ from "@marko/runtime-tags/debug/dom"; +_._enable_catch(); +const $placeholder_content = _._content_resume("__tests__/template.marko_3_content", "loading...", /* over(1) */"b"); +const $await_content__value = /* @__PURE__ */_._closure_get("value", $scope => _._text($scope["#text/0"], $scope._._.value), $scope => $scope._._, "__tests__/template.marko_2_value"); +const $await_content__setup = $await_content__value; +const $await_content = /* @__PURE__ */_._await_content("#text/0", " ", /* next(1), get, out(1) */"D l", $await_content__setup); +const $try_content__await_promise = /* @__PURE__ */_._await_promise("#text/0"); +const $try_content__setup = $scope => { + $await_content($scope); + $try_content__await_promise($scope, resolveAfter(0, 3)); +}; +const $value__closure = /* @__PURE__ */_._closure($await_content__value); +const $value__script = _._script("__tests__/template.marko_0_value", $scope => _._on($scope["#button/0"], "click", function () { + $value($scope, $scope.value + 1); +})); +const $value = /* @__PURE__ */_._let("value/3", $scope => { + _._text($scope["#text/1"], $scope.value); + $value__closure($scope); + $value__script($scope); +}); +const $try = /* @__PURE__ */_._try("#text/2", "", /* over(1), replace, over(2) */"b%c", $try_content__setup); +export function $setup($scope) { + $value($scope, 1); + $try($scope, { + placeholder: _.attrTag({ + content: $placeholder_content($scope) + }) + }); +} +export default /* @__PURE__ */_._template("__tests__/template.marko", $template, $walks, $setup); \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/html.expected/template.js new file mode 100644 index 000000000..7be353c06 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/html.expected/template.js @@ -0,0 +1,39 @@ +import { resolveAfter } from "../../utils/resolve"; +import * as _ from "@marko/runtime-tags/debug/html"; +export default _._template("__tests__/template.marko", input => { + const $scope0_id = _._scope_id(); + const $value__closures = new Set(); + let value = 1; + _._html(`${_._el_resume($scope0_id, "#button/0")}`); + _._try($scope0_id, "#text/2", _._content_resume("__tests__/template.marko_1_content", () => { + const $scope1_id = _._scope_id(); + _._await($scope1_id, "#text/0", resolveAfter(0, 3), () => { + const $scope2_id = _._scope_id(); + _._script($scope2_id, "__tests__/template.marko_2_value"); + _._html(`${_._escape(value)}${_._el_resume($scope2_id, "#text/0")}`); + _._scope($scope2_id, { + _: _._scope_with_id($scope1_id), + "ClosureSignalIndex:value": 0 + }, "__tests__/template.marko", "6:3"); + _._resume_branch($scope2_id); + }); + _._scope($scope1_id, { + _: _._scope_with_id($scope0_id) + }, "__tests__/template.marko", "4:1"); + }, $scope0_id), { + placeholder: _.attrTag({ + content: _._content_resume("__tests__/template.marko_3_content", () => { + const $scope3_id = _._scope_id(); + _._html("loading..."); + }, $scope0_id) + }) + }); + _._script($scope0_id, "__tests__/template.marko_0_value"); + _._scope($scope0_id, { + value, + "ClosureScopes:value": $value__closures + }, "__tests__/template.marko", 0, { + value: "2:5" + }); + _._resume_branch($scope0_id); +}); \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/resume-sanitized.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/resume-sanitized.expected.md new file mode 100644 index 000000000..f7262aac0 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/resume-sanitized.expected.md @@ -0,0 +1,56 @@ +# Render +```html + +loading... +``` + + +# Render +```js +container.querySelector("button").click(); +``` +```html + +loading... +``` + + +# Render +```js +container.querySelector("button").click(); +``` +```html + +loading... +``` + + +# Render FLUSH +```html + + + 3 + +``` + + +# Render +```js +container.querySelector("button").click(); +``` +```html + + + 4 + +``` diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/resume.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/resume.expected.md new file mode 100644 index 000000000..0c9d00141 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/resume.expected.md @@ -0,0 +1,286 @@ +# Render +```html + + + + + + + + + + loading... + + + + + +``` + +# Mutations +``` +INSERT html/body/#text1 +``` + +# Render +```js +container.querySelector("button").click(); +``` +```html + + + + + + + + + + loading... + + + + + +``` + +# Mutations +``` +UPDATE html/body/button/#text "1" => "2" +``` + +# Render +```js +container.querySelector("button").click(); +``` +```html + + + + + + + + + + loading... + + + + + +``` + +# Mutations +``` +UPDATE html/body/button/#text "2" => "3" +``` + +# Render FLUSH +```html + + + + + + + + + + + 3 + + + + + + + + +``` + +# Mutations +``` +INSERT t +INSERT html/body/#comment2 +INSERT html/body/span +INSERT html/body/span/#text +INSERT html/body/span/#comment +INSERT html/body/#comment3 +REMOVE t after html/body/script0 +REMOVE #text after #comment +REMOVE #comment after html/body/#comment1 +REMOVE #comment after html/body/#comment1 +INSERT html/body/#comment2, html/body/span, html/body/#comment3 +INSERT html/body/#text0 +UPDATE html/body/span/#text "1" => "3" +INSERT html/body/script1 +``` + +# Render +```js +container.querySelector("button").click(); +``` +```html + + + + + + + + + + + 4 + + + + + + + + +``` + +# Mutations +``` +UPDATE html/body/button/#text "3" => "4" +UPDATE html/body/span/#text "3" => "4" +``` \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/ssr-sanitized.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/ssr-sanitized.expected.md new file mode 100644 index 000000000..8e15a73ab --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/ssr-sanitized.expected.md @@ -0,0 +1,18 @@ +# Render ASYNC +```html + +loading... +``` + + +# Render End +```html + + + 1 + +``` diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/ssr.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/ssr.expected.md new file mode 100644 index 000000000..faf64ae08 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure/__snapshots__/ssr.expected.md @@ -0,0 +1,148 @@ +# Write +```html + loading... +``` + +# Write +```html + 1 +``` + +# Render ASYNC +```html + + + + + + + + + + loading... + + + + + +``` + +# Mutations +``` +INSERT html +INSERT html/head +INSERT html/body +INSERT html/body/button +INSERT html/body/button/#text +INSERT html/body/button/#comment +INSERT html/body/#comment0 +INSERT html/body/#comment1 +INSERT html/body/#comment2 +INSERT html/body/#text +INSERT html/body/#comment3 +INSERT html/body/#comment4 +INSERT html/head/style +INSERT html/head/style/#text +INSERT t +INSERT t/#comment +REMOVE html/head/style after html/body/#comment4 +INSERT html/head/style +REMOVE t after html/body/#comment4 +INSERT html/body/script +``` + +# Render End +```html + + + + + + + + + + + 1 + + + + + + + + +``` + +# Mutations +``` +INSERT t +INSERT html/body/#comment2 +INSERT html/body/span +INSERT html/body/span/#text +INSERT html/body/span/#comment +INSERT html/body/#comment3 +REMOVE t after html/body/script0 +REMOVE #text after #comment +REMOVE #comment after html/body/#comment1 +REMOVE #comment after html/body/#comment1 +INSERT html/body/#comment2, html/body/span, html/body/#comment3 +INSERT html/body/script1 +``` \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure/template.marko b/packages/runtime-tags/src/__tests__/fixtures/await-closure/template.marko new file mode 100644 index 000000000..0a3bfbf78 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure/template.marko @@ -0,0 +1,7 @@ +import { resolveAfter } from "../../utils/resolve"; +let/value=1 +button onClick() { value++ } -- ${value} +try + @placeholder -- loading... + await=resolveAfter(0, 3) + span -- ${value} \ No newline at end of file diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-closure/test.ts b/packages/runtime-tags/src/__tests__/fixtures/await-closure/test.ts new file mode 100644 index 000000000..9a6b04cc9 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/await-closure/test.ts @@ -0,0 +1,16 @@ +import { flush, wait } from "../../utils/resolve"; + +export const steps = [ + {}, + wait(1), + click, + wait(1), + click, + wait(1), + flush, + click, +]; + +function click(container: Element) { + container.querySelector("button")!.click(); +} diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-remove-parent/__snapshots__/resume-sanitized.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-remove-parent/__snapshots__/resume-sanitized.expected.md index 3431c76db..876cef99b 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/await-remove-parent/__snapshots__/resume-sanitized.expected.md +++ b/packages/runtime-tags/src/__tests__/fixtures/await-remove-parent/__snapshots__/resume-sanitized.expected.md @@ -5,4 +5,25 @@ > Pass +loading... +``` + + +# Render ASYNC +```html +
+ Pass +
+``` + + +# Render FLUSH +```html +
+ Pass +
``` diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-remove-parent/__snapshots__/resume.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-remove-parent/__snapshots__/resume.expected.md index 6e12770f8..a46ff0a7b 100644 --- a/packages/runtime-tags/src/__tests__/fixtures/await-remove-parent/__snapshots__/resume.expected.md +++ b/packages/runtime-tags/src/__tests__/fixtures/await-remove-parent/__snapshots__/resume.expected.md @@ -1,5 +1,99 @@ # Render ```html + + + + + +
+ Pass +
+ + + + loading... + + + + + + +``` + +# Mutations +``` +INSERT html/body/#text1 +INSERT html/body/#text2 +``` + +# Render ASYNC +```html + + + + + +
+ Pass +
+ + + + +``` + +# Mutations +``` +REMOVE html/body/#comment after #text +INSERT html/body/#comment +REMOVE #comment after html/body/#comment +REMOVE #comment after html/body/#comment +REMOVE #comment after html/body/#comment +REMOVE #text after html/body/#comment +REMOVE #comment after html/body/#comment +REMOVE #text after html/body/#comment +REMOVE #comment after html/body/#comment +REMOVE #text after html/body/#comment +``` + +# Render FLUSH +```html + + +
+ 0 + +
+ + + loading... + + + 
+    
+    
+  
+
+```
+
+# Mutations
+```
+INSERT html/body/#text1
+```
+
+# Render FLUSH
+```html
+
+  
+    
+  
+  
+    

+      0
+      
+    

+    
+    
+    

+      0
+      
+    

+    
+    
+    
+      
+effect ran value=0
+setup effect ran
+    

+    
+    
+    
+  
+
+```
+
+# Mutations
+```
+INSERT t
+INSERT html/body/#comment1
+INSERT html/body/div1
+INSERT html/body/div1/#text
+INSERT html/body/div1/#comment
+INSERT html/body/#comment2
+REMOVE t after html/body/script0
+REMOVE #text after #comment
+REMOVE #comment after html/body/#comment0
+REMOVE #comment after html/body/#comment0
+INSERT html/body/#comment1, html/body/div1, html/body/#comment2
+INSERT html/body/#text0
+INSERT #text
+REMOVE #text in html/body/pre
+INSERT html/body/pre/#text
+INSERT html/body/script1
+```
+
+# Render ASYNC
+```html
+
+  
+    
+  
+  
+    

+      1
+      
+    

+    
+    
+    

+      0
+      
+    

+    
+    
+    
+      
+effect ran value=0
+setup effect ran
+    

+    
+    
+    
+  
+
+```
+
+# Mutations
+```
+UPDATE html/body/div0/#text "0" => "1"
+```
+
+# Render ASYNC
+```html
+
+  
+    
+  
+  
+    

+      1
+      
+    

+    loading...
+    
+    
+      
+effect ran value=0
+setup effect ran
+    

+    
+    
+    
+  
+
+```
+
+# Mutations
+```
+INSERT html/body/#text
+REMOVE #document-fragment/#comment0 after html/body/#text
+REMOVE #document-fragment/#comment1 after html/body/#text
+REMOVE #document-fragment/div after html/body/#text
+REMOVE #document-fragment/#text0 after html/body/#text
+REMOVE #document-fragment/#comment2 after html/body/#text
+REMOVE #document-fragment/#text1 after html/body/#text
+```
+
+# Render ASYNC
+```html
+
+  
+    
+  
+  
+    

+      1
+      
+    

+    
+    
+    

+      1
+      
+    

+    
+    
+    
+      
+effect ran value=0
+setup effect ran
+effect ran value=1
+    

+    
+    
+    
+  
+
+```
+
+# Mutations
+```
+INSERT html/body/#comment0, html/body/#comment1, html/body/div1, html/body/#text0, html/body/#comment2, html/body/#text1
+REMOVE #text after html/body/#text1
+REMOVE #text in html/body/pre
+INSERT html/body/pre/#text
+```
\ No newline at end of file
diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/__snapshots__/ssr-sanitized.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/__snapshots__/ssr-sanitized.expected.md
new file mode 100644
index 000000000..b1aa5c0bf
--- /dev/null
+++ b/packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/__snapshots__/ssr-sanitized.expected.md
@@ -0,0 +1,26 @@
+# Render ASYNC
+```html
+

+  0
+

+loading...
+
+```
+
+
+# Render End
+```html
+

+  0
+

+

+  0
+

+
+```
diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/__snapshots__/ssr.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/__snapshots__/ssr.expected.md
new file mode 100644
index 000000000..9740a612b
--- /dev/null
+++ b/packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/__snapshots__/ssr.expected.md
@@ -0,0 +1,157 @@
+# Write
+```html
+  
0
loading...

+```
+
+# Write
+```html
+  
0

+```
+
+# Render ASYNC
+```html
+
+  
+    
+  
+  
+    

+      0
+      
+    

+    
+    
+    loading...
+    
+    
+    
+    
+    
+  
+
+```
+
+# Mutations
+```
+INSERT html
+INSERT html/head
+INSERT html/body
+INSERT html/body/div
+INSERT html/body/div/#text
+INSERT html/body/div/#comment
+INSERT html/body/#comment0
+INSERT html/body/#comment1
+INSERT html/body/#text
+INSERT html/body/#comment2
+INSERT html/body/#comment3
+INSERT html/body/pre
+INSERT html/body/#comment4
+INSERT html/head/style
+INSERT html/head/style/#text
+INSERT t
+INSERT t/#comment
+REMOVE html/head/style after html/body/#comment4
+INSERT html/head/style
+REMOVE t after html/body/#comment4
+INSERT html/body/script
+```
+
+# Render End
+```html
+
+  
+    
+  
+  
+    

+      0
+      
+    

+    
+    
+    

+      0
+      
+    

+    
+    
+    
+    
+    
+    
+  
+
+```
+
+# Mutations
+```
+INSERT t
+INSERT html/body/#comment1
+INSERT html/body/div1
+INSERT html/body/div1/#text
+INSERT html/body/div1/#comment
+INSERT html/body/#comment2
+REMOVE t after html/body/script0
+REMOVE #text after #comment
+REMOVE #comment after html/body/#comment0
+REMOVE #comment after html/body/#comment0
+INSERT html/body/#comment1, html/body/div1, html/body/#comment2
+INSERT html/body/script1
+```
\ No newline at end of file
diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/template.marko b/packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/template.marko
new file mode 100644
index 000000000..e6dfdeb9b
--- /dev/null
+++ b/packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/template.marko
@@ -0,0 +1,11 @@
+import { resolveAfter } from "../../utils/resolve";
+let/value=0
+script -- await resolveAfter(0, 2); value = 1
+div#outside -- ${value}
+try
+  @placeholder -- loading...
+  await|value|=resolveAfter(value, 1)
+    div#inside -- ${value}
+    script -- $log().textContent += `\nsetup effect ran`
+    script -- $log().textContent += `\neffect ran value=${value}`
+pre/$log
\ No newline at end of file
diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/test.ts b/packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/test.ts
new file mode 100644
index 000000000..b3d2c3bca
--- /dev/null
+++ b/packages/runtime-tags/src/__tests__/fixtures/await-update-after-resume/test.ts
@@ -0,0 +1,3 @@
+import { flush, wait } from "../../utils/resolve";
+
+export const steps = [{}, flush, wait(2), wait(2)];
diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/csr-sanitized.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/csr-sanitized.expected.md
index e5f3c6c92..22c553393 100644
--- a/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/csr-sanitized.expected.md
+++ b/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/csr-sanitized.expected.md
@@ -5,6 +5,7 @@
 >
   0
 
+
 ```
 
 
@@ -13,8 +14,10 @@
 

-  1
+  0
 

+loading...
+
 ```
 
 
@@ -26,6 +29,7 @@
   1
 
 loading...
+
 ```
 
 
@@ -34,11 +38,16 @@ loading...
 

-  1 effect ran
+  1
 

 

-  1 effect ran 1
+  1
 

+
+  
+effect ran value=1
+setup effect ran
+

 ```
diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/csr.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/csr.expected.md
index 64aad3d11..bcac7e450 100644
--- a/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/csr.expected.md
+++ b/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/csr.expected.md
@@ -7,12 +7,12 @@
 
 
 
-
+
 ```
 
 # Mutations
 ```
-INSERT div, #comment0, #text, #comment1, #comment2
+INSERT div, #comment0, #text, #comment1, pre
 ```
 
 # Render ASYNC
@@ -20,27 +20,10 @@ INSERT div, #comment0, #text, #comment1, #comment2
 

-  1
-

-
-
-
-```
-
-# Mutations
-```
-UPDATE div/#text "0" => "1"
-```
-
-# Render ASYNC
-```html
-

-  1
+  0
 

 loading...
-
+
 ```
 
 # Mutations
@@ -56,24 +39,43 @@ REMOVE #document-fragment/#comment1 after #text
 

-  1 effect ran
+  1
+

+loading...
+
+```
+
+# Mutations
+```
+UPDATE div/#text "0" => "1"
+```
+
+# Render ASYNC
+```html
+

+  1
 

 
 

-  1 effect ran 1
+  1
 

 
-
+
+  
+effect ran value=1
+setup effect ran
+

 ```
 
 # Mutations
 ```
 INSERT #comment0, div1, #comment1
 REMOVE #text after #comment1
-REMOVE #text in div1
-INSERT div1/#text
-REMOVE #text in div0
-INSERT div0/#text
+INSERT #text
+REMOVE #text in pre
+INSERT pre/#text
 ```
\ No newline at end of file
diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/dom.expected/template.hydrate.js b/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/dom.expected/template.hydrate.js
index 98e45c52a..cc94bcd7f 100644
--- a/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/dom.expected/template.hydrate.js
@@ -1,18 +1,13 @@
-// size: 466 (min) 223 (brotli)
+// size: 452 (min) 232 (brotli)
 _._enable_catch();
 const $await_content__value__script = _._script(
     "a0",
-    ($scope) =>
-      (document.querySelector("#inside").textContent +=
-        ` effect ran ${$scope.c}`),
+    ($scope) => ($scope._._.c.textContent += `\neffect ran value=${$scope.c}`),
   ),
   $await_content__value = _._const(2, ($scope) => {
     (_._text($scope.a, $scope.c), $await_content__value__script($scope));
   });
-_._script(
-  "a1",
-  ($scope) => (document.querySelector("#outside").textContent += " effect ran"),
-);
+_._script("a1", ($scope) => ($scope._._.c.textContent += "\nsetup effect ran"));
 const $await_content__$params = _._const(1, ($scope) =>
   $await_content__value($scope, $scope.b[0]),
 );
@@ -21,11 +16,16 @@ const $try_content__await_promise = _._await_promise(
     0,
     $await_content__$params,
   ),
-  $try_content__value = _._closure_get(2, ($scope) =>
-    $try_content__await_promise($scope, resolveAfter($scope._.c, 10)),
+  $try_content__value = _._closure_get(3, ($scope) =>
+    $try_content__await_promise($scope, resolveAfter($scope._.d, 2)),
   ),
   $value__closure = _._closure($try_content__value),
-  $value = _._let(2, ($scope) => {
-    (_._text($scope.a, $scope.c), $value__closure($scope));
+  $value = _._let(3, ($scope) => {
+    (_._text($scope.a, $scope.d), $value__closure($scope));
   });
-(_._script("a3", ($scope) => $value($scope, 1)), init());
+(_._script("a3", ($scope) =>
+  (async () => {
+    (await resolveAfter(1), $value($scope, 1));
+  })(),
+),
+  init());
diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/dom.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/dom.expected/template.js
index 77285e932..2b7c5aa6c 100644
--- a/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/dom.expected/template.js
+++ b/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/dom.expected/template.js
@@ -1,14 +1,14 @@
-export const $template = "
 
";
-export const $walks = /* next(1), get, out(1), replace, over(2) */"D l%c";
+export const $template = "
 
";
+export const $walks = /* next(1), get, out(1), replace, over(1), get, over(1) */"D l%b b";
 import { resolveAfter } from "../../utils/resolve";
 import * as _ from "@marko/runtime-tags/debug/dom";
 _._enable_catch();
-const $await_content__value__script = _._script("__tests__/template.marko_3_value", $scope => (document.querySelector('#inside').textContent += ` effect ran ${$scope.value}`));
+const $await_content__value__script = _._script("__tests__/template.marko_3_value", $scope => (_._el_read($scope._._["#pre/2"]).textContent += `\neffect ran value=${$scope.value}`));
 const $await_content__value = /* @__PURE__ */_._const("value", $scope => {
   _._text($scope["#text/0"], $scope.value);
   $await_content__value__script($scope);
 });
-const $await_content__setup__script = _._script("__tests__/template.marko_3", $scope => (document.querySelector('#outside').textContent += ` effect ran`));
+const $await_content__setup__script = _._script("__tests__/template.marko_3", $scope => (_._el_read($scope._._["#pre/2"]).textContent += `\nsetup effect ran`));
 const $await_content__setup = $await_content__setup__script;
 const $await_content__$params = /* @__PURE__ */_._const("$params2", $scope => $await_content__value($scope, $scope.$params2[0]));
 const $placeholder_content = _._content_resume("__tests__/template.marko_2_content", "loading...", /* over(1) */"b");
@@ -18,14 +18,17 @@ const $try_content__setup = $scope => {
   $await_content($scope);
   $try_content__value($scope);
 };
-const $try_content__value = /* @__PURE__ */_._closure_get("value", $scope => $try_content__await_promise($scope, resolveAfter($scope._.value, 10)));
+const $try_content__value = /* @__PURE__ */_._closure_get("value", $scope => $try_content__await_promise($scope, resolveAfter($scope._.value, 2)));
 const $value__closure = /* @__PURE__ */_._closure($try_content__value);
-const $value = /* @__PURE__ */_._let("value/2", $scope => {
+const $value = /* @__PURE__ */_._let("value/3", $scope => {
   _._text($scope["#text/0"], $scope.value);
   $value__closure($scope);
 });
 const $try = /* @__PURE__ */_._try("#text/1", "", /* over(1), replace, over(2) */"b%c", $try_content__setup);
-const $setup__script = _._script("__tests__/template.marko_0", $scope => $value($scope, 1));
+const $setup__script = _._script("__tests__/template.marko_0", $scope => (async () => {
+  await resolveAfter(1);
+  $value($scope, 1);
+})());
 export function $setup($scope) {
   $value($scope, 0);
   $try($scope, {
diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/html.expected/template.js
index a62877726..3f214a502 100644
--- a/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/html.expected/template.js
+++ b/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/html.expected/template.js
@@ -7,13 +7,14 @@ export default _._template("__tests__/template.marko", input => {
   _._html(`
${_._escape(value)}${_._el_resume($scope0_id, "#text/0")}
`);
   _._try($scope0_id, "#text/1", _._content_resume("__tests__/template.marko_1_content", () => {
     const $scope1_id = _._scope_id();
-    _._await($scope1_id, "#text/0", resolveAfter(value, 10), value => {
+    _._await($scope1_id, "#text/0", resolveAfter(value, 2), value => {
       const $scope3_id = _._scope_id();
       _._html(`
${_._escape(value)}${_._el_resume($scope3_id, "#text/0")}
`);
-      _._script($scope3_id, "__tests__/template.marko_3");
       _._script($scope3_id, "__tests__/template.marko_3_value");
+      _._script($scope3_id, "__tests__/template.marko_3");
       _._scope($scope3_id, {
-        value
+        value,
+        _: _._scope_with_id($scope1_id)
       }, "__tests__/template.marko", "7:3", {
         value: "7:9"
       });
@@ -31,6 +32,7 @@ export default _._template("__tests__/template.marko", input => {
       }, $scope0_id)
     })
   });
+  _._html(`
${_._el_resume($scope0_id, "#pre/2")}`);
   _._script($scope0_id, "__tests__/template.marko_0");
   _._scope($scope0_id, {
     "ClosureScopes:value": $value__closures
diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/resume-sanitized.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/resume-sanitized.expected.md
index e992e22df..af2e92832 100644
--- a/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/resume-sanitized.expected.md
+++ b/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/resume-sanitized.expected.md
@@ -3,9 +3,10 @@
 

-  1
+  0
 

 loading...
+
 ```
 
 
@@ -14,11 +15,40 @@ loading...
 

-  1 effect ran
+  1
+

+loading...
+
+```
+
+
+# Render FLUSH
+```html
+

+  1
+

+loading...
+
+```
+
+
+# Render ASYNC
+```html
+

+  1
 

 

-  1 effect ran 1
+  1
 

+
+  
+effect ran value=1
+setup effect ran
+

 ```
diff --git a/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/resume.expected.md b/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/resume.expected.md
index b5eb5b790..475ef0a13 100644
--- a/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/resume.expected.md
+++ b/packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/resume.expected.md
@@ -1,5 +1,54 @@
 # Render
 ```html
+
+  
+    
+  
+  
+    

+      0
+      
+    

+    
+    
+    loading...
+    
+    
+    
+    
+    
+  
+
+```
+
+# Mutations
+```
+INSERT html/body/#text1
+```
+
+# Render ASYNC
+```html
 
   
     
+  
+  
+    

+      1
+      
+    

+    
+    
+    loading...
+    
+    
+    
+    
     
+  
0
loading...

 ```
 
 # Write
 ```html
-  
0

+  
0

 ```
 
 # Render ASYNC
@@ -30,6 +30,8 @@
     loading...
     
     
+    
+    
     
+  
+
+```
+
+
+# Render FLUSH
+```html
 
   
     
+  
+  
+    a
+    
+    
+    _A_
+    
+    
+    e
+    
+  
+
+```
+
+# Mutations
+```
+INSERT html/body/#text2
+```
+
+# Render FLUSH
+```html
+
+  
+    
+  
+  
+    a
+    
+    
+    _A_
+    
+    
+    e
+    
+    fg
+  
+
+```
+
+# Mutations
+```
+INSERT html/body/#text4
+```
+
+# Render FLUSH
+```html
 
   
     
+  
+  
+    a
+    
+    
+    _B_
+    
+    
+    h
+    
+  
+
+```
+
+# Mutations
+```
+INSERT html/body/#text2
+```
+
+# Render FLUSH
+```html
+
+  
+    
+  
+  
+    a
+    
+    
+    _B_
+    
+    
+    h
+    
+    ij
+  
+
+```
+
+# Mutations
+```
+INSERT html/body/#text4
+```
+
+# Render FLUSH
+```html
+
+  
+    
+  
+  
+    a
+    
+    bcd
+    
+    
+    _A_
+    
+    
+    
+    h
+    
+    ij
+    
+  
+
+```
+
+# Mutations
+```
+INSERT t
+INSERT html/body/#text2
+REMOVE t after html/body/#text8
+REMOVE #text after #comment
+REMOVE #comment after html/body/#comment0
+REMOVE #comment after html/body/#comment0
+INSERT html/body/#text1, html/body/#text2, html/body/#text3, html/body/#comment1, html/body/#comment2, html/body/#text4, html/body/#comment3, html/body/#text5, html/body/#comment4
+INSERT html/body/script1
+```
+
+# Render FLUSH
+```html
 
   
     
+  
+  
+    
+    
+    

+    
+    
+    
+    
+    LOADING...
+    
+    
+    
+    
+  
+
+```
+
+# Mutations
+```
+INSERT html/body/#text1
+```
+
+# Render FLUSH
+```html