archive-gh-me/marko
1
0
Fork 0
mirror of https://github.com/marko-js/marko.git synced 2025-12-08 19:26:05 +00:00
Code Issues Projects Releases Wiki Activity

fix: unify inline placeholder and await counters

Browse Source
This commit is contained in:
Ryan Turnquist 2025-11-19 14:51:27 -08:00 committed by Dylan Piercey
parent a414d6b67a
commit 412e371cf2
46 changed files with 1439 additions and 332 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/many-lies-dream.md Normal file
View File

@ -0,0 +1,5 @@
---
"@marko/runtime-tags": patch
---
Unify inline placeholder and await placeholders

28
.sizes.json
View File

@ -7,8 +7,8 @@
{
"name": "*",
"total": {
"min": 19659,
"brotli": 7540
"min": 20005,
"brotli": 7670
}
},
{
@ -19,11 +19,11 @@
},
"runtime": {
"min": 4043,
"brotli": 1822
"brotli": 1820
},
"total": {
"min": 4217,
"brotli": 1962
"brotli": 1960
}
},
{
@ -33,12 +33,12 @@
"brotli": 89
},
"runtime": {
"min": 2154,
"brotli": 1137
"min": 2186,
"brotli": 1145
},
"total": {
"min": 2250,
"brotli": 1226
"min": 2282,
"brotli": 1234
}
},
{
@ -49,11 +49,11 @@
},
"runtime": {
"min": 7099,
"brotli": 3103
"brotli": 3111
},
"total": {
"min": 7842,
"brotli": 3507
"brotli": 3515
}
},
{
@ -63,12 +63,12 @@
"brotli": 116
},
"runtime": {
"min": 2306,
"brotli": 1171
"min": 2338,
"brotli": 1183
},
"total": {
"min": 2436,
"brotli": 1287
"min": 2468,
"brotli": 1299
}
}
]

276
.sizes/dom.js
View File

