fix: make binding default values first class

Default values in tag params and destructured tag variables are modeled
directly in the binding graph: a source binding holds the value applied at
the pattern's position, and the declared binding is derived from it. The
DOM output registers the derivation as a signal value, collapsing it to a
native parameter default when the fallback needs no state; the HTML output
materializes the source variable so it stays serializable for resume. The
alias root of a shared property always holds the raw value, so aliased
destructures agree regardless of which side has a default.

Author: DylanPiercey

.changeset/param-top-level-default.md

@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Fix default values on top level tag parameters (eg `<my-tag|a, b = a|>`) being dropped in the DOM output, which caused a crash or stale content client side. Default values in tag parameters and destructured tag variables are now represented uniformly in the compiler and defaulted values are consistently resumable. Defaults whose fallback needs no state compile to native parameter defaults in the DOM output, and defaults on unused bindings are pruned from it entirely.

packages/runtime-tags/src/__tests__/fixtures/const-array-pattern/__snapshots__/dom.bundle.debug.js

@@ -1,15 +1,15 @@
 // template.marko
 const $template = "<button>inc <!></button><div><!>|<!>|<!></div>";
 const $walks = " Db%lD%c%c%l";
+const $second2 = ($scope, second = "dflt") => _text($scope["#text/3"], second);
+const $second3 = $second2;
 const $pattern2 = ($scope, $pattern) => {
 	(([, , ...others]) => $others($scope, others))($pattern);
 	$first($scope, $pattern[0]);
-	$second2($scope, $pattern[1]);
+	$second3($scope, $pattern[1]);
 };
 const $others = ($scope, others) => _text($scope["#text/4"], others.join(","));
 const $first = ($scope, first) => _text($scope["#text/2"], first);
