feat: implement return init from lifecycle onMount

.changeset/eager-pets-grin.md

@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Add ability for the lifecycle onMount hook to spread values into this object by returning.

.sizes.json

@@ -7,8 +7,8 @@
     {
       "name": "*",
       "total": {
-        "min": 19644,
-        "brotli": 7530
+        "min": 19674,
+        "brotli": 7562
       }
     },
     {

.sizes/dom.js

@@ -1,4 +1,4 @@
-// size: 19644 (min) 7530 (brotli)
+// size: 19674 (min) 7562 (brotli)
 var empty = [],
   rest = Symbol();
 function attrTag(attrs) {
@@ -1134,11 +1134,13 @@ function normalizeString(value) {
 }
 function _lifecycle(scope, index, thisObj) {
   let instance = scope[index];
-  instance
-    ? (Object.assign(instance, thisObj), instance.onUpdate?.())
-    : ((scope[index] = thisObj),
-      thisObj.onMount?.(),
+  if (instance) (Object.assign(instance, thisObj), instance.onUpdate?.());
+  else {
+    scope[index] = thisObj;
+    let newProps = thisObj.onMount?.();
+    (Object.assign(thisObj, newProps),
       ($signal(scope, "K" + index).onabort = () => thisObj.onDestroy?.()));
+  }
 }
 function removeChildNodes(startNode, endNode) {
   let stop = endNode.nextSibling,

packages/runtime-tags/src/__tests__/fixtures/lifecycle-tag-property-overwrite-error/__snapshots__/csr-sanitized.expected.md

@@ -0,0 +1 @@
+Tried to overwrite existing property "w" in $lifecycle onMount.

packages/runtime-tags/src/__tests__/fixtures/lifecycle-tag-property-overwrite-error/__snapshots__/csr.expected.md

@@ -0,0 +1 @@
+Tried to overwrite existing property "w" in $lifecycle onMount.

packages/runtime-tags/src/__tests__/fixtures/lifecycle-tag-property-overwrite-error/__snapshots__/dom.expected/template.js

@@ -0,0 +1,11 @@
+export const $template = "";
+export const $walks = "";
+import * as _ from "@marko/runtime-tags/debug/dom";
+const $setup__script = _._script("__tests__/template.marko_0", $scope => _._lifecycle($scope, "$lifecycle", {
+  w: 0,
+  onMount: function () {
+    this.w = 1;
+  }
+}));
+export const $setup = $setup__script;
+export default /* @__PURE__ */_._template("__tests__/template.marko", $template, $walks, $setup);

packages/runtime-tags/src/__tests__/fixtures/lifecycle-tag-property-overwrite-error/__snapshots__/html.expected/template.js

@@ -0,0 +1,5 @@
+import * as _ from "@marko/runtime-tags/debug/html";
+export default _._template("__tests__/template.marko", input => {
+  const $scope0_id = _._scope_id();
+  _._script($scope0_id, "__tests__/template.marko_0");
+});

packages/runtime-tags/src/__tests__/fixtures/lifecycle-tag-property-overwrite-error/template.marko

@@ -0,0 +1,6 @@
+<lifecycle
+  w=0
+  onMount() {
+    this.w = 1;
+  }
+/>

packages/runtime-tags/src/__tests__/fixtures/lifecycle-tag-property-overwrite-error/test.ts

@@ -0,0 +1,6 @@
+import { wait } from "../../utils/resolve";
+
+export const steps = [{}, wait(1)];
+
+export const error_runtime = true;
+export const skip_ssr = true;

packages/runtime-tags/src/__tests__/fixtures/lifecycle-tag-return-init/__snapshots__/.name-cache.json

@@ -0,0 +1,10 @@
+{
+  "vars": {
+    "props": {
+      "$_": "t",
+      "$init": "n",
+      "$$x__script": "o",
+      "$$x": "i"
+    }
+  }
+}

packages/runtime-tags/src/__tests__/fixtures/lifecycle-tag-return-init/__snapshots__/csr-sanitized.expected.md

@@ -0,0 +1,29 @@
+# Render
+```html
+<div
+  id="ref"
+/>
+<button
+  id="increment"
+>
+  Increment
+</button>
+```
+
+
+# Render
+```js
+container.querySelector("#increment")?.click();
+```
+```html
+<div
+  id="ref"
+>
+  {"x":1,"w":1,"y":0,"u":5}
+</div>
+<button
+  id="increment"
+>
+  Increment
+</button>
+```

packages/runtime-tags/src/__tests__/fixtures/lifecycle-tag-return-init/__snapshots__/csr.expected.md

@@ -0,0 +1,38 @@
+# Render
+```html
+<div
+  id="ref"
+/>
+<button
+  id="increment"
+>
+  Increment
+</button>
+```
+
+# Mutations
+```
+INSERT div, button
+```
+
+# Render
+```js
+container.querySelector("#increment")?.click();
+```
+```html
+<div
+  id="ref"
+>
+  {"x":1,"w":1,"y":0,"u":5}
+</div>
+<button
+  id="increment"
+>
+  Increment
+</button>
+```
+
+# Mutations
+```
+INSERT div/#text
+```

packages/runtime-tags/src/__tests__/fixtures/lifecycle-tag-return-init/__snapshots__/dom.expected/template.hydrate.js

@@ -0,0 +1,17 @@
+// size: 251 (min) 156 (brotli)
+const $x__script = _._script("a0", ($scope) => {
+    (_._lifecycle($scope, 2, {
+      x: $scope.b,
+      onMount: function () {
+        return ((this.w = 1), { y: this.x, u: 5 });
+      },
+      onUpdate: function () {
+        document.getElementById("ref").textContent = JSON.stringify(this);
+      },
+    }),
+      _._on($scope.a, "click", function () {
+        $x($scope, $scope.b + 1);
+      }));
+  }),
+  $x = _._let(1, $x__script);
+init();

packages/runtime-tags/src/__tests__/fixtures/lifecycle-tag-return-init/__snapshots__/dom.expected/template.js

@@ -0,0 +1,26 @@
+export const $template = "<div id=ref></div><button id=increment>Increment</button>";
+export const $walks = /* over(1), get, over(1) */"b b";
+import * as _ from "@marko/runtime-tags/debug/dom";
+const $x__script = _._script("__tests__/template.marko_0_x", $scope => {
+  _._lifecycle($scope, "$lifecycle", {
+    x: $scope.x,
+    onMount: function () {
+      this.w = 1;
+      return {
+        y: this.x,
+        u: 5
+      };
+    },
+    onUpdate: function () {
+      document.getElementById("ref").textContent = JSON.stringify(this);
+    }
+  });
+  _._on($scope["#button/0"], "click", function () {
+    $x($scope, $scope.x + 1);
+  });
+});
+const $x = /* @__PURE__ */_._let("x/1", $x__script);
+export function $setup($scope) {
+  $x($scope, 0);
+}
+export default /* @__PURE__ */_._template("__tests__/template.marko", $template, $walks, $setup);

packages/runtime-tags/src/__tests__/fixtures/lifecycle-tag-return-init/__snapshots__/html.expected/template.js

@@ -0,0 +1,13 @@
+import * as _ from "@marko/runtime-tags/debug/html";
+export default _._template("__tests__/template.marko", input => {
+  const $scope0_id = _._scope_id();
+  let x = 0;
+  _._html(`<div id=ref></div><button id=increment>Increment</button>${_._el_resume($scope0_id, "#button/0")}`);
+  _._script($scope0_id, "__tests__/template.marko_0_x");
+  _._scope($scope0_id, {
+    x
+  }, "__tests__/template.marko", 0, {
+    x: "1:6"
+  });
+  _._resume_branch($scope0_id);
+});

packages/runtime-tags/src/__tests__/fixtures/lifecycle-tag-return-init/__snapshots__/resume-sanitized.expected.md

@@ -0,0 +1,29 @@
+# Render
+```html
+<div
+  id="ref"
+/>
+<button
+  id="increment"
+>
+  Increment
+</button>
+```
+
+
+# Render
+```js
+container.querySelector("#increment")?.click();
+```
+```html
+<div
+  id="ref"
+>
+  {"x":1,"w":1,"y":0,"u":5}
+</div>
+<button
+  id="increment"
+>
+  Increment
+</button>
+```

packages/runtime-tags/src/__tests__/fixtures/lifecycle-tag-return-init/__snapshots__/resume.expected.md

@@ -0,0 +1,68 @@
+# Render
+```html
+<html>
+  <head />
+  <body>
+    <div
+      id="ref"
+    />
+    <button
+      id="increment"
+    >
+      Increment
+    </button>
+    <!--M_*1 #button/0-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.a = [0,
+        {
+          x: 0
+        }]),
+        "__tests__/template.marko_0_x",
+        1
+      ];
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+
+# Render
+```js
+container.querySelector("#increment")?.click();
+```
+```html
+<html>
+  <head />
+  <body>
+    <div
+      id="ref"
+    >
+      {"x":1,"w":1,"y":0,"u":5}
+    </div>
+    <button
+      id="increment"
+    >
+      Increment
+    </button>
+    <!--M_*1 #button/0-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.a = [0,
+        {
+          x: 0
+        }]),
+        "__tests__/template.marko_0_x",
+        1
+      ];
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT html/body/div/#text
+```

packages/runtime-tags/src/__tests__/fixtures/lifecycle-tag-return-init/__snapshots__/ssr-sanitized.expected.md

@@ -0,0 +1,11 @@
+# Render End
+```html
+<div
+  id="ref"
+/>
+<button
+  id="increment"
+>
+  Increment
+</button>
+```

packages/runtime-tags/src/__tests__/fixtures/lifecycle-tag-return-init/__snapshots__/ssr.expected.md

@@ -0,0 +1,46 @@
+# Write
+```html
+  <div id=ref></div><button id=increment>Increment</button><!--M_*1 #button/0--><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.a=[0,{x:0}]),"__tests__/template.marko_0_x",1];M._.w()</script>
+```
+
+# Render End
+```html
+<html>
+  <head />
+  <body>
+    <div
+      id="ref"
+    />
+    <button
+      id="increment"
+    >
+      Increment
+    </button>
+    <!--M_*1 #button/0-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.a = [0,
+        {
+          x: 0
+        }]),
+        "__tests__/template.marko_0_x",
+        1
+      ];
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT html
+INSERT html/head
+INSERT html/body
+INSERT html/body/div
+INSERT html/body/button
+INSERT html/body/button/#text
+INSERT html/body/#comment
+INSERT html/body/script
+INSERT html/body/script/#text
+```

packages/runtime-tags/src/__tests__/fixtures/lifecycle-tag-return-init/template.marko

@@ -0,0 +1,13 @@
+<let/x=0/>
+<lifecycle
+  x=x
+  onMount() {
+    this.w = 1;
+    return { y: this.x, u: 5 };
+  }
+  onUpdate() {
+    document.getElementById("ref").textContent = JSON.stringify(this);
+  }
+/>
+<div#ref/>
+<button#increment onClick() { x++; }>Increment</button>