@ -1,4 +1,4 @@
// size: 19659 (min) 7540 (brotli)
// size: 20005 (min) 7670 (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 ("e" in normalized) return normalized;
if ("g" in normalized) return normalized;
}
}
var decodeAccessor = (num) =>
@ -201,7 +201,6 @@ function walkInternal(currentWalkIndex, walkCodes, scope) {
}
}
var branchesEnabled,
isInit,
isResuming,
registeredValues = {};
function enableBranches() {
@ -324,43 +323,41 @@ function init(runtimeId = "M") {
: visitText.length,
));
return (
(render.w = (effects = []) => {
try {
(isInit || walk2(), (isResuming = 1));
for (let serialized of (resumes = render.r || []))
if ("string" == typeof serialized) lastEffect = serialized;
else if ("number" == typeof serialized)
effects.push(
registeredValues[lastEffect],
(scopeLookup[serialized] ||= { L: serialized }),
);
else
for (let scope of serialized(serializeContext))
$global
? "number" == typeof scope
? (lastScopeId += scope)
: ((scopeLookup[(scope.L = ++lastScopeId)] = scope),
(scope.$ = $global),
branchesEnabled && (scope.F = scopeLookup[scope.G]))
: (($global = scope || {}),
($global.runtimeId = runtimeId),
($global.renderId = renderId));
for (visit of (visits = render.v))
((lastTokenIndex = render.i.length),
(visitText = visit.data),
(visitType = visitText[lastTokenIndex++]),
(visitScope = scopeLookup[+nextToken()] ||=
{ L: +lastToken }),
"*" === visitType
? (visitScope["J" + nextToken()] = (
(node) => () =>
node
)((visitScope[lastToken] = visit.previousSibling)))
: branchesEnabled && visitBranches());
runEffects(effects);
} finally {
isInit = isResuming = visits.length = resumes.length = 0;
}
(render.m = (effects = []) => {
for (let serialized of (resumes = render.r || []))
if ("string" == typeof serialized) lastEffect = serialized;
else if ("number" == typeof serialized)
effects.push(
registeredValues[lastEffect],
(scopeLookup[serialized] ||= { L: serialized }),
);
else
for (let scope of serialized(serializeContext))
$global
? "number" == typeof scope
? (lastScopeId += scope)
: ((scopeLookup[(scope.L = ++lastScopeId)] = scope),
(scope.$ = $global),
branchesEnabled && (scope.F = scopeLookup[scope.G]))
: (($global = scope || {}),
($global.runtimeId = runtimeId),
($global.renderId = renderId));
for (visit of (visits = render.v))
((lastTokenIndex = render.i.length),
(visitText = visit.data),
(visitType = visitText[lastTokenIndex++]),
(visitScope = scopeLookup[+nextToken()] ||=
{ L: +lastToken }),
"*" === visitType
? (visitScope["J" + nextToken()] = (
(node) => () =>
node
)((visitScope[lastToken] = visit.previousSibling)))
: branchesEnabled && visitBranches());
return ((visits.length = resumes.length = 0), effects);
}),
(render.w = () => {
(walk2(), runResumeEffects(render));
}),
render
);
@ -369,9 +366,16 @@ function init(runtimeId = "M") {
};
if (renders) {
initRuntime(renders);
for (let renderId in renders) ((isInit = 1), resumeRender(renderId).w());
for (let renderId in renders) runResumeEffects(resumeRender(renderId));
} else defineRuntime({ configurable: !0, set: initRuntime });
}
function runResumeEffects(render) {
try {
((isResuming = 1), runEffects(render.m(), 1));
} finally {
isResuming = 0;
}
}
function _resume(id, obj) {
return (registeredValues[id] = obj);
}
@ -735,9 +739,9 @@ function subscribeToScopeSet(ownerScope, accessor, scope) {
));
}
function _closure(...closureSignals) {
let [{ j: ___scopeInstancesAccessor, k: ___signalIndexAccessor }] =
let [{ l: ___scopeInstancesAccessor, n: ___signalIndexAccessor }] =
closureSignals;
for (let i = closureSignals.length; i--; ) closureSignals[i].n = i;
for (let i = closureSignals.length; i--; ) closureSignals[i].t = i;
return (scope) => {
if (scope[___scopeInstancesAccessor])
for (let childScope of scope[___scopeInstancesAccessor])
@ -752,17 +756,17 @@ function _closure(...closureSignals) {
function _closure_get(valueAccessor, fn, getOwnerScope) {
valueAccessor = decodeAccessor(valueAccessor);
let closureSignal = (scope) => {
((scope[closureSignal.k] = closureSignal.n),
((scope[closureSignal.n] = closureSignal.t),
fn(scope),
subscribeToScopeSet(
getOwnerScope ? getOwnerScope(scope) : scope._,
closureSignal.j,
closureSignal.l,
scope,
));
};
return (
(closureSignal.j = "B" + valueAccessor),
(closureSignal.k = "C" + valueAccessor),
(closureSignal.l = "B" + valueAccessor),
(closureSignal.n = "C" + valueAccessor),
closureSignal
);
}
@ -829,11 +833,11 @@ function createBranch($global, renderer, parentScope, parentNode) {
let branch = createScope($global),
parentBranch = parentScope?.F;
return (
(branch._ = renderer.c || parentScope),
(branch._ = renderer.e || parentScope),
(branch.F = branch),
parentBranch &&
((branch.N = parentBranch), (parentBranch.D ||= new Set()).add(branch)),
renderer.f?.(branch, parentNode.namespaceURI),
renderer.h?.(branch, parentNode.namespaceURI),
branch
);
}
@ -844,7 +848,7 @@ function createAndSetupBranch($global, renderer, parentScope, parentNode) {
);
}
function setupBranch(renderer, branch) {
return (renderer.g && queueRender(branch, renderer.g, -1), branch);
return (renderer.j && queueRender(branch, renderer.j, -1), branch);
}
function _content(id, template, walks, setup, params, dynamicScopesAccessor) {
((walks = walks ? walks.replace(/[^\0-1]+$/, "") : ""),
@ -881,10 +885,10 @@ function _content(id, template, walks, setup, params, dynamicScopesAccessor) {
walk((branch.S = branch.K = new Text()), walks, branch);
};
return (owner) => ({
e: id,
f: clone,
c: owner,
g: setup,
g: id,
h: clone,
e: owner,
j: setup,
a: params,
b: dynamicScopesAccessor,
});
@ -909,8 +913,8 @@ function _content_closures(renderer, closureFns) {
return (owner, closureValues) => {
let instance = renderer(owner);
return (
(instance.l = closureSignals),
(instance.o = closureValues),
(instance.o = closureSignals),
(instance.u = closureValues),
instance
);
};
@ -1081,13 +1085,13 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
function _attr_content(scope, nodeAccessor, value) {
let content = (function (value) {
let renderer = normalizeDynamicRenderer(value);
if (renderer && renderer.e) return renderer;
if (renderer && renderer.g) return renderer;
})(value),
rendererAccessor = "D" + nodeAccessor;
scope[rendererAccessor] !== (scope[rendererAccessor] = content?.e) &&
scope[rendererAccessor] !== (scope[rendererAccessor] = content?.g) &&
(setConditionalRenderer(scope, nodeAccessor, content, createAndSetupBranch),
content?.b &&
subscribeToScopeSet(content.c, content.b, scope["A" + nodeAccessor]));
subscribeToScopeSet(content.e, content.b, scope["A" + nodeAccessor]));
}
function _attrs_script(scope, nodeAccessor) {
let el = scope[nodeAccessor],
@ -1168,18 +1172,47 @@ function _await(nodeAccessor, template, walks, setup, params) {
branchAccessor = "A" + nodeAccessor,
renderer = _content("", template, walks, setup)();
return (
enableBranches(),
_enable_catch(),
(scope, promise) => {
let referenceNode = scope[nodeAccessor],
tryWithPlaceholder = findBranchWithKey(scope, "Q"),
awaitBranch = scope[branchAccessor];
let awaitCounter,
renderData,
tryWithPlaceholder = findBranchWithKey(scope, "Q");
tryWithPlaceholder
? (placeholderShown.add(pendingEffects),
? ((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] &&
1 === (tryWithPlaceholder.O = (tryWithPlaceholder.O || 0) + 1) &&
!awaitCounter.i++ &&
requestAnimationFrame(
() =>
tryWithPlaceholder.O &&
awaitCounter.i &&
runEffects(
prepareEffects(() =>
queueRender(
@ -1202,10 +1235,13 @@ function _await(nodeAccessor, template, walks, setup, params) {
),
),
))
: awaitBranch &&
: scope[branchAccessor] &&
!scope[promiseAccessor] &&
(awaitBranch.S.parentNode.insertBefore(referenceNode, awaitBranch.S),
tempDetachBranch(awaitBranch));
(scope[branchAccessor].S.parentNode.insertBefore(
scope[nodeAccessor],
scope[branchAccessor].S,
),
tempDetachBranch(scope[branchAccessor]));
let thisPromise = (scope[promiseAccessor] = promise.then(
(data) => {
thisPromise === scope[promiseAccessor] &&
@ -1215,39 +1251,41 @@ function _await(nodeAccessor, template, walks, setup, params) {
scope,
() => {
if (
(awaitBranch
(scope[branchAccessor]
? tryWithPlaceholder ||
referenceNode.replaceWith(awaitBranch.S.parentNode)
scope[nodeAccessor].replaceWith(
scope[branchAccessor].S.parentNode,
)
: (insertBranchBefore(
(awaitBranch = scope[branchAccessor] =
createAndSetupBranch(
scope.$,
renderer,
scope,
referenceNode.parentNode,
)),
referenceNode.parentNode,
referenceNode,
(scope[branchAccessor] = createAndSetupBranch(
scope.$,
renderer,
scope,
scope[nodeAccessor].parentNode,
)),
scope[nodeAccessor].parentNode,
scope[nodeAccessor],
),
referenceNode.remove()),
params?.(awaitBranch, [data]),
tryWithPlaceholder &&
scope[nodeAccessor].remove()),
params?.(scope[branchAccessor], [data]),
awaitCounter &&
(placeholderShown.add(pendingEffects),
!--tryWithPlaceholder.O))
awaitCounter.c(),
!awaitCounter.d))
) {
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));
}));
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++]));
}
for (let i = 0; i < effects.length; ) {
let fn = effects[i++],
scope2 = effects[i++];
fnScopes.get(fn)?.has(scope2) || queueEffect(scope2, fn);
}
}
},
-1,
@ -1255,7 +1293,7 @@ function _await(nodeAccessor, template, walks, setup, params) {
},
(error) => {
thisPromise === scope[promiseAccessor] &&
(tryWithPlaceholder && (tryWithPlaceholder.O = 0),
(awaitCounter && (awaitCounter.i = 0),
(scope[promiseAccessor] = 0),
schedule(),
queueRender(scope, renderCatch, -1, error));
@ -1289,7 +1327,7 @@ function renderCatch(scope, error) {
let owner = tryWithCatch._,
placeholderBranch = tryWithCatch.P;
(placeholderBranch &&
((tryWithCatch.O = 0),
(tryWithCatch.O && (tryWithCatch.O.i = 0),
(owner["A" + tryWithCatch.C] = placeholderBranch),
destroyBranch(tryWithCatch)),
caughtError.add(pendingEffects),
@ -1333,7 +1371,7 @@ var _dynamic_tag = function (nodeAccessor, getContent, getTagVar, inputIsArgs) {
if (
scope[rendererAccessor] !==
(scope[rendererAccessor] =
normalizedRenderer?.e || normalizedRenderer) ||
normalizedRenderer?.g || normalizedRenderer) ||
(getContent && !normalizedRenderer && !scope[childScopeAccessor])
)
if (
@ -1358,7 +1396,7 @@ var _dynamic_tag = function (nodeAccessor, getContent, getTagVar, inputIsArgs) {
),
content.b &&
subscribeToScopeSet(
content.c,
content.e,
content.b,
scope[childScopeAccessor].Aa,
));
@ -1366,7 +1404,7 @@ var _dynamic_tag = function (nodeAccessor, getContent, getTagVar, inputIsArgs) {
} else
normalizedRenderer?.b &&
subscribeToScopeSet(
normalizedRenderer.c,
normalizedRenderer.e,
normalizedRenderer.b,
scope[childScopeAccessor],
);
@ -1382,10 +1420,10 @@ var _dynamic_tag = function (nodeAccessor, getContent, getTagVar, inputIsArgs) {
(childScope.Ia || childScope.Ea) &&
queueEffect(childScope, dynamicTagScript));
else {
for (let accessor in normalizedRenderer.l)
normalizedRenderer.l[accessor](
for (let accessor in normalizedRenderer.o)
normalizedRenderer.o[accessor](
childScope,
normalizedRenderer.o[accessor],
normalizedRenderer.u[accessor],
);
if (normalizedRenderer.a)
if (inputIsArgs)
@ -1682,14 +1720,14 @@ var rendering,
function queueRender(scope, signal, signalKey, value, scopeKey = scope.L) {
let key = scopeKey * scopeKeyOffset + signalKey,
existingRender = signalKey >= 0 && pendingRendersLookup.get(key);
if (existingRender) existingRender.m = value;
if (existingRender) existingRender.q = value;
else {
let render = { d: key, h: scope, p: signal, m: value },
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.d >= 0) break;
if (key - parent.f >= 0) break;
((pendingRenders[i] = parent), (i = parentIndex));
}
(signalKey >= 0 && pendingRendersLookup.set(key, render),
@ -1737,32 +1775,32 @@ function runRenders() {
if (render !== item) {
let i = 0,
mid = pendingRenders.length >> 1,
key = (pendingRenders[0] = item).d;
key = (pendingRenders[0] = item).f;
for (; i < mid; ) {
let bestChild = 1 + (i << 1),
right = bestChild + 1;
if (
(right < pendingRenders.length &&
pendingRenders[right].d - pendingRenders[bestChild].d < 0 &&
pendingRenders[right].f - pendingRenders[bestChild].f < 0 &&
(bestChild = right),
pendingRenders[bestChild].d - key >= 0)
pendingRenders[bestChild].f - key >= 0)
)
break;
((pendingRenders[i] = pendingRenders[bestChild]), (i = bestChild));
}
pendingRenders[i] = item;
}
render.h.F?.I || runRender(render);
render.k.F?.I || runRender(render);
}
for (let scope of pendingScopes) scope.H = 0;
pendingScopes = [];
}
var runRender = (render) => render.p(render.h, render.m),
var runRender = (render) => render.x(render.k, render.q),
_enable_catch = () => {
((_enable_catch = () => {}), enableBranches());
let handlePendingTry = (fn, scope, branch) => {
for (; branch; ) {
if (branch.O) return (branch.J ||= []).push(fn, scope);
if (branch.O?.i) return (branch.J ||= []).push(fn, scope);
branch = branch.N;
}
};
@ -1788,7 +1826,7 @@ var runRender = (render) => render.p(render.h, render.m),
try {
runRender2(render);
} catch (error) {
renderCatch(render.h, error);
renderCatch(render.k, error);
}
})(runRender)));
};
@ -1820,7 +1858,7 @@ var classIdToBranch = new Map(),
registerRenderer(fn) {
_resume("$C_r", fn);
},
isRenderer: (renderer) => renderer.f,
isRenderer: (renderer) => renderer.h,
getStartNode: (branch) => branch.S,
setScopeNodes(branch, startNode, endNode) {
((branch.S = startNode), (branch.K = endNode));
@ -1845,7 +1883,7 @@ var classIdToBranch = new Map(),
createRenderer(params, clone) {
let renderer = _content("", 0, 0, 0, params)();
return (
(renderer.f = (branch) => {
(renderer.h = (branch) => {
let cloned = clone();
((branch.S = cloned.startNode), (branch.K = cloned.endNode));
}),
@ -1874,7 +1912,7 @@ var classIdToBranch = new Map(),
createAndSetupBranch(
out.global,
renderer,
renderer.c,
renderer.e,
document.body,
))),
renderer.a?.(branch, renderer._ ? args[0] : args));
@ -1921,7 +1959,7 @@ function mount(input = {}, reference, position) {
(branch.T = (newValue) => {
curValue = newValue;
}),
this.g?.(branch),
this.j?.(branch),
args?.(branch, input));
});
return (

2
.sizes/name-cache.json
View File

@ -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"}}}
{"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"}}}

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

@ -1,16 +1,16 @@
# Write
```html
<div data-level=4><!--M_[--><div data-level=3><!--M_[--><!--M_!^b-->LOADING...<!--M_!b--><!--M_]7 #text/1 8--></div><!--M_]3 #text/1 4--></div><style M_>t{display:none}</style><t M_=b><!--M_#c--></t><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[0,3,_.a={"#BranchAccessor":"#text/1","#PlaceholderContent":_.c={}}],_.a["#PlaceholderContent"]=_._["__tests__/tags/recurse.marko_4_content"](_.c),_.b),_=>(_.e=[3,_.d={"#BranchAccessor":"#text/1","#PlaceholderContent":_.f={}}],_.d["#PlaceholderContent"]=_._["__tests__/tags/recurse.marko_4_content"](_.f),_.e)];REORDER_RUNTIME(M._);M._.w()</script>
<div data-level=4><!--M_[--><div data-level=3><!--M_[--><!--M_!^8-->LOADING...<!--M_!8--><!--M_]7 #text/1 8--></div><!--M_]3 #text/1 4--></div><style M_>t{display:none}</style><t M_=8><!--M_#b--></t><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[0,3,_.a={"#BranchAccessor":"#text/1","#PlaceholderContent":_.c={}}],_.a["#PlaceholderContent"]=_._["__tests__/tags/recurse.marko_4_content"](_.c),_.b),_=>(_.e=[3,_.d={"#BranchAccessor":"#text/1","#PlaceholderContent":_.f={}}],_.d["#PlaceholderContent"]=_._["__tests__/tags/recurse.marko_4_content"](_.f),_.e)];REORDER_RUNTIME(M._);M._.w()</script>
```
# Write
```html
<t M_=c><div data-level=2><!--M_[--><div data-level=1><!--M_[--><!--M_!^d-->LOADING...<!--M_!d--><!--M_]16 #text/1 17--></div><!--M_]12 #text/1 13--></div></t><t M_=d><!--M_#e--></t><script>M._.r.push(_=>(_.h=[4,_.g={"#BranchAccessor":"#text/1","#PlaceholderContent":_.i={}}],_.g["#PlaceholderContent"]=_._["__tests__/tags/recurse.marko_4_content"](_.i),_.h),_=>(_.k=[3,_.j={"#BranchAccessor":"#text/1","#PlaceholderContent":_.l={}}],_.j["#PlaceholderContent"]=_._["__tests__/tags/recurse.marko_4_content"](_.l),_.k));M._.w()</script>
<t M_=b><div data-level=2><!--M_[--><div data-level=1><!--M_[--><!--M_!^17-->LOADING...<!--M_!17--><!--M_]16 #text/1 17--></div><!--M_]12 #text/1 13--></div></t><t M_=17><!--M_#c--></t><script>M._.r.push(_=>(_.h=[4,_.g={"#BranchAccessor":"#text/1","#PlaceholderContent":_.i={}}],_.g["#PlaceholderContent"]=_._["__tests__/tags/recurse.marko_4_content"](_.i),_.h),_=>(_.k=[3,_.j={"#BranchAccessor":"#text/1","#PlaceholderContent":_.l={}}],_.j["#PlaceholderContent"]=_._["__tests__/tags/recurse.marko_4_content"](_.l),_.k));M._.w()</script>
```
# Write
```html
<t M_=e></t><script>M._.w()</script>
<t M_=c></t><script>M._.w()</script>
```
# Render ASYNC
@ -32,9 +32,9 @@
data-level="3"
>
<!--M_[-->
<!--M_!^b-->
<!--M_!^8-->
LOADING...
<!--M_!b-->
<!--M_!8-->
<!--M_]7 #text/1 8-->
</div>
<!--M_]3 #text/1 4-->
@ -110,9 +110,9 @@ INSERT html/body/script
data-level="1"
>
<!--M_[-->
<!--M_!^d-->
<!--M_!^17-->
LOADING...
<!--M_!d-->
<!--M_!17-->
<!--M_]16 #text/1 17-->
</div>
<!--M_]12 #text/1 13-->

14
packages/runtime-tags/src/__tests__/fixtures/async-reorder-nested-batched-resolve/__snapshots__/ssr.expected.md
View File

@ -1,16 +1,16 @@
# Write
```html
<!--M_[--><!--M_!^b-->LOADING A1<!--M_!b--><!--M_]1 #text/0 2--><style M_>t{display:none}</style><t M_=b><!--M_#c--></t><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[0,1,_.a={"#BranchAccessor":"#text/0","#PlaceholderContent":_.c={}}],_.a["#PlaceholderContent"]=_._["__tests__/template.marko_4_content"](_.c),_.b)];REORDER_RUNTIME(M._);M._.w()</script>
<!--M_[--><!--M_!^2-->LOADING A1<!--M_!2--><!--M_]1 #text/0 2--><style M_>t{display:none}</style><t M_=2><!--M_#b--></t><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[0,1,_.a={"#BranchAccessor":"#text/0","#PlaceholderContent":_.c={}}],_.a["#PlaceholderContent"]=_._["__tests__/template.marko_4_content"](_.c),_.b)];REORDER_RUNTIME(M._);M._.w()</script>
```
# Write
```html
<t M_=c><div class=a level=1><!--M_[--><div class=a level=2><!--M_[--><!--M_!^d-->LOADING B1<!--M_!d--><!--M_]6 #text/1 7--></div><!--M_]4 #text/1 5--></div></t><t M_=d><!--M_#e--></t><script>M._.r.push(_=>(_.e=[2,_.d={"#BranchAccessor":"#text/1","#PlaceholderContent":_.f={}}],_.d["#PlaceholderContent"]=_._["__tests__/template.marko_5_content"](_.f),_.e),_=>(_.h=[1,_.g={"#BranchAccessor":"#text/1","#PlaceholderContent":_.i={}}],_.g["#PlaceholderContent"]=_._["__tests__/template.marko_10_content"](_.i),_.h));M._.w()</script>
<t M_=b><div class=a level=1><!--M_[--><div class=a level=2><!--M_[--><!--M_!^7-->LOADING B1<!--M_!7--><!--M_]6 #text/1 7--></div><!--M_]4 #text/1 5--></div></t><t M_=7><!--M_#c--></t><script>M._.r.push(_=>(_.e=[2,_.d={"#BranchAccessor":"#text/1","#PlaceholderContent":_.f={}}],_.d["#PlaceholderContent"]=_._["__tests__/template.marko_5_content"](_.f),_.e),_=>(_.h=[1,_.g={"#BranchAccessor":"#text/1","#PlaceholderContent":_.i={}}],_.g["#PlaceholderContent"]=_._["__tests__/template.marko_10_content"](_.i),_.h));M._.w()</script>
```
# Write
```html
<t M_=e><div class=b level=3><!--M_[--><div class=b level=4></div><!--M_]9 #text/1 10--></div></t><script>M._.r.push(_=>(_.k=[2,_.j={"#BranchAccessor":"#text/1","#PlaceholderContent":_.l={}}],_.j["#PlaceholderContent"]=_._["__tests__/template.marko_11_content"](_.l),_.k));M._.w()</script>
<t M_=c><div class=b level=3><!--M_[--><div class=b level=4></div><!--M_]9 #text/1 10--></div></t><script>M._.r.push(_=>(_.k=[2,_.j={"#BranchAccessor":"#text/1","#PlaceholderContent":_.l={}}],_.j["#PlaceholderContent"]=_._["__tests__/template.marko_11_content"](_.l),_.k));M._.w()</script>
```
# Render ASYNC
@ -25,9 +25,9 @@
</head>
<body>
<!--M_[-->
<!--M_!^b-->
<!--M_!^2-->
LOADING A1
<!--M_!b-->
<!--M_!2-->
<!--M_]1 #text/0 2-->
<script>
WALKER_RUNTIME("M")("_");
@ -86,9 +86,9 @@ INSERT html/body/script
level="2"
>
<!--M_[-->
<!--M_!^d-->
<!--M_!^7-->
LOADING B1
<!--M_!d-->
<!--M_!7-->
<!--M_]6 #text/1 7-->
</div>
<!--M_]4 #text/1 5-->

8
packages/runtime-tags/src/__tests__/fixtures/async-state/__snapshots__/ssr.expected.md
View File

@ -1,11 +1,11 @@
# Write
```html
<button>inc</button><!--M_*1 #button/0--><!--M_[--><!--M_!^b-->LOADING...<!--M_!b--><!--M_]1 #text/1 2--><style M_>t{display:none}</style><t M_=b><!--M_#c--></t><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.c=[0,_.a={clickCount:0,"ClosureScopes:clickCount":_.d=new Set},_.b={_:_.a,"ClosureSignalIndex:clickCount":0,"#BranchAccessor":"#text/1"}],_.b["#PlaceholderContent"]=_._["__tests__/template.marko_2_content"](_.a),(_.d).add(_.b),_.c),"__tests__/template.marko_0_clickCount",1];REORDER_RUNTIME(M._);M._.w()</script>
<button>inc</button><!--M_*1 #button/0--><!--M_[--><!--M_!^2-->LOADING...<!--M_!2--><!--M_]1 #text/1 2--><style M_>t{display:none}</style><t M_=2><!--M_#b--></t><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.c=[0,_.a={clickCount:0,"ClosureScopes:clickCount":_.d=new Set},_.b={_:_.a,"ClosureSignalIndex:clickCount":0,"#BranchAccessor":"#text/1"}],_.b["#PlaceholderContent"]=_._["__tests__/template.marko_2_content"](_.a),(_.d).add(_.b),_.c),"__tests__/template.marko_0_clickCount",1];REORDER_RUNTIME(M._);M._.w()</script>
```
# Write
```html
<t M_=c><!--M_[-->0<!--M_*4 #text/0--><!--M_]2 #text/0 4--></t><script>M._.r.push(_=>(_.e=[1,{}]));M._.w()</script>
<t M_=b><!--M_[-->0<!--M_*4 #text/0--><!--M_]2 #text/0 4--></t><script>M._.r.push(_=>(_.e=[1,{}]));M._.w()</script>
```
# Render ASYNC
@ -24,9 +24,9 @@
</button>
<!--M_*1 #button/0-->
<!--M_[-->
<!--M_!^b-->
<!--M_!^2-->
LOADING...
<!--M_!b-->
<!--M_!2-->
<!--M_]1 #text/1 2-->
<script>
WALKER_RUNTIME("M")("_");

17
packages/runtime-tags/src/__tests__/fixtures/await-remove-parent/__snapshots__/.name-cache.json Normal file
View File

@ -0,0 +1,17 @@
{
"vars": {
"props": {
"$_": "t",
"$init": "e",
"$resolveAfter": "o",
"$$await_content__setup": "r",
"$$placeholder_content": "a",
"$$try_content__await": "m",
"$$try_content__setup": "i",
"$$if_content__try": "c",
"$$if_content__setup": "n",
"$$if": "s",
"$$show": "_"
}
}
}

18
packages/runtime-tags/src/__tests__/fixtures/await-remove-parent/__snapshots__/csr-sanitized.expected.md Normal file
View File

@ -0,0 +1,18 @@
# Render
```html
<div
id="outside"
>
Pass
</div>
```
# Render ASYNC
```html
<div
id="outside"
>
Pass
</div>
```

38
packages/runtime-tags/src/__tests__/fixtures/await-remove-parent/__snapshots__/csr.expected.md Normal file
View File

@ -0,0 +1,38 @@
# Render
```html
<div
id="outside"
>
Pass
</div>
<!---->
<!---->
<!---->
<!---->
<!---->
```
# Mutations
```
INSERT div, #comment0, #comment1, #text, #comment2, #comment3, #comment4
```
# Render ASYNC
```html
<div
id="outside"
>
Pass
</div>
<!---->
```
# Mutations
```
INSERT #text
REMOVE #comment after #text
REMOVE #comment after #text
REMOVE #text after #text
REMOVE #comment after #text
REMOVE #comment after #text
```

20
packages/runtime-tags/src/__tests__/fixtures/await-remove-parent/__snapshots__/dom.expected/template.hydrate.js Normal file
View File

@ -0,0 +1,20 @@
// size: 354 (min) 217 (brotli)
_._enable_catch();
const $await_content__setup = _._script(
"a0",
($scope) => (document.querySelector("#outside").textContent = "Fail"),
),
$placeholder_content = _._content_resume("a1", "loading...", "b"),
$try_content__await = _._await(0, 0, 0, $await_content__setup),
$try_content__setup = ($scope) => {
$try_content__await($scope, resolveAfter(0, 1));
},
$if_content__try = _._try(0, "<!><!><!>", "b%c", $try_content__setup),
$if_content__setup = ($scope) => {
$if_content__try($scope, {
placeholder: _.attrTag({ content: $placeholder_content($scope) }),
});
},
$if = _._if(0, "<!><!><!>", "b%c", $if_content__setup),
$show = _._let(1, ($scope) => $if($scope, $scope.b ? 0 : 1));
(_._script("a2", ($scope) => $show($scope, 0)), init());

28
packages/runtime-tags/src/__tests__/fixtures/await-remove-parent/__snapshots__/dom.expected/template.js Normal file
View File

@ -0,0 +1,28 @@
export const $template = "<div id=outside>Pass</div><!><!>";
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 $await_content__setup__script = _._script("__tests__/template.marko_4", $scope => (document.querySelector('#outside').textContent = "Fail"));
const $await_content__setup = $await_content__setup__script;
const $placeholder_content = _._content_resume("__tests__/template.marko_3_content", "loading...", /* over(1) */"b");
const $try_content__await = /* @__PURE__ */_._await("#text/0", 0, 0, $await_content__setup);
const $try_content__setup = $scope => {
$try_content__await($scope, resolveAfter(0, 1));
};
const $if_content__try = /* @__PURE__ */_._try("#text/0", "<!><!><!>", /* over(1), replace, over(2) */"b%c", $try_content__setup);
const $if_content__setup = $scope => {
$if_content__try($scope, {
placeholder: _.attrTag({
content: $placeholder_content($scope)
})
});
};
const $if = /* @__PURE__ */_._if("#text/0", "<!><!><!>", /* over(1), replace, over(2) */"b%c", $if_content__setup);
const $show = /* @__PURE__ */_._let("show/1", $scope => $if($scope, $scope.show ? 0 : 1));
const $setup__script = _._script("__tests__/template.marko_0", $scope => $show($scope, 0));
export function $setup($scope) {
$show($scope, 1);
$setup__script($scope);
}
export default /* @__PURE__ */_._template("__tests__/template.marko", $template, $walks, $setup);

31
packages/runtime-tags/src/__tests__/fixtures/await-remove-parent/__snapshots__/html.expected/template.js Normal file
View File

@ -0,0 +1,31 @@
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();
let show = 1;
_._html("<div id=outside>Pass</div>");
_._if(() => {
if (show) {
const $scope1_id = _._scope_id();
_._try($scope1_id, "#text/0", _._content_resume("__tests__/template.marko_2_content", () => {
const $scope2_id = _._scope_id();
_._await($scope2_id, "#text/0", resolveAfter(0, 1), () => {
const $scope4_id = _._scope_id();
_._script($scope4_id, "__tests__/template.marko_4");
}, 0);
}, $scope1_id), {
placeholder: _.attrTag({
content: _._content_resume("__tests__/template.marko_3_content", () => {
const $scope3_id = _._scope_id();
_._html("loading...");
}, $scope1_id)
})
});
_._scope($scope1_id, {}, "__tests__/template.marko", "5:1");
return 0;
}
}, $scope0_id, "#text/0");
_._script($scope0_id, "__tests__/template.marko_0");
_._scope($scope0_id, {}, "__tests__/template.marko", 0);
_._resume_branch($scope0_id);
});

8
packages/runtime-tags/src/__tests__/fixtures/await-remove-parent/__snapshots__/resume-sanitized.expected.md Normal file
View File

@ -0,0 +1,8 @@
# Render
```html
<div
id="outside"
>
Pass
</div>
```

47
packages/runtime-tags/src/__tests__/fixtures/await-remove-parent/__snapshots__/resume.expected.md Normal file
View File

@ -0,0 +1,47 @@
# Render
```html
<html>
<head>
<style
m_=""
>
t{display:none}
</style>
</head>
<body>
<div
id="outside"
>
Pass
</div>
<!--M_]1 #text/0 2-->
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{}, _.c = {}, _.a = {
"#BranchAccessor": "#text/0"
}], _.a["#PlaceholderContent"] = _._[
"__tests__/template.marko_3_content"
](_.c), _.b),
"__tests__/template.marko_0",
1
];
REORDER_RUNTIME(M._);
M._.w()
</script>
<script>
M._.r.push(_ =&gt; (_.d = [1,
{
"#ClosestBranchId": 2
}]));
M._.j.b = _ =&gt;
{
_.push(
"__tests__/template.marko_4",
5)
};
M._.w()
</script>
</body>
</html>
```

19
packages/runtime-tags/src/__tests__/fixtures/await-remove-parent/__snapshots__/ssr-sanitized.expected.md Normal file
View File

@ -0,0 +1,19 @@
# Render ASYNC
```html
<div
id="outside"
>
Pass
</div>
loading...
```
# Render ASYNC
```html
<div
id="outside"
>
Pass
</div>
```

135
packages/runtime-tags/src/__tests__/fixtures/await-remove-parent/__snapshots__/ssr.expected.md Normal file
View File

@ -0,0 +1,135 @@
# Write
```html
<div id=outside>Pass</div><!--M_[--><!--M_[--><!--M_!^3-->loading...<!--M_!3--><!--M_]2 #text/0 3--><!--M_]1 #text/0 2--><style M_>t{display:none}</style><t M_=3><!--M_#b--></t><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[0,{},_.c={},_.a={"#BranchAccessor":"#text/0"}],_.a["#PlaceholderContent"]=_._["__tests__/template.marko_3_content"](_.c),_.b),"__tests__/template.marko_0",1];REORDER_RUNTIME(M._);M._.w()</script>
```
# Write
```html
<t M_=b></t><script>M._.r.push(_=>(_.d=[1,{"#ClosestBranchId":2}]));M._.j.b=_=>{_.push("__tests__/template.marko_4",5)};M._.w()</script>
```
# Render ASYNC
```html
<html>
<head>
<style
m_=""
>
t{display:none}
</style>
</head>
<body>
<div
id="outside"
>
Pass
</div>
<!--M_[-->
<!--M_[-->
<!--M_!^3-->
loading...
<!--M_!3-->
<!--M_]2 #text/0 3-->
<!--M_]1 #text/0 2-->
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{}, _.c = {}, _.a = {
"#BranchAccessor": "#text/0"
}], _.a["#PlaceholderContent"] = _._[
"__tests__/template.marko_3_content"
](_.c), _.b),
"__tests__/template.marko_0",
1
];
REORDER_RUNTIME(M._);
M._.w()
</script>
</body>
</html>
```
# Mutations
```
INSERT html
INSERT html/head
INSERT html/body
INSERT html/body/div
INSERT html/body/div/#text
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/body/#comment5
INSERT html/head/style
INSERT html/head/style/#text
INSERT t
INSERT t/#comment
REMOVE html/head/style after html/body/#comment5
INSERT html/head/style
REMOVE t after html/body/#comment5
INSERT html/body/script
```
# Render ASYNC
```html
<html>
<head>
<style
m_=""
>
t{display:none}
</style>
</head>
<body>
<div
id="outside"
>
Pass
</div>
<!--M_[-->
<!--M_[-->
<!--M_]2 #text/0 3-->
<!--M_]1 #text/0 2-->
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.b = [0,
{}, _.c = {}, _.a = {
"#BranchAccessor": "#text/0"
}], _.a["#PlaceholderContent"] = _._[
"__tests__/template.marko_3_content"
](_.c), _.b),
"__tests__/template.marko_0",
1
];
REORDER_RUNTIME(M._);
M._.w()
</script>
<script>
M._.r.push(_ =&gt; (_.d = [1,
{
"#ClosestBranchId": 2
}]));
M._.j.b = _ =&gt;
{
_.push(
"__tests__/template.marko_4",
5)
};
M._.w()
</script>
</body>
</html>
```
# Mutations
```
INSERT t
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/script1
```

9
packages/runtime-tags/src/__tests__/fixtures/await-remove-parent/template.marko Normal file
View File

@ -0,0 +1,9 @@
import { resolveAfter } from "../../utils/resolve";
let/show=1
script -- show = 0
div#outside -- Pass
if=show
try
@placeholder -- loading...
await=resolveAfter(0, 1)
script -- document.querySelector('#outside')!.textContent = "Fail"

3
packages/runtime-tags/src/__tests__/fixtures/await-remove-parent/test.ts Normal file
View File

@ -0,0 +1,3 @@
import { wait } from "../../utils/resolve";
export const steps = [{}, wait(2)];

17
packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/.name-cache.json Normal file
View File

@ -0,0 +1,17 @@
{
"vars": {
"props": {
"$_": "t",
"$init": "o",
"$resolveAfter": "e",
"$$await_content__value": "r",
"$$await_content__setup": "c",
"$$await_content__$params": "i",
"$$try_content__await": "s",
"$$try_content__value": "n",
"$$value__closure": "_",
"$$value": "a",
"$$await_content__value__script": "m"
}
}
}

44
packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/csr-sanitized.expected.md Normal file
View File

@ -0,0 +1,44 @@
# Render
```html
<div
id="outside"
>
0
</div>
```
# Render ASYNC
```html
<div
id="outside"
>
1
</div>
```
# Render ASYNC
```html
<div
id="outside"
>
1
</div>
loading...
```
# Render ASYNC
```html
<div
id="outside"
>
1 effect ran
</div>
<div
id="inside"
>
1 effect ran 1
</div>
```

79
packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/csr.expected.md Normal file
View File

@ -0,0 +1,79 @@
# Render
```html
<div
id="outside"
>
0
</div>
<!---->
<!---->
<!---->
```
# Mutations
```
INSERT div, #comment0, #text, #comment1, #comment2
```
# Render ASYNC
```html
<div
id="outside"
>
1
</div>
<!---->
<!---->
<!---->
```
# Mutations
```
UPDATE div/#text "0" => "1"
```
# Render ASYNC
```html
<div
id="outside"
>
1
</div>
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
<div
id="outside"
>
1 effect ran
</div>
<!---->
<div
id="inside"
>
1 effect ran 1
</div>
<!---->
<!---->
```
# Mutations
```
INSERT #comment0, div1, #comment1
REMOVE #text after #comment1
REMOVE #text in div1
INSERT div1/#text
REMOVE #text in div0
INSERT div0/#text
```

35
packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/dom.expected/template.hydrate.js Normal file
View File

@ -0,0 +1,35 @@
// size: 487 (min) 245 (brotli)
_._enable_catch();
const $await_content__value__script = _._script(
"a0",
($scope) =>
(document.querySelector("#inside").textContent +=
` effect ran ${$scope.c}`),
),
$await_content__value = _._const(2, ($scope) => {
(_._text($scope.a, $scope.c), $await_content__value__script($scope));
}),
$await_content__setup = _._script(
"a1",
($scope) =>
(document.querySelector("#outside").textContent += " effect ran"),
),
$await_content__$params = _._const(1, ($scope) =>
$await_content__value($scope, $scope.b[0]),
);
_._content_resume("a2", "loading...", "b");
const $try_content__await = _._await(
0,
"<div id=inside> </div>",
"D l",
$await_content__setup,
$await_content__$params,
),
$try_content__value = _._closure_get(2, ($scope) =>
$try_content__await($scope, resolveAfter($scope._.c, 10)),
),
$value__closure = _._closure($try_content__value),
$value = _._let(2, ($scope) => {
(_._text($scope.a, $scope.c), $value__closure($scope));
});
(_._script("a3", ($scope) => $value($scope, 1)), init());

34
packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/dom.expected/template.js Normal file
View File

@ -0,0 +1,34 @@
export const $template = "<div id=outside> </div><!><!>";
export const $walks = /* 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 $await_content__value__script = _._script("__tests__/template.marko_3_value", $scope => (document.querySelector('#inside').textContent += ` effect ran ${$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 = $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");
const $try_content__await = /* @__PURE__ */_._await("#text/0", "<div id=inside> </div>", /* next(1), get, out(1) */"D l", $await_content__setup, $await_content__$params);
const $try_content__value = /* @__PURE__ */_._closure_get("value", $scope => $try_content__await($scope, resolveAfter($scope._.value, 10)));
const $try_content__setup = $try_content__value;
const $value__closure = /* @__PURE__ */_._closure($try_content__value);
const $value = /* @__PURE__ */_._let("value/2", $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));
export function $setup($scope) {
$value($scope, 0);
$try($scope, {
placeholder: _.attrTag({
content: $placeholder_content($scope)
})
});
$setup__script($scope);
}
export default /* @__PURE__ */_._template("__tests__/template.marko", $template, $walks, $setup);

