feat: valueChange on return tag (#2374)

.changeset/giant-planets-refuse.md

@@ -0,0 +1,6 @@
+---
+"@marko/translator-tags": minor
+"@marko/runtime-tags": minor
+---
+
+Support valueChange attribute on `<return>` tag.

.sizes.json

@@ -7,8 +7,8 @@
     {
       "name": "*",
       "total": {
-        "min": 17850,
-        "brotli": 6455
+        "min": 17902,
+        "brotli": 6477
       }
     },
     {

.sizes/dom.js

@@ -1,4 +1,4 @@
-// size: 17850 (min) 6455 (brotli)
+// size: 17902 (min) 6477 (brotli)
 var empty = [],
   rest = Symbol();
 function attrTag(attrs2) {
@@ -417,7 +417,11 @@ function dynamicSubscribers(valueAccessor) {
 function setTagVar(scope, childAccessor, tagVarSignal2) {
   scope[childAccessor]["/"] = (valueOrOp) => tagVarSignal2(scope, valueOrOp);
 }
-var tagVarSignal = (scope, valueOrOp) => scope["/"]?.(valueOrOp),
+var tagVarSignal = (scope, valueOrOp) => scope["/"]?.(valueOrOp);
+function setTagVarChange(scope, changeHandler) {
+  scope["@"] = changeHandler;
+}
+var tagVarSignalChange = (scope, value2) => scope["@"]?.(value2),
   renderBodyClosures = (renderBody, childScope, op) => {
     let signals = renderBody?.c;
     if (signals) for (let signal of signals) signal(childScope, op);

.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","$noop":"d","$createScope":"h","$emptyScope":"g","$getEmptyScope":"p","$destroyScope":"v","$_destroyScope":"b","$onDestroy":"m","$removeAndDestroyScope":"k","$insertBefore":"y","$registeredValues":"w","$Render":"C","$isResuming":"A","$register":"S","$registerBoundSignal":"N","$init":"x","$registerSubscriber":"$","$nodeRef":"M","$MARK":"E","$CLEAN":"I","$DIRTY":"T","$state":"_","$value":"O","$accessorId":"B","$intersection":"V","$defaultGetOwnerScope":"j","$closure":"R","$dynamicClosure":"q","$childClosures":"D","$dynamicSubscribers":"P","$setTagVar":"W","$tagVarSignal":"L","$renderBodyClosures":"z","$tagIdsByGlobal":"F","$nextTagId":"U","$inChild":"G","$intersections":"J","$effect":"X","$pendingSignals":"Z","$pendingEffects":"H","$rendering":"K","$queueEffect":"Q","$run":"Y","$prepareEffects":"ee","$runEffects":"te","$runSignals":"ne","$resetAbortSignal":"re","$getAbortSignal":"ie","$stringifyClassObject":"le","$NON_DIMENSIONAL":"oe","$stringifyStyleObject":"fe","$toDelimitedString":"ue","$normalizeDynamicRenderer":"ae","$elementHandlersByEvent":"ce","$defaultDelegator":"se","$on":"de","$createDelegator":"he","$handleDelegated":"ge","$stripSpacesAndPunctuation":"pe","$controllable_input_checked":"ve","$controllable_input_checked_effect":"be","$controllable_input_checkedValue":"me","$controllable_input_checkedValue_effect":"ke","$controllable_input_value":"ye","$controllable_input_value_effect":"we","$controllable_select_value":"Ce","$controllable_select_value_effect":"Ae","$setSelectOptions":"Se","$controllable_detailsOrDialog_open":"Ne","$controllable_detailsOrDialog_open_effect":"xe","$inputType":"$e","$setValueAndUpdateSelection":"Me","$setCheckboxValue":"Ee","$delegateFormControl":"Ie","$formChangeHandlers":"Te","$syncControllable":"_e","$onFormChange":"Oe","$onFormReset":"Be","$hasValueChanged":"Ve","$hasCheckboxChanged":"je","$hasSelectChanged":"Re","$hasFormElementChanged":"qe","$normalizeStrProp":"De","$normalizeBoolProp":"Pe","$toValueProp":"We","$fallback":"Le","$parser":"ze","$parseHTML":"Fe","$eventHandlerReg":"Ue","$attr":"Ge","$setAttribute":"Je","$classAttr":"Xe","$styleAttr":"Ze","$data":"He","$attrs":"Ke","$hasAttrAlias":"Qe","$partialAttrs":"Ye","$attrsInternal":"et","$attrsEvents":"tt","$html":"nt","$props":"rt","$normalizeAttrValue":"it","$lifecycle":"lt","$walker":"ot","$trimWalkString":"ft","$walk":"ut","$walkInternal":"at","$createScopeWithRenderer":"ct","$createScopeWithTagNameOrRenderer":"st","$initRenderer":"dt","$dynamicTagAttrs":"ht","$createRendererWithOwner":"gt","$createRenderer":"pt","$_clone":"vt","$conditional":"bt","$inConditionalScope":"mt","$conditionalOnlyChild":"kt","$setConditionalRendererOnlyChild":"yt","$emptyMarkerMap":"wt","$emptyMarkerArray":"Ct","$emptyMap":"At","$emptyArray":"St","$loopOf":"Nt","$loopIn":"xt","$loopTo":"$t","$loop":"Mt","$inLoopScope":"Et","$bySecondArg":"It","$byFirstArg":"Tt","$isDifferentRenderer":"_t","$classIdToScope":"Ot","$compat":"Bt","$createTemplate":"Vt","$mount":"jt","$parseHTMLOrSingleNode":"Wt","$marker":"qt","$_clickCount_effect":"Dt","$_clickCount":"Xt","$_setup_":"Zt","$_expr_comment_id$ifBody":"ss","$_id$ifBody":"as","$_comment$ifBody":"ns","$_ifBody":"ts","$_expr_input_i$forBody":"os","$_if$forBody":"cs","$_open$forBody_effect":"is","$_open$forBody":"ms","$_id$forBody":"ls","$_i$forBody":"us","$_comment$forBody":"es","$_params_2$forBody":"ds","$_input$forBody":"rs","$_for":"bs","$_input_$1":"fs","$_input_":"ps","$_params__":"vs","$isEventHandler":"Rt","$getEventHandlerName":"Pt"}}}
+{"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","$noop":"d","$createScope":"h","$emptyScope":"g","$getEmptyScope":"p","$destroyScope":"v","$_destroyScope":"b","$onDestroy":"m","$removeAndDestroyScope":"k","$insertBefore":"y","$registeredValues":"w","$Render":"C","$isResuming":"A","$register":"S","$registerBoundSignal":"N","$init":"x","$registerSubscriber":"$","$nodeRef":"M","$MARK":"E","$CLEAN":"I","$DIRTY":"T","$state":"_","$value":"O","$accessorId":"B","$intersection":"V","$defaultGetOwnerScope":"j","$closure":"R","$dynamicClosure":"q","$childClosures":"D","$dynamicSubscribers":"P","$setTagVar":"W","$tagVarSignal":"L","$renderBodyClosures":"z","$tagIdsByGlobal":"F","$nextTagId":"U","$inChild":"G","$intersections":"J","$effect":"X","$pendingSignals":"Z","$pendingEffects":"H","$rendering":"K","$queueEffect":"Q","$run":"Y","$prepareEffects":"ee","$runEffects":"te","$runSignals":"ne","$resetAbortSignal":"re","$getAbortSignal":"ie","$stringifyClassObject":"le","$NON_DIMENSIONAL":"oe","$stringifyStyleObject":"fe","$toDelimitedString":"ue","$normalizeDynamicRenderer":"ae","$elementHandlersByEvent":"ce","$defaultDelegator":"se","$on":"de","$createDelegator":"he","$handleDelegated":"ge","$stripSpacesAndPunctuation":"pe","$controllable_input_checked":"ve","$controllable_input_checked_effect":"be","$controllable_input_checkedValue":"me","$controllable_input_checkedValue_effect":"ke","$controllable_input_value":"ye","$controllable_input_value_effect":"we","$controllable_select_value":"Ce","$controllable_select_value_effect":"Ae","$setSelectOptions":"Se","$controllable_detailsOrDialog_open":"Ne","$controllable_detailsOrDialog_open_effect":"xe","$inputType":"$e","$setValueAndUpdateSelection":"Me","$setCheckboxValue":"Ee","$delegateFormControl":"Ie","$formChangeHandlers":"Te","$syncControllable":"_e","$onFormChange":"Oe","$onFormReset":"Be","$hasValueChanged":"Ve","$hasCheckboxChanged":"je","$hasSelectChanged":"Re","$hasFormElementChanged":"qe","$normalizeStrProp":"De","$normalizeBoolProp":"Pe","$toValueProp":"We","$fallback":"Le","$parser":"ze","$parseHTML":"Fe","$eventHandlerReg":"Ue","$attr":"Ge","$setAttribute":"Je","$classAttr":"Xe","$styleAttr":"Ze","$data":"He","$attrs":"Ke","$hasAttrAlias":"Qe","$partialAttrs":"Ye","$attrsInternal":"et","$attrsEvents":"tt","$html":"nt","$props":"rt","$normalizeAttrValue":"it","$lifecycle":"lt","$walker":"ot","$trimWalkString":"ft","$walk":"ut","$walkInternal":"at","$createScopeWithRenderer":"ct","$createScopeWithTagNameOrRenderer":"st","$initRenderer":"dt","$dynamicTagAttrs":"ht","$createRendererWithOwner":"gt","$createRenderer":"pt","$_clone":"vt","$conditional":"bt","$inConditionalScope":"mt","$conditionalOnlyChild":"kt","$setConditionalRendererOnlyChild":"yt","$emptyMarkerMap":"wt","$emptyMarkerArray":"Ct","$emptyMap":"At","$emptyArray":"St","$loopOf":"Nt","$loopIn":"xt","$loopTo":"$t","$loop":"Mt","$inLoopScope":"Et","$bySecondArg":"It","$byFirstArg":"Tt","$isDifferentRenderer":"_t","$classIdToScope":"Ot","$compat":"Bt","$createTemplate":"Vt","$mount":"jt","$parseHTMLOrSingleNode":"Wt","$marker":"qt","$_clickCount_effect":"Dt","$_clickCount":"Xt","$_setup_":"Zt","$_expr_comment_id$ifBody":"ss","$_id$ifBody":"as","$_comment$ifBody":"ns","$_ifBody":"ts","$_expr_input_i$forBody":"os","$_if$forBody":"cs","$_open$forBody_effect":"is","$_open$forBody":"ms","$_id$forBody":"ls","$_i$forBody":"us","$_comment$forBody":"es","$_params_2$forBody":"ds","$_input$forBody":"rs","$_for":"bs","$_input_$1":"fs","$_input_":"ps","$_params__":"vs","$isEventHandler":"Rt","$getEventHandlerName":"Pt","$setTagVarChange":"Lt","$tagVarSignalChange":"zt"}}}

packages/runtime-tags/src/common/types.ts

@@ -38,6 +38,7 @@ export enum AccessorChar {
   LifecycleAbortController = "-",
   DynamicPlaceholderLastChild = "-",
   TagVariable = "/",
+  TagVariableChange = "@",
   ConditionalScope = "!",
   ConditionalRenderer = "(",
   LoopScopeArray = "!",

packages/runtime-tags/src/dom.ts

@@ -64,8 +64,10 @@ export {
   intersections,
   nextTagId,
   setTagVar,
+  setTagVarChange,
   state,
   tagVarSignal,
+  tagVarSignalChange,
   value,
 } from "./dom/signals";
 export { createTemplate } from "./dom/template";

packages/runtime-tags/src/dom/signals.ts

@@ -269,6 +269,15 @@ export function setTagVar(
 export const tagVarSignal = (scope: Scope, valueOrOp: unknown | SignalOp) =>
   scope[AccessorChar.TagVariable]?.(valueOrOp);
 
+export function setTagVarChange(
+  scope: Scope,
+  changeHandler: (value: unknown) => void,
+) {
+  scope[AccessorChar.TagVariableChange] = changeHandler;
+}
+export const tagVarSignalChange = (scope: Scope, value: unknown) =>
+  scope[AccessorChar.TagVariableChange]?.(value);
+
 export const renderBodyClosures = (
   renderBody: Renderer | string | undefined,
   childScope: Scope,

packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/.name-cache.json

@@ -0,0 +1,10 @@
+{
+  "vars": {
+    "props": {
+      "$_$": "t",
+      "$init": "a",
+      "$_x_effect": "n",
+      "$_x": "r"
+    }
+  }
+}

packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/csr-sanitized.expected.md

@@ -0,0 +1,81 @@
+# Render {}
+```html
+<button
+  class="inc"
+>
+  1
+</button>
+<button
+  class="reset"
+>
+  reset
+</button>
+```
+
+
+# Render 
+container.querySelector("button.inc").click()
+
+```html
+<button
+  class="inc"
+>
+  2
+</button>
+<button
+  class="reset"
+>
+  reset
+</button>
+```
+
+
+# Render 
+container.querySelector("button.inc").click()
+
+```html
+<button
+  class="inc"
+>
+  3
+</button>
+<button
+  class="reset"
+>
+  reset
+</button>
+```
+
+
+# Render 
+container.querySelector("button.reset").click()
+
+```html
+<button
+  class="inc"
+>
+  0
+</button>
+<button
+  class="reset"
+>
+  reset
+</button>
+```
+
+
+# Render 
+container.querySelector("button.inc").click()
+
+```html
+<button
+  class="inc"
+>
+  1
+</button>
+<button
+  class="reset"
+>
+  reset
+</button>
+```

packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/csr.expected.md

@@ -0,0 +1,106 @@
+# Render {}
+```html
+<button
+  class="inc"
+>
+  1
+</button>
+<button
+  class="reset"
+>
+  reset
+</button>
+```
+
+# Mutations
+```
+inserted button0, button1
+```
+
+
+# Render 
+container.querySelector("button.inc").click()
+
+```html
+<button
+  class="inc"
+>
+  2
+</button>
+<button
+  class="reset"
+>
+  reset
+</button>
+```
+
+# Mutations
+```
+button0/#text0: "1" => "2"
+```
+
+
+# Render 
+container.querySelector("button.inc").click()
+
+```html
+<button
+  class="inc"
+>
+  3
+</button>
+<button
+  class="reset"
+>
+  reset
+</button>
+```
+
+# Mutations
+```
+button0/#text0: "2" => "3"
+```
+
+
+# Render 
+container.querySelector("button.reset").click()
+
+```html
+<button
+  class="inc"
+>
+  0
+</button>
+<button
+  class="reset"
+>
+  reset
+</button>
+```
+
+# Mutations
+```
+button0/#text0: "3" => "0"
+```
+
+
+# Render 
+container.querySelector("button.inc").click()
+
+```html
+<button
+  class="inc"
+>
+  1
+</button>
+<button
+  class="reset"
+>
+  reset
+</button>
+```
+
+# Mutations
+```
+button0/#text0: "0" => "1"
+```

packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/dom.expected/components/counter.js

@@ -0,0 +1,25 @@
+export const _template_ = "<button class=inc> </button>";
+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 = /* @__PURE__ */_$.state("x", (_scope, x) => {
+  _$.data(_scope["#text/1"], x);
+  _x_effect(_scope);
+  _$.tagVarSignal(_scope, x);
+}, () => _$.tagVarSignal);
+export function _setup_(_scope) {
+  _x(_scope, 1);
+  _$.setTagVarChange(_scope, _valueChange(_scope));
+}
+export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/components/counter.marko", _template_, _walks_, _setup_);

packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/dom.expected/template.hydrate.js

@@ -0,0 +1,34 @@
+// size: 351 (min) 182 (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),
+    ),
+  ),
+  _x = _$.state(
+    2,
+    (_scope, x) => {
+      _$.data(_scope[1], x), _x_effect(_scope), _$.tagVarSignal(_scope, x);
+    },
+    () => _$.tagVarSignal,
+  );
+_$.registerBoundSignal("b0", (_scope, count) => {}),
+  _$.effect("b1", (_scope) =>
+    _$.on(_scope[1], "click", function () {
+      _$.tagVarSignalChange(_scope[0], 0);
+    }),
+  ),
+  init();

packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/dom.expected/template.js

@@ -0,0 +1,14 @@
+export const _template_ = `${_counter_template}<button class=reset>reset</button>`;
+export const _walks_ = /* beginChild, _counter_walks, endChild, get, over(1) */`/${_counter_walks}& b`;
+import { _setup_ as _counter, _template_ as _counter_template, _walks_ as _counter_walks } from "./components/counter.marko";
+import * as _$ from "@marko/runtime-tags/debug/dom";
+const _count = _$.registerBoundSignal("packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/template.marko_0_count", (_scope, count) => {});
+const _setup__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/template.marko_0", _scope => _$.on(_scope["#button/1"], "click", function () {
+  _$.tagVarSignalChange(_scope["#childScope/0"], 0);
+}));
+export function _setup_(_scope) {
+  _$.setTagVar(_scope, "#childScope/0", _count);
+  _counter(_scope["#childScope/0"]);
+  _setup__effect(_scope);
+}
+export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/template.marko", _template_, _walks_, _setup_);

packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/html.expected/components/counter.js

@@ -0,0 +1,17 @@
+import * as _$ from "@marko/runtime-tags/debug/html";
+const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
+  const _scope0_id = _$.nextScopeId();
+  const x = 1;
+  _$.write(`<button class=inc>${_$.escapeXML(x)}${_$.markResumeNode(_scope0_id, "#text/1")}</button>${_$.markResumeNode(_scope0_id, "#button/0")}`);
+  const _return = x;
+  _$.writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/components/counter.marko_0_x");
+  _$.writeScope(_scope0_id, {
+    "x": x,
+    "/": _tagVar,
+    "@": _$.register(function (_new_x) {
+      x = _new_x;
+    }, "packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/components/counter.marko_0/valueChange", _scope0_id)
+  });
+  return _return;
+});
+export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/components/counter.marko", _renderer);

packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/html.expected/template.js

@@ -0,0 +1,13 @@
+import _counter from "./components/counter.marko";
+import * as _$ from "@marko/runtime-tags/debug/html";
+const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
+  const _scope0_id = _$.nextScopeId();
+  const _childScope = _$.peekNextScope();
+  const count = _counter({}, _$.register(() => {}, "packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/template.marko_0_count", _scope0_id));
+  _$.write(`<button class=reset>reset</button>${_$.markResumeNode(_scope0_id, "#button/1")}`);
+  _$.writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/template.marko_0");
+  _$.writeScope(_scope0_id, {
+    "#childScope/0": _$.writeExistingScope(_childScope)
+  });
+});
+export default /* @__PURE__ */_$.createTemplate("packages/translator-tags/src/__tests__/fixtures/custom-tag-var-assignment/template.marko", _renderer);