feat(custom-tag): added return and tag variables (#116)

* feat(custom-tag): added return and tag variables
* fix: duplicate WalkCodes

.sizes.json

@@ -7,81 +7,81 @@
     {
       "name": "*",
       "total": {
-        "min": 12006,
-        "gzip": 5073,
-        "brotli": 4630
+        "min": 12121,
+        "gzip": 5122,
+        "brotli": 4681
       }
     },
     {
       "name": "counter",
       "user": {
-        "min": 370,
-        "gzip": 277,
-        "brotli": 245
+        "min": 365,
+        "gzip": 273,
+        "brotli": 243
       },
       "runtime": {
-        "min": 3141,
-        "gzip": 1458,
-        "brotli": 1308
+        "min": 3222,
+        "gzip": 1509,
+        "brotli": 1362
       },
       "total": {
-        "min": 3511,
-        "gzip": 1735,
-        "brotli": 1553
+        "min": 3587,
+        "gzip": 1782,
+        "brotli": 1605
       }
     },
     {
       "name": "counter 💧",
       "user": {
         "min": 229,
-        "gzip": 193,
-        "brotli": 178
+        "gzip": 194,
+        "brotli": 170
       },
       "runtime": {
-        "min": 2502,
-        "gzip": 1282,
-        "brotli": 1150
+        "min": 2554,
+        "gzip": 1308,
+        "brotli": 1167
       },
       "total": {
-        "min": 2731,
-        "gzip": 1475,
-        "brotli": 1328
+        "min": 2783,
+        "gzip": 1502,
+        "brotli": 1337
       }
     },
     {
       "name": "comments",
       "user": {
-        "min": 1142,
-        "gzip": 702,
-        "brotli": 636
+        "min": 1132,
+        "gzip": 696,
+        "brotli": 632
       },
       "runtime": {
-        "min": 6931,
-        "gzip": 3151,
-        "brotli": 2874
+        "min": 6966,
+        "gzip": 3172,
+        "brotli": 2892
       },
       "total": {
-        "min": 8073,
-        "gzip": 3853,
-        "brotli": 3510
+        "min": 8098,
+        "gzip": 3868,
+        "brotli": 3524
       }
     },
     {
       "name": "comments 💧",
       "user": {
-        "min": 310,
-        "gzip": 241,
-        "brotli": 225
+        "min": 315,
+        "gzip": 242,
+        "brotli": 224
       },
       "runtime": {
-        "min": 7776,
-        "gzip": 3539,
-        "brotli": 3222
+        "min": 7811,
+        "gzip": 3559,
+        "brotli": 3242
       },
       "total": {
-        "min": 8086,
-        "gzip": 3780,
-        "brotli": 3447
+        "min": 8126,
+        "gzip": 3801,
+        "brotli": 3466
       }
     }
   ]

packages/runtime/src/common/types.ts

@@ -50,4 +50,5 @@ export const enum AccessorChars {
   STALE = "&",
   SUBSCRIBERS = "*",
   CLEANUP = "-",
+  TAG_VARIABLE = "/",
 }

packages/runtime/src/dom/index.ts

@@ -52,6 +52,8 @@ export {
   closure,
   dynamicClosure,
   dynamicSubscribers,
+  setTagVar,
+  tagVarSignal,
   contextClosure,
   inChildMany,
 } from "./signals";

packages/runtime/src/dom/signals.ts

@@ -311,6 +311,22 @@ export function wrapSignal(
   };
 }
 