39
packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/html.expected/template.js Normal file
View File

@ -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 = 0;
_._html(`<div id=outside>${_._escape(value)}${_._el_resume($scope0_id, "#text/0")}</div>`);
_._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 => {
const $scope3_id = _._scope_id();
_._html(`<div id=inside>${_._escape(value)}${_._el_resume($scope3_id, "#text/0")}</div>`);
_._script($scope3_id, "__tests__/template.marko_3");
_._script($scope3_id, "__tests__/template.marko_3_value");
_._scope($scope3_id, {
value
}, "__tests__/template.marko", "7:3", {
value: "7:9"
});
});
_._subscribe($value__closures, _._scope($scope1_id, {
_: _._scope_with_id($scope0_id),
"ClosureSignalIndex:value": 0
}, "__tests__/template.marko", "5:1"));
_._resume_branch($scope1_id);
}, $scope0_id), {
placeholder: _.attrTag({
content: _._content_resume("__tests__/template.marko_2_content", () => {
const $scope2_id = _._scope_id();
_._html("loading...");
}, $scope0_id)
})
});
_._script($scope0_id, "__tests__/template.marko_0");
_._scope($scope0_id, {
"ClosureScopes:value": $value__closures
}, "__tests__/template.marko", 0);
_._resume_branch($scope0_id);
});