-const $second3 = ($scope, second) => _text($scope["#text/3"], second);
-const $second2 = ($scope, $second) => $second3($scope, void 0 !== $second ? $second : "dflt");
 const $input_list = $pattern2;
 const $n = /*@__PURE__*/ _let("n/13", ($scope) => _text($scope["#text/1"], $scope.n));
 const $setup__script = _script("__tests__/template.marko_0", ($scope) => _on($scope["#button/0"], "click", function() {

packages/runtime-tags/src/__tests__/fixtures/content-params-array-defaults/__snapshots__/dom.bundle.debug.js

@@ -2,8 +2,8 @@
 const $Wrap_content__walks = "D%c%l", $Wrap_content__template = "<div><!>|<!></div>";
 const $template = /*@__PURE__*/ ((_w0, _w1) => `<button>inc</button>${_w0}${_w1}<!>`)($Wrap_content__template, $Wrap_content__template);
 const $walks = /*@__PURE__*/ ((_w0, _w1) => ` b/${_w0}&/${_w1}&b`)($Wrap_content__walks, $Wrap_content__walks);
-const $Wrap_content__a = ($scope, a) => _text($scope["#text/0"], a);
-const $Wrap_content__$a = ($scope, $a) => $Wrap_content__a($scope, void 0 !== $a ? $a : 1);
+const $Wrap_content__a = ($scope, a = 1) => _text($scope["#text/0"], a);
+const $Wrap_content__$a = $Wrap_content__a;
 const $Wrap_content__b = ($scope, b) => _text($scope["#text/1"], b);
 const $Wrap_content__tag_param_ = ($scope, $temp) => {
 	$Wrap_content__$a($scope, $temp[0]);

packages/runtime-tags/src/__tests__/fixtures/content-params-array-defaults/__snapshots__/dom.bundle.js

@@ -1,6 +1,6 @@
 // template.marko
-const $Wrap_content__a = ($scope, a) => _text($scope.a, a);
-const $Wrap_content__$a = ($scope, $a) => $Wrap_content__a($scope, void 0 !== $a ? $a : 1);
+const $Wrap_content__a = ($scope, a = 1) => _text($scope.a, a);
+const $Wrap_content__$a = $Wrap_content__a;
 const $Wrap_content__b = ($scope, b) => _text($scope.b, b);
 const $Wrap_content__tag_param_ = ($scope, $temp) => {
 	$Wrap_content__$a($scope, $temp[0]);

packages/runtime-tags/src/__tests__/fixtures/content-params-array-defaults/sizes.json

@@ -1,8 +1,8 @@
 {
   "dom": {
     "template.marko.page.mjs": {
-      "min": 2727,
-      "brotli": 1367
+      "min": 2700,
+      "brotli": 1362
     }
   },
   "html": {

packages/runtime-tags/src/__tests__/fixtures/custom-tag-var-destructured/__snapshots__/dom.bundle.debug.js

@@ -29,11 +29,13 @@ var child_default = /*@__PURE__*/ _template("__tests__/tags/child.marko", $templ
 // template.marko
 const $template = /*@__PURE__*/ ((_w0) => `${_w0}<button class=inc>inc</button><button class=assign>assign</button><div><!>:<!></div>`)($template$1);
 const $walks = /*@__PURE__*/ ((_w0) => `0${_w0}& b bD%c%l`)($walks$1);
+const $missing2 = ($scope, missing = "fallback") => _text($scope["#text/5"], missing);
+const $missing3 = $missing2;
 const $pattern2 = _var_resume("__tests__/template.marko_0_$pattern/var", ($scope, $pattern) => {
 	$count($scope, $pattern.count);
 	$countChange2($scope, $pattern.countChange);
 	$inc($scope, $pattern.inc);
-	$missing2($scope, $pattern.missing);
+	$missing3($scope, $pattern.missing);
 });
 const $count__OR__$countChange__script = _script("__tests__/template.marko_0_count_$countChange", ($scope) => _on($scope["#button/3"], "click", function() {
 	$scope.$countChange($scope.count + 10);
@@ -48,8 +50,6 @@ const $inc__script = _script("__tests__/template.marko_0_inc", ($scope) => _on($
 	$scope.inc();
 }));
 const $inc = /*@__PURE__*/ _const("inc", $inc__script);
-const $missing3 = ($scope, missing) => _text($scope["#text/5"], missing);
-const $missing2 = ($scope, $missing) => $missing3($scope, void 0 !== $missing ? $missing : "fallback");
 function $setup($scope) {
 	_var($scope, "#childScope/0", $pattern2);
 	$setup$1($scope["#childScope/0"]);

packages/runtime-tags/src/__tests__/fixtures/custom-tag-var-destructured/__snapshots__/dom.bundle.js

@@ -21,11 +21,13 @@ _resume("b1", $_return2);
 _resume("b0", $_return);
 
 // template.marko
+const $missing2 = ($scope, missing = "fallback") => _text($scope.f, missing);
+const $missing3 = $missing2;
 const $pattern2 = _var_resume("a0", ($scope, $pattern) => {
 	$count($scope, $pattern.count);
 	$countChange2($scope, $pattern.countChange);
 	$inc($scope, $pattern.inc);
-	$missing2($scope, $pattern.missing);
+	$missing3($scope, $pattern.missing);
 });
 const $count__OR__$countChange = /*@__PURE__*/ _or(9, _script("a1", ($scope) => _on($scope.d, "click", function() {
 	$scope.i($scope.h + 10);
@@ -38,5 +40,3 @@ const $countChange2 = /*@__PURE__*/ _const(8, $count__OR__$countChange);
 const $inc = /*@__PURE__*/ _const(10, _script("a2", ($scope) => _on($scope.c, "click", function() {
 	$scope.k();
 })));
-const $missing3 = ($scope, missing) => _text($scope.f, missing);
-const $missing2 = ($scope, $missing) => $missing3($scope, void 0 !== $missing ? $missing : "fallback");

packages/runtime-tags/src/__tests__/fixtures/custom-tag-var-destructured/__snapshots__/html.bundle.debug.js

@@ -24,8 +24,8 @@ var template_default = _template("__tests__/template.marko", (input) => {
 	const $scope0_id = _scope_id();
 	const $childScope = _peek_scope_id();
 	let { countChange: $countChange, count, inc, missing: $missing } = child_default({});
-	_var($scope0_id, "#scopeOffset/1", $childScope, "__tests__/template.marko_0_$pattern/var");
 	const missing = void 0 !== $missing ? $missing : "fallback";
+	_var($scope0_id, "#scopeOffset/1", $childScope, "__tests__/template.marko_0_$pattern/var");
 	_html(`<button class=inc>inc</button>${_el_resume($scope0_id, "#button/2")}<button class=assign>assign</button>${_el_resume($scope0_id, "#button/3")}<div>${_escape(count)}${_el_resume($scope0_id, "#text/4")}:<!>${_escape(missing)}${_el_resume($scope0_id, "#text/5")}</div>`);
 	_script($scope0_id, "__tests__/template.marko_0_count_$countChange");
 	_script($scope0_id, "__tests__/template.marko_0_inc");

packages/runtime-tags/src/__tests__/fixtures/custom-tag-var-destructured/__snapshots__/html.bundle.js

@@ -24,8 +24,8 @@ var template_default = _template("a", (input) => {
 	const $scope0_id = _scope_id();
 	const $childScope = _peek_scope_id();
 	let { countChange: $countChange, count, inc, missing: $missing } = child_default({});
-	_var($scope0_id, "b", $childScope, "a0");
 	const missing = void 0 !== $missing ? $missing : "fallback";
+	_var($scope0_id, "b", $childScope, "a0");
 	_html(`<button class=inc>inc</button>${_el_resume($scope0_id, "c")}<button class=assign>assign</button>${_el_resume($scope0_id, "d")}<div>${_escape(count)}${_el_resume($scope0_id, "e")}:<!>${_escape(missing)}${_el_resume($scope0_id, "f")}</div>`);
 	_script($scope0_id, "a1");
 	_script($scope0_id, "a2");

packages/runtime-tags/src/__tests__/fixtures/custom-tag-var-destructured/sizes.json

@@ -2,12 +2,12 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 3249,
-        "brotli": 1580
+        "min": 3228,
+        "brotli": 1573
       },
       "files": {
         "tags/child.marko": 454,
-        "template.marko": 883
+        "template.marko": 821
       }
     }
   },