fix: improve the broken things

packages/runtime-tags/src/__tests__/fixtures/basic-merge-member-expression/__snapshots__/dom.expected/template.hydrate.js

@@ -1,7 +1,6 @@
-// size: 163 (min) 122 (brotli)
+// size: 157 (min) 117 (brotli)
 const $foo = _._let(3, ($scope, foo) => {
-  (_._attr_class($scope[0], foo.class),
+  (_._attr_class($scope[0], foo.class), _._attr_class($scope[1], foo.class));
-    _._attr_class($scope[1], foo.class.class));
 });
 (_._script("a0", ($scope) =>
   _._on($scope[2], "click", function () {

packages/runtime-tags/src/__tests__/fixtures/basic-merge-member-expression/__snapshots__/dom.expected/template.js

@@ -3,7 +3,7 @@ export const $walks = /* get, over(1), get, over(1), get, over(1) */" b b b";
 import * as _ from "@marko/runtime-tags/debug/dom";
 const $foo = /* @__PURE__ */_._let("foo/3", ($scope, foo) => {
   _._attr_class($scope["#div/0"], (foo, foo.class));
-  _._attr_class($scope["#div/1"], (foo, foo.class.class));
+  _._attr_class($scope["#div/1"], (foo, foo.class));
 });
 const $setup__script = _._script("__tests__/template.marko_0", $scope => _._on($scope["#button/2"], "click", function () {
   $foo($scope, {

packages/runtime-tags/src/__tests__/fixtures/basic-merge-member-expression/__snapshots__/html.expected/template.js

@@ -5,7 +5,7 @@ export default _._template("__tests__/template.marko", input => {
   const {
     class: fooClass
   } = foo;
-  _._html(`<div${_._attr_class((foo, foo.class))}></div>${_._el_resume($scope0_id, "#div/0")}<div${_._attr_class((foo, foo.class.class))}></div>${_._el_resume($scope0_id, "#div/1")}<button>Click</button>${_._el_resume($scope0_id, "#button/2")}`);
+  _._html(`<div${_._attr_class((foo, foo.class))}></div>${_._el_resume($scope0_id, "#div/0")}<div${_._attr_class((foo, foo.class))}></div>${_._el_resume($scope0_id, "#div/1")}<button>Click</button>${_._el_resume($scope0_id, "#button/2")}`);
   _._script($scope0_id, "__tests__/template.marko_0");
   _._scope($scope0_id, {}, "__tests__/template.marko", 0);
   _._resume_branch($scope0_id);

packages/runtime-tags/src/__tests__/fixtures/basic-nested-for/__snapshots__/dom.expected/template.hydrate.js

@@ -1,4 +1,4 @@
-// size: 531 (min) 298 (brotli)
+// size: 530 (min) 290 (brotli)
 const $name = _._const(3, ($scope, name) => _._text($scope[0], name)),
   $for_content2__setup = ($scope) => {
     ($scope[0], $for_content2__outer._($scope));
@@ -39,7 +39,7 @@ const $name = _._const(3, ($scope, name) => _._text($scope[0], name)),
   $for = _._for_of(1, $for_content),
   $items__script = _._script("b0", ($scope, { 2: items }) =>
     _._on($scope[0], "click", function () {
-      $items($scope, (items = [...items, items?.length]));
+      $items($scope, (items = [...items, items.length]));
     }),
   ),
   $items = _._let(2, ($scope, items) => {

packages/runtime-tags/src/__tests__/fixtures/basic-nested-for/__snapshots__/dom.expected/template.js

@@ -29,7 +29,7 @@ const $for = /* @__PURE__ */_._for_of("#text/1", $for_content);
 const $items__script = _._script("__tests__/template.marko_0_items", ($scope, {
   items
 }) => _._on($scope["#button/0"], "click", function () {
-  $items($scope, items = [...items, items?.length]);
+  $items($scope, items = [...items, items.length]);
 }));
 const $items = /* @__PURE__ */_._let("items/2", ($scope, items) => {
   $for($scope, [items]);

packages/runtime-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/__snapshots__/dom.expected/template.hydrate.js

@@ -1,4 +1,4 @@
-// size: 665 (min) 359 (brotli)
+// size: 664 (min) 356 (brotli)
 const $name__OR__write__script = _._script(
     "a0",
     ($scope, { 5: name, 6: write }) => {
@@ -37,7 +37,7 @@ const $name__OR__write__script = _._script(
   $for = _._for_of(2, $for_content),
   $items__script = _._script("b1", ($scope, { 3: items }) =>
     _._on($scope[0], "click", function () {
-      $items($scope, (items = items?.length ? items.slice(0, -1) : [1, 2, 3]));
+      $items($scope, (items = items.length ? items.slice(0, -1) : [1, 2, 3]));
     }),
   ),
   $items = _._let(3, ($scope, items) => {

packages/runtime-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/__snapshots__/dom.expected/template.js

@@ -14,7 +14,7 @@ const $for = /* @__PURE__ */_._for_of("#text/2", $for_content);
 const $items__script = _._script("__tests__/template.marko_0_items", ($scope, {
   items
 }) => _._on($scope["#button/0"], "click", function () {
-  $items($scope, items = items?.length ? items.slice(0, -1) : [1, 2, 3]);
+  $items($scope, items = items.length ? items.slice(0, -1) : [1, 2, 3]);
 }));
 const $items = /* @__PURE__ */_._let("items/3", ($scope, items) => {
   $for($scope, [items]);

packages/runtime-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/__snapshots__/dom.expected/template.hydrate.js

@@ -1,4 +1,4 @@
-// size: 938 (min) 447 (brotli)
+// size: 937 (min) 445 (brotli)
 const $name__OR__write__script = _._script(
     "a0",
     ($scope, { 3: name, 4: write }) =>
@@ -73,7 +73,7 @@ const $name__OR__write__script = _._script(
   $for = _._for_of(2, $for_content),
   $items__script = _._script("b1", ($scope, { 3: items }) =>
     _._on($scope[0], "click", function () {
-      $items($scope, (items = items?.length ? items.slice(0, -1) : [1, 2, 3]));
+      $items($scope, (items = items.length ? items.slice(0, -1) : [1, 2, 3]));
     }),
   ),
   $items = _._let(3, ($scope, items) => {

packages/runtime-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/__snapshots__/dom.expected/template.js

@@ -39,7 +39,7 @@ const $for = /* @__PURE__ */_._for_of("#text/2", $for_content);
 const $items__script = _._script("__tests__/template.marko_0_items", ($scope, {
   items
 }) => _._on($scope["#button/0"], "click", function () {
-  $items($scope, items = items?.length ? items.slice(0, -1) : [1, 2, 3]);
+  $items($scope, items = items.length ? items.slice(0, -1) : [1, 2, 3]);
 }));
 const $items = /* @__PURE__ */_._let("items/3", ($scope, items) => {
   $for($scope, [items]);

packages/runtime-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/__snapshots__/dom.expected/template.hydrate.js

@@ -1,4 +1,4 @@
-// size: 605 (min) 336 (brotli)
+// size: 604 (min) 336 (brotli)
 const $name__OR__write__script = _._script(
     "a0",
     ($scope, { 3: name, 4: write }) => {
@@ -34,7 +34,7 @@ const $name__OR__write__script = _._script(
   $for = _._for_of(2, $for_content),
   $items__script = _._script("b1", ($scope, { 3: items }) =>
     _._on($scope[0], "click", function () {
-      $items($scope, (items = items?.length ? items.slice(0, -1) : [1, 2, 3]));
+      $items($scope, (items = items.length ? items.slice(0, -1) : [1, 2, 3]));
     }),
   ),
   $items = _._let(3, ($scope, items) => {

packages/runtime-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/__snapshots__/dom.expected/template.js

@@ -14,7 +14,7 @@ const $for = /* @__PURE__ */_._for_of("#text/2", $for_content);
 const $items__script = _._script("__tests__/template.marko_0_items", ($scope, {
   items
 }) => _._on($scope["#button/0"], "click", function () {
-  $items($scope, items = items?.length ? items.slice(0, -1) : [1, 2, 3]);
+  $items($scope, items = items.length ? items.slice(0, -1) : [1, 2, 3]);
 }));
 const $items = /* @__PURE__ */_._let("items/3", ($scope, items) => {
   $for($scope, [items]);

packages/runtime-tags/src/__tests__/fixtures/controllable-select-mutated-option/__snapshots__/dom.expected/template.hydrate.js

@@ -1,4 +1,4 @@
-// size: 630 (min) 326 (brotli)
+// size: 627 (min) 306 (brotli)
 const $for_content__opt = _._const(3, ($scope, opt) => {
     (_._attr($scope[0], "value", opt), _._text($scope[1], opt));
   }),
@@ -19,7 +19,7 @@ const $for_content__opt = _._const(3, ($scope, opt) => {
       _._on($scope[3], "click", function () {
         $options(
           $scope,
-          (options = [options?.length ? options?.[0] - 1 : 3, ...options]),
+          (options = [options.length ? options[0] - 1 : 3, ...options]),
         );
       }));
   }),

packages/runtime-tags/src/__tests__/fixtures/controllable-select-mutated-option/__snapshots__/dom.expected/template.js

@@ -15,7 +15,7 @@ const $options__script = _._script("__tests__/template.marko_0_options", ($scope
     $options($scope, options = options.slice(1));
   });
   _._on($scope["#button/3"], "click", function () {
-    $options($scope, options = [options?.length ? options?.[0] - 1 : 3, ...options]);
+    $options($scope, options = [options.length ? options[0] - 1 : 3, ...options]);
   });
 });
 const $options = /* @__PURE__ */_._let("options/4", ($scope, options) => {

packages/runtime-tags/src/__tests__/fixtures/for-by/__snapshots__/dom.expected/template.hydrate.js

@@ -1,4 +1,4 @@
-// size: 975 (min) 282 (brotli)
+// size: 973 (min) 295 (brotli)
 const $for_content5__text = _._const(3, ($scope, text) =>
     _._text($scope[0], text),
   ),
@@ -48,7 +48,7 @@ const $for_content5__text = _._const(3, ($scope, text) =>
   $for5 = _._for_of(4, $for_content5),
   $items__script = _._script("a0", ($scope, { 6: items }) =>
     _._on($scope[5], "click", function () {
-      $items($scope, (items = [...items.slice(1), items?.[0]]));
+      $items($scope, (items = [...items.slice(1), items[0]]));
     }),
   ),
   $items = _._let(6, ($scope, items) => {

packages/runtime-tags/src/__tests__/fixtures/for-by/__snapshots__/dom.expected/template.js

@@ -38,7 +38,7 @@ const $for5 = /* @__PURE__ */_._for_of("#div/4", $for_content5);
 const $items__script = _._script("__tests__/template.marko_0_items", ($scope, {
   items
 }) => _._on($scope["#button/5"], "click", function () {
-  $items($scope, items = [...items.slice(1), items?.[0]]);
+  $items($scope, items = [...items.slice(1), items[0]]);
 }));
 const $items = /* @__PURE__ */_._let("items/6", ($scope, items) => {
   $for($scope, [items, "id"]);

packages/runtime-tags/src/__tests__/fixtures/for-tag-single-node-only-child-in-parent/__snapshots__/dom.expected/template.hydrate.js

@@ -1,8 +1,8 @@
-// size: 231 (min) 165 (brotli)
+// size: 230 (min) 167 (brotli)
 const $for_content = _._content_branch("<div></div>", "b"),
   $for = _._for_of(0, $for_content),
   $children__script = _._script("a0", ($scope, { 1: children }) => {
-    1 === children?.length && $children($scope, (children = [...children, 2]));
+    1 === children.length && $children($scope, (children = [...children, 2]));
   }),
   $children = _._let(1, ($scope, children) => {
     ($children_length($scope, children?.length),

packages/runtime-tags/src/__tests__/fixtures/for-tag-single-node-only-child-in-parent/__snapshots__/dom.expected/template.js

@@ -6,7 +6,7 @@ const $for = /* @__PURE__ */_._for_of("#div/0", $for_content);
 const $children__script = _._script("__tests__/template.marko_0_children", ($scope, {
   children
 }) => {
-  if (children?.length === 1) {
+  if (children.length === 1) {
     $children($scope, children = [...children, 2]);
   }
 });

packages/runtime-tags/src/__tests__/fixtures/for-tag-single-text-node-with-text-before/__snapshots__/dom.expected/template.hydrate.js

@@ -1,8 +1,8 @@
-// size: 225 (min) 170 (brotli)
+// size: 224 (min) 170 (brotli)
 const $for_content = _._content_branch("Child", "b"),
   $for = _._for_of(1, $for_content),
   $children__script = _._script("a0", ($scope, { 2: children }) => {
-    1 === children?.length && $children($scope, (children = [...children, 2]));
+    1 === children.length && $children($scope, (children = [...children, 2]));
   }),
   $children = _._let(2, ($scope, children) => {
     ($children_length($scope, children?.length),

packages/runtime-tags/src/__tests__/fixtures/for-tag-single-text-node-with-text-before/__snapshots__/dom.expected/template.js

@@ -6,7 +6,7 @@ const $for = /* @__PURE__ */_._for_of("#text/1", $for_content);
 const $children__script = _._script("__tests__/template.marko_0_children", ($scope, {
   children
 }) => {
-  if (children?.length === 1) {
+  if (children.length === 1) {
     $children($scope, children = [...children, 2]);
   }
 });

packages/runtime-tags/src/__tests__/fixtures/function-references-normalize/__snapshots__/dom.expected/template.hydrate.js

@@ -1,6 +1,6 @@
-// size: 106 (min) 99 (brotli)
+// size: 105 (min) 95 (brotli)
 (_._script("a1", ($scope, { 2: baz }) => ($scope[0].textContent = baz.bar())),
   _._resume("a0", function ({ 1: foo }) {
-    return () => foo?.bar;
+    return () => foo.bar;
   }),
   init());

packages/runtime-tags/src/__tests__/fixtures/function-references-normalize/__snapshots__/dom.expected/template.js

@@ -17,7 +17,7 @@ export function $setup($scope) {
 function $baz({
   foo
 }) {
-  return () => foo?.bar;
+  return () => foo.bar;
 }
 _._resume("__tests__/template.marko_0/baz", $baz);
 export default /* @__PURE__ */_._template("__tests__/template.marko", $template, $walks, $setup);

packages/runtime-tags/src/__tests__/fixtures/function-references-normalize/__snapshots__/html.expected/template.js

@@ -6,7 +6,7 @@ export default _._template("__tests__/template.marko", input => {
   };
   const baz = {
     foo,
-    bar: _._resume(() => foo?.bar, "__tests__/template.marko_0/baz", $scope0_id)
+    bar: _._resume(() => foo.bar, "__tests__/template.marko_0/baz", $scope0_id)
   };
   _._html(`<div></div>${_._el_resume($scope0_id, "#div/0")}`);
   _._script($scope0_id, "__tests__/template.marko_0_baz");

packages/runtime-tags/src/__tests__/fixtures/getter-on-single-node-only-child/__snapshots__/dom.expected/template.hydrate.js

@@ -1,4 +1,4 @@
-// size: 332 (min) 217 (brotli)
+// size: 331 (min) 214 (brotli)
 const $for_content__item = _._const(2, ($scope, item) =>
     _._text($scope[0], item),
   ),
@@ -15,7 +15,7 @@ const $for_content__item = _._const(2, ($scope, item) =>
   $for = _._for_of(1, $for_content),
   $items__script = _._script("a1", ($scope, { 2: items }) =>
     _._on($scope[0], "click", function () {
-      $items($scope, (items = [...items, items?.length]));
+      $items($scope, (items = [...items, items.length]));
     }),
   ),
   $items = _._let(2, ($scope, items) => {

packages/runtime-tags/src/__tests__/fixtures/getter-on-single-node-only-child/__snapshots__/dom.expected/template.js

@@ -9,7 +9,7 @@ const $for = /* @__PURE__ */_._for_of("#ul/1", $for_content);
 const $items__script = _._script("__tests__/template.marko_0_items", ($scope, {
   items
 }) => _._on($scope["#button/0"], "click", function () {
-  $items($scope, items = [...items, items?.length]);
+  $items($scope, items = [...items, items.length]);
 }));
 const $items = /* @__PURE__ */_._let("items/2", ($scope, items) => {
   $for($scope, [items]);

packages/runtime-tags/src/translator/util/references.ts

@@ -1584,14 +1584,16 @@ export function getReadReplacement(
     }
 
     if (replaceMember) {
-      if (read.binding.nullable) {
+      if (replaceMember.object.type !== replacement.type) {
-        replaceMember.type = "OptionalMemberExpression";
+        if (read.binding.nullable) {
-        replaceMember.optional = true;
+          replaceMember.type = "OptionalMemberExpression";
+          replaceMember.optional = true;
+        }
+        replaceMember.object = withPreviousLocation(
+          replacement,
+          replaceMember.object,
+        );
       }
-      replaceMember.object = withPreviousLocation(
-        replacement,
-        replaceMember.object,
-      );
       replacement = undefined;
     }
   }
@@ -1768,9 +1770,8 @@ function resolveExpressionReference(
   let curBinding = readBinding;
   let props: Opt<string>;
   while (curBinding !== upstreamRoot) {
-    const prop = getCanonicalProperty(curBinding);
+    if (curBinding.property !== undefined) {
-    if (prop !== undefined) {
+      props = push(props, curBinding.property);
-      props = push(props, prop);
     }
 
     curBinding = curBinding.upstreamAlias!;
@@ -1792,16 +1793,6 @@ function isSupersetSources(a: Binding, b: Binding) {
   );
 }
 
-function getCanonicalProperty(binding: Binding) {
-  if (binding.property !== undefined) {
-    return binding.property;
-  }
-
-  if (binding.upstreamAlias && binding.excludeProperties === undefined) {
-    return binding.upstreamAlias.property;
-  }
-}
-
 function createRead(binding: Binding, props: Opt<string>) {
   return { binding, props };
 }