24
packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/resume-sanitized.expected.md Normal file
View File

@ -0,0 +1,24 @@
# Render
```html
<div
id="outside"
>
1
</div>
loading...
```
# Render ASYNC
```html
<div
id="outside"
>
1 effect ran
</div>
<div
id="inside"
>
1 effect ran 1
</div>
```

131
packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/resume.expected.md Normal file
View File

@ -0,0 +1,131 @@
# Render
```html
<html>
<head>
<style
m_=""
>
t{display:none}
</style>
</head>
<body>
<div
id="outside"
>
1
<!--M_*1 #text/0-->
</div>
<!--M_[-->
<!--M_!^2-->
loading...
<!--M_!2-->
<!--M_]1 #text/1 2-->
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.c = [0, _.a = {
"ClosureScopes:value": _.d = new Set
}, _.b = {
_: _.a,
"ClosureSignalIndex:value": 0,
"#BranchAccessor": "#text/1"
}], _.b["#PlaceholderContent"] = _._[
"__tests__/template.marko_2_content"
](_.a), (_.d).add(_.b), _.c),
"__tests__/template.marko_0",
1
];
REORDER_RUNTIME(M._);
M._.w()
</script>
<script>
M._.r.push(_ =&gt; (_.e = [1,
{
value: 0
}]));
M._.j.b = _ =&gt;
{
_.push(
"__tests__/template.marko_3",
4,
"__tests__/template.marko_3_value",
4)
};
M._.w()
</script>
</body>
</html>
```
# Render ASYNC
```html
<html>
<head>
<style
m_=""
>
t{display:none}
</style>
</head>
<body>
<div
id="outside"
>
1 effect ran
</div>
<!--M_[-->
<!--M_[-->
<div
id="inside"
>
1 effect ran 1
</div>
<!--M_]2 #text/0 4-->
<!--M_]1 #text/1 2-->
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.c = [0, _.a = {
"ClosureScopes:value": _.d = new Set
}, _.b = {
_: _.a,
"ClosureSignalIndex:value": 0,
"#BranchAccessor": "#text/1"
}], _.b["#PlaceholderContent"] = _._[
"__tests__/template.marko_2_content"
](_.a), (_.d).add(_.b), _.c),
"__tests__/template.marko_0",
1
];
REORDER_RUNTIME(M._);
M._.w()
</script>
<script>
M._.r.push(_ =&gt; (_.e = [1,
{
value: 0
}]));
M._.j.b = _ =&gt;
{
_.push(
"__tests__/template.marko_3",
4,
"__tests__/template.marko_3_value",
4)
};
M._.w()
</script>
</body>
</html>
```
# Mutations
```
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/#text0, html/body/#comment2
REMOVE #text, #comment in html/body/div1
INSERT html/body/div1/#text
REMOVE #text, #comment in html/body/div0
INSERT html/body/div0/#text
```

