fix: prevent increment decrement from pruning change handler binding

Author: rturnq

.changeset/lemon-plums-visit.md

@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Ensure increment and decrement assignements don't prune change handler bindings

packages/runtime-tags/src/__tests__/fixtures/assign-destructured-increment/__snapshots__/.name-cache.json

@@ -0,0 +1,16 @@
+{
+  "vars": {
+    "props": {
+      "$_": "o",
+      "$init": "t",
+      "$$pattern2": "n",
+      "$$bar": "r",
+      "$$foo2__script": "m",
+      "$$foo2": "e",
+      "$$foo": "a",
+      "$$foo__OR__fooChange__script": "c",
+      "$$foo__OR__fooChange": "_",
+      "$$fooChange2": "f"
+    }
+  }
+}

packages/runtime-tags/src/__tests__/fixtures/assign-destructured-increment/__snapshots__/csr-sanitized.expected.md

@@ -0,0 +1,39 @@
+# Render
+```html
+<button>
+  0:0
+</button>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  1:1
+</button>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  2:2
+</button>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  3:3
+</button>
+```

packages/runtime-tags/src/__tests__/fixtures/assign-destructured-increment/__snapshots__/csr.expected.md

@@ -0,0 +1,59 @@
+# Render
+```html
+<button>
+  0:0
+</button>
+```
+
+# Mutations
+```
+INSERT button
+```
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  1:1
+</button>
+```
+
+# Mutations
+```
+UPDATE button/#text2 "0" => "1"
+UPDATE button/#text0 "0" => "1"
+```
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  2:2
+</button>
+```
+
+# Mutations
+```
+UPDATE button/#text2 "1" => "2"
+UPDATE button/#text0 "1" => "2"
+```
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  3:3
+</button>
+```
+
+# Mutations
+```
+UPDATE button/#text2 "2" => "3"
+UPDATE button/#text0 "2" => "3"
+```

packages/runtime-tags/src/__tests__/fixtures/assign-destructured-increment/__snapshots__/dom.expected/template.hydrate.js

@@ -0,0 +1,26 @@
+// size: 330 (min) 206 (brotli)
+const $pattern2 = _._const(4, ($scope, $pattern) => {
+    ($foo2($scope, $pattern.foo), $fooChange2($scope, $pattern.fooChange));
+  }),
+  $bar = _._let(3, ($scope, bar) => {
+    (_._text($scope[2], bar),
+      $pattern2($scope, { foo: bar, fooChange: $foo($scope) }));
+  }),
+  $foo__OR__fooChange__script = _._script(
+    "a1",
+    ($scope, { 5: foo, 6: $fooChange }) =>
+      _._on($scope[0], "click", function () {
+        $fooChange(++foo);
+      }),
+  ),
+  $foo__OR__fooChange = _._or(7, $foo__OR__fooChange__script),
+  $foo2 = _._const(5, ($scope, foo) => {
+    (_._text($scope[1], foo), $foo__OR__fooChange($scope));
+  }),
+  $fooChange2 = _._const(6, $foo__OR__fooChange);
+function $foo($scope) {
+  return function (v) {
+    $bar($scope, v);
+  };
+}
+(_._resume("a0", $foo), init());

packages/runtime-tags/src/__tests__/fixtures/assign-destructured-increment/__snapshots__/dom.expected/template.js

@@ -0,0 +1,36 @@
+export const $template = "<button><!>:<!></button>";
+export const $walks = /* get, next(1), replace, over(2), replace, out(1) */" D%c%l";
+import * as _ from "@marko/runtime-tags/debug/dom";
+const $pattern2 = /* @__PURE__ */_._const("$pattern", ($scope, $pattern) => {
+  $foo2($scope, $pattern.foo);
+  $fooChange2($scope, $pattern.fooChange);
+});
+const $bar = /* @__PURE__ */_._let("bar/3", ($scope, bar) => {
+  _._text($scope["#text/2"], bar);
+  $pattern2($scope, {
+    foo: bar,
+    fooChange: $foo($scope)
+  });
+});
+export function $setup($scope) {
+  $bar($scope, 0);
+}
+const $foo__OR__fooChange__script = _._script("__tests__/template.marko_0_foo_$fooChange", ($scope, {
+  foo,
+  $fooChange
+}) => _._on($scope["#button/0"], "click", function () {
+  $fooChange(++foo);
+}));
+const $foo__OR__fooChange = /* @__PURE__ */_._or(7, $foo__OR__fooChange__script);
+const $foo2 = /* @__PURE__ */_._const("foo", ($scope, foo) => {
+  _._text($scope["#text/1"], foo);
+  $foo__OR__fooChange($scope);
+});
+const $fooChange2 = /* @__PURE__ */_._const("$fooChange", $foo__OR__fooChange);
+function $foo($scope) {
+  return function (v) {
+    $bar($scope, v);
+  };
+}
+_._resume("__tests__/template.marko_0/foo", $foo);
+export default /* @__PURE__ */_._template("__tests__/template.marko", $template, $walks, $setup);

packages/runtime-tags/src/__tests__/fixtures/assign-destructured-increment/__snapshots__/html.expected/template.js

@@ -0,0 +1,24 @@
+import * as _ from "@marko/runtime-tags/debug/html";
+export default _._template("__tests__/template.marko", input => {
+  const $scope0_id = _._scope_id();
+  let bar = 0;
+  const {
+    foo,
+    fooChange: $fooChange
+  } = {
+    foo: bar,
+    fooChange: _._resume(function (v) {
+      bar = v;
+    }, "__tests__/template.marko_0/foo", $scope0_id)
+  };
+  _._html(`<button>${_._escape(foo)}${_._el_resume($scope0_id, "#text/1")}:<!>${_._escape(bar)}${_._el_resume($scope0_id, "#text/2")}</button>${_._el_resume($scope0_id, "#button/0")}`);
+  _._script($scope0_id, "__tests__/template.marko_0_foo_$fooChange");
+  _._scope($scope0_id, {
+    foo,
+    $fooChange
+  }, "__tests__/template.marko", 0, {
+    foo: "2:9",
+    $fooChange: "9:20"
+  });
+  _._resume_branch($scope0_id);
+});

packages/runtime-tags/src/__tests__/fixtures/assign-destructured-increment/__snapshots__/resume-sanitized.expected.md

@@ -0,0 +1,39 @@
+# Render
+```html
+<button>
+  0:0
+</button>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  1:1
+</button>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  2:2
+</button>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  3:3
+</button>
+```