+export function setTagVar(
+  scope: Scope,
+  childIndex: string | number,
+  tagVarSignal: Signal
+) {
+  scope[childIndex][AccessorChars.TAG_VARIABLE] = bindSignal(
+    scope,
+    tagVarSignal
+  );
+}
+
+export const tagVarSignal = wrapSignal(
+  (methodName) => (scope, extraArg) =>
+    scope[AccessorChars.TAG_VARIABLE]?.[methodName](null, extraArg)
+);
+
 export function wrapSignalWithSubscription(
   wrapper: (
     methodName:

packages/translator/src/__tests__/fixtures/at-tag-inside-if-tag/__snapshots__/html.expected/components/custom-tag/index.js

@@ -1,5 +1,5 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   _write("<div></div>");
 };

packages/translator/src/__tests__/fixtures/at-tag-inside-if-tag/__snapshots__/html.expected/template.js

@@ -2,7 +2,7 @@ import { markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _n
 import _customTag from "./components/custom-tag/index.marko";
 const _renderer = ({
   x
-}) => {
+}, _tagVar) => {
   const _scope = _nextScopeId();
   let _thing;
   const _scope = _nextScopeId();

packages/translator/src/__tests__/fixtures/at-tags-dynamic-and-static/__snapshots__/html.expected/components/hello/index.js

@@ -1,5 +1,5 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   _write("<div></div>");
 };

packages/translator/src/__tests__/fixtures/at-tags-dynamic-and-static/__snapshots__/html.expected/template.js

@@ -1,6 +1,6 @@
 import { markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, maybeFlush as _maybeFlush, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _hello from "./components/hello/index.marko";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   const _item = [];
   const _scope = _nextScopeId();

packages/translator/src/__tests__/fixtures/at-tags-dynamic-tag-parent/__snapshots__/html.expected/template.js

@@ -1,7 +1,7 @@
 import { markHydrateNode as _markHydrateNode, write as _write, dynamicTag as _dynamicTag, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = ({
   x
-}) => {
+}, _tagVar) => {
   const _scope = _nextScopeId();
   _write(`${_markHydrateNode(_scope, 0)}`);
   _dynamicTag(x, {

packages/translator/src/__tests__/fixtures/at-tags-dynamic-with-params/__snapshots__/html.expected/components/hello/index.js

@@ -1,5 +1,5 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   _write("<div></div>");
 };

packages/translator/src/__tests__/fixtures/at-tags-dynamic-with-params/__snapshots__/html.expected/template.js

@@ -2,7 +2,7 @@ import { markHydrateNode as _markHydrateNode, write as _write, escapeXML as _esc
 import _hello from "./components/hello/index.marko";
 const _renderer = ({
   x
-}) => {
+}, _tagVar) => {
   const _scope = _nextScopeId();
   let _item;
   const _scope = _nextScopeId();

packages/translator/src/__tests__/fixtures/at-tags-dynamic/__snapshots__/html.expected/components/hello/index.js

@@ -1,5 +1,5 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   _write("<div></div>");
 };

packages/translator/src/__tests__/fixtures/at-tags-dynamic/__snapshots__/html.expected/template.js

@@ -1,6 +1,6 @@
 import { markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, maybeFlush as _maybeFlush, escapeXML as _escapeXML, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _hello from "./components/hello/index.marko";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   const _col = [];
   const _scope = _nextScopeId();

packages/translator/src/__tests__/fixtures/at-tags/__snapshots__/html.expected/components/hello/index.js

@@ -1,5 +1,5 @@
 import { nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
 };
 export default _renderer;

packages/translator/src/__tests__/fixtures/at-tags/__snapshots__/html.expected/template.js

@@ -1,6 +1,6 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _hello from "./components/hello/index.marko";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   _hello({
     foo: {

packages/translator/src/__tests__/fixtures/attr-boolean/__snapshots__/html.expected/template.js

@@ -1,5 +1,5 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   _write("<input checked>");
 };

packages/translator/src/__tests__/fixtures/attr-class/__snapshots__/html.expected/components/custom-tag.js

@@ -1,5 +1,5 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   _write("<div></div>");
 };

packages/translator/src/__tests__/fixtures/attr-class/__snapshots__/html.expected/template.js

@@ -1,6 +1,6 @@
 import { markHydrateNode as _markHydrateNode, classAttr as _classAttr, write as _write, nextScopeId as _nextScopeId, dynamicTag as _dynamicTag, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _customTag from "./components/custom-tag.marko";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   const {
     c,

packages/translator/src/__tests__/fixtures/attr-escape/__snapshots__/html.expected/template.js

@@ -1,5 +1,5 @@
 import { markHydrateNode as _markHydrateNode, classAttr as _classAttr, attr as _attr, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   _write(`${_markHydrateNode(_scope, 0)}<div${_classAttr(input.className)}${_attr("foo", 'a' + input.foo + 'b')}${_attr("bar", `a ${input.foo} b`)}></div>`);
 };

packages/translator/src/__tests__/fixtures/attr-falsey/__snapshots__/html.expected/template.js

@@ -1,5 +1,5 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   _write("<div d=0 y=1></div>");
 };

packages/translator/src/__tests__/fixtures/attr-scoped/__snapshots__/html.expected/template.js

@@ -1,5 +1,5 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   _write("<div id:scoped=1 aria-described-by:scoped=b></div>");
 };

packages/translator/src/__tests__/fixtures/attr-style/__snapshots__/html.expected/components/custom-tag.js

@@ -1,5 +1,5 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   _write("<div></div>");
 };

packages/translator/src/__tests__/fixtures/attr-style/__snapshots__/html.expected/template.js

@@ -3,7 +3,7 @@ import _customTag from "./components/custom-tag.marko";
 const _renderer = ({
   color,
   test
-}) => {
+}, _tagVar) => {
   const _scope = _nextScopeId();
   _write(`${_markHydrateNode(_scope, 0)}<div${_styleAttr({
     color: color

packages/translator/src/__tests__/fixtures/attr-template-literal-escape/__snapshots__/html.expected/template.js

@@ -1,7 +1,7 @@
 import { markHydrateNode as _markHydrateNode, attr as _attr, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = ({
   name
-}) => {
+}, _tagVar) => {
   const _scope = _nextScopeId();
   _write(`${_markHydrateNode(_scope, 0)}<div${_attr("foo", `Hello ${name}`)}></div>`);
 };

packages/translator/src/__tests__/fixtures/basic-chain/__snapshots__/html.expected/template.js

@@ -1,5 +1,5 @@
 import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   const x = 1;
   const y = x * 2;

packages/translator/src/__tests__/fixtures/basic-component-attrs/__snapshots__/html.expected/components/my-button.js

@@ -2,7 +2,7 @@ import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as
 const _renderer = ({
   onClick,
   text
-}) => {
+}, _tagVar) => {
   const _scope = _nextScopeId();
   _write(`${_markHydrateNode(_scope, 0)}<button>${_markHydrateNode(_scope, 1)}${_escapeXML(text)}</button>`);
   _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-component-attrs/components/my-button.marko_0_onClick");

packages/translator/src/__tests__/fixtures/basic-component-attrs/__snapshots__/html.expected/template.js

@@ -1,6 +1,6 @@
 import { nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _myButton from "./components/my-button.marko";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   const clickCount = 0;
   _myButton({

packages/translator/src/__tests__/fixtures/basic-component-renderBody/__snapshots__/html.expected/components/my-button.js

@@ -2,7 +2,7 @@ import { markHydrateNode as _markHydrateNode, write as _write, dynamicTag as _dy
 const _renderer = ({
   onClick,
   renderBody
-}) => {
+}, _tagVar) => {
   const _scope = _nextScopeId();
   _write(`${_markHydrateNode(_scope, 0)}<button>${_markHydrateNode(_scope, 1)}`);
   _dynamicTag(renderBody, null);

packages/translator/src/__tests__/fixtures/basic-component-renderBody/__snapshots__/html.expected/template.js

@@ -1,6 +1,6 @@
 import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _myButton from "./components/my-button.marko";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   const clickCount = 0;
   _myButton({

packages/translator/src/__tests__/fixtures/basic-component/__snapshots__/html.expected/components/counter.js

@@ -1,5 +1,5 @@
 import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   const clickCount = 0;
   _write(`${_markHydrateNode(_scope, 0)}<button>${_markHydrateNode(_scope, 1)}${_escapeXML(clickCount)}</button>`);

packages/translator/src/__tests__/fixtures/basic-component/__snapshots__/html.expected/template.js

@@ -1,6 +1,6 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _counter from "./components/counter.marko";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   _write("<div>");
   _counter({

packages/translator/src/__tests__/fixtures/basic-converge-in-if/__snapshots__/html.expected/template.js

@@ -1,5 +1,5 @@
 import { markHydrateNode as _markHydrateNode, write as _write, escapeXML as _escapeXML, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   const a = 0;
   const b = 0;

packages/translator/src/__tests__/fixtures/basic-counter/__snapshots__/html.expected/template.js

@@ -1,5 +1,5 @@
 import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   const clickCount = 0;
   _write(`<div>${_markHydrateNode(_scope, 0)}<button>${_markHydrateNode(_scope, 1)}${_escapeXML(clickCount)}</button></div>`);

packages/translator/src/__tests__/fixtures/basic-dynamic-native-tag/__snapshots__/html.expected/template.js

@@ -1,7 +1,7 @@
 import { markHydrateNode as _markHydrateNode, write as _write, dynamicTag as _dynamicTag, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = ({
   tagName
-}) => {
+}, _tagVar) => {
   const _scope = _nextScopeId();
   _write(`${_markHydrateNode(_scope, 0)}`);
   _dynamicTag(tagName, {

packages/translator/src/__tests__/fixtures/basic-effect-no-deps/__snapshots__/html.expected/template.js

@@ -1,5 +1,5 @@
 import { nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
-const _renderer = input => {
+const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-effect-no-deps/template.marko_0");
 };