24
packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/ssr-sanitized.expected.md Normal file
View File

@ -0,0 +1,24 @@
# Render ASYNC
```html
<div
id="outside"
>
0
</div>
loading...
```
# Render ASYNC
```html
<div
id="outside"
>
0
</div>
<div
id="inside"
>
0
</div>
```

154
packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/__snapshots__/ssr.expected.md Normal file
View File

@ -0,0 +1,154 @@
# Write
```html
<div id=outside>0<!--M_*1 #text/0--></div><!--M_[--><!--M_!^2-->loading...<!--M_!2--><!--M_]1 #text/1 2--><style M_>t{display:none}</style><t M_=2><!--M_#b--></t><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.c=[0,_.a={"ClosureScopes:value":_.d=new Set},_.b={_:_.a,"ClosureSignalIndex:value":0,"#BranchAccessor":"#text/1"}],_.b["#PlaceholderContent"]=_._["__tests__/template.marko_2_content"](_.a),(_.d).add(_.b),_.c),"__tests__/template.marko_0",1];REORDER_RUNTIME(M._);M._.w()</script>
```
# Write
```html
<t M_=b><!--M_[--><div id=inside>0<!--M_*4 #text/0--></div><!--M_]2 #text/0 4--></t><script>M._.r.push(_=>(_.e=[1,{value:0}]));M._.j.b=_=>{_.push("__tests__/template.marko_3",4,"__tests__/template.marko_3_value",4)};M._.w()</script>
```
# Render ASYNC
```html
<html>
<head>
<style
m_=""
>
t{display:none}
</style>
</head>
<body>
<div
id="outside"
>
0
<!--M_*1 #text/0-->
</div>
<!--M_[-->
<!--M_!^2-->
loading...
<!--M_!2-->
<!--M_]1 #text/1 2-->
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.c = [0, _.a = {
"ClosureScopes:value": _.d = new Set
}, _.b = {
_: _.a,
"ClosureSignalIndex:value": 0,
"#BranchAccessor": "#text/1"
}], _.b["#PlaceholderContent"] = _._[
"__tests__/template.marko_2_content"
](_.a), (_.d).add(_.b), _.c),
"__tests__/template.marko_0",
1
];
REORDER_RUNTIME(M._);
M._.w()
</script>
</body>
</html>
```
# 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/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 ASYNC
```html
<html>
<head>
<style
m_=""
>
t{display:none}
</style>
</head>
<body>
<div
id="outside"
>
0
<!--M_*1 #text/0-->
</div>
<!--M_[-->
<!--M_[-->
<div
id="inside"
>
0
<!--M_*4 #text/0-->
</div>
<!--M_]2 #text/0 4-->
<!--M_]1 #text/1 2-->
<script>
WALKER_RUNTIME("M")("_");
M._.r = [_ =&gt; (_.c = [0, _.a = {
"ClosureScopes:value": _.d = new Set
}, _.b = {
_: _.a,
"ClosureSignalIndex:value": 0,
"#BranchAccessor": "#text/1"
}], _.b["#PlaceholderContent"] = _._[
"__tests__/template.marko_2_content"
](_.a), (_.d).add(_.b), _.c),
"__tests__/template.marko_0",
1
];
REORDER_RUNTIME(M._);
M._.w()
</script>
<script>
M._.r.push(_ =&gt; (_.e = [1,
{
value: 0
}]));
M._.j.b = _ =&gt;
{
_.push(
"__tests__/template.marko_3",
4,
"__tests__/template.marko_3_value",
4)
};
M._.w()
</script>
</body>
</html>
```
# 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
```

10
packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/template.marko Normal file
View File

@ -0,0 +1,10 @@
import { resolveAfter } from "../../utils/resolve";
let/value=0
script -- value = 1
div#outside -- ${value}
try
@placeholder -- loading...
await|value|=resolveAfter(value, 10)
div#inside -- ${value}
script -- document.querySelector('#inside')!.textContent += ` effect ran ${value}`
script -- document.querySelector('#outside')!.textContent += ` effect ran`

3
packages/runtime-tags/src/__tests__/fixtures/await-update-before-resume/test.ts Normal file
View File

@ -0,0 +1,3 @@
import { wait } from "../../utils/resolve";
export const steps = [{}, wait(11)];

7
packages/runtime-tags/src/__tests__/fixtures/log-tag/__snapshots__/dom.expected/template.hydrate.js
View File

@ -1,6 +1,3 @@
// size: 86 (min) 79 (brotli)
// size: 84 (min) 76 (brotli)
const $output = _._let(2, ($scope) => _._text($scope.a, $scope.c));
(_._script("a0", ($scope) => {
$output($scope, JSON.stringify(testLog));
}),
init());
(_._script("a0", ($scope) => $output($scope, JSON.stringify(testLog))), init());

5
packages/runtime-tags/src/__tests__/fixtures/log-tag/__snapshots__/dom.expected/template.js
View File

@ -5,10 +5,7 @@ const staticVar = "static var";
import * as _ from "@marko/runtime-tags/debug/dom";
const $tagVar = /* @__PURE__ */_._const("tagVar", $scope => console.log($scope.tagVar));
const $output = /* @__PURE__ */_._let("output/2", $scope => _._text($scope["#text/0"], $scope.output));
const $setup__script = _._script("__tests__/template.marko_0", $scope => {
debugger;
$output($scope, JSON.stringify(testLog));
});
const $setup__script = _._script("__tests__/template.marko_0", $scope => $output($scope, JSON.stringify(testLog)));
export function $setup($scope) {
console.log("identifier");
console.log(staticVar);

2
packages/runtime-tags/src/__tests__/fixtures/log-tag/template.marko
View File

@ -6,5 +6,5 @@ static const staticVar = "static var";
<log=staticVar/>
<let/output=JSON.stringify(testLog)/>
<script>debugger; output = JSON.stringify(testLog)</script>
<script>output = JSON.stringify(testLog)</script>
-- ${output}

12
packages/runtime-tags/src/__tests__/fixtures/placeholder-single/__snapshots__/ssr.expected.md
View File

@ -1,6 +1,6 @@
# Write
```html
a<!--M_[--><!--M_!^b-->_A_<!--M_!b--><!--M_]1 #text/0 2-->e<style M_>t{display:none}</style><t M_=b>b<!--M_#c-->d</t><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[0,1,_.a={"#BranchAccessor":"#text/0","#PlaceholderContent":_.c={}}],_.a["#PlaceholderContent"]=_._["__tests__/template.marko_2_content"](_.c),_.b)];REORDER_RUNTIME(M._);M._.w()</script>
a<!--M_[--><!--M_!^2-->_A_<!--M_!2--><!--M_]1 #text/0 2-->e<style M_>t{display:none}</style><t M_=2>b<!--M_#b-->d</t><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[0,1,_.a={"#BranchAccessor":"#text/0","#PlaceholderContent":_.c={}}],_.a["#PlaceholderContent"]=_._["__tests__/template.marko_2_content"](_.c),_.b)];REORDER_RUNTIME(M._);M._.w()</script>
```
# Write
@ -10,7 +10,7 @@
# Write
```html
<t M_=c>c</t><script>M._.w()</script>
<t M_=b>c</t><script>M._.w()</script>
```
# Render ASYNC
@ -26,9 +26,9 @@
<body>
a
<!--M_[-->
<!--M_!^b-->
<!--M_!^2-->
_A_
<!--M_!b-->
<!--M_!2-->
<!--M_]1 #text/0 2-->
e
<script>
@ -83,9 +83,9 @@ INSERT html/body/script
<body>
a
<!--M_[-->
<!--M_!^b-->
<!--M_!^2-->
_A_
<!--M_!b-->
<!--M_!2-->
<!--M_]1 #text/0 2-->
e
<script>

18
packages/runtime-tags/src/__tests__/fixtures/placeholders-nested/__snapshots__/ssr.expected.md
View File

@ -1,6 +1,6 @@
# Write
```html
a<!--M_[--><!--M_!^b-->_B_<!--M_!b--><!--M_]1 #text/0 2-->h<style M_>t{display:none}</style><t M_=b>b<!--M_#c-->d<!--M_[--><!--M_!^d-->_A_<!--M_!d--><!--M_]2 #text/1 3--></t><t M_=d>e<!--M_#e-->g</t><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.c=[0,1,_.a={"#BranchAccessor":"#text/0","#PlaceholderContent":_.d={}},_.b={"#BranchAccessor":"#text/1"}],_.a["#PlaceholderContent"]=_._["__tests__/template.marko_2_content"](_.d),_.b["#PlaceholderContent"]=_._["__tests__/template.marko_5_content"](_.a),_.c)];REORDER_RUNTIME(M._);M._.w()</script>
a<!--M_[--><!--M_!^2-->_B_<!--M_!2--><!--M_]1 #text/0 2-->h<style M_>t{display:none}</style><t M_=2>b<!--M_#b-->d<!--M_[--><!--M_!^3-->_A_<!--M_!3--><!--M_]2 #text/1 3--></t><t M_=3>e<!--M_#c-->g</t><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.c=[0,1,_.a={"#BranchAccessor":"#text/0","#PlaceholderContent":_.d={}},_.b={"#BranchAccessor":"#text/1"}],_.a["#PlaceholderContent"]=_._["__tests__/template.marko_2_content"](_.d),_.b["#PlaceholderContent"]=_._["__tests__/template.marko_5_content"](_.a),_.c)];REORDER_RUNTIME(M._);M._.w()</script>
```
# Write
@ -10,12 +10,12 @@
# Write
```html
<t M_=c>c</t><script>M._.w()</script>
<t M_=b>c</t><script>M._.w()</script>
```
# Write
```html
<t M_=e>f</t><script>M._.w()</script>
<t M_=c>f</t><script>M._.w()</script>
```
# Render ASYNC
@ -31,9 +31,9 @@
<body>
a
<!--M_[-->
<!--M_!^b-->
<!--M_!^2-->
_B_
<!--M_!b-->
<!--M_!2-->
<!--M_]1 #text/0 2-->
h
<script>
@ -102,9 +102,9 @@ INSERT html/body/script
<body>
a
<!--M_[-->
<!--M_!^b-->
<!--M_!^2-->
_B_
<!--M_!b-->
<!--M_!2-->
<!--M_]1 #text/0 2-->
h
<script>
@ -147,9 +147,9 @@ INSERT html/body/#text3
<!--M_[-->
bcd
<!--M_[-->
<!--M_!^d-->
<!--M_!^3-->
_A_
<!--M_!d-->
<!--M_!3-->
<!--M_]2 #text/1 3-->
<!--M_]1 #text/0 2-->
h

14
packages/runtime-tags/src/__tests__/fixtures/try-effects-async/__snapshots__/resume.expected.md
View File

@ -45,7 +45,7 @@
1
];
REORDER_RUNTIME(M._);
M._.j.c = _ =&gt;
M._.j[2] = _ =&gt;
{
_.push(
"__tests__/template.marko_1_clickCount",
@ -113,7 +113,7 @@ container.querySelector("button").click();
1
];
REORDER_RUNTIME(M._);
M._.j.c = _ =&gt;
M._.j[2] = _ =&gt;
{
_.push(
"__tests__/template.marko_1_clickCount",
@ -170,7 +170,7 @@ container.querySelector("button").click();
1
];
REORDER_RUNTIME(M._);
M._.j.c = _ =&gt;
M._.j[2] = _ =&gt;
{
_.push(
"__tests__/template.marko_1_clickCount",
@ -250,7 +250,7 @@ REMOVE #document-fragment/#text3 after html/body/#text
1
];
REORDER_RUNTIME(M._);
M._.j.c = _ =&gt;
M._.j[2] = _ =&gt;
{
_.push(
"__tests__/template.marko_1_clickCount",
@ -325,7 +325,7 @@ container.querySelector("button").click();
1
];
REORDER_RUNTIME(M._);
M._.j.c = _ =&gt;
M._.j[2] = _ =&gt;
{
_.push(
"__tests__/template.marko_1_clickCount",
@ -382,7 +382,7 @@ container.querySelector("button").click();
1
];
REORDER_RUNTIME(M._);
M._.j.c = _ =&gt;
M._.j[2] = _ =&gt;
{
_.push(
"__tests__/template.marko_1_clickCount",
@ -454,7 +454,7 @@ REMOVE #document-fragment/#text3 after html/body/#text
1
];
REORDER_RUNTIME(M._);
M._.j.c = _ =&gt;
M._.j[2] = _ =&gt;
{
_.push(
"__tests__/template.marko_1_clickCount",

12
packages/runtime-tags/src/__tests__/fixtures/try-effects-async/__snapshots__/ssr.expected.md
View File

@ -1,11 +1,11 @@
# Write
```html
<button>inc</button><!--M_*1 #button/0--><div></div><!--M_*1 #div/1--><!--M_[--><!--M_!^b--><!--M_!^c-->LOADING...<!--M_!c--><!--M_!b--><!--M_]1 #text/2 2--><style M_>t{display:none}</style><t M_=c><!--M_#d--></t><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.c=[0,_.a={clickCount:0,"ClosureScopes:clickCount":_.d=new Set},_.b={_:_.a,"ClosureSignalIndex:clickCount":0,"#BranchAccessor":"#text/2"}],_.b["#CatchContent"]=_._["__tests__/template.marko_3_content"](_.a),_.b["#PlaceholderContent"]=_._["__tests__/template.marko_2_content"](_.a),(_.d).add(_.b),_.c),"__tests__/template.marko_0_clickCount",1];REORDER_RUNTIME(M._);M._.j.c=_=>{_.push("__tests__/template.marko_1_clickCount",2)};M._.w()</script>
<button>inc</button><!--M_*1 #button/0--><div></div><!--M_*1 #div/1--><!--M_[--><!--M_!^b--><!--M_!^2-->LOADING...<!--M_!2--><!--M_!b--><!--M_]1 #text/2 2--><style M_>t{display:none}</style><t M_=2><!--M_#c--></t><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.c=[0,_.a={clickCount:0,"ClosureScopes:clickCount":_.d=new Set},_.b={_:_.a,"ClosureSignalIndex:clickCount":0,"#BranchAccessor":"#text/2"}],_.b["#CatchContent"]=_._["__tests__/template.marko_3_content"](_.a),_.b["#PlaceholderContent"]=_._["__tests__/template.marko_2_content"](_.a),(_.d).add(_.b),_.c),"__tests__/template.marko_0_clickCount",1];REORDER_RUNTIME(M._);M._.j[2]=_=>{_.push("__tests__/template.marko_1_clickCount",2)};M._.w()</script>
```
# Write
```html
<t M_=d><!--M_[-->Async: <!>0<!--M_*4 #text/0--><!--M_]2 #text/0 4--></t><script>M._.r.push(_=>(_.e=[1,{}]));M._.w()</script>
<t M_=c><!--M_[-->Async: <!>0<!--M_*4 #text/0--><!--M_]2 #text/0 4--></t><script>M._.r.push(_=>(_.e=[1,{}]));M._.w()</script>
```
# Render ASYNC
@ -27,9 +27,9 @@
<!--M_*1 #div/1-->
<!--M_[-->
<!--M_!^b-->
<!--M_!^c-->
<!--M_!^2-->
LOADING...
<!--M_!c-->
<!--M_!2-->
<!--M_!b-->
<!--M_]1 #text/2 2-->
<script>
@ -50,7 +50,7 @@
1
];
REORDER_RUNTIME(M._);
M._.j.c = _ =&gt;
M._.j[2] = _ =&gt;
{
_.push(
"__tests__/template.marko_1_clickCount",
@ -134,7 +134,7 @@ INSERT html/body/script
1
];
REORDER_RUNTIME(M._);
M._.j.c = _ =&gt;
M._.j[2] = _ =&gt;
{
_.push(
"__tests__/template.marko_1_clickCount",

4
packages/runtime-tags/src/common/accessor.debug.ts
View File

@ -19,6 +19,7 @@ export enum AccessorProp {
Owner = "_",
AbortControllers = "#AbortControllers",
AbortScopes = "#AbortScopes",
AwaitCounter = "#AwaitCounter",
BranchAccessor = "#BranchAccessor",
BranchScopes = "#BranchScopes",
CatchContent = "#CatchContent",
@ -26,12 +27,11 @@ export enum AccessorProp {
ClosestBranchId = "#ClosestBranchId",
Creating = "#Creating",
Destroyed = "#Destroyed",
PendingEffects = "#PendingEffects",
EndNode = "#EndNode",
Id = "#Id",
LoopKey = "#LoopKey",
ParentBranch = "#ParentBranch",
PendingAsyncCount = "#PendingAsyncCount",
PendingEffects = "#PendingEffects",
PlaceholderBranch = "#PlaceholderBranch",
PlaceholderContent = "#PlaceholderContent",
Renderer = "#Renderer",

4
packages/runtime-tags/src/common/accessor.ts
View File

@ -19,6 +19,7 @@ export enum AccessorProp {
Owner = "_",
AbortControllers = "A",
AbortScopes = "B",
AwaitCounter = "O",
BranchAccessor = "C",
BranchScopes = "D",
CatchContent = "E",
@ -26,12 +27,11 @@ export enum AccessorProp {
ClosestBranchId = "G",
Creating = "H",
Destroyed = "I",
PendingEffects = "J",
EndNode = "K",
Id = "L",
LoopKey = "M",
ParentBranch = "N",
PendingAsyncCount = "O",
PendingEffects = "J",
PlaceholderBranch = "P",
PlaceholderContent = "Q",
Renderer = "R",

8
packages/runtime-tags/src/common/types.ts
View File

@ -10,7 +10,7 @@ export interface BranchScope extends Scope {
[AccessorProp.AbortScopes]: Set<Scope> | undefined;
[AccessorProp.BranchScopes]: Set<BranchScope> | undefined;
[AccessorProp.Renderer]: ClientRenderer | string;
[AccessorProp.PendingAsyncCount]: number | undefined;
[AccessorProp.AwaitCounter]: AwaitCounter | undefined;
[AccessorProp.PendingEffects]: unknown[] | undefined;
}
export interface Scope {
@ -37,6 +37,12 @@ export enum ResumeSymbol {
BranchEndSingleNodeOnlyChildInParent = "}",
}
export interface AwaitCounter {
d?: 1;
i: number;
c: () => void;
}
export { AccessorPrefix, AccessorProp } from "./accessor.debug";
export enum NodeType {

153
packages/runtime-tags/src/dom/control-flow.ts
View File

@ -4,9 +4,11 @@ import { decodeAccessor, normalizeDynamicRenderer } from "../common/helpers";
import { DYNAMIC_TAG_SCRIPT_REGISTER_ID } from "../common/meta";
import { toArray } from "../common/opt";
import {
type $Global,
type Accessor,
AccessorPrefix,
AccessorProp,
type AwaitCounter,
type BranchScope,
type EncodedAccessor,
NodeType,
@ -14,6 +16,7 @@ import {
} from "../common/types";
import { _attrs, _attrs_content, _attrs_script } from "./dom";
import {
_enable_catch,
caughtError,
pendingEffects,
placeholderShown,
@ -31,7 +34,12 @@ import {
setupBranch,
type SetupFn,
} from "./renderer";
import { _resume, enableBranches } from "./resume";
import {
_resume,
enableBranches,
type RenderData,
type Renders,
} from "./resume";
import { schedule } from "./schedule";
import {
destroyBranch,
@ -53,26 +61,61 @@ export function _await(
const promiseAccessor = AccessorPrefix.Promise + nodeAccessor;
const branchAccessor = AccessorPrefix.BranchScopes + nodeAccessor;
const renderer = _content("", template, walks, setup)();
enableBranches();
_enable_catch();
return (scope: Scope, promise: Promise<unknown>) => {
// TODO: !isPromise, render synchronously
const referenceNode = scope[nodeAccessor] as Text | Comment;
let awaitCounter: AwaitCounter | undefined;
let renderData: RenderData | undefined;
const tryWithPlaceholder = findBranchWithKey(
scope,
AccessorProp.PlaceholderContent,
);
let awaitBranch = scope[branchAccessor] as BranchScope | undefined;
if (tryWithPlaceholder) {
renderData = (self as unknown as Record<string, Renders>)[
(tryWithPlaceholder[AccessorProp.Global] as $Global).runtimeId!
]?.[(tryWithPlaceholder[AccessorProp.Global] as $Global).renderId!];
awaitCounter = tryWithPlaceholder[AccessorProp.AwaitCounter] ||=
renderData?.p?.[tryWithPlaceholder[AccessorProp.Id]];
if (!awaitCounter?.i) {
awaitCounter = tryWithPlaceholder[AccessorProp.AwaitCounter] = {
d: 1,
i: 0,
c() {
if (!--awaitCounter!.i) {
const placeholderBranch = tryWithPlaceholder[
AccessorProp.PlaceholderBranch
] as BranchScope;
tryWithPlaceholder[AccessorProp.PlaceholderBranch] = 0;
if (placeholderBranch) {
// Since this is temp detached the parent node is a document fragment with all of the children in the branch.
placeholderBranch[
AccessorProp.StartNode
].parentNode!.insertBefore(
tryWithPlaceholder[AccessorProp.StartNode].parentNode!,
placeholderBranch[AccessorProp.StartNode],
);
removeAndDestroyBranch(placeholderBranch);
}
queueEffect(tryWithPlaceholder, (scope) => {
const pendingEffects = scope[AccessorProp.PendingEffects];
if (pendingEffects) {
scope[AccessorProp.PendingEffects] = [];
runEffects(pendingEffects, true);
}
});
}
},
};
}
placeholderShown.add(pendingEffects);
if (
!scope[promiseAccessor] &&
(tryWithPlaceholder[AccessorProp.PendingAsyncCount] =
(tryWithPlaceholder[AccessorProp.PendingAsyncCount] || 0) + 1) === 1
) {
if (!scope[promiseAccessor] && !awaitCounter.i++) {
requestAnimationFrame(
() =>
tryWithPlaceholder[AccessorProp.PendingAsyncCount] &&
awaitCounter!.i &&
runEffects(
prepareEffects(() =>
queueRender(
@ -100,12 +143,14 @@ export function _await(
),
);
}
} else if (awaitBranch && !scope[promiseAccessor]) {
awaitBranch[AccessorProp.StartNode].parentNode!.insertBefore(
referenceNode,
awaitBranch[AccessorProp.StartNode],
} else if (scope[branchAccessor] && !scope[promiseAccessor]) {
(scope[branchAccessor] as BranchScope)[
AccessorProp.StartNode
].parentNode!.insertBefore(
scope[nodeAccessor] as Node,
(scope[branchAccessor] as BranchScope)[AccessorProp.StartNode],
);
tempDetachBranch(awaitBranch);
tempDetachBranch(scope[branchAccessor] as BranchScope);
}
const thisPromise = (scope[promiseAccessor] = promise.then(
(data) => {
@ -116,58 +161,54 @@ export function _await(
queueRender(
scope,
() => {
if (awaitBranch) {
if (scope[branchAccessor]) {
// Since this is temp detached the parent node is a document fragment with all of the children in the branch.
if (!tryWithPlaceholder) {
referenceNode.replaceWith(
awaitBranch[AccessorProp.StartNode].parentNode!,
(scope[nodeAccessor] as ChildNode).replaceWith(
(scope[branchAccessor] as BranchScope)[
AccessorProp.StartNode
].parentNode!,
);
}
} else {
// TODO: this preserves the existing scope, but we need to defer closures executing in this existing scope while it is pending.
// Not ideal, but we could destroy and recreate the scope everytime the promise changes to avoid this.
insertBranchBefore(
(awaitBranch = scope[branchAccessor] =
createAndSetupBranch(
scope[AccessorProp.Global],
renderer,
scope,
referenceNode.parentNode!,
)),
referenceNode.parentNode!,
referenceNode,
(scope[branchAccessor] = createAndSetupBranch(
scope[AccessorProp.Global],
renderer,
scope,
(scope[nodeAccessor] as ChildNode).parentNode!,
)),
(scope[nodeAccessor] as ChildNode).parentNode!,
scope[nodeAccessor] as ChildNode,
);
referenceNode.remove();
(scope[nodeAccessor] as ChildNode).remove();
}
params?.(awaitBranch, [data]);
params?.(scope[branchAccessor] as BranchScope, [data]);
if (tryWithPlaceholder) {
if (awaitCounter) {
placeholderShown.add(pendingEffects);
if (!--tryWithPlaceholder[AccessorProp.PendingAsyncCount]!) {
const placeholderBranch = tryWithPlaceholder[
AccessorProp.PlaceholderBranch
] as BranchScope;
tryWithPlaceholder[AccessorProp.PlaceholderBranch] = 0;
if (placeholderBranch) {
// Since this is temp detached the parent node is a document fragment with all of the children in the branch.
placeholderBranch[
AccessorProp.StartNode
].parentNode!.insertBefore(
tryWithPlaceholder[AccessorProp.StartNode].parentNode!,
placeholderBranch[AccessorProp.StartNode],
);
removeAndDestroyBranch(placeholderBranch);
}
queueEffect(tryWithPlaceholder, (scope) => {
const pendingEffects = scope[AccessorProp.PendingEffects];
if (pendingEffects) {
scope[AccessorProp.PendingEffects] = [];
runEffects(pendingEffects, true);
awaitCounter.c();
if (!awaitCounter.d) {
const fnScopes = new Map<unknown, Set<Scope>>();
const effects = renderData!.m();
for (let i = 0; i < pendingEffects.length; ) {
const fn = pendingEffects[i++] as any;
let scopes = fnScopes.get(fn);
if (!scopes) {
fnScopes.set(fn, (scopes = new Set()));
}
});
scopes.add(pendingEffects[i++] as Scope);
}
for (let i = 0; i < effects.length; ) {
const fn = effects[i++] as any;
const scope = effects[i++] as Scope;
if (!fnScopes.get(fn)?.has(scope)) {
queueEffect(scope, fn);
}
}
}
}
},
@ -177,8 +218,7 @@ export function _await(
},
(error) => {
if (thisPromise === scope[promiseAccessor]) {
if (tryWithPlaceholder)
tryWithPlaceholder[AccessorProp.PendingAsyncCount] = 0;
if (awaitCounter) awaitCounter.i = 0;
scope[promiseAccessor] = 0;
schedule();
queueRender(scope, renderCatch, -1, error);
@ -229,7 +269,8 @@ export function renderCatch(scope: Scope, error: unknown) {
AccessorProp.PlaceholderBranch
] as BranchScope;
if (placeholderBranch) {
tryWithCatch[AccessorProp.PendingAsyncCount] = 0;
if (tryWithCatch[AccessorProp.AwaitCounter])
(tryWithCatch[AccessorProp.AwaitCounter] as AwaitCounter).i = 0;
owner[
AccessorPrefix.BranchScopes + tryWithCatch[AccessorProp.BranchAccessor]
] = placeholderBranch;

6
packages/runtime-tags/src/dom/queue.ts
View File

@ -98,7 +98,7 @@ export let runEffects = ((effects) => {
for (let i = 0; i < effects.length; ) {
(effects[i++] as (scope: Scope) => void)(effects[i++] as Scope);
}
}) as (effects: unknown[], checkPending?: boolean) => void;
}) as (effects: unknown[], checkPending?: boolean | 1) => void;
function runRenders() {
while (pendingRenders.length) {
@ -157,11 +157,11 @@ export let _enable_catch = () => {
scope: Scope,
branch: BranchScope | undefined,
) => {
// walk up the branches to see if any have a ___pendingAsyncCount
// walk up the branches to see if any have an AwaitCounter with count (i) > 0
// if not, return false
// if so, return true and push the fn to the pending async queue on the try branch
while (branch) {
if (branch[AccessorProp.PendingAsyncCount]) {
if (branch[AccessorProp.AwaitCounter]?.i) {
return (branch[AccessorProp.PendingEffects] ||= []).push(fn, scope);
}
branch = branch[AccessorProp.ParentBranch];

145
packages/runtime-tags/src/dom/resume.ts
View File

@ -4,6 +4,7 @@ import { type Opt, push } from "../common/opt";
import {
AccessorPrefix,
AccessorProp,
type AwaitCounter,
type BranchScope,
type EncodedAccessor,
ResumeSymbol,
@ -15,11 +16,11 @@ import { getDebugKey } from "./walker";
type Resumes = (number | Scope)[];
type ResumeFn = (ctx: object) => Resumes;
interface Renders {
export interface Renders {
(renderId: string): RenderData;
[renderId: string]: RenderData;
}
interface RenderData {
export interface RenderData {
// RuntimeID + ResumeID
i: string;
// Marked nodes to visit
@ -30,12 +31,26 @@ interface RenderData {
s?: Record<string, Scope>;
// Walk
w(): void;
// Deserialize scopes and run scripts ("m" for marko)
m(): unknown[];
/* --- Used by inline runtime --- */
// Document
d: never;
// Walked node lookup
l: never;
// Reorder-runtime
x: never;
// Reordered scripts
j?: never;
// Await counter lookup
p?: Record<string | number, AwaitCounter>;
}
type RegisteredFn<S extends Scope = Scope> = (scope: S) => void;
const registeredValues: Record<string, unknown> = {};
let branchesEnabled: undefined | 1;
let isInit: undefined | 0 | 1;
export function enableBranches() {
branchesEnabled = 1;
}
@ -193,68 +208,68 @@ export function init(runtimeId = DEFAULT_RUNTIME_ID) {
: visitText.length,
));
render.w = (effects: unknown[] = []) => {
try {
isInit || walk();
isResuming = 1;
for (const serialized of (resumes = render.r || [])) {
if (typeof serialized === "string") {
lastEffect = serialized;
} else if (typeof serialized === "number") {
effects.push(
registeredValues[lastEffect!],
(scopeLookup[serialized] ||= {
[AccessorProp.Id]: serialized,
} as Scope),
);
} else {
for (const scope of serialized(serializeContext)) {
if (!$global) {
$global = (scope || {}) as Scope[AccessorProp.Global];
$global.runtimeId = runtimeId;
$global.renderId = renderId;
} else if (typeof scope === "number") {
lastScopeId += scope;
} else {
scopeLookup[(scope[AccessorProp.Id] = ++lastScopeId)] =
scope;
scope[AccessorProp.Global] = $global;
if (branchesEnabled) {
scope[AccessorProp.ClosestBranch] = scopeLookup[
scope[AccessorProp.ClosestBranchId]!
] as BranchScope;
}
render.m = (effects: unknown[] = []) => {
for (const serialized of (resumes = render.r || [])) {
if (typeof serialized === "string") {
lastEffect = serialized;
} else if (typeof serialized === "number") {
effects.push(
registeredValues[lastEffect!],
(scopeLookup[serialized] ||= {
[AccessorProp.Id]: serialized,
} as Scope),
);
} else {
for (const scope of serialized(serializeContext)) {
if (!$global) {
$global = (scope || {}) as Scope[AccessorProp.Global];
$global.runtimeId = runtimeId;
$global.renderId = renderId;
} else if (typeof scope === "number") {
lastScopeId += scope;
} else {
scopeLookup[(scope[AccessorProp.Id] = ++lastScopeId)] = scope;
scope[AccessorProp.Global] = $global;
if (branchesEnabled) {
scope[AccessorProp.ClosestBranch] = scopeLookup[
scope[AccessorProp.ClosestBranchId]!
] as BranchScope;
}
}
}
}
for (visit of (visits = render.v)) {
lastTokenIndex = render.i.length;
visitText = visit.data!;
visitType = visitText[lastTokenIndex++] as ResumeSymbol;
visitScope = scopeLookup[+(nextToken(/* read scope id */))] ||= {
[AccessorProp.Id]: +lastToken,
} as Scope;
// TODO: switch?
if (visitType === ResumeSymbol.Node) {
// TODO: could we use attr marker?
visitScope[AccessorPrefix.Getter + nextToken()] = (
(node) => () =>
node
)((visitScope[lastToken] = visit.previousSibling));
} else if (branchesEnabled) {
visitBranches!();
}
}
runEffects(effects);
} finally {
isInit = isResuming = visits.length = resumes.length = 0;
}
for (visit of (visits = render.v)) {
lastTokenIndex = render.i.length;
visitText = visit.data!;
visitType = visitText[lastTokenIndex++] as ResumeSymbol;
visitScope = scopeLookup[+(nextToken(/* read scope id */))] ||= {
[AccessorProp.Id]: +lastToken,
} as Scope;
// TODO: switch?
if (visitType === ResumeSymbol.Node) {
// TODO: could we use attr marker?
visitScope[AccessorPrefix.Getter + nextToken()] = (
(node) => () =>
node
)((visitScope[lastToken] = visit.previousSibling));
} else if (branchesEnabled) {
visitBranches!();
}
}
visits.length = resumes.length = 0;
return effects;
};
render.w = () => {
walk();
runResumeEffects(render);
};
return render;
}) as Renders),
});
@ -262,8 +277,7 @@ export function init(runtimeId = DEFAULT_RUNTIME_ID) {
if (renders) {
initRuntime(renders);
for (const renderId in renders) {
isInit = 1;
resumeRender!(renderId).w();
runResumeEffects(resumeRender!(renderId));
}
} else {
defineRuntime({
@ -275,6 +289,15 @@ export function init(runtimeId = DEFAULT_RUNTIME_ID) {
export let isResuming: undefined | 0 | 1;
function runResumeEffects(render: RenderData) {
try {
isResuming = 1;
runEffects(render.m(), 1);
} finally {
isResuming = 0;
}
}
export function getRegisteredWithScope(id: string, scope?: Scope) {
const val = registeredValues[id];
return scope ? (val as RegisteredFn)(scope) : val;

4
packages/runtime-tags/src/html/inlined-runtimes.ts
View File

@ -42,7 +42,7 @@ export const REORDER_RUNTIME_CODE = MARKO_DEBUG
let onNextSibling,
placeholder,
nextSibling,
placeholders = {},
placeholders = runtime.p = {},
replace = (id, container) => runtime.l[id].replaceWith(...container.childNodes);
runtime.d.head.append(
runtime.d.querySelector("style[" + runtime.i + "]") || ""
@ -92,4 +92,4 @@ export const REORDER_RUNTIME_CODE = MARKO_DEBUG
}
};
})`
: `(e=>{if(e.j)return;let i,l,r,t={},c=(i,l)=>e.l[i].replaceWith(...l.childNodes);e.d.head.append(e.d.querySelector("style["+e.i+"]")||""),e.j={},e.x=(n,a,d,o,g)=>{d==r&&i(),"#"==n?(t[a]=l).i++:"!"==n?e.l[a]&&t[a]&&(r=d.nextSibling,i=()=>t[a].c()):"T"==d.tagName&&(a=d.getAttribute(e.i))&&(r=d.nextSibling,i=()=>{d.remove(),o||c(a,d),l.c()},l=t[a]||(o=t[a]={i:e.l[a]?1:2,c(i=e.l["^"+a]){if(--o.i)return 1;for(;(r=e.l[a].previousSibling||i).remove(),i!=r;);c(a,d)}}),(n=e.j[a])&&(g=l.c,l.c=()=>g()||n(e.r)))}})`;
: `(e=>{if(e.j)return;let i,l,r,t=e.p={},c=(i,l)=>e.l[i].replaceWith(...l.childNodes);e.d.head.append(e.d.querySelector("style["+e.i+"]")||""),e.j={},e.x=(n,a,d,o,g)=>{d==r&&i(),"#"==n?(t[a]=l).i++:"!"==n?e.l[a]&&t[a]&&(r=d.nextSibling,i=()=>t[a].c()):"T"==d.tagName&&(a=d.getAttribute(e.i))&&(r=d.nextSibling,i=()=>{d.remove(),o||c(a,d),l.c()},l=t[a]||(o=t[a]={i:e.l[a]?1:2,c(i=e.l["^"+a]){if(--o.i)return 1;for(;(r=e.l[a].previousSibling||i).remove(),i!=r;);c(a,d)}}),(n=e.j[a])&&(g=l.c,l.c=()=>g()||n(e.r)))}})`;

63
packages/runtime-tags/src/html/writer.ts
View File

@ -18,6 +18,7 @@ import {
register as serializerRegister,
Serializer,
setDebugInfo,
toAccess,
} from "./serializer";
import type { ServerRenderer } from "./template";
@ -65,6 +66,9 @@ export function writeScript(script: string) {
}
export function _script(scopeId: number, registryId: string) {
if ($chunk.context?.[kIsAsync]) {
_resume_branch(scopeId);
}
$chunk.boundary.state.needsMainRuntime = true;
$chunk.writeEffect(scopeId, registryId);
}
@ -113,13 +117,29 @@ export function normalizeServerRender(value: unknown) {
}
const kPendingContexts = Symbol("Pending Contexts");
export function withContext<T>(key: PropertyKey, value: unknown, cb: () => T) {
export function withContext<T>(
key: PropertyKey,
value: unknown,
cb: () => T,
): T;
export function withContext<T, U>(
key: PropertyKey,
value: unknown,
cb: (value: U) => T,
cbValue: U,
): T;
export function withContext<T, U>(
key: PropertyKey,
value: unknown,
cb: (value?: U) => T,
cbValue?: U,
): T {
const ctx = ($chunk.context ||= { [kPendingContexts]: 0 } as any);
const prev = ctx[key];
ctx[kPendingContexts]++;
ctx[key] = value;
try {
return cb();
return cb(cbValue);
} finally {
ctx[kPendingContexts]--;
ctx[key] = prev;
@ -228,20 +248,25 @@ export function _hoist(scopeId: number, id: string) {
}
export function _resume_branch(scopeId: number) {
const branchId = $chunk.context?.[branchIdKey];
const branchId = $chunk.context?.[kBranchId];
if (branchId !== undefined && branchId !== scopeId) {
writeScope(scopeId, { [AccessorProp.ClosestBranchId]: branchId });
}
}
const branchIdKey = Symbol();
const kBranchId = Symbol("Branch Id");
const kIsAsync = Symbol("Is Async");
export function isInResumedBranch() {
return $chunk?.context?.[branchIdKey] !== undefined;
return $chunk?.context?.[kBranchId] !== undefined;
}
export function withBranchId<T>(branchId: number, cb: () => T): T {
return withContext(branchIdKey, branchId, cb);
return withContext(kBranchId, branchId, cb);
}
function withIsAsync<T, U>(cb: (value: U) => T, value: U): T {
return withContext(kIsAsync, true, cb, value);
}
export function _for_of(
@ -762,7 +787,7 @@ export function _await<T>(
$chunk.writeHTML(
$chunk.boundary.state.mark(ResumeSymbol.BranchStart, ""),
);
content(value);
withIsAsync(content, value);
$chunk.writeHTML(
$chunk.boundary.state.mark(
ResumeSymbol.BranchEnd,
@ -770,7 +795,7 @@ export function _await<T>(
),
);
} else {
content(value);
withIsAsync(content, value);
}
});
boundary.endAsync(chunk);
@ -806,12 +831,12 @@ export function _try(
if (catchContent) {
tryCatch(
placeholderContent
? () => tryPlaceholder(content, placeholderContent)
? () => tryPlaceholder(content, placeholderContent, branchId)
: content,
catchContent,
);
} else if (placeholderContent) {
tryPlaceholder(content, placeholderContent);
tryPlaceholder(content, placeholderContent, branchId);
} else {
content();
}
@ -830,7 +855,11 @@ export function _try(
);
}
function tryPlaceholder(content: () => void, placeholder: () => void) {
function tryPlaceholder(
content: () => void,
placeholder: () => void,
branchId: number,
) {
const chunk = $chunk;
const { boundary } = chunk;
const body = new Chunk(boundary, null, chunk.context);
@ -840,9 +869,10 @@ function tryPlaceholder(content: () => void, placeholder: () => void) {
return;
}
chunk.next = $chunk = new Chunk(boundary, chunk.next, body.context);
chunk.next = $chunk = new Chunk(boundary, chunk.next, chunk.context);
chunk.placeholderBody = body;
chunk.placeholderRender = placeholder;
chunk.placeholderBranchId = branchId;
}
function tryCatch(content: () => void, catchContent: (err: unknown) => void) {
@ -1054,6 +1084,7 @@ export class Chunk {
public reorderId: string | null = null;
public placeholderBody: Chunk | null = null;
public placeholderRender: (() => void) | null = null;
public placeholderBranchId: number | null = null;
constructor(
public boundary: Boundary,
public next: Chunk | null,
@ -1096,7 +1127,10 @@ export class Chunk {
if (body.async) {
const { state } = this.boundary;
const reorderId = (body.reorderId = state.nextReorderId());
const reorderId = (body.reorderId = this.placeholderBranchId
? this.placeholderBranchId + ""
: state.nextReorderId());
this.placeholderBranchId = null;
this.writeHTML(state.mark(Mark.Placeholder, reorderId));
const after = this.render(this.placeholderRender!);
if (after !== this) {
@ -1272,8 +1306,7 @@ export class Chunk {
reorderScripts &&
runtimePrefix +
RuntimeKey.Scripts +
"." +
reorderId +
toAccess(reorderId!) +
"=_=>{" +
reorderScripts +
"}",