marko 6.3.39 → 6.3.40

package/dist/html.js

@@ -1499,16 +1499,14 @@ function _await(scopeId, accessor, promise, content, serializeMarker) {
 	});
 }
 function _try(scopeId, accessor, content, input) {
-	let branchId = _peek_scope_id();
-	$chunk.writeHTML($chunk.boundary.state.mark("[", ""));
-	let catchContent = input.catch ? normalizeDynamicRenderer(input.catch) || 0 : void 0, placeholderContent = normalizeDynamicRenderer(input.placeholder);
-	catchContent === void 0 ? placeholderContent ? tryPlaceholder(content, placeholderContent, branchId) : content() : tryCatch(placeholderContent ? () => tryPlaceholder(content, placeholderContent, branchId) : content, catchContent || (() => {})), writeScope(branchId, {
+	let catchContent = input.catch ? normalizeDynamicRenderer(input.catch) || 0 : void 0, placeholderContent = normalizeDynamicRenderer(input.placeholder), placeholderBranchId = placeholderContent ? _scope_id() : 0, branchId = _peek_scope_id();
+	$chunk.writeHTML($chunk.boundary.state.mark("[", "")), catchContent === void 0 ? placeholderContent ? tryPlaceholder(content, placeholderContent, branchId, scopeId, placeholderBranchId) : content() : tryCatch(placeholderContent ? () => tryPlaceholder(content, placeholderContent, branchId, scopeId, placeholderBranchId) : content, catchContent || (() => {})), writeScope(branchId, {
 		C: accessor,
 		E: catchContent,
 		Q: placeholderContent
 	}), $chunk.writeHTML($chunk.boundary.state.mark("]", scopeId + " " + accessor + " " + branchId));
 }
-function tryPlaceholder(content, placeholder, branchId) {
+function tryPlaceholder(content, placeholder, branchId, scopeId, placeholderBranchId) {
 	let chunk = $chunk, { boundary } = chunk, body = chunk.fork(boundary, null);
 	if (body === body.render(content)) {
 		chunk.append(body);
@@ -1517,7 +1515,9 @@ function tryPlaceholder(content, placeholder, branchId) {
 	chunk.next = $chunk = chunk.fork(boundary, chunk.next), chunk.placeholder = {
 		body,
 		render: placeholder,
-		branchId
+		branchId,
+		scopeId,
+		placeholderBranchId
 	};
 }
 function tryCatch(content, catchContent) {
@@ -1666,10 +1666,10 @@ var State = class {
 		if (placeholder) {
 			let body = placeholder.body.consume();
 			if (body.async) {
-				let { state } = this.boundary, reorderId = body.reorderId = placeholder.branchId ? placeholder.branchId + "" : state.nextReorderId();
+				let { state } = this.boundary, { branchId, scopeId, placeholderBranchId } = placeholder, reorderId = body.reorderId = branchId ? branchId + "" : state.nextReorderId();
 				this.writeHTML(state.mark("!^", reorderId));
-				let after = this.render(placeholder.render);
-				after !== this && this.boundary.abort(/* @__PURE__ */ Error("An @placeholder cannot contain async content.")), after.writeHTML(state.mark("!", reorderId)), state.reorder(body);
+				let { effects } = this, beforeBranch = deferBranchStart(this), after = this.render(() => withBranchId(placeholderBranchId, placeholder.render)), stateful = after === this && this.effects !== effects;
+				applyBranchStart(this, beforeBranch, stateful), after === this ? stateful && (this.render(() => writeScope(branchId, { P: scopeWithId(state, placeholderBranchId) })), this.writeHTML(state.mark("]", scopeId + " " + ("P" + branchId) + " " + placeholderBranchId)), body.writeEffect(branchId, "f")) : this.boundary.abort(/* @__PURE__ */ Error("An @placeholder cannot contain async content.")), this.writeHTML(state.mark("!", reorderId)), state.reorder(body);
 			} else body.next = this.next, this.next = body;
 			this.placeholder = null;
 		}
@@ -1720,7 +1720,7 @@ var State = class {
 		}
 		readyResumeScripts && (needsWalk = !0);
 		let effects = this.async ? "" : this.effects, { html, scripts } = this;
-		if (state.needsMainRuntime && !state.hasMainRuntime && (state.hasMainRuntime = !0, scripts = concatScripts(scripts, "(e=>(self[e]||=(l,f=e+l,s=f.length,a={},d=[],t=document,n=t.createTreeWalker(t,129))=>t=self[e][l]={i:f,d:t,l:a,v:d,x(){},w(e,l,r){for(;e=n.nextNode();)t.x(l=(l=e.data)&&!l.indexOf(f)&&(a[r=l.slice(s+1)]=e,l[s]),r,e),l>\"#\"&&d.push(e)}},self[e]))(\"" + $global.runtimeId + "\")(\"" + $global.renderId + "\")")), scripts = concatScripts(scripts, readyResumeScripts), effects && (needsWalk = !0, state.resumes = state.resumes ? state.resumes + ",\"" + effects + "\"" : "\"" + effects + "\""), state.resumes && (state.hasWrittenResume ? scripts = concatScripts(scripts, runtimePrefix + ".r.push(" + state.resumes + ")") : (state.hasWrittenResume = !0, scripts = concatScripts(scripts, runtimePrefix + ".r=[" + state.resumes + "]"))), state.writeReorders) {
+		if (state.needsMainRuntime && !state.hasMainRuntime && (state.hasMainRuntime = !0, scripts = concatScripts(scripts, "(e=>(self[e]||=(l,f=e+l,s=f.length,a={},d=[],t=document,n=t.createTreeWalker(t,129))=>t=self[e][l]={i:f,d:t,l:a,v:d,x(){},w(e,l,r){for(;e=n.nextNode();)t.x(l=(l=e.data)&&!l.indexOf(f)&&(a[r=l.slice(s+1)]=e,l[s]),r,e),l>\"#\"&&d.push(e)}},self[e]))(\"" + $global.runtimeId + "\")(\"" + $global.renderId + "\")")), scripts = concatScripts(scripts, readyResumeScripts), effects && (needsWalk = !0, state.resumes = state.resumes ? state.resumes + ",\"" + effects + "\"" : "\"" + effects + "\""), state.writeReorders) {
 			let carried = null;
 			for (let reorderedChunk of state.writeReorders) {
 				if (reorderedChunk.async && reorderedChunk.consumed) {
@@ -1746,7 +1746,7 @@ var State = class {
 			}
 			state.writeReorders = carried;
 		}
-		return needsWalk && (scripts = concatScripts(scripts, runtimePrefix + ".w()")), this.html = html, this.scripts = scripts, this.async || (this.effects = this.lastEffect = ""), state.resumes = "", this;
+		return flushSerializer(boundary, state), state.resumes && (state.hasWrittenResume ? scripts = concatScripts(scripts, runtimePrefix + ".r.push(" + state.resumes + ")") : (state.hasWrittenResume = !0, scripts = concatScripts(scripts, runtimePrefix + ".r=[" + state.resumes + "]"))), needsWalk && (scripts = concatScripts(scripts, runtimePrefix + ".w()")), this.html = html, this.scripts = scripts, this.async || (this.effects = this.lastEffect = ""), state.resumes = "", this;
 	}
 	flushHTML() {
 		let { boundary } = this, { state } = boundary;

package/dist/html.mjs

@@ -1498,16 +1498,14 @@ function _await(scopeId, accessor, promise, content, serializeMarker) {
 	});
 }
 function _try(scopeId, accessor, content, input) {
-	let branchId = _peek_scope_id();
-	$chunk.writeHTML($chunk.boundary.state.mark("[", ""));
-	let catchContent = input.catch ? normalizeDynamicRenderer(input.catch) || 0 : void 0, placeholderContent = normalizeDynamicRenderer(input.placeholder);
-	catchContent === void 0 ? placeholderContent ? tryPlaceholder(content, placeholderContent, branchId) : content() : tryCatch(placeholderContent ? () => tryPlaceholder(content, placeholderContent, branchId) : content, catchContent || (() => {})), writeScope(branchId, {
+	let catchContent = input.catch ? normalizeDynamicRenderer(input.catch) || 0 : void 0, placeholderContent = normalizeDynamicRenderer(input.placeholder), placeholderBranchId = placeholderContent ? _scope_id() : 0, branchId = _peek_scope_id();
+	$chunk.writeHTML($chunk.boundary.state.mark("[", "")), catchContent === void 0 ? placeholderContent ? tryPlaceholder(content, placeholderContent, branchId, scopeId, placeholderBranchId) : content() : tryCatch(placeholderContent ? () => tryPlaceholder(content, placeholderContent, branchId, scopeId, placeholderBranchId) : content, catchContent || (() => {})), writeScope(branchId, {
 		C: accessor,
 		E: catchContent,
 		Q: placeholderContent
 	}), $chunk.writeHTML($chunk.boundary.state.mark("]", scopeId + " " + accessor + " " + branchId));
 }
-function tryPlaceholder(content, placeholder, branchId) {
+function tryPlaceholder(content, placeholder, branchId, scopeId, placeholderBranchId) {
 	let chunk = $chunk, { boundary } = chunk, body = chunk.fork(boundary, null);
 	if (body === body.render(content)) {
 		chunk.append(body);
@@ -1516,7 +1514,9 @@ function tryPlaceholder(content, placeholder, branchId) {
 	chunk.next = $chunk = chunk.fork(boundary, chunk.next), chunk.placeholder = {
 		body,
 		render: placeholder,
-		branchId
+		branchId,
+		scopeId,
+		placeholderBranchId
 	};
 }
 function tryCatch(content, catchContent) {
@@ -1665,10 +1665,10 @@ var State = class {
 		if (placeholder) {
 			let body = placeholder.body.consume();
 			if (body.async) {
-				let { state } = this.boundary, reorderId = body.reorderId = placeholder.branchId ? placeholder.branchId + "" : state.nextReorderId();
+				let { state } = this.boundary, { branchId, scopeId, placeholderBranchId } = placeholder, reorderId = body.reorderId = branchId ? branchId + "" : state.nextReorderId();
 				this.writeHTML(state.mark("!^", reorderId));
-				let after = this.render(placeholder.render);
-				after !== this && this.boundary.abort(/* @__PURE__ */ Error("An @placeholder cannot contain async content.")), after.writeHTML(state.mark("!", reorderId)), state.reorder(body);
+				let { effects } = this, beforeBranch = deferBranchStart(this), after = this.render(() => withBranchId(placeholderBranchId, placeholder.render)), stateful = after === this && this.effects !== effects;
+				applyBranchStart(this, beforeBranch, stateful), after === this ? stateful && (this.render(() => writeScope(branchId, { P: scopeWithId(state, placeholderBranchId) })), this.writeHTML(state.mark("]", scopeId + " " + ("P" + branchId) + " " + placeholderBranchId)), body.writeEffect(branchId, "f")) : this.boundary.abort(/* @__PURE__ */ Error("An @placeholder cannot contain async content.")), this.writeHTML(state.mark("!", reorderId)), state.reorder(body);
 			} else body.next = this.next, this.next = body;
 			this.placeholder = null;
 		}
@@ -1719,7 +1719,7 @@ var State = class {
 		}
 		readyResumeScripts && (needsWalk = !0);
 		let effects = this.async ? "" : this.effects, { html, scripts } = this;
-		if (state.needsMainRuntime && !state.hasMainRuntime && (state.hasMainRuntime = !0, scripts = concatScripts(scripts, "(e=>(self[e]||=(l,f=e+l,s=f.length,a={},d=[],t=document,n=t.createTreeWalker(t,129))=>t=self[e][l]={i:f,d:t,l:a,v:d,x(){},w(e,l,r){for(;e=n.nextNode();)t.x(l=(l=e.data)&&!l.indexOf(f)&&(a[r=l.slice(s+1)]=e,l[s]),r,e),l>\"#\"&&d.push(e)}},self[e]))(\"" + $global.runtimeId + "\")(\"" + $global.renderId + "\")")), scripts = concatScripts(scripts, readyResumeScripts), effects && (needsWalk = !0, state.resumes = state.resumes ? state.resumes + ",\"" + effects + "\"" : "\"" + effects + "\""), state.resumes && (state.hasWrittenResume ? scripts = concatScripts(scripts, runtimePrefix + ".r.push(" + state.resumes + ")") : (state.hasWrittenResume = !0, scripts = concatScripts(scripts, runtimePrefix + ".r=[" + state.resumes + "]"))), state.writeReorders) {
+		if (state.needsMainRuntime && !state.hasMainRuntime && (state.hasMainRuntime = !0, scripts = concatScripts(scripts, "(e=>(self[e]||=(l,f=e+l,s=f.length,a={},d=[],t=document,n=t.createTreeWalker(t,129))=>t=self[e][l]={i:f,d:t,l:a,v:d,x(){},w(e,l,r){for(;e=n.nextNode();)t.x(l=(l=e.data)&&!l.indexOf(f)&&(a[r=l.slice(s+1)]=e,l[s]),r,e),l>\"#\"&&d.push(e)}},self[e]))(\"" + $global.runtimeId + "\")(\"" + $global.renderId + "\")")), scripts = concatScripts(scripts, readyResumeScripts), effects && (needsWalk = !0, state.resumes = state.resumes ? state.resumes + ",\"" + effects + "\"" : "\"" + effects + "\""), state.writeReorders) {
 			let carried = null;
 			for (let reorderedChunk of state.writeReorders) {
 				if (reorderedChunk.async && reorderedChunk.consumed) {
@@ -1745,7 +1745,7 @@ var State = class {
 			}
 			state.writeReorders = carried;
 		}
-		return needsWalk && (scripts = concatScripts(scripts, runtimePrefix + ".w()")), this.html = html, this.scripts = scripts, this.async || (this.effects = this.lastEffect = ""), state.resumes = "", this;
+		return flushSerializer(boundary, state), state.resumes && (state.hasWrittenResume ? scripts = concatScripts(scripts, runtimePrefix + ".r.push(" + state.resumes + ")") : (state.hasWrittenResume = !0, scripts = concatScripts(scripts, runtimePrefix + ".r=[" + state.resumes + "]"))), needsWalk && (scripts = concatScripts(scripts, runtimePrefix + ".w()")), this.html = html, this.scripts = scripts, this.async || (this.effects = this.lastEffect = ""), state.resumes = "", this;
 	}
 	flushHTML() {
 		let { boundary } = this, { state } = boundary;

package/dist/translator/index.js

@@ -4173,6 +4173,7 @@ var html_default = { translate: {
 		});
 	},
 	exit(program) {
+		if (program.node.extra.hasGlobalRead) getHTMLSectionStatements(getSection(program)).push(_marko_compiler.types.variableDeclaration("const", [_marko_compiler.types.variableDeclarator(_marko_compiler.types.identifier("$global"), callRuntime("$global"))]));
 		flushInto(program);
 		writeHTMLResumeStatements(program);
 		traverseReplace(program.node, "body", replaceNode);
@@ -7292,6 +7293,7 @@ function setReferencesScope(path) {
 }
 const [getGlobalBinding] = createProgramState(() => createBinding("$global", 7, getOrCreateSection((0, _marko_compiler_babel_utils.getProgram)())));
 function trackGlobalReference(path) {
+	(0, _marko_compiler_babel_utils.getProgram)().node.extra.hasGlobalRead = true;
 	trackReference(path, getGlobalBinding());
 }
 function createBindingsAndTrackReferences(lVal, type, scope, section, upstreamAlias, property, excludeProperties, restOffset) {
@@ -9638,8 +9640,10 @@ var try_default = {
 				const section = getSection(tag);
 				const bodySection = getSectionForBody(tag.get("body"));
 				const signal = getSignal(section, nodeRef, "try");
+				const hasPlaceholder = !!tag.node.extra?.attributeTags?.["@placeholder"];
 				signal.build = () => {
 					importRuntimeFeature("catch");
+					if (hasPlaceholder) importRuntimeFeature("placeholder");
 					return callRuntime("_try", getScopeAccessorLiteral(nodeRef, true), ...replaceNullishAndEmptyFunctionsWith0(getBranchRendererArgs(bodySection)));
 				};
 				if (translatedAttrs.statements.length) addStatement("render", section, referencedBindings, translatedAttrs.statements);
@@ -10096,8 +10100,7 @@ var referenced_identifier_default = {
 		if (identifier.scope.hasBinding(name)) return;
 		switch (name) {
 			case "$global":
-				if (isOutputHTML()) identifier.replaceWith(_marko_compiler.types.callExpression(importRuntime("$global"), []));
-				else identifier.replaceWith(_marko_compiler.types.memberExpression(scopeIdentifier, _marko_compiler.types.identifier(getAccessorProp().Global)));
+				if (!isOutputHTML()) identifier.replaceWith(_marko_compiler.types.memberExpression(scopeIdentifier, _marko_compiler.types.identifier(getAccessorProp().Global)));
 				break;
 			case "$signal": if (isOutputHTML()) identifier.replaceWith(_marko_compiler.types.callExpression(_marko_compiler.types.arrowFunctionExpression([], _marko_compiler.types.blockStatement([_marko_compiler.types.throwStatement(_marko_compiler.types.newExpression(_marko_compiler.types.identifier("Error"), [_marko_compiler.types.stringLiteral("Cannot use $signal in a server render.")]))])), []));
 			else {

package/dist/translator/util/references.d.ts

@@ -82,6 +82,10 @@ interface ExtraRead {
     localFn?: ReferencedFunctionExtra;
 }
 declare module "@marko/compiler/dist/types" {
+    interface ProgramExtra {
+        /** This template reads `$global`, so HTML output declares a const for it. */
+        hasGlobalRead?: true;
+    }
     interface NodeExtra {
         section?: Section;
         referencedBindings?: ReferencedBindings;

package/dist/translator/util/runtime.d.ts

@@ -5,7 +5,7 @@ export type DOMRuntimeHelpers = keyof typeof import("../../dom");
 export type HTMLRuntimeHelpers = keyof typeof import("../../html");
 export declare function importRuntime(name: DOMRuntimeHelpers | HTMLRuntimeHelpers): t.Identifier;
 export declare function callRuntime(name: DOMRuntimeHelpers | HTMLRuntimeHelpers, ...args: Array<Parameters<typeof t.callExpression>[1][number] | Falsy>): t.CallExpression;
-export type DOMRuntimeFeature = "catch" | "controllable" | "controllable-input" | "controllable-open" | "controllable-select" | "controllable-textarea" | "dynamic-tag-var";
+export type DOMRuntimeFeature = "catch" | "controllable" | "controllable-input" | "controllable-open" | "controllable-select" | "controllable-textarea" | "dynamic-tag-var" | "placeholder";
 export declare function importRuntimeFeature(feature: DOMRuntimeFeature): void;
 export declare function getHTMLRuntime(): {
     _escape: typeof _escape;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "marko",
-  "version": "6.3.39",
+  "version": "6.3.40",
   "description": "Optimized runtime for Marko templates.",
   "keywords": [
     "api",
@@ -54,8 +54,8 @@
     "magic-string": "^0.30.21"
   },
   "devDependencies": {
-    "marko": "5.39.34",
-    "@marko/runtime-tags": "npm:marko@6.3.39"
+    "@marko/runtime-tags": "npm:marko@6.3.40",
+    "marko": "5.39.34"
   },
   "engines": {
     "node": ">=22"