diff --git a/.changeset/honest-trainers-smoke.md b/.changeset/honest-trainers-smoke.md new file mode 100644 index 0000000000..704daa956b --- /dev/null +++ b/.changeset/honest-trainers-smoke.md @@ -0,0 +1,7 @@ +--- +"@marko/translator-tags": patch +"@marko/runtime-tags": patch +"@marko/babel-utils": patch +--- + +Refactor and improve logic around functon registration, binding renaming, and binding assignments. diff --git a/.sizes.json b/.sizes.json index 2aa646cd3e..428219be9d 100644 --- a/.sizes.json +++ b/.sizes.json @@ -7,68 +7,68 @@ { "name": "*", "total": { - "min": 17931, - "brotli": 6479 + "min": 18009, + "brotli": 6502 } }, { "name": "counter", "user": { - "min": 209, + "min": 189, "brotli": 144 }, "runtime": { - "min": 3761, - "brotli": 1585 + "min": 3763, + "brotli": 1586 }, "total": { - "min": 3970, - "brotli": 1729 + "min": 3952, + "brotli": 1730 } }, { "name": "counter 💧", "user": { - "min": 131, - "brotli": 116 + "min": 111, + "brotli": 100 }, "runtime": { - "min": 3161, - "brotli": 1425 + "min": 3168, + "brotli": 1438 }, "total": { - "min": 3292, - "brotli": 1541 + "min": 3279, + "brotli": 1538 } }, { "name": "comments", "user": { - "min": 1173, - "brotli": 549 + "min": 1153, + "brotli": 544 }, "runtime": { - "min": 7768, - "brotli": 3150 + "min": 7770, + "brotli": 3154 }, "total": { - "min": 8941, - "brotli": 3699 + "min": 8923, + "brotli": 3698 } }, { "name": "comments 💧", "user": { - "min": 974, - "brotli": 487 + "min": 954, + "brotli": 477 }, "runtime": { - "min": 8775, - "brotli": 3566 + "min": 8782, + "brotli": 3567 }, "total": { - "min": 9749, - "brotli": 4053 + "min": 9736, + "brotli": 4044 } } ] diff --git a/.sizes/comments.csr/entry.js b/.sizes/comments.csr/entry.js index 72ac7b5ad4..f7b3fa4a25 100644 --- a/.sizes/comments.csr/entry.js +++ b/.sizes/comments.csr/entry.js @@ -1,4 +1,4 @@ -// size: 1173 (min) 549 (brotli) +// size: 1153 (min) 544 (brotli) const _expr_comment_comments_id$ifBody = intersection( 2, (_scope) => { @@ -39,17 +39,10 @@ const _expr_comment_comments_id$ifBody = intersection( () => _id$forBody, ), _if$forBody = conditional(4), - _open$forBody_effect = effect("a1", (_scope) => - on( - _scope[2], - "click", - ((_scope) => { - const { 11: open } = _scope; - return function () { - _open$forBody(_scope, !open); - }; - })(_scope), - ), + _open$forBody_effect = effect("a1", (_scope, { 11: open }) => + on(_scope[2], "click", function () { + _open$forBody(_scope, !open); + }), ), _open$forBody = state(11, (_scope, open) => { attr(_scope[0], "hidden", !open), diff --git a/.sizes/comments.ssr/entry.js b/.sizes/comments.ssr/entry.js index e856b70c1a..6f5218d0eb 100644 --- a/.sizes/comments.ssr/entry.js +++ b/.sizes/comments.ssr/entry.js @@ -1,4 +1,4 @@ -// size: 974 (min) 487 (brotli) +// size: 954 (min) 477 (brotli) const _expr_comment_comments_id$ifBody = intersection( 2, (_scope) => { @@ -39,17 +39,10 @@ const _expr_comment_comments_id$ifBody = intersection( () => _id$forBody, ), _if$forBody = conditional(4), - _open$forBody_effect = effect("a1", (_scope) => - on( - _scope[2], - "click", - ((_scope) => { - const { 11: open } = _scope; - return function () { - _open$forBody(_scope, !open); - }; - })(_scope), - ), + _open$forBody_effect = effect("a1", (_scope, { 11: open }) => + on(_scope[2], "click", function () { + _open$forBody(_scope, !open); + }), ), _open$forBody = state(11, (_scope, open) => { attr(_scope[0], "hidden", !open), diff --git a/.sizes/counter.csr/entry.js b/.sizes/counter.csr/entry.js index 1eb5342989..746ac775a3 100644 --- a/.sizes/counter.csr/entry.js +++ b/.sizes/counter.csr/entry.js @@ -1,15 +1,8 @@ -// size: 209 (min) 144 (brotli) -const _clickCount_effect = effect("a0", (_scope) => - on( - _scope[0], - "click", - ((_scope) => { - const { 2: clickCount } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; - })(_scope), - ), +// size: 189 (min) 144 (brotli) +const _clickCount_effect = effect("a0", (_scope, { 2: clickCount }) => + on(_scope[0], "click", function () { + _clickCount(_scope, clickCount + 1); + }), ), _clickCount = state(2, (_scope, clickCount) => { data(_scope[1], clickCount), _clickCount_effect(_scope); diff --git a/.sizes/counter.ssr/entry.js b/.sizes/counter.ssr/entry.js index 33e0a166d5..d33855810d 100644 --- a/.sizes/counter.ssr/entry.js +++ b/.sizes/counter.ssr/entry.js @@ -1,15 +1,8 @@ -// size: 131 (min) 116 (brotli) -const _clickCount_effect = effect("a0", (_scope) => - on( - _scope[0], - "click", - ((_scope) => { - const { 2: clickCount } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; - })(_scope), - ), +// size: 111 (min) 100 (brotli) +const _clickCount_effect = effect("a0", (_scope, { 2: clickCount }) => + on(_scope[0], "click", function () { + _clickCount(_scope, clickCount + 1); + }), ), _clickCount = state(2, (_scope, clickCount) => { data(_scope[1], clickCount), _clickCount_effect(_scope); diff --git a/.sizes/dom.js b/.sizes/dom.js index 064e78d998..2c465f7bab 100644 --- a/.sizes/dom.js +++ b/.sizes/dom.js @@ -1,4 +1,4 @@ -// size: 17931 (min) 6479 (brotli) +// size: 18009 (min) 6502 (brotli) var empty = [], rest = Symbol(); function attrTag(attrs2) { @@ -193,7 +193,10 @@ var registeredValues = {}, } else i === len || "string" != typeof resumes[i] ? delete this.z[this.o] - : registeredValues[resumes[i++]](scopeLookup[resumeData]); + : registeredValues[resumes[i++]]( + scopeLookup[resumeData], + scopeLookup[resumeData], + ); } } finally { isResuming = !1; @@ -489,7 +492,7 @@ function prepareEffects(fn) { function runEffects(effects = pendingEffects) { for (let i = 0; i < effects.length; i += 2) { let scope = effects[i]; - (0, effects[i + 1])(scope); + (0, effects[i + 1])(scope, scope); } } function runSignals(signals) { @@ -875,11 +878,13 @@ function styleAttr(element, value2) { ); } function data(node, value2) { - let normalizedValue = (function (value2) { - return value2 || 0 === value2 ? value2 + "" : "‍"; - })(value2); + let normalizedValue = normalizeString(value2); node.data !== normalizedValue && (node.data = normalizedValue); } +function textContent(node, value2) { + let normalizedValue = normalizeString(value2); + node.textContent !== normalizedValue && (node.textContent = normalizedValue); +} function attrs(scope, nodeAccessor, nextAttrs) { let el = scope[nodeAccessor]; for (let { name: name } of el.attributes) @@ -1035,6 +1040,9 @@ function props(scope, nodeIndex, index) { function normalizeAttrValue(value2) { if (value2 || 0 === value2) return !0 === value2 ? "" : value2 + ""; } +function normalizeString(value2) { + return value2 || 0 === value2 ? value2 + "" : "‍"; +} function lifecycle(scope, index, thisObj) { let instance = scope[index]; instance diff --git a/.sizes/name-cache.json b/.sizes/name-cache.json index 010cce1c34..6a0d47d508 100644 --- a/.sizes/name-cache.json +++ b/.sizes/name-cache.json @@ -1 +1 @@ -{"vars":{"props":{"$empty":"e","$rest":"t","$attrTag":"n","$attrTags":"r","$attrTagIterator":"i","$forIn":"l","$forOf":"o","$forTo":"f","$isScheduled":"u","$port2":"a","$flushAndWaitFrame":"c","$triggerMacroTask":"s","$createScope":"d","$emptyScope":"h","$getEmptyScope":"g","$destroyScope":"p","$_destroyScope":"v","$onDestroy":"b","$removeAndDestroyScope":"m","$insertBefore":"y","$registeredValues":"k","$Render":"w","$isResuming":"C","$register":"A","$registerBoundSignal":"S","$init":"N","$registerSubscriber":"x","$nodeRef":"$","$MARK":"M","$CLEAN":"E","$DIRTY":"I","$state":"T","$value":"_","$accessorId":"O","$intersection":"B","$defaultGetOwnerScope":"V","$closure":"j","$dynamicClosure":"R","$childClosures":"q","$dynamicSubscribers":"D","$setTagVar":"P","$tagVarSignal":"W","$setTagVarChange":"L","$tagVarSignalChange":"z","$renderBodyClosures":"F","$tagIdsByGlobal":"U","$nextTagId":"G","$inChild":"J","$intersections":"X","$effect":"Z","$pendingSignals":"H","$pendingEffects":"K","$rendering":"Q","$queueEffect":"Y","$run":"ee","$prepareEffects":"te","$runEffects":"ne","$runSignals":"re","$resetAbortSignal":"ie","$getAbortSignal":"le","$stringifyClassObject":"oe","$NON_DIMENSIONAL":"fe","$stringifyStyleObject":"ue","$toDelimitedString":"ae","$isEventHandler":"ce","$getEventHandlerName":"se","$normalizeDynamicRenderer":"de","$elementHandlersByEvent":"he","$defaultDelegator":"ge","$on":"pe","$createDelegator":"ve","$handleDelegated":"be","$stripSpacesAndPunctuation":"me","$controllable_input_checked":"ye","$controllable_input_checked_effect":"ke","$controllable_input_checkedValue":"we","$controllable_input_checkedValue_effect":"Ce","$controllable_input_value":"Ae","$controllable_input_value_effect":"Se","$controllable_select_value":"Ne","$controllable_select_value_effect":"xe","$setSelectOptions":"$e","$controllable_detailsOrDialog_open":"Me","$controllable_detailsOrDialog_open_effect":"Ee","$inputType":"Ie","$setValueAndUpdateSelection":"Te","$setCheckboxValue":"_e","$delegateFormControl":"Oe","$formChangeHandlers":"Be","$syncControllable":"Ve","$onFormChange":"je","$onFormReset":"Re","$hasValueChanged":"qe","$hasCheckboxChanged":"De","$hasSelectChanged":"Pe","$hasFormElementChanged":"We","$normalizeStrProp":"Le","$normalizeBoolProp":"ze","$toValueProp":"Fe","$fallback":"Ue","$parser":"Ge","$parseHTML":"Je","$attr":"Xe","$setAttribute":"Ze","$classAttr":"He","$styleAttr":"Ke","$data":"Qe","$attrs":"Ye","$hasAttrAlias":"et","$partialAttrs":"tt","$attrsInternal":"nt","$attrsEvents":"rt","$html":"it","$props":"lt","$normalizeAttrValue":"ot","$lifecycle":"ft","$walker":"ut","$trimWalkString":"at","$walk":"ct","$walkInternal":"st","$createScopeWithRenderer":"dt","$createScopeWithTagNameOrRenderer":"ht","$initRenderer":"gt","$dynamicTagAttrs":"pt","$createRendererWithOwner":"vt","$createRenderer":"bt","$_clone":"mt","$conditional":"yt","$inConditionalScope":"kt","$conditionalOnlyChild":"wt","$setConditionalRendererOnlyChild":"Ct","$emptyMarkerMap":"At","$emptyMarkerArray":"St","$emptyMap":"Nt","$emptyArray":"xt","$loopOf":"$t","$loopIn":"Mt","$loopTo":"Et","$loop":"It","$inLoopScope":"Tt","$bySecondArg":"_t","$byFirstArg":"Ot","$isDifferentRenderer":"Bt","$classIdToScope":"Vt","$compat":"jt","$noop":"Rt","$createTemplate":"qt","$mount":"Dt","$parseHTMLOrSingleNode":"Wt","$marker":"Ft","$_clickCount_effect":"Qt","$_clickCount":"Yt","$_setup_":"zt","$_expr_comment_comments_id$ifBody":"ss","$_id$ifBody":"as","$_comment_comments$ifBody":"ts","$_ifBody":"ns","$_expr_input_path_i$forBody":"os","$_if$forBody":"cs","$_open$forBody_effect":"is","$_open$forBody":"ms","$_id$forBody":"ls","$_i$forBody":"us","$_comment_comments$forBody":"es","$_comment_text$forBody":"ds","$_comment$forBody":"rs","$_params_2$forBody":"bs","$_input_path$forBody":"ps","$_for":"hs","$_input_path_":"vs","$_input_comments_":"fs","$_input_$1":"js","$_input_":"ks","$_params__":"Ss","$noop2":"Pt"}}} \ No newline at end of file +{"vars":{"props":{"$empty":"e","$rest":"t","$attrTag":"n","$attrTags":"r","$attrTagIterator":"i","$forIn":"l","$forOf":"o","$forTo":"f","$isScheduled":"u","$port2":"a","$flushAndWaitFrame":"c","$triggerMacroTask":"s","$createScope":"d","$emptyScope":"h","$getEmptyScope":"g","$destroyScope":"p","$_destroyScope":"v","$onDestroy":"b","$removeAndDestroyScope":"m","$insertBefore":"y","$registeredValues":"k","$Render":"w","$isResuming":"C","$register":"A","$registerBoundSignal":"S","$init":"N","$registerSubscriber":"x","$nodeRef":"$","$MARK":"M","$CLEAN":"E","$DIRTY":"I","$state":"T","$value":"_","$accessorId":"O","$intersection":"B","$defaultGetOwnerScope":"V","$closure":"j","$dynamicClosure":"R","$childClosures":"q","$dynamicSubscribers":"D","$setTagVar":"P","$tagVarSignal":"W","$setTagVarChange":"L","$tagVarSignalChange":"z","$renderBodyClosures":"F","$tagIdsByGlobal":"U","$nextTagId":"G","$inChild":"J","$intersections":"X","$effect":"Z","$pendingSignals":"H","$pendingEffects":"K","$rendering":"Q","$queueEffect":"Y","$run":"ee","$prepareEffects":"te","$runEffects":"ne","$runSignals":"re","$resetAbortSignal":"ie","$getAbortSignal":"le","$stringifyClassObject":"oe","$NON_DIMENSIONAL":"fe","$stringifyStyleObject":"ue","$toDelimitedString":"ae","$isEventHandler":"ce","$getEventHandlerName":"se","$normalizeDynamicRenderer":"de","$elementHandlersByEvent":"he","$defaultDelegator":"ge","$on":"pe","$createDelegator":"ve","$handleDelegated":"be","$stripSpacesAndPunctuation":"me","$controllable_input_checked":"ye","$controllable_input_checked_effect":"ke","$controllable_input_checkedValue":"we","$controllable_input_checkedValue_effect":"Ce","$controllable_input_value":"Ae","$controllable_input_value_effect":"Se","$controllable_select_value":"Ne","$controllable_select_value_effect":"xe","$setSelectOptions":"$e","$controllable_detailsOrDialog_open":"Me","$controllable_detailsOrDialog_open_effect":"Ee","$inputType":"Ie","$setValueAndUpdateSelection":"Te","$setCheckboxValue":"_e","$delegateFormControl":"Oe","$formChangeHandlers":"Be","$syncControllable":"Ve","$onFormChange":"je","$onFormReset":"Re","$hasValueChanged":"qe","$hasCheckboxChanged":"De","$hasSelectChanged":"Pe","$hasFormElementChanged":"We","$normalizeStrProp":"Le","$normalizeBoolProp":"ze","$toValueProp":"Fe","$fallback":"Ue","$parser":"Ge","$parseHTML":"Je","$attr":"Xe","$setAttribute":"Ze","$classAttr":"He","$styleAttr":"Ke","$data":"Qe","$attrs":"Ye","$hasAttrAlias":"et","$partialAttrs":"tt","$attrsInternal":"nt","$attrsEvents":"rt","$html":"it","$props":"lt","$normalizeAttrValue":"ot","$lifecycle":"ft","$walker":"ut","$trimWalkString":"at","$walk":"ct","$walkInternal":"st","$createScopeWithRenderer":"dt","$createScopeWithTagNameOrRenderer":"ht","$initRenderer":"gt","$dynamicTagAttrs":"pt","$createRendererWithOwner":"vt","$createRenderer":"bt","$_clone":"mt","$conditional":"yt","$inConditionalScope":"kt","$conditionalOnlyChild":"wt","$setConditionalRendererOnlyChild":"Ct","$emptyMarkerMap":"At","$emptyMarkerArray":"St","$emptyMap":"Nt","$emptyArray":"xt","$loopOf":"$t","$loopIn":"Mt","$loopTo":"Et","$loop":"It","$inLoopScope":"Tt","$bySecondArg":"_t","$byFirstArg":"Ot","$isDifferentRenderer":"Bt","$classIdToScope":"Vt","$compat":"jt","$noop":"Rt","$createTemplate":"qt","$mount":"Dt","$parseHTMLOrSingleNode":"Wt","$marker":"Ft","$_clickCount_effect":"Qt","$_clickCount":"Yt","$_setup_":"zt","$_expr_comment_comments_id$ifBody":"ss","$_id$ifBody":"as","$_comment_comments$ifBody":"ts","$_ifBody":"ns","$_expr_input_path_i$forBody":"os","$_if$forBody":"cs","$_open$forBody_effect":"is","$_open$forBody":"ms","$_id$forBody":"ls","$_i$forBody":"us","$_comment_comments$forBody":"es","$_comment_text$forBody":"ds","$_comment$forBody":"rs","$_params_2$forBody":"bs","$_input_path$forBody":"ps","$_for":"hs","$_input_path_":"vs","$_input_comments_":"fs","$_input_$1":"js","$_input_":"ks","$_params__":"Ss","$noop2":"Pt","$textContent":"Lt","$normalizeString":"Ut"}}} \ No newline at end of file diff --git a/packages/babel-utils/index.d.ts b/packages/babel-utils/index.d.ts index 9538c7c1ca..957dac1e11 100644 --- a/packages/babel-utils/index.d.ts +++ b/packages/babel-utils/index.d.ts @@ -62,8 +62,9 @@ export interface TagDefinition { migrators?: PluginDefinition[]; parseOptions?: { text?: boolean; - openTagOnly?: boolean; statement?: boolean; + controlFlow?: boolean; + openTagOnly?: boolean; rawOpenTag?: boolean; preserveWhitespace?: boolean; }; @@ -136,7 +137,7 @@ export interface Tag { controlFlow?: boolean; ignoreAttributes?: boolean; relaxRequireCommas?: boolean; - state?: "html" | "static-text" | "parsed-text" | "cdata"; + text?: boolean; }; } diff --git a/packages/runtime-tags/src/dom.ts b/packages/runtime-tags/src/dom.ts index e495562cf6..b66ae772f2 100644 --- a/packages/runtime-tags/src/dom.ts +++ b/packages/runtime-tags/src/dom.ts @@ -37,6 +37,7 @@ export { partialAttrs, props, styleAttr, + textContent, } from "./dom/dom"; export { on } from "./dom/event"; export { run } from "./dom/queue"; diff --git a/packages/runtime-tags/src/dom/dom.ts b/packages/runtime-tags/src/dom/dom.ts index 5da9c464a8..cbd8a20e2d 100644 --- a/packages/runtime-tags/src/dom/dom.ts +++ b/packages/runtime-tags/src/dom/dom.ts @@ -67,6 +67,14 @@ export function data(node: Text | Comment, value: unknown) { } } +export function textContent(node: ParentNode, value: unknown) { + const normalizedValue = normalizeString(value); + // TODO: benchmark if it is actually faster to check data first + if (node.textContent !== normalizedValue) { + node.textContent = normalizedValue; + } +} + export function attrs( scope: Scope, nodeAccessor: Accessor, diff --git a/packages/runtime-tags/src/dom/queue.ts b/packages/runtime-tags/src/dom/queue.ts index 7aabd36850..479d5675eb 100644 --- a/packages/runtime-tags/src/dom/queue.ts +++ b/packages/runtime-tags/src/dom/queue.ts @@ -72,8 +72,8 @@ export function prepareEffects(fn: () => void): unknown[] { export function runEffects(effects: unknown[] = pendingEffects) { for (let i = 0; i < effects.length; i += PendingEffectOffset.Total) { const scope = effects[i] as Scope; - const fn = effects[i + 1] as (scope: Scope) => void; - fn(scope); + const fn = effects[i + 1] as (a: Scope, b: Scope) => void; + fn(scope, scope); } } diff --git a/packages/runtime-tags/src/dom/resume.ts b/packages/runtime-tags/src/dom/resume.ts index 9576033fa0..37e6ef7842 100644 --- a/packages/runtime-tags/src/dom/resume.ts +++ b/packages/runtime-tags/src/dom/resume.ts @@ -176,7 +176,8 @@ class Render implements RenderData { } else if (i === len || typeof resumes[i] !== "string") { delete this.___renders[this.___renderId]; } else { - (registeredValues[resumes[i++] as string] as RegisteredFn)( + (registeredValues[resumes[i++] as string] as any)( + scopeLookup[resumeData], scopeLookup[resumeData], ); } diff --git a/packages/runtime-tags/src/html/writer.ts b/packages/runtime-tags/src/html/writer.ts index c2df7da125..acfea891c1 100644 --- a/packages/runtime-tags/src/html/writer.ts +++ b/packages/runtime-tags/src/html/writer.ts @@ -328,6 +328,7 @@ export class State { public hasReorderRuntime = false; public hasWrittenResume = false; public trailerHTML = ""; + public nonceAttr = ""; public serializer = new Serializer(); public writeReorders: Chunk[] | null = null; public scopes = new Map(); @@ -340,6 +341,9 @@ export class State { }, ) { this.$global = $global; + if ($global.cspNonce) { + this.nonceAttr = " " + escapeAttrValue($global.cspNonce + ""); + } } get runtimePrefix() { @@ -545,10 +549,7 @@ export function prepareChunk(chunk: Chunk) { const head = chunk.consume(); const { boundary, effects } = head; const { state } = boundary; - const { $global, runtimePrefix, serializer } = state; - const nonceAttr = $global.cspNonce - ? " nonce=" + escapeAttrValue($global.cspNonce + "") - : ""; + const { $global, runtimePrefix, serializer, nonceAttr } = state; let { html, scripts } = head; let hasWalk = false; head.effects = ""; @@ -704,12 +705,7 @@ export function flushChunk(head: Chunk, last: boolean) { head.html = head.scripts = ""; if (scripts) { - result += - ($global.cspNonce - ? ""; + result += "" + scripts + ""; } if (__flush__) { diff --git a/packages/translator-interop/src/__tests__/fixtures/custom-tag-parameters-from-args/__snapshots__/dom.expected/components/custom-tag.js b/packages/translator-interop/src/__tests__/fixtures/custom-tag-parameters-from-args/__snapshots__/dom.expected/components/custom-tag.js index 76e4e599c3..d98afebbb3 100644 --- a/packages/translator-interop/src/__tests__/fixtures/custom-tag-parameters-from-args/__snapshots__/dom.expected/components/custom-tag.js +++ b/packages/translator-interop/src/__tests__/fixtures/custom-tag-parameters-from-args/__snapshots__/dom.expected/components/custom-tag.js @@ -9,17 +9,13 @@ const _expr_Text_x_y = /* @__PURE__ */_$.intersection(3, _scope => { } = _scope; _inputRenderBody_input(_scope, () => [x, y]); }, () => _inputRenderBody_input); -const _onClick = _scope => { - const { - x, - y - } = _scope; - return function () { - _x(_scope, x + 1); - _y(_scope, y + 1); - }; -}; -const _expr_x_y_effect = _$.effect("packages/translator-interop/src/__tests__/fixtures/custom-tag-parameters-from-args/components/custom-tag.marko_0_x_y", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _expr_x_y_effect = _$.effect("packages/translator-interop/src/__tests__/fixtures/custom-tag-parameters-from-args/components/custom-tag.marko_0_x_y", (_scope, { + x, + y +}) => _$.on(_scope["#button/0"], "click", function () { + _x(_scope, x + 1), x; + _y(_scope, y + 1), y; +})); const _expr_x_y = /* @__PURE__ */_$.intersection(2, _scope => { const { x, diff --git a/packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/__snapshots__/dom.expected/components/tags-counter.js b/packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/__snapshots__/dom.expected/components/tags-counter.js index 156d1f0be7..d4e14a4bac 100644 --- a/packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/__snapshots__/dom.expected/components/tags-counter.js +++ b/packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/__snapshots__/dom.expected/components/tags-counter.js @@ -1,15 +1,11 @@ export const _template_ = ""; export const _walks_ = /* get, next(1), get, out(1) */" D l"; import * as _$ from "@marko/runtime-tags/debug/dom"; -const _onClick = _scope => { - const { - count - } = _scope; - return function () { - _count(_scope, count + 1); - }; -}; -const _count_effect = _$.effect("packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/components/tags-counter.marko_0_count", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _count_effect = _$.effect("packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/components/tags-counter.marko_0_count", (_scope, { + count +}) => _$.on(_scope["#button/0"], "click", function () { + _count(_scope, count + 1), count; +})); const _count = /* @__PURE__ */_$.state("count", (_scope, count) => { _$.data(_scope["#text/1"], count); _count_effect(_scope); diff --git a/packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/__snapshots__/dom.expected/template.js b/packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/__snapshots__/dom.expected/template.js index 684a41574a..1db8db3239 100644 --- a/packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/__snapshots__/dom.expected/template.js +++ b/packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/__snapshots__/dom.expected/template.js @@ -14,15 +14,11 @@ const _expr_Text_count = /* @__PURE__ */_$.intersection(2, _scope => { })); }, () => _classCounter_input); const _dynamicTagName = /* @__PURE__ */_$.conditional("#text/2", 0, () => _expr_Text_count); -const _onClick = _scope => { - const { - count - } = _scope; - return function () { - _count(_scope, count + 1); - }; -}; -const _count_effect = _$.effect("packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/template.marko_0_count", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _count_effect = _$.effect("packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/template.marko_0_count", (_scope, { + count +}) => _$.on(_scope["#button/0"], "click", function () { + _count(_scope, count + 1), count; +})); const _count = /* @__PURE__ */_$.state("count", (_scope, count) => { _$.data(_scope["#text/1"], count); _count_effect(_scope); diff --git a/packages/translator-interop/src/__tests__/fixtures/interop-class-to-tags-import/__snapshots__/dom.expected/components/tags-counter.js b/packages/translator-interop/src/__tests__/fixtures/interop-class-to-tags-import/__snapshots__/dom.expected/components/tags-counter.js index 54a0a333e5..907a65e61d 100644 --- a/packages/translator-interop/src/__tests__/fixtures/interop-class-to-tags-import/__snapshots__/dom.expected/components/tags-counter.js +++ b/packages/translator-interop/src/__tests__/fixtures/interop-class-to-tags-import/__snapshots__/dom.expected/components/tags-counter.js @@ -1,15 +1,11 @@ export const _template_ = ""; export const _walks_ = /* get, next(1), get, out(1) */" D l"; import * as _$ from "@marko/runtime-tags/debug/dom"; -const _onClick = _scope => { - const { - count - } = _scope; - return function () { - _count(_scope, count + 1); - }; -}; -const _count_effect = _$.effect("packages/translator-interop/src/__tests__/fixtures/interop-class-to-tags-import/components/tags-counter.marko_0_count", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _count_effect = _$.effect("packages/translator-interop/src/__tests__/fixtures/interop-class-to-tags-import/components/tags-counter.marko_0_count", (_scope, { + count +}) => _$.on(_scope["#button/0"], "click", function () { + _count(_scope, count + 1), count; +})); const _count = /* @__PURE__ */_$.state("count", (_scope, count) => { _$.data(_scope["#text/1"], count); _count_effect(_scope); diff --git a/packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/__snapshots__/dom.expected/template.js b/packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/__snapshots__/dom.expected/template.js index abc1337afe..ec2a28b68a 100644 --- a/packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/__snapshots__/dom.expected/template.js +++ b/packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/__snapshots__/dom.expected/template.js @@ -1,11 +1,8 @@ export const _template_ = "
"; export const _walks_ = /* replace, over(1), next(1), get, out(1) */"D%bD l"; -import * as _$ from "@marko/runtime-tags/debug/dom"; -const _onCount = _$.register("packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/template.marko_0/onCount", _scope => function (newCount) { - _count(_scope, newCount); -}); import _classCounter from "./components/class-counter.marko"; import "marko/src/runtime/helpers/tags-compat/dom-debug.mjs"; +import * as _$ from "@marko/runtime-tags/debug/dom"; _$.register("packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko", _classCounter); const _classCounter_input = _$.dynamicTagAttrs("#text/0"); const _dynamicTagName = /* @__PURE__ */_$.conditional("#text/0", _scope => _classCounter_input(_scope, () => ({ @@ -16,4 +13,10 @@ export function _setup_(_scope) { _count(_scope, 0); _dynamicTagName(_scope, _classCounter); } +function _onCount(_scope) { + return function (newCount) { + _count(_scope, newCount); + }; +} +_$.register("packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/template.marko_0/onCount", _onCount); export default /* @__PURE__ */_$.createTemplate("packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/template.marko", _template_, _walks_, _setup_); \ No newline at end of file diff --git a/packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/__snapshots__/html.expected/template.js b/packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/__snapshots__/html.expected/template.js index 4b2937015e..ac60d55661 100644 --- a/packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/__snapshots__/html.expected/template.js +++ b/packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/__snapshots__/html.expected/template.js @@ -1,6 +1,6 @@ -import * as _$ from "@marko/runtime-tags/debug/html"; import _classCounter from "./components/class-counter.marko"; import { s as _s } from "marko/src/runtime/helpers/tags-compat/html-debug.mjs"; +import * as _$ from "@marko/runtime-tags/debug/html"; const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => { const _scope0_id = _$.nextScopeId(); const count = 0; diff --git a/packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/__snapshots__/dom.expected/components/tags-layout.js b/packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/__snapshots__/dom.expected/components/tags-layout.js index b6d28aa70a..e468acecbf 100644 --- a/packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/__snapshots__/dom.expected/components/tags-layout.js +++ b/packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/__snapshots__/dom.expected/components/tags-layout.js @@ -3,15 +3,11 @@ export const _walks_ = /* get, next(1), get, out(1), next(1), replace, out(1) */ import * as _$ from "@marko/runtime-tags/debug/dom"; const _inputRenderBody_input = _$.dynamicTagAttrs("#text/2"); const _dynamicTagName = /* @__PURE__ */_$.conditional("#text/2", _scope => _inputRenderBody_input(_scope, () => ({})), () => _inputRenderBody_input); -const _onClick = _scope => { - const { - count - } = _scope; - return function () { - _count(_scope, count + 1); - }; -}; -const _count_effect = _$.effect("packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/components/tags-layout.marko_0_count", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _count_effect = _$.effect("packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/components/tags-layout.marko_0_count", (_scope, { + count +}) => _$.on(_scope["#button/0"], "click", function () { + _count(_scope, count + 1), count; +})); const _count = /* @__PURE__ */_$.state("count", (_scope, count) => { _$.data(_scope["#text/1"], count); _count_effect(_scope); diff --git a/packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/__snapshots__/dom.expected/template.js b/packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/__snapshots__/dom.expected/template.js index 3fc813c781..1e3761e787 100644 --- a/packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/__snapshots__/dom.expected/template.js +++ b/packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/__snapshots__/dom.expected/template.js @@ -4,17 +4,13 @@ import * as _$ from "@marko/runtime-tags/debug/dom"; import _classLayout from "./components/class-layout.marko"; import "marko/src/runtime/helpers/tags-compat/dom-debug.mjs"; _$.register("packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko", _classLayout); -const _onClick = _scope => { - const { - _: { - count - } - } = _scope; - return function () { - _count(_scope._, count + 1); - }; -}; -const _count$classLayoutBody_effect = _$.effect("packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _count$classLayoutBody_effect = _$.effect("packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count", (_scope, { + _: { + count + } +}) => _$.on(_scope["#button/0"], "click", function () { + _count(_scope._, count + 1), count; +})); const _count$classLayoutBody = _$.registerSubscriber("packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count/subscriber", /* @__PURE__ */_$.dynamicClosure("count", (_scope, count) => { _$.data(_scope["#text/1"], count); _count$classLayoutBody_effect(_scope); diff --git a/packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/__snapshots__/dom.expected/components/tags-layout.js b/packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/__snapshots__/dom.expected/components/tags-layout.js index 79ad57ca6d..5e50370e37 100644 --- a/packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/__snapshots__/dom.expected/components/tags-layout.js +++ b/packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/__snapshots__/dom.expected/components/tags-layout.js @@ -9,15 +9,11 @@ const _expr_Text_count = /* @__PURE__ */_$.intersection(2, _scope => { _inputRenderBody_input(_scope, () => [count, "hello"]); }, () => _inputRenderBody_input); const _dynamicTagName = /* @__PURE__ */_$.conditional("#text/2", 0, () => _expr_Text_count); -const _onClick = _scope => { - const { - count - } = _scope; - return function () { - _count(_scope, count + 1); - }; -}; -const _count_effect = _$.effect("packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/components/tags-layout.marko_0_count", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _count_effect = _$.effect("packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/components/tags-layout.marko_0_count", (_scope, { + count +}) => _$.on(_scope["#button/0"], "click", function () { + _count(_scope, count + 1), count; +})); const _count = /* @__PURE__ */_$.state("count", (_scope, count) => { _$.data(_scope["#text/1"], count); _count_effect(_scope); diff --git a/packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/__snapshots__/dom.expected/template.js b/packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/__snapshots__/dom.expected/template.js index eba5ed1408..4ab22e3e19 100644 --- a/packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/__snapshots__/dom.expected/template.js +++ b/packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/__snapshots__/dom.expected/template.js @@ -19,17 +19,13 @@ const _params_2$classLayoutBody = /* @__PURE__ */_$.value("_params_2", (_scope, _baseCount$classLayoutBody(_scope, _params_2[0]); _message$classLayoutBody(_scope, _params_2[1]); }, () => _baseCount$classLayoutBody); -const _onClick = _scope => { - const { - _: { - multiplier - } - } = _scope; - return function () { - _multiplier(_scope._, multiplier + 1); - }; -}; -const _multiplier$classLayoutBody_effect = _$.effect("packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier", _scope => _$.on(_scope["#button/1"], "click", _onClick(_scope))); +const _multiplier$classLayoutBody_effect = _$.effect("packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier", (_scope, { + _: { + multiplier + } +}) => _$.on(_scope["#button/1"], "click", function () { + _multiplier(_scope._, multiplier + 1), multiplier; +})); const _multiplier$classLayoutBody = _$.registerSubscriber("packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier/subscriber", /* @__PURE__ */_$.dynamicClosure("multiplier", (_scope, multiplier) => { _$.data(_scope["#text/2"], multiplier); _multiplier$classLayoutBody_effect(_scope); diff --git a/packages/translator-interop/src/__tests__/fixtures/let/__snapshots__/dom.expected/template.js b/packages/translator-interop/src/__tests__/fixtures/let/__snapshots__/dom.expected/template.js index c805a09383..212117743d 100644 --- a/packages/translator-interop/src/__tests__/fixtures/let/__snapshots__/dom.expected/template.js +++ b/packages/translator-interop/src/__tests__/fixtures/let/__snapshots__/dom.expected/template.js @@ -1,15 +1,11 @@ export const _template_ = ""; export const _walks_ = /* get, next(1), get, out(1) */" D l"; import * as _$ from "@marko/runtime-tags/debug/dom"; -const _onClick = _scope => { - const { - count - } = _scope; - return function () { - _count(_scope, count + 1); - }; -}; -const _count_effect = _$.effect("packages/translator-interop/src/__tests__/fixtures/let/template.marko_0_count", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _count_effect = _$.effect("packages/translator-interop/src/__tests__/fixtures/let/template.marko_0_count", (_scope, { + count +}) => _$.on(_scope["#button/0"], "click", function () { + _count(_scope, count + 1), count; +})); const _count = /* @__PURE__ */_$.state("count", (_scope, count) => { _$.data(_scope["#text/1"], count); _count_effect(_scope); diff --git a/packages/translator-tags/src/__tests__/fixtures/assignment-before-tag-var/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/assignment-before-tag-var/__snapshots__/dom.expected/template.hydrate.js index 5d431ab9da..c511719c01 100644 --- a/packages/translator-tags/src/__tests__/fixtures/assignment-before-tag-var/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/assignment-before-tag-var/__snapshots__/dom.expected/template.hydrate.js @@ -1,19 +1,11 @@ -// size: 190 (min) 126 (brotli) +// size: 170 (min) 117 (brotli) const _lastClickCount = _$.state(4, (_scope, lastClickCount) => _$.data(_scope[2], lastClickCount), ), - _clickCount_effect = _$.effect("a0", (_scope) => - _$.on( - _scope[0], - "click", - ((_scope) => { - const { 3: clickCount } = _scope; - return function () { - _lastClickCount(_scope, clickCount), - _clickCount(_scope, clickCount + 1); - }; - })(_scope), - ), + _clickCount_effect = _$.effect("a0", (_scope, { 3: clickCount }) => + _$.on(_scope[0], "click", function () { + _lastClickCount(_scope, clickCount), _clickCount(_scope, clickCount + 1); + }), ), _clickCount = _$.state(3, (_scope, clickCount) => { _$.data(_scope[1], clickCount), _clickCount_effect(_scope); diff --git a/packages/translator-tags/src/__tests__/fixtures/assignment-before-tag-var/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/assignment-before-tag-var/__snapshots__/dom.expected/template.js index 62df9dbc0b..c47b7e3938 100644 --- a/packages/translator-tags/src/__tests__/fixtures/assignment-before-tag-var/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/assignment-before-tag-var/__snapshots__/dom.expected/template.js @@ -2,16 +2,12 @@ export const _template_ = " was "; export const _walks_ = /* get, over(1), next(1), replace, over(2), replace, out(1) */" bD%c%l"; import * as _$ from "@marko/runtime-tags/debug/dom"; const _lastClickCount = /* @__PURE__ */_$.state("lastClickCount", (_scope, lastClickCount) => _$.data(_scope["#text/2"], lastClickCount)); -const _onClick = _scope => { - const { - clickCount - } = _scope; - return function () { - _lastClickCount(_scope, clickCount); - _clickCount(_scope, clickCount + 1); - }; -}; -const _clickCount_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/assignment-before-tag-var/template.marko_0_clickCount", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _clickCount_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/assignment-before-tag-var/template.marko_0_clickCount", (_scope, { + clickCount +}) => _$.on(_scope["#button/0"], "click", function () { + _lastClickCount(_scope, clickCount); + _clickCount(_scope, clickCount + 1), clickCount; +})); const _clickCount = /* @__PURE__ */_$.state("clickCount", (_scope, clickCount) => { _$.data(_scope["#text/1"], clickCount); _clickCount_effect(_scope); diff --git a/packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/__snapshots__/dom.expected/template.hydrate.js index 3ce0f417f4..867acbe5ff 100644 --- a/packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/__snapshots__/dom.expected/template.hydrate.js @@ -1,15 +1,8 @@ -// size: 190 (min) 135 (brotli) -const _disabled_effect = _$.effect("a0", (_scope) => - _$.on( - _scope[1], - "click", - ((_scope) => { - const { 3: disabled } = _scope; - return function () { - _disabled(_scope, !disabled); - }; - })(_scope), - ), +// size: 170 (min) 132 (brotli) +const _disabled_effect = _$.effect("a0", (_scope, { 3: disabled }) => + _$.on(_scope[1], "click", function () { + _disabled(_scope, !disabled); + }), ), _disabled = _$.state(3, (_scope, disabled) => { _$.attr(_scope[0], "disabled", disabled), diff --git a/packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/__snapshots__/dom.expected/template.js index dbc9a75aeb..95e8e64758 100644 --- a/packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/__snapshots__/dom.expected/template.js @@ -1,15 +1,11 @@ export const _template_ = ""; export const _walks_ = /* get, over(1), get, next(1), get, out(1) */" b D l"; import * as _$ from "@marko/runtime-tags/debug/dom"; -const _onClick = _scope => { - const { - disabled - } = _scope; - return function () { - _disabled(_scope, !disabled); - }; -}; -const _disabled_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/template.marko_0_disabled", _scope => _$.on(_scope["#button/1"], "click", _onClick(_scope))); +const _disabled_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/template.marko_0_disabled", (_scope, { + disabled +}) => _$.on(_scope["#button/1"], "click", function () { + _disabled(_scope, !disabled); +})); const _disabled = /* @__PURE__ */_$.state("disabled", (_scope, disabled) => { _$.attr(_scope["#input/0"], "disabled", disabled); _$.data(_scope["#text/2"], disabled ? "enable" : "disable"); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/dom.expected/components/my-button.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/dom.expected/components/my-button.js index aec692291d..5e48e20003 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/dom.expected/components/my-button.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/dom.expected/components/my-button.js @@ -3,12 +3,9 @@ export const _walks_ = /* get, next(1), get, out(1) */" D l"; export const _setup_ = () => {}; import * as _$ from "@marko/runtime-tags/debug/dom"; export const _text_ = /* @__PURE__ */_$.value("text", (_scope, text) => _$.data(_scope["#text/1"], text)); -const _onClick__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/components/my-button.marko_0_onClick", _scope => { - const { - onClick - } = _scope; - _$.on(_scope["#button/0"], "click", onClick); -}); +const _onClick__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/components/my-button.marko_0_onClick", (_scope, { + onClick +}) => _$.on(_scope["#button/0"], "click", onClick)); export const _onClick_ = /* @__PURE__ */_$.value("onClick", (_scope, onClick) => _onClick__effect(_scope)); export const _input_ = /* @__PURE__ */_$.value("input", (_scope, input) => { _onClick_(_scope, input.onClick); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/dom.expected/template.hydrate.js index c774cfa0bc..ca2a4630e0 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/dom.expected/template.hydrate.js @@ -1,16 +1,9 @@ -// size: 301 (min) 178 (brotli) +// size: 296 (min) 179 (brotli) const _text_ = _$.value(5, (_scope, text) => _$.data(_scope[1], text)), - _onClick__effect = _$.effect("a0", (_scope) => { - const { 4: onClick } = _scope; - _$.on(_scope[0], "click", onClick); - }), + _onClick__effect = _$.effect("a0", (_scope, { 4: onClick }) => + _$.on(_scope[0], "click", onClick), + ), _onClick_ = _$.value(4, (_scope, onClick) => _onClick__effect(_scope)), - _onClick = _$.register("b0", (_scope) => { - const { 1: clickCount } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; - }), _clickCount = _$.state( 1, (_scope, clickCount) => { @@ -18,4 +11,9 @@ const _text_ = _$.value(5, (_scope, text) => _$.data(_scope[1], text)), }, () => _$.intersections([_$.inChild(0, _text_), _$.inChild(0, _onClick_)]), ); -init(); +function _onClick(_scope, { 1: clickCount } = _scope) { + return function () { + _clickCount(_scope, clickCount + 1); + }; +} +_$.register("b0", _onClick), init(); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/dom.expected/template.js index 133b0547c2..4d0ccf3087 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/dom.expected/template.js @@ -1,15 +1,7 @@ export const _template_ = `${_myButton_template}`; export const _walks_ = /* beginChild, _myButton_walks, endChild */`/${_myButton_walks}&`; -import * as _$ from "@marko/runtime-tags/debug/dom"; -const _onClick = _$.register("packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/template.marko_0/onClick", _scope => { - const { - clickCount - } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; -}); import { _setup_ as _myButton, _text_ as _myButton_input_text, _onClick_ as _myButton_input_onClick, _template_ as _myButton_template, _walks_ as _myButton_walks } from "./components/my-button.marko"; +import * as _$ from "@marko/runtime-tags/debug/dom"; const _clickCount = /* @__PURE__ */_$.state("clickCount", (_scope, clickCount) => { _myButton_input_text(_scope["#childScope/0"], clickCount); _myButton_input_onClick(_scope["#childScope/0"], _onClick(_scope)); @@ -18,4 +10,12 @@ export function _setup_(_scope) { _myButton(_scope["#childScope/0"]); _clickCount(_scope, 0); } +function _onClick(_scope, { + clickCount +} = _scope) { + return function () { + _clickCount(_scope, clickCount + 1), clickCount; + }; +} +_$.register("packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/template.marko_0/onClick", _onClick); export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/template.marko", _template_, _walks_, _setup_); \ No newline at end of file diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/html.expected/template.js index 8c667cca6d..236e17af0e 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/html.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/html.expected/template.js @@ -1,5 +1,5 @@ -import * as _$ from "@marko/runtime-tags/debug/html"; import _myButton from "./components/my-button.marko"; +import * as _$ from "@marko/runtime-tags/debug/html"; const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => { const _scope0_id = _$.nextScopeId(); const clickCount = 0; diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/dom.expected/components/my-button.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/dom.expected/components/my-button.js index 576204630f..2c45bce68f 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/dom.expected/components/my-button.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/dom.expected/components/my-button.js @@ -2,12 +2,9 @@ export const _template_ = ""; export const _walks_ = /* get, next(1), get, out(1) */" D l"; export const _setup_ = () => {}; import * as _$ from "@marko/runtime-tags/debug/dom"; -const _onClick__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/components/my-button.marko_0_onClick", _scope => { - const { - onClick - } = _scope; - _$.on(_scope["#button/0"], "click", onClick); -}); +const _onClick__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/components/my-button.marko_0_onClick", (_scope, { + onClick +}) => _$.on(_scope["#button/0"], "click", onClick)); export const _onClick_ = /* @__PURE__ */_$.value("onClick", (_scope, onClick) => _onClick__effect(_scope)); export const _text_ = /* @__PURE__ */_$.value("text", (_scope, text) => _$.data(_scope["#text/1"], text)); export const _input_ = /* @__PURE__ */_$.value("input", (_scope, input) => { diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/dom.expected/template.hydrate.js index 42c7645c37..76ef16731a 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/dom.expected/template.hydrate.js @@ -1,16 +1,9 @@ -// size: 301 (min) 183 (brotli) -const _onClick__effect = _$.effect("a0", (_scope) => { - const { 5: onClick } = _scope; - _$.on(_scope[0], "click", onClick); - }), +// size: 296 (min) 176 (brotli) +const _onClick__effect = _$.effect("a0", (_scope, { 5: onClick }) => + _$.on(_scope[0], "click", onClick), + ), _onClick_ = _$.value(5, (_scope, onClick) => _onClick__effect(_scope)), _text_ = _$.value(4, (_scope, text) => _$.data(_scope[1], text)), - _onClick = _$.register("b0", (_scope) => { - const { 1: clickCount } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; - }), _clickCount = _$.state( 1, (_scope, clickCount) => { @@ -18,4 +11,9 @@ const _onClick__effect = _$.effect("a0", (_scope) => { }, () => _$.intersections([_$.inChild(0, _text_), _$.inChild(0, _onClick_)]), ); -init(); +function _onClick(_scope, { 1: clickCount } = _scope) { + return function () { + _clickCount(_scope, clickCount + 1); + }; +} +_$.register("b0", _onClick), init(); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/dom.expected/template.js index 88ea408d9f..437bbe8f8d 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/dom.expected/template.js @@ -1,15 +1,7 @@ export const _template_ = `${_myButton_template}`; export const _walks_ = /* beginChild, _myButton_walks, endChild */`/${_myButton_walks}&`; -import * as _$ from "@marko/runtime-tags/debug/dom"; -const _onClick = _$.register("packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/template.marko_0/onClick", _scope => { - const { - clickCount - } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; -}); import { _setup_ as _myButton, _text_ as _myButton_input_text, _onClick_ as _myButton_input_onClick, _template_ as _myButton_template, _walks_ as _myButton_walks } from "./components/my-button.marko"; +import * as _$ from "@marko/runtime-tags/debug/dom"; const _clickCount = /* @__PURE__ */_$.state("clickCount", (_scope, clickCount) => { _myButton_input_text(_scope["#childScope/0"], clickCount); _myButton_input_onClick(_scope["#childScope/0"], _onClick(_scope)); @@ -18,4 +10,12 @@ export function _setup_(_scope) { _myButton(_scope["#childScope/0"]); _clickCount(_scope, 0); } +function _onClick(_scope, { + clickCount +} = _scope) { + return function () { + _clickCount(_scope, clickCount + 1), clickCount; + }; +} +_$.register("packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/template.marko_0/onClick", _onClick); export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/template.marko", _template_, _walks_, _setup_); \ No newline at end of file diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/html.expected/template.js index 420f5e5753..494e656e62 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/html.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/html.expected/template.js @@ -1,5 +1,5 @@ -import * as _$ from "@marko/runtime-tags/debug/html"; import _myButton from "./components/my-button.marko"; +import * as _$ from "@marko/runtime-tags/debug/html"; const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => { const _scope0_id = _$.nextScopeId(); const clickCount = 0; diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/dom.expected/components/my-button.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/dom.expected/components/my-button.js index f9655abc37..2838bbf2f9 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/dom.expected/components/my-button.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/dom.expected/components/my-button.js @@ -10,12 +10,9 @@ export const _text_ = /* @__PURE__ */_$.value("text", (_scope, text) => { _textAlias(_scope, text); }); export const _pattern__ = /* @__PURE__ */_$.value("_pattern_", (_scope, _pattern_) => _text_(_scope, _pattern_.text)); -const _onClick__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/components/my-button.marko_0_onClick", _scope => { - const { - onClick - } = _scope; - _$.on(_scope["#button/0"], "click", onClick); -}); +const _onClick__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/components/my-button.marko_0_onClick", (_scope, { + onClick +}) => _$.on(_scope["#button/0"], "click", onClick)); export const _onClick_ = /* @__PURE__ */_$.value("onClick", (_scope, onClick) => _onClick__effect(_scope)); export const _input_ = /* @__PURE__ */_$.value("input", (_scope, input) => { _onClick_(_scope, input.onClick); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/dom.expected/template.hydrate.js index 9ce93af41c..646ac069b8 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/dom.expected/template.hydrate.js @@ -1,4 +1,4 @@ -// size: 495 (min) 228 (brotli) +// size: 492 (min) 231 (brotli) const _text_ = _$.value(7, (_scope, text) => { _$.data(_scope[1], text), ((_scope, textAlias) => { @@ -8,23 +8,10 @@ const _text_ = _$.value(7, (_scope, text) => { _pattern__ = _$.value(6, (_scope, _pattern_) => _text_(_scope, _pattern_.text), ), - _onClick__effect = _$.effect("a0", (_scope) => { - const { 5: onClick } = _scope; - _$.on(_scope[0], "click", onClick); - }), + _onClick__effect = _$.effect("a0", (_scope, { 5: onClick }) => + _$.on(_scope[0], "click", onClick), + ), _onClick_ = _$.value(5, (_scope, onClick) => _onClick__effect(_scope)), - _onClick = _$.register("b0", (_scope) => { - const { 2: clickCount } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; - }), - _onClick2 = _$.register("b1", (_scope) => { - const { 2: clickCount } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; - }), _clickCount = _$.state( 2, (_scope, clickCount) => { @@ -41,4 +28,14 @@ const _text_ = _$.value(7, (_scope, text) => { _$.inChild(1, _onClick_), ]), ); -init(); +function _onClick(_scope, { 2: clickCount } = _scope) { + return function () { + _clickCount(_scope, clickCount + 1); + }; +} +function _onClick2(_scope, { 2: clickCount } = _scope) { + return function () { + _clickCount(_scope, clickCount + 1); + }; +} +_$.register("b0", _onClick), _$.register("b1", _onClick2), init(); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/dom.expected/template.js index bde22bd093..fa0d8fcda8 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/dom.expected/template.js @@ -1,23 +1,7 @@ export const _template_ = `${_myButton_template}${_myButton_template}`; export const _walks_ = /* beginChild, _myButton_walks, endChild, beginChild, _myButton_walks, endChild */`/${_myButton_walks}&/${_myButton_walks}&`; -import * as _$ from "@marko/runtime-tags/debug/dom"; -const _onClick = _$.register("packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/template.marko_0/onClick", _scope => { - const { - clickCount - } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; -}); import { _setup_ as _myButton, _pattern__ as _myButton_input_value, _onClick_ as _myButton_input_onClick, _template_ as _myButton_template, _walks_ as _myButton_walks, _text_ as _myButton_input_value_text } from "./components/my-button.marko"; -const _onClick2 = _$.register("packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/template.marko_0/onClick_0", _scope => { - const { - clickCount - } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; -}); +import * as _$ from "@marko/runtime-tags/debug/dom"; const _clickCount = /* @__PURE__ */_$.state("clickCount", (_scope, clickCount) => { _myButton_input_value(_scope["#childScope/0"], { text: clickCount @@ -31,4 +15,20 @@ export function _setup_(_scope) { _myButton(_scope["#childScope/1"]); _clickCount(_scope, 0); } +function _onClick(_scope, { + clickCount +} = _scope) { + return function () { + _clickCount(_scope, clickCount + 1), clickCount; + }; +} +function _onClick2(_scope, { + clickCount +} = _scope) { + return function () { + _clickCount(_scope, clickCount + 1), clickCount; + }; +} +_$.register("packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/template.marko_0/onClick", _onClick); +_$.register("packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/template.marko_0/onClick_0", _onClick2); export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/template.marko", _template_, _walks_, _setup_); \ No newline at end of file diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/html.expected/template.js index 062ba18a70..8377a738ea 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/html.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/html.expected/template.js @@ -1,5 +1,5 @@ -import * as _$ from "@marko/runtime-tags/debug/html"; import _myButton from "./components/my-button.marko"; +import * as _$ from "@marko/runtime-tags/debug/html"; const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => { const _scope0_id = _$.nextScopeId(); const clickCount = 0; diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/__snapshots__/dom.expected/components/my-button.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/__snapshots__/dom.expected/components/my-button.js index 0d4fb170d1..d86725afe1 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/__snapshots__/dom.expected/components/my-button.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/__snapshots__/dom.expected/components/my-button.js @@ -9,12 +9,9 @@ export const _text_ = /* @__PURE__ */_$.value("text", (_scope, text) => { _$.data(_scope["#text/1"], text); _textAlias(_scope, text); }); -const _onClick__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/components/my-button.marko_0_onClick", _scope => { - const { - onClick - } = _scope; - _$.on(_scope["#button/0"], "click", onClick); -}); +const _onClick__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/components/my-button.marko_0_onClick", (_scope, { + onClick +}) => _$.on(_scope["#button/0"], "click", onClick)); export const _onClick_ = /* @__PURE__ */_$.value("onClick", (_scope, onClick) => _onClick__effect(_scope)); export const _input_ = /* @__PURE__ */_$.value("input", (_scope, input) => { _onClick_(_scope, input.onClick); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/__snapshots__/dom.expected/template.hydrate.js index 26be9cc8d7..149d37d758 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/__snapshots__/dom.expected/template.hydrate.js @@ -1,21 +1,14 @@ -// size: 334 (min) 189 (brotli) +// size: 329 (min) 187 (brotli) const _text_ = _$.value(6, (_scope, text) => { _$.data(_scope[1], text), ((_scope, textAlias) => { _$.data(_scope[2], textAlias); })(_scope, text); }), - _onClick__effect = _$.effect("a0", (_scope) => { - const { 5: onClick } = _scope; - _$.on(_scope[0], "click", onClick); - }), + _onClick__effect = _$.effect("a0", (_scope, { 5: onClick }) => + _$.on(_scope[0], "click", onClick), + ), _onClick_ = _$.value(5, (_scope, onClick) => _onClick__effect(_scope)), - _onClick = _$.register("b0", (_scope) => { - const { 1: clickCount } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; - }), _clickCount = _$.state( 1, (_scope, clickCount) => { @@ -23,4 +16,9 @@ const _text_ = _$.value(6, (_scope, text) => { }, () => _$.intersections([_$.inChild(0, _text_), _$.inChild(0, _onClick_)]), ); -init(); +function _onClick(_scope, { 1: clickCount } = _scope) { + return function () { + _clickCount(_scope, clickCount + 1); + }; +} +_$.register("b0", _onClick), init(); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/__snapshots__/dom.expected/template.js index ad6d571189..7cdf4ef24a 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/__snapshots__/dom.expected/template.js @@ -1,15 +1,7 @@ export const _template_ = `${_myButton_template}`; export const _walks_ = /* beginChild, _myButton_walks, endChild */`/${_myButton_walks}&`; -import * as _$ from "@marko/runtime-tags/debug/dom"; -const _onClick = _$.register("packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/template.marko_0/onClick", _scope => { - const { - clickCount - } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; -}); import { _setup_ as _myButton, _text_ as _myButton_input_text, _onClick_ as _myButton_input_onClick, _template_ as _myButton_template, _walks_ as _myButton_walks } from "./components/my-button.marko"; +import * as _$ from "@marko/runtime-tags/debug/dom"; const _clickCount = /* @__PURE__ */_$.state("clickCount", (_scope, clickCount) => { _myButton_input_text(_scope["#childScope/0"], clickCount); _myButton_input_onClick(_scope["#childScope/0"], _onClick(_scope)); @@ -18,4 +10,12 @@ export function _setup_(_scope) { _myButton(_scope["#childScope/0"]); _clickCount(_scope, 0); } +function _onClick(_scope, { + clickCount +} = _scope) { + return function () { + _clickCount(_scope, clickCount + 1), clickCount; + }; +} +_$.register("packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/template.marko_0/onClick", _onClick); export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/template.marko", _template_, _walks_, _setup_); \ No newline at end of file diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/__snapshots__/html.expected/template.js index 95ed1e4cd7..15c07df189 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/__snapshots__/html.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/__snapshots__/html.expected/template.js @@ -1,5 +1,5 @@ -import * as _$ from "@marko/runtime-tags/debug/html"; import _myButton from "./components/my-button.marko"; +import * as _$ from "@marko/runtime-tags/debug/html"; const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => { const _scope0_id = _$.nextScopeId(); const clickCount = 0; diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/dom.expected/components/my-button.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/dom.expected/components/my-button.js index 2230a5c873..a76dc75106 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/dom.expected/components/my-button.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/dom.expected/components/my-button.js @@ -3,12 +3,9 @@ export const _walks_ = /* get, next(1), get, out(1) */" D l"; export const _setup_ = () => {}; import * as _$ from "@marko/runtime-tags/debug/dom"; export const _text_ = /* @__PURE__ */_$.value("text", (_scope, text) => _$.data(_scope["#text/1"], text)); -const _onClick__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-component-input/components/my-button.marko_0_onClick", _scope => { - const { - onClick - } = _scope; - _$.on(_scope["#button/0"], "click", onClick); -}); +const _onClick__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-component-input/components/my-button.marko_0_onClick", (_scope, { + onClick +}) => _$.on(_scope["#button/0"], "click", onClick)); export const _onClick_ = /* @__PURE__ */_$.value("onClick", (_scope, onClick) => _onClick__effect(_scope)); export const _input_ = /* @__PURE__ */_$.value("input", (_scope, input) => { _onClick_(_scope, input.onClick); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/dom.expected/template.hydrate.js index c774cfa0bc..ca2a4630e0 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/dom.expected/template.hydrate.js @@ -1,16 +1,9 @@ -// size: 301 (min) 178 (brotli) +// size: 296 (min) 179 (brotli) const _text_ = _$.value(5, (_scope, text) => _$.data(_scope[1], text)), - _onClick__effect = _$.effect("a0", (_scope) => { - const { 4: onClick } = _scope; - _$.on(_scope[0], "click", onClick); - }), + _onClick__effect = _$.effect("a0", (_scope, { 4: onClick }) => + _$.on(_scope[0], "click", onClick), + ), _onClick_ = _$.value(4, (_scope, onClick) => _onClick__effect(_scope)), - _onClick = _$.register("b0", (_scope) => { - const { 1: clickCount } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; - }), _clickCount = _$.state( 1, (_scope, clickCount) => { @@ -18,4 +11,9 @@ const _text_ = _$.value(5, (_scope, text) => _$.data(_scope[1], text)), }, () => _$.intersections([_$.inChild(0, _text_), _$.inChild(0, _onClick_)]), ); -init(); +function _onClick(_scope, { 1: clickCount } = _scope) { + return function () { + _clickCount(_scope, clickCount + 1); + }; +} +_$.register("b0", _onClick), init(); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/dom.expected/template.js index a27a16435f..5b7440ad3e 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/dom.expected/template.js @@ -1,15 +1,7 @@ export const _template_ = `${_myButton_template}`; export const _walks_ = /* beginChild, _myButton_walks, endChild */`/${_myButton_walks}&`; -import * as _$ from "@marko/runtime-tags/debug/dom"; -const _onClick = _$.register("packages/translator-tags/src/__tests__/fixtures/basic-component-input/template.marko_0/onClick", _scope => { - const { - clickCount - } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; -}); import { _setup_ as _myButton, _text_ as _myButton_input_text, _onClick_ as _myButton_input_onClick, _template_ as _myButton_template, _walks_ as _myButton_walks } from "./components/my-button.marko"; +import * as _$ from "@marko/runtime-tags/debug/dom"; const _clickCount = /* @__PURE__ */_$.state("clickCount", (_scope, clickCount) => { _myButton_input_text(_scope["#childScope/0"], clickCount); _myButton_input_onClick(_scope["#childScope/0"], _onClick(_scope)); @@ -18,4 +10,12 @@ export function _setup_(_scope) { _myButton(_scope["#childScope/0"]); _clickCount(_scope, 0); } +function _onClick(_scope, { + clickCount +} = _scope) { + return function () { + _clickCount(_scope, clickCount + 1), clickCount; + }; +} +_$.register("packages/translator-tags/src/__tests__/fixtures/basic-component-input/template.marko_0/onClick", _onClick); export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/basic-component-input/template.marko", _template_, _walks_, _setup_); \ No newline at end of file diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/html.expected/template.js index ca2c3d6e3d..cdcc698a4d 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/html.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/html.expected/template.js @@ -1,5 +1,5 @@ -import * as _$ from "@marko/runtime-tags/debug/html"; import _myButton from "./components/my-button.marko"; +import * as _$ from "@marko/runtime-tags/debug/html"; const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => { const _scope0_id = _$.nextScopeId(); const clickCount = 0; diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/__snapshots__/dom.expected/components/my-button.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/__snapshots__/dom.expected/components/my-button.js index fac93808fb..37427c48ce 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/__snapshots__/dom.expected/components/my-button.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/__snapshots__/dom.expected/components/my-button.js @@ -5,12 +5,9 @@ import * as _$ from "@marko/runtime-tags/debug/dom"; const _renderBody_input = _$.dynamicTagAttrs("#text/1"); const _dynamicTagName = /* @__PURE__ */_$.conditional("#text/1", _scope => _renderBody_input(_scope, () => ({})), () => _renderBody_input); export const _renderBody_ = /* @__PURE__ */_$.value("renderBody", (_scope, renderBody) => _dynamicTagName(_scope, renderBody), () => _dynamicTagName); -const _onClick__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/components/my-button.marko_0_onClick", _scope => { - const { - onClick - } = _scope; - _$.on(_scope["#button/0"], "click", onClick); -}); +const _onClick__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/components/my-button.marko_0_onClick", (_scope, { + onClick +}) => _$.on(_scope["#button/0"], "click", onClick)); export const _onClick_ = /* @__PURE__ */_$.value("onClick", (_scope, onClick) => _onClick__effect(_scope)); export const _input_ = /* @__PURE__ */_$.value("input", (_scope, input) => { _onClick_(_scope, input.onClick); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/__snapshots__/dom.expected/template.hydrate.js index 341bc818bd..9be13f370e 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/__snapshots__/dom.expected/template.hydrate.js @@ -1,16 +1,9 @@ -// size: 430 (min) 241 (brotli) +// size: 425 (min) 241 (brotli) _$.dynamicTagAttrs(1); -const _onClick__effect = _$.effect("a0", (_scope) => { - const { 4: onClick } = _scope; - _$.on(_scope[0], "click", onClick); - }), +const _onClick__effect = _$.effect("a0", (_scope, { 4: onClick }) => + _$.on(_scope[0], "click", onClick), + ), _onClick_ = _$.value(4, (_scope, onClick) => _onClick__effect(_scope)), - _onClick = _$.register("b0", (_scope) => { - const { 1: clickCount } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; - }), _clickCount$myButtonBody = _$.registerSubscriber( "b1", _$.dynamicClosure(1, (_scope, clickCount) => @@ -28,4 +21,9 @@ const _clickCount = _$.state( (_scope, clickCount) => _onClick_(_scope[0], _onClick(_scope)), () => _$.intersections([_$.inChild(0, _onClick_), _$.dynamicSubscribers(1)]), ); -init(); +function _onClick(_scope, { 1: clickCount } = _scope) { + return function () { + _clickCount(_scope, clickCount + 1); + }; +} +_$.register("b0", _onClick), init(); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/__snapshots__/dom.expected/template.js index 7450784664..9f9dd78e8f 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/__snapshots__/dom.expected/template.js @@ -1,14 +1,6 @@ export const _template_ = `${_myButton_template}`; export const _walks_ = /* beginChild, _myButton_walks, endChild */`/${_myButton_walks}&`; import * as _$ from "@marko/runtime-tags/debug/dom"; -const _onClick = _$.register("packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_0/onClick", _scope => { - const { - clickCount - } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; -}); import { _setup_ as _myButton, _renderBody_ as _myButton_input_renderBody, _onClick_ as _myButton_input_onClick, _template_ as _myButton_template, _walks_ as _myButton_walks } from "./components/my-button.marko"; const _clickCount$myButtonBody = _$.registerSubscriber("packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_clickCount/subscriber", /* @__PURE__ */_$.dynamicClosure("clickCount", (_scope, clickCount) => _$.data(_scope["#text/0"], clickCount))); const _myButtonBody = _$.register("packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_renderer", /* @__PURE__ */_$.createRendererWithOwner(" ", /* get */" ", void 0, () => [_clickCount$myButtonBody])); @@ -18,4 +10,12 @@ export function _setup_(_scope) { _clickCount(_scope, 0); _myButton_input_renderBody(_scope["#childScope/0"], _myButtonBody(_scope)); } +function _onClick(_scope, { + clickCount +} = _scope) { + return function () { + _clickCount(_scope, clickCount + 1), clickCount; + }; +} +_$.register("packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_0/onClick", _onClick); export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko", _template_, _walks_, _setup_); \ No newline at end of file diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component/__snapshots__/dom.expected/components/counter.js b/packages/translator-tags/src/__tests__/fixtures/basic-component/__snapshots__/dom.expected/components/counter.js index 22cb95acd6..263e7a0dd2 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component/__snapshots__/dom.expected/components/counter.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component/__snapshots__/dom.expected/components/counter.js @@ -1,15 +1,11 @@ export const _template_ = ""; export const _walks_ = /* get, next(1), get, out(1) */" D l"; import * as _$ from "@marko/runtime-tags/debug/dom"; -const _onClick = _scope => { - const { - clickCount - } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; -}; -const _clickCount_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-component/components/counter.marko_0_clickCount", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _clickCount_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-component/components/counter.marko_0_clickCount", (_scope, { + clickCount +}) => _$.on(_scope["#button/0"], "click", function () { + _clickCount(_scope, clickCount + 1), clickCount; +})); const _clickCount = /* @__PURE__ */_$.state("clickCount", (_scope, clickCount) => { _$.data(_scope["#text/1"], clickCount); _clickCount_effect(_scope); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-component/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-component/__snapshots__/dom.expected/template.hydrate.js index 504ff27457..a9d4f32db8 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-component/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-component/__snapshots__/dom.expected/template.hydrate.js @@ -1,15 +1,8 @@ -// size: 146 (min) 127 (brotli) -const _clickCount_effect = _$.effect("a0", (_scope) => - _$.on( - _scope[0], - "click", - ((_scope) => { - const { 2: clickCount } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; - })(_scope), - ), +// size: 126 (min) 107 (brotli) +const _clickCount_effect = _$.effect("a0", (_scope, { 2: clickCount }) => + _$.on(_scope[0], "click", function () { + _clickCount(_scope, clickCount + 1); + }), ), _clickCount = _$.state(2, (_scope, clickCount) => { _$.data(_scope[1], clickCount), _clickCount_effect(_scope); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/__snapshots__/dom.expected/template.hydrate.js index 6eaae00aec..f4e8516642 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/__snapshots__/dom.expected/template.hydrate.js @@ -1,4 +1,4 @@ -// size: 441 (min) 228 (brotli) +// size: 401 (min) 220 (brotli) const _count$ifBody = _$.closure(4, (_scope, count) => _$.data(_scope[0], count), ), @@ -7,34 +7,20 @@ const _count$ifBody = _$.closure(4, (_scope, count) => _$.createRenderer("The count is ", "b%", void 0, () => [_count$ifBody]), ), _if = _$.conditional(2, 0), - _count_effect = _$.effect("a1", (_scope) => - _$.on( - _scope[0], - "click", - ((_scope) => { - const { 4: count } = _scope; - return function () { - _count(_scope, count + 1); - }; - })(_scope), - ), + _count_effect = _$.effect("a1", (_scope, { 4: count }) => + _$.on(_scope[0], "click", function () { + _count(_scope, count + 1); + }), ), _count = _$.state( 4, (_scope, count) => _count_effect(_scope), () => _$.inConditionalScope(_count$ifBody, 2), ), - _show_effect = _$.effect("a2", (_scope) => - _$.on( - _scope[1], - "click", - ((_scope) => { - const { 3: show } = _scope; - return function () { - _show(_scope, !show); - }; - })(_scope), - ), + _show_effect = _$.effect("a2", (_scope, { 3: show }) => + _$.on(_scope[1], "click", function () { + _show(_scope, !show); + }), ), _show = _$.state( 3, diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/__snapshots__/dom.expected/template.js index 752bf4d50f..d0dfdb5440 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/__snapshots__/dom.expected/template.js @@ -4,25 +4,17 @@ import * as _$ from "@marko/runtime-tags/debug/dom"; const _count$ifBody = /* @__PURE__ */_$.closure("count", (_scope, count) => _$.data(_scope["#text/0"], count)); const _ifBody = _$.register("packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer("The count is ", /* over(1), replace */"b%", void 0, () => [_count$ifBody])); const _if = /* @__PURE__ */_$.conditional("#text/2", 0); -const _onClick = _scope => { - const { - count - } = _scope; - return function () { - _count(_scope, count + 1); - }; -}; -const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count", (_scope, { + count +}) => _$.on(_scope["#button/0"], "click", function () { + _count(_scope, count + 1), count; +})); const _count = /* @__PURE__ */_$.state("count", (_scope, count) => _count_effect(_scope), () => _$.inConditionalScope(_count$ifBody, "#text/2")); -const _onClick2 = _scope => { - const { - show - } = _scope; - return function () { - _show(_scope, !show); - }; -}; -const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show", _scope => _$.on(_scope["#button/1"], "click", _onClick2(_scope))); +const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show", (_scope, { + show +}) => _$.on(_scope["#button/1"], "click", function () { + _show(_scope, !show); +})); const _show = /* @__PURE__ */_$.state("show", (_scope, show) => { _show_effect(_scope); _if(_scope, show ? _ifBody : null); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/__snapshots__/dom.expected/template.hydrate.js index 927f93ef9e..52e3ff82f7 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/__snapshots__/dom.expected/template.hydrate.js @@ -1,4 +1,4 @@ -// size: 439 (min) 224 (brotli) +// size: 399 (min) 212 (brotli) const _count$ifBody = _$.closure(4, (_scope, count) => _$.data(_scope[0], count), ), @@ -7,34 +7,20 @@ const _count$ifBody = _$.closure(4, (_scope, count) => _$.createRenderer(" ", "D ", void 0, () => [_count$ifBody]), ), _if = _$.conditional(2, 0), - _count_effect = _$.effect("a1", (_scope) => - _$.on( - _scope[0], - "click", - ((_scope) => { - const { 4: count } = _scope; - return function () { - _count(_scope, count + 1); - }; - })(_scope), - ), + _count_effect = _$.effect("a1", (_scope, { 4: count }) => + _$.on(_scope[0], "click", function () { + _count(_scope, count + 1); + }), ), _count = _$.state( 4, (_scope, count) => _count_effect(_scope), () => _$.inConditionalScope(_count$ifBody, 2), ), - _show_effect = _$.effect("a2", (_scope) => - _$.on( - _scope[1], - "click", - ((_scope) => { - const { 3: show } = _scope; - return function () { - _show(_scope, !show); - }; - })(_scope), - ), + _show_effect = _$.effect("a2", (_scope, { 3: show }) => + _$.on(_scope[1], "click", function () { + _show(_scope, !show); + }), ), _show = _$.state( 3, diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/__snapshots__/dom.expected/template.js index 5b72322932..397516ab68 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/__snapshots__/dom.expected/template.js @@ -4,25 +4,17 @@ import * as _$ from "@marko/runtime-tags/debug/dom"; const _count$ifBody = /* @__PURE__ */_$.closure("count", (_scope, count) => _$.data(_scope["#text/0"], count)); const _ifBody = _$.register("packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer(" ", /* next(1), get */"D ", void 0, () => [_count$ifBody])); const _if = /* @__PURE__ */_$.conditional("#text/2", 0); -const _onClick = _scope => { - const { - count - } = _scope; - return function () { - _count(_scope, count + 1); - }; -}; -const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count", (_scope, { + count +}) => _$.on(_scope["#button/0"], "click", function () { + _count(_scope, count + 1), count; +})); const _count = /* @__PURE__ */_$.state("count", (_scope, count) => _count_effect(_scope), () => _$.inConditionalScope(_count$ifBody, "#text/2")); -const _onClick2 = _scope => { - const { - show - } = _scope; - return function () { - _show(_scope, !show); - }; -}; -const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show", _scope => _$.on(_scope["#button/1"], "click", _onClick2(_scope))); +const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show", (_scope, { + show +}) => _$.on(_scope["#button/1"], "click", function () { + _show(_scope, !show); +})); const _show = /* @__PURE__ */_$.state("show", (_scope, show) => { _show_effect(_scope); _if(_scope, show ? _ifBody : null); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/__snapshots__/.name-cache.json b/packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/__snapshots__/.name-cache.json index 49f14297ea..a971688ac0 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/__snapshots__/.name-cache.json +++ b/packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/__snapshots__/.name-cache.json @@ -6,7 +6,8 @@ "$_increment": "r", "$_increment2_effect": "a", "$_increment2": "m", - "$_clickCount": "e" + "$_clickCount": "e", + "$_increment_effect": "n" } } } diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/__snapshots__/dom.expected/template.hydrate.js index 9b4dc7ec25..7111c5f3dc 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/__snapshots__/dom.expected/template.hydrate.js @@ -1,16 +1,14 @@ -// size: 211 (min) 142 (brotli) -const _increment = _$.register("a0", (_scope) => { - const { 2: clickCount } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; - }), - _increment2_effect = _$.effect("a1", (_scope) => { - const { 3: increment } = _scope; - _$.on(_scope[0], "click", increment); - }), - _increment2 = _$.value(3, (_scope, increment) => _increment2_effect(_scope)), +// size: 206 (min) 142 (brotli) +const _increment_effect = _$.effect("a1", (_scope, { 3: increment }) => + _$.on(_scope[0], "click", increment), + ), + _increment = _$.value(3, (_scope, increment) => _increment_effect(_scope)), _clickCount = _$.state(2, (_scope, clickCount) => { - _$.data(_scope[1], clickCount), _increment2(_scope, _increment(_scope)); + _$.data(_scope[1], clickCount), _increment(_scope, _increment2(_scope)); }); -init(); +function _increment2(_scope, { 2: clickCount } = _scope) { + return function () { + _clickCount(_scope, clickCount + 1); + }; +} +_$.register("a0", _increment2), init(); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/__snapshots__/dom.expected/template.js index 4b9d0248a0..904226e077 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/__snapshots__/dom.expected/template.js @@ -1,26 +1,23 @@ export const _template_ = ""; export const _walks_ = /* get, next(1), get, out(1) */" D l"; import * as _$ from "@marko/runtime-tags/debug/dom"; -const _increment = _$.register("packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/template.marko_0/increment", _scope => { - const { - clickCount - } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; -}); -const _increment2_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/template.marko_0_increment", _scope => { - const { - increment - } = _scope; - _$.on(_scope["#button/0"], "click", increment); -}); -const _increment2 = /* @__PURE__ */_$.value("increment", (_scope, increment) => _increment2_effect(_scope)); +const _increment_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/template.marko_0_increment", (_scope, { + increment +}) => _$.on(_scope["#button/0"], "click", increment)); +const _increment = /* @__PURE__ */_$.value("increment", (_scope, increment) => _increment_effect(_scope)); const _clickCount = /* @__PURE__ */_$.state("clickCount", (_scope, clickCount) => { _$.data(_scope["#text/1"], clickCount); - _increment2(_scope, _increment(_scope)); + _increment(_scope, _increment2(_scope)); }); export function _setup_(_scope) { _clickCount(_scope, 0); } +function _increment2(_scope, { + clickCount +} = _scope) { + return function () { + _clickCount(_scope, clickCount + 1), clickCount; + }; +} +_$.register("packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/template.marko_0/increment", _increment2); export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/template.marko", _template_, _walks_, _setup_); \ No newline at end of file diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/__snapshots__/html.expected/template.js index c1a9a42e96..b4cf71e59a 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/__snapshots__/html.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/__snapshots__/html.expected/template.js @@ -8,8 +8,8 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => { _$.write(`${_$.markResumeNode(_scope0_id, "#button/0")}`); _$.writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/template.marko_0_increment"); _$.writeScope(_scope0_id, { - "increment": increment, - "clickCount": clickCount + "clickCount": clickCount, + "increment": increment }); }); export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/basic-counter-const-event-handler/template.marko", _renderer); \ No newline at end of file diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/__snapshots__/dom.expected/template.hydrate.js index f80f7a2078..d6c1e19fcc 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/__snapshots__/dom.expected/template.hydrate.js @@ -1,4 +1,4 @@ -// size: 371 (min) 190 (brotli) +// size: 331 (min) 180 (brotli) const _expr_count_multiplier = _$.intersection(2, (_scope) => { const { 4: count, 5: multiplier } = _scope; _multipliedCount(_scope, count * multiplier); @@ -6,17 +6,10 @@ const _expr_count_multiplier = _$.intersection(2, (_scope) => { _multipliedCount = _$.value(6, (_scope, multipliedCount) => _$.data(_scope[3], multipliedCount), ), - _multiplier_effect = _$.effect("a0", (_scope) => - _$.on( - _scope[0], - "click", - ((_scope) => { - const { 5: multiplier } = _scope; - return function () { - _multiplier(_scope, multiplier + 1); - }; - })(_scope), - ), + _multiplier_effect = _$.effect("a0", (_scope, { 5: multiplier }) => + _$.on(_scope[0], "click", function () { + _multiplier(_scope, multiplier + 1); + }), ), _multiplier = _$.state( 5, @@ -25,17 +18,10 @@ const _expr_count_multiplier = _$.intersection(2, (_scope) => { }, () => _expr_count_multiplier, ), - _count_effect = _$.effect("a1", (_scope) => - _$.on( - _scope[2], - "click", - ((_scope) => { - const { 4: count } = _scope; - return function () { - _count(_scope, count + 1); - }; - })(_scope), - ), + _count_effect = _$.effect("a1", (_scope, { 4: count }) => + _$.on(_scope[2], "click", function () { + _count(_scope, count + 1); + }), ), _count = _$.state( 4, diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/__snapshots__/dom.expected/template.js index 171d5a4d71..40e1bef8db 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/__snapshots__/dom.expected/template.js @@ -9,28 +9,20 @@ const _expr_count_multiplier = /* @__PURE__ */_$.intersection(2, _scope => { _multipliedCount(_scope, count * multiplier); }); const _multipliedCount = /* @__PURE__ */_$.value("multipliedCount", (_scope, multipliedCount) => _$.data(_scope["#text/3"], multipliedCount)); -const _onClick = _scope => { - const { - multiplier - } = _scope; - return function () { - _multiplier(_scope, multiplier + 1); - }; -}; -const _multiplier_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_multiplier", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _multiplier_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_multiplier", (_scope, { + multiplier +}) => _$.on(_scope["#button/0"], "click", function () { + _multiplier(_scope, multiplier + 1), multiplier; +})); const _multiplier = /* @__PURE__ */_$.state("multiplier", (_scope, multiplier) => { _$.data(_scope["#text/1"], multiplier); _multiplier_effect(_scope); }, () => _expr_count_multiplier); -const _onClick2 = _scope => { - const { - count - } = _scope; - return function () { - _count(_scope, count + 1); - }; -}; -const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_count", _scope => _$.on(_scope["#button/2"], "click", _onClick2(_scope))); +const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_count", (_scope, { + count +}) => _$.on(_scope["#button/2"], "click", function () { + _count(_scope, count + 1), count; +})); const _count = /* @__PURE__ */_$.state("count", (_scope, count) => _count_effect(_scope), () => _expr_count_multiplier); export function _setup_(_scope) { _count(_scope, 0); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-counter/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-counter/__snapshots__/dom.expected/template.hydrate.js index 504ff27457..a9d4f32db8 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-counter/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-counter/__snapshots__/dom.expected/template.hydrate.js @@ -1,15 +1,8 @@ -// size: 146 (min) 127 (brotli) -const _clickCount_effect = _$.effect("a0", (_scope) => - _$.on( - _scope[0], - "click", - ((_scope) => { - const { 2: clickCount } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; - })(_scope), - ), +// size: 126 (min) 107 (brotli) +const _clickCount_effect = _$.effect("a0", (_scope, { 2: clickCount }) => + _$.on(_scope[0], "click", function () { + _clickCount(_scope, clickCount + 1); + }), ), _clickCount = _$.state(2, (_scope, clickCount) => { _$.data(_scope[1], clickCount), _clickCount_effect(_scope); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-counter/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-counter/__snapshots__/dom.expected/template.js index 9fbd9f3cc8..5d70907086 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-counter/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-counter/__snapshots__/dom.expected/template.js @@ -1,15 +1,11 @@ export const _template_ = "
"; export const _walks_ = /* next(1), get, next(1), get, out(2) */"D D m"; import * as _$ from "@marko/runtime-tags/debug/dom"; -const _onClick = _scope => { - const { - clickCount - } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; -}; -const _clickCount_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _clickCount_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount", (_scope, { + clickCount +}) => _$.on(_scope["#button/0"], "click", function () { + _clickCount(_scope, clickCount + 1), clickCount; +})); const _clickCount = /* @__PURE__ */_$.state("clickCount", (_scope, clickCount) => { _$.data(_scope["#text/1"], clickCount); _clickCount_effect(_scope); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/__snapshots__/dom.expected/template.hydrate.js index e2d146bbfc..f1d7d62121 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/__snapshots__/dom.expected/template.hydrate.js @@ -1,2 +1,2 @@ -// size: 58 (min) 47 (brotli) -_$.effect("a0", (_scope) => (document.body.className = "no-deps")), init(); +// size: 59 (min) 63 (brotli) +_$.effect("a0", () => (document.body.className = "no-deps")), init(); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/__snapshots__/dom.expected/template.js index 5b42e80857..a477ce495a 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/__snapshots__/dom.expected/template.js @@ -1,7 +1,7 @@ export const _template_ = ""; export const _walks_ = ""; import * as _$ from "@marko/runtime-tags/debug/dom"; -const _setup__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/template.marko_0", _scope => document.body.className = "no-deps"); +const _setup__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/template.marko_0", () => document.body.className = "no-deps"); export function _setup_(_scope) { _setup__effect(_scope); } diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-flush-here/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-flush-here/__snapshots__/html.expected/template.js index 95d419d173..78a45af0c8 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-flush-here/__snapshots__/html.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-flush-here/__snapshots__/html.expected/template.js @@ -1,7 +1,7 @@ import * as _$ from "@marko/runtime-tags/debug/html"; const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => { const _scope0_id = _$.nextScopeId(); - const _ = _$.$global().__flush__ = _$.register(($global, html) => `BEFORE-${$global.runtimeId}-${html}-AFTER`, "packages/translator-tags/src/__tests__/fixtures/basic-flush-here/template.marko_0/_", _scope0_id); + const _ = _$.$global().__flush__ = _$.register(($global, html) => `BEFORE-${$global.runtimeId}-${html}-AFTER`, "packages/translator-tags/src/__tests__/fixtures/basic-flush-here/template.marko_0/_"); _$.write("

Hello World

"); }); export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/basic-flush-here/template.marko", _renderer); \ No newline at end of file diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/__snapshots__/dom.expected/template.hydrate.js index e72945d9e8..5338083f5b 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/__snapshots__/dom.expected/template.hydrate.js @@ -1,15 +1,8 @@ -// size: 146 (min) 127 (brotli) -const _count_effect = _$.effect("a0", (_scope) => - _$.on( - _scope[0], - "click", - ((_scope) => { - const { 2: count } = _scope; - return function () { - _count(_scope, count + 1); - }; - })(_scope), - ), +// size: 126 (min) 107 (brotli) +const _count_effect = _$.effect("a0", (_scope, { 2: count }) => + _$.on(_scope[0], "click", function () { + _count(_scope, count + 1); + }), ), _count = _$.state(2, (_scope, count) => { _$.data(_scope[1], count), _count_effect(_scope); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/__snapshots__/dom.expected/template.js index 570ada7f78..26a6a8d501 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/__snapshots__/dom.expected/template.js @@ -1,17 +1,13 @@ export const _template_ = ""; export const _walks_ = /* get, next(1), get, out(1) */" D l"; import * as _$ from "@marko/runtime-tags/debug/dom"; -const _onClick = _scope => { - const { - count - } = _scope; - return function () { - { - _count(_scope, count + 1); - } - }; -}; -const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count", (_scope, { + count +}) => _$.on(_scope["#button/0"], "click", function () { + { + _count(_scope, count + 1), count; + } +})); const _count = /* @__PURE__ */_$.state("count", (_scope, count) => { _$.data(_scope["#text/1"], count); _count_effect(_scope); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-handler-multi-ref-nested/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-handler-multi-ref-nested/__snapshots__/dom.expected/template.hydrate.js index bd5d802558..4a20d5ab58 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-handler-multi-ref-nested/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-handler-multi-ref-nested/__snapshots__/dom.expected/template.hydrate.js @@ -1,23 +1,11 @@ -// size: 226 (min) 150 (brotli) -const _expr_a_b_effect = _$.effect("a0", (_scope) => - _$.on( - _scope[0], - "click", - ((_scope) => { - const { 2: a } = _scope; - return function () { - _a( - _scope, - a.map( - ((_scope) => { - const { 3: b } = _scope; - return (a) => b; - })(_scope), - ), - ); - }; - })(_scope), - ), +// size: 182 (min) 143 (brotli) +const _expr_a_b_effect = _$.effect("a0", (_scope, { 2: a, 3: b }) => + _$.on(_scope[0], "click", function () { + _a( + _scope, + a.map((a) => b), + ); + }), ), _expr_a_b = _$.intersection(2, (_scope) => { _expr_a_b_effect(_scope); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-handler-multi-ref-nested/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-handler-multi-ref-nested/__snapshots__/dom.expected/template.js index 8d135e5f10..fcc7f5df43 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-handler-multi-ref-nested/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-handler-multi-ref-nested/__snapshots__/dom.expected/template.js @@ -1,21 +1,12 @@ export const _template_ = ""; export const _walks_ = /* get, next(1), get, out(1) */" D l"; import * as _$ from "@marko/runtime-tags/debug/dom"; -const _onClick = _scope => { - const { - b - } = _scope; - return a => b; -}; -const _onClick2 = _scope => { - const { - a - } = _scope; - return function () { - _a(_scope, a.map(_onClick(_scope))); - }; -}; -const _expr_a_b_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-handler-multi-ref-nested/template.marko_0_a_b", _scope => _$.on(_scope["#button/0"], "click", _onClick2(_scope))); +const _expr_a_b_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-handler-multi-ref-nested/template.marko_0_a_b", (_scope, { + a, + b +}) => _$.on(_scope["#button/0"], "click", function () { + _a(_scope, a.map(a => b)); +})); const _expr_a_b = /* @__PURE__ */_$.intersection(2, _scope => { const { a, diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-inert-collapsible-tree/__snapshots__/dom.expected/components/comments.js b/packages/translator-tags/src/__tests__/fixtures/basic-inert-collapsible-tree/__snapshots__/dom.expected/components/comments.js index d4357e4940..1a12c1caee 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-inert-collapsible-tree/__snapshots__/dom.expected/components/comments.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-inert-collapsible-tree/__snapshots__/dom.expected/components/comments.js @@ -31,15 +31,11 @@ const _expr_input_path_i$forBody = /* @__PURE__ */_$.intersection(2, _scope => { _id$forBody(_scope, `${input_path || "c"}-${i}`); }, () => _id$forBody); const _if$forBody = /* @__PURE__ */_$.conditional("#text/4", 0); -const _onClick = _scope => { - const { - open - } = _scope; - return function () { - _open$forBody(_scope, !open); - }; -}; -const _open$forBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_1_open", _scope => _$.on(_scope["#button/2"], "click", _onClick(_scope))); +const _open$forBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_1_open", (_scope, { + open +}) => _$.on(_scope["#button/2"], "click", function () { + _open$forBody(_scope, !open); +})); const _open$forBody = /* @__PURE__ */_$.state("open", (_scope, open) => { _$.attr(_scope["#li/0"], "hidden", !open); _$.data(_scope["#text/3"], open ? "[-]" : "[+]"); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-inert-collapsible-tree/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-inert-collapsible-tree/__snapshots__/dom.expected/template.hydrate.js index ee0009fb35..aecf4a6fc4 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-inert-collapsible-tree/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-inert-collapsible-tree/__snapshots__/dom.expected/template.hydrate.js @@ -1,4 +1,4 @@ -// size: 1226 (min) 552 (brotli) +// size: 1206 (min) 542 (brotli) const _expr_comment_comments_id$ifBody = _$.intersection( 2, (_scope) => { @@ -43,17 +43,10 @@ const _expr_comment_comments_id$ifBody = _$.intersection( () => _id$forBody, ), _if$forBody = _$.conditional(4, 0), - _open$forBody_effect = _$.effect("a1", (_scope) => - _$.on( - _scope[2], - "click", - ((_scope) => { - const { 11: open } = _scope; - return function () { - _open$forBody(_scope, !open); - }; - })(_scope), - ), + _open$forBody_effect = _$.effect("a1", (_scope, { 11: open }) => + _$.on(_scope[2], "click", function () { + _open$forBody(_scope, !open); + }), ), _open$forBody = _$.state(11, (_scope, open) => { _$.attr(_scope[0], "hidden", !open), diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-nested-for/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-nested-for/__snapshots__/dom.expected/template.hydrate.js index 1aaafd0402..a892dca29f 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-nested-for/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-nested-for/__snapshots__/dom.expected/template.hydrate.js @@ -1,4 +1,4 @@ -// size: 751 (min) 369 (brotli) +// size: 731 (min) 364 (brotli) const _name_ = _$.value(3, (_scope, name) => _$.data(_scope[0], name)), _expr_outer_inner$forBody = _$.intersection( 2, @@ -55,17 +55,10 @@ const _name_ = _$.value(3, (_scope, name) => _$.data(_scope[0], name)), ), ), _for = _$.loopOf(1, _forBody), - _items_effect = _$.effect("b2", (_scope) => - _$.on( - _scope[0], - "click", - ((_scope) => { - const { 2: items } = _scope; - return function () { - _items(_scope, [...items, items.length]); - }; - })(_scope), - ), + _items_effect = _$.effect("b2", (_scope, { 2: items }) => + _$.on(_scope[0], "click", function () { + _items(_scope, [...items, items.length]); + }), ), _items = _$.state( 2, diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-nested-for/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-nested-for/__snapshots__/dom.expected/template.js index a78e471648..5740ffbeb4 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-nested-for/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-nested-for/__snapshots__/dom.expected/template.js @@ -24,15 +24,11 @@ const _items$forBody = /* @__PURE__ */_$.closure("items", (_scope, items) => _fo const _params_2$forBody = /* @__PURE__ */_$.value("_params_2", (_scope, _params_2) => _outer$forBody2(_scope, _params_2[0]), () => _outer$forBody2); const _forBody = _$.register("packages/translator-tags/src/__tests__/fixtures/basic-nested-for/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer("", /* replace */"D%D", void 0, () => [_items$forBody], () => _params_2$forBody)); const _for = /* @__PURE__ */_$.loopOf("#text/1", _forBody); -const _onClick = _scope => { - const { - items - } = _scope; - return function () { - _items(_scope, [...items, items.length]); - }; -}; -const _items_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-nested-for/template.marko_0_items", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _items_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-nested-for/template.marko_0_items", (_scope, { + items +}) => _$.on(_scope["#button/0"], "click", function () { + _items(_scope, [...items, items.length]); +})); const _items = /* @__PURE__ */_$.state("items", (_scope, items) => { _items_effect(_scope); _for(_scope, [items]); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/dom.expected/template.hydrate.js index ae038f6e7e..1be51065e6 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/dom.expected/template.hydrate.js @@ -1,4 +1,4 @@ -// size: 877 (min) 389 (brotli) +// size: 857 (min) 391 (brotli) const _renderBody_input = _$.dynamicTagAttrs(0), _expr_Text_value = _$.intersection( 2, @@ -61,17 +61,10 @@ _$.register( () => _params_2$childBody, ), ); -const _x_effect = _$.effect("b4", (_scope) => - _$.on( - _scope[0], - "click", - ((_scope) => { - const { 2: x } = _scope; - return function () { - _x(_scope, x + 1); - }; - })(_scope), - ), +const _x_effect = _$.effect("b4", (_scope, { 2: x }) => + _$.on(_scope[0], "click", function () { + _x(_scope, x + 1); + }), ), _x = _$.state( 2, diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/dom.expected/template.js index 342349a689..59ee5434b8 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/dom.expected/template.js @@ -15,15 +15,11 @@ const _setup$childBody = _scope => { }; const _childBody = _$.register("packages/translator-tags/src/__tests__/fixtures/basic-nested-params/template.marko_1_renderer", /* @__PURE__ */_$.createRendererWithOwner(`${_child_template}`, /* beginChild, _child_walks, endChild */`/${_child_walks}&`, _setup$childBody, () => [_y$childBody], () => _params_2$childBody)); const _y = /* @__PURE__ */_$.state("y", 0, () => _$.dynamicSubscribers("y")); -const _onClick = _scope => { - const { - x - } = _scope; - return function () { - _x(_scope, x + 1); - }; -}; -const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-nested-params/template.marko_0_x", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-nested-params/template.marko_0_x", (_scope, { + x +}) => _$.on(_scope["#button/0"], "click", function () { + _x(_scope, x + 1), x; +})); const _x = /* @__PURE__ */_$.state("x", (_scope, x) => { _x_effect(_scope); _child_input_value(_scope["#childScope/1"], x); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-custom-tag/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-custom-tag/__snapshots__/dom.expected/template.hydrate.js index b047a3c13d..705aff7c68 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-custom-tag/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-custom-tag/__snapshots__/dom.expected/template.hydrate.js @@ -1,18 +1,9 @@ -// size: 348 (min) 216 (brotli) +// size: 328 (min) 211 (brotli) _$.dynamicTagAttrs(0); -const _count$childBody_effect = _$.effect("b0", (_scope) => - _$.on( - _scope[0], - "click", - ((_scope) => { - const { - _: { 1: count }, - } = _scope; - return function () { - _count(_scope._, count + 1); - }; - })(_scope), - ), +const _count$childBody_effect = _$.effect("b0", (_scope, { _: { 1: count } }) => + _$.on(_scope[0], "click", function () { + _count(_scope._, count + 1); + }), ), _count$childBody = _$.registerSubscriber( "b1", diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-custom-tag/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-custom-tag/__snapshots__/dom.expected/template.js index 50636235ee..557f1d4a44 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-custom-tag/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-custom-tag/__snapshots__/dom.expected/template.js @@ -2,17 +2,13 @@ export const _template_ = `${_child_template}`; export const _walks_ = /* beginChild, _child_walks, endChild */`D/${_child_walks}&D`; import * as _$ from "@marko/runtime-tags/debug/dom"; import { _setup_ as _child, _input_renderBody_ as _child_input_renderBody, _template_ as _child_template, _walks_ as _child_walks } from "./components/child.marko"; -const _onClick = _scope => { - const { - _: { - count - } - } = _scope; - return function () { - _count(_scope._, count + 1); - }; -}; -const _count$childBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-custom-tag/template.marko_1_count", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _count$childBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-custom-tag/template.marko_1_count", (_scope, { + _: { + count + } +}) => _$.on(_scope["#button/0"], "click", function () { + _count(_scope._, count + 1), count; +})); const _count$childBody = _$.registerSubscriber("packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-custom-tag/template.marko_1_count/subscriber", /* @__PURE__ */_$.dynamicClosure("count", (_scope, count) => { _$.data(_scope["#text/1"], count); _count$childBody_effect(_scope); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-dynamic-tag/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-dynamic-tag/__snapshots__/dom.expected/template.hydrate.js index 1820cbc717..668e43c22d 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-dynamic-tag/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-dynamic-tag/__snapshots__/dom.expected/template.hydrate.js @@ -1,18 +1,11 @@ -// size: 373 (min) 222 (brotli) +// size: 353 (min) 218 (brotli) _$.dynamicTagAttrs(0); -const _count$falseChildBody_effect = _$.effect("b0", (_scope) => - _$.on( - _scope[0], - "click", - ((_scope) => { - const { - _: { 1: count }, - } = _scope; - return function () { - _count(_scope._, count + 1); - }; - })(_scope), - ), +const _count$falseChildBody_effect = _$.effect( + "b0", + (_scope, { _: { 1: count } }) => + _$.on(_scope[0], "click", function () { + _count(_scope._, count + 1); + }), ), _count$falseChildBody = _$.registerSubscriber( "b1", diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-dynamic-tag/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-dynamic-tag/__snapshots__/dom.expected/template.js index ba0d5d0fd4..ad4deb44a0 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-dynamic-tag/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-dynamic-tag/__snapshots__/dom.expected/template.js @@ -2,17 +2,13 @@ export const _template_ = ""; export const _walks_ = /* replace, over(1) */"D%bD"; import Child from "./components/child.marko"; import * as _$ from "@marko/runtime-tags/debug/dom"; -const _onClick = _scope => { - const { - _: { - count - } - } = _scope; - return function () { - _count(_scope._, count + 1); - }; -}; -const _count$falseChildBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-dynamic-tag/template.marko_1_count", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _count$falseChildBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-dynamic-tag/template.marko_1_count", (_scope, { + _: { + count + } +}) => _$.on(_scope["#button/0"], "click", function () { + _count(_scope._, count + 1), count; +})); const _count$falseChildBody = _$.registerSubscriber("packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-dynamic-tag/template.marko_1_count/subscriber", /* @__PURE__ */_$.dynamicClosure("count", (_scope, count) => { _$.data(_scope["#text/1"], count); _count$falseChildBody_effect(_scope); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/__snapshots__/dom.expected/template.hydrate.js index fb7a3ad8e4..89ecf9ff09 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/__snapshots__/dom.expected/template.hydrate.js @@ -1,4 +1,4 @@ -// size: 297 (min) 193 (brotli) +// size: 277 (min) 179 (brotli) const _expr_selected_num$forBody = _$.intersection(2, (_scope) => { const { _: { 1: selected }, @@ -7,17 +7,10 @@ const _expr_selected_num$forBody = _$.intersection(2, (_scope) => { _$.attr(_scope[0], "data-selected", selected === num), _$.attr(_scope[0], "data-multiple", num % selected == 0); }); -_$.effect("a0", (_scope) => - _$.on( - _scope[0], - "click", - ((_scope) => { - const { 3: num } = _scope; - return function () { - _selected(_scope._, num); - }; - })(_scope), - ), +_$.effect("a0", (_scope, { 3: num }) => + _$.on(_scope[0], "click", function () { + _selected(_scope._, num); + }), ); const _selected$forBody = _$.closure( 1, diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/__snapshots__/dom.expected/template.js index 56d259c467..a0df6e3154 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/__snapshots__/dom.expected/template.js @@ -11,15 +11,11 @@ const _expr_selected_num$forBody = /* @__PURE__ */_$.intersection(2, _scope => { _$.attr(_scope["#button/0"], "data-selected", selected === num); _$.attr(_scope["#button/0"], "data-multiple", num % selected === 0); }); -const _onClick = _scope => { - const { - num - } = _scope; - return function () { - _selected(_scope._, num); - }; -}; -const _num$forBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _num$forBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num", (_scope, { + num +}) => _$.on(_scope["#button/0"], "click", function () { + _selected(_scope._, num); +})); const _num$forBody = /* @__PURE__ */_$.value("num", (_scope, num) => { _$.data(_scope["#text/1"], num); _num$forBody_effect(_scope); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-if/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-if/__snapshots__/dom.expected/template.hydrate.js index 1ecb12df73..5a182d7992 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-if/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-if/__snapshots__/dom.expected/template.hydrate.js @@ -1,4 +1,4 @@ -// size: 518 (min) 272 (brotli) +// size: 498 (min) 259 (brotli) const _clickCount$elseBody = _$.closure(1, (_scope, clickCount) => _$.data(_scope[0], clickCount), ), @@ -11,19 +11,12 @@ const _clickCount$elseBody = _$.closure(1, (_scope, clickCount) => () => [_clickCount$elseBody], ), ), - _clickCount$ifBody_effect = _$.effect("a1", (_scope) => - _$.on( - _scope[0], - "click", - ((_scope) => { - const { - _: { 1: clickCount }, - } = _scope; - return function () { - _clickCount(_scope._, clickCount + 1); - }; - })(_scope), - ), + _clickCount$ifBody_effect = _$.effect( + "a1", + (_scope, { _: { 1: clickCount } }) => + _$.on(_scope[0], "click", function () { + _clickCount(_scope._, clickCount + 1); + }), ), _clickCount$ifBody = _$.closure(1, (_scope, clickCount) => { _$.data(_scope[1], clickCount), _clickCount$ifBody_effect(_scope); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-if/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-if/__snapshots__/dom.expected/template.js index 37396ea634..251f143edb 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-if/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-if/__snapshots__/dom.expected/template.js @@ -3,17 +3,13 @@ export const _walks_ = /* next(1), replace, out(1) */"D%l"; import * as _$ from "@marko/runtime-tags/debug/dom"; const _clickCount$elseBody = /* @__PURE__ */_$.closure("clickCount", (_scope, clickCount) => _$.data(_scope["#text/0"], clickCount)); const _elseBody = _$.register("packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-if/template.marko_2_renderer", /* @__PURE__ */_$.createRenderer("The button was clicked times.", /* next(1), over(1), replace */"Db%", void 0, () => [_clickCount$elseBody])); -const _onClick = _scope => { - const { - _: { - clickCount - } - } = _scope; - return function () { - _clickCount(_scope._, clickCount + 1); - }; -}; -const _clickCount$ifBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-if/template.marko_1_clickCount", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _clickCount$ifBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-if/template.marko_1_clickCount", (_scope, { + _: { + clickCount + } +}) => _$.on(_scope["#button/0"], "click", function () { + _clickCount(_scope._, clickCount + 1), clickCount; +})); const _clickCount$ifBody = /* @__PURE__ */_$.closure("clickCount", (_scope, clickCount) => { _$.data(_scope["#text/1"], clickCount); _clickCount$ifBody_effect(_scope); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-push-pop-list/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-push-pop-list/__snapshots__/dom.expected/template.hydrate.js index f5bdd3a7fc..19c5624d10 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-push-pop-list/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-push-pop-list/__snapshots__/dom.expected/template.hydrate.js @@ -1,4 +1,4 @@ -// size: 485 (min) 250 (brotli) +// size: 445 (min) 244 (brotli) const _item$forBody = _$.value(2, (_scope, item) => _$.data(_scope[0], item)), _params_2$forBody = _$.value(1, (_scope, _params_2) => _item$forBody(_scope, _params_2[0]), @@ -7,34 +7,20 @@ const _item$forBody = _$.value(2, (_scope, item) => _$.data(_scope[0], item)), "a0", _$.createRenderer(" ", " ", void 0, void 0, () => _params_2$forBody), ), - _expr_id_items_effect = _$.effect("a1", (_scope) => - _$.on( - _scope[1], - "click", - ((_scope) => { - const { 3: id, 4: items } = _scope; - return function () { - const nextId = id + 1; - _id(_scope, nextId), _items(_scope, [...items, nextId]); - }; - })(_scope), - ), + _expr_id_items_effect = _$.effect("a1", (_scope, { 3: id, 4: items }) => + _$.on(_scope[1], "click", function () { + const nextId = id + 1; + _id(_scope, nextId), _items(_scope, [...items, nextId]); + }), ), _expr_id_items = _$.intersection(2, (_scope) => { _expr_id_items_effect(_scope); }), _for = _$.loopOf(0, _forBody), - _items_effect = _$.effect("a2", (_scope) => - _$.on( - _scope[2], - "click", - ((_scope) => { - const { 4: items } = _scope; - return function () { - _items(_scope, items.slice(0, -1)); - }; - })(_scope), - ), + _items_effect = _$.effect("a2", (_scope, { 4: items }) => + _$.on(_scope[2], "click", function () { + _items(_scope, items.slice(0, -1)); + }), ), _items = _$.state( 4, diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-push-pop-list/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-push-pop-list/__snapshots__/dom.expected/template.js index a75f033e43..5005507daa 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-push-pop-list/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-push-pop-list/__snapshots__/dom.expected/template.js @@ -4,19 +4,15 @@ import * as _$ from "@marko/runtime-tags/debug/dom"; const _item$forBody = /* @__PURE__ */_$.value("item", (_scope, item) => _$.data(_scope["#text/0"], item)); const _params_2$forBody = /* @__PURE__ */_$.value("_params_2", (_scope, _params_2) => _item$forBody(_scope, _params_2[0])); const _forBody = _$.register("packages/translator-tags/src/__tests__/fixtures/basic-push-pop-list/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer(" ", /* get */" ", void 0, void 0, () => _params_2$forBody)); -const _onClick = _scope => { - const { - id, - items - } = _scope; - return function () { - // TODO: nested writes ([...items, id++]) don't work - const nextId = id + 1; - _id(_scope, nextId); - _items(_scope, [...items, nextId]); - }; -}; -const _expr_id_items_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-push-pop-list/template.marko_0_id_items", _scope => _$.on(_scope["#button/1"], "click", _onClick(_scope))); +const _expr_id_items_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-push-pop-list/template.marko_0_id_items", (_scope, { + id, + items +}) => _$.on(_scope["#button/1"], "click", function () { + // TODO: nested writes ([...items, id++]) don't work + const nextId = id + 1; + _id(_scope, nextId); + _items(_scope, [...items, nextId]); +})); const _expr_id_items = /* @__PURE__ */_$.intersection(2, _scope => { const { id, @@ -25,15 +21,11 @@ const _expr_id_items = /* @__PURE__ */_$.intersection(2, _scope => { _expr_id_items_effect(_scope); }); const _for = /* @__PURE__ */_$.loopOf("#text/0", _forBody); -const _onClick2 = _scope => { - const { - items - } = _scope; - return function () { - _items(_scope, items.slice(0, -1)); - }; -}; -const _items_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-push-pop-list/template.marko_0_items", _scope => _$.on(_scope["#button/2"], "click", _onClick2(_scope))); +const _items_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-push-pop-list/template.marko_0_items", (_scope, { + items +}) => _$.on(_scope["#button/2"], "click", function () { + _items(_scope, items.slice(0, -1)); +})); const _items = /* @__PURE__ */_$.state("items", (_scope, items) => { _items_effect(_scope); _for(_scope, [items]); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-scriptlet/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-scriptlet/__snapshots__/dom.expected/template.js deleted file mode 100644 index 159bbed759..0000000000 --- a/packages/translator-tags/src/__tests__/fixtures/basic-scriptlet/__snapshots__/dom.expected/template.js +++ /dev/null @@ -1,21 +0,0 @@ -export const _template_ = "
"; -export const _walks_ = /* next(1), get, next(1), get, out(2) */"D D m"; -import * as _$ from "@marko/runtime-tags/debug/dom"; -const _onClick = _scope => { - const { - clickCount - } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; -}; -const _clickCount_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-scriptlet/template.marko_0_clickCount", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); -const _clickCount = /* @__PURE__ */_$.state("clickCount", (_scope, clickCount) => { - const doubleCount = clickCount * 2; - _clickCount_effect(_scope); -}); -export function _setup_(_scope) { - _$.data(_scope["#text/1"], doubleCount); - _clickCount(_scope, 0); -} -export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/basic-scriptlet/template.marko", _template_, _walks_, _setup_); \ No newline at end of file diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-scriptlet/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-scriptlet/__snapshots__/html.expected/template.js deleted file mode 100644 index ce41e4e62a..0000000000 --- a/packages/translator-tags/src/__tests__/fixtures/basic-scriptlet/__snapshots__/html.expected/template.js +++ /dev/null @@ -1,12 +0,0 @@ -import * as _$ from "@marko/runtime-tags/debug/html"; -const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => { - const _scope0_id = _$.nextScopeId(); - const clickCount = 0; - const doubleCount = clickCount * 2; - _$.write(`
${_$.markResumeNode(_scope0_id, "#button/0")}
`); - _$.writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/basic-scriptlet/template.marko_0_clickCount"); - _$.writeScope(_scope0_id, { - "clickCount": clickCount - }); -}); -export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/basic-scriptlet/template.marko", _renderer); \ No newline at end of file diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-scriptlet/test.ts b/packages/translator-tags/src/__tests__/fixtures/basic-scriptlet/test.ts deleted file mode 100644 index 0495654a96..0000000000 --- a/packages/translator-tags/src/__tests__/fixtures/basic-scriptlet/test.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const steps = [{}, click, click, click]; - -function click(container: Element) { - container.querySelector("button")!.click(); -} - -export const skip_csr = true; -export const skip_ssr = true; diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-shared-node-ref/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-shared-node-ref/__snapshots__/dom.expected/template.hydrate.js index 908df68a1a..c822e3d763 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-shared-node-ref/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-shared-node-ref/__snapshots__/dom.expected/template.hydrate.js @@ -1,4 +1,4 @@ -// size: 488 (min) 250 (brotli) +// size: 448 (min) 235 (brotli) const _x$forBody = _$.value(2, (_scope, x) => _$.data(_scope[0], x)), _params_2$forBody = _$.value(1, (_scope, _params_2) => _x$forBody(_scope, _params_2[0]), @@ -14,17 +14,10 @@ const _x$forBody = _$.value(2, (_scope, x) => _$.data(_scope[0], x)), ), ), _for = _$.loopOf(0, _forBody), - _list_effect = _$.effect("a1", (_scope) => - _$.on( - _scope[2], - "click", - ((_scope) => { - const { 4: list } = _scope; - return function () { - _list(_scope, [].concat(list).reverse()); - }; - })(_scope), - ), + _list_effect = _$.effect("a1", (_scope, { 4: list }) => + _$.on(_scope[2], "click", function () { + _list(_scope, [].concat(list).reverse()); + }), ), _list = _$.state(4, (_scope, list) => { _list_effect(_scope), @@ -35,17 +28,10 @@ const _x$forBody = _$.value(2, (_scope, x) => _$.data(_scope[0], x)), }, ]); }), - _open_effect = _$.effect("a2", (_scope) => - _$.on( - _scope[1], - "click", - ((_scope) => { - const { 3: open } = _scope; - return function () { - _open(_scope, !open); - }; - })(_scope), - ), + _open_effect = _$.effect("a2", (_scope, { 3: open }) => + _$.on(_scope[1], "click", function () { + _open(_scope, !open); + }), ), _open = _$.state(3, (_scope, open) => { _$.attr(_scope[0], "hidden", !open), _open_effect(_scope); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-shared-node-ref/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-shared-node-ref/__snapshots__/dom.expected/template.js index 3ef6b8c728..933288647b 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-shared-node-ref/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-shared-node-ref/__snapshots__/dom.expected/template.js @@ -5,30 +5,22 @@ const _x$forBody = /* @__PURE__ */_$.value("x", (_scope, x) => _$.data(_scope["# const _params_2$forBody = /* @__PURE__ */_$.value("_params_2", (_scope, _params_2) => _x$forBody(_scope, _params_2[0])); const _forBody = _$.register("packages/translator-tags/src/__tests__/fixtures/basic-shared-node-ref/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer("
    • ", /* next(1), get */"D ", void 0, void 0, () => _params_2$forBody)); const _for = /* @__PURE__ */_$.loopOf("#ul/0", _forBody); -const _onClick = _scope => { - const { - list - } = _scope; - return function () { - _list(_scope, [].concat(list).reverse()); - }; -}; -const _list_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-shared-node-ref/template.marko_0_list", _scope => _$.on(_scope["#button/2"], "click", _onClick(_scope))); +const _list_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-shared-node-ref/template.marko_0_list", (_scope, { + list +}) => _$.on(_scope["#button/2"], "click", function () { + _list(_scope, [].concat(list).reverse()); +})); const _list = /* @__PURE__ */_$.state("list", (_scope, list) => { _list_effect(_scope); _for(_scope, [list, function (x) { return x; }]); }); -const _onClick2 = _scope => { - const { - open - } = _scope; - return function () { - _open(_scope, !open); - }; -}; -const _open_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-shared-node-ref/template.marko_0_open", _scope => _$.on(_scope["#button/1"], "click", _onClick2(_scope))); +const _open_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-shared-node-ref/template.marko_0_open", (_scope, { + open +}) => _$.on(_scope["#button/1"], "click", function () { + _open(_scope, !open); +})); const _open = /* @__PURE__ */_$.state("open", (_scope, open) => { _$.attr(_scope["#ul/0"], "hidden", !open); _open_effect(_scope); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-toggle-show/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-toggle-show/__snapshots__/dom.expected/template.hydrate.js index 8c0245b3b6..3de0bfdae8 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-toggle-show/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-toggle-show/__snapshots__/dom.expected/template.hydrate.js @@ -1,17 +1,10 @@ -// size: 214 (min) 146 (brotli) +// size: 194 (min) 138 (brotli) const _ifBody = _$.register("a0", _$.createRenderer("Hello!", "")), _if = _$.conditional(0, 0), - _show_effect = _$.effect("a1", (_scope) => - _$.on( - _scope[1], - "click", - ((_scope) => { - const { 2: show } = _scope; - return function () { - _show(_scope, !show); - }; - })(_scope), - ), + _show_effect = _$.effect("a1", (_scope, { 2: show }) => + _$.on(_scope[1], "click", function () { + _show(_scope, !show); + }), ), _show = _$.state(2, (_scope, show) => { _show_effect(_scope), _if(_scope, show ? _ifBody : null); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-toggle-show/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-toggle-show/__snapshots__/dom.expected/template.js index b593352e31..52779bfeed 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-toggle-show/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-toggle-show/__snapshots__/dom.expected/template.js @@ -3,15 +3,11 @@ export const _walks_ = /* next(1), replace, over(1), get, out(1) */"D%b l"; import * as _$ from "@marko/runtime-tags/debug/dom"; const _ifBody = _$.register("packages/translator-tags/src/__tests__/fixtures/basic-toggle-show/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer("Hello!", "")); const _if = /* @__PURE__ */_$.conditional("#text/0", 0); -const _onClick = _scope => { - const { - show - } = _scope; - return function () { - _show(_scope, !show); - }; -}; -const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-toggle-show/template.marko_0_show", _scope => _$.on(_scope["#button/1"], "click", _onClick(_scope))); +const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-toggle-show/template.marko_0_show", (_scope, { + show +}) => _$.on(_scope["#button/1"], "click", function () { + _show(_scope, !show); +})); const _show = /* @__PURE__ */_$.state("show", (_scope, show) => { _show_effect(_scope); _if(_scope, show ? _ifBody : null); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-unused-ref/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/basic-unused-ref/__snapshots__/dom.expected/template.hydrate.js index 504ff27457..a9d4f32db8 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-unused-ref/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-unused-ref/__snapshots__/dom.expected/template.hydrate.js @@ -1,15 +1,8 @@ -// size: 146 (min) 127 (brotli) -const _clickCount_effect = _$.effect("a0", (_scope) => - _$.on( - _scope[0], - "click", - ((_scope) => { - const { 2: clickCount } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; - })(_scope), - ), +// size: 126 (min) 107 (brotli) +const _clickCount_effect = _$.effect("a0", (_scope, { 2: clickCount }) => + _$.on(_scope[0], "click", function () { + _clickCount(_scope, clickCount + 1); + }), ), _clickCount = _$.state(2, (_scope, clickCount) => { _$.data(_scope[1], clickCount), _clickCount_effect(_scope); diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-unused-ref/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-unused-ref/__snapshots__/dom.expected/template.js index 33e14376c0..1e89419343 100644 --- a/packages/translator-tags/src/__tests__/fixtures/basic-unused-ref/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/basic-unused-ref/__snapshots__/dom.expected/template.js @@ -3,15 +3,11 @@ export const _walks_ = /* next(1), get, next(1), get, out(2) */"D D m"; import * as _$ from "@marko/runtime-tags/debug/dom"; const _unused_2 = (_scope, unused_2) => {}; const _unused_ = (_scope, unused_1) => {}; -const _onClick = _scope => { - const { - clickCount - } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; -}; -const _clickCount_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-unused-ref/template.marko_0_clickCount", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _clickCount_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-unused-ref/template.marko_0_clickCount", (_scope, { + clickCount +}) => _$.on(_scope["#button/0"], "click", function () { + _clickCount(_scope, clickCount + 1), clickCount; +})); const _clickCount = /* @__PURE__ */_$.state("clickCount", (_scope, clickCount) => { _$.data(_scope["#text/1"], clickCount); _clickCount_effect(_scope); diff --git a/packages/translator-tags/src/__tests__/fixtures/batched-updates-cleanup/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/batched-updates-cleanup/__snapshots__/dom.expected/template.hydrate.js index 5740bbea69..432e8a3ce8 100644 --- a/packages/translator-tags/src/__tests__/fixtures/batched-updates-cleanup/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/batched-updates-cleanup/__snapshots__/dom.expected/template.hydrate.js @@ -1,4 +1,4 @@ -// size: 346 (min) 217 (brotli) +// size: 326 (min) 205 (brotli) const _message$ifBody = _$.closure(3, (_scope, message) => _$.data(_scope[0], message), ), @@ -8,17 +8,10 @@ const _message$ifBody = _$.closure(3, (_scope, message) => ), _if = _$.conditional(1, 0), _message = _$.state(3, 0, () => _$.inConditionalScope(_message$ifBody, 1)), - _show_effect = _$.effect("a1", (_scope) => - _$.on( - _scope[0], - "click", - ((_scope) => { - const { 2: show } = _scope; - return function () { - _message(_scope, "bye"), _show(_scope, !show); - }; - })(_scope), - ), + _show_effect = _$.effect("a1", (_scope, { 2: show }) => + _$.on(_scope[0], "click", function () { + _message(_scope, "bye"), _show(_scope, !show); + }), ), _show = _$.state( 2, diff --git a/packages/translator-tags/src/__tests__/fixtures/batched-updates-cleanup/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/batched-updates-cleanup/__snapshots__/dom.expected/template.js index c15009e789..10b62dd614 100644 --- a/packages/translator-tags/src/__tests__/fixtures/batched-updates-cleanup/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/batched-updates-cleanup/__snapshots__/dom.expected/template.js @@ -5,16 +5,12 @@ const _message$ifBody = /* @__PURE__ */_$.closure("message", (_scope, message) = const _ifBody = _$.register("packages/translator-tags/src/__tests__/fixtures/batched-updates-cleanup/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer(" ", /* next(1), get */"D ", void 0, () => [_message$ifBody])); const _if = /* @__PURE__ */_$.conditional("#text/1", 0); const _message = /* @__PURE__ */_$.state("message", 0, () => _$.inConditionalScope(_message$ifBody, "#text/1")); -const _onClick = _scope => { - const { - show - } = _scope; - return function () { - _message(_scope, "bye"); - _show(_scope, !show); - }; -}; -const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/batched-updates-cleanup/template.marko_0_show", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/batched-updates-cleanup/template.marko_0_show", (_scope, { + show +}) => _$.on(_scope["#button/0"], "click", function () { + _message(_scope, "bye"); + _show(_scope, !show); +})); const _show = /* @__PURE__ */_$.state("show", (_scope, show) => { _show_effect(_scope); _if(_scope, show ? _ifBody : null); diff --git a/packages/translator-tags/src/__tests__/fixtures/batched-updates/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/batched-updates/__snapshots__/dom.expected/template.hydrate.js index 0bc86d3a40..de68881128 100644 --- a/packages/translator-tags/src/__tests__/fixtures/batched-updates/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/batched-updates/__snapshots__/dom.expected/template.hydrate.js @@ -1,15 +1,8 @@ -// size: 227 (min) 146 (brotli) -const _expr_a_b_effect = _$.effect("a0", (_scope) => - _$.on( - _scope[0], - "click", - ((_scope) => { - const { 2: a, 3: b } = _scope; - return function () { - _a(_scope, a + 1), _b(_scope, b + 1); - }; - })(_scope), - ), +// size: 207 (min) 149 (brotli) +const _expr_a_b_effect = _$.effect("a0", (_scope, { 2: a, 3: b }) => + _$.on(_scope[0], "click", function () { + _a(_scope, a + 1), _b(_scope, b + 1); + }), ), _expr_a_b = _$.intersection(2, (_scope) => { const { 2: a, 3: b } = _scope; diff --git a/packages/translator-tags/src/__tests__/fixtures/batched-updates/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/batched-updates/__snapshots__/dom.expected/template.js index 86a80c168d..1b71187e99 100644 --- a/packages/translator-tags/src/__tests__/fixtures/batched-updates/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/batched-updates/__snapshots__/dom.expected/template.js @@ -1,17 +1,13 @@ export const _template_ = ""; export const _walks_ = /* get, next(1), get, out(1) */" D l"; import * as _$ from "@marko/runtime-tags/debug/dom"; -const _onClick = _scope => { - const { - a, - b - } = _scope; - return function () { - _a(_scope, a + 1); - _b(_scope, b + 1); - }; -}; -const _expr_a_b_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/batched-updates/template.marko_0_a_b", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _expr_a_b_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/batched-updates/template.marko_0_a_b", (_scope, { + a, + b +}) => _$.on(_scope["#button/0"], "click", function () { + _a(_scope, a + 1), a; + _b(_scope, b + 1), b; +})); const _expr_a_b = /* @__PURE__ */_$.intersection(2, _scope => { const { a, diff --git a/packages/translator-tags/src/__tests__/fixtures/body-content/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/body-content/__snapshots__/dom.expected/template.hydrate.js index ffcb07ae9d..e02dbe36e3 100644 --- a/packages/translator-tags/src/__tests__/fixtures/body-content/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/body-content/__snapshots__/dom.expected/template.hydrate.js @@ -1,4 +1,4 @@ -// size: 581 (min) 314 (brotli) +// size: 583 (min) 311 (brotli) const _renderBody_input = _$.dynamicTagAttrs(1), _dynamicTagName = _$.conditional( 1, @@ -21,12 +21,6 @@ const _renderBody_input = _$.dynamicTagAttrs(1), }, () => _renderBody_, ), - _onClick = _$.register("b0", (_scope) => { - const { 1: clickCount } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; - }), _clickCount$FancyButtonBody = _$.registerSubscriber( "b1", _$.dynamicClosure(1, (_scope, clickCount) => @@ -48,4 +42,9 @@ const _renderBody_input = _$.dynamicTagAttrs(1), }), () => _$.intersections([_$.inChild(0, _input_), _$.dynamicSubscribers(1)]), ); -init(); +function _onClick(_scope, { 1: clickCount } = _scope) { + return function () { + _clickCount(_scope, clickCount + 1); + }; +} +_$.register("b0", _onClick), init(); diff --git a/packages/translator-tags/src/__tests__/fixtures/body-content/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/body-content/__snapshots__/dom.expected/template.js index 667cee212a..15d6c3bd76 100644 --- a/packages/translator-tags/src/__tests__/fixtures/body-content/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/body-content/__snapshots__/dom.expected/template.js @@ -1,14 +1,6 @@ export const _template_ = `${_FancyButton_template}`; export const _walks_ = /* beginChild, _FancyButton_walks, endChild */`/${_FancyButton_walks}&`; import * as _$ from "@marko/runtime-tags/debug/dom"; -const _onClick = _$.register("packages/translator-tags/src/__tests__/fixtures/body-content/template.marko_0/onClick", _scope => { - const { - clickCount - } = _scope; - return function () { - _clickCount(_scope, clickCount + 1); - }; -}); import { _setup_ as _FancyButton, _input_ as _FancyButton_input, _template_ as _FancyButton_template, _walks_ as _FancyButton_walks } from "./components/FancyButton.marko"; const _clickCount$FancyButtonBody = _$.registerSubscriber("packages/translator-tags/src/__tests__/fixtures/body-content/template.marko_1_clickCount/subscriber", /* @__PURE__ */_$.dynamicClosure("clickCount", (_scope, clickCount) => _$.data(_scope["#text/0"], clickCount))); const _FancyButtonBody = _$.register("packages/translator-tags/src/__tests__/fixtures/body-content/template.marko_1_renderer", /* @__PURE__ */_$.createRendererWithOwner(" ", /* get */" ", void 0, () => [_clickCount$FancyButtonBody])); @@ -20,4 +12,12 @@ export function _setup_(_scope) { _FancyButton(_scope["#childScope/0"]); _clickCount(_scope, 0); } +function _onClick(_scope, { + clickCount +} = _scope) { + return function () { + _clickCount(_scope, clickCount + 1), clickCount; + }; +} +_$.register("packages/translator-tags/src/__tests__/fixtures/body-content/template.marko_0/onClick", _onClick); export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/body-content/template.marko", _template_, _walks_, _setup_); \ No newline at end of file diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/__snapshots__/dom.expected/components/child.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/__snapshots__/dom.expected/components/child.js index f4f3f49e25..8803ee2b2c 100644 --- a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/__snapshots__/dom.expected/components/child.js +++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/__snapshots__/dom.expected/components/child.js @@ -2,22 +2,14 @@ export const _template_ = "

    "; export const _walks_ = /* next(1), get, out(1), next(1), get, out(1), next(1), get, out(1) */"D lD lD l"; export const _setup_ = () => {}; import * as _$ from "@marko/runtime-tags/debug/dom"; -const _effect = _scope => { - const { - name, - write - } = _scope; - return () => { +const _expr_name_write_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/components/child.marko_0_name_write", (_scope, { + name, + write +}) => { + write(`mounted ${name}`); + _$.getAbortSignal(_scope, 0).onabort = () => { write(`destroyed ${name}`); }; -}; -const _expr_name_write_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/components/child.marko_0_name_write", _scope => { - const { - name, - write - } = _scope; - write(`mounted ${name}`); - _$.getAbortSignal(_scope, 0).onabort = _effect(_scope); }); const _expr_name_write = /* @__PURE__ */_$.intersection(2, _scope => { const { diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/__snapshots__/dom.expected/template.hydrate.js index f66598b3f0..33ac87a602 100644 --- a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/__snapshots__/dom.expected/template.hydrate.js @@ -1,14 +1,13 @@ -// size: 834 (min) 419 (brotli) -const _expr_name_write_effect = _$.effect("a0", (_scope) => { - const { 5: name, 6: write } = _scope; - write(`mounted ${name}`), - (_$.getAbortSignal(_scope, 0).onabort = ((_scope) => { - const { 5: name, 6: write } = _scope; - return () => { +// size: 787 (min) 392 (brotli) +const _expr_name_write_effect = _$.effect( + "a0", + (_scope, { 5: name, 6: write }) => { + write(`mounted ${name}`), + (_$.getAbortSignal(_scope, 0).onabort = () => { write(`destroyed ${name}`); - }; - })(_scope)); - }), + }); + }, + ), _expr_name_write = _$.intersection(2, (_scope) => { _$.resetAbortSignal(_scope, 0), _expr_name_write_effect(_scope); }), @@ -21,15 +20,8 @@ const _expr_name_write_effect = _$.effect("a0", (_scope) => { _$.data(_scope[2], name); }, () => _expr_name_write, - ); -_$.register( - "b0", - (_scope) => - function (msg) { - _scope[1].innerHTML += "\n" + msg; - }, -); -const _write$forBody = _$.closure( + ), + _write$forBody = _$.closure( 4, (_scope, write) => _write_(_scope[0], write), void 0, @@ -59,17 +51,10 @@ const _write$forBody = _$.closure( ), ), _for = _$.loopOf(2, _forBody), - _items_effect = _$.effect("b2", (_scope) => - _$.on( - _scope[0], - "click", - ((_scope) => { - const { 3: items } = _scope; - return function () { - _items(_scope, items.length ? items.slice(0, -1) : [1, 2, 3]); - }; - })(_scope), - ), + _items_effect = _$.effect("b2", (_scope, { 3: items }) => + _$.on(_scope[0], "click", function () { + _items(_scope, items.length ? items.slice(0, -1) : [1, 2, 3]); + }), ), _items = _$.state( 3, @@ -78,4 +63,9 @@ const _write$forBody = _$.closure( }, () => _for, ); -init(); +_$.register("b0", function (_scope) { + return function (msg) { + _scope[1].innerHTML += "\n" + msg; + }; +}), + init(); diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/__snapshots__/dom.expected/template.js index eced1f6314..5bd8f29553 100644 --- a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/__snapshots__/dom.expected/template.js @@ -1,9 +1,6 @@ export const _template_ = "
    "; export const _walks_ = /* get, over(1), get, over(1), replace, over(1) */" b b%bD"; import * as _$ from "@marko/runtime-tags/debug/dom"; -const _write = _$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/template.marko_0/write", _scope => function (msg) { - _scope["#div/1"].innerHTML += '\n' + msg; -}); import { _setup_ as _child, _write_ as _child_input_write, _name_ as _child_input_name, _template_ as _child_template, _walks_ as _child_walks } from "./components/child.marko"; const _write$forBody = /* @__PURE__ */_$.closure("write", (_scope, write) => _child_input_write(_scope["#childScope/0"], write), void 0, () => _$.inChild("#childScope/0", _child_input_write)); const _item$forBody = /* @__PURE__ */_$.value("item", (_scope, item) => _child_input_name(_scope["#childScope/0"], item), () => _$.inChild("#childScope/0", _child_input_name)); @@ -13,22 +10,24 @@ const _setup$forBody = _scope => { }; const _forBody = _$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer(`${_child_template}`, /* beginChild, _child_walks, endChild */`/${_child_walks}&`, _setup$forBody, () => [_write$forBody], () => _params_2$forBody)); const _for = /* @__PURE__ */_$.loopOf("#text/2", _forBody); -const _write2 = /* @__PURE__ */_$.value("write", 0, () => _$.inLoopScope(_write$forBody, "#text/2")); -const _onClick = _scope => { - const { - items - } = _scope; - return function () { - _items(_scope, items.length ? items.slice(0, -1) : [1, 2, 3]); - }; -}; -const _items_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/template.marko_0_items", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope))); +const _write = /* @__PURE__ */_$.value("write", 0, () => _$.inLoopScope(_write$forBody, "#text/2")); +const _items_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/template.marko_0_items", (_scope, { + items +}) => _$.on(_scope["#button/0"], "click", function () { + _items(_scope, items.length ? items.slice(0, -1) : [1, 2, 3]); +})); const _items = /* @__PURE__ */_$.state("items", (_scope, items) => { _items_effect(_scope); _for(_scope, [items]); }, () => _for); export function _setup_(_scope) { _items(_scope, [1, 2, 3]); - _write2(_scope, _write(_scope)); + _write(_scope, _write2(_scope)); +} +function _write2(_scope) { + return function (msg) { + _scope["#div/1"].innerHTML += '\n' + msg; + }; } +_$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/template.marko_0/write", _write2); export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/template.marko", _template_, _walks_, _setup_); \ No newline at end of file diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/__snapshots__/dom.expected/components/child.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/__snapshots__/dom.expected/components/child.js index 54e2a4a616..aaf7e1de97 100644 --- a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/__snapshots__/dom.expected/components/child.js +++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/__snapshots__/dom.expected/components/child.js @@ -2,22 +2,14 @@ export const _template_ = "
    a
    a

    a

    "; export const _walks_ = /* next(1), replace, out(1), next(1), replace, out(1), next(1), replace, out(1) */"D%lD%lD%l"; export const _setup_ = () => {}; import * as _$ from "@marko/runtime-tags/debug/dom"; -const _effect = _scope => { - const { - name, - write - } = _scope; - return () => { +const _expr_name_write_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/components/child.marko_0_name_write", (_scope, { + name, + write +}) => { + write(`${name} mounted`); + _$.getAbortSignal(_scope, 0).onabort = () => { write(`${name} destroyed`); }; -}; -const _expr_name_write_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/components/child.marko_0_name_write", _scope => { - const { - name, - write - } = _scope; - write(`${name} mounted`); - _$.getAbortSignal(_scope, 0).onabort = _effect(_scope); }); const _expr_name_write = /* @__PURE__ */_$.intersection(2, _scope => { const { diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/__snapshots__/dom.expected/template.hydrate.js index cf2bbc66b5..2947cfffc7 100644 --- a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/__snapshots__/dom.expected/template.hydrate.js +++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/__snapshots__/dom.expected/template.hydrate.js @@ -1,14 +1,10 @@ -// size: 1617 (min) 571 (brotli) +// size: 1530 (min) 558 (brotli) const _template_ = "
    a
    a

    a

    ", - _expr_name_write_effect = _$.effect("a0", (_scope) => { - const { 5: name, 6: write } = _scope; + _expr_name_write_effect = _$.effect("a0", (_scope, { 5: name, 6: write }) => { write(`${name} mounted`), - (_$.getAbortSignal(_scope, 0).onabort = ((_scope) => { - const { 5: name, 6: write } = _scope; - return () => { - write(`${name} destroyed`); - }; - })(_scope)); + (_$.getAbortSignal(_scope, 0).onabort = () => { + write(`${name} destroyed`); + }); }), _expr_name_write = _$.intersection(2, (_scope) => { _$.resetAbortSignal(_scope, 0), _expr_name_write_effect(_scope); @@ -22,15 +18,8 @@ const _template_ = "
    a
    a

    a

    ", _$.data(_scope[2], name); }, () => _expr_name_write, - ); -_$.register( - "b0", - (_scope) => - function (msg) { - _scope[3].innerHTML += "\n" + msg; - }, -); -const _write$ifBody3 = _$.dynamicClosure( + ), + _write$ifBody3 = _$.dynamicClosure( 8, (_scope, write) => _write_(_scope[0], write), (_scope) => _scope._._._, @@ -99,51 +88,30 @@ const _write$ifBody3 = _$.dynamicClosure( ), ), _if = _$.conditional(4, 0), - _showInner_effect = _$.effect("b5", (_scope) => - _$.on( - _scope[2], - "click", - ((_scope) => { - const { 7: showInner } = _scope; - return function () { - _showInner(_scope, !showInner); - }; - })(_scope), - ), + _showInner_effect = _$.effect("b5", (_scope, { 7: showInner }) => + _$.on(_scope[2], "click", function () { + _showInner(_scope, !showInner); + }), ), _showInner = _$.state( 7, (_scope, showInner) => _showInner_effect(_scope), () => _$.dynamicSubscribers(7), ), - _showMiddle_effect = _$.effect("b6", (_scope) => - _$.on( - _scope[1], - "click", - ((_scope) => { - const { 6: showMiddle } = _scope; - return function () { - _showMiddle(_scope, !showMiddle); - }; - })(_scope), - ), + _showMiddle_effect = _$.effect("b6", (_scope, { 6: showMiddle }) => + _$.on(_scope[1], "click", function () { + _showMiddle(_scope, !showMiddle); + }), ), _showMiddle = _$.state( 6, (_scope, showMiddle) => _showMiddle_effect(_scope), () => _$.inConditionalScope(_showMiddle$ifBody, 4), ), - _showOuter_effect = _$.effect("b7", (_scope) => - _$.on( - _scope[0], - "click", - ((_scope) => { - const { 5: showOuter } = _scope; - return function () { - _showOuter(_scope, !showOuter); - }; - })(_scope), - ), + _showOuter_effect = _$.effect("b7", (_scope, { 5: showOuter }) => + _$.on(_scope[0], "click", function () { + _showOuter(_scope, !showOuter); + }), ), _showOuter = _$.state( 5, @@ -152,4 +120,9 @@ const _write$ifBody3 = _$.dynamicClosure( }, () => _if, ); -init(); +_$.register("b0", function (_scope) { + return function (msg) { + _scope[3].innerHTML += "\n" + msg; + }; +}), + init(); diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/__snapshots__/dom.expected/template.js index abeee123de..6f3ececc9f 100644 --- a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/__snapshots__/dom.expected/template.js +++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/__snapshots__/dom.expected/template.js @@ -1,9 +1,6 @@ export const _template_ = "
    ";
 export const _walks_ = /* get, over(1), get, over(1), get, over(1), get, over(1), replace, over(1) */" b b b b%bD";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _write = _$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/template.marko_0/write", _scope => function (msg) {
-  _scope["#pre/3"].innerHTML += '\n' + msg;
-});
 import { _setup_ as _child, _write_ as _child_input_write, _name_ as _child_input_name, _template_ as _child_template, _walks_ as _child_walks } from "./components/child.marko";
 const _write$ifBody3 = /* @__PURE__ */_$.dynamicClosure("write", (_scope, write) => _child_input_write(_scope["#childScope/0"], write), _scope => _scope._._._, () => _$.inChild("#childScope/0", _child_input_write));
 const _setup$ifBody3 = _scope => {
@@ -28,36 +25,24 @@ const _setup$ifBody = _scope => {
 };
 const _ifBody = _$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer(`
    ${_child_template}
    `, /* next(1), beginChild, _child_walks, endChild, replace */`D/${_child_walks}&%`, _setup$ifBody, () => [_write$ifBody, _showMiddle$ifBody]));
 const _if = /* @__PURE__ */_$.conditional("#text/4", 0);
-const _write2 = /* @__PURE__ */_$.value("write", 0, () => _$.intersections([_$.inConditionalScope(_write$ifBody, "#text/4"), _$.dynamicSubscribers("write")]));
-const _onClick = _scope => {
-  const {
-    showInner
-  } = _scope;
-  return function () {
-    _showInner(_scope, !showInner);
-  };
-};
-const _showInner_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/template.marko_0_showInner", _scope => _$.on(_scope["#button/2"], "click", _onClick(_scope)));
+const _write = /* @__PURE__ */_$.value("write", 0, () => _$.intersections([_$.inConditionalScope(_write$ifBody, "#text/4"), _$.dynamicSubscribers("write")]));
+const _showInner_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/template.marko_0_showInner", (_scope, {
+  showInner
+}) => _$.on(_scope["#button/2"], "click", function () {
+  _showInner(_scope, !showInner);
+}));
 const _showInner = /* @__PURE__ */_$.state("showInner", (_scope, showInner) => _showInner_effect(_scope), () => _$.dynamicSubscribers("showInner"));
-const _onClick2 = _scope => {
-  const {
-    showMiddle
-  } = _scope;
-  return function () {
-    _showMiddle(_scope, !showMiddle);
-  };
-};
-const _showMiddle_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/template.marko_0_showMiddle", _scope => _$.on(_scope["#button/1"], "click", _onClick2(_scope)));
+const _showMiddle_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/template.marko_0_showMiddle", (_scope, {
+  showMiddle
+}) => _$.on(_scope["#button/1"], "click", function () {
+  _showMiddle(_scope, !showMiddle);
+}));
 const _showMiddle = /* @__PURE__ */_$.state("showMiddle", (_scope, showMiddle) => _showMiddle_effect(_scope), () => _$.inConditionalScope(_showMiddle$ifBody, "#text/4"));
-const _onClick3 = _scope => {
-  const {
-    showOuter
-  } = _scope;
-  return function () {
-    _showOuter(_scope, !showOuter);
-  };
-};
-const _showOuter_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/template.marko_0_showOuter", _scope => _$.on(_scope["#button/0"], "click", _onClick3(_scope)));
+const _showOuter_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/template.marko_0_showOuter", (_scope, {
+  showOuter
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _showOuter(_scope, !showOuter);
+}));
 const _showOuter = /* @__PURE__ */_$.state("showOuter", (_scope, showOuter) => {
   _showOuter_effect(_scope);
   _if(_scope, showOuter ? _ifBody : null);
@@ -66,6 +51,12 @@ export function _setup_(_scope) {
   _showOuter(_scope, true);
   _showMiddle(_scope, true);
   _showInner(_scope, true);
-  _write2(_scope, _write(_scope));
+  _write(_scope, _write2(_scope));
+}
+function _write2(_scope) {
+  return function (msg) {
+    _scope["#pre/3"].innerHTML += '\n' + msg;
+  };
 }
+_$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/template.marko_0/write", _write2);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-deep/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-same-scope/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-same-scope/__snapshots__/dom.expected/template.hydrate.js
index 95399c89a7..ceb5bf27ef 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-same-scope/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-same-scope/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 402 (min) 240 (brotli)
+// size: 382 (min) 233 (brotli)
 const _setup$ifBody_effect = _$.effect("a0", (_scope) => {
     (_scope._[1].innerHTML += "\nmounted"),
       (_$.getAbortSignal(_scope, 0).onabort = () => {
@@ -13,17 +13,10 @@ const _setup$ifBody_effect = _$.effect("a0", (_scope) => {
     _$.createRenderer("
    a
    b
    c
    ", "", _setup$ifBody),
   ),
   _if = _$.conditional(2, 0),
-  _show_effect = _$.effect("a2", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 3: show } = _scope;
-        return function () {
-          _show(_scope, !show);
-        };
-      })(_scope),
-    ),
+  _show_effect = _$.effect("a2", (_scope, { 3: show }) =>
+    _$.on(_scope[0], "click", function () {
+      _show(_scope, !show);
+    }),
   ),
   _show = _$.state(3, (_scope, show) => {
     _show_effect(_scope), _if(_scope, show ? _ifBody : null);
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-same-scope/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-same-scope/__snapshots__/dom.expected/template.js
index b6ae58c6e0..87423a7cda 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-same-scope/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-same-scope/__snapshots__/dom.expected/template.js
@@ -13,15 +13,11 @@ const _setup$ifBody = _scope => {
 };
 const _ifBody = _$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-same-scope/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer("
    a
    b
    c
    ", "", _setup$ifBody));
 const _if = /* @__PURE__ */_$.conditional("#text/2", 0);
-const _onClick = _scope => {
-  const {
-    show
-  } = _scope;
-  return function () {
-    _show(_scope, !show);
-  };
-};
-const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-same-scope/template.marko_0_show", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-same-scope/template.marko_0_show", (_scope, {
+  show
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _show(_scope, !show);
+}));
 const _show = /* @__PURE__ */_$.state("show", (_scope, show) => {
   _show_effect(_scope);
   _if(_scope, show ? _ifBody : null);
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-shallow/__snapshots__/dom.expected/components/child.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-shallow/__snapshots__/dom.expected/components/child.js
index 3e8641c926..d6afb19dd5 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-shallow/__snapshots__/dom.expected/components/child.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-shallow/__snapshots__/dom.expected/components/child.js
@@ -2,20 +2,13 @@ export const _template_ = "
    a
    b
    c
    ";
 export const _walks_ = /* over(3) */"d";
 export const _setup_ = () => {};
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _effect = _scope => {
-  const {
-    input
-  } = _scope;
-  return () => {
+const _input__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-shallow/components/child.marko_0_input", (_scope, {
+  input
+}) => {
+  input.write('mounted');
+  _$.getAbortSignal(_scope, 0).onabort = () => {
     input.write('destroyed');
   };
-};
-const _input__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-shallow/components/child.marko_0_input", _scope => {
-  const {
-    input
-  } = _scope;
-  input.write('mounted');
-  _$.getAbortSignal(_scope, 0).onabort = _effect(_scope);
 });
 export const _input_ = /* @__PURE__ */_$.value("input", (_scope, input) => {
   _$.resetAbortSignal(_scope, 0);
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-shallow/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-shallow/__snapshots__/dom.expected/template.hydrate.js
index bb63b866ac..f8dd4b8d63 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-shallow/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-shallow/__snapshots__/dom.expected/template.hydrate.js
@@ -1,24 +1,13 @@
-// size: 531 (min) 293 (brotli)
-const _input__effect = _$.effect("a0", (_scope) => {
-    const { 1: input } = _scope;
+// size: 493 (min) 288 (brotli)
+const _input__effect = _$.effect("a0", (_scope, { 1: input }) => {
     input.write("mounted"),
-      (_$.getAbortSignal(_scope, 0).onabort = ((_scope) => {
-        const { 1: input } = _scope;
-        return () => {
-          input.write("destroyed");
-        };
-      })(_scope));
+      (_$.getAbortSignal(_scope, 0).onabort = () => {
+        input.write("destroyed");
+      });
   }),
   _input_ = _$.value(1, (_scope, input) => {
     _$.resetAbortSignal(_scope, 0), _input__effect(_scope);
   }),
-  _write = _$.register(
-    "b0",
-    (_scope) =>
-      function (state) {
-        _scope._[1].innerHTML = state;
-      },
-  ),
   _setup$ifBody = (_scope) => {
     _scope[0], _input_(_scope[0], { write: _write(_scope) });
   },
@@ -31,19 +20,17 @@ const _input__effect = _$.effect("a0", (_scope) => {
     ),
   ),
   _if = _$.conditional(2, 0),
-  _show_effect = _$.effect("b2", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 3: show } = _scope;
-        return function () {
-          _show(_scope, !show);
-        };
-      })(_scope),
-    ),
+  _show_effect = _$.effect("b2", (_scope, { 3: show }) =>
+    _$.on(_scope[0], "click", function () {
+      _show(_scope, !show);
+    }),
   ),
   _show = _$.state(3, (_scope, show) => {
     _show_effect(_scope), _if(_scope, show ? _ifBody : null);
   });
-init();
+function _write(_scope) {
+  return function (state) {
+    _scope._[1].innerHTML = state;
+  };
+}
+_$.register("b0", _write), init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-shallow/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-shallow/__snapshots__/dom.expected/template.js
index 94592eb108..c5d968d7e5 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-shallow/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-shallow/__snapshots__/dom.expected/template.js
@@ -1,9 +1,6 @@
 export const _template_ = "
    ";
 export const _walks_ = /* get, over(1), get, over(1), replace, over(1) */" b b%bD";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _write = _$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-shallow/template.marko_1/write", _scope => function (state) {
-  _scope._["#div/1"].innerHTML = state;
-});
 import { _setup_ as _child, _input_ as _child_input, _template_ as _child_template, _walks_ as _child_walks } from "./components/child.marko";
 const _setup$ifBody = _scope => {
   _child(_scope["#childScope/0"]);
@@ -13,15 +10,11 @@ const _setup$ifBody = _scope => {
 };
 const _ifBody = _$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-shallow/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer(`${_child_template}`, /* beginChild, _child_walks, endChild */`/${_child_walks}&`, _setup$ifBody));
 const _if = /* @__PURE__ */_$.conditional("#text/2", 0);
-const _onClick = _scope => {
-  const {
-    show
-  } = _scope;
-  return function () {
-    _show(_scope, !show);
-  };
-};
-const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-shallow/template.marko_0_show", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-shallow/template.marko_0_show", (_scope, {
+  show
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _show(_scope, !show);
+}));
 const _show = /* @__PURE__ */_$.state("show", (_scope, show) => {
   _show_effect(_scope);
   _if(_scope, show ? _ifBody : null);
@@ -29,4 +22,10 @@ const _show = /* @__PURE__ */_$.state("show", (_scope, show) => {
 export function _setup_(_scope) {
   _show(_scope, true);
 }
+function _write(_scope) {
+  return function (state) {
+    _scope._["#div/1"].innerHTML = state;
+  };
+}
+_$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-shallow/template.marko_1/write", _write);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-if-shallow/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/__snapshots__/dom.expected/components/child.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/__snapshots__/dom.expected/components/child.js
index cd5d9f262c..0828529361 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/__snapshots__/dom.expected/components/child.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/__snapshots__/dom.expected/components/child.js
@@ -2,26 +2,11 @@ export const _template_ = "
     
    ";
 export const _walks_ = /* next(1), get, out(1) */"D l";
 export const _setup_ = () => {};
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _effect = _scope => {
-  const {
-    name,
-    write
-  } = _scope;
-  return () => {
-    write(`destroyed ${name}`);
-  };
-};
-const _expr_name_write_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/components/child.marko_0_name_write", _scope => {
-  const {
-    name,
-    write
-  } = _scope;
-  // TODO: In SSR this effect will be resumed depth first while CSR will be
-  // queued breadth first so the output will be different. Figure out if we
-  // care and then restore the `write` call below.
-
-  // write(`mounted ${name}`);
-  _$.getAbortSignal(_scope, 0).onabort = _effect(_scope);
+const _expr_name_write_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/components/child.marko_0_name_write", (_scope, {
+  name,
+  write
+}) => _$.getAbortSignal(_scope, 0).onabort = () => {
+  write(`destroyed ${name}`);
 });
 const _expr_name_write = /* @__PURE__ */_$.intersection(2, _scope => {
   const {
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/__snapshots__/dom.expected/template.hydrate.js
index 60e50a4162..50f003894c 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/__snapshots__/dom.expected/template.hydrate.js
@@ -1,12 +1,11 @@
-// size: 1265 (min) 527 (brotli)
-const _expr_name_write_effect = _$.effect("a0", (_scope) => {
-    _$.getAbortSignal(_scope, 0).onabort = ((_scope) => {
-      const { 3: name, 4: write } = _scope;
-      return () => {
+// size: 1233 (min) 522 (brotli)
+const _expr_name_write_effect = _$.effect(
+    "a0",
+    (_scope, { 3: name, 4: write }) =>
+      (_$.getAbortSignal(_scope, 0).onabort = () => {
         write(`destroyed ${name}`);
-      };
-    })(_scope);
-  }),
+      }),
+  ),
   _expr_name_write = _$.intersection(2, (_scope) => {
     _$.resetAbortSignal(_scope, 0), _expr_name_write_effect(_scope);
   }),
@@ -15,15 +14,8 @@ const _expr_name_write_effect = _$.effect("a0", (_scope) => {
     3,
     (_scope, name) => _$.data(_scope[0], name),
     () => _expr_name_write,
-  );
-_$.register(
-  "b0",
-  (_scope) =>
-    function (msg) {
-      _scope[1].innerHTML += "\n" + msg;
-    },
-);
-const _expr_outerItem_middleItem$forBody = _$.intersection(
+  ),
+  _expr_outerItem_middleItem$forBody = _$.intersection(
     2,
     (_scope) => {
       const {
@@ -110,17 +102,10 @@ const _expr_outerItem_middleItem$forBody = _$.intersection(
     ),
   ),
   _for = _$.loopOf(2, _forBody),
-  _items_effect = _$.effect("b3", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 3: items } = _scope;
-        return function () {
-          _items(_scope, items.length ? items.slice(0, -1) : [1, 2, 3]);
-        };
-      })(_scope),
-    ),
+  _items_effect = _$.effect("b3", (_scope, { 3: items }) =>
+    _$.on(_scope[0], "click", function () {
+      _items(_scope, items.length ? items.slice(0, -1) : [1, 2, 3]);
+    }),
   ),
   _items = _$.state(
     3,
@@ -129,4 +114,9 @@ const _expr_outerItem_middleItem$forBody = _$.intersection(
     },
     () => _$.intersections([_for, _$.inLoopScope(_items$forBody, 2)]),
   );
-init();
+_$.register("b0", function (_scope) {
+  return function (msg) {
+    _scope[1].innerHTML += "\n" + msg;
+  };
+}),
+  init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/__snapshots__/dom.expected/template.js
index f9fffe5366..7fa6c766fe 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/__snapshots__/dom.expected/template.js
@@ -1,9 +1,6 @@
 export const _template_ = "
    ";
 export const _walks_ = /* get, over(1), get, over(1), replace, over(1) */" b b%bD";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _write = _$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/template.marko_0/write", _scope => function (msg) {
-  _scope["#div/1"].innerHTML += '\n' + msg;
-});
 import { _setup_ as _child, _write_ as _child_input_write, _name_ as _child_input_name, _template_ as _child_template, _walks_ as _child_walks } from "./components/child.marko";
 const _expr_outerItem_middleItem$forBody = /* @__PURE__ */_$.intersection(2, _scope => {
   const {
@@ -32,22 +29,24 @@ const _setup$forBody = _scope => {
 };
 const _forBody = _$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer(`
    ${_child_template}
    `, /* next(1), beginChild, _child_walks, endChild, replace */`D/${_child_walks}&%`, _setup$forBody, () => [_write$forBody, _items$forBody], () => _params_2$forBody));
 const _for = /* @__PURE__ */_$.loopOf("#text/2", _forBody);
-const _write2 = /* @__PURE__ */_$.value("write", 0, () => _$.intersections([_$.inLoopScope(_write$forBody, "#text/2"), _$.dynamicSubscribers("write")]));
-const _onClick = _scope => {
-  const {
-    items
-  } = _scope;
-  return function () {
-    _items(_scope, items.length ? items.slice(0, -1) : [1, 2, 3]);
-  };
-};
-const _items_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/template.marko_0_items", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _write = /* @__PURE__ */_$.value("write", 0, () => _$.intersections([_$.inLoopScope(_write$forBody, "#text/2"), _$.dynamicSubscribers("write")]));
+const _items_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/template.marko_0_items", (_scope, {
+  items
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _items(_scope, items.length ? items.slice(0, -1) : [1, 2, 3]);
+}));
 const _items = /* @__PURE__ */_$.state("items", (_scope, items) => {
   _items_effect(_scope);
   _for(_scope, [items]);
 }, () => _$.intersections([_for, _$.inLoopScope(_items$forBody, "#text/2")]));
 export function _setup_(_scope) {
   _items(_scope, [1, 2, 3]);
-  _write2(_scope, _write(_scope));
+  _write(_scope, _write2(_scope));
+}
+function _write2(_scope) {
+  return function (msg) {
+    _scope["#div/1"].innerHTML += '\n' + msg;
+  };
 }
+_$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/template.marko_0/write", _write2);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/__snapshots__/dom.expected/components/child.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/__snapshots__/dom.expected/components/child.js
index 4fbe078fcb..bbe3b4f9a6 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/__snapshots__/dom.expected/components/child.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/__snapshots__/dom.expected/components/child.js
@@ -2,22 +2,14 @@ export const _template_ = "
     
    ";
 export const _walks_ = /* next(1), get, out(1) */"D l";
 export const _setup_ = () => {};
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _effect = _scope => {
-  const {
-    name,
-    write
-  } = _scope;
-  return () => {
+const _expr_name_write_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/components/child.marko_0_name_write", (_scope, {
+  name,
+  write
+}) => {
+  write(`mounted ${name}`);
+  _$.getAbortSignal(_scope, 0).onabort = () => {
     write(`destroyed ${name}`);
   };
-};
-const _expr_name_write_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/components/child.marko_0_name_write", _scope => {
-  const {
-    name,
-    write
-  } = _scope;
-  write(`mounted ${name}`);
-  _$.getAbortSignal(_scope, 0).onabort = _effect(_scope);
 });
 const _expr_name_write = /* @__PURE__ */_$.intersection(2, _scope => {
   const {
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/__snapshots__/dom.expected/template.hydrate.js
index a6d9274629..3d1d884669 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/__snapshots__/dom.expected/template.hydrate.js
@@ -1,14 +1,13 @@
-// size: 774 (min) 395 (brotli)
-const _expr_name_write_effect = _$.effect("a0", (_scope) => {
-    const { 3: name, 4: write } = _scope;
-    write(`mounted ${name}`),
-      (_$.getAbortSignal(_scope, 0).onabort = ((_scope) => {
-        const { 3: name, 4: write } = _scope;
-        return () => {
+// size: 727 (min) 383 (brotli)
+const _expr_name_write_effect = _$.effect(
+    "a0",
+    (_scope, { 3: name, 4: write }) => {
+      write(`mounted ${name}`),
+        (_$.getAbortSignal(_scope, 0).onabort = () => {
           write(`destroyed ${name}`);
-        };
-      })(_scope));
-  }),
+        });
+    },
+  ),
   _expr_name_write = _$.intersection(2, (_scope) => {
     _$.resetAbortSignal(_scope, 0), _expr_name_write_effect(_scope);
   }),
@@ -17,15 +16,8 @@ const _expr_name_write_effect = _$.effect("a0", (_scope) => {
     3,
     (_scope, name) => _$.data(_scope[0], name),
     () => _expr_name_write,
-  );
-_$.register(
-  "b0",
-  (_scope) =>
-    function (msg) {
-      _scope[1].innerHTML += "\n" + msg;
-    },
-);
-const _write$forBody = _$.closure(
+  ),
+  _write$forBody = _$.closure(
     4,
     (_scope, write) => _write_(_scope[0], write),
     void 0,
@@ -55,17 +47,10 @@ const _write$forBody = _$.closure(
     ),
   ),
   _for = _$.loopOf(2, _forBody),
-  _items_effect = _$.effect("b2", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 3: items } = _scope;
-        return function () {
-          _items(_scope, items.length ? items.slice(0, -1) : [1, 2, 3]);
-        };
-      })(_scope),
-    ),
+  _items_effect = _$.effect("b2", (_scope, { 3: items }) =>
+    _$.on(_scope[0], "click", function () {
+      _items(_scope, items.length ? items.slice(0, -1) : [1, 2, 3]);
+    }),
   ),
   _items = _$.state(
     3,
@@ -74,4 +59,9 @@ const _write$forBody = _$.closure(
     },
     () => _for,
   );
-init();
+_$.register("b0", function (_scope) {
+  return function (msg) {
+    _scope[1].innerHTML += "\n" + msg;
+  };
+}),
+  init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/__snapshots__/dom.expected/template.js
index 38eeb9a3de..0280b1bb67 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/__snapshots__/dom.expected/template.js
@@ -1,9 +1,6 @@
 export const _template_ = "
    ";
 export const _walks_ = /* get, over(1), get, over(1), replace, over(1) */" b b%bD";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _write = _$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/template.marko_0/write", _scope => function (msg) {
-  _scope["#div/1"].innerHTML += '\n' + msg;
-});
 import { _setup_ as _child, _write_ as _child_input_write, _name_ as _child_input_name, _template_ as _child_template, _walks_ as _child_walks } from "./components/child.marko";
 const _write$forBody = /* @__PURE__ */_$.closure("write", (_scope, write) => _child_input_write(_scope["#childScope/0"], write), void 0, () => _$.inChild("#childScope/0", _child_input_write));
 const _item$forBody = /* @__PURE__ */_$.value("item", (_scope, item) => _child_input_name(_scope["#childScope/0"], item), () => _$.inChild("#childScope/0", _child_input_name));
@@ -13,22 +10,24 @@ const _setup$forBody = _scope => {
 };
 const _forBody = _$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer(`${_child_template}`, /* beginChild, _child_walks, endChild */`/${_child_walks}&`, _setup$forBody, () => [_write$forBody], () => _params_2$forBody));
 const _for = /* @__PURE__ */_$.loopOf("#text/2", _forBody);
-const _write2 = /* @__PURE__ */_$.value("write", 0, () => _$.inLoopScope(_write$forBody, "#text/2"));
-const _onClick = _scope => {
-  const {
-    items
-  } = _scope;
-  return function () {
-    _items(_scope, items.length ? items.slice(0, -1) : [1, 2, 3]);
-  };
-};
-const _items_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/template.marko_0_items", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _write = /* @__PURE__ */_$.value("write", 0, () => _$.inLoopScope(_write$forBody, "#text/2"));
+const _items_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/template.marko_0_items", (_scope, {
+  items
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _items(_scope, items.length ? items.slice(0, -1) : [1, 2, 3]);
+}));
 const _items = /* @__PURE__ */_$.state("items", (_scope, items) => {
   _items_effect(_scope);
   _for(_scope, [items]);
 }, () => _for);
 export function _setup_(_scope) {
   _items(_scope, [1, 2, 3]);
-  _write2(_scope, _write(_scope));
+  _write(_scope, _write2(_scope));
+}
+function _write2(_scope) {
+  return function (msg) {
+    _scope["#div/1"].innerHTML += '\n' + msg;
+  };
 }
+_$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/template.marko_0/write", _write2);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/__snapshots__/dom.expected/components/child.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/__snapshots__/dom.expected/components/child.js
index 5076f865e4..c77a056c58 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/__snapshots__/dom.expected/components/child.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/__snapshots__/dom.expected/components/child.js
@@ -2,22 +2,14 @@ export const _template_ = "
     
    ";
 export const _walks_ = /* next(1), get, out(1) */"D l";
 export const _setup_ = () => {};
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _effect = _scope => {
-  const {
-    name,
-    write
-  } = _scope;
-  return () => {
+const _expr_name_write_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/components/child.marko_0_name_write", (_scope, {
+  name,
+  write
+}) => {
+  write(`${name} mounted`);
+  _$.getAbortSignal(_scope, 0).onabort = () => {
     write(`${name} destroyed`);
   };
-};
-const _expr_name_write_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/components/child.marko_0_name_write", _scope => {
-  const {
-    name,
-    write
-  } = _scope;
-  write(`${name} mounted`);
-  _$.getAbortSignal(_scope, 0).onabort = _effect(_scope);
 });
 const _expr_name_write = /* @__PURE__ */_$.intersection(2, _scope => {
   const {
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/__snapshots__/dom.expected/template.hydrate.js
index 8a2e08468b..139ffd77d8 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/__snapshots__/dom.expected/template.hydrate.js
@@ -1,14 +1,13 @@
-// size: 1528 (min) 542 (brotli)
-const _expr_name_write_effect = _$.effect("a0", (_scope) => {
-    const { 3: name, 4: write } = _scope;
-    write(`${name} mounted`),
-      (_$.getAbortSignal(_scope, 0).onabort = ((_scope) => {
-        const { 3: name, 4: write } = _scope;
-        return () => {
+// size: 1441 (min) 521 (brotli)
+const _expr_name_write_effect = _$.effect(
+    "a0",
+    (_scope, { 3: name, 4: write }) => {
+      write(`${name} mounted`),
+        (_$.getAbortSignal(_scope, 0).onabort = () => {
           write(`${name} destroyed`);
-        };
-      })(_scope));
-  }),
+        });
+    },
+  ),
   _expr_name_write = _$.intersection(2, (_scope) => {
     _$.resetAbortSignal(_scope, 0), _expr_name_write_effect(_scope);
   }),
@@ -17,15 +16,8 @@ const _expr_name_write_effect = _$.effect("a0", (_scope) => {
     3,
     (_scope, name) => _$.data(_scope[0], name),
     () => _expr_name_write,
-  );
-_$.register(
-  "b0",
-  (_scope) =>
-    function (msg) {
-      _scope[3].innerHTML += "\n" + msg;
-    },
-);
-const _write$ifBody3 = _$.dynamicClosure(
+  ),
+  _write$ifBody3 = _$.dynamicClosure(
     8,
     (_scope, write) => _write_(_scope[0], write),
     (_scope) => _scope._._._,
@@ -94,51 +86,30 @@ const _write$ifBody3 = _$.dynamicClosure(
     ),
   ),
   _if = _$.conditional(4, 0),
-  _showInner_effect = _$.effect("b5", (_scope) =>
-    _$.on(
-      _scope[2],
-      "click",
-      ((_scope) => {
-        const { 7: showInner } = _scope;
-        return function () {
-          _showInner(_scope, !showInner);
-        };
-      })(_scope),
-    ),
+  _showInner_effect = _$.effect("b5", (_scope, { 7: showInner }) =>
+    _$.on(_scope[2], "click", function () {
+      _showInner(_scope, !showInner);
+    }),
   ),
   _showInner = _$.state(
     7,
     (_scope, showInner) => _showInner_effect(_scope),
     () => _$.dynamicSubscribers(7),
   ),
-  _showMiddle_effect = _$.effect("b6", (_scope) =>
-    _$.on(
-      _scope[1],
-      "click",
-      ((_scope) => {
-        const { 6: showMiddle } = _scope;
-        return function () {
-          _showMiddle(_scope, !showMiddle);
-        };
-      })(_scope),
-    ),
+  _showMiddle_effect = _$.effect("b6", (_scope, { 6: showMiddle }) =>
+    _$.on(_scope[1], "click", function () {
+      _showMiddle(_scope, !showMiddle);
+    }),
   ),
   _showMiddle = _$.state(
     6,
     (_scope, showMiddle) => _showMiddle_effect(_scope),
     () => _$.inConditionalScope(_showMiddle$ifBody, 4),
   ),
-  _showOuter_effect = _$.effect("b7", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 5: showOuter } = _scope;
-        return function () {
-          _showOuter(_scope, !showOuter);
-        };
-      })(_scope),
-    ),
+  _showOuter_effect = _$.effect("b7", (_scope, { 5: showOuter }) =>
+    _$.on(_scope[0], "click", function () {
+      _showOuter(_scope, !showOuter);
+    }),
   ),
   _showOuter = _$.state(
     5,
@@ -147,4 +118,9 @@ const _write$ifBody3 = _$.dynamicClosure(
     },
     () => _if,
   );
-init();
+_$.register("b0", function (_scope) {
+  return function (msg) {
+    _scope[3].innerHTML += "\n" + msg;
+  };
+}),
+  init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/__snapshots__/dom.expected/template.js
index ac69b751d9..889aca0307 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/__snapshots__/dom.expected/template.js
@@ -1,9 +1,6 @@
 export const _template_ = "
    ";
 export const _walks_ = /* get, over(1), get, over(1), get, over(1), get, over(1), replace, over(1) */" b b b b%bD";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _write = _$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/template.marko_0/write", _scope => function (msg) {
-  _scope["#pre/3"].innerHTML += '\n' + msg;
-});
 import { _setup_ as _child, _write_ as _child_input_write, _name_ as _child_input_name, _template_ as _child_template, _walks_ as _child_walks } from "./components/child.marko";
 const _write$ifBody3 = /* @__PURE__ */_$.dynamicClosure("write", (_scope, write) => _child_input_write(_scope["#childScope/0"], write), _scope => _scope._._._, () => _$.inChild("#childScope/0", _child_input_write));
 const _setup$ifBody3 = _scope => {
@@ -28,36 +25,24 @@ const _setup$ifBody = _scope => {
 };
 const _ifBody = _$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer(`
    ${_child_template}
    `, /* next(1), beginChild, _child_walks, endChild, replace */`D/${_child_walks}&%`, _setup$ifBody, () => [_write$ifBody, _showMiddle$ifBody]));
 const _if = /* @__PURE__ */_$.conditional("#text/4", 0);
-const _write2 = /* @__PURE__ */_$.value("write", 0, () => _$.intersections([_$.inConditionalScope(_write$ifBody, "#text/4"), _$.dynamicSubscribers("write")]));
-const _onClick = _scope => {
-  const {
-    showInner
-  } = _scope;
-  return function () {
-    _showInner(_scope, !showInner);
-  };
-};
-const _showInner_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/template.marko_0_showInner", _scope => _$.on(_scope["#button/2"], "click", _onClick(_scope)));
+const _write = /* @__PURE__ */_$.value("write", 0, () => _$.intersections([_$.inConditionalScope(_write$ifBody, "#text/4"), _$.dynamicSubscribers("write")]));
+const _showInner_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/template.marko_0_showInner", (_scope, {
+  showInner
+}) => _$.on(_scope["#button/2"], "click", function () {
+  _showInner(_scope, !showInner);
+}));
 const _showInner = /* @__PURE__ */_$.state("showInner", (_scope, showInner) => _showInner_effect(_scope), () => _$.dynamicSubscribers("showInner"));
-const _onClick2 = _scope => {
-  const {
-    showMiddle
-  } = _scope;
-  return function () {
-    _showMiddle(_scope, !showMiddle);
-  };
-};
-const _showMiddle_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/template.marko_0_showMiddle", _scope => _$.on(_scope["#button/1"], "click", _onClick2(_scope)));
+const _showMiddle_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/template.marko_0_showMiddle", (_scope, {
+  showMiddle
+}) => _$.on(_scope["#button/1"], "click", function () {
+  _showMiddle(_scope, !showMiddle);
+}));
 const _showMiddle = /* @__PURE__ */_$.state("showMiddle", (_scope, showMiddle) => _showMiddle_effect(_scope), () => _$.inConditionalScope(_showMiddle$ifBody, "#text/4"));
-const _onClick3 = _scope => {
-  const {
-    showOuter
-  } = _scope;
-  return function () {
-    _showOuter(_scope, !showOuter);
-  };
-};
-const _showOuter_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/template.marko_0_showOuter", _scope => _$.on(_scope["#button/0"], "click", _onClick3(_scope)));
+const _showOuter_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/template.marko_0_showOuter", (_scope, {
+  showOuter
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _showOuter(_scope, !showOuter);
+}));
 const _showOuter = /* @__PURE__ */_$.state("showOuter", (_scope, showOuter) => {
   _showOuter_effect(_scope);
   _if(_scope, showOuter ? _ifBody : null);
@@ -66,6 +51,12 @@ export function _setup_(_scope) {
   _showOuter(_scope, true);
   _showMiddle(_scope, true);
   _showInner(_scope, true);
-  _write2(_scope, _write(_scope));
+  _write(_scope, _write2(_scope));
+}
+function _write2(_scope) {
+  return function (msg) {
+    _scope["#pre/3"].innerHTML += '\n' + msg;
+  };
 }
+_$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/template.marko_0/write", _write2);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-deep/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-same-scope/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-same-scope/__snapshots__/dom.expected/template.hydrate.js
index bad938cabc..a12f0b00af 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-same-scope/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-same-scope/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 384 (min) 224 (brotli)
+// size: 364 (min) 217 (brotli)
 const _setup$ifBody_effect = _$.effect("a0", (_scope) => {
     (_scope._[1].innerHTML += "\nmounted"),
       (_$.getAbortSignal(_scope, 0).onabort = () => {
@@ -13,17 +13,10 @@ const _setup$ifBody_effect = _$.effect("a0", (_scope) => {
     _$.createRenderer("
    child
    ", "", _setup$ifBody),
   ),
   _if = _$.conditional(2, 0),
-  _show_effect = _$.effect("a2", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 3: show } = _scope;
-        return function () {
-          _show(_scope, !show);
-        };
-      })(_scope),
-    ),
+  _show_effect = _$.effect("a2", (_scope, { 3: show }) =>
+    _$.on(_scope[0], "click", function () {
+      _show(_scope, !show);
+    }),
   ),
   _show = _$.state(3, (_scope, show) => {
     _show_effect(_scope), _if(_scope, show ? _ifBody : null);
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-same-scope/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-same-scope/__snapshots__/dom.expected/template.js
index 3e2dbc8668..ba5728c2fb 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-same-scope/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-same-scope/__snapshots__/dom.expected/template.js
@@ -13,15 +13,11 @@ const _setup$ifBody = _scope => {
 };
 const _ifBody = _$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-same-scope/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer("
    child
    ", "", _setup$ifBody));
 const _if = /* @__PURE__ */_$.conditional("#text/2", 0);
-const _onClick = _scope => {
-  const {
-    show
-  } = _scope;
-  return function () {
-    _show(_scope, !show);
-  };
-};
-const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-same-scope/template.marko_0_show", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-same-scope/template.marko_0_show", (_scope, {
+  show
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _show(_scope, !show);
+}));
 const _show = /* @__PURE__ */_$.state("show", (_scope, show) => {
   _show_effect(_scope);
   _if(_scope, show ? _ifBody : null);
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-shallow/__snapshots__/dom.expected/components/child.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-shallow/__snapshots__/dom.expected/components/child.js
index 4fbe1dd05e..6f57623308 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-shallow/__snapshots__/dom.expected/components/child.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-shallow/__snapshots__/dom.expected/components/child.js
@@ -2,20 +2,13 @@ export const _template_ = "
    child
    ";
 export const _walks_ = /* over(1) */"b";
 export const _setup_ = () => {};
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _effect = _scope => {
-  const {
-    input
-  } = _scope;
-  return () => {
+const _input__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-shallow/components/child.marko_0_input", (_scope, {
+  input
+}) => {
+  input.write('mounted');
+  _$.getAbortSignal(_scope, 0).onabort = () => {
     input.write('destroyed');
   };
-};
-const _input__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-shallow/components/child.marko_0_input", _scope => {
-  const {
-    input
-  } = _scope;
-  input.write('mounted');
-  _$.getAbortSignal(_scope, 0).onabort = _effect(_scope);
 });
 export const _input_ = /* @__PURE__ */_$.value("input", (_scope, input) => {
   _$.resetAbortSignal(_scope, 0);
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-shallow/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-shallow/__snapshots__/dom.expected/template.hydrate.js
index 14d90be790..7481508e9f 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-shallow/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-shallow/__snapshots__/dom.expected/template.hydrate.js
@@ -1,24 +1,13 @@
-// size: 513 (min) 285 (brotli)
-const _input__effect = _$.effect("a0", (_scope) => {
-    const { 1: input } = _scope;
+// size: 475 (min) 271 (brotli)
+const _input__effect = _$.effect("a0", (_scope, { 1: input }) => {
     input.write("mounted"),
-      (_$.getAbortSignal(_scope, 0).onabort = ((_scope) => {
-        const { 1: input } = _scope;
-        return () => {
-          input.write("destroyed");
-        };
-      })(_scope));
+      (_$.getAbortSignal(_scope, 0).onabort = () => {
+        input.write("destroyed");
+      });
   }),
   _input_ = _$.value(1, (_scope, input) => {
     _$.resetAbortSignal(_scope, 0), _input__effect(_scope);
   }),
-  _write = _$.register(
-    "b0",
-    (_scope) =>
-      function (state) {
-        _scope._[1].innerHTML = state;
-      },
-  ),
   _setup$ifBody = (_scope) => {
     _scope[0], _input_(_scope[0], { write: _write(_scope) });
   },
@@ -27,19 +16,17 @@ const _input__effect = _$.effect("a0", (_scope) => {
     _$.createRenderer("
    child
    ", "/b&", _setup$ifBody),
   ),
   _if = _$.conditional(2, 0),
-  _show_effect = _$.effect("b2", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 3: show } = _scope;
-        return function () {
-          _show(_scope, !show);
-        };
-      })(_scope),
-    ),
+  _show_effect = _$.effect("b2", (_scope, { 3: show }) =>
+    _$.on(_scope[0], "click", function () {
+      _show(_scope, !show);
+    }),
   ),
   _show = _$.state(3, (_scope, show) => {
     _show_effect(_scope), _if(_scope, show ? _ifBody : null);
   });
-init();
+function _write(_scope) {
+  return function (state) {
+    _scope._[1].innerHTML = state;
+  };
+}
+_$.register("b0", _write), init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-shallow/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-shallow/__snapshots__/dom.expected/template.js
index bead3204f5..69df12f9c8 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-shallow/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-shallow/__snapshots__/dom.expected/template.js
@@ -1,9 +1,6 @@
 export const _template_ = "
    ";
 export const _walks_ = /* get, over(1), get, over(1), replace, over(1) */" b b%bD";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _write = _$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-shallow/template.marko_1/write", _scope => function (state) {
-  _scope._["#div/1"].innerHTML = state;
-});
 import { _setup_ as _child, _input_ as _child_input, _template_ as _child_template, _walks_ as _child_walks } from "./components/child.marko";
 const _setup$ifBody = _scope => {
   _child(_scope["#childScope/0"]);
@@ -13,15 +10,11 @@ const _setup$ifBody = _scope => {
 };
 const _ifBody = _$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-shallow/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer(`${_child_template}`, /* beginChild, _child_walks, endChild */`/${_child_walks}&`, _setup$ifBody));
 const _if = /* @__PURE__ */_$.conditional("#text/2", 0);
-const _onClick = _scope => {
-  const {
-    show
-  } = _scope;
-  return function () {
-    _show(_scope, !show);
-  };
-};
-const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-shallow/template.marko_0_show", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-shallow/template.marko_0_show", (_scope, {
+  show
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _show(_scope, !show);
+}));
 const _show = /* @__PURE__ */_$.state("show", (_scope, show) => {
   _show_effect(_scope);
   _if(_scope, show ? _ifBody : null);
@@ -29,4 +22,10 @@ const _show = /* @__PURE__ */_$.state("show", (_scope, show) => {
 export function _setup_(_scope) {
   _show(_scope, true);
 }
+function _write(_scope) {
+  return function (state) {
+    _scope._["#div/1"].innerHTML = state;
+  };
+}
+_$.register("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-shallow/template.marko_1/write", _write);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-if-shallow/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/component-attrs-import-value/__snapshots__/dom.expected/components/counter.js b/packages/translator-tags/src/__tests__/fixtures/component-attrs-import-value/__snapshots__/dom.expected/components/counter.js
index ad254c345c..b62804d1d9 100644
--- a/packages/translator-tags/src/__tests__/fixtures/component-attrs-import-value/__snapshots__/dom.expected/components/counter.js
+++ b/packages/translator-tags/src/__tests__/fixtures/component-attrs-import-value/__snapshots__/dom.expected/components/counter.js
@@ -8,15 +8,11 @@ const _expr_input_count = /* @__PURE__ */_$.intersection(2, _scope => {
   } = _scope;
   _$.data(_scope["#text/1"], input.format(count));
 });
-const _onClick = _scope => {
-  const {
-    count
-  } = _scope;
-  return function () {
-    _count(_scope, count + 1);
-  };
-};
-const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/component-attrs-import-value/components/counter.marko_0_count", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/component-attrs-import-value/components/counter.marko_0_count", (_scope, {
+  count
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _count(_scope, count + 1), count;
+}));
 const _count = /* @__PURE__ */_$.state("count", (_scope, count) => _count_effect(_scope), () => _expr_input_count);
 export const _input_ = /* @__PURE__ */_$.value("input", 0, () => _expr_input_count);
 export const _params__ = /* @__PURE__ */_$.value("_params_", (_scope, _params_) => _input_(_scope, _params_[0]), () => _input_);
diff --git a/packages/translator-tags/src/__tests__/fixtures/component-attrs-intersection/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/component-attrs-intersection/__snapshots__/dom.expected/template.hydrate.js
index 59f4eb8ccf..aa1a2ca6ec 100644
--- a/packages/translator-tags/src/__tests__/fixtures/component-attrs-intersection/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/component-attrs-intersection/__snapshots__/dom.expected/template.hydrate.js
@@ -1,20 +1,13 @@
-// size: 244 (min) 161 (brotli)
+// size: 224 (min) 162 (brotli)
 const _expr_value_dummy = _$.intersection(2, (_scope) => {
     const { 3: value, 4: dummy } = _scope;
     _$.data(_scope[0], value);
   }),
   _value_ = _$.value(3, 0, () => _expr_value_dummy),
-  _count_effect = _$.effect("b0", (_scope) =>
-    _$.on(
-      _scope[1],
-      "click",
-      ((_scope) => {
-        const { 2: count } = _scope;
-        return function () {
-          _count(_scope, count + 1);
-        };
-      })(_scope),
-    ),
+  _count_effect = _$.effect("b0", (_scope, { 2: count }) =>
+    _$.on(_scope[1], "click", function () {
+      _count(_scope, count + 1);
+    }),
   ),
   _count = _$.state(
     2,
diff --git a/packages/translator-tags/src/__tests__/fixtures/component-attrs-intersection/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/component-attrs-intersection/__snapshots__/dom.expected/template.js
index 78708cc031..c229eb4cb6 100644
--- a/packages/translator-tags/src/__tests__/fixtures/component-attrs-intersection/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/component-attrs-intersection/__snapshots__/dom.expected/template.js
@@ -2,15 +2,11 @@ export const _template_ = `${_displayIntersection_template}`;
 export const _walks_ = /* beginChild, _displayIntersection_walks, endChild, get, over(1) */`/${_displayIntersection_walks}& b`;
 import { _setup_ as _displayIntersection, _value_ as _displayIntersection_input_value, _template_ as _displayIntersection_template, _walks_ as _displayIntersection_walks } from "./components/display-intersection.marko";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _onClick = _scope => {
-  const {
-    count
-  } = _scope;
-  return function () {
-    _count(_scope, count + 1);
-  };
-};
-const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/component-attrs-intersection/template.marko_0_count", _scope => _$.on(_scope["#button/1"], "click", _onClick(_scope)));
+const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/component-attrs-intersection/template.marko_0_count", (_scope, {
+  count
+}) => _$.on(_scope["#button/1"], "click", function () {
+  _count(_scope, count + 1), count;
+}));
 const _count = /* @__PURE__ */_$.state("count", (_scope, count) => {
   _count_effect(_scope);
   _displayIntersection_input_value(_scope["#childScope/0"], count);
diff --git a/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/dom.expected/components/counter.js b/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/dom.expected/components/counter.js
index a8cc6cc487..72e9ccf528 100644
--- a/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/dom.expected/components/counter.js
+++ b/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/dom.expected/components/counter.js
@@ -8,15 +8,11 @@ const _expr_input_count = /* @__PURE__ */_$.intersection(2, _scope => {
   } = _scope;
   _$.data(_scope["#text/1"], input.format(count));
 });
-const _onClick = _scope => {
-  const {
-    count
-  } = _scope;
-  return function () {
-    _count(_scope, count + 1);
-  };
-};
-const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/components/counter.marko_0_count", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/components/counter.marko_0_count", (_scope, {
+  count
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _count(_scope, count + 1), count;
+}));
 const _count = /* @__PURE__ */_$.state("count", (_scope, count) => _count_effect(_scope), () => _expr_input_count);
 export const _input_ = /* @__PURE__ */_$.value("input", 0, () => _expr_input_count);
 export const _params__ = /* @__PURE__ */_$.value("_params_", (_scope, _params_) => _input_(_scope, _params_[0]), () => _input_);
diff --git a/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/dom.expected/template.hydrate.js
index d5c64d7aec..1f58bdaa0a 100644
--- a/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/dom.expected/template.hydrate.js
@@ -1,27 +1,22 @@
-// size: 300 (min) 185 (brotli)
+// size: 296 (min) 172 (brotli)
 const _expr_input_count = _$.intersection(2, (_scope) => {
     const { 3: input, 4: count } = _scope;
     _$.data(_scope[1], input.format(count));
   }),
-  _count_effect = _$.effect("a0", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 4: count } = _scope;
-        return function () {
-          _count(_scope, count + 1);
-        };
-      })(_scope),
-    ),
+  _count_effect = _$.effect("a0", (_scope, { 4: count }) =>
+    _$.on(_scope[0], "click", function () {
+      _count(_scope, count + 1);
+    }),
   ),
   _count = _$.state(
     4,
     (_scope, count) => _count_effect(_scope),
     () => _expr_input_count,
   );
-_$.register("b1", function (n) {
+_$.register("b0", function (n) {
   return "$" + n.toFixed(2);
 }),
-  _$.register("b0", (n) => "$" + n.toFixed(2)),
+  _$.register("b1", function (n) {
+    return "$" + n.toFixed(2);
+  }),
   init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/dom.expected/template.js
index 7b011fcdd7..b15cedf45c 100644
--- a/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/dom.expected/template.js
@@ -1,14 +1,9 @@
 export const _template_ = `${_counter_template}${_counter_template}`;
 export const _walks_ = /* beginChild, _counter_walks, endChild, beginChild, _counter_walks, endChild */`/${_counter_walks}&/${_counter_walks}&`;
-_$.register("packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/template.marko_0/formatNumber2", formatNumber2);
-const formatNumber = _$.register("packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/template.marko_0/anonymous", n => {
-  return "$" + n.toFixed(2);
-});
-function formatNumber2(n) {
-  return "$" + n.toFixed(2);
-}
-import * as _$ from "@marko/runtime-tags/debug/dom";
+const formatNumber = _formatNumber;
+const formatNumber2 = _formatNumber2;
 import { _setup_ as _counter, _input_ as _counter_input, _template_ as _counter_template, _walks_ as _counter_walks } from "./components/counter.marko";
+import * as _$ from "@marko/runtime-tags/debug/dom";
 export function _setup_(_scope) {
   _counter(_scope["#childScope/0"]);
   _counter(_scope["#childScope/1"]);
@@ -19,4 +14,12 @@ export function _setup_(_scope) {
     format: formatNumber2
   });
 }
+function _formatNumber(n) {
+  return "$" + n.toFixed(2);
+}
+function _formatNumber2(n) {
+  return "$" + n.toFixed(2);
+}
+_$.register("packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/template.marko_0/formatNumber", _formatNumber);
+_$.register("packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/template.marko_0/formatNumber2", _formatNumber2);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/html.expected/template.js
index 399d41fefd..c81520418d 100644
--- a/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/html.expected/template.js
@@ -1,14 +1,14 @@
 const formatNumber = _$.register(n => {
   return "$" + n.toFixed(2);
-}, "packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/template.marko_0/anonymous");
+}, "packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/template.marko_0/formatNumber");
 function formatNumber2(n) {
   return "$" + n.toFixed(2);
 }
-import * as _$ from "@marko/runtime-tags/debug/html";
+_$.register(formatNumber2, "packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/template.marko_0/formatNumber2");
 import _counter from "./components/counter.marko";
+import * as _$ from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _scope0_id = _$.nextScopeId();
-  _$.register(formatNumber2, "packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/template.marko_0/formatNumber2");
   const _childScope = _$.peekNextScope();
   _counter({
     format: formatNumber
diff --git a/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/resume.expected.md b/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/resume.expected.md
index 5f33e775c9..3ce74b4d6e 100644
--- a/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/resume.expected.md
+++ b/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/resume.expected.md
@@ -14,7 +14,7 @@
     
     
     
   
 
@@ -44,7 +44,7 @@ container.querySelectorAll("button").forEach(button => button.click())
     
     
     
   
 
diff --git a/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/ssr.expected.md b/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/ssr.expected.md
index 0e1e73c5a0..9aecde5419 100644
--- a/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/ssr.expected.md
+++ b/packages/translator-tags/src/__tests__/fixtures/component-attrs-static-code/__snapshots__/ssr.expected.md
@@ -1,5 +1,5 @@
 # Write
-  
+  
 
 
 # Render "End"
@@ -18,7 +18,7 @@
     
     
     
   
 
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-spread/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-spread/__snapshots__/dom.expected/template.hydrate.js
index 0a481aa8b6..e040586f4a 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-spread/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-spread/__snapshots__/dom.expected/template.hydrate.js
@@ -1,15 +1,8 @@
-// size: 267 (min) 173 (brotli)
+// size: 275 (min) 178 (brotli)
 const _input__effect = _$.effect("a0", (_scope) => _$.attrsEvents(_scope, 0)),
   _input_ = _$.value(2, (_scope, input) => {
     _$.attrs(_scope, 0, { type: "checkbox", ...input }), _input__effect(_scope);
   }),
-  _checkedChange = _$.register(
-    "b0",
-    (_scope) =>
-      function (_new_checked) {
-        _checked(_scope, _new_checked);
-      },
-  ),
   _checked = _$.state(
     2,
     (_scope, checked) => {
@@ -21,4 +14,9 @@ const _input__effect = _$.effect("a0", (_scope) => _$.attrsEvents(_scope, 0)),
     },
     () => _$.inChild(0, _input_),
   );
-init();
+function _checkedChange(_scope) {
+  return (_new_checked) => {
+    _checked(_scope, _new_checked);
+  };
+}
+_$.register("b0", _checkedChange), init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-spread/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-spread/__snapshots__/dom.expected/template.js
index 41beefabf8..3a31d333e6 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-spread/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-spread/__snapshots__/dom.expected/template.js
@@ -1,10 +1,7 @@
 export const _template_ = `${_checkbox_template} `;
 export const _walks_ = /* beginChild, _checkbox_walks, endChild, next(1), get, out(1) */`/${_checkbox_walks}&D l`;
-import * as _$ from "@marko/runtime-tags/debug/dom";
-const _checkedChange = _$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked-spread/template.marko_0/checkedChange", _scope => function (_new_checked) {
-  _checked(_scope, _new_checked);
-});
 import { _setup_ as _checkbox, _input_ as _checkbox_input, _template_ as _checkbox_template, _walks_ as _checkbox_walks } from "./components/checkbox.marko";
+import * as _$ from "@marko/runtime-tags/debug/dom";
 const _checked = /* @__PURE__ */_$.state("checked", (_scope, checked) => {
   _$.data(_scope["#text/1"], String(checked));
   _checkbox_input(_scope["#childScope/0"], {
@@ -16,4 +13,10 @@ export function _setup_(_scope) {
   _checkbox(_scope["#childScope/0"]);
   _checked(_scope, false);
 }
+function _checkedChange(_scope) {
+  return _new_checked => {
+    _checked(_scope, _new_checked);
+  };
+}
+_$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked-spread/template.marko_0/checkedChange", _checkedChange);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/controllable-checked-spread/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-spread/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-spread/__snapshots__/html.expected/template.js
index 4aab1fa0d1..998ad846de 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-spread/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-spread/__snapshots__/html.expected/template.js
@@ -1,12 +1,12 @@
-import * as _$ from "@marko/runtime-tags/debug/html";
 import _checkbox from "./components/checkbox.marko";
+import * as _$ from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _scope0_id = _$.nextScopeId();
   const checked = false;
   const _childScope = _$.peekNextScope();
   _checkbox({
     checked: checked,
-    checkedChange: _$.register(function (_new_checked) {
+    checkedChange: _$.register(_new_checked => {
       checked = _new_checked;
     }, "packages/translator-tags/src/__tests__/fixtures/controllable-checked-spread/template.marko_0/checkedChange", _scope0_id)
   });
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/dom.expected/template.hydrate.js
index bd710b9338..5a06a0a188 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/dom.expected/template.hydrate.js
@@ -1,52 +1,49 @@
-// size: 491 (min) 154 (brotli)
-const _checkedValueChange = _$.register(
-    "a0",
-    (_scope) =>
-      function (_new_checkedValue) {
-        _checkedValue(_scope, _new_checkedValue);
-      },
+// size: 515 (min) 163 (brotli)
+const _checkedValue = _$.state(4, (_scope, checkedValue) => {
+  _$.controllable_input_checkedValue(
+    _scope,
+    0,
+    checkedValue,
+    _checkedValueChange3(_scope),
+    "a",
   ),
-  _checkedValueChange2 = _$.register(
-    "a1",
-    (_scope) =>
-      function (_new_checkedValue2) {
-        _checkedValue(_scope, _new_checkedValue2);
-      },
-  ),
-  _checkedValueChange3 = _$.register(
-    "a1",
-    (_scope) =>
-      function (_new_checkedValue3) {
-        _checkedValue(_scope, _new_checkedValue3);
-      },
-  ),
-  _checkedValue = _$.state(4, (_scope, checkedValue) => {
     _$.controllable_input_checkedValue(
       _scope,
-      0,
+      1,
+      checkedValue,
+      _checkedValueChange2(_scope),
+      "b",
+    ),
+    _$.controllable_input_checkedValue(
+      _scope,
+      2,
       checkedValue,
       _checkedValueChange(_scope),
-      "a",
+      "c",
     ),
-      _$.controllable_input_checkedValue(
-        _scope,
-        1,
-        checkedValue,
-        _checkedValueChange2(_scope),
-        "b",
-      ),
-      _$.controllable_input_checkedValue(
-        _scope,
-        2,
-        checkedValue,
-        _checkedValueChange3(_scope),
-        "c",
-      ),
-      _$.data(_scope[3], checkedValue);
-  });
+    _$.data(_scope[3], checkedValue);
+});
+function _checkedValueChange(_scope) {
+  return (_new_checkedValue3) => {
+    _checkedValue(_scope, _new_checkedValue3);
+  };
+}
+function _checkedValueChange2(_scope) {
+  return (_new_checkedValue2) => {
+    _checkedValue(_scope, _new_checkedValue2);
+  };
+}
+function _checkedValueChange3(_scope) {
+  return (_new_checkedValue) => {
+    _checkedValue(_scope, _new_checkedValue);
+  };
+}
 _$.effect("a2", (_scope) => {
   _$.controllable_input_checkedValue_effect(_scope, 0),
     _$.controllable_input_checkedValue_effect(_scope, 1),
     _$.controllable_input_checkedValue_effect(_scope, 2);
 }),
+  _$.register("a1", _checkedValueChange),
+  _$.register("a1", _checkedValueChange2),
+  _$.register("a0", _checkedValueChange3),
   init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/dom.expected/template.js
index 1a84f2388d..ad2ea625da 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/dom.expected/template.js
@@ -1,19 +1,10 @@
 export const _template_ = " ";
 export const _walks_ = /* get, over(1), get, over(1), get, over(1), next(1), get, out(1) */" b b bD l";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _checkedValueChange = _$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/template.marko_0/checkedValueChange", _scope => function (_new_checkedValue) {
-  _checkedValue(_scope, _new_checkedValue);
-});
-const _checkedValueChange2 = _$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/template.marko_0/checkedValueChange_0", _scope => function (_new_checkedValue2) {
-  _checkedValue(_scope, _new_checkedValue2);
-});
-const _checkedValueChange3 = _$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/template.marko_0/checkedValueChange_0", _scope => function (_new_checkedValue3) {
-  _checkedValue(_scope, _new_checkedValue3);
-});
 const _checkedValue = /* @__PURE__ */_$.state("checkedValue", (_scope, checkedValue) => {
-  _$.controllable_input_checkedValue(_scope, "#input/0", checkedValue, _checkedValueChange(_scope), "a");
+  _$.controllable_input_checkedValue(_scope, "#input/0", checkedValue, _checkedValueChange3(_scope), "a");
   _$.controllable_input_checkedValue(_scope, "#input/1", checkedValue, _checkedValueChange2(_scope), "b");
-  _$.controllable_input_checkedValue(_scope, "#input/2", checkedValue, _checkedValueChange3(_scope), "c");
+  _$.controllable_input_checkedValue(_scope, "#input/2", checkedValue, _checkedValueChange(_scope), "c");
   _$.data(_scope["#text/3"], checkedValue);
 });
 const _setup__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/template.marko_0", _scope => {
@@ -25,4 +16,22 @@ export function _setup_(_scope) {
   _setup__effect(_scope);
   _checkedValue(_scope, "a");
 }
+function _checkedValueChange(_scope) {
+  return _new_checkedValue3 => {
+    _checkedValue(_scope, _new_checkedValue3);
+  };
+}
+function _checkedValueChange2(_scope) {
+  return _new_checkedValue2 => {
+    _checkedValue(_scope, _new_checkedValue2);
+  };
+}
+function _checkedValueChange3(_scope) {
+  return _new_checkedValue => {
+    _checkedValue(_scope, _new_checkedValue);
+  };
+}
+_$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/template.marko_0/checkedValueChange_0", _checkedValueChange);
+_$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/template.marko_0/checkedValueChange_0", _checkedValueChange2);
+_$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/template.marko_0/checkedValueChange", _checkedValueChange3);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/html.expected/template.js
index cb1188a06f..95c7cb22e9 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/html.expected/template.js
@@ -2,13 +2,16 @@ import * as _$ from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _scope0_id = _$.nextScopeId();
   const checkedValue = "a";
-  _$.write(` {
     checkedValue = _new_checkedValue;
-  }, "packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/template.marko_0/checkedValueChange", _scope0_id), "a")} type=radio>${_$.markResumeNode(_scope0_id, "#input/0")}${_$.markResumeNode(_scope0_id, "#input/0")} {
     checkedValue = _new_checkedValue2;
-  }, "packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/template.marko_0/checkedValueChange_0", _scope0_id), "b")} type=radio>${_$.markResumeNode(_scope0_id, "#input/1")}${_$.markResumeNode(_scope0_id, "#input/1")} {
     checkedValue = _new_checkedValue3;
   }, "packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/template.marko_0/checkedValueChange_0", _scope0_id), "c")} type=radio>${_$.markResumeNode(_scope0_id, "#input/2")}${_$.escapeXML(checkedValue)}${_$.markResumeNode(_scope0_id, "#text/3")}`);
   _$.writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/template.marko_0");
+  _$.writeScope(_scope0_id, {
+    "checkedValue": checkedValue
+  });
 });
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/template.marko", _renderer);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/resume.expected.md b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/resume.expected.md
index 1b45542352..d3f982f5c1 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/resume.expected.md
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/resume.expected.md
@@ -24,7 +24,7 @@
       
     
     
   
 
@@ -64,7 +64,7 @@ container.querySelectorAll(`input`)[1].click()
       
     
     
   
 
@@ -104,7 +104,7 @@ container.querySelectorAll(`input`)[2].click()
       
     
     
   
 
@@ -144,7 +144,7 @@ container.querySelectorAll(`input`)[0].click()
       
     
     
   
 
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/ssr.expected.md b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/ssr.expected.md
index fc91469cc6..e9de911c02 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/ssr.expected.md
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/ssr.expected.md
@@ -1,5 +1,5 @@
 # Write
-  a
+  a
 
 
 # Render "End"
@@ -28,7 +28,7 @@
       
     
     
   
 
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/__snapshots__/dom.expected/template.hydrate.js
index 8326488af7..048b7d0e2a 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/__snapshots__/dom.expected/template.hydrate.js
@@ -1,29 +1,8 @@
-// size: 534 (min) 214 (brotli)
+// size: 558 (min) 238 (brotli)
 const _input__effect = _$.effect("a0", (_scope) => _$.attrsEvents(_scope, 0)),
   _input_ = _$.value(2, (_scope, input) => {
     _$.attrs(_scope, 0, { type: "checkbox", ...input }), _input__effect(_scope);
   }),
-  _checkedValueChange = _$.register(
-    "b0",
-    (_scope) =>
-      function (_new_checkedValue) {
-        _checkedValue(_scope, _new_checkedValue);
-      },
-  ),
-  _checkedValueChange2 = _$.register(
-    "b1",
-    (_scope) =>
-      function (_new_checkedValue2) {
-        _checkedValue(_scope, _new_checkedValue2);
-      },
-  ),
-  _checkedValueChange3 = _$.register(
-    "b1",
-    (_scope) =>
-      function (_new_checkedValue3) {
-        _checkedValue(_scope, _new_checkedValue3);
-      },
-  ),
   _checkedValue = _$.state(
     4,
     (_scope, checkedValue) => {
@@ -51,4 +30,22 @@ const _input__effect = _$.effect("a0", (_scope) => _$.attrsEvents(_scope, 0)),
         _$.inChild(2, _input_),
       ]),
   );
-init();
+function _checkedValueChange(_scope) {
+  return (_new_checkedValue) => {
+    _checkedValue(_scope, _new_checkedValue);
+  };
+}
+function _checkedValueChange2(_scope) {
+  return (_new_checkedValue2) => {
+    _checkedValue(_scope, _new_checkedValue2);
+  };
+}
+function _checkedValueChange3(_scope) {
+  return (_new_checkedValue3) => {
+    _checkedValue(_scope, _new_checkedValue3);
+  };
+}
+_$.register("b0", _checkedValueChange),
+  _$.register("b1", _checkedValueChange2),
+  _$.register("b1", _checkedValueChange3),
+  init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/__snapshots__/dom.expected/template.js
index 57dc712d52..75022df900 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/__snapshots__/dom.expected/template.js
@@ -1,16 +1,7 @@
 export const _template_ = `${_checkbox_template}${_checkbox_template}${_checkbox_template} `;
 export const _walks_ = /* beginChild, _checkbox_walks, endChild, beginChild, _checkbox_walks, endChild, beginChild, _checkbox_walks, endChild, next(1), get, out(1) */`/${_checkbox_walks}&/${_checkbox_walks}&/${_checkbox_walks}&D l`;
-import * as _$ from "@marko/runtime-tags/debug/dom";
-const _checkedValueChange = _$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/template.marko_0/checkedValueChange", _scope => function (_new_checkedValue) {
-  _checkedValue(_scope, _new_checkedValue);
-});
 import { _setup_ as _checkbox, _input_ as _checkbox_input, _template_ as _checkbox_template, _walks_ as _checkbox_walks } from "./components/checkbox.marko";
-const _checkedValueChange2 = _$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/template.marko_0/checkedValueChange_0", _scope => function (_new_checkedValue2) {
-  _checkedValue(_scope, _new_checkedValue2);
-});
-const _checkedValueChange3 = _$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/template.marko_0/checkedValueChange_0", _scope => function (_new_checkedValue3) {
-  _checkedValue(_scope, _new_checkedValue3);
-});
+import * as _$ from "@marko/runtime-tags/debug/dom";
 const _checkedValue = /* @__PURE__ */_$.state("checkedValue", (_scope, checkedValue) => {
   _$.data(_scope["#text/3"], checkedValue);
   _checkbox_input(_scope["#childScope/0"], {
@@ -35,4 +26,22 @@ export function _setup_(_scope) {
   _checkbox(_scope["#childScope/2"]);
   _checkedValue(_scope, ["a", "b"]);
 }
+function _checkedValueChange(_scope) {
+  return _new_checkedValue => {
+    _checkedValue(_scope, _new_checkedValue);
+  };
+}
+function _checkedValueChange2(_scope) {
+  return _new_checkedValue2 => {
+    _checkedValue(_scope, _new_checkedValue2);
+  };
+}
+function _checkedValueChange3(_scope) {
+  return _new_checkedValue3 => {
+    _checkedValue(_scope, _new_checkedValue3);
+  };
+}
+_$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/template.marko_0/checkedValueChange", _checkedValueChange);
+_$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/template.marko_0/checkedValueChange_0", _checkedValueChange2);
+_$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/template.marko_0/checkedValueChange_0", _checkedValueChange3);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/__snapshots__/html.expected/template.js
index 6328b34181..6af09237b4 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/__snapshots__/html.expected/template.js
@@ -1,12 +1,12 @@
-import * as _$ from "@marko/runtime-tags/debug/html";
 import _checkbox from "./components/checkbox.marko";
+import * as _$ from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _scope0_id = _$.nextScopeId();
   const checkedValue = ["a", "b"];
   const _childScope = _$.peekNextScope();
   _checkbox({
     checkedValue: checkedValue,
-    checkedValueChange: _$.register(function (_new_checkedValue) {
+    checkedValueChange: _$.register(_new_checkedValue => {
       checkedValue = _new_checkedValue;
     }, "packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/template.marko_0/checkedValueChange", _scope0_id),
     value: "a"
@@ -14,7 +14,7 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _childScope2 = _$.peekNextScope();
   _checkbox({
     checkedValue: checkedValue,
-    checkedValueChange: _$.register(function (_new_checkedValue2) {
+    checkedValueChange: _$.register(_new_checkedValue2 => {
       checkedValue = _new_checkedValue2;
     }, "packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/template.marko_0/checkedValueChange_0", _scope0_id),
     value: "b"
@@ -22,7 +22,7 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _childScope3 = _$.peekNextScope();
   _checkbox({
     checkedValue: checkedValue,
-    checkedValueChange: _$.register(function (_new_checkedValue3) {
+    checkedValueChange: _$.register(_new_checkedValue3 => {
       checkedValue = _new_checkedValue3;
     }, "packages/translator-tags/src/__tests__/fixtures/controllable-checked-values-spread/template.marko_0/checkedValueChange_0", _scope0_id),
     value: "c"
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/dom.expected/template.hydrate.js
index bd710b9338..5a06a0a188 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/dom.expected/template.hydrate.js
@@ -1,52 +1,49 @@
-// size: 491 (min) 154 (brotli)
-const _checkedValueChange = _$.register(
-    "a0",
-    (_scope) =>
-      function (_new_checkedValue) {
-        _checkedValue(_scope, _new_checkedValue);
-      },
+// size: 515 (min) 163 (brotli)
+const _checkedValue = _$.state(4, (_scope, checkedValue) => {
+  _$.controllable_input_checkedValue(
+    _scope,
+    0,
+    checkedValue,
+    _checkedValueChange3(_scope),
+    "a",
   ),
-  _checkedValueChange2 = _$.register(
-    "a1",
-    (_scope) =>
-      function (_new_checkedValue2) {
-        _checkedValue(_scope, _new_checkedValue2);
-      },
-  ),
-  _checkedValueChange3 = _$.register(
-    "a1",
-    (_scope) =>
-      function (_new_checkedValue3) {
-        _checkedValue(_scope, _new_checkedValue3);
-      },
-  ),
-  _checkedValue = _$.state(4, (_scope, checkedValue) => {
     _$.controllable_input_checkedValue(
       _scope,
-      0,
+      1,
+      checkedValue,
+      _checkedValueChange2(_scope),
+      "b",
+    ),
+    _$.controllable_input_checkedValue(
+      _scope,
+      2,
       checkedValue,
       _checkedValueChange(_scope),
-      "a",
+      "c",
     ),
-      _$.controllable_input_checkedValue(
-        _scope,
-        1,
-        checkedValue,
-        _checkedValueChange2(_scope),
-        "b",
-      ),
-      _$.controllable_input_checkedValue(
-        _scope,
-        2,
-        checkedValue,
-        _checkedValueChange3(_scope),
-        "c",
-      ),
-      _$.data(_scope[3], checkedValue);
-  });
+    _$.data(_scope[3], checkedValue);
+});
+function _checkedValueChange(_scope) {
+  return (_new_checkedValue3) => {
+    _checkedValue(_scope, _new_checkedValue3);
+  };
+}
+function _checkedValueChange2(_scope) {
+  return (_new_checkedValue2) => {
+    _checkedValue(_scope, _new_checkedValue2);
+  };
+}
+function _checkedValueChange3(_scope) {
+  return (_new_checkedValue) => {
+    _checkedValue(_scope, _new_checkedValue);
+  };
+}
 _$.effect("a2", (_scope) => {
   _$.controllable_input_checkedValue_effect(_scope, 0),
     _$.controllable_input_checkedValue_effect(_scope, 1),
     _$.controllable_input_checkedValue_effect(_scope, 2);
 }),
+  _$.register("a1", _checkedValueChange),
+  _$.register("a1", _checkedValueChange2),
+  _$.register("a0", _checkedValueChange3),
   init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/dom.expected/template.js
index c71e2a840c..35eecadb72 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/dom.expected/template.js
@@ -1,19 +1,10 @@
 export const _template_ = " ";
 export const _walks_ = /* get, over(1), get, over(1), get, over(1), next(1), get, out(1) */" b b bD l";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _checkedValueChange = _$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/template.marko_0/checkedValueChange", _scope => function (_new_checkedValue) {
-  _checkedValue(_scope, _new_checkedValue);
-});
-const _checkedValueChange2 = _$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/template.marko_0/checkedValueChange_0", _scope => function (_new_checkedValue2) {
-  _checkedValue(_scope, _new_checkedValue2);
-});
-const _checkedValueChange3 = _$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/template.marko_0/checkedValueChange_0", _scope => function (_new_checkedValue3) {
-  _checkedValue(_scope, _new_checkedValue3);
-});
 const _checkedValue = /* @__PURE__ */_$.state("checkedValue", (_scope, checkedValue) => {
-  _$.controllable_input_checkedValue(_scope, "#input/0", checkedValue, _checkedValueChange(_scope), "a");
+  _$.controllable_input_checkedValue(_scope, "#input/0", checkedValue, _checkedValueChange3(_scope), "a");
   _$.controllable_input_checkedValue(_scope, "#input/1", checkedValue, _checkedValueChange2(_scope), "b");
-  _$.controllable_input_checkedValue(_scope, "#input/2", checkedValue, _checkedValueChange3(_scope), "c");
+  _$.controllable_input_checkedValue(_scope, "#input/2", checkedValue, _checkedValueChange(_scope), "c");
   _$.data(_scope["#text/3"], checkedValue);
 });
 const _setup__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/template.marko_0", _scope => {
@@ -25,4 +16,22 @@ export function _setup_(_scope) {
   _setup__effect(_scope);
   _checkedValue(_scope, ["a", "b"]);
 }
+function _checkedValueChange(_scope) {
+  return _new_checkedValue3 => {
+    _checkedValue(_scope, _new_checkedValue3);
+  };
+}
+function _checkedValueChange2(_scope) {
+  return _new_checkedValue2 => {
+    _checkedValue(_scope, _new_checkedValue2);
+  };
+}
+function _checkedValueChange3(_scope) {
+  return _new_checkedValue => {
+    _checkedValue(_scope, _new_checkedValue);
+  };
+}
+_$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/template.marko_0/checkedValueChange_0", _checkedValueChange);
+_$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/template.marko_0/checkedValueChange_0", _checkedValueChange2);
+_$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/template.marko_0/checkedValueChange", _checkedValueChange3);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/html.expected/template.js
index 1b28766011..a77e9ff474 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/html.expected/template.js
@@ -2,13 +2,16 @@ import * as _$ from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _scope0_id = _$.nextScopeId();
   const checkedValue = ["a", "b"];
-  _$.write(` {
     checkedValue = _new_checkedValue;
-  }, "packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/template.marko_0/checkedValueChange", _scope0_id), "a")} type=checkbox>${_$.markResumeNode(_scope0_id, "#input/0")}${_$.markResumeNode(_scope0_id, "#input/0")} {
     checkedValue = _new_checkedValue2;
-  }, "packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/template.marko_0/checkedValueChange_0", _scope0_id), "b")} type=checkbox>${_$.markResumeNode(_scope0_id, "#input/1")}${_$.markResumeNode(_scope0_id, "#input/1")} {
     checkedValue = _new_checkedValue3;
   }, "packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/template.marko_0/checkedValueChange_0", _scope0_id), "c")} type=checkbox>${_$.markResumeNode(_scope0_id, "#input/2")}${_$.escapeXML(checkedValue)}${_$.markResumeNode(_scope0_id, "#text/3")}`);
   _$.writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/template.marko_0");
+  _$.writeScope(_scope0_id, {
+    "checkedValue": checkedValue
+  });
 });
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/template.marko", _renderer);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/resume.expected.md b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/resume.expected.md
index a4c8eb96d0..d6a0976325 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/resume.expected.md
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/resume.expected.md
@@ -25,7 +25,7 @@
       
     
     
   
 
@@ -65,7 +65,7 @@ container.querySelectorAll(`input`)[1].click()
       
     
     
   
 
@@ -106,7 +106,7 @@ container.querySelectorAll(`input`)[2].click()
       
     
     
   
 
@@ -146,7 +146,7 @@ container.querySelectorAll(`input`)[0].click()
       
     
     
   
 
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/ssr.expected.md b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/ssr.expected.md
index 290ee8cde4..4bf5bb079c 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/ssr.expected.md
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/ssr.expected.md
@@ -1,5 +1,5 @@
 # Write
-  a,b
+  a,b
 
 
 # Render "End"
@@ -29,7 +29,7 @@
       
     
     
   
 
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/dom.expected/template.hydrate.js
index 47c361be93..c4ea989340 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/dom.expected/template.hydrate.js
@@ -1,14 +1,13 @@
-// size: 203 (min) 138 (brotli)
-const _checkedChange = _$.register(
-    "a0",
-    (_scope) =>
-      function (_new_checked) {
-        _checked(_scope, _new_checked);
-      },
-  ),
-  _checked = _$.state(2, (_scope, checked) => {
-    _$.controllable_input_checked(_scope, 0, checked, _checkedChange(_scope)),
-      _$.data(_scope[1], String(checked));
-  });
+// size: 211 (min) 129 (brotli)
+const _checked = _$.state(2, (_scope, checked) => {
+  _$.controllable_input_checked(_scope, 0, checked, _checkedChange(_scope)),
+    _$.data(_scope[1], String(checked));
+});
+function _checkedChange(_scope) {
+  return (_new_checked) => {
+    _checked(_scope, _new_checked);
+  };
+}
 _$.effect("a1", (_scope) => _$.controllable_input_checked_effect(_scope, 0)),
+  _$.register("a0", _checkedChange),
   init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/dom.expected/template.js
index 23c601347e..fd5c9a9cbb 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/dom.expected/template.js
@@ -1,9 +1,6 @@
 export const _template_ = " ";
 export const _walks_ = /* get, over(1), next(1), get, out(1) */" bD l";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _checkedChange = _$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked/template.marko_0/checkedChange", _scope => function (_new_checked) {
-  _checked(_scope, _new_checked);
-});
 const _checked = /* @__PURE__ */_$.state("checked", (_scope, checked) => {
   _$.controllable_input_checked(_scope, "#input/0", checked, _checkedChange(_scope));
   _$.data(_scope["#text/1"], String(checked));
@@ -13,4 +10,10 @@ export function _setup_(_scope) {
   _setup__effect(_scope);
   _checked(_scope, false);
 }
+function _checkedChange(_scope) {
+  return _new_checked => {
+    _checked(_scope, _new_checked);
+  };
+}
+_$.register("packages/translator-tags/src/__tests__/fixtures/controllable-checked/template.marko_0/checkedChange", _checkedChange);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/controllable-checked/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/html.expected/template.js
index b59ace78f1..aae24b2cb7 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/html.expected/template.js
@@ -2,9 +2,12 @@ import * as _$ from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _scope0_id = _$.nextScopeId();
   const checked = false;
-  _$.write(` {
     checked = _new_checked;
   }, "packages/translator-tags/src/__tests__/fixtures/controllable-checked/template.marko_0/checkedChange", _scope0_id))} type=checkbox>${_$.markResumeNode(_scope0_id, "#input/0")}${_$.escapeXML(String(checked))}${_$.markResumeNode(_scope0_id, "#text/1")}`);
   _$.writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/controllable-checked/template.marko_0");
+  _$.writeScope(_scope0_id, {
+    "checked": checked
+  });
 });
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/controllable-checked/template.marko", _renderer);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/resume.expected.md b/packages/translator-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/resume.expected.md
index 2ab5795beb..9a6f87809f 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/resume.expected.md
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/resume.expected.md
@@ -12,7 +12,7 @@
       
     
     
   
 
@@ -41,7 +41,7 @@ container.querySelector("input").click()
       
     
     
   
 
@@ -69,7 +69,7 @@ container.querySelector("input").click()
       
     
     
   
 
@@ -98,7 +98,7 @@ container.querySelector("input").click()
       
     
     
   
 
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/ssr.expected.md b/packages/translator-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/ssr.expected.md
index 33061491f3..f385db3152 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/ssr.expected.md
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/ssr.expected.md
@@ -1,5 +1,5 @@
 # Write
-  false
+  false
 
 
 # Render "End"
@@ -16,7 +16,7 @@
       
     
     
   
 
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/dom.expected/template.hydrate.js
index f59127aff1..f98e59bdf4 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/dom.expected/template.hydrate.js
@@ -1,14 +1,13 @@
-// size: 191 (min) 134 (brotli)
-const _valueChange = _$.register(
-    "a0",
-    (_scope) =>
-      function (_new_value) {
-        _value(_scope, _new_value);
-      },
-  ),
-  _value = _$.state(2, (_scope, value) => {
-    _$.controllable_input_value(_scope, 0, value, _valueChange(_scope)),
-      _$.data(_scope[1], value);
-  });
+// size: 199 (min) 140 (brotli)
+const _value = _$.state(2, (_scope, value) => {
+  _$.controllable_input_value(_scope, 0, value, _valueChange(_scope)),
+    _$.data(_scope[1], value);
+});
+function _valueChange(_scope) {
+  return (_new_value) => {
+    _value(_scope, _new_value);
+  };
+}
 _$.effect("a1", (_scope) => _$.controllable_input_value_effect(_scope, 0)),
+  _$.register("a0", _valueChange),
   init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/dom.expected/template.js
index dd6b39479e..af51ffe506 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/dom.expected/template.js
@@ -1,9 +1,6 @@
 export const _template_ = " ";
 export const _walks_ = /* get, over(1), next(1), get, out(1) */" bD l";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _valueChange = _$.register("packages/translator-tags/src/__tests__/fixtures/controllable-input-value/template.marko_0/valueChange", _scope => function (_new_value) {
-  _value(_scope, _new_value);
-});
 const _value = /* @__PURE__ */_$.state("value", (_scope, value) => {
   _$.controllable_input_value(_scope, "#input/0", value, _valueChange(_scope));
   _$.data(_scope["#text/1"], value);
@@ -13,4 +10,10 @@ export function _setup_(_scope) {
   _setup__effect(_scope);
   _value(_scope, "hello");
 }
+function _valueChange(_scope) {
+  return _new_value => {
+    _value(_scope, _new_value);
+  };
+}
+_$.register("packages/translator-tags/src/__tests__/fixtures/controllable-input-value/template.marko_0/valueChange", _valueChange);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/controllable-input-value/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/html.expected/template.js
index 8b6be17bb6..9622027d93 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/html.expected/template.js
@@ -2,9 +2,12 @@ import * as _$ from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _scope0_id = _$.nextScopeId();
   const value = "hello";
-  _$.write(` {
     value = _new_value;
   }, "packages/translator-tags/src/__tests__/fixtures/controllable-input-value/template.marko_0/valueChange", _scope0_id))} type=text>${_$.markResumeNode(_scope0_id, "#input/0")}${_$.escapeXML(value)}${_$.markResumeNode(_scope0_id, "#text/1")}`);
   _$.writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/controllable-input-value/template.marko_0");
+  _$.writeScope(_scope0_id, {
+    "value": value
+  });
 });
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/controllable-input-value/template.marko", _renderer);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/resume.expected.md b/packages/translator-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/resume.expected.md
index d7522b7cf0..4bea082eab 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/resume.expected.md
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/resume.expected.md
@@ -13,7 +13,7 @@
       
     
     
   
 
@@ -47,7 +47,7 @@ input.dispatchEvent(new window.Event("input", {
       
     
     
   
 
@@ -81,7 +81,7 @@ input.dispatchEvent(new window.Event("input", {
       
     
     
   
 
@@ -115,7 +115,7 @@ input.dispatchEvent(new window.Event("input", {
       
     
     
   
 
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/ssr.expected.md b/packages/translator-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/ssr.expected.md
index 46f1f0d886..c5f3a7ee51 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/ssr.expected.md
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/ssr.expected.md
@@ -1,5 +1,5 @@
 # Write
-  hello
+  hello
 
 
 # Render "End"
@@ -17,7 +17,7 @@
       
     
     
   
 
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-select/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/controllable-select/__snapshots__/dom.expected/template.hydrate.js
index f9f69dbb7d..0954ae7f5c 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-select/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-select/__snapshots__/dom.expected/template.hydrate.js
@@ -1,14 +1,13 @@
-// size: 193 (min) 125 (brotli)
-const _valueChange = _$.register(
-    "a0",
-    (_scope) =>
-      function (v) {
-        _value(_scope, v);
-      },
-  ),
-  _value = _$.state(2, (_scope, value) => {
-    _$.controllable_select_value(_scope, 0, value, _valueChange(_scope)),
-      _$.data(_scope[1], value);
-  });
+// size: 209 (min) 127 (brotli)
+const _value = _$.state(2, (_scope, value) => {
+  _$.controllable_select_value(_scope, 0, value, _valueChange(_scope)),
+    _$.data(_scope[1], value);
+});
+function _valueChange(_scope) {
+  return function (v) {
+    _value(_scope, v);
+  };
+}
 _$.effect("a1", (_scope) => _$.controllable_select_value_effect(_scope, 0)),
+  _$.register("a0", _valueChange),
   init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-select/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/controllable-select/__snapshots__/dom.expected/template.js
index 68168d9b4d..070bc4640f 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-select/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-select/__snapshots__/dom.expected/template.js
@@ -1,9 +1,6 @@
 export const _template_ = " ";
 export const _walks_ = /* get, over(1), next(1), get, out(1) */" bD l";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _valueChange = _$.register("packages/translator-tags/src/__tests__/fixtures/controllable-select/template.marko_0/valueChange", _scope => function (v) {
-  _value(_scope, v);
-});
 const _value = /* @__PURE__ */_$.state("value", (_scope, value) => {
   _$.controllable_select_value(_scope, "#select/0", value, _valueChange(_scope));
   _$.data(_scope["#text/1"], value);
@@ -13,4 +10,10 @@ export function _setup_(_scope) {
   _setup__effect(_scope);
   _value(_scope, "b");
 }
+function _valueChange(_scope) {
+  return function (v) {
+    _value(_scope, v);
+  };
+}
+_$.register("packages/translator-tags/src/__tests__/fixtures/controllable-select/template.marko_0/valueChange", _valueChange);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/controllable-select/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-select/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/controllable-select/__snapshots__/html.expected/template.js
index 729ab80415..66ac1dae37 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-select/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-select/__snapshots__/html.expected/template.js
@@ -9,5 +9,8 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   });
   _$.write(`${_$.markResumeNode(_scope0_id, "#select/0")}${_$.escapeXML(value)}${_$.markResumeNode(_scope0_id, "#text/1")}`);
   _$.writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/controllable-select/template.marko_0");
+  _$.writeScope(_scope0_id, {
+    "value": value
+  });
 });
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/controllable-select/template.marko", _renderer);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-select/__snapshots__/resume.expected.md b/packages/translator-tags/src/__tests__/fixtures/controllable-select/__snapshots__/resume.expected.md
index 7896516434..fe464e56bc 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-select/__snapshots__/resume.expected.md
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-select/__snapshots__/resume.expected.md
@@ -27,7 +27,7 @@
       
     
     
   
 
@@ -75,7 +75,7 @@ bubbles: true
       
     
     
   
 
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-select/__snapshots__/ssr.expected.md b/packages/translator-tags/src/__tests__/fixtures/controllable-select/__snapshots__/ssr.expected.md
index 61d0b3fb95..6eb9594303 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-select/__snapshots__/ssr.expected.md
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-select/__snapshots__/ssr.expected.md
@@ -1,5 +1,5 @@
 # Write
-  b
+  b
 
 
 # Render "End"
@@ -31,7 +31,7 @@
       
     
     
   
 
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/dom.expected/template.hydrate.js
index bf6bc19e17..24c3f63bbe 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/dom.expected/template.hydrate.js
@@ -1,14 +1,13 @@
-// size: 197 (min) 119 (brotli)
-const _valueChange = _$.register(
-    "a0",
-    (_scope) =>
-      function (_new_value) {
-        _value(_scope, _new_value);
-      },
-  ),
-  _value = _$.state(2, (_scope, value) => {
-    _$.controllable_textarea_value(_scope, 0, value, _valueChange(_scope)),
-      _$.data(_scope[1], value);
-  });
+// size: 205 (min) 140 (brotli)
+const _value = _$.state(2, (_scope, value) => {
+  _$.controllable_textarea_value(_scope, 0, value, _valueChange(_scope)),
+    _$.data(_scope[1], value);
+});
+function _valueChange(_scope) {
+  return (_new_value) => {
+    _value(_scope, _new_value);
+  };
+}
 _$.effect("a1", (_scope) => _$.controllable_textarea_value_effect(_scope, 0)),
+  _$.register("a0", _valueChange),
   init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/dom.expected/template.js
index 34f1163c9e..7ab5ac221e 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/dom.expected/template.js
@@ -1,9 +1,6 @@
 export const _template_ = " ";
 export const _walks_ = /* get, over(1), next(1), get, out(1) */" bD l";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _valueChange = _$.register("packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/template.marko_0/valueChange", _scope => function (_new_value) {
-  _value(_scope, _new_value);
-});
 const _value = /* @__PURE__ */_$.state("value", (_scope, value) => {
   _$.controllable_textarea_value(_scope, "#textarea/0", value, _valueChange(_scope));
   _$.data(_scope["#text/1"], value);
@@ -13,4 +10,10 @@ export function _setup_(_scope) {
   _setup__effect(_scope);
   _value(_scope, "hello");
 }
+function _valueChange(_scope) {
+  return _new_value => {
+    _value(_scope, _new_value);
+  };
+}
+_$.register("packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/template.marko_0/valueChange", _valueChange);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/html.expected/template.js
index 74fb9cb610..7a79a0ee4a 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/html.expected/template.js
@@ -2,9 +2,12 @@ import * as _$ from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _scope0_id = _$.nextScopeId();
   const value = "hello";
-  _$.write(`${_$.markResumeNode(_scope0_id, "#textarea/0")}${_$.escapeXML(value)}${_$.markResumeNode(_scope0_id, "#text/1")}`);
   _$.writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/template.marko_0");
+  _$.writeScope(_scope0_id, {
+    "value": value
+  });
 });
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/template.marko", _renderer);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/resume.expected.md b/packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/resume.expected.md
index 7c2f41e66e..a6555ca64d 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/resume.expected.md
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/resume.expected.md
@@ -12,7 +12,7 @@
       
     
     
   
 
@@ -45,7 +45,7 @@ textarea.dispatchEvent(new window.Event("input", {
       
     
     
   
 
@@ -78,7 +78,7 @@ textarea.dispatchEvent(new window.Event("input", {
       
     
     
   
 
@@ -111,7 +111,7 @@ textarea.dispatchEvent(new window.Event("input", {
       
     
     
   
 
diff --git a/packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/ssr.expected.md b/packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/ssr.expected.md
index ba02dcb5cb..973a9c7904 100644
--- a/packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/ssr.expected.md
+++ b/packages/translator-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/ssr.expected.md
@@ -1,5 +1,5 @@
 # Write
-  hello
+  hello
 
 
 # Render "End"
@@ -16,7 +16,7 @@
       
     
     
   
 
diff --git a/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-args/__snapshots__/dom.expected/components/custom-tag.js b/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-args/__snapshots__/dom.expected/components/custom-tag.js
index 9c7e88f3f5..d3664a180e 100644
--- a/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-args/__snapshots__/dom.expected/components/custom-tag.js
+++ b/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-args/__snapshots__/dom.expected/components/custom-tag.js
@@ -9,17 +9,13 @@ const _expr_Text_x_y = /* @__PURE__ */_$.intersection(3, _scope => {
   } = _scope;
   _inputRenderBody_input(_scope, () => [x, y]);
 }, () => _inputRenderBody_input);
-const _onClick = _scope => {
-  const {
-    x,
-    y
-  } = _scope;
-  return function () {
-    _x(_scope, x + 1);
-    _y(_scope, y + 1);
-  };
-};
-const _expr_x_y_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-args/components/custom-tag.marko_0_x_y", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _expr_x_y_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-args/components/custom-tag.marko_0_x_y", (_scope, {
+  x,
+  y
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _x(_scope, x + 1), x;
+  _y(_scope, y + 1), y;
+}));
 const _expr_x_y = /* @__PURE__ */_$.intersection(2, _scope => {
   const {
     x,
diff --git a/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-args/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-args/__snapshots__/dom.expected/template.hydrate.js
index b6fd84e99c..f682455603 100644
--- a/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-args/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-args/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 601 (min) 301 (brotli)
+// size: 581 (min) 299 (brotli)
 const _inputRenderBody_input = _$.dynamicTagAttrs(3, void 0, 1),
   _expr_Text_x_y = _$.intersection(
     3,
@@ -8,17 +8,10 @@ const _inputRenderBody_input = _$.dynamicTagAttrs(3, void 0, 1),
     },
     () => _inputRenderBody_input,
   ),
-  _expr_x_y_effect = _$.effect("a0", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 7: x, 8: y } = _scope;
-        return function () {
-          _x(_scope, x + 1), _y(_scope, y + 1);
-        };
-      })(_scope),
-    ),
+  _expr_x_y_effect = _$.effect("a0", (_scope, { 7: x, 8: y }) =>
+    _$.on(_scope[0], "click", function () {
+      _x(_scope, x + 1), _y(_scope, y + 1);
+    }),
   ),
   _expr_x_y = _$.intersection(2, (_scope) => {
     _expr_x_y_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-attributes/__snapshots__/dom.expected/components/custom-tag.js b/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-attributes/__snapshots__/dom.expected/components/custom-tag.js
index 07268d8947..b23f7d4dc4 100644
--- a/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-attributes/__snapshots__/dom.expected/components/custom-tag.js
+++ b/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-attributes/__snapshots__/dom.expected/components/custom-tag.js
@@ -13,15 +13,11 @@ const _expr_Text_input_name_x = /* @__PURE__ */_$.intersection(3, _scope => {
   }));
 }, () => _inputRenderBody_input);
 const _dynamicTagName = /* @__PURE__ */_$.conditional("#text/2", 0, () => _expr_Text_input_name_x);
-const _onClick = _scope => {
-  const {
-    x
-  } = _scope;
-  return function () {
-    _x(_scope, x + 1);
-  };
-};
-const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-attributes/components/custom-tag.marko_0_x", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-attributes/components/custom-tag.marko_0_x", (_scope, {
+  x
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _x(_scope, x + 1), x;
+}));
 const _x = /* @__PURE__ */_$.state("x", (_scope, x) => {
   _$.data(_scope["#text/1"], x);
   _x_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-attributes/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-attributes/__snapshots__/dom.expected/template.hydrate.js
index 7f7f068325..2e066574a2 100644
--- a/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-attributes/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-attributes/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 520 (min) 291 (brotli)
+// size: 500 (min) 293 (brotli)
 const _inputRenderBody_input = _$.dynamicTagAttrs(2),
   _expr_Text_input_name_x = _$.intersection(
     3,
@@ -8,17 +8,10 @@ const _inputRenderBody_input = _$.dynamicTagAttrs(2),
     },
     () => _inputRenderBody_input,
   ),
-  _x_effect = _$.effect("a0", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 7: x } = _scope;
-        return function () {
-          _x(_scope, x + 1);
-        };
-      })(_scope),
-    ),
+  _x_effect = _$.effect("a0", (_scope, { 7: x }) =>
+    _$.on(_scope[0], "click", function () {
+      _x(_scope, x + 1);
+    }),
   ),
   _x = _$.state(
     7,
diff --git a/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/dom.expected/components/custom-tag.js b/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/dom.expected/components/custom-tag.js
index 1a2e035ed4..366567fa7e 100644
--- a/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/dom.expected/components/custom-tag.js
+++ b/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/dom.expected/components/custom-tag.js
@@ -9,15 +9,11 @@ const _expr_Text_x = /* @__PURE__ */_$.intersection(2, _scope => {
   _inputRenderBody_input(_scope, () => x);
 }, () => _inputRenderBody_input);
 const _dynamicTagName = /* @__PURE__ */_$.conditional("#text/2", 0, () => _expr_Text_x);
-const _onClick = _scope => {
-  const {
-    x
-  } = _scope;
-  return function () {
-    _x(_scope, x + 1);
-  };
-};
-const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/components/custom-tag.marko_0_x", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/components/custom-tag.marko_0_x", (_scope, {
+  x
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _x(_scope, x + 1), x;
+}));
 const _x = /* @__PURE__ */_$.state("x", (_scope, x) => {
   _$.data(_scope["#text/1"], x);
   _x_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/dom.expected/template.hydrate.js
index 4fb0209096..0a789c0ba2 100644
--- a/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/custom-tag-parameters-from-single-arg/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 403 (min) 248 (brotli)
+// size: 383 (min) 247 (brotli)
 const _inputRenderBody_input = _$.dynamicTagAttrs(2),
   _expr_Text_x = _$.intersection(
     2,
@@ -8,17 +8,10 @@ const _inputRenderBody_input = _$.dynamicTagAttrs(2),
     },
     () => _inputRenderBody_input,
   ),
-  _x_effect = _$.effect("a0", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 6: x } = _scope;
-        return function () {
-          _x(_scope, x + 1);
-        };
-      })(_scope),
-    ),
+  _x_effect = _$.effect("a0", (_scope, { 6: x }) =>
+    _$.on(_scope[0], "click", function () {
+      _x(_scope, x + 1);
+    }),
   ),
   _x = _$.state(
     6,
diff --git a/packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/dom.expected/components/counter.js b/packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/dom.expected/components/counter.js
index 0659b58564..61189d6fdb 100644
--- a/packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/dom.expected/components/counter.js
+++ b/packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/dom.expected/components/counter.js
@@ -1,18 +1,11 @@
 export const _template_ = "";
 export const _walks_ = /* get, next(1), get, out(1) */" D l";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _valueChange = _$.register("packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/components/counter.marko_0/valueChange", _scope => function (_new_x) {
-  _x(_scope, _new_x);
-});
-const _onClick = _scope => {
-  const {
-    x
-  } = _scope;
-  return function () {
-    _x(_scope, x + 1);
-  };
-};
-const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/components/counter.marko_0_x", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/components/counter.marko_0_x", (_scope, {
+  x
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _x(_scope, x + 1), x;
+}));
 const _x = /* @__PURE__ */_$.state("x", (_scope, x) => {
   _$.data(_scope["#text/1"], x);
   _x_effect(_scope);
@@ -22,4 +15,10 @@ export function _setup_(_scope) {
   _x(_scope, 1);
   _$.setTagVarChange(_scope, _valueChange(_scope));
 }
+function _valueChange(_scope) {
+  return _new_x => {
+    _x(_scope, _new_x);
+  };
+}
+_$.register("packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/components/counter.marko_0/valueChange", _valueChange);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/components/counter.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/dom.expected/template.hydrate.js
index 732a8c1821..82dcd4d155 100644
--- a/packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/dom.expected/template.hydrate.js
@@ -1,22 +1,8 @@
-// size: 495 (min) 212 (brotli)
-_$.register(
-  "a0",
-  (_scope) =>
-    function (_new_x) {
-      _x(_scope, _new_x);
-    },
-);
-const _x_effect = _$.effect("a1", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 2: x } = _scope;
-        return function () {
-          _x(_scope, x + 1);
-        };
-      })(_scope),
-    ),
+// size: 470 (min) 209 (brotli)
+const _x_effect = _$.effect("a1", (_scope, { 2: x }) =>
+    _$.on(_scope[0], "click", function () {
+      _x(_scope, x + 1);
+    }),
   ),
   _x = _$.state(
     2,
@@ -24,19 +10,17 @@ const _x_effect = _$.effect("a1", (_scope) =>
       _$.data(_scope[1], x), _x_effect(_scope), _$.tagVarSignal(_scope, x);
     },
     () => _$.tagVarSignal,
-  ),
-  _count_effect = _$.effect("b0", (_scope) =>
-    _$.on(
-      _scope[1],
-      "click",
-      ((_scope) => {
-        const { 4: count } = _scope;
-        return function () {
-          _$.tagVarSignalChange(_scope[0], count + 1);
-        };
-      })(_scope),
-    ),
   );
+_$.register("a0", function (_scope) {
+  return (_new_x) => {
+    _x(_scope, _new_x);
+  };
+});
+const _count_effect = _$.effect("b0", (_scope, { 4: count }) =>
+  _$.on(_scope[1], "click", function () {
+    _$.tagVarSignalChange(_scope[0], count + 1);
+  }),
+);
 _$.registerBoundSignal(
   "b1",
   _$.value(4, (_scope, count) => {
diff --git a/packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/dom.expected/template.js
index 1cd0262ecd..4b8106e1c2 100644
--- a/packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/dom.expected/template.js
@@ -2,15 +2,11 @@ export const _template_ = `${_counter_template}";
 export const _walks_ = /* get, next(1), get, out(1) */" D l";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _onClick = _scope => {
-  const {
-    x
-  } = _scope;
-  return function () {
-    _x(_scope, x + 1);
-  };
-};
-const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/custom-tag-var/components/child.marko_0_x", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/custom-tag-var/components/child.marko_0_x", (_scope, {
+  x
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _x(_scope, x + 1), x;
+}));
 const _x = /* @__PURE__ */_$.state("x", (_scope, x) => {
   _$.data(_scope["#text/1"], x);
   _x_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/custom-tag-var/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/custom-tag-var/__snapshots__/dom.expected/template.hydrate.js
index 11a3e23a18..b553b3bbf3 100644
--- a/packages/translator-tags/src/__tests__/fixtures/custom-tag-var/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/custom-tag-var/__snapshots__/dom.expected/template.hydrate.js
@@ -1,15 +1,8 @@
-// size: 250 (min) 155 (brotli)
-const _x_effect = _$.effect("a0", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 2: x } = _scope;
-        return function () {
-          _x(_scope, x + 1);
-        };
-      })(_scope),
-    ),
+// size: 230 (min) 152 (brotli)
+const _x_effect = _$.effect("a0", (_scope, { 2: x }) =>
+    _$.on(_scope[0], "click", function () {
+      _x(_scope, x + 1);
+    }),
   ),
   _x = _$.state(
     2,
diff --git a/packages/translator-tags/src/__tests__/fixtures/define-tag-for-attribute-tag/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/define-tag-for-attribute-tag/__snapshots__/dom.expected/template.hydrate.js
index 061ad9a680..c764a178f1 100644
--- a/packages/translator-tags/src/__tests__/fixtures/define-tag-for-attribute-tag/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/define-tag-for-attribute-tag/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 528 (min) 305 (brotli)
+// size: 508 (min) 275 (brotli)
 const _inputThingRenderBody_input = _$.dynamicTagAttrs(1),
   _dynamicTagName = _$.conditional(
     1,
@@ -31,17 +31,10 @@ const _inputThingRenderBody_input = _$.dynamicTagAttrs(1),
     (_scope, myThing) => _input_thing_(_scope[0], myThing),
     () => _$.inChild(0, _input_thing_),
   ),
-  _selected_effect = _$.effect("b1", (_scope) =>
-    _$.on(
-      _scope[1],
-      "click",
-      ((_scope) => {
-        const { 2: selected } = _scope;
-        return function () {
-          _selected(_scope, !selected);
-        };
-      })(_scope),
-    ),
+  _selected_effect = _$.effect("b1", (_scope, { 2: selected }) =>
+    _$.on(_scope[1], "click", function () {
+      _selected(_scope, !selected);
+    }),
   ),
   _selected = _$.state(
     2,
diff --git a/packages/translator-tags/src/__tests__/fixtures/define-tag-for-attribute-tag/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/define-tag-for-attribute-tag/__snapshots__/dom.expected/template.js
index f6d8e08d42..9b4ea43292 100644
--- a/packages/translator-tags/src/__tests__/fixtures/define-tag-for-attribute-tag/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/define-tag-for-attribute-tag/__snapshots__/dom.expected/template.js
@@ -4,15 +4,11 @@ import { _setup_ as _child, _input_thing_ as _child_input_thing, _template_ as _
 import * as _$ from "@marko/runtime-tags/debug/dom";
 const _defineBody = _$.register("packages/translator-tags/src/__tests__/fixtures/define-tag-for-attribute-tag/template.marko_1_renderer", /* @__PURE__ */_$.createRendererWithOwner("The thing", ""));
 const _myThing = /* @__PURE__ */_$.value("myThing", (_scope, myThing) => _child_input_thing(_scope["#childScope/0"], myThing), () => _$.inChild("#childScope/0", _child_input_thing));
-const _onClick = _scope => {
-  const {
-    selected
-  } = _scope;
-  return function () {
-    _selected(_scope, !selected);
-  };
-};
-const _selected_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/define-tag-for-attribute-tag/template.marko_0_selected", _scope => _$.on(_scope["#button/1"], "click", _onClick(_scope)));
+const _selected_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/define-tag-for-attribute-tag/template.marko_0_selected", (_scope, {
+  selected
+}) => _$.on(_scope["#button/1"], "click", function () {
+  _selected(_scope, !selected);
+}));
 const _selected = /* @__PURE__ */_$.state("selected", (_scope, selected) => {
   _selected_effect(_scope);
   _myThing(_scope, {
diff --git a/packages/translator-tags/src/__tests__/fixtures/define-tag-object/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/define-tag-object/__snapshots__/dom.expected/template.hydrate.js
index f3d5be1b9e..0cbfcd6efa 100644
--- a/packages/translator-tags/src/__tests__/fixtures/define-tag-object/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/define-tag-object/__snapshots__/dom.expected/template.hydrate.js
@@ -1,18 +1,11 @@
-// size: 220 (min) 154 (brotli)
+// size: 200 (min) 150 (brotli)
 const _myObj = _$.value(4, (_scope, myObj) =>
     _$.data(_scope[0], JSON.stringify(myObj)),
   ),
-  _x_effect = _$.effect("a0", (_scope) =>
-    _$.on(
-      _scope[1],
-      "click",
-      ((_scope) => {
-        const { 3: x } = _scope;
-        return function () {
-          _x(_scope, x + 1);
-        };
-      })(_scope),
-    ),
+  _x_effect = _$.effect("a0", (_scope, { 3: x }) =>
+    _$.on(_scope[1], "click", function () {
+      _x(_scope, x + 1);
+    }),
   ),
   _x = _$.state(3, (_scope, x) => {
     _$.data(_scope[2], x),
diff --git a/packages/translator-tags/src/__tests__/fixtures/define-tag-object/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/define-tag-object/__snapshots__/dom.expected/template.js
index 0ff5460362..8585d2c80b 100644
--- a/packages/translator-tags/src/__tests__/fixtures/define-tag-object/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/define-tag-object/__snapshots__/dom.expected/template.js
@@ -2,15 +2,11 @@ export const _template_ = "
     
    ";
 export const _walks_ = /* next(1), get, out(1), get, next(1), get, out(1) */"D l D l";
 import * as _$ from "@marko/runtime-tags/debug/dom";
 const _myObj = /* @__PURE__ */_$.value("myObj", (_scope, myObj) => _$.data(_scope["#text/0"], JSON.stringify(myObj)));
-const _onClick = _scope => {
-  const {
-    x
-  } = _scope;
-  return function () {
-    _x(_scope, x + 1);
-  };
-};
-const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/define-tag-object/template.marko_0_x", _scope => _$.on(_scope["#button/1"], "click", _onClick(_scope)));
+const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/define-tag-object/template.marko_0_x", (_scope, {
+  x
+}) => _$.on(_scope["#button/1"], "click", function () {
+  _x(_scope, x + 1), x;
+}));
 const _x = /* @__PURE__ */_$.state("x", (_scope, x) => {
   _$.data(_scope["#text/2"], x);
   _x_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/define-tag-render-args/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/define-tag-render-args/__snapshots__/dom.expected/template.js
index 6d2adcbb68..7cbb1bbc25 100644
--- a/packages/translator-tags/src/__tests__/fixtures/define-tag-render-args/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/define-tag-render-args/__snapshots__/dom.expected/template.js
@@ -18,15 +18,11 @@ const _expr_Text_x = /* @__PURE__ */_$.intersection(2, _scope => {
   _MyTag_input(_scope, () => [1, "Hello", x]);
 }, () => _MyTag_input);
 const _dynamicTagName = /* @__PURE__ */_$.conditional("#text/0", 0, () => _expr_Text_x);
-const _onClick = _scope => {
-  const {
-    x
-  } = _scope;
-  return function () {
-    _x(_scope, x + 1);
-  };
-};
-const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/define-tag-render-args/template.marko_0_x", _scope => _$.on(_scope["#button/1"], "click", _onClick(_scope)));
+const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/define-tag-render-args/template.marko_0_x", (_scope, {
+  x
+}) => _$.on(_scope["#button/1"], "click", function () {
+  _x(_scope, x + 1), x;
+}));
 const _x = /* @__PURE__ */_$.state("x", (_scope, x) => {
   _$.data(_scope["#text/2"], x);
   _x_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/define-tag-render-attr-signal/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/define-tag-render-attr-signal/__snapshots__/dom.expected/template.js
index c6fcc38d46..f7409bb805 100644
--- a/packages/translator-tags/src/__tests__/fixtures/define-tag-render-attr-signal/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/define-tag-render-attr-signal/__snapshots__/dom.expected/template.js
@@ -15,15 +15,11 @@ const _expr_Text_x = /* @__PURE__ */_$.intersection(2, _scope => {
   }));
 }, () => _MyTag_input);
 const _dynamicTagName = /* @__PURE__ */_$.conditional("#text/0", 0, () => _expr_Text_x);
-const _onClick = _scope => {
-  const {
-    x
-  } = _scope;
-  return function () {
-    _x(_scope, x + 1);
-  };
-};
-const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/define-tag-render-attr-signal/template.marko_0_x", _scope => _$.on(_scope["#button/1"], "click", _onClick(_scope)));
+const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/define-tag-render-attr-signal/template.marko_0_x", (_scope, {
+  x
+}) => _$.on(_scope["#button/1"], "click", function () {
+  _x(_scope, x + 1), x;
+}));
 const _x = /* @__PURE__ */_$.state("x", (_scope, x) => {
   _$.data(_scope["#text/2"], x);
   _x_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/define-tag-render-closure/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/define-tag-render-closure/__snapshots__/dom.expected/template.js
index bde565951e..b74b94c9a2 100644
--- a/packages/translator-tags/src/__tests__/fixtures/define-tag-render-closure/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/define-tag-render-closure/__snapshots__/dom.expected/template.js
@@ -5,15 +5,11 @@ const _x$defineBody = _$.registerSubscriber("packages/translator-tags/src/__test
 const _defineBody = _$.register("packages/translator-tags/src/__tests__/fixtures/define-tag-render-closure/template.marko_1_renderer", /* @__PURE__ */_$.createRendererWithOwner("
     
    ", /* next(1), get */"D ", void 0, () => [_x$defineBody]));
 const _MyTag_input = _$.dynamicTagAttrs("#text/0");
 const _dynamicTagName = /* @__PURE__ */_$.conditional("#text/0", _scope => _MyTag_input(_scope, () => ({})), () => _MyTag_input);
-const _onClick = _scope => {
-  const {
-    x
-  } = _scope;
-  return function () {
-    _x(_scope, x + 1);
-  };
-};
-const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/define-tag-render-closure/template.marko_0_x", _scope => _$.on(_scope["#button/1"], "click", _onClick(_scope)));
+const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/define-tag-render-closure/template.marko_0_x", (_scope, {
+  x
+}) => _$.on(_scope["#button/1"], "click", function () {
+  _x(_scope, x + 1), x;
+}));
 const _x = /* @__PURE__ */_$.state("x", (_scope, x) => {
   _$.data(_scope["#text/2"], x);
   _x_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/define-tag-render/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/define-tag-render/__snapshots__/dom.expected/template.hydrate.js
index 75adea32d4..66314f091b 100644
--- a/packages/translator-tags/src/__tests__/fixtures/define-tag-render/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/define-tag-render/__snapshots__/dom.expected/template.hydrate.js
@@ -1,15 +1,8 @@
-// size: 419 (min) 251 (brotli)
-const _y$defineBody_effect = _$.effect("a0", (_scope) =>
-    _$.on(
-      _scope[2],
-      "click",
-      ((_scope) => {
-        const { 7: y } = _scope;
-        return function () {
-          _y$defineBody(_scope, y + 1);
-        };
-      })(_scope),
-    ),
+// size: 399 (min) 252 (brotli)
+const _y$defineBody_effect = _$.effect("a0", (_scope, { 7: y }) =>
+    _$.on(_scope[2], "click", function () {
+      _y$defineBody(_scope, y + 1);
+    }),
   ),
   _y$defineBody = _$.state(7, (_scope, y) => {
     _$.data(_scope[1], y), _$.data(_scope[3], y), _y$defineBody_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/define-tag-render/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/define-tag-render/__snapshots__/dom.expected/template.js
index a48eb04402..5e263abaea 100644
--- a/packages/translator-tags/src/__tests__/fixtures/define-tag-render/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/define-tag-render/__snapshots__/dom.expected/template.js
@@ -1,15 +1,11 @@
 export const _template_ = "";
 export const _walks_ = /* replace, over(1) */"D%bD";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _onClick = _scope => {
-  const {
-    y
-  } = _scope;
-  return function () {
-    _y$defineBody(_scope, y + 1);
-  };
-};
-const _y$defineBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/define-tag-render/template.marko_1_y", _scope => _$.on(_scope["#button/2"], "click", _onClick(_scope)));
+const _y$defineBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/define-tag-render/template.marko_1_y", (_scope, {
+  y
+}) => _$.on(_scope["#button/2"], "click", function () {
+  _y$defineBody(_scope, y + 1), y;
+}));
 const _y$defineBody = /* @__PURE__ */_$.state("y", (_scope, y) => {
   _$.data(_scope["#text/1"], y);
   _$.data(_scope["#text/3"], y);
diff --git a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/dom.expected/template.hydrate.js
index 4395affd4f..80277b1fa4 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 399 (min) 215 (brotli)
+// size: 379 (min) 205 (brotli)
 const _setup$ifBody2 = (_scope) => {
     _$.data(_scope[0], _scope.$global.x);
   },
@@ -15,17 +15,10 @@ const _setup$ifBody2 = (_scope) => {
   ),
   _if2 = _$.conditional(1, 0),
   _if = _$.conditional(0, 0),
-  _show_effect = _$.effect("a2", (_scope) =>
-    _$.on(
-      _scope[2],
-      "click",
-      ((_scope) => {
-        const { 3: show } = _scope;
-        return function () {
-          _show(_scope, !show);
-        };
-      })(_scope),
-    ),
+  _show_effect = _$.effect("a2", (_scope, { 3: show }) =>
+    _$.on(_scope[2], "click", function () {
+      _show(_scope, !show);
+    }),
   ),
   _show = _$.state(3, (_scope, show) => {
     _show_effect(_scope),
diff --git a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/dom.expected/template.js
index 1db8570b5d..cc5e492e1c 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dollar-global-client/__snapshots__/dom.expected/template.js
@@ -11,15 +11,11 @@ const _setup$ifBody = _scope => {
 const _ifBody = _$.register("packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer(" ", /* next(1), get */"D ", _setup$ifBody));
 const _if2 = /* @__PURE__ */_$.conditional("#text/1", 0);
 const _if = /* @__PURE__ */_$.conditional("#text/0", 0);
-const _onClick = _scope => {
-  const {
-    show
-  } = _scope;
-  return function () {
-    _show(_scope, !show);
-  };
-};
-const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_0_show", _scope => _$.on(_scope["#button/2"], "click", _onClick(_scope)));
+const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dollar-global-client/template.marko_0_show", (_scope, {
+  show
+}) => _$.on(_scope["#button/2"], "click", function () {
+  _show(_scope, !show);
+}));
 const _show = /* @__PURE__ */_$.state("show", (_scope, show) => {
   _show_effect(_scope);
   _if(_scope, show ? _ifBody : null);
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-event-handlers/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-event-handlers/__snapshots__/dom.expected/template.hydrate.js
index 8189976c61..d3bdbdf8df 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-event-handlers/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-event-handlers/__snapshots__/dom.expected/template.hydrate.js
@@ -1,18 +1,14 @@
-// size: 160 (min) 122 (brotli)
-const _clickCount_effect = _$.effect("a0", (_scope) => {
-    const { 2: clickCount } = _scope;
+// size: 126 (min) 114 (brotli)
+const _clickCount_effect = _$.effect("a0", (_scope, { 2: clickCount }) =>
     _$.on(
       _scope[0],
       "click",
       clickCount <= 1 &&
-        ((_scope) => {
-          const { 2: clickCount } = _scope;
-          return () => {
-            _clickCount(_scope, clickCount + 1);
-          };
-        })(_scope),
-    );
-  }),
+        (() => {
+          _clickCount(_scope, clickCount + 1);
+        }),
+    ),
+  ),
   _clickCount = _$.state(2, (_scope, clickCount) => {
     _$.data(_scope[1], clickCount), _clickCount_effect(_scope);
   });
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-event-handlers/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-event-handlers/__snapshots__/dom.expected/template.js
index f992786f8f..135af22b63 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-event-handlers/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-event-handlers/__snapshots__/dom.expected/template.js
@@ -1,20 +1,11 @@
 export const _template_ = "";
 export const _walks_ = /* get, next(1), get, out(1) */" D l";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _onClick = _scope => {
-  const {
-    clickCount
-  } = _scope;
-  return () => {
-    _clickCount(_scope, clickCount + 1);
-  };
-};
-const _clickCount_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-event-handlers/template.marko_0_clickCount", _scope => {
-  const {
-    clickCount
-  } = _scope;
-  _$.on(_scope["#button/0"], "click", clickCount <= 1 ? _onClick(_scope) : false);
-});
+const _clickCount_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-event-handlers/template.marko_0_clickCount", (_scope, {
+  clickCount
+}) => _$.on(_scope["#button/0"], "click", clickCount <= 1 ? () => {
+  _clickCount(_scope, clickCount + 1), clickCount;
+} : false));
 const _clickCount = /* @__PURE__ */_$.state("clickCount", (_scope, clickCount) => {
   _$.data(_scope["#text/1"], clickCount);
   _clickCount_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-native-dynamic-tag/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-native-dynamic-tag/__snapshots__/dom.expected/template.hydrate.js
index 7ec45a7007..fd2b3efd25 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-native-dynamic-tag/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-native-dynamic-tag/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 361 (min) 228 (brotli)
+// size: 341 (min) 225 (brotli)
 const _tagNameBody = _$.register(
     "a0",
     _$.createRendererWithOwner("body content", ""),
@@ -13,17 +13,10 @@ const _tagNameBody = _$.register(
     () => _tagName_input,
   ),
   _dynamicTagName = _$.conditional(0, 0, () => _expr_Text_className),
-  _tagName_effect = _$.effect("a1", (_scope) =>
-    _$.on(
-      _scope[1],
-      "click",
-      ((_scope) => {
-        const { 2: tagName } = _scope;
-        return function () {
-          _tagName(_scope, "span" === tagName ? "div" : "span");
-        };
-      })(_scope),
-    ),
+  _tagName_effect = _$.effect("a1", (_scope, { 2: tagName }) =>
+    _$.on(_scope[1], "click", function () {
+      _tagName(_scope, "span" === tagName ? "div" : "span");
+    }),
   ),
   _tagName = _$.state(
     2,
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-native-dynamic-tag/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-native-dynamic-tag/__snapshots__/dom.expected/template.js
index 48776006ec..c81b14a088 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-native-dynamic-tag/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-native-dynamic-tag/__snapshots__/dom.expected/template.js
@@ -13,15 +13,11 @@ const _expr_Text_className = /* @__PURE__ */_$.intersection(2, _scope => {
 }, () => _tagName_input);
 const _dynamicTagName = /* @__PURE__ */_$.conditional("#text/0", 0, () => _expr_Text_className);
 const _className = /* @__PURE__ */_$.state("className", 0, () => _expr_Text_className);
-const _onClick = _scope => {
-  const {
-    tagName
-  } = _scope;
-  return function () {
-    _tagName(_scope, tagName === "span" ? "div" : "span");
-  };
-};
-const _tagName_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-native-dynamic-tag/template.marko_0_tagName", _scope => _$.on(_scope["#button/1"], "click", _onClick(_scope)));
+const _tagName_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-native-dynamic-tag/template.marko_0_tagName", (_scope, {
+  tagName
+}) => _$.on(_scope["#button/1"], "click", function () {
+  _tagName(_scope, tagName === "span" ? "div" : "span");
+}));
 const _tagName = /* @__PURE__ */_$.state("tagName", (_scope, tagName) => {
   _tagName_effect(_scope);
   _dynamicTagName(_scope, tagName || _tagNameBody(_scope));
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/dom.expected/template.hydrate.js
index bd1ef9752a..c996144cbf 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 307 (min) 189 (brotli)
+// size: 287 (min) 190 (brotli)
 const _tags0_input = _$.dynamicTagAttrs(2),
   _expr_Text_x = _$.intersection(
     2,
@@ -12,17 +12,10 @@ _$.registerBoundSignal(
   "b0",
   _$.value(5, (_scope, y) => _$.data(_scope[3], y)),
 );
-const _x_effect = _$.effect("b1", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 4: x } = _scope;
-        return function () {
-          _x(_scope, x + 1);
-        };
-      })(_scope),
-    ),
+const _x_effect = _$.effect("b1", (_scope, { 4: x }) =>
+    _$.on(_scope[0], "click", function () {
+      _x(_scope, x + 1);
+    }),
   ),
   _x = _$.state(
     4,
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/dom.expected/template.js
index b62e711bc8..2fd1f8dee0 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/__snapshots__/dom.expected/template.js
@@ -12,15 +12,11 @@ const _expr_Text_x = /* @__PURE__ */_$.intersection(2, _scope => {
 }, () => _tags0_input);
 const _dynamicTagName = /* @__PURE__ */_$.conditional("#text/2", _scope => _$.setTagVar(_scope, "#text/2!", _y), () => _expr_Text_x);
 const _y = _$.registerBoundSignal("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/template.marko_0_y/var", /* @__PURE__ */_$.value("y", (_scope, y) => _$.data(_scope["#text/3"], y)));
-const _onClick = _scope => {
-  const {
-    x
-  } = _scope;
-  return function () {
-    _x(_scope, x + 1);
-  };
-};
-const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/template.marko_0_x", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args-tag-var/template.marko_0_x", (_scope, {
+  x
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _x(_scope, x + 1), x;
+}));
 const _x = /* @__PURE__ */_$.state("x", (_scope, x) => {
   _$.data(_scope["#text/1"], x);
   _x_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/template.hydrate.js
index 0fc281859c..d846657957 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 255 (min) 174 (brotli)
+// size: 235 (min) 178 (brotli)
 const _tags0_input = _$.dynamicTagAttrs(2, void 0, 1),
   _expr_Text_x = _$.intersection(
     2,
@@ -8,17 +8,10 @@ const _tags0_input = _$.dynamicTagAttrs(2, void 0, 1),
     },
     () => _tags0_input,
   ),
-  _x_effect = _$.effect("b0", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 3: x } = _scope;
-        return function () {
-          _x(_scope, x + 1);
-        };
-      })(_scope),
-    ),
+  _x_effect = _$.effect("b0", (_scope, { 3: x }) =>
+    _$.on(_scope[0], "click", function () {
+      _x(_scope, x + 1);
+    }),
   ),
   _x = _$.state(
     3,
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/template.js
index 22b2fe7183..c041caa96a 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args/__snapshots__/dom.expected/template.js
@@ -11,15 +11,11 @@ const _expr_Text_x = /* @__PURE__ */_$.intersection(2, _scope => {
   _tags0_input(_scope, () => [x, 'foo']);
 }, () => _tags0_input);
 const _dynamicTagName = /* @__PURE__ */_$.conditional("#text/2", 0, () => _expr_Text_x);
-const _onClick = _scope => {
-  const {
-    x
-  } = _scope;
-  return function () {
-    _x(_scope, x + 1);
-  };
-};
-const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args/template.marko_0_x", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-args/template.marko_0_x", (_scope, {
+  x
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _x(_scope, x + 1), x;
+}));
 const _x = /* @__PURE__ */_$.state("x", (_scope, x) => {
   _$.data(_scope["#text/1"], x);
   _x_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-attr-signal/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-attr-signal/__snapshots__/dom.expected/template.hydrate.js
index fc34f076d9..d613deff79 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-attr-signal/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-attr-signal/__snapshots__/dom.expected/template.hydrate.js
@@ -1,15 +1,8 @@
-// size: 163 (min) 125 (brotli)
-const _className_effect = _$.effect("a0", (_scope) =>
-    _$.on(
-      _scope[1],
-      "click",
-      ((_scope) => {
-        const { 2: className } = _scope;
-        return function () {
-          _className(_scope, "A" === className ? "B" : "A");
-        };
-      })(_scope),
-    ),
+// size: 143 (min) 114 (brotli)
+const _className_effect = _$.effect("a0", (_scope, { 2: className }) =>
+    _$.on(_scope[1], "click", function () {
+      _className(_scope, "A" === className ? "B" : "A");
+    }),
   ),
   _className = _$.state(2, (_scope, className) => {
     _$.classAttr(_scope[0], className), _className_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-attr-signal/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-attr-signal/__snapshots__/dom.expected/template.js
index a96c7dff2c..7c48062a26 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-attr-signal/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-attr-signal/__snapshots__/dom.expected/template.js
@@ -1,15 +1,11 @@
 export const _template_ = "
    paragraph
    ";
 export const _walks_ = /* get, over(1), get, over(1) */"D b b";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _onClick = _scope => {
-  const {
-    className
-  } = _scope;
-  return function () {
-    _className(_scope, className === "A" ? "B" : "A");
-  };
-};
-const _className_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-attr-signal/template.marko_0_className", _scope => _$.on(_scope["#button/1"], "click", _onClick(_scope)));
+const _className_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-attr-signal/template.marko_0_className", (_scope, {
+  className
+}) => _$.on(_scope["#button/1"], "click", function () {
+  _className(_scope, className === "A" ? "B" : "A");
+}));
 const _className = /* @__PURE__ */_$.state("className", (_scope, className) => {
   _$.classAttr(_scope["#p/0"], className);
   _className_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-custom-native/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-custom-native/__snapshots__/dom.expected/template.hydrate.js
index 37cf0a4f62..5084776595 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-custom-native/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-custom-native/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 430 (min) 258 (brotli)
+// size: 410 (min) 249 (brotli)
 const _setup_ = () => {},
   _id_ = _$.value(3, (_scope, id) => _$.data(_scope[0], id)),
   _input_ = _$.value(2, (_scope, input) => _id_(_scope, input.id)),
@@ -17,17 +17,10 @@ const _tagName_input = _$.dynamicTagAttrs(1),
     (_scope) => _tagName_input(_scope, () => ({ id: "dynamic" })),
     () => _tagName_input,
   ),
-  _tagName_effect = _$.effect("b0", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 2: tagName } = _scope;
-        return function () {
-          _tagName(_scope, tagName === child ? "div" : child);
-        };
-      })(_scope),
-    ),
+  _tagName_effect = _$.effect("b0", (_scope, { 2: tagName }) =>
+    _$.on(_scope[0], "click", function () {
+      _tagName(_scope, tagName === child ? "div" : child);
+    }),
   ),
   _tagName = _$.state(
     2,
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-custom-native/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-custom-native/__snapshots__/dom.expected/template.js
index 78dca07b79..c7043538f5 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-custom-native/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-custom-native/__snapshots__/dom.expected/template.js
@@ -6,15 +6,11 @@ const _tagName_input = _$.dynamicTagAttrs("#text/1");
 const _dynamicTagName = /* @__PURE__ */_$.conditional("#text/1", _scope => _tagName_input(_scope, () => ({
   id: "dynamic"
 })), () => _tagName_input);
-const _onClick = _scope => {
-  const {
-    tagName
-  } = _scope;
-  return function () {
-    _tagName(_scope, tagName === child ? "div" : child);
-  };
-};
-const _tagName_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-custom-native/template.marko_0_tagName", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _tagName_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-custom-native/template.marko_0_tagName", (_scope, {
+  tagName
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _tagName(_scope, tagName === child ? "div" : child);
+}));
 const _tagName = /* @__PURE__ */_$.state("tagName", (_scope, tagName) => {
   _tagName_effect(_scope);
   _dynamicTagName(_scope, tagName);
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-custom-tags/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-custom-tags/__snapshots__/dom.expected/template.hydrate.js
index 84b72d0ec5..d1466d263a 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-custom-tags/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-custom-tags/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 675 (min) 293 (brotli)
+// size: 655 (min) 285 (brotli)
 const _setup_$1 = () => {},
   _value_$1 = _$.value(3, (_scope, value) => _$.data(_scope[0], value)),
   _input_$1 = _$.value(2, (_scope, input) => _value_$1(_scope, input.value)),
@@ -35,17 +35,10 @@ const _tagName_input = _$.dynamicTagAttrs(0),
     () => _tagName_input,
   ),
   _dynamicTagName = _$.conditional(0, 0, () => _expr_Text_val),
-  _tagName_effect = _$.effect("c0", (_scope) =>
-    _$.on(
-      _scope[1],
-      "click",
-      ((_scope) => {
-        const { 2: tagName } = _scope;
-        return function () {
-          _tagName(_scope, tagName === child1 ? child2 : child1);
-        };
-      })(_scope),
-    ),
+  _tagName_effect = _$.effect("c0", (_scope, { 2: tagName }) =>
+    _$.on(_scope[1], "click", function () {
+      _tagName(_scope, tagName === child1 ? child2 : child1);
+    }),
   ),
   _tagName = _$.state(
     2,
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-custom-tags/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-custom-tags/__snapshots__/dom.expected/template.js
index 27f5537507..4cfd359796 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-custom-tags/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-custom-tags/__snapshots__/dom.expected/template.js
@@ -14,15 +14,11 @@ const _expr_Text_val = /* @__PURE__ */_$.intersection(2, _scope => {
 }, () => _tagName_input);
 const _dynamicTagName = /* @__PURE__ */_$.conditional("#text/0", 0, () => _expr_Text_val);
 const _val = /* @__PURE__ */_$.state("val", 0, () => _expr_Text_val);
-const _onClick = _scope => {
-  const {
-    tagName
-  } = _scope;
-  return function () {
-    _tagName(_scope, tagName === child1 ? child2 : child1);
-  };
-};
-const _tagName_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-custom-tags/template.marko_0_tagName", _scope => _$.on(_scope["#button/1"], "click", _onClick(_scope)));
+const _tagName_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-custom-tags/template.marko_0_tagName", (_scope, {
+  tagName
+}) => _$.on(_scope["#button/1"], "click", function () {
+  _tagName(_scope, tagName === child1 ? child2 : child1);
+}));
 const _tagName = /* @__PURE__ */_$.state("tagName", (_scope, tagName) => {
   _tagName_effect(_scope);
   _dynamicTagName(_scope, tagName);
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/dom.expected/template.hydrate.js
index 3a5e07f4b9..48166a5ca2 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 238 (min) 161 (brotli)
+// size: 218 (min) 164 (brotli)
 const _tags0_input = _$.dynamicTagAttrs(2),
   _expr_Text_x = _$.intersection(
     2,
@@ -8,17 +8,10 @@ const _tags0_input = _$.dynamicTagAttrs(2),
     },
     () => _tags0_input,
   ),
-  _x_effect = _$.effect("b0", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 3: x } = _scope;
-        return function () {
-          _x(_scope, x + 1);
-        };
-      })(_scope),
-    ),
+  _x_effect = _$.effect("b0", (_scope, { 3: x }) =>
+    _$.on(_scope[0], "click", function () {
+      _x(_scope, x + 1);
+    }),
   ),
   _x = _$.state(
     3,
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/dom.expected/template.js
index 905c28f611..67a73fcc1b 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-single-arg/__snapshots__/dom.expected/template.js
@@ -11,15 +11,11 @@ const _expr_Text_x = /* @__PURE__ */_$.intersection(2, _scope => {
   _tags0_input(_scope, () => x);
 }, () => _tags0_input);
 const _dynamicTagName = /* @__PURE__ */_$.conditional("#text/2", 0, () => _expr_Text_x);
-const _onClick = _scope => {
-  const {
-    x
-  } = _scope;
-  return function () {
-    _x(_scope, x + 1);
-  };
-};
-const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-single-arg/template.marko_0_x", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-single-arg/template.marko_0_x", (_scope, {
+  x
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _x(_scope, x + 1), x;
+}));
 const _x = /* @__PURE__ */_$.state("x", (_scope, x) => {
   _$.data(_scope["#text/1"], x);
   _x_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-sometimes-null/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-sometimes-null/__snapshots__/dom.expected/template.hydrate.js
index 9aa7fc3f39..c1d2f8ae66 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-sometimes-null/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-sometimes-null/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 298 (min) 210 (brotli)
+// size: 278 (min) 197 (brotli)
 const _xBody = _$.register(
     "a0",
     _$.createRendererWithOwner("Body Content", ""),
@@ -9,17 +9,10 @@ const _xBody = _$.register(
     (_scope) => _x_input(_scope, () => ({})),
     () => _x_input,
   ),
-  _x_effect = _$.effect("a1", (_scope) =>
-    _$.on(
-      _scope[1],
-      "click",
-      ((_scope) => {
-        const { 2: x } = _scope;
-        return function () {
-          _x(_scope, x ? null : "div");
-        };
-      })(_scope),
-    ),
+  _x_effect = _$.effect("a1", (_scope, { 2: x }) =>
+    _$.on(_scope[1], "click", function () {
+      _x(_scope, x ? null : "div");
+    }),
   ),
   _x = _$.state(
     2,
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-sometimes-null/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-sometimes-null/__snapshots__/dom.expected/template.js
index ccb5505a32..07af5047e8 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-sometimes-null/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-sometimes-null/__snapshots__/dom.expected/template.js
@@ -4,15 +4,11 @@ import * as _$ from "@marko/runtime-tags/debug/dom";
 const _xBody = _$.register("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-sometimes-null/template.marko_1_renderer", /* @__PURE__ */_$.createRendererWithOwner("Body Content", ""));
 const _x_input = _$.dynamicTagAttrs("#text/0", _xBody);
 const _dynamicTagName = /* @__PURE__ */_$.conditional("#text/0", _scope => _x_input(_scope, () => ({})), () => _x_input);
-const _onClick = _scope => {
-  const {
-    x
-  } = _scope;
-  return function () {
-    _x(_scope, x ? null : "div");
-  };
-};
-const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-sometimes-null/template.marko_0_x", _scope => _$.on(_scope["#button/1"], "click", _onClick(_scope)));
+const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-sometimes-null/template.marko_0_x", (_scope, {
+  x
+}) => _$.on(_scope["#button/1"], "click", function () {
+  _x(_scope, x ? null : "div");
+}));
 const _x = /* @__PURE__ */_$.state("x", (_scope, x) => {
   _x_effect(_scope);
   _dynamicTagName(_scope, x || _xBody(_scope));
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/dom.expected/components/counter.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/dom.expected/components/counter.js
index 48b660c427..b557e10ef0 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/dom.expected/components/counter.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/dom.expected/components/counter.js
@@ -1,18 +1,11 @@
 export const _template_ = "";
 export const _walks_ = /* get, next(1), get, out(1) */" D l";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _valueChange = _$.register("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/components/counter.marko_0/valueChange", _scope => function (_new_x) {
-  _x(_scope, _new_x);
-});
-const _onClick = _scope => {
-  const {
-    x
-  } = _scope;
-  return function () {
-    _x(_scope, x + 1);
-  };
-};
-const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/components/counter.marko_0_x", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/components/counter.marko_0_x", (_scope, {
+  x
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _x(_scope, x + 1), x;
+}));
 const _x = /* @__PURE__ */_$.state("x", (_scope, x) => {
   _$.data(_scope["#text/1"], x);
   _x_effect(_scope);
@@ -22,4 +15,10 @@ export function _setup_(_scope) {
   _x(_scope, 1);
   _$.setTagVarChange(_scope, _valueChange(_scope));
 }
+function _valueChange(_scope) {
+  return _new_x => {
+    _x(_scope, _new_x);
+  };
+}
+_$.register("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/components/counter.marko_0/valueChange", _valueChange);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/components/counter.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/dom.expected/template.hydrate.js
index 519fb99799..9bb16a8947 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/dom.expected/template.hydrate.js
@@ -1,22 +1,8 @@
-// size: 532 (min) 280 (brotli)
-const _valueChange = _$.register(
-    "a0",
-    (_scope) =>
-      function (_new_x) {
-        _x(_scope, _new_x);
-      },
-  ),
-  _x_effect = _$.effect("a1", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 2: x } = _scope;
-        return function () {
-          _x(_scope, x + 1);
-        };
-      })(_scope),
-    ),
+// size: 520 (min) 271 (brotli)
+const _x_effect = _$.effect("a1", (_scope, { 2: x }) =>
+    _$.on(_scope[0], "click", function () {
+      _x(_scope, x + 1);
+    }),
   ),
   _x = _$.state(
     2,
@@ -28,20 +14,26 @@ const _valueChange = _$.register(
 function _setup_(_scope) {
   _x(_scope, 1), _$.setTagVarChange(_scope, _valueChange(_scope));
 }
+function _valueChange(_scope) {
+  return (_new_x) => {
+    _x(_scope, _new_x);
+  };
+}
+_$.register("a0", _valueChange);
 var Counter = _$.createTemplate(
   "a",
   "",
   " D l",
   _setup_,
 );
-_$.register("b0", function () {
-  return Counter;
-}),
-  _$.dynamicTagAttrs(0),
+_$.dynamicTagAttrs(0),
   _$.registerBoundSignal("b1", (_scope, count) => {}),
   _$.effect("b2", (_scope) =>
     _$.on(_scope[1], "click", function () {
       _$.tagVarSignalChange(_scope["0!"], 0);
     }),
   ),
+  _$.register("b0", function () {
+    return Counter;
+  }),
   init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/dom.expected/template.js
index ea3e8c4546..bf27ebe034 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/dom.expected/template.js
@@ -1,10 +1,7 @@
 export const _template_ = "";
 export const _walks_ = /* replace, over(1), get, over(1) */"D%b b";
-_$.register("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/template.marko_0/getCounter", getCounter);
 import Counter from "./components/counter.marko";
-function getCounter() {
-  return Counter; // breaks tag name analysis.
-}
+const getCounter = _getCounter;
 import * as _$ from "@marko/runtime-tags/debug/dom";
 const _getCounter_input = _$.dynamicTagAttrs("#text/0");
 const _dynamicTagName = /* @__PURE__ */_$.conditional("#text/0", _scope => {
@@ -19,4 +16,8 @@ export function _setup_(_scope) {
   _setup__effect(_scope);
   _dynamicTagName(_scope, getCounter());
 }
+function _getCounter() {
+  return Counter; // breaks tag name analysis.
+}
+_$.register("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/template.marko_0/getCounter", _getCounter);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/html.expected/components/counter.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/html.expected/components/counter.js
index 12c0ee747e..320118a385 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/html.expected/components/counter.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/html.expected/components/counter.js
@@ -8,7 +8,7 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   _$.writeScope(_scope0_id, {
     "x": x,
     "/": _tagVar,
-    "@": _$.register(function (_new_x) {
+    "@": _$.register(_new_x => {
       x = _new_x;
     }, "packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/components/counter.marko_0/valueChange", _scope0_id)
   });
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/html.expected/template.js
index 37939df3ae..c5aca16ad8 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/html.expected/template.js
@@ -2,10 +2,10 @@ import Counter from "./components/counter.marko";
 function getCounter() {
   return Counter; // breaks tag name analysis.
 }
+_$.register(getCounter, "packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/template.marko_0/getCounter");
 import * as _$ from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _scope0_id = _$.nextScopeId();
-  _$.register(getCounter, "packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/template.marko_0/getCounter");
   const _dynamicScope = _$.peekNextScope();
   const count = _$.dynamicTagInput(_dynamicScope, getCounter(), {}, void 0, _$.register(() => {}, "packages/translator-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/template.marko_0_count/var", _scope0_id));
   _$.write(`${_$.markResumeControlEnd(_scope0_id, "#text/0")}${_$.markResumeNode(_scope0_id, "#button/1")}`);
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-with-updating-body/__snapshots__/dom.expected/components/counter.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-with-updating-body/__snapshots__/dom.expected/components/counter.js
index bf596a31d2..238884d6e4 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-with-updating-body/__snapshots__/dom.expected/components/counter.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-with-updating-body/__snapshots__/dom.expected/components/counter.js
@@ -1,15 +1,11 @@
 export const _template_ = "";
 export const _walks_ = /* get, next(1), get, out(1) */" D l";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _onClick = _scope => {
-  const {
-    count
-  } = _scope;
-  return function () {
-    _count(_scope, count + 1);
-  };
-};
-const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-with-updating-body/components/counter.marko_0_count", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-with-updating-body/components/counter.marko_0_count", (_scope, {
+  count
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _count(_scope, count + 1), count;
+}));
 const _count = /* @__PURE__ */_$.state("count", (_scope, count) => {
   _$.data(_scope["#text/1"], count);
   _count_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-with-updating-body/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-with-updating-body/__snapshots__/dom.expected/template.hydrate.js
index 9363b15bb9..434afd682d 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-with-updating-body/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-with-updating-body/__snapshots__/dom.expected/template.hydrate.js
@@ -1,15 +1,8 @@
-// size: 502 (min) 268 (brotli)
-const _count_effect = _$.effect("a0", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 2: count } = _scope;
-        return function () {
-          _count(_scope, count + 1);
-        };
-      })(_scope),
-    ),
+// size: 462 (min) 270 (brotli)
+const _count_effect = _$.effect("a0", (_scope, { 2: count }) =>
+    _$.on(_scope[0], "click", function () {
+      _count(_scope, count + 1);
+    }),
   ),
   _count = _$.state(2, (_scope, count) => {
     _$.data(_scope[1], count), _count_effect(_scope);
@@ -33,17 +26,10 @@ const _setup$tagNameBody = (_scope) => {
     (_scope) => _tagName_input(_scope, () => ({})),
     () => _tagName_input,
   ),
-  _tagName_effect = _$.effect("b1", (_scope) =>
-    _$.on(
-      _scope[1],
-      "click",
-      ((_scope) => {
-        const { 2: tagName } = _scope;
-        return function () {
-          _tagName(_scope, "span" === tagName ? "div" : "span");
-        };
-      })(_scope),
-    ),
+  _tagName_effect = _$.effect("b1", (_scope, { 2: tagName }) =>
+    _$.on(_scope[1], "click", function () {
+      _tagName(_scope, "span" === tagName ? "div" : "span");
+    }),
   ),
   _tagName = _$.state(
     2,
diff --git a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-with-updating-body/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-with-updating-body/__snapshots__/dom.expected/template.js
index b8d0d431e2..08aec03b1f 100644
--- a/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-with-updating-body/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/dynamic-tag-with-updating-body/__snapshots__/dom.expected/template.js
@@ -8,15 +8,11 @@ const _setup$tagNameBody = _scope => {
 const _tagNameBody = _$.register("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-with-updating-body/template.marko_1_renderer", /* @__PURE__ */_$.createRendererWithOwner(`${_counter_template}`, /* beginChild, _counter_walks, endChild */`/${_counter_walks}&`, _setup$tagNameBody));
 const _tagName_input = _$.dynamicTagAttrs("#text/0", _tagNameBody);
 const _dynamicTagName = /* @__PURE__ */_$.conditional("#text/0", _scope => _tagName_input(_scope, () => ({})), () => _tagName_input);
-const _onClick = _scope => {
-  const {
-    tagName
-  } = _scope;
-  return function () {
-    _tagName(_scope, tagName === "span" ? "div" : "span");
-  };
-};
-const _tagName_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-with-updating-body/template.marko_0_tagName", _scope => _$.on(_scope["#button/1"], "click", _onClick(_scope)));
+const _tagName_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/dynamic-tag-with-updating-body/template.marko_0_tagName", (_scope, {
+  tagName
+}) => _$.on(_scope["#button/1"], "click", function () {
+  _tagName(_scope, tagName === "span" ? "div" : "span");
+}));
 const _tagName = /* @__PURE__ */_$.state("tagName", (_scope, tagName) => {
   _tagName_effect(_scope);
   _dynamicTagName(_scope, tagName || _tagNameBody(_scope));
diff --git a/packages/translator-tags/src/__tests__/fixtures/effect-counter/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/effect-counter/__snapshots__/dom.expected/template.hydrate.js
index 506f9ec7cd..a779e149b5 100644
--- a/packages/translator-tags/src/__tests__/fixtures/effect-counter/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/effect-counter/__snapshots__/dom.expected/template.hydrate.js
@@ -1,17 +1,9 @@
-// size: 192 (min) 120 (brotli)
-const _clickCount_effect = _$.effect("a0", (_scope) => {
-    const { 1: clickCount } = _scope;
+// size: 159 (min) 109 (brotli)
+const _clickCount_effect = _$.effect("a0", (_scope, { 1: clickCount }) => {
     (document.getElementById("button").textContent = clickCount),
-      _$.on(
-        _scope[0],
-        "click",
-        ((_scope) => {
-          const { 1: clickCount } = _scope;
-          return function () {
-            _clickCount(_scope, clickCount + 1);
-          };
-        })(_scope),
-      );
+      _$.on(_scope[0], "click", function () {
+        _clickCount(_scope, clickCount + 1);
+      });
   }),
   _clickCount = _$.state(1, (_scope, clickCount) => _clickCount_effect(_scope));
 init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/effect-counter/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/effect-counter/__snapshots__/dom.expected/template.js
index 10ef2b87da..21bae23e72 100644
--- a/packages/translator-tags/src/__tests__/fixtures/effect-counter/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/effect-counter/__snapshots__/dom.expected/template.js
@@ -1,20 +1,13 @@
 export const _template_ = "
    ";
 export const _walks_ = /* next(1), get, out(1) */"D l";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _onClick = _scope => {
-  const {
-    clickCount
-  } = _scope;
-  return function () {
-    _clickCount(_scope, clickCount + 1);
-  };
-};
-const _clickCount_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/effect-counter/template.marko_0_clickCount", _scope => {
-  const {
-    clickCount
-  } = _scope;
+const _clickCount_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/effect-counter/template.marko_0_clickCount", (_scope, {
+  clickCount
+}) => {
   document.getElementById("button").textContent = clickCount;
-  _$.on(_scope["#button/0"], "click", _onClick(_scope));
+  _$.on(_scope["#button/0"], "click", function () {
+    _clickCount(_scope, clickCount + 1), clickCount;
+  });
 });
 const _clickCount = /* @__PURE__ */_$.state("clickCount", (_scope, clickCount) => _clickCount_effect(_scope));
 export function _setup_(_scope) {
diff --git a/packages/translator-tags/src/__tests__/fixtures/effect-serialize-promise/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/effect-serialize-promise/__snapshots__/dom.expected/template.hydrate.js
index e72c1adfda..2c2d154ed2 100644
--- a/packages/translator-tags/src/__tests__/fixtures/effect-serialize-promise/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/effect-serialize-promise/__snapshots__/dom.expected/template.hydrate.js
@@ -1,10 +1,7 @@
-// size: 120 (min) 83 (brotli)
-_$.effect("a0", (_scope) => {
-  ((_scope) => {
-    const { 0: promise } = _scope;
-    return async () => {
-      document.getElementById("ref").textContent = await promise;
-    };
-  })(_scope)();
-}),
+// size: 96 (min) 75 (brotli)
+_$.effect("a0", ({ 0: promise }) =>
+  (async () => {
+    document.getElementById("ref").textContent = await promise;
+  })(),
+),
   init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/effect-serialize-promise/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/effect-serialize-promise/__snapshots__/dom.expected/template.js
index 866392d12b..79b91b3216 100644
--- a/packages/translator-tags/src/__tests__/fixtures/effect-serialize-promise/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/effect-serialize-promise/__snapshots__/dom.expected/template.js
@@ -2,20 +2,11 @@ export const _template_ = "
    0
    ";
 export const _walks_ = /* over(1) */"Db";
 import { resolveAfter } from "../../utils/resolve";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _effect = _scope => {
-  const {
-    promise
-  } = _scope;
-  return async () => {
-    document.getElementById("ref").textContent = await promise;
-  };
-};
-const _promise_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/effect-serialize-promise/template.marko_0_promise", _scope => {
-  const {
-    promise
-  } = _scope;
-  _effect(_scope)();
-});
+const _promise_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/effect-serialize-promise/template.marko_0_promise", ({
+  promise
+}) => (async () => {
+  document.getElementById("ref").textContent = await promise;
+})());
 const _promise = /* @__PURE__ */_$.value("promise", (_scope, promise) => _promise_effect(_scope));
 export function _setup_(_scope) {
   _promise(_scope, Promise.resolve("hello"));
diff --git a/packages/translator-tags/src/__tests__/fixtures/effect-tag/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/effect-tag/__snapshots__/dom.expected/template.hydrate.js
index 89ed36a8e1..c7bda71870 100644
--- a/packages/translator-tags/src/__tests__/fixtures/effect-tag/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/effect-tag/__snapshots__/dom.expected/template.hydrate.js
@@ -1,6 +1,3 @@
-// size: 84 (min) 66 (brotli)
-_$.effect("a0", (_scope) => {
-  const { 0: x } = _scope;
-  document.getElementById("ref").textContent = x;
-}),
+// size: 75 (min) 73 (brotli)
+_$.effect("a0", ({ 0: x }) => (document.getElementById("ref").textContent = x)),
   init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/effect-tag/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/effect-tag/__snapshots__/dom.expected/template.js
index 1af264023d..14d214de41 100644
--- a/packages/translator-tags/src/__tests__/fixtures/effect-tag/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/effect-tag/__snapshots__/dom.expected/template.js
@@ -1,12 +1,9 @@
 export const _template_ = "
    0
    ";
 export const _walks_ = /* over(1) */"b";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/effect-tag/template.marko_0_x", _scope => {
-  const {
-    x
-  } = _scope;
-  document.getElementById("ref").textContent = x;
-});
+const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/effect-tag/template.marko_0_x", ({
+  x
+}) => document.getElementById("ref").textContent = x);
 const _x = /* @__PURE__ */_$.state("x", (_scope, x) => _x_effect(_scope));
 export function _setup_(_scope) {
   _x(_scope, 1);
diff --git a/packages/translator-tags/src/__tests__/fixtures/error-basic-scriptlet/__snapshots__/dom.expected/template.error.txt b/packages/translator-tags/src/__tests__/fixtures/error-basic-scriptlet/__snapshots__/dom.expected/template.error.txt
new file mode 100644
index 0000000000..6de8d5b9b4
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/error-basic-scriptlet/__snapshots__/dom.expected/template.error.txt
@@ -0,0 +1,9 @@
+
+    at packages/translator-tags/src/__tests__/fixtures/error-basic-scriptlet/template.marko:3:3
+      1 | 
    
+      2 |   
+    > 3 |   $ const doubleCount = clickCount * 2;
+        |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Scriptlets are not supported when using the tags api.
+      4 |   
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/error-basic-scriptlet/__snapshots__/html.expected/template.error.txt b/packages/translator-tags/src/__tests__/fixtures/error-basic-scriptlet/__snapshots__/html.expected/template.error.txt
new file mode 100644
index 0000000000..6de8d5b9b4
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/error-basic-scriptlet/__snapshots__/html.expected/template.error.txt
@@ -0,0 +1,9 @@
+
+    at packages/translator-tags/src/__tests__/fixtures/error-basic-scriptlet/template.marko:3:3
+      1 | 
    
+      2 |   
+    > 3 |   $ const doubleCount = clickCount * 2;
+        |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Scriptlets are not supported when using the tags api.
+      4 |   
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-scriptlet/template.marko b/packages/translator-tags/src/__tests__/fixtures/error-basic-scriptlet/template.marko
similarity index 100%
rename from packages/translator-tags/src/__tests__/fixtures/basic-scriptlet/template.marko
rename to packages/translator-tags/src/__tests__/fixtures/error-basic-scriptlet/template.marko
diff --git a/packages/translator-tags/src/__tests__/fixtures/error-basic-scriptlet/test.ts b/packages/translator-tags/src/__tests__/fixtures/error-basic-scriptlet/test.ts
new file mode 100644
index 0000000000..e4595ef7d0
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/error-basic-scriptlet/test.ts
@@ -0,0 +1 @@
+export const error_compiler = true;
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-by/__snapshots__/.name-cache.json b/packages/translator-tags/src/__tests__/fixtures/for-by/__snapshots__/.name-cache.json
index a846efa813..71e09bf1bf 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-by/__snapshots__/.name-cache.json
+++ b/packages/translator-tags/src/__tests__/fixtures/for-by/__snapshots__/.name-cache.json
@@ -32,7 +32,11 @@
       "$_for5": "A",
       "$_for4": "B",
       "$_for3": "C",
-      "$_for2": "D"
+      "$_for2": "D",
+      "$_getStringBy": "E",
+      "$_anonymous": "F",
+      "$_getFunctionBy": "G",
+      "$_getMissingBy": "H"
     }
   }
 }
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-by/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/for-by/__snapshots__/dom.expected/template.hydrate.js
index 09d0b63be3..9133113829 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-by/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/for-by/__snapshots__/dom.expected/template.hydrate.js
@@ -1,15 +1,8 @@
-// size: 1304 (min) 382 (brotli)
-function getStringBy() {
-  return "id";
-}
-function getFunctionBy() {
-  return _$.register("a2", (item) => item.id);
-}
-function getMissingBy() {}
-_$.register("a3", getMissingBy),
-  _$.register("a1", getFunctionBy),
-  _$.register("a0", getStringBy);
-const _text$forBody5 = _$.value(3, (_scope, text) => _$.data(_scope[0], text)),
+// size: 1312 (min) 379 (brotli)
+const getStringBy = _getStringBy,
+  getFunctionBy = _getFunctionBy,
+  getMissingBy = _getMissingBy,
+  _text$forBody5 = _$.value(3, (_scope, text) => _$.data(_scope[0], text)),
   _pattern_5$forBody = _$.value(2, (_scope, _pattern_5) =>
     _text$forBody5(_scope, _pattern_5.text),
   ),
@@ -69,24 +62,31 @@ const _text$forBody5 = _$.value(3, (_scope, text) => _$.data(_scope[0], text)),
   _for3 = _$.loopOf(2, _forBody3),
   _for2 = _$.loopOf(1, _forBody2),
   _for = _$.loopOf(0, _forBody),
-  _items_effect = _$.effect("a9", (_scope) =>
-    _$.on(
-      _scope[5],
-      "click",
-      ((_scope) => {
-        const { 6: items } = _scope;
-        return function () {
-          _items(_scope, [...items.slice(1), items[0]]);
-        };
-      })(_scope),
-    ),
+  _items_effect = _$.effect("a9", (_scope, { 6: items }) =>
+    _$.on(_scope[5], "click", function () {
+      _items(_scope, [...items.slice(1), items[0]]);
+    }),
   ),
   _items = _$.state(6, (_scope, items) => {
     _items_effect(_scope),
       _for(_scope, [items, "id"]),
       _for2(_scope, [items, (item) => item.id]),
-      _for3(_scope, [items, "id"]),
+      _for3(_scope, [items, getStringBy()]),
       _for4(_scope, [items, getFunctionBy()]),
-      _for5(_scope, [items, void 0]);
+      _for5(_scope, [items, getMissingBy()]);
   });
-init();
+function _getStringBy() {
+  return "id";
+}
+function _anonymous(item) {
+  return item.id;
+}
+function _getFunctionBy() {
+  return _anonymous;
+}
+function _getMissingBy() {}
+_$.register("a0", _getStringBy),
+  _$.register("a2", _anonymous),
+  _$.register("a1", _getFunctionBy),
+  _$.register("a3", _getMissingBy),
+  init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-by/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/for-by/__snapshots__/dom.expected/template.js
index 63464df8bb..ba6b053fca 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-by/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/for-by/__snapshots__/dom.expected/template.js
@@ -1,17 +1,8 @@
 export const _template_ = "
    ";
 export const _walks_ = /* next(1), get, over(1), get, over(1), get, over(1), get, over(1), get, over(1), get, out(1) */"D b b b b b l";
-_$.register("packages/translator-tags/src/__tests__/fixtures/for-by/template.marko_0/getMissingBy", getMissingBy);
-_$.register("packages/translator-tags/src/__tests__/fixtures/for-by/template.marko_0/getFunctionBy", getFunctionBy);
-_$.register("packages/translator-tags/src/__tests__/fixtures/for-by/template.marko_0/getStringBy", getStringBy);
-function getStringBy() {
-  return "id";
-}
-function getFunctionBy() {
-  return _$.register("packages/translator-tags/src/__tests__/fixtures/for-by/template.marko_0/anonymous", item => item.id);
-}
-function getMissingBy() {
-  return undefined;
-}
+const getStringBy = _getStringBy;
+const getFunctionBy = _getFunctionBy;
+const getMissingBy = _getMissingBy;
 import * as _$ from "@marko/runtime-tags/debug/dom";
 const _text$forBody5 = /* @__PURE__ */_$.value("text", (_scope, text) => _$.data(_scope["#text/0"], text));
 const _pattern_5$forBody = /* @__PURE__ */_$.value("_pattern_5", (_scope, _pattern_5) => _text$forBody5(_scope, _pattern_5.text));
@@ -38,15 +29,11 @@ const _for4 = /* @__PURE__ */_$.loopOf("#div/3", _forBody4);
 const _for3 = /* @__PURE__ */_$.loopOf("#div/2", _forBody3);
 const _for2 = /* @__PURE__ */_$.loopOf("#div/1", _forBody2);
 const _for = /* @__PURE__ */_$.loopOf("#div/0", _forBody);
-const _onClick = _scope => {
-  const {
-    items
-  } = _scope;
-  return function () {
-    _items(_scope, [...items.slice(1), items[0]]);
-  };
-};
-const _items_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/for-by/template.marko_0_items", _scope => _$.on(_scope["#button/5"], "click", _onClick(_scope)));
+const _items_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/for-by/template.marko_0_items", (_scope, {
+  items
+}) => _$.on(_scope["#button/5"], "click", function () {
+  _items(_scope, [...items.slice(1), items[0]]);
+}));
 const _items = /* @__PURE__ */_$.state("items", (_scope, items) => {
   _items_effect(_scope);
   _for(_scope, [items, "id"]);
@@ -67,4 +54,20 @@ export function _setup_(_scope) {
     text: "third"
   }]);
 }
+function _getStringBy() {
+  return "id";
+}
+function _anonymous(item) {
+  return item.id;
+}
+function _getFunctionBy() {
+  return _anonymous;
+}
+function _getMissingBy() {
+  return undefined;
+}
+_$.register("packages/translator-tags/src/__tests__/fixtures/for-by/template.marko_0/getStringBy", _getStringBy);
+_$.register("packages/translator-tags/src/__tests__/fixtures/for-by/template.marko_0/anonymous", _anonymous);
+_$.register("packages/translator-tags/src/__tests__/fixtures/for-by/template.marko_0/getFunctionBy", _getFunctionBy);
+_$.register("packages/translator-tags/src/__tests__/fixtures/for-by/template.marko_0/getMissingBy", _getMissingBy);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/for-by/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-by/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/for-by/__snapshots__/html.expected/template.js
index e9a7bbdd3e..9a841b1545 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-by/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/for-by/__snapshots__/html.expected/template.js
@@ -1,18 +1,18 @@
 function getStringBy() {
   return "id";
 }
+_$.register(getStringBy, "packages/translator-tags/src/__tests__/fixtures/for-by/template.marko_0/getStringBy");
 function getFunctionBy() {
   return _$.register(item => item.id, "packages/translator-tags/src/__tests__/fixtures/for-by/template.marko_0/anonymous");
 }
+_$.register(getFunctionBy, "packages/translator-tags/src/__tests__/fixtures/for-by/template.marko_0/getFunctionBy");
 function getMissingBy() {
   return undefined;
 }
+_$.register(getMissingBy, "packages/translator-tags/src/__tests__/fixtures/for-by/template.marko_0/getMissingBy");
 import * as _$ from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _scope0_id = _$.nextScopeId();
-  _$.register(getMissingBy, "packages/translator-tags/src/__tests__/fixtures/for-by/template.marko_0/getMissingBy");
-  _$.register(getFunctionBy, "packages/translator-tags/src/__tests__/fixtures/for-by/template.marko_0/getFunctionBy");
-  _$.register(getStringBy, "packages/translator-tags/src/__tests__/fixtures/for-by/template.marko_0/getStringBy");
   const items = [{
     id: 0,
     text: "first"
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-destructure/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/for-destructure/__snapshots__/dom.expected/template.hydrate.js
index 8cff3964d9..ba3336e0f3 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-destructure/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/for-destructure/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 546 (min) 269 (brotli)
+// size: 498 (min) 257 (brotli)
 const _description$forBody = _$.value(5, (_scope, description) =>
     _$.data(_scope[1], description),
   ),
@@ -21,30 +21,16 @@ const _description$forBody = _$.value(5, (_scope, description) =>
     ),
   ),
   _for = _$.loopOf(0, _forBody),
-  _items_effect = _$.effect("a1", (_scope) => {
-    _$.on(
-      _scope[1],
-      "click",
-      ((_scope) => {
-        const { 3: items } = _scope;
-        return function () {
-          _items(_scope, [
-            ...items,
-            { name: "JavaScript", description: "Java, but scriptier" },
-          ]);
-        };
-      })(_scope),
-    ),
-      _$.on(
-        _scope[2],
-        "click",
-        ((_scope) => {
-          const { 3: items } = _scope;
-          return function () {
-            _items(_scope, items.slice(0, -1));
-          };
-        })(_scope),
-      );
+  _items_effect = _$.effect("a1", (_scope, { 3: items }) => {
+    _$.on(_scope[1], "click", function () {
+      _items(_scope, [
+        ...items,
+        { name: "JavaScript", description: "Java, but scriptier" },
+      ]);
+    }),
+      _$.on(_scope[2], "click", function () {
+        _items(_scope, items.slice(0, -1));
+      });
   }),
   _items = _$.state(3, (_scope, items) => {
     _items_effect(_scope), _for(_scope, [items]);
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-destructure/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/for-destructure/__snapshots__/dom.expected/template.js
index a491a99893..b8dfcaf500 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-destructure/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/for-destructure/__snapshots__/dom.expected/template.js
@@ -10,28 +10,18 @@ const _pattern_$forBody = /* @__PURE__ */_$.value("_pattern_", (_scope, _pattern
 const _params_2$forBody = /* @__PURE__ */_$.value("_params_2", (_scope, _params_2) => _pattern_$forBody(_scope, _params_2?.[0]));
 const _forBody = _$.register("packages/translator-tags/src/__tests__/fixtures/for-destructure/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer("
    : 
    ", /* next(1), replace, over(2), replace */"D%c%", void 0, void 0, () => _params_2$forBody));
 const _for = /* @__PURE__ */_$.loopOf("#text/0", _forBody);
-const _onClick = _scope => {
-  const {
-    items
-  } = _scope;
-  return function () {
+const _items_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/for-destructure/template.marko_0_items", (_scope, {
+  items
+}) => {
+  _$.on(_scope["#button/1"], "click", function () {
     _items(_scope, [...items, {
       name: "JavaScript",
       description: "Java, but scriptier"
     }]);
-  };
-};
-const _onClick2 = _scope => {
-  const {
-    items
-  } = _scope;
-  return function () {
+  });
+  _$.on(_scope["#button/2"], "click", function () {
     _items(_scope, items.slice(0, -1));
-  };
-};
-const _items_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/for-destructure/template.marko_0_items", _scope => {
-  _$.on(_scope["#button/1"], "click", _onClick(_scope));
-  _$.on(_scope["#button/2"], "click", _onClick2(_scope));
+  });
 });
 const _items = /* @__PURE__ */_$.state("items", (_scope, items) => {
   _items_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-event-handler/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/for-event-handler/__snapshots__/dom.expected/template.hydrate.js
index 78eb58d4d6..b7de57e68b 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-event-handler/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/for-event-handler/__snapshots__/dom.expected/template.hydrate.js
@@ -1,21 +1,12 @@
-// size: 392 (min) 229 (brotli)
+// size: 372 (min) 223 (brotli)
 const _i$forBody = _$.value(3, (_scope, i) => _$.data(_scope[1], i)),
   _params_2$forBody = _$.value(2, (_scope, _params_2) =>
     _i$forBody(_scope, _params_2[0]),
   ),
-  _num$forBody_effect = _$.effect("a0", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const {
-          _: { 1: num },
-        } = _scope;
-        return function () {
-          _num(_scope._, num + 1);
-        };
-      })(_scope),
-    ),
+  _num$forBody_effect = _$.effect("a0", (_scope, { _: { 1: num } }) =>
+    _$.on(_scope[0], "click", function () {
+      _num(_scope._, num + 1);
+    }),
   ),
   _num$forBody = _$.closure(1, (_scope, num) => _num$forBody_effect(_scope)),
   _forBody = _$.register(
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-event-handler/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/for-event-handler/__snapshots__/dom.expected/template.js
index 4427f198e6..a0c26fe6e7 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-event-handler/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/for-event-handler/__snapshots__/dom.expected/template.js
@@ -3,17 +3,13 @@ export const _walks_ = /* replace, over(1) */"D%bD";
 import * as _$ from "@marko/runtime-tags/debug/dom";
 const _i$forBody = /* @__PURE__ */_$.value("i", (_scope, i) => _$.data(_scope["#text/1"], i));
 const _params_2$forBody = /* @__PURE__ */_$.value("_params_2", (_scope, _params_2) => _i$forBody(_scope, _params_2[0]));
-const _onClick = _scope => {
-  const {
-    _: {
-      num
-    }
-  } = _scope;
-  return function () {
-    _num(_scope._, num + 1);
-  };
-};
-const _num$forBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/for-event-handler/template.marko_1_num", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _num$forBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/for-event-handler/template.marko_1_num", (_scope, {
+  _: {
+    num
+  }
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _num(_scope._, num + 1), num;
+}));
 const _num$forBody = /* @__PURE__ */_$.closure("num", (_scope, num) => _num$forBody_effect(_scope));
 const _forBody = _$.register("packages/translator-tags/src/__tests__/fixtures/for-event-handler/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer("", /* get, next(1), get */" D ", void 0, () => [_num$forBody], () => _params_2$forBody));
 const _for = /* @__PURE__ */_$.loopTo("#text/0", _forBody);
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-comment-counter/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/html-comment-counter/__snapshots__/dom.expected/template.hydrate.js
index 483f4c2fd0..3226165c68 100644
--- a/packages/translator-tags/src/__tests__/fixtures/html-comment-counter/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/html-comment-counter/__snapshots__/dom.expected/template.hydrate.js
@@ -1,15 +1,8 @@
-// size: 182 (min) 130 (brotli)
-const _count_effect = _$.effect("a0", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 3: count } = _scope;
-        return function () {
-          _count(_scope, count + 1);
-        };
-      })(_scope),
-    ),
+// size: 162 (min) 129 (brotli)
+const _count_effect = _$.effect("a0", (_scope, { 3: count }) =>
+    _$.on(_scope[0], "click", function () {
+      _count(_scope, count + 1);
+    }),
   ),
   _count = _$.state(3, (_scope, count) => {
     _$.data(_scope[1], count),
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-comment-counter/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/html-comment-counter/__snapshots__/dom.expected/template.js
index 45cccfb1fa..dfeca8c3d4 100644
--- a/packages/translator-tags/src/__tests__/fixtures/html-comment-counter/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/html-comment-counter/__snapshots__/dom.expected/template.js
@@ -1,15 +1,11 @@
 export const _template_ = "
    ";
 export const _walks_ = /* next(1), get, next(1), get, out(1), get, out(1) */"D D l l";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _onClick = _scope => {
-  const {
-    count
-  } = _scope;
-  return function () {
-    _count(_scope, count + 1);
-  };
-};
-const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/html-comment-counter/template.marko_0_count", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/html-comment-counter/template.marko_0_count", (_scope, {
+  count
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _count(_scope, count + 1), count;
+}));
 const _count = /* @__PURE__ */_$.state("count", (_scope, count) => {
   _$.data(_scope["#text/1"], count);
   _$.data(_scope["#comment/2"], `${count} + ${count} = ${count + count}`);
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/.name-cache.json b/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/.name-cache.json
new file mode 100644
index 0000000000..bf2d85114c
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/.name-cache.json
@@ -0,0 +1,11 @@
+{
+  "vars": {
+    "props": {
+      "$_$": "r",
+      "$init": "t",
+      "$_count$htmlScriptBody": "e",
+      "$_count_effect": "n",
+      "$_count": "o"
+    }
+  }
+}
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/csr-sanitized.expected.md b/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/csr-sanitized.expected.md
new file mode 100644
index 0000000000..3a30289e02
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/csr-sanitized.expected.md
@@ -0,0 +1,28 @@
+# Render {}
+```html
+
+```
+
+
+# Render 
+container.querySelector("script").click()
+
+```html
+
+```
+
+
+# Render 
+container.querySelector("script").click()
+
+```html
+
+```
+
+
+# Render 
+container.querySelector("script").click()
+
+```html
+
+```
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/csr.expected.md b/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/csr.expected.md
new file mode 100644
index 0000000000..52289eab4d
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/csr.expected.md
@@ -0,0 +1,99 @@
+# Render {}
+```html
+
+
+
+```
+
+# Mutations
+```
+inserted #comment0, script1, #comment2
+```
+
+
+# Render 
+container.querySelector("script").click()
+
+```html
+
+
+
+```
+
+# Mutations
+```
+removed #text in script1
+inserted script1/#text0
+```
+
+
+# Render 
+container.querySelector("script").click()
+
+```html
+
+
+
+```
+
+# Mutations
+```
+removed #text in script1
+inserted script1/#text0
+```
+
+
+# Render 
+container.querySelector("script").click()
+
+```html
+
+
+
+```
+
+# Mutations
+```
+removed #text in script1
+inserted script1/#text0
+```
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/dom.expected/template.hydrate.js
new file mode 100644
index 0000000000..bcdbce1efe
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/dom.expected/template.hydrate.js
@@ -0,0 +1,26 @@
+// size: 363 (min) 219 (brotli)
+const _count$htmlScriptBody = _$.registerSubscriber(
+  "a1",
+  _$.dynamicClosure(1, 0),
+);
+_$.register(
+  "a2",
+  _$.createRendererWithOwner("", "", void 0, () => [_count$htmlScriptBody]),
+);
+const _count_effect = _$.effect("a3", (_scope, { 1: count }) =>
+    _$.on(_scope[0], "click", function () {
+      _count(_scope, count + 1);
+    }),
+  ),
+  _count = _$.state(
+    1,
+    (_scope, count) => {
+      _$.textContent(
+        _scope[0],
+        `\n  {\n    "imports": {\n      "${count}": "https://markojs.com",\n    }\n  }\n`,
+      ),
+        _count_effect(_scope);
+    },
+    () => _$.dynamicSubscribers(1),
+  );
+init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/dom.expected/template.js
new file mode 100644
index 0000000000..4a60558b6a
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/dom.expected/template.js
@@ -0,0 +1,24 @@
+export const _template_ = "";
+export const _walks_ = /* get, over(1) */"D bD";
+import * as _$ from "@marko/runtime-tags/debug/dom";
+const _count$htmlScriptBody = _$.registerSubscriber("packages/translator-tags/src/__tests__/fixtures/html-script/template.marko_1_count/subscriber", /* @__PURE__ */_$.dynamicClosure("count", 0));
+const _htmlScriptBody = _$.register("packages/translator-tags/src/__tests__/fixtures/html-script/template.marko_1_renderer", /* @__PURE__ */_$.createRendererWithOwner("", "", void 0, () => [_count$htmlScriptBody]));
+const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/html-script/template.marko_0_count", (_scope, {
+  count
+}) => _$.on(_scope["#script/0"], "click", function () {
+  _count(_scope, count + 1), count;
+}));
+const _count = /* @__PURE__ */_$.state("count", (_scope, count) => {
+  _$.textContent(_scope["#script/0"], `
+  {
+    "imports": {
+      "${count}": "https://markojs.com",
+    }
+  }
+`);
+  _count_effect(_scope);
+}, () => _$.dynamicSubscribers("count"));
+export function _setup_(_scope) {
+  _count(_scope, 0);
+}
+export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/html-script/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/html.expected/template.js
new file mode 100644
index 0000000000..dea879da91
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/html.expected/template.js
@@ -0,0 +1,17 @@
+import * as _$ from "@marko/runtime-tags/debug/html";
+const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
+  const _scope0_id = _$.nextScopeId();
+  const count = 0;
+  _$.write(`${_$.markResumeNode(_scope0_id, "#script/0")}`);
+  _$.writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/html-script/template.marko_0_count");
+  _$.writeScope(_scope0_id, {
+    "count": count
+  });
+});
+export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/html-script/template.marko", _renderer);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/resume-sanitized.expected.md b/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/resume-sanitized.expected.md
new file mode 100644
index 0000000000..3a30289e02
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/resume-sanitized.expected.md
@@ -0,0 +1,28 @@
+# Render {}
+```html
+
+```
+
+
+# Render 
+container.querySelector("script").click()
+
+```html
+
+```
+
+
+# Render 
+container.querySelector("script").click()
+
+```html
+
+```
+
+
+# Render 
+container.querySelector("script").click()
+
+```html
+
+```
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/resume.expected.md b/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/resume.expected.md
new file mode 100644
index 0000000000..e3a1538f4a
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/resume.expected.md
@@ -0,0 +1,127 @@
+# Render {}
+```html
+
+  
+    
+    
+    
+  
+  
+
+```
+
+# Mutations
+```
+
+```
+
+
+# Render 
+container.querySelector("script").click()
+
+```html
+
+  
+    
+    
+    
+  
+  
+
+```
+
+# Mutations
+```
+removed #text in #document/html0/head0/script0
+inserted #document/html0/head0/script0/#text0
+```
+
+
+# Render 
+container.querySelector("script").click()
+
+```html
+
+  
+    
+    
+    
+  
+  
+
+```
+
+# Mutations
+```
+removed #text in #document/html0/head0/script0
+inserted #document/html0/head0/script0/#text0
+```
+
+
+# Render 
+container.querySelector("script").click()
+
+```html
+
+  
+    
+    
+    
+  
+  
+
+```
+
+# Mutations
+```
+removed #text in #document/html0/head0/script0
+inserted #document/html0/head0/script0/#text0
+```
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/ssr-sanitized.expected.md b/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/ssr-sanitized.expected.md
new file mode 100644
index 0000000000..35becb80f9
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/ssr-sanitized.expected.md
@@ -0,0 +1,4 @@
+# Render "End"
+```html
+
+```
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/ssr.expected.md b/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/ssr.expected.md
new file mode 100644
index 0000000000..aa4022e560
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-script/__snapshots__/ssr.expected.md
@@ -0,0 +1,45 @@
+# Write
+  
+
+
+# Render "End"
+```html
+
+  
+    
+    
+    
+  
+  
+
+```
+
+# Mutations
+```
+inserted #document/html0
+inserted #document/html0/head0
+inserted #document/html0/head0/script0
+inserted #document/html0/head0/script0/#text0
+inserted #document/html0/head0/#comment1
+inserted #document/html0/head0/script2
+inserted #document/html0/head0/script2/#text0
+inserted #document/html0/body1
+```
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-script/template.marko b/packages/translator-tags/src/__tests__/fixtures/html-script/template.marko
new file mode 100644
index 0000000000..473b80431b
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-script/template.marko
@@ -0,0 +1,8 @@
+
+
+  {
+    "imports": {
+      "${count}": "https://markojs.com",
+    }
+  }
+
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-script/test.ts b/packages/translator-tags/src/__tests__/fixtures/html-script/test.ts
new file mode 100644
index 0000000000..515409b73c
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-script/test.ts
@@ -0,0 +1,5 @@
+export const steps = [{}, click, click, click];
+
+function click(container: Element) {
+  container.querySelector("script")!.click();
+}
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/.name-cache.json b/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/.name-cache.json
new file mode 100644
index 0000000000..32e4a37e40
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/.name-cache.json
@@ -0,0 +1,11 @@
+{
+  "vars": {
+    "props": {
+      "$_$": "t",
+      "$init": "e",
+      "$_count$htmlStyleBody": "r",
+      "$_count_effect": "n",
+      "$_count": "o"
+    }
+  }
+}
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/csr-sanitized.expected.md b/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/csr-sanitized.expected.md
new file mode 100644
index 0000000000..3da3dc51da
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/csr-sanitized.expected.md
@@ -0,0 +1,28 @@
+# Render {}
+```html
+
+```
+
+
+# Render 
+container.querySelector("style").click()
+
+```html
+
+```
+
+
+# Render 
+container.querySelector("style").click()
+
+```html
+
+```
+
+
+# Render 
+container.querySelector("style").click()
+
+```html
+
+```
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/csr.expected.md b/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/csr.expected.md
new file mode 100644
index 0000000000..1d5cce5808
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/csr.expected.md
@@ -0,0 +1,83 @@
+# Render {}
+```html
+
+
+
+```
+
+# Mutations
+```
+inserted #comment0, style1, #comment2
+```
+
+
+# Render 
+container.querySelector("style").click()
+
+```html
+
+
+
+```
+
+# Mutations
+```
+removed #text in style1
+inserted style1/#text0
+```
+
+
+# Render 
+container.querySelector("style").click()
+
+```html
+
+
+
+```
+
+# Mutations
+```
+removed #text in style1
+inserted style1/#text0
+```
+
+
+# Render 
+container.querySelector("style").click()
+
+```html
+
+
+
+```
+
+# Mutations
+```
+removed #text in style1
+inserted style1/#text0
+```
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/dom.expected/template.hydrate.js
new file mode 100644
index 0000000000..12423e451e
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/dom.expected/template.hydrate.js
@@ -0,0 +1,23 @@
+// size: 325 (min) 205 (brotli)
+const _count$htmlStyleBody = _$.registerSubscriber(
+  "a1",
+  _$.dynamicClosure(1, 0),
+);
+_$.register(
+  "a2",
+  _$.createRendererWithOwner("", "", void 0, () => [_count$htmlStyleBody]),
+);
+const _count_effect = _$.effect("a3", (_scope, { 1: count }) =>
+    _$.on(_scope[0], "click", function () {
+      _count(_scope, count + 1);
+    }),
+  ),
+  _count = _$.state(
+    1,
+    (_scope, count) => {
+      _$.textContent(_scope[0], `\n  .test {\n    content: ${count}\n  }\n`),
+        _count_effect(_scope);
+    },
+    () => _$.dynamicSubscribers(1),
+  );
+init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/dom.expected/template.js
new file mode 100644
index 0000000000..bf547e17f1
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/dom.expected/template.js
@@ -0,0 +1,22 @@
+export const _template_ = "";
+export const _walks_ = /* get, over(1) */"D bD";
+import * as _$ from "@marko/runtime-tags/debug/dom";
+const _count$htmlStyleBody = _$.registerSubscriber("packages/translator-tags/src/__tests__/fixtures/html-style/template.marko_1_count/subscriber", /* @__PURE__ */_$.dynamicClosure("count", 0));
+const _htmlStyleBody = _$.register("packages/translator-tags/src/__tests__/fixtures/html-style/template.marko_1_renderer", /* @__PURE__ */_$.createRendererWithOwner("", "", void 0, () => [_count$htmlStyleBody]));
+const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/html-style/template.marko_0_count", (_scope, {
+  count
+}) => _$.on(_scope["#style/0"], "click", function () {
+  _count(_scope, count + 1), count;
+}));
+const _count = /* @__PURE__ */_$.state("count", (_scope, count) => {
+  _$.textContent(_scope["#style/0"], `
+  .test {
+    content: ${count}
+  }
+`);
+  _count_effect(_scope);
+}, () => _$.dynamicSubscribers("count"));
+export function _setup_(_scope) {
+  _count(_scope, 0);
+}
+export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/html-style/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/html.expected/template.js
new file mode 100644
index 0000000000..35a32f94f9
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/html.expected/template.js
@@ -0,0 +1,15 @@
+import * as _$ from "@marko/runtime-tags/debug/html";
+const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
+  const _scope0_id = _$.nextScopeId();
+  const count = 0;
+  _$.write(`${_$.markResumeNode(_scope0_id, "#style/0")}`);
+  _$.writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/html-style/template.marko_0_count");
+  _$.writeScope(_scope0_id, {
+    "count": count
+  });
+});
+export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/html-style/template.marko", _renderer);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/resume-sanitized.expected.md b/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/resume-sanitized.expected.md
new file mode 100644
index 0000000000..3da3dc51da
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/resume-sanitized.expected.md
@@ -0,0 +1,28 @@
+# Render {}
+```html
+
+```
+
+
+# Render 
+container.querySelector("style").click()
+
+```html
+
+```
+
+
+# Render 
+container.querySelector("style").click()
+
+```html
+
+```
+
+
+# Render 
+container.querySelector("style").click()
+
+```html
+
+```
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/resume.expected.md b/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/resume.expected.md
new file mode 100644
index 0000000000..2811b78be7
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/resume.expected.md
@@ -0,0 +1,111 @@
+# Render {}
+```html
+
+  
+    
+    
+    
+  
+  
+
+```
+
+# Mutations
+```
+
+```
+
+
+# Render 
+container.querySelector("style").click()
+
+```html
+
+  
+    
+    
+    
+  
+  
+
+```
+
+# Mutations
+```
+removed #text in #document/html0/head0/style0
+inserted #document/html0/head0/style0/#text0
+```
+
+
+# Render 
+container.querySelector("style").click()
+
+```html
+
+  
+    
+    
+    
+  
+  
+
+```
+
+# Mutations
+```
+removed #text in #document/html0/head0/style0
+inserted #document/html0/head0/style0/#text0
+```
+
+
+# Render 
+container.querySelector("style").click()
+
+```html
+
+  
+    
+    
+    
+  
+  
+
+```
+
+# Mutations
+```
+removed #text in #document/html0/head0/style0
+inserted #document/html0/head0/style0/#text0
+```
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/ssr-sanitized.expected.md b/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/ssr-sanitized.expected.md
new file mode 100644
index 0000000000..35becb80f9
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/ssr-sanitized.expected.md
@@ -0,0 +1,4 @@
+# Render "End"
+```html
+
+```
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/ssr.expected.md b/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/ssr.expected.md
new file mode 100644
index 0000000000..f6fdd27f7c
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-style/__snapshots__/ssr.expected.md
@@ -0,0 +1,39 @@
+# Write
+  
+
+
+# Render "End"
+```html
+
+  
+    
+    
+    
+  
+  
+
+```
+
+# Mutations
+```
+inserted #document/html0
+inserted #document/html0/head0
+inserted #document/html0/head0/style0
+inserted #document/html0/head0/style0/#text0
+inserted #document/html0/head0/#comment1
+inserted #document/html0/head0/script2
+inserted #document/html0/head0/script2/#text0
+inserted #document/html0/body1
+```
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-style/template.marko b/packages/translator-tags/src/__tests__/fixtures/html-style/template.marko
new file mode 100644
index 0000000000..ced8dc6307
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-style/template.marko
@@ -0,0 +1,7 @@
+
+
+
+  .test {
+    content: ${count}
+  }
+
diff --git a/packages/translator-tags/src/__tests__/fixtures/html-style/test.ts b/packages/translator-tags/src/__tests__/fixtures/html-style/test.ts
new file mode 100644
index 0000000000..566accaeb5
--- /dev/null
+++ b/packages/translator-tags/src/__tests__/fixtures/html-style/test.ts
@@ -0,0 +1,5 @@
+export const steps = [{}, click, click, click];
+
+function click(container: Element) {
+  container.querySelector("style")!.click();
+}
diff --git a/packages/translator-tags/src/__tests__/fixtures/if-default-false/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/if-default-false/__snapshots__/dom.expected/template.hydrate.js
index 9c4f90de23..95ac2a7a57 100644
--- a/packages/translator-tags/src/__tests__/fixtures/if-default-false/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/if-default-false/__snapshots__/dom.expected/template.hydrate.js
@@ -1,17 +1,10 @@
-// size: 210 (min) 155 (brotli)
+// size: 190 (min) 142 (brotli)
 const _ifBody = _$.register("a0", _$.createRenderer("hi", "")),
   _if = _$.conditional(1, 0),
-  _show_effect = _$.effect("a1", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 2: show } = _scope;
-        return function () {
-          _show(_scope, !show);
-        };
-      })(_scope),
-    ),
+  _show_effect = _$.effect("a1", (_scope, { 2: show }) =>
+    _$.on(_scope[0], "click", function () {
+      _show(_scope, !show);
+    }),
   ),
   _show = _$.state(2, (_scope, show) => {
     _show_effect(_scope), _if(_scope, show ? _ifBody : null);
diff --git a/packages/translator-tags/src/__tests__/fixtures/if-default-false/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/if-default-false/__snapshots__/dom.expected/template.js
index 5a2576baef..98169d1b00 100644
--- a/packages/translator-tags/src/__tests__/fixtures/if-default-false/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/if-default-false/__snapshots__/dom.expected/template.js
@@ -3,15 +3,11 @@ export const _walks_ = /* get, over(1), replace, over(1) */" b%bD";
 import * as _$ from "@marko/runtime-tags/debug/dom";
 const _ifBody = _$.register("packages/translator-tags/src/__tests__/fixtures/if-default-false/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer("hi", ""));
 const _if = /* @__PURE__ */_$.conditional("#text/1", 0);
-const _onClick = _scope => {
-  const {
-    show
-  } = _scope;
-  return function () {
-    _show(_scope, !show);
-  };
-};
-const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/if-default-false/template.marko_0_show", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/if-default-false/template.marko_0_show", (_scope, {
+  show
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _show(_scope, !show);
+}));
 const _show = /* @__PURE__ */_$.state("show", (_scope, show) => {
   _show_effect(_scope);
   _if(_scope, show ? _ifBody : null);
diff --git a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/dom.expected/components/child.js b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/dom.expected/components/child.js
index 90e1ed3b17..469ba8d1b9 100644
--- a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/dom.expected/components/child.js
+++ b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/dom.expected/components/child.js
@@ -9,28 +9,20 @@ const _expr_input_value_input_valueChange = /* @__PURE__ */_$.intersection(2, _s
   } = _scope;
   _state(_scope, input_value, input_valueChange);
 });
-const _onClick = _scope => {
-  const {
-    otherState
-  } = _scope;
-  return function () {
-    _otherState(_scope, otherState + 1);
-  };
-};
-const _otherState_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/components/child.marko_0_otherState", _scope => _$.on(_scope["#button/3"], "click", _onClick(_scope)));
+const _otherState_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/components/child.marko_0_otherState", (_scope, {
+  otherState
+}) => _$.on(_scope["#button/3"], "click", function () {
+  _otherState(_scope, otherState + 1), otherState;
+}));
 const _otherState = /* @__PURE__ */_$.state("otherState", (_scope, otherState) => {
   _$.data(_scope["#text/5"], otherState);
   _otherState_effect(_scope);
 });
-const _onClick2 = _scope => {
-  const {
-    state
-  } = _scope;
-  return function () {
-    _state(_scope, state + 1);
-  };
-};
-const _state_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/components/child.marko_0_state", _scope => _$.on(_scope["#button/0"], "click", _onClick2(_scope)));
+const _state_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/components/child.marko_0_state", (_scope, {
+  state
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _state(_scope, state + 1), state;
+}));
 const _state = /* @__PURE__ */_$.state("state", (_scope, state) => {
   _$.data(_scope["#text/2"], state);
   _state_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/dom.expected/template.hydrate.js
index 896fa6a7e6..d0293614b2 100644
--- a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/dom.expected/template.hydrate.js
@@ -1,34 +1,20 @@
-// size: 675 (min) 274 (brotli)
+// size: 643 (min) 276 (brotli)
 const _expr_input_value_input_valueChange = _$.intersection(2, (_scope) => {
     const { 8: input_value, 9: input_valueChange } = _scope;
     _state(_scope, input_value, input_valueChange);
   }),
-  _otherState_effect = _$.effect("a0", (_scope) =>
-    _$.on(
-      _scope[3],
-      "click",
-      ((_scope) => {
-        const { 11: otherState } = _scope;
-        return function () {
-          _otherState(_scope, otherState + 1);
-        };
-      })(_scope),
-    ),
+  _otherState_effect = _$.effect("a0", (_scope, { 11: otherState }) =>
+    _$.on(_scope[3], "click", function () {
+      _otherState(_scope, otherState + 1);
+    }),
   ),
   _otherState = _$.state(11, (_scope, otherState) => {
     _$.data(_scope[5], otherState), _otherState_effect(_scope);
   }),
-  _state_effect = _$.effect("a1", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 10: state } = _scope;
-        return function () {
-          _state(_scope, state + 1);
-        };
-      })(_scope),
-    ),
+  _state_effect = _$.effect("a1", (_scope, { 10: state }) =>
+    _$.on(_scope[0], "click", function () {
+      _state(_scope, state + 1);
+    }),
   ),
   _state = _$.state(10, (_scope, state) => {
     _$.data(_scope[2], state), _state_effect(_scope);
@@ -54,13 +40,6 @@ const _expr_input_value_input_valueChange = _$.intersection(2, (_scope) => {
     },
     () => _$.intersections([_input_value, _input_valueChange]),
   ),
-  _valueChange = _$.register(
-    "b0",
-    (_scope) =>
-      function (_new_source) {
-        _source(_scope, _new_source);
-      },
-  ),
   _source = _$.state(
     2,
     (_scope, source) => {
@@ -72,4 +51,9 @@ const _expr_input_value_input_valueChange = _$.intersection(2, (_scope) => {
     },
     () => _$.inChild(0, _input_),
   );
-init();
+function _valueChange(_scope) {
+  return (_new_source) => {
+    _source(_scope, _new_source);
+  };
+}
+_$.register("b0", _valueChange), init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/dom.expected/template.js
index 95cec5749b..8feb149479 100644
--- a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/dom.expected/template.js
@@ -1,10 +1,7 @@
 export const _template_ = `${_child_template}source=`;
 export const _walks_ = /* beginChild, _child_walks, endChild, over(1), replace, over(1) */`/${_child_walks}&b%b`;
-import * as _$ from "@marko/runtime-tags/debug/dom";
-const _valueChange = _$.register("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/template.marko_0/valueChange", _scope => function (_new_source) {
-  _source(_scope, _new_source);
-});
 import { _setup_ as _child, _input_ as _child_input, _template_ as _child_template, _walks_ as _child_walks } from "./components/child.marko";
+import * as _$ from "@marko/runtime-tags/debug/dom";
 const _source = /* @__PURE__ */_$.state("source", (_scope, source) => {
   _$.data(_scope["#text/1"], source);
   _child_input(_scope["#childScope/0"], {
@@ -16,4 +13,10 @@ export function _setup_(_scope) {
   _child(_scope["#childScope/0"]);
   _source(_scope, 1);
 }
+function _valueChange(_scope) {
+  return _new_source => {
+    _source(_scope, _new_source);
+  };
+}
+_$.register("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/template.marko_0/valueChange", _valueChange);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/html.expected/template.js
index 1d094ce854..687e1bc041 100644
--- a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/html.expected/template.js
@@ -1,12 +1,12 @@
-import * as _$ from "@marko/runtime-tags/debug/html";
 import _child from "./components/child.marko";
+import * as _$ from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _scope0_id = _$.nextScopeId();
   const source = 1;
   const _childScope = _$.peekNextScope();
   _child({
     value: source,
-    valueChange: _$.register(function (_new_source) {
+    valueChange: _$.register(_new_source => {
       source = _new_source;
     }, "packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/template.marko_0/valueChange", _scope0_id)
   });
diff --git a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-dynamic-change-handler/__snapshots__/.name-cache.json b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-dynamic-change-handler/__snapshots__/.name-cache.json
index b76ce5bfa1..7500577229 100644
--- a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-dynamic-change-handler/__snapshots__/.name-cache.json
+++ b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-dynamic-change-handler/__snapshots__/.name-cache.json
@@ -7,7 +7,8 @@
       "$_y_effect": "a",
       "$_y": "e",
       "$_yChange2": "c",
-      "$_x": "r"
+      "$_x": "r",
+      "$_yChange": "i"
     }
   }
 }
diff --git a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-dynamic-change-handler/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-dynamic-change-handler/__snapshots__/dom.expected/template.hydrate.js
index 8859e14469..446f9f70a1 100644
--- a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-dynamic-change-handler/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-dynamic-change-handler/__snapshots__/dom.expected/template.hydrate.js
@@ -1,31 +1,17 @@
-// size: 374 (min) 198 (brotli)
-_$.register(
-  "a0",
-  (_scope) =>
-    function (newValue) {
-      _x(_scope, newValue + 1);
-    },
-);
+// size: 371 (min) 200 (brotli)
 const _expr_x_yChange = _$.intersection(2, (_scope) => {
     const { 4: x, 5: yChange } = _scope;
     _y(_scope, x, yChange);
   }),
-  _y_effect = _$.effect("a1", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 6: y } = _scope;
-        return function () {
-          _y(_scope, y + 1);
-        };
-      })(_scope),
-    ),
+  _y_effect = _$.effect("a1", (_scope, { 6: y }) =>
+    _$.on(_scope[0], "click", function () {
+      _y(_scope, y + 1);
+    }),
   ),
   _y = _$.state(6, (_scope, y) => {
     _$.data(_scope[2], y), _y_effect(_scope);
   }),
-  _yChange2 = _$.state(5, 0, () => _expr_x_yChange),
+  _yChange = _$.state(5, 0, () => _expr_x_yChange),
   _x = _$.state(
     4,
     (_scope, x) => _$.data(_scope[1], x),
@@ -33,7 +19,12 @@ const _expr_x_yChange = _$.intersection(2, (_scope) => {
   );
 _$.effect("a2", (_scope) =>
   _$.on(_scope[3], "click", function () {
-    _yChange2(_scope, null);
+    _yChange(_scope, null);
   }),
 ),
+  _$.register("a0", function (_scope) {
+    return function (newValue) {
+      _x(_scope, newValue + 1);
+    };
+  }),
   init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-dynamic-change-handler/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-dynamic-change-handler/__snapshots__/dom.expected/template.js
index d98a2bfeb2..5ec5a709ce 100644
--- a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-dynamic-change-handler/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-dynamic-change-handler/__snapshots__/dom.expected/template.js
@@ -1,9 +1,6 @@
 export const _template_ = "";
 export const _walks_ = /* get, next(1), replace, over(2), replace, out(1), get, over(1) */" D%c%l b";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _yChange = _$.register("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-dynamic-change-handler/template.marko_0/yChange", _scope => function (newValue) {
-  _x(_scope, newValue + 1);
-});
 const _expr_x_yChange = /* @__PURE__ */_$.intersection(2, _scope => {
   const {
     x,
@@ -11,27 +8,29 @@ const _expr_x_yChange = /* @__PURE__ */_$.intersection(2, _scope => {
   } = _scope;
   _y(_scope, x, yChange);
 });
-const _onClick = _scope => {
-  const {
-    y
-  } = _scope;
-  return function () {
-    _y(_scope, y + 1);
-  };
-};
-const _y_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-dynamic-change-handler/template.marko_0_y", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _y_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-dynamic-change-handler/template.marko_0_y", (_scope, {
+  y
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _y(_scope, y + 1), y;
+}));
 const _y = /* @__PURE__ */_$.state("y", (_scope, y) => {
   _$.data(_scope["#text/2"], y);
   _y_effect(_scope);
 });
-const _yChange2 = /* @__PURE__ */_$.state("yChange", 0, () => _expr_x_yChange);
+const _yChange = /* @__PURE__ */_$.state("yChange", 0, () => _expr_x_yChange);
 const _x = /* @__PURE__ */_$.state("x", (_scope, x) => _$.data(_scope["#text/1"], x), () => _expr_x_yChange);
 const _setup__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-dynamic-change-handler/template.marko_0", _scope => _$.on(_scope["#button/3"], "click", function () {
-  _yChange2(_scope, null);
+  _yChange(_scope, null);
 }));
 export function _setup_(_scope) {
   _setup__effect(_scope);
   _x(_scope, 1);
-  _yChange2(_scope, _yChange(_scope));
+  _yChange(_scope, _yChange2(_scope));
+}
+function _yChange2(_scope) {
+  return function (newValue) {
+    _x(_scope, newValue + 1);
+  };
 }
+_$.register("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-dynamic-change-handler/template.marko_0/yChange", _yChange2);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-dynamic-change-handler/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-id/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-id/__snapshots__/dom.expected/template.hydrate.js
index 63e9f2f1cb..e37154853d 100644
--- a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-id/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-id/__snapshots__/dom.expected/template.hydrate.js
@@ -1,26 +1,12 @@
-// size: 288 (min) 176 (brotli)
-_$.register(
-  "a0",
-  (_scope) =>
-    function (newValue) {
-      _x(_scope, newValue + 1);
-    },
-);
+// size: 285 (min) 182 (brotli)
 const _expr_x_handler = _$.intersection(2, (_scope) => {
     const { 3: x, 4: handler } = _scope;
     _y(_scope, x, handler);
   }),
-  _y_effect = _$.effect("a1", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 5: y } = _scope;
-        return function () {
-          _y(_scope, y + 1);
-        };
-      })(_scope),
-    ),
+  _y_effect = _$.effect("a1", (_scope, { 5: y }) =>
+    _$.on(_scope[0], "click", function () {
+      _y(_scope, y + 1);
+    }),
   ),
   _y = _$.state(5, (_scope, y) => {
     _$.data(_scope[2], y), _y_effect(_scope);
@@ -30,4 +16,9 @@ const _expr_x_handler = _$.intersection(2, (_scope) => {
     (_scope, x) => _$.data(_scope[1], x),
     () => _expr_x_handler,
   );
-init();
+_$.register("a0", function (_scope) {
+  return function (newValue) {
+    _x(_scope, newValue + 1);
+  };
+}),
+  init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-id/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-id/__snapshots__/dom.expected/template.js
index d70c68544b..7d9521f1a7 100644
--- a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-id/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-id/__snapshots__/dom.expected/template.js
@@ -1,9 +1,6 @@
 export const _template_ = "";
 export const _walks_ = /* get, next(1), replace, over(2), replace, out(1) */" D%c%l";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _handler = _$.register("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-id/template.marko_0/handler", _scope => function (newValue) {
-  _x(_scope, newValue + 1);
-});
 const _expr_x_handler = /* @__PURE__ */_$.intersection(2, _scope => {
   const {
     x,
@@ -11,23 +8,25 @@ const _expr_x_handler = /* @__PURE__ */_$.intersection(2, _scope => {
   } = _scope;
   _y(_scope, x, handler);
 });
-const _onClick = _scope => {
-  const {
-    y
-  } = _scope;
-  return function () {
-    _y(_scope, y + 1);
-  };
-};
-const _y_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-id/template.marko_0_y", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _y_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-id/template.marko_0_y", (_scope, {
+  y
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _y(_scope, y + 1), y;
+}));
 const _y = /* @__PURE__ */_$.state("y", (_scope, y) => {
   _$.data(_scope["#text/2"], y);
   _y_effect(_scope);
 });
-const _handler2 = /* @__PURE__ */_$.state("handler", 0, () => _expr_x_handler);
+const _handler = /* @__PURE__ */_$.state("handler", 0, () => _expr_x_handler);
 const _x = /* @__PURE__ */_$.state("x", (_scope, x) => _$.data(_scope["#text/1"], x), () => _expr_x_handler);
 export function _setup_(_scope) {
   _x(_scope, 1);
-  _handler2(_scope, _handler(_scope));
+  _handler(_scope, _handler2(_scope));
+}
+function _handler2(_scope) {
+  return function (newValue) {
+    _x(_scope, newValue + 1);
+  };
 }
+_$.register("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-id/template.marko_0/handler", _handler2);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-id/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-static/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-static/__snapshots__/dom.expected/template.hydrate.js
index 99cc126d99..7f0a19bdc4 100644
--- a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-static/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-static/__snapshots__/dom.expected/template.hydrate.js
@@ -1,22 +1,8 @@
-// size: 243 (min) 160 (brotli)
-const _valueChange = _$.register(
-    "a0",
-    (_scope) =>
-      function (newValue) {
-        _x(_scope, newValue + 1);
-      },
-  ),
-  _y_effect = _$.effect("a1", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 4: y } = _scope;
-        return function () {
-          _y(_scope, y + 1);
-        };
-      })(_scope),
-    ),
+// size: 239 (min) 154 (brotli)
+const _y_effect = _$.effect("a1", (_scope, { 4: y }) =>
+    _$.on(_scope[0], "click", function () {
+      _y(_scope, y + 1);
+    }),
   ),
   _y = _$.state(4, (_scope, y) => {
     _$.data(_scope[2], y), _y_effect(_scope);
@@ -24,4 +10,9 @@ const _valueChange = _$.register(
   _x = _$.state(3, (_scope, x) => {
     _$.data(_scope[1], x), _y(_scope, x, _valueChange(_scope));
   });
-init();
+function _valueChange(_scope) {
+  return function (newValue) {
+    _x(_scope, newValue + 1);
+  };
+}
+_$.register("a0", _valueChange), init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-static/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-static/__snapshots__/dom.expected/template.js
index 5ff2ce808c..b4e382828d 100644
--- a/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-static/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-static/__snapshots__/dom.expected/template.js
@@ -1,18 +1,11 @@
 export const _template_ = "";
 export const _walks_ = /* get, next(1), replace, over(2), replace, out(1) */" D%c%l";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _valueChange = _$.register("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-static/template.marko_0/valueChange", _scope => function (newValue) {
-  _x(_scope, newValue + 1);
-});
-const _onClick = _scope => {
-  const {
-    y
-  } = _scope;
-  return function () {
-    _y(_scope, y + 1);
-  };
-};
-const _y_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-static/template.marko_0_y", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _y_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-static/template.marko_0_y", (_scope, {
+  y
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _y(_scope, y + 1), y;
+}));
 const _y = /* @__PURE__ */_$.state("y", (_scope, y) => {
   _$.data(_scope["#text/2"], y);
   _y_effect(_scope);
@@ -24,4 +17,10 @@ const _x = /* @__PURE__ */_$.state("x", (_scope, x) => {
 export function _setup_(_scope) {
   _x(_scope, 1);
 }
+function _valueChange(_scope) {
+  return function (newValue) {
+    _x(_scope, newValue + 1);
+  };
+}
+_$.register("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-static/template.marko_0/valueChange", _valueChange);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-static/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/let-tag-derived/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/let-tag-derived/__snapshots__/dom.expected/template.hydrate.js
index 672a0ba544..b129c26b55 100644
--- a/packages/translator-tags/src/__tests__/fixtures/let-tag-derived/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/let-tag-derived/__snapshots__/dom.expected/template.hydrate.js
@@ -1,13 +1,6 @@
-// size: 141 (min) 129 (brotli)
-const _b_effect = _$.effect("a0", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 6: b } = _scope;
-        return () => (_b(_scope, b + 1), b);
-      })(_scope),
-    ),
+// size: 122 (min) 111 (brotli)
+const _b_effect = _$.effect("a0", (_scope, { 6: b }) =>
+    _$.on(_scope[0], "click", () => (_b(_scope, b + 1), b)),
   ),
   _b = _$.state(6, (_scope, b) => {
     _$.data(_scope[2], b), _b_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/let-tag-derived/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/let-tag-derived/__snapshots__/dom.expected/template.js
index d60e280c52..f8e2d0bef7 100644
--- a/packages/translator-tags/src/__tests__/fixtures/let-tag-derived/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/let-tag-derived/__snapshots__/dom.expected/template.js
@@ -2,13 +2,9 @@ export const _template_ = " ";
 export const _walks_ = /* get, over(1), replace, over(2), replace, over(1) */" b%c%b";
 export const _setup_ = () => {};
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _onClick = _scope => {
-  const {
-    b
-  } = _scope;
-  return () => (_b(_scope, b + 1), b);
-};
-const _b_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/let-tag-derived/template.marko_0_b", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _b_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/let-tag-derived/template.marko_0_b", (_scope, {
+  b
+}) => _$.on(_scope["#button/0"], "click", () => (_b(_scope, b + 1), b)));
 const _b = /* @__PURE__ */_$.state("b", (_scope, b) => {
   _$.data(_scope["#text/2"], b);
   _b_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/let-tag-set-in-effect/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/let-tag-set-in-effect/__snapshots__/dom.expected/template.hydrate.js
index fb91d35ef5..72e663b90a 100644
--- a/packages/translator-tags/src/__tests__/fixtures/let-tag-set-in-effect/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/let-tag-set-in-effect/__snapshots__/dom.expected/template.hydrate.js
@@ -1,7 +1,6 @@
-// size: 142 (min) 103 (brotli)
+// size: 137 (min) 99 (brotli)
 const _y = _$.state(3, (_scope, y) => _$.data(_scope[1], y)),
-  _x_effect = _$.effect("a0", (_scope) => {
-    const { 2: x } = _scope;
+  _x_effect = _$.effect("a0", (_scope, { 2: x }) => {
     _y(_scope, x), _x(_scope, 2);
   }),
   _x = _$.state(2, (_scope, x) => {
diff --git a/packages/translator-tags/src/__tests__/fixtures/let-tag-set-in-effect/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/let-tag-set-in-effect/__snapshots__/dom.expected/template.js
index e7f21e8a66..09fff663b6 100644
--- a/packages/translator-tags/src/__tests__/fixtures/let-tag-set-in-effect/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/let-tag-set-in-effect/__snapshots__/dom.expected/template.js
@@ -2,10 +2,9 @@ export const _template_ = "  ";
 export const _walks_ = /* next(1), get, out(1), next(1), get, out(1) */"D lD l";
 import * as _$ from "@marko/runtime-tags/debug/dom";
 const _y = /* @__PURE__ */_$.state("y", (_scope, y) => _$.data(_scope["#text/1"], y));
-const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/let-tag-set-in-effect/template.marko_0_x", _scope => {
-  const {
-    x
-  } = _scope;
+const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/let-tag-set-in-effect/template.marko_0_x", (_scope, {
+  x
+}) => {
   _y(_scope, x);
   _x(_scope, 2);
 });
diff --git a/packages/translator-tags/src/__tests__/fixtures/let-tag-with-intersection/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/let-tag-with-intersection/__snapshots__/dom.expected/template.hydrate.js
index 55ccb38ccc..34243fef89 100644
--- a/packages/translator-tags/src/__tests__/fixtures/let-tag-with-intersection/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/let-tag-with-intersection/__snapshots__/dom.expected/template.hydrate.js
@@ -1,4 +1,4 @@
-// size: 368 (min) 200 (brotli)
+// size: 349 (min) 190 (brotli)
 const _expr_y_z = _$.intersection(2, (_scope) => {
     const { 6: y, 7: z } = _scope;
     _a(_scope, y + z);
@@ -14,15 +14,8 @@ const _expr_y_z = _$.intersection(2, (_scope) => {
     (_scope, y) => _$.data(_scope[2], y),
     () => _expr_y_z,
   ),
-  _x_effect = _$.effect("a0", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 5: x } = _scope;
-        return () => (_x(_scope, x + 1), x);
-      })(_scope),
-    ),
+  _x_effect = _$.effect("a0", (_scope, { 5: x }) =>
+    _$.on(_scope[0], "click", () => (_x(_scope, x + 1), x)),
   ),
   _x = _$.state(
     5,
diff --git a/packages/translator-tags/src/__tests__/fixtures/let-tag-with-intersection/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/let-tag-with-intersection/__snapshots__/dom.expected/template.js
index 117d6e2657..7a78043f2c 100644
--- a/packages/translator-tags/src/__tests__/fixtures/let-tag-with-intersection/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/let-tag-with-intersection/__snapshots__/dom.expected/template.js
@@ -11,13 +11,9 @@ const _expr_y_z = /* @__PURE__ */_$.intersection(2, _scope => {
 const _a = /* @__PURE__ */_$.value("a", (_scope, a) => _$.data(_scope["#text/4"], a));
 const _z = /* @__PURE__ */_$.value("z", (_scope, z) => _$.data(_scope["#text/3"], z), () => _expr_y_z);
 const _y = /* @__PURE__ */_$.value("y", (_scope, y) => _$.data(_scope["#text/2"], y), () => _expr_y_z);
-const _onClick = _scope => {
-  const {
-    x
-  } = _scope;
-  return () => (_x(_scope, x + 1), x);
-};
-const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/let-tag-with-intersection/template.marko_0_x", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/let-tag-with-intersection/template.marko_0_x", (_scope, {
+  x
+}) => _$.on(_scope["#button/0"], "click", () => (_x(_scope, x + 1), x)));
 const _x = /* @__PURE__ */_$.state("x", (_scope, x) => {
   _$.data(_scope["#text/1"], x);
   _x_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/let-tag/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/let-tag/__snapshots__/dom.expected/template.hydrate.js
index 1edb956560..5cc08262fd 100644
--- a/packages/translator-tags/src/__tests__/fixtures/let-tag/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/let-tag/__snapshots__/dom.expected/template.hydrate.js
@@ -1,13 +1,6 @@
-// size: 224 (min) 144 (brotli)
-const _expr_x_y_effect = _$.effect("a0", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 3: x, 4: y } = _scope;
-        return () => _x(_scope, _y(_scope, x + y));
-      })(_scope),
-    ),
+// size: 205 (min) 136 (brotli)
+const _expr_x_y_effect = _$.effect("a0", (_scope, { 3: x, 4: y }) =>
+    _$.on(_scope[0], "click", () => _x(_scope, _y(_scope, x + y))),
   ),
   _expr_x_y = _$.intersection(2, (_scope) => {
     _expr_x_y_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/let-tag/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/let-tag/__snapshots__/dom.expected/template.js
index 05827d2e1e..9e4487703e 100644
--- a/packages/translator-tags/src/__tests__/fixtures/let-tag/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/let-tag/__snapshots__/dom.expected/template.js
@@ -1,14 +1,10 @@
 export const _template_ = "";
 export const _walks_ = /* get, next(1), get, out(1), replace, over(1) */" D l%b";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _onClick = _scope => {
-  const {
-    x,
-    y
-  } = _scope;
-  return () => _x(_scope, _y(_scope, x + y));
-};
-const _expr_x_y_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/let-tag/template.marko_0_x_y", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _expr_x_y_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/let-tag/template.marko_0_x_y", (_scope, {
+  x,
+  y
+}) => _$.on(_scope["#button/0"], "click", () => _x(_scope, _y(_scope, x + y))));
 const _expr_x_y = /* @__PURE__ */_$.intersection(2, _scope => {
   const {
     x,
diff --git a/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-assignment/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-assignment/__snapshots__/dom.expected/template.hydrate.js
index 6d5651292d..97eb2a0500 100644
--- a/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-assignment/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-assignment/__snapshots__/dom.expected/template.hydrate.js
@@ -1,32 +1,17 @@
-// size: 345 (min) 174 (brotli)
+// size: 261 (min) 163 (brotli)
 const _prev = _$.state(4, (_scope, prev) => _$.data(_scope[1], prev)),
-  _onMount = (_scope) => {
-    const { 3: x } = _scope;
-    return function () {
-      this.cur = x;
-    };
-  },
-  _onUpdate = (_scope) => {
-    const { 3: x } = _scope;
-    return function () {
-      _prev(_scope, this.cur), (this.cur = x);
-    };
-  },
-  _x_effect = _$.effect("a0", (_scope) => {
+  _x_effect = _$.effect("a0", (_scope, { 3: x }) => {
     _$.lifecycle(_scope, 4, {
-      onMount: _onMount(_scope),
-      onUpdate: _onUpdate(_scope),
+      onMount: function () {
+        this.cur = x;
+      },
+      onUpdate: function () {
+        _prev(_scope, this.cur), (this.cur = x);
+      },
     }),
-      _$.on(
-        _scope[2],
-        "click",
-        ((_scope) => {
-          const { 3: x } = _scope;
-          return function () {
-            _x(_scope, x + 1);
-          };
-        })(_scope),
-      );
+      _$.on(_scope[2], "click", function () {
+        _x(_scope, x + 1);
+      });
   }),
   _x = _$.state(3, (_scope, x) => {
     _$.data(_scope[0], x), _x_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-assignment/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-assignment/__snapshots__/dom.expected/template.js
index b4b74050a1..17755553ca 100644
--- a/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-assignment/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-assignment/__snapshots__/dom.expected/template.js
@@ -2,37 +2,21 @@ export const _template_ = "
    x= , was=
    ";
 export const _walks_ = /* replace, over(2), get, over(1), get, over(1) */"D%c b b";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _onMount = _scope => {
-  const {
-    _: {
-      x
-    }
-  } = _scope;
-  return function () {
+const _x$ifBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-conditional/template.marko_1_x", (_scope, {
+  _: {
+    x
+  }
+}) => _$.lifecycle(_scope, "_lifecycle", {
+  onMount: function () {
     document.getElementById("ref").textContent = "Mount " + x;
-  };
-};
-const _onUpdate = _scope => {
-  const {
-    _: {
-      x
-    }
-  } = _scope;
-  return function () {
+  },
+  onUpdate: function () {
     document.getElementById("ref").textContent = "Update " + x;
-  };
-};
-const _x$ifBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-conditional/template.marko_1_x", _scope => _$.lifecycle(_scope, "_lifecycle", {
-  onMount: _onMount(_scope),
-  onUpdate: _onUpdate(_scope),
+  },
   onDestroy: function () {
     document.getElementById("ref").textContent = "Destroy";
   }
@@ -31,28 +19,20 @@ const _x$ifBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtu
 const _x$ifBody = /* @__PURE__ */_$.closure("x", (_scope, x) => _x$ifBody_effect(_scope));
 const _ifBody = _$.register("packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-conditional/template.marko_1_renderer", /* @__PURE__ */_$.createRenderer("", "", void 0, () => [_x$ifBody]));
 const _if = /* @__PURE__ */_$.conditional("#text/0", 0);
-const _onClick = _scope => {
-  const {
-    show
-  } = _scope;
-  return function () {
-    _show(_scope, !show);
-  };
-};
-const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-conditional/template.marko_0_show", _scope => _$.on(_scope["#button/2"], "click", _onClick(_scope)));
+const _show_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-conditional/template.marko_0_show", (_scope, {
+  show
+}) => _$.on(_scope["#button/2"], "click", function () {
+  _show(_scope, !show);
+}));
 const _show = /* @__PURE__ */_$.state("show", (_scope, show) => {
   _show_effect(_scope);
   _if(_scope, show ? _ifBody : null);
 }, () => _if);
-const _onClick2 = _scope => {
-  const {
-    x
-  } = _scope;
-  return function () {
-    _x(_scope, x + 1);
-  };
-};
-const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-conditional/template.marko_0_x", _scope => _$.on(_scope["#button/1"], "click", _onClick2(_scope)));
+const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-conditional/template.marko_0_x", (_scope, {
+  x
+}) => _$.on(_scope["#button/1"], "click", function () {
+  _x(_scope, x + 1), x;
+}));
 const _x = /* @__PURE__ */_$.state("x", (_scope, x) => _x_effect(_scope), () => _$.inConditionalScope(_x$ifBody, "#text/0"));
 export function _setup_(_scope) {
   _x(_scope, 0);
diff --git a/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-this/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-this/__snapshots__/dom.expected/template.hydrate.js
index 19c422a2e7..9312000e34 100644
--- a/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-this/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-this/__snapshots__/dom.expected/template.hydrate.js
@@ -1,28 +1,18 @@
-// size: 319 (min) 179 (brotli)
-const _onUpdate = (_scope) => {
-    const { 1: x } = _scope;
-    return function () {
-      (document.getElementById("ref").textContent = `x=${x}, was=${this.cur}`),
-        (this.cur = x);
-    };
-  },
-  _x_effect = _$.effect("a0", (_scope) => {
+// size: 267 (min) 170 (brotli)
+const _x_effect = _$.effect("a0", (_scope, { 1: x }) => {
     _$.lifecycle(_scope, 3, {
       onMount: function () {
         this.onUpdate();
       },
-      onUpdate: _onUpdate(_scope),
+      onUpdate: function () {
+        (document.getElementById("ref").textContent =
+          `x=${x}, was=${this.cur}`),
+          (this.cur = x);
+      },
     }),
-      _$.on(
-        _scope[0],
-        "click",
-        ((_scope) => {
-          const { 1: x } = _scope;
-          return function () {
-            _x(_scope, x + 1);
-          };
-        })(_scope),
-      );
+      _$.on(_scope[0], "click", function () {
+        _x(_scope, x + 1);
+      });
   }),
   _x = _$.state(1, (_scope, x) => _x_effect(_scope));
 init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-this/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-this/__snapshots__/dom.expected/template.js
index cdbd4306de..0ed0365cc8 100644
--- a/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-this/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-this/__snapshots__/dom.expected/template.js
@@ -1,31 +1,21 @@
 export const _template_ = "
    ";
 export const _walks_ = /* over(1), get, over(1) */"b b";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _onUpdate = _scope => {
-  const {
-    x
-  } = _scope;
-  return function () {
-    document.getElementById("ref").textContent = `x=${x}, was=${this.cur}`;
-    this.cur = x;
-  };
-};
-const _onClick = _scope => {
-  const {
-    x
-  } = _scope;
-  return function () {
-    _x(_scope, x + 1);
-  };
-};
-const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-this/template.marko_0_x", _scope => {
+const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/lifecycle-tag-this/template.marko_0_x", (_scope, {
+  x
+}) => {
   _$.lifecycle(_scope, "_lifecycle", {
     onMount: function () {
       this.onUpdate();
     },
-    onUpdate: _onUpdate(_scope)
+    onUpdate: function () {
+      document.getElementById("ref").textContent = `x=${x}, was=${this.cur}`;
+      this.cur = x;
+    }
+  });
+  _$.on(_scope["#button/0"], "click", function () {
+    _x(_scope, x + 1), x;
   });
-  _$.on(_scope["#button/0"], "click", _onClick(_scope));
 });
 const _x = /* @__PURE__ */_$.state("x", (_scope, x) => _x_effect(_scope));
 export function _setup_(_scope) {
diff --git a/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag/__snapshots__/dom.expected/template.hydrate.js
index 42bf80d50c..42f3d7ab21 100644
--- a/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag/__snapshots__/dom.expected/template.hydrate.js
@@ -1,31 +1,16 @@
-// size: 364 (min) 166 (brotli)
-const _onMount = (_scope) => {
-    const { 1: x } = _scope;
-    return function () {
-      document.getElementById("ref").textContent = "Mount " + x;
-    };
-  },
-  _onUpdate = (_scope) => {
-    const { 1: x } = _scope;
-    return function () {
-      document.getElementById("ref").textContent = "Update " + x;
-    };
-  },
-  _x_effect = _$.effect("a0", (_scope) => {
+// size: 280 (min) 148 (brotli)
+const _x_effect = _$.effect("a0", (_scope, { 1: x }) => {
     _$.lifecycle(_scope, 3, {
-      onMount: _onMount(_scope),
-      onUpdate: _onUpdate(_scope),
+      onMount: function () {
+        document.getElementById("ref").textContent = "Mount " + x;
+      },
+      onUpdate: function () {
+        document.getElementById("ref").textContent = "Update " + x;
+      },
     }),
-      _$.on(
-        _scope[0],
-        "click",
-        ((_scope) => {
-          const { 1: x } = _scope;
-          return function () {
-            _x(_scope, x + 1);
-          };
-        })(_scope),
-      );
+      _$.on(_scope[0], "click", function () {
+        _x(_scope, x + 1);
+      });
   }),
   _x = _$.state(1, (_scope, x) => _x_effect(_scope));
 init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag/__snapshots__/dom.expected/template.js
index 4475cc79c4..b99879ce9e 100644
--- a/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/lifecycle-tag/__snapshots__/dom.expected/template.js
@@ -1,36 +1,20 @@
 export const _template_ = "
    ";
 export const _walks_ = /* over(1), get, over(1) */"b b";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _onMount = _scope => {
-  const {
-    x
-  } = _scope;
-  return function () {
-    document.getElementById("ref").textContent = "Mount " + x;
-  };
-};
-const _onUpdate = _scope => {
-  const {
-    x
-  } = _scope;
-  return function () {
-    document.getElementById("ref").textContent = "Update " + x;
-  };
-};
-const _onClick = _scope => {
-  const {
-    x
-  } = _scope;
-  return function () {
-    _x(_scope, x + 1);
-  };
-};
-const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/lifecycle-tag/template.marko_0_x", _scope => {
+const _x_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/lifecycle-tag/template.marko_0_x", (_scope, {
+  x
+}) => {
   _$.lifecycle(_scope, "_lifecycle", {
-    onMount: _onMount(_scope),
-    onUpdate: _onUpdate(_scope)
+    onMount: function () {
+      document.getElementById("ref").textContent = "Mount " + x;
+    },
+    onUpdate: function () {
+      document.getElementById("ref").textContent = "Update " + x;
+    }
+  });
+  _$.on(_scope["#button/0"], "click", function () {
+    _x(_scope, x + 1), x;
   });
-  _$.on(_scope["#button/0"], "click", _onClick(_scope));
 });
 const _x = /* @__PURE__ */_$.state("x", (_scope, x) => _x_effect(_scope));
 export function _setup_(_scope) {
diff --git a/packages/translator-tags/src/__tests__/fixtures/native-tag-ref-effect-child/__snapshots__/dom.expected/components/hello-setter.js b/packages/translator-tags/src/__tests__/fixtures/native-tag-ref-effect-child/__snapshots__/dom.expected/components/hello-setter.js
index 690eccddc0..0cb2ace171 100644
--- a/packages/translator-tags/src/__tests__/fixtures/native-tag-ref-effect-child/__snapshots__/dom.expected/components/hello-setter.js
+++ b/packages/translator-tags/src/__tests__/fixtures/native-tag-ref-effect-child/__snapshots__/dom.expected/components/hello-setter.js
@@ -2,12 +2,9 @@ export const _template_ = "";
 export const _walks_ = "";
 export const _setup_ = () => {};
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _el__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/native-tag-ref-effect-child/components/hello-setter.marko_0_el", _scope => {
-  const {
-    el
-  } = _scope;
-  el().textContent = "hello";
-});
+const _el__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/native-tag-ref-effect-child/components/hello-setter.marko_0_el", ({
+  el
+}) => el().textContent = "hello");
 export const _el_ = /* @__PURE__ */_$.value("el", (_scope, el) => _el__effect(_scope));
 export const _input_ = /* @__PURE__ */_$.value("input", (_scope, input) => _el_(_scope, input.el));
 export const _params__ = /* @__PURE__ */_$.value("_params_", (_scope, _params_) => _input_(_scope, _params_[0]));
diff --git a/packages/translator-tags/src/__tests__/fixtures/native-tag-ref-effect-child/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/native-tag-ref-effect-child/__snapshots__/dom.expected/template.hydrate.js
index f7bb76f915..297b15063a 100644
--- a/packages/translator-tags/src/__tests__/fixtures/native-tag-ref-effect-child/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/native-tag-ref-effect-child/__snapshots__/dom.expected/template.hydrate.js
@@ -1,7 +1,4 @@
-// size: 81 (min) 77 (brotli)
-_$.effect("a0", (_scope) => {
-  const { 2: el } = _scope;
-  el().textContent = "hello";
-}),
+// size: 72 (min) 76 (brotli)
+_$.effect("a0", ({ 2: el }) => (el().textContent = "hello")),
   _$.nodeRef("b0", 0),
   init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/nested-assignment-expression/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/nested-assignment-expression/__snapshots__/dom.expected/template.hydrate.js
index 587120e909..47e56cd38e 100644
--- a/packages/translator-tags/src/__tests__/fixtures/nested-assignment-expression/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/nested-assignment-expression/__snapshots__/dom.expected/template.hydrate.js
@@ -1,25 +1,18 @@
-// size: 244 (min) 141 (brotli)
+// size: 224 (min) 136 (brotli)
 const _lastCount2 = _$.state(6, (_scope, lastCount2) =>
     _$.data(_scope[3], lastCount2),
   ),
   _lastCount = _$.state(5, (_scope, lastCount) =>
     _$.data(_scope[2], lastCount),
   ),
-  _clickCount_effect = _$.effect("a0", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 4: clickCount } = _scope;
-        return function () {
-          const last = _lastCount(
-            _scope,
-            (_clickCount(_scope, clickCount + 1), clickCount),
-          );
-          _lastCount2(_scope, last);
-        };
-      })(_scope),
-    ),
+  _clickCount_effect = _$.effect("a0", (_scope, { 4: clickCount }) =>
+    _$.on(_scope[0], "click", function () {
+      const last = _lastCount(
+        _scope,
+        (_clickCount(_scope, clickCount + 1), clickCount),
+      );
+      _lastCount2(_scope, last);
+    }),
   ),
   _clickCount = _$.state(4, (_scope, clickCount) => {
     _$.data(_scope[1], clickCount), _clickCount_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/nested-assignment-expression/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/nested-assignment-expression/__snapshots__/dom.expected/template.js
index 1eacd171c8..b753c88c06 100644
--- a/packages/translator-tags/src/__tests__/fixtures/nested-assignment-expression/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/nested-assignment-expression/__snapshots__/dom.expected/template.js
@@ -3,16 +3,12 @@ export const _walks_ = /* get, next(1), get, out(1), over(1), next(1), get, out(
 import * as _$ from "@marko/runtime-tags/debug/dom";
 const _lastCount2 = /* @__PURE__ */_$.state("lastCount2", (_scope, lastCount2) => _$.data(_scope["#text/3"], lastCount2));
 const _lastCount = /* @__PURE__ */_$.state("lastCount", (_scope, lastCount) => _$.data(_scope["#text/2"], lastCount));
-const _onClick = _scope => {
-  const {
-    clickCount
-  } = _scope;
-  return function () {
-    const last = _lastCount(_scope, (_clickCount(_scope, clickCount + 1), clickCount));
-    _lastCount2(_scope, last);
-  };
-};
-const _clickCount_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/nested-assignment-expression/template.marko_0_clickCount", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _clickCount_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/nested-assignment-expression/template.marko_0_clickCount", (_scope, {
+  clickCount
+}) => _$.on(_scope["#button/0"], "click", function () {
+  const last = _lastCount(_scope, (_clickCount(_scope, clickCount + 1), clickCount));
+  _lastCount2(_scope, last);
+}));
 const _clickCount = /* @__PURE__ */_$.state("clickCount", (_scope, clickCount) => {
   _$.data(_scope["#text/1"], clickCount);
   _clickCount_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/reassignment-expression-counter/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/reassignment-expression-counter/__snapshots__/dom.expected/template.hydrate.js
index f25e229304..01bb1b92c3 100644
--- a/packages/translator-tags/src/__tests__/fixtures/reassignment-expression-counter/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/reassignment-expression-counter/__snapshots__/dom.expected/template.hydrate.js
@@ -1,35 +1,14 @@
-// size: 319 (min) 138 (brotli)
-const _count_effect = _$.effect("a0", (_scope) => {
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 6: count } = _scope;
-        return function () {
-          _count(_scope, count + 2);
-        };
-      })(_scope),
-    ),
-      _$.on(
-        _scope[2],
-        "click",
-        ((_scope) => {
-          const { 6: count } = _scope;
-          return function () {
-            _count(_scope, 3 * count);
-          };
-        })(_scope),
-      ),
-      _$.on(
-        _scope[4],
-        "click",
-        ((_scope) => {
-          const { 6: count } = _scope;
-          return function () {
-            _count(_scope, count ** 3);
-          };
-        })(_scope),
-      );
+// size: 243 (min) 126 (brotli)
+const _count_effect = _$.effect("a0", (_scope, { 6: count }) => {
+    _$.on(_scope[0], "click", function () {
+      _count(_scope, count + 2);
+    }),
+      _$.on(_scope[2], "click", function () {
+        _count(_scope, 3 * count);
+      }),
+      _$.on(_scope[4], "click", function () {
+        _count(_scope, count ** 3);
+      });
   }),
   _count = _$.state(6, (_scope, count) => {
     _$.data(_scope[1], count),
diff --git a/packages/translator-tags/src/__tests__/fixtures/reassignment-expression-counter/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/reassignment-expression-counter/__snapshots__/dom.expected/template.js
index 846408f317..c99a920bcf 100644
--- a/packages/translator-tags/src/__tests__/fixtures/reassignment-expression-counter/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/reassignment-expression-counter/__snapshots__/dom.expected/template.js
@@ -1,34 +1,18 @@
 export const _template_ = "";
 export const _walks_ = /* get, next(1), get, out(1), get, next(1), get, out(1), get, next(1), get, out(1) */" D l D l D l";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _onClick = _scope => {
-  const {
-    count
-  } = _scope;
-  return function () {
+const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/reassignment-expression-counter/template.marko_0_count", (_scope, {
+  count
+}) => {
+  _$.on(_scope["#button/0"], "click", function () {
     _count(_scope, count + 2);
-  };
-};
-const _onClick2 = _scope => {
-  const {
-    count
-  } = _scope;
-  return function () {
+  });
+  _$.on(_scope["#button/2"], "click", function () {
     _count(_scope, count * 3);
-  };
-};
-const _onClick3 = _scope => {
-  const {
-    count
-  } = _scope;
-  return function () {
+  });
+  _$.on(_scope["#button/4"], "click", function () {
     _count(_scope, count ** 3);
-  };
-};
-const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/reassignment-expression-counter/template.marko_0_count", _scope => {
-  _$.on(_scope["#button/0"], "click", _onClick(_scope));
-  _$.on(_scope["#button/2"], "click", _onClick2(_scope));
-  _$.on(_scope["#button/4"], "click", _onClick3(_scope));
+  });
 });
 const _count = /* @__PURE__ */_$.state("count", (_scope, count) => {
   _$.data(_scope["#text/1"], count);
diff --git a/packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/__snapshots__/.name-cache.json b/packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/__snapshots__/.name-cache.json
index cc0faaa0e1..eaa636fd0d 100644
--- a/packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/__snapshots__/.name-cache.json
+++ b/packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/__snapshots__/.name-cache.json
@@ -7,7 +7,8 @@
       "$_a": "o",
       "$_pattern_": "e",
       "$_count_effect": "n",
-      "$_count": "m"
+      "$_count": "m",
+      "$_createWrapper": "i"
     }
   }
 }
diff --git a/packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/__snapshots__/dom.expected/template.hydrate.js
index 3f6d597bde..8edccf4bb3 100644
--- a/packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/__snapshots__/dom.expected/template.hydrate.js
@@ -1,28 +1,21 @@
-// size: 287 (min) 168 (brotli)
-function createWrapper(a) {
-  return { a: a };
-}
-_$.register("a0", createWrapper);
-const _a = _$.value(5, (_scope, a) => {
+// size: 271 (min) 167 (brotli)
+const createWrapper = _createWrapper,
+  _a = _$.value(5, (_scope, a) => {
     _$.data(_scope[1], a),
       ((_scope, b) => {
         _$.data(_scope[2], b);
       })(_scope, a);
   }),
   _pattern_ = _$.value(4, (_scope, _pattern_) => _a(_scope, _pattern_.a)),
-  _count_effect = _$.effect("a1", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 3: count } = _scope;
-        return function () {
-          _count(_scope, count + 1);
-        };
-      })(_scope),
-    ),
+  _count_effect = _$.effect("a1", (_scope, { 3: count }) =>
+    _$.on(_scope[0], "click", function () {
+      _count(_scope, count + 1);
+    }),
   ),
   _count = _$.state(3, (_scope, count) => {
     _count_effect(_scope), _pattern_(_scope, createWrapper(count));
   });
-init();
+function _createWrapper(a) {
+  return { a: a };
+}
+_$.register("a0", _createWrapper), init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/__snapshots__/dom.expected/template.js
index 4705d9da12..297e736320 100644
--- a/packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/__snapshots__/dom.expected/template.js
@@ -1,11 +1,6 @@
 export const _template_ = "";
 export const _walks_ = /* get, next(1), replace, over(2), replace, out(1) */" D%c%l";
-_$.register("packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/template.marko_0/createWrapper", createWrapper);
-function createWrapper(a) {
-  return {
-    a
-  };
-}
+const createWrapper = _createWrapper;
 import * as _$ from "@marko/runtime-tags/debug/dom";
 const _b = (_scope, b) => {
   _$.data(_scope["#text/2"], b);
@@ -15,15 +10,11 @@ const _a = /* @__PURE__ */_$.value("a", (_scope, a) => {
   _b(_scope, a);
 });
 const _pattern_ = /* @__PURE__ */_$.value("_pattern_", (_scope, _pattern_) => _a(_scope, _pattern_.a));
-const _onClick = _scope => {
-  const {
-    count
-  } = _scope;
-  return function () {
-    _count(_scope, count + 1);
-  };
-};
-const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/template.marko_0_count", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/template.marko_0_count", (_scope, {
+  count
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _count(_scope, count + 1), count;
+}));
 const _count = /* @__PURE__ */_$.state("count", (_scope, count) => {
   _count_effect(_scope);
   _pattern_(_scope, createWrapper(count));
@@ -31,4 +22,10 @@ const _count = /* @__PURE__ */_$.state("count", (_scope, count) => {
 export function _setup_(_scope) {
   _count(_scope, 0);
 }
+function _createWrapper(a) {
+  return {
+    a
+  };
+}
+_$.register("packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/template.marko_0/createWrapper", _createWrapper);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/__snapshots__/html.expected/template.js
index b200b00ceb..41e1f91b6f 100644
--- a/packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/__snapshots__/html.expected/template.js
@@ -3,10 +3,10 @@ function createWrapper(a) {
     a
   };
 }
+_$.register(createWrapper, "packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/template.marko_0/createWrapper");
 import * as _$ from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _scope0_id = _$.nextScopeId();
-  _$.register(createWrapper, "packages/translator-tags/src/__tests__/fixtures/same-source-non-alias/template.marko_0/createWrapper");
   const count = 0;
   const {
     a,
diff --git a/packages/translator-tags/src/__tests__/fixtures/shadow-same-scope/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/shadow-same-scope/__snapshots__/dom.expected/template.hydrate.js
index 00fa9dbf73..3c970cd72e 100644
--- a/packages/translator-tags/src/__tests__/fixtures/shadow-same-scope/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/shadow-same-scope/__snapshots__/dom.expected/template.hydrate.js
@@ -1,60 +1,32 @@
-// size: 558 (min) 169 (brotli)
-const _count4_effect = _$.effect("a0", (_scope) =>
-    _$.on(
-      _scope[6],
-      "click",
-      ((_scope) => {
-        const { 11: _count3 } = _scope;
-        return function () {
-          _count4(_scope, _count3 + 1);
-        };
-      })(_scope),
-    ),
+// size: 478 (min) 169 (brotli)
+const _count4_effect = _$.effect("a0", (_scope, { 11: _count3 }) =>
+    _$.on(_scope[6], "click", function () {
+      _count4(_scope, _count3 + 1);
+    }),
   ),
   _count4 = _$.state(11, (_scope, _count3) => {
     _$.data(_scope[7], _count3), _count4_effect(_scope);
   }),
-  _count3_effect = _$.effect("a1", (_scope) =>
-    _$.on(
-      _scope[4],
-      "click",
-      ((_scope) => {
-        const { 10: _count2 } = _scope;
-        return function () {
-          _count3(_scope, _count2 + 1);
-        };
-      })(_scope),
-    ),
+  _count3_effect = _$.effect("a1", (_scope, { 10: _count2 }) =>
+    _$.on(_scope[4], "click", function () {
+      _count3(_scope, _count2 + 1);
+    }),
   ),
   _count3 = _$.state(10, (_scope, _count2) => {
     _$.data(_scope[5], _count2), _count3_effect(_scope);
   }),
-  _count2_effect = _$.effect("a2", (_scope) =>
-    _$.on(
-      _scope[2],
-      "click",
-      ((_scope) => {
-        const { 9: _count } = _scope;
-        return function () {
-          _count2(_scope, _count + 1);
-        };
-      })(_scope),
-    ),
+  _count2_effect = _$.effect("a2", (_scope, { 9: _count }) =>
+    _$.on(_scope[2], "click", function () {
+      _count2(_scope, _count + 1);
+    }),
   ),
   _count2 = _$.state(9, (_scope, _count) => {
     _$.data(_scope[3], _count), _count2_effect(_scope);
   }),
-  _count_effect = _$.effect("a3", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 8: count } = _scope;
-        return function () {
-          _count(_scope, count + 1);
-        };
-      })(_scope),
-    ),
+  _count_effect = _$.effect("a3", (_scope, { 8: count }) =>
+    _$.on(_scope[0], "click", function () {
+      _count(_scope, count + 1);
+    }),
   ),
   _count = _$.state(8, (_scope, count) => {
     _$.data(_scope[1], count), _count_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/shadow-same-scope/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/shadow-same-scope/__snapshots__/dom.expected/template.js
index 8c4e4bf07f..c56549587b 100644
--- a/packages/translator-tags/src/__tests__/fixtures/shadow-same-scope/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/shadow-same-scope/__snapshots__/dom.expected/template.js
@@ -1,54 +1,38 @@
 export const _template_ = "
    ";
 export const _walks_ = /* next(1), get, next(1), get, out(1), next(1), get, next(1), get, out(1), next(1), get, next(1), get, out(4), next(1), get, next(1), get, out(2) */"D D lD D lD D oD D m";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _onClick = _scope => {
-  const {
-    _count3
-  } = _scope;
-  return function () {
-    _count4(_scope, _count3 + 1);
-  };
-};
-const _count4_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/shadow-same-scope/template.marko_0__count3", _scope => _$.on(_scope["#button/6"], "click", _onClick(_scope)));
+const _count4_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/shadow-same-scope/template.marko_0__count3", (_scope, {
+  _count3
+}) => _$.on(_scope["#button/6"], "click", function () {
+  _count4(_scope, _count3 + 1), _count3;
+}));
 const _count4 = /* @__PURE__ */_$.state("_count3", (_scope, _count3) => {
   _$.data(_scope["#text/7"], _count3);
   _count4_effect(_scope);
 });
-const _onClick2 = _scope => {
-  const {
-    _count2
-  } = _scope;
-  return function () {
-    _count3(_scope, _count2 + 1);
-  };
-};
-const _count3_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/shadow-same-scope/template.marko_0__count2", _scope => _$.on(_scope["#button/4"], "click", _onClick2(_scope)));
+const _count3_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/shadow-same-scope/template.marko_0__count2", (_scope, {
+  _count2
+}) => _$.on(_scope["#button/4"], "click", function () {
+  _count3(_scope, _count2 + 1), _count2;
+}));
 const _count3 = /* @__PURE__ */_$.state("_count2", (_scope, _count2) => {
   _$.data(_scope["#text/5"], _count2);
   _count3_effect(_scope);
 });
-const _onClick3 = _scope => {
-  const {
-    _count
-  } = _scope;
-  return function () {
-    _count2(_scope, _count + 1);
-  };
-};
-const _count2_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/shadow-same-scope/template.marko_0__count", _scope => _$.on(_scope["#button/2"], "click", _onClick3(_scope)));
+const _count2_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/shadow-same-scope/template.marko_0__count", (_scope, {
+  _count
+}) => _$.on(_scope["#button/2"], "click", function () {
+  _count2(_scope, _count + 1), _count;
+}));
 const _count2 = /* @__PURE__ */_$.state("_count", (_scope, _count) => {
   _$.data(_scope["#text/3"], _count);
   _count2_effect(_scope);
 });
-const _onClick4 = _scope => {
-  const {
-    count
-  } = _scope;
-  return function () {
-    _count(_scope, count + 1);
-  };
-};
-const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/shadow-same-scope/template.marko_0_count", _scope => _$.on(_scope["#button/0"], "click", _onClick4(_scope)));
+const _count_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/shadow-same-scope/template.marko_0_count", (_scope, {
+  count
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _count(_scope, count + 1), count;
+}));
 const _count = /* @__PURE__ */_$.state("count", (_scope, count) => {
   _$.data(_scope["#text/1"], count);
   _count_effect(_scope);
diff --git a/packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/__snapshots__/.name-cache.json b/packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/__snapshots__/.name-cache.json
index 15020019d0..0cc6aee9cd 100644
--- a/packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/__snapshots__/.name-cache.json
+++ b/packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/__snapshots__/.name-cache.json
@@ -8,7 +8,8 @@
       "$_d": "e",
       "$_c": "i",
       "$_b": "s",
-      "$_a": "m"
+      "$_a": "m",
+      "$_noop": "n"
     }
   }
 }
diff --git a/packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/__snapshots__/dom.expected/template.hydrate.js
index e497e45000..fcce880a38 100644
--- a/packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/__snapshots__/dom.expected/template.hydrate.js
@@ -1,30 +1,37 @@
-// size: 463 (min) 222 (brotli)
-function noop(_) {}
-_$.register("a0", noop);
-const _e = _$.state(10, (_scope, e) => _$.data(_scope[5], JSON.stringify(e))),
+// size: 490 (min) 268 (brotli)
+const noop = _noop,
+  _e = _$.state(10, (_scope, e) => _$.data(_scope[5], JSON.stringify(e))),
   _d = _$.state(9, (_scope, d) => _$.data(_scope[4], d)),
   _c = _$.state(8, (_scope, c) => _$.data(_scope[3], JSON.stringify(c))),
   _b = _$.state(7, (_scope, b) => _$.data(_scope[2], b)),
   _a = _$.state(6, (_scope, a) => _$.data(_scope[1], a));
+function _noop(_) {}
 _$.effect("a1", (_scope) =>
   _$.on(_scope[0], "click", function () {
-    let local, _a2, _b2, _c2, _d2, _e2;
-    ({
-      a: _a2,
-      _b: { _b: _b2 },
-      local: local,
-      ..._c2
-    } = { a: 1, _b: { _b: 2 }, local: 3, c: 4 }),
+    let local;
+    var _result2, _a2, _b2, _c2, _result, _d2, _e2;
+    (_result2 = { a: 1, _b: { _b: 2 }, local: 3, c: 4 }),
+      ({
+        a: _a2,
+        _b: { _b: _b2 },
+        local: local,
+        ..._c2
+      } = _result2),
       _a(_scope, _a2),
       _b(_scope, _b2),
       _c(_scope, _c2),
-      ([
-        {
-          arr: [local, _d2, , ..._e2],
-        },
-      ] = [{ arr: [6, 7, 8, 9] }]),
-      _d(_scope, _d2),
-      _e(_scope, _e2);
+      noop(
+        ((_result = [{ arr: [6, 7, 8, 9] }]),
+        ([
+          {
+            arr: [local, _d2, , ..._e2],
+          },
+        ] = _result),
+        _d(_scope, _d2),
+        _e(_scope, _e2),
+        _result),
+      );
   }),
 ),
+  _$.register("a0", _noop),
   init();
diff --git a/packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/__snapshots__/dom.expected/template.js
index c88bd87557..2c988424a4 100644
--- a/packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/__snapshots__/dom.expected/template.js
@@ -1,7 +1,6 @@
 export const _template_ = "";
 export const _walks_ = /* get, next(2), over(1), replace, out(1), next(1), over(1), replace, out(1), next(1), over(1), replace, out(1), next(1), over(1), replace, out(1), next(1), over(1), replace, out(2) */" Eb%lDb%lDb%lDb%lDb%m";
-_$.register("packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/template.marko_0/noop", noop);
-function noop(_) {}
+const noop = _noop;
 import * as _$ from "@marko/runtime-tags/debug/dom";
 const _e = /* @__PURE__ */_$.state("e", (_scope, e) => _$.data(_scope["#text/5"], JSON.stringify(e)));
 const _d = /* @__PURE__ */_$.state("d", (_scope, d) => _$.data(_scope["#text/4"], d));
@@ -10,17 +9,14 @@ const _b = /* @__PURE__ */_$.state("b", (_scope, b) => _$.data(_scope["#text/2"]
 const _a = /* @__PURE__ */_$.state("a", (_scope, a) => _$.data(_scope["#text/1"], a));
 const _setup__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/template.marko_0", _scope => _$.on(_scope["#button/0"], "click", function () {
   let local;
-  let _a2;
-  let _b2;
-  let _c2;
-  ({
+  ((_result2, _a2, _b2, _c2) => ({
     a: _a2,
     _b: {
       _b: _b2
     },
     local,
     ..._c2
-  } = {
+  } = _result2, _a(_scope, _a2), _b(_scope, _b2), _c(_scope, _c2), _result2))({
     a: 1,
     _b: {
       _b: 2
@@ -28,18 +24,11 @@ const _setup__effect = _$.effect("packages/translator-tags/src/__tests__/fixture
     local: 3,
     c: 4
   });
-  _a(_scope, _a2);
-  _b(_scope, _b2);
-  _c(_scope, _c2);
-  let _d2;
-  let _e2;
-  noop([{
+  noop(((_result, _d2, _e2) => ([{
     arr: [local, _d2,, ..._e2]
-  }] = [{
+  }] = _result, _d(_scope, _d2), _e(_scope, _e2), _result))([{
     arr: [6, 7, 8, 9]
-  }]);
-  _d(_scope, _d2);
-  _e(_scope, _e2);
+  }]));
 }));
 export function _setup_(_scope) {
   _setup__effect(_scope);
@@ -49,4 +38,6 @@ export function _setup_(_scope) {
   _d(_scope, 0);
   _e(_scope, []);
 }
+function _noop(_) {}
+_$.register("packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/template.marko_0/noop", _noop);
 export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/__snapshots__/html.expected/template.js
index 44615f72fe..f466570430 100644
--- a/packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/__snapshots__/html.expected/template.js
@@ -1,8 +1,8 @@
 function noop(_) {}
+_$.register(noop, "packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/template.marko_0/noop");
 import * as _$ from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _scope0_id = _$.nextScopeId();
-  _$.register(noop, "packages/translator-tags/src/__tests__/fixtures/tag-var-destructure/template.marko_0/noop");
   const a = 0;
   const b = 0;
   const c = {};
diff --git a/packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/__snapshots__/dom.expected/template.hydrate.js
index 5ddd22997d..c684465bcd 100644
--- a/packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/__snapshots__/dom.expected/template.hydrate.js
@@ -1,19 +1,17 @@
-// size: 824 (min) 341 (brotli)
-const _count$ifBody_effect = _$.effect("a0", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const {
-          _: {
-            _: { 4: count },
-          },
-        } = _scope;
-        return function () {
-          _count(_scope._._, count + 1);
-        };
-      })(_scope),
-    ),
+// size: 764 (min) 334 (brotli)
+const _count$ifBody_effect = _$.effect(
+    "a0",
+    (
+      _scope,
+      {
+        _: {
+          _: { 4: count },
+        },
+      },
+    ) =>
+      _$.on(_scope[0], "click", function () {
+        _count(_scope._._, count + 1);
+      }),
   ),
   _count$ifBody = _$.registerSubscriber(
     "a1",
@@ -32,19 +30,10 @@ const _count$ifBody_effect = _$.effect("a0", (_scope) =>
     ]),
   ),
   _if$ifBody = _$.conditional(1, 0),
-  _inner$ifBody_effect = _$.effect("a3", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const {
-          _: { 3: inner },
-        } = _scope;
-        return function () {
-          _inner(_scope._, !inner);
-        };
-      })(_scope),
-    ),
+  _inner$ifBody_effect = _$.effect("a3", (_scope, { _: { 3: inner } }) =>
+    _$.on(_scope[0], "click", function () {
+      _inner(_scope._, !inner);
+    }),
   ),
   _inner$ifBody = _$.closure(
     3,
@@ -66,17 +55,10 @@ const _count$ifBody_effect = _$.effect("a0", (_scope) =>
   _if = _$.conditional(1, 0),
   _count = _$.state(4, 0, () => _$.dynamicSubscribers(4)),
   _inner = _$.state(3, 0, () => _$.inConditionalScope(_inner$ifBody, 1)),
-  _outer_effect = _$.effect("a5", (_scope) =>
-    _$.on(
-      _scope[0],
-      "click",
-      ((_scope) => {
-        const { 2: outer } = _scope;
-        return function () {
-          _outer(_scope, !outer);
-        };
-      })(_scope),
-    ),
+  _outer_effect = _$.effect("a5", (_scope, { 2: outer }) =>
+    _$.on(_scope[0], "click", function () {
+      _outer(_scope, !outer);
+    }),
   ),
   _outer = _$.state(
     2,
diff --git a/packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/__snapshots__/dom.expected/template.js
index a925040d42..d00a0b4dc9 100644
--- a/packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/__snapshots__/dom.expected/template.js
@@ -1,36 +1,28 @@
 export const _template_ = "
    ";
 export const _walks_ = /* next(1), get, over(1), replace, out(1) */"D b%l";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _onClick = _scope => {
-  const {
+const _count$ifBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count", (_scope, {
+  _: {
     _: {
-      _: {
-        count
-      }
+      count
     }
-  } = _scope;
-  return function () {
-    _count(_scope._._, count + 1);
-  };
-};
-const _count$ifBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count", _scope => _$.on(_scope["#button/0"], "click", _onClick(_scope)));
+  }
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _count(_scope._._, count + 1), count;
+}));
 const _count$ifBody = _$.registerSubscriber("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_count/subscriber", /* @__PURE__ */_$.dynamicClosure("count", (_scope, count) => {
   _$.data(_scope["#text/1"], count);
   _count$ifBody_effect(_scope);
 }, _scope => _scope._._));
 const _ifBody2 = _$.register("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_2_renderer", /* @__PURE__ */_$.createRenderer("", /* get, next(1), get */" D ", void 0, () => [_count$ifBody]));
 const _if$ifBody = /* @__PURE__ */_$.conditional("#text/1", 0);
-const _onClick2 = _scope => {
-  const {
-    _: {
-      inner
-    }
-  } = _scope;
-  return function () {
-    _inner(_scope._, !inner);
-  };
-};
-const _inner$ifBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_inner", _scope => _$.on(_scope["#button/0"], "click", _onClick2(_scope)));
+const _inner$ifBody_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_1_inner", (_scope, {
+  _: {
+    inner
+  }
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _inner(_scope._, !inner);
+}));
 const _inner$ifBody = /* @__PURE__ */_$.closure("inner", (_scope, inner) => {
   _inner$ifBody_effect(_scope);
   _if$ifBody(_scope, inner ? _ifBody2 : null);
@@ -39,15 +31,11 @@ const _ifBody = _$.register("packages/translator-tags/src/__tests__/fixtures/tog
 const _if = /* @__PURE__ */_$.conditional("#text/1", 0);
 const _count = /* @__PURE__ */_$.state("count", 0, () => _$.dynamicSubscribers("count"));
 const _inner = /* @__PURE__ */_$.state("inner", 0, () => _$.inConditionalScope(_inner$ifBody, "#text/1"));
-const _onClick3 = _scope => {
-  const {
-    outer
-  } = _scope;
-  return function () {
-    _outer(_scope, !outer);
-  };
-};
-const _outer_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_0_outer", _scope => _$.on(_scope["#button/0"], "click", _onClick3(_scope)));
+const _outer_effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/toggle-nested-2/template.marko_0_outer", (_scope, {
+  outer
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _outer(_scope, !outer);
+}));
 const _outer = /* @__PURE__ */_$.state("outer", (_scope, outer) => {
   _outer_effect(_scope);
   _if(_scope, outer ? _ifBody : null);
diff --git a/packages/translator-tags/src/__tests__/fixtures/user-effect-abort-signal/__snapshots__/dom.expected/template.hydrate.js b/packages/translator-tags/src/__tests__/fixtures/user-effect-abort-signal/__snapshots__/dom.expected/template.hydrate.js
index f681250122..1d2974ac92 100644
--- a/packages/translator-tags/src/__tests__/fixtures/user-effect-abort-signal/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/translator-tags/src/__tests__/fixtures/user-effect-abort-signal/__snapshots__/dom.expected/template.hydrate.js
@@ -1,8 +1,7 @@
-// size: 179 (min) 127 (brotli)
+// size: 174 (min) 142 (brotli)
 const _b = _$.state(6, (_scope, b) => _$.data(_scope[1], b)),
   _a = _$.state(5, (_scope, a) => _$.data(_scope[0], a));
-_$.effect("a0", (_scope) => {
-  const { 4: input_value } = _scope;
+_$.effect("a0", (_scope, { 4: input_value }) => {
   {
     const previousValue = _a(_scope, input_value + 1);
     _$.getAbortSignal(_scope, 0).onabort = () => _b(_scope, previousValue);
diff --git a/packages/translator-tags/src/__tests__/fixtures/user-effect-abort-signal/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/user-effect-abort-signal/__snapshots__/dom.expected/template.js
index a508ae637f..0d23869ff9 100644
--- a/packages/translator-tags/src/__tests__/fixtures/user-effect-abort-signal/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/user-effect-abort-signal/__snapshots__/dom.expected/template.js
@@ -3,10 +3,9 @@ export const _walks_ = /* next(1), replace, over(2), replace, out(1) */"D%c%l";
 import * as _$ from "@marko/runtime-tags/debug/dom";
 const _b = /* @__PURE__ */_$.state("b", (_scope, b) => _$.data(_scope["#text/1"], b));
 const _a = /* @__PURE__ */_$.state("a", (_scope, a) => _$.data(_scope["#text/0"], a));
-const _input_value__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/user-effect-abort-signal/template.marko_0_input_value", _scope => {
-  const {
-    input_value
-  } = _scope;
+const _input_value__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/user-effect-abort-signal/template.marko_0_input_value", (_scope, {
+  input_value
+}) => {
   {
     const previousValue = _a(_scope, input_value + 1);
     _$.getAbortSignal(_scope, 0).onabort = () => _b(_scope, previousValue);
diff --git a/packages/translator-tags/src/core/effect.ts b/packages/translator-tags/src/core/effect.ts
index 4824b53dd6..a736c41232 100644
--- a/packages/translator-tags/src/core/effect.ts
+++ b/packages/translator-tags/src/core/effect.ts
@@ -76,8 +76,6 @@ export default {
           referencedBindings,
           inlineBody ||
             t.expressionStatement(t.callExpression(value, [scopeIdentifier])),
-          value,
-          !!inlineBody,
         );
       } else {
         addHTMLEffectCall(section, referencedBindings);
diff --git a/packages/translator-tags/src/core/html-comment.ts b/packages/translator-tags/src/core/html-comment.ts
index 104f0798f0..25ea5d154b 100644
--- a/packages/translator-tags/src/core/html-comment.ts
+++ b/packages/translator-tags/src/core/html-comment.ts
@@ -215,7 +215,6 @@ export default {
     tag.remove();
   },
   parseOptions: {
-    // TODO: fix the types for Tag or parseOptions or something
     text: true,
   },
   attributes: {},
diff --git a/packages/translator-tags/src/core/html-script.ts b/packages/translator-tags/src/core/html-script.ts
new file mode 100644
index 0000000000..2a9f170ccb
--- /dev/null
+++ b/packages/translator-tags/src/core/html-script.ts
@@ -0,0 +1,480 @@
+// TODO: this shares a bunch of logic with the native tag translator.
+// we should probably attempt to share that logic where possible.
+// Also need to ensure it stays in sync.
+
+import { assertNoArgs, assertNoParams, type Tag } from "@marko/babel-utils";
+import { types as t } from "@marko/compiler";
+import {
+  getEventHandlerName,
+  isEventHandler,
+} from "@marko/runtime-tags/common/helpers";
+import { WalkCode } from "@marko/runtime-tags/common/types";
+
+import evaluate from "../util/evaluate";
+import { isOutputHTML } from "../util/marko-config";
+import {
+  BindingType,
+  createBinding,
+  dropReferences,
+  getScopeAccessorLiteral,
+  mergeReferences,
+} from "../util/references";
+import { callRuntime, getHTMLRuntime } from "../util/runtime";
+import {
+  createScopeReadExpression,
+  getScopeExpression,
+} from "../util/scope-read";
+import {
+  getOrCreateSection,
+  getScopeIdIdentifier,
+  getSection,
+} from "../util/sections";
+import {
+  addHTMLEffectCall,
+  addStatement,
+  getRegisterUID,
+  getSerializedScopeProperties,
+} from "../util/signals";
+import { toObjectProperty } from "../util/to-property-name";
+import { propsToExpression } from "../util/translate-attrs";
+import translateVar from "../util/translate-var";
+import * as walks from "../util/walks";
+import * as writer from "../util/writer";
+import { currentProgramPath, scopeIdentifier } from "../visitors/program";
+import {
+  kNativeTagBinding,
+  kSerializeMarker,
+} from "../visitors/tag/native-tag";
+
+const kGetterId = Symbol("node getter id");
+
+declare module "@marko/compiler/dist/types" {
+  export interface NodeExtra {
+    [kGetterId]?: string;
+  }
+}
+
+export default {
+  analyze(tag) {
+    assertNoArgs(tag);
+    assertNoParams(tag);
+
+    const { node } = tag;
+    if (node.var && !t.isIdentifier(node.var)) {
+      throw tag
+        .get("var")
+        .buildCodeFrameError(
+          "Tag variables on native elements cannot be destructured.",
+        );
+    }
+
+    const section = getOrCreateSection(tag);
+    let hasEventHandlers = false;
+    let hasDynamicAttributes = false;
+
+    const seen: Record = {};
+    const { attributes } = tag.node;
+    let spreadReferenceNodes: t.Node[] | undefined;
+    for (let i = attributes.length; i--; ) {
+      const attr = attributes[i];
+      if (t.isMarkoAttribute(attr)) {
+        if (seen[attr.name]) {
+          // drop references for duplicated attributes.
+          dropReferences(attr.value);
+          continue;
+        }
+
+        seen[attr.name] = attr;
+
+        if (isEventHandler(attr.name)) {
+          (attr.value.extra ??= {}).isEffect = true;
+          hasEventHandlers = true;
+        } else if (!evaluate(attr.value).confident) {
+          hasDynamicAttributes = true;
+        }
+      } else if (t.isMarkoSpreadAttribute(attr)) {
+        hasEventHandlers = true;
+        hasDynamicAttributes = true;
+        (attr.value.extra ??= {}).isEffect = true;
+      }
+
+      if (spreadReferenceNodes) {
+        spreadReferenceNodes.push(attr.value);
+      } else if (t.isMarkoSpreadAttribute(attr)) {
+        spreadReferenceNodes = [attr.value];
+      }
+    }
+
+    if (spreadReferenceNodes) {
+      mergeReferences(section, tag.node, spreadReferenceNodes);
+    }
+
+    const bodyPlaceholderNodes: t.Node[] = [];
+    let hasBodyPlaceholders = false;
+    for (const child of tag.node.body.body) {
+      if (t.isMarkoPlaceholder(child)) {
+        bodyPlaceholderNodes.push(child.value);
+        hasBodyPlaceholders = true;
+      } else if (!t.isMarkoText(child)) {
+        throw tag.hub.buildError(
+          child,
+          "Invalid child. Only text is allowed inside an html-script.",
+        );
+      }
+    }
+
+    if (bodyPlaceholderNodes.length > 1) {
+      mergeReferences(
+        section,
+        bodyPlaceholderNodes[0],
+        bodyPlaceholderNodes.slice(1),
+      );
+    }
+
+    if (
+      node.var ||
+      hasEventHandlers ||
+      hasDynamicAttributes ||
+      hasBodyPlaceholders
+    ) {
+      currentProgramPath.node.extra.isInteractive ||= hasEventHandlers;
+      const tagExtra = (node.extra ??= {});
+      const bindingName = "#script";
+      tagExtra[kSerializeMarker] = hasEventHandlers || !!node.var;
+      tagExtra[kNativeTagBinding] = createBinding(
+        bindingName,
+        BindingType.dom,
+        section,
+      );
+
+      if (node.var) {
+        for (const ref of tag.scope.getBinding(node.var.name)!.referencePaths) {
+          if (!ref.parentPath?.isCallExpression()) {
+            tagExtra[kGetterId] = getRegisterUID(section, bindingName);
+            break;
+          }
+        }
+      }
+    }
+  },
+  translate(tag) {
+    const tagExtra = tag.node.extra!;
+    const nodeRef = tagExtra[kNativeTagBinding];
+    const isHTML = isOutputHTML();
+    const write = writer.writeTo(tag);
+    const section = getSection(tag);
+    const hasVar = !!tag.node.var;
+
+    if (hasVar) {
+      const getterId = tagExtra[kGetterId];
+      if (isHTML) {
+        const varName = (tag.node.var as t.Identifier).name;
+        const references = tag.scope.getBinding(varName)!.referencePaths;
+        for (const reference of references) {
+          let currentSection = getSection(reference);
+          while (currentSection !== section && currentSection.parent) {
+            getSerializedScopeProperties(currentSection).set(
+              t.stringLiteral("_"),
+              callRuntime(
+                "ensureScopeWithId",
+                getScopeIdIdentifier((currentSection = currentSection.parent!)),
+              ),
+            );
+          }
+        }
+
+        translateVar(
+          tag,
+          callRuntime(
+            "nodeRef",
+            getterId && getScopeIdIdentifier(section),
+            getterId && t.stringLiteral(getterId),
+          ),
+        );
+      } else {
+        const varName = (tag.node.var as t.Identifier).name;
+        const references = tag.scope.getBinding(varName)!.referencePaths;
+        let getterFnIdentifier: t.Identifier | undefined;
+        if (getterId) {
+          getterFnIdentifier = currentProgramPath.scope.generateUidIdentifier(
+            `get_${varName}`,
+          );
+          currentProgramPath.pushContainer(
+            "body",
+            t.variableDeclaration("const", [
+              t.variableDeclarator(
+                getterFnIdentifier,
+                callRuntime(
+                  "nodeRef",
+                  t.stringLiteral(getterId),
+                  getScopeAccessorLiteral(nodeRef!),
+                ),
+              ),
+            ]),
+          );
+        }
+
+        for (const reference of references) {
+          const referenceSection = getSection(reference);
+          if (reference.parentPath?.isCallExpression()) {
+            reference.parentPath.replaceWith(
+              t.expressionStatement(
+                createScopeReadExpression(referenceSection, nodeRef!),
+              ),
+            );
+          } else if (getterFnIdentifier) {
+            reference.replaceWith(
+              t.callExpression(getterFnIdentifier, [
+                getScopeExpression(referenceSection, getSection(tag)),
+              ]),
+            );
+          }
+        }
+      }
+    }
+
+    let visitAccessor: t.StringLiteral | t.NumericLiteral | undefined;
+    if (nodeRef) {
+      visitAccessor = getScopeAccessorLiteral(nodeRef);
+      walks.visit(tag, WalkCode.Get);
+    }
+
+    write``;
+    walks.enter(tag);
+
+    if (isOutputHTML()) {
+      for (const child of tag.node.body.body) {
+        if (t.isMarkoText(child)) {
+          write`${child.value}`;
+        } else if (t.isMarkoPlaceholder(child)) {
+          write`${callRuntime("escapeScript", child.value)}`;
+        }
+      }
+    } else {
+      const templateQuasis: t.TemplateElement[] = [];
+      const templateExpressions: t.Expression[] = [];
+      let currentQuasi = "";
+      let referencePlaceholder: t.MarkoPlaceholder | undefined;
+      for (const child of tag.node.body.body) {
+        if (t.isMarkoText(child)) {
+          currentQuasi += child.value;
+        } else if (t.isMarkoPlaceholder(child)) {
+          referencePlaceholder ||= child;
+          templateQuasis.push(t.templateElement({ raw: currentQuasi }));
+          templateExpressions.push(child.value);
+          currentQuasi = "";
+        }
+      }
+
+      if (!referencePlaceholder) {
+        write`${currentQuasi}`;
+      } else {
+        templateQuasis.push(t.templateElement({ raw: currentQuasi }));
+        addStatement(
+          "render",
+          getSection(tag),
+          referencePlaceholder.value.extra?.referencedBindings,
+          t.expressionStatement(
+            callRuntime(
+              "textContent",
+              t.memberExpression(scopeIdentifier, visitAccessor!, true),
+              t.templateLiteral(templateQuasis, templateExpressions),
+            ),
+          ),
+        );
+      }
+    }
+
+    walks.exit(tag);
+    write``;
+
+    if (nodeRef) {
+      writer.markNode(tag, nodeRef);
+    }
+
+    tag.remove();
+  },
+  parseOptions: {
+    text: true,
+    preserveWhitespace: true,
+  },
+} as Tag;
+
+function getUsedAttrs(tag: t.MarkoTag) {
+  const seen: Record = {};
+  const { attributes } = tag;
+  const maybeStaticAttrs = new Set();
+  let spreadExpression: undefined | t.Expression;
+  let skipExpression: undefined | t.Expression;
+  let spreadProps: undefined | t.ObjectExpression["properties"];
+  let skipProps: undefined | t.ObjectExpression["properties"];
+  for (let i = attributes.length; i--; ) {
+    const attr = attributes[i];
+    const { value } = attr;
+    if (t.isMarkoSpreadAttribute(attr)) {
+      if (!spreadProps) {
+        spreadProps = [];
+      }
+      spreadProps.push(t.spreadElement(value));
+    } else if (!seen[attr.name]) {
+      seen[attr.name] = attr;
+      if (spreadProps) {
+        spreadProps.push(toObjectProperty(attr.name, attr.value));
+      } else {
+        maybeStaticAttrs.add(attr);
+      }
+    }
+  }
+
+  const staticAttrs = [...maybeStaticAttrs].reverse();
+
+  if (spreadProps) {
+    spreadProps.reverse();
+
+    for (const { name } of staticAttrs) {
+      (skipProps ||= []).push(toObjectProperty(name, t.numericLiteral(1)));
+    }
+
+    if (skipProps) {
+      skipExpression = t.objectExpression(skipProps);
+    }
+
+    spreadExpression = propsToExpression(spreadProps);
+  }
+
+  return {
+    staticAttrs,
+    spreadExpression,
+    skipExpression,
+  };
+}
diff --git a/packages/translator-tags/src/core/html-style.ts b/packages/translator-tags/src/core/html-style.ts
new file mode 100644
index 0000000000..93e21b6799
--- /dev/null
+++ b/packages/translator-tags/src/core/html-style.ts
@@ -0,0 +1,480 @@
+// TODO: this shares a bunch of logic with the native tag translator.
+// we should probably attempt to share that logic where possible.
+// Also need to ensure it stays in sync.
+
+import { assertNoArgs, assertNoParams, type Tag } from "@marko/babel-utils";
+import { types as t } from "@marko/compiler";
+import {
+  getEventHandlerName,
+  isEventHandler,
+} from "@marko/runtime-tags/common/helpers";
+import { WalkCode } from "@marko/runtime-tags/common/types";
+
+import evaluate from "../util/evaluate";
+import { isOutputHTML } from "../util/marko-config";
+import {
+  BindingType,
+  createBinding,
+  dropReferences,
+  getScopeAccessorLiteral,
+  mergeReferences,
+} from "../util/references";
+import { callRuntime, getHTMLRuntime } from "../util/runtime";
+import {
+  createScopeReadExpression,
+  getScopeExpression,
+} from "../util/scope-read";
+import {
+  getOrCreateSection,
+  getScopeIdIdentifier,
+  getSection,
+} from "../util/sections";
+import {
+  addHTMLEffectCall,
+  addStatement,
+  getRegisterUID,
+  getSerializedScopeProperties,
+} from "../util/signals";
+import { toObjectProperty } from "../util/to-property-name";
+import { propsToExpression } from "../util/translate-attrs";
+import translateVar from "../util/translate-var";
+import * as walks from "../util/walks";
+import * as writer from "../util/writer";
+import { currentProgramPath, scopeIdentifier } from "../visitors/program";
+import {
+  kNativeTagBinding,
+  kSerializeMarker,
+} from "../visitors/tag/native-tag";
+
+const kGetterId = Symbol("node getter id");
+
+declare module "@marko/compiler/dist/types" {
+  export interface NodeExtra {
+    [kGetterId]?: string;
+  }
+}
+
+export default {
+  analyze(tag) {
+    assertNoArgs(tag);
+    assertNoParams(tag);
+
+    const { node } = tag;
+    if (node.var && !t.isIdentifier(node.var)) {
+      throw tag
+        .get("var")
+        .buildCodeFrameError(
+          "Tag variables on native elements cannot be destructured.",
+        );
+    }
+
+    const section = getOrCreateSection(tag);
+    let hasEventHandlers = false;
+    let hasDynamicAttributes = false;
+
+    const seen: Record = {};
+    const { attributes } = tag.node;
+    let spreadReferenceNodes: t.Node[] | undefined;
+    for (let i = attributes.length; i--; ) {
+      const attr = attributes[i];
+      if (t.isMarkoAttribute(attr)) {
+        if (seen[attr.name]) {
+          // drop references for duplicated attributes.
+          dropReferences(attr.value);
+          continue;
+        }
+
+        seen[attr.name] = attr;
+
+        if (isEventHandler(attr.name)) {
+          (attr.value.extra ??= {}).isEffect = true;
+          hasEventHandlers = true;
+        } else if (!evaluate(attr.value).confident) {
+          hasDynamicAttributes = true;
+        }
+      } else if (t.isMarkoSpreadAttribute(attr)) {
+        hasEventHandlers = true;
+        hasDynamicAttributes = true;
+        (attr.value.extra ??= {}).isEffect = true;
+      }
+
+      if (spreadReferenceNodes) {
+        spreadReferenceNodes.push(attr.value);
+      } else if (t.isMarkoSpreadAttribute(attr)) {
+        spreadReferenceNodes = [attr.value];
+      }
+    }
+
+    if (spreadReferenceNodes) {
+      mergeReferences(section, tag.node, spreadReferenceNodes);
+    }
+
+    const bodyPlaceholderNodes: t.Node[] = [];
+    let hasBodyPlaceholders = false;
+    for (const child of tag.node.body.body) {
+      if (t.isMarkoPlaceholder(child)) {
+        bodyPlaceholderNodes.push(child.value);
+        hasBodyPlaceholders = true;
+      } else if (!t.isMarkoText(child)) {
+        throw tag.hub.buildError(
+          child,
+          "Invalid child. Only text is allowed inside an html-style.",
+        );
+      }
+    }
+
+    if (bodyPlaceholderNodes.length > 1) {
+      mergeReferences(
+        section,
+        bodyPlaceholderNodes[0],
+        bodyPlaceholderNodes.slice(1),
+      );
+    }
+
+    if (
+      node.var ||
+      hasEventHandlers ||
+      hasDynamicAttributes ||
+      hasBodyPlaceholders
+    ) {
+      currentProgramPath.node.extra.isInteractive ||= hasEventHandlers;
+      const tagExtra = (node.extra ??= {});
+      const bindingName = "#style";
+      tagExtra[kSerializeMarker] = hasEventHandlers || !!node.var;
+      tagExtra[kNativeTagBinding] = createBinding(
+        bindingName,
+        BindingType.dom,
+        section,
+      );
+
+      if (node.var) {
+        for (const ref of tag.scope.getBinding(node.var.name)!.referencePaths) {
+          if (!ref.parentPath?.isCallExpression()) {
+            tagExtra[kGetterId] = getRegisterUID(section, bindingName);
+            break;
+          }
+        }
+      }
+    }
+  },
+  translate(tag) {
+    const tagExtra = tag.node.extra!;
+    const nodeRef = tagExtra[kNativeTagBinding];
+    const isHTML = isOutputHTML();
+    const write = writer.writeTo(tag);
+    const section = getSection(tag);
+    const hasVar = !!tag.node.var;
+
+    if (hasVar) {
+      const getterId = tagExtra[kGetterId];
+      if (isHTML) {
+        const varName = (tag.node.var as t.Identifier).name;
+        const references = tag.scope.getBinding(varName)!.referencePaths;
+        for (const reference of references) {
+          let currentSection = getSection(reference);
+          while (currentSection !== section && currentSection.parent) {
+            getSerializedScopeProperties(currentSection).set(
+              t.stringLiteral("_"),
+              callRuntime(
+                "ensureScopeWithId",
+                getScopeIdIdentifier((currentSection = currentSection.parent!)),
+              ),
+            );
+          }
+        }
+
+        translateVar(
+          tag,
+          callRuntime(
+            "nodeRef",
+            getterId && getScopeIdIdentifier(section),
+            getterId && t.stringLiteral(getterId),
+          ),
+        );
+      } else {
+        const varName = (tag.node.var as t.Identifier).name;
+        const references = tag.scope.getBinding(varName)!.referencePaths;
+        let getterFnIdentifier: t.Identifier | undefined;
+        if (getterId) {
+          getterFnIdentifier = currentProgramPath.scope.generateUidIdentifier(
+            `get_${varName}`,
+          );
+          currentProgramPath.pushContainer(
+            "body",
+            t.variableDeclaration("const", [
+              t.variableDeclarator(
+                getterFnIdentifier,
+                callRuntime(
+                  "nodeRef",
+                  t.stringLiteral(getterId),
+                  getScopeAccessorLiteral(nodeRef!),
+                ),
+              ),
+            ]),
+          );
+        }
+
+        for (const reference of references) {
+          const referenceSection = getSection(reference);
+          if (reference.parentPath?.isCallExpression()) {
+            reference.parentPath.replaceWith(
+              t.expressionStatement(
+                createScopeReadExpression(referenceSection, nodeRef!),
+              ),
+            );
+          } else if (getterFnIdentifier) {
+            reference.replaceWith(
+              t.callExpression(getterFnIdentifier, [
+                getScopeExpression(referenceSection, getSection(tag)),
+              ]),
+            );
+          }
+        }
+      }
+    }
+
+    let visitAccessor: t.StringLiteral | t.NumericLiteral | undefined;
+    if (nodeRef) {
+      visitAccessor = getScopeAccessorLiteral(nodeRef);
+      walks.visit(tag, WalkCode.Get);
+    }
+
+    write``;
+    walks.enter(tag);
+
+    if (isOutputHTML()) {
+      for (const child of tag.node.body.body) {
+        if (t.isMarkoText(child)) {
+          write`${child.value}`;
+        } else if (t.isMarkoPlaceholder(child)) {
+          write`${callRuntime("escapeStyle", child.value)}`;
+        }
+      }
+    } else {
+      const templateQuasis: t.TemplateElement[] = [];
+      const templateExpressions: t.Expression[] = [];
+      let currentQuasi = "";
+      let referencePlaceholder: t.MarkoPlaceholder | undefined;
+      for (const child of tag.node.body.body) {
+        if (t.isMarkoText(child)) {
+          currentQuasi += child.value;
+        } else if (t.isMarkoPlaceholder(child)) {
+          referencePlaceholder ||= child;
+          templateQuasis.push(t.templateElement({ raw: currentQuasi }));
+          templateExpressions.push(child.value);
+          currentQuasi = "";
+        }
+      }
+
+      if (!referencePlaceholder) {
+        write`${currentQuasi}`;
+      } else {
+        templateQuasis.push(t.templateElement({ raw: currentQuasi }));
+        addStatement(
+          "render",
+          getSection(tag),
+          referencePlaceholder.value.extra?.referencedBindings,
+          t.expressionStatement(
+            callRuntime(
+              "textContent",
+              t.memberExpression(scopeIdentifier, visitAccessor!, true),
+              t.templateLiteral(templateQuasis, templateExpressions),
+            ),
+          ),
+        );
+      }
+    }
+
+    walks.exit(tag);
+    write``;
+
+    if (nodeRef) {
+      writer.markNode(tag, nodeRef);
+    }
+
+    tag.remove();
+  },
+  parseOptions: {
+    text: true,
+    preserveWhitespace: true,
+  },
+} as Tag;
+
+function getUsedAttrs(tag: t.MarkoTag) {
+  const seen: Record = {};
+  const { attributes } = tag;
+  const maybeStaticAttrs = new Set();
+  let spreadExpression: undefined | t.Expression;
+  let skipExpression: undefined | t.Expression;
+  let spreadProps: undefined | t.ObjectExpression["properties"];
+  let skipProps: undefined | t.ObjectExpression["properties"];
+  for (let i = attributes.length; i--; ) {
+    const attr = attributes[i];
+    const { value } = attr;
+    if (t.isMarkoSpreadAttribute(attr)) {
+      if (!spreadProps) {
+        spreadProps = [];
+      }
+      spreadProps.push(t.spreadElement(value));
+    } else if (!seen[attr.name]) {
+      seen[attr.name] = attr;
+      if (spreadProps) {
+        spreadProps.push(toObjectProperty(attr.name, attr.value));
+      } else {
+        maybeStaticAttrs.add(attr);
+      }
+    }
+  }
+
+  const staticAttrs = [...maybeStaticAttrs].reverse();
+
+  if (spreadProps) {
+    spreadProps.reverse();
+
+    for (const { name } of staticAttrs) {
+      (skipProps ||= []).push(toObjectProperty(name, t.numericLiteral(1)));
+    }
+
+    if (skipProps) {
+      skipExpression = t.objectExpression(skipProps);
+    }
+
+    spreadExpression = propsToExpression(spreadProps);
+  }
+
+  return {
+    staticAttrs,
+    spreadExpression,
+    skipExpression,
+  };
+}
diff --git a/packages/translator-tags/src/core/index.ts b/packages/translator-tags/src/core/index.ts
index 2d6cfd01f6..5bcd694e61 100644
--- a/packages/translator-tags/src/core/index.ts
+++ b/packages/translator-tags/src/core/index.ts
@@ -8,13 +8,14 @@ import EffectTag from "./effect";
 import ExportTag from "./export";
 import ForTag from "./for";
 import HTMLCommentTag from "./html-comment";
+import HTMLScriptTag from "./html-script";
+import HTMLStyleTag from "./html-style";
 import IdTag from "./id";
 import { ElseIfTag, ElseTag, IfTag } from "./if";
 import ImportTag from "./import";
 import LetTag from "./let";
 import LifecycleTag from "./lifecycle";
 import LogTag from "./log";
-import NoopTag from "./noop";
 import ReturnTag from "./return";
 import ServerTag from "./server";
 import StaticTag from "./static";
@@ -22,28 +23,27 @@ import StyleTag from "./style";
 
 export default {
   taglibId,
-  "": ImportTag,
-  "": ExportTag,
   "": AttrsTag,
-  "": IfTag,
+  "": ClientTag,
+  "": ConstTag,
+  "": DebugTag,
+  "": DefineTag,
+  "": EffectTag,
   "": ElseIfTag,
   "": ElseTag,
+  "": ExportTag,
   "": ForTag,
+  "": HTMLCommentTag,
+  "": HTMLScriptTag,
+  "": HTMLStyleTag,
+  "": IdTag,
+  "": IfTag,
+  "": ImportTag,
   "": LetTag,
-  "": ConstTag,
-  "": DefineTag,
-  "": EffectTag,
-  "": LogTag,
-  "": DebugTag,
   "": LifecycleTag,
-  "": IdTag,
-  "": HTMLCommentTag,
+  "": LogTag,
   "": ReturnTag,
-  "