feat: transform for binding syntax (#2271)

packages/compiler/src/babel-plugin/index.js

@@ -280,6 +280,9 @@ export function getMarkoFile(code, fileOpts, markoOpts) {
   }
 
   rootTransformers.push(transform);
+  if (translator.transform) {
+    rootTransformers.push(translator.transform);
+  }
   file.___compileStage = "transform";
   traverseAll(file, rootTransformers);
 

packages/translator-default/index.d.ts

@@ -1,6 +1,7 @@
 export const taglibs: any;
 export const optionalTaglibs: any;
 export const analyze: any;
+export const transform: any;
 export const translate: any;
 export const getRuntimeEntryFiles: any;
 export const internalEntryBuilder: any;

packages/translator-interop/src/index.ts

@@ -7,13 +7,15 @@ import {
   internalEntryBuilder as internalEntryBuilder5,
   optionalTaglibs as optionalTaglibs5,
   taglibs as taglibs5,
+  transform as transform5,
   translate as translate5,
 } from "@marko/translator-default";
 import {
   analyze as analyze6,
   getRuntimeEntryFiles as getRuntimeEntryFiles6,
   internalEntryBuilder as internalEntryBuilder6,
   taglibs as taglibs6,
+  transform as transform6,
   translate as translate6,
 } from "@marko/translator-tags";
 import path from "path";
@@ -38,6 +40,7 @@ export const taglibs = mergeTaglibs(
   taglib.resolveOptionalTaglibs(optionalTaglibs5).concat(taglibs5),
   taglibs6,
 );
+export const transform = mergeVisitors(transform5, transform6);
 export const analyze = mergeVisitors(analyze5, analyze6);
 export const translate = patchTranslateProgram(
   mergeVisitors(translate5, translate6),

packages/translator-tags/src/__tests__/fixtures/error-let-invalid-binding/__snapshots__/dom.expected/template.error.txt

@@ -0,0 +1,5 @@
+
+    at packages/translator-tags/src/__tests__/fixtures/error-let-invalid-binding/template.marko:1:11
+    > 1 | <let/count:=1/>
+        |           ^^^ Attributes may only be bound to identifiers or member expressions
+      2 |

packages/translator-tags/src/__tests__/fixtures/error-let-invalid-binding/__snapshots__/html.expected/template.error.txt

@@ -0,0 +1,5 @@
+
+    at packages/translator-tags/src/__tests__/fixtures/error-let-invalid-binding/template.marko:1:11
+    > 1 | <let/count:=1/>
+        |           ^^^ Attributes may only be bound to identifiers or member expressions
+      2 |

packages/translator-tags/src/__tests__/fixtures/error-let-invalid-binding/template.marko

@@ -0,0 +1 @@
+<let/count:=1/>

packages/translator-tags/src/__tests__/fixtures/error-let-invalid-binding/test.ts

@@ -0,0 +1 @@
+export const error_compiler = true;

packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/csr-sanitized.expected.md

@@ -3,38 +3,50 @@
 <button>
   1|1
 </button>
+<button>
+  1|1
+</button>
 source=1
 ```
 
 
 # Render 
-container.querySelector("button").click()
+container.querySelectorAll("button").forEach(item => item.click())
 
 ```html
 <button>
   2|2
 </button>
+<button>
+  2|2
+</button>
 source=2
 ```
 
 
 # Render 
-container.querySelector("button").click()
+container.querySelectorAll("button").forEach(item => item.click())
 
 ```html
 <button>
   3|3
 </button>
+<button>
+  3|3
+</button>
 source=3
 ```
 
 
 # Render 
-container.querySelector("button").click()
+container.querySelectorAll("button").forEach(item => item.click())
 
 ```html
 <button>
   4|4
 </button>
+<button>
+  4|4
+</button>
 source=4
 ```

packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/csr.expected.md

@@ -3,64 +3,82 @@
 <button>
   1|1
 </button>
+<button>
+  1|1
+</button>
 source=1
 ```
 
 # Mutations
 ```
-inserted button0, #text1, #text2
+inserted button0, button1, #text2, #text3
 ```
 
 
 # Render 
-container.querySelector("button").click()
+container.querySelectorAll("button").forEach(item => item.click())
 
 ```html
 <button>
   2|2
 </button>
+<button>
+  2|2
+</button>
 source=2
 ```
 
 # Mutations
 ```
-#text2: "1" => "2"
+#text3: "1" => "2"
 button0/#text0: "1" => "2"
+button1/#text0: "1" => "2"
 button0/#text2: "1" => "2"
+button1/#text2: "1" => "2"
 ```
 
 
 # Render 
-container.querySelector("button").click()
+container.querySelectorAll("button").forEach(item => item.click())
 
 ```html
 <button>
   3|3
 </button>
+<button>
+  3|3
+</button>
 source=3
 ```
 
 # Mutations
 ```
-#text2: "2" => "3"
+#text3: "2" => "3"
 button0/#text0: "2" => "3"
+button1/#text0: "2" => "3"
 button0/#text2: "2" => "3"
+button1/#text2: "2" => "3"
 ```
 
 
 # Render 
-container.querySelector("button").click()
+container.querySelectorAll("button").forEach(item => item.click())
 
 ```html
 <button>
   4|4
 </button>
+<button>
+  4|4
+</button>
 source=4
 ```
 
 # Mutations
 ```
-#text2: "3" => "4"
+#text3: "3" => "4"
 button0/#text0: "3" => "4"
+button1/#text0: "3" => "4"
 button0/#text2: "3" => "4"
+button1/#text2: "3" => "4"
 ```

packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/dom.expected/components/child.js

@@ -1,5 +1,22 @@
 import { on as _on, data as _data, queueControllableSource as _queueControllableSource, register as _register, queueEffect as _queueEffect, intersection as _intersection, value as _value, changeHandler as _changeHandler, initValue as _initValue, intersections as _intersections, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/dom";
 const _onClick = _scope => {
+  const {
+    _otherState_change,
+    otherState
+  } = _scope;
+  return function () {
+    _queueControllableSource(_scope, _otherState, _otherState_change, otherState + 1);
+  };
+};
+const _expr__otherState_change_otherState_effect = _register("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/components/child.marko_0__otherState_change_otherState", _scope => _on(_scope["#button/3"], "click", _onClick(_scope)));
+const _expr__otherState_change_otherState = /* @__PURE__ */_intersection(2, _scope => {
+  const {
+    _otherState_change,
+    otherState
+  } = _scope;
+  _queueEffect(_scope, _expr__otherState_change_otherState_effect);
+});
+const _onClick2 = _scope => {
   const {
     _state_change,
     state
@@ -8,24 +25,30 @@ const _onClick = _scope => {
     _queueControllableSource(_scope, _state, _state_change, state + 1);
   };
 };
-const _expr__state_change_state_effect = _register("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/components/child.marko_0__state_change_state", _scope => _on(_scope["#button/0"], "click", _onClick(_scope)));
+const _expr__state_change_state_effect = _register("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/components/child.marko_0__state_change_state", _scope => _on(_scope["#button/0"], "click", _onClick2(_scope)));
 const _expr__state_change_state = /* @__PURE__ */_intersection(2, _scope => {
   const {
     _state_change,
     state
   } = _scope;
   _queueEffect(_scope, _expr__state_change_state_effect);
 });
+const _otherState = /* @__PURE__ */_value("otherState", (_scope, otherState) => _data(_scope["#text/5"], otherState), _expr__otherState_change_otherState);
+const _otherState_change = _changeHandler("_otherState_change", /* @__PURE__ */_value("_otherState_change", (_scope, _otherState_change) => {}, _expr__otherState_change_otherState));
 const _state = /* @__PURE__ */_value("state", (_scope, state) => _data(_scope["#text/2"], state), _expr__state_change_state);
 const _state_change = _changeHandler("_state_change", /* @__PURE__ */_value("_state_change", (_scope, _state_change) => {}, _expr__state_change_state));
 const _state_init = _initValue("state", _state);
+const _otherState_init = _initValue("otherState", _otherState);
 export const _input_ = /* @__PURE__ */_value("input", (_scope, input) => {
   _data(_scope["#text/1"], input.value);
+  _data(_scope["#text/4"], input.value);
   _state_change(_scope, input.valueChange);
   (_scope["_state_change"] ? _state : _state_init)(_scope, input.value);
-}, _intersections([_state_change, _state]));
+  _otherState_change(_scope, input["value" + "Change"]);
+  (_scope["_otherState_change"] ? _otherState : _otherState_init)(_scope, input["value"]);
+}, _intersections([_state_change, _state, _otherState_change, _otherState]));
 export const _params__ = /* @__PURE__ */_value("_params_", (_scope, _params_) => _input_(_scope, _params_[0]), _input_);
-export const _template_ = "<button><!>|<!></button>";
-export const _walks_ = /* get, next(1), replace, over(2), replace, out(1) */" D%c%l";
+export const _template_ = "<button><!>|<!></button><button><!>|<!></button>";
+export const _walks_ = /* get, next(1), replace, over(2), replace, out(1), get, next(1), replace, over(2), replace, out(1) */" D%c%l D%c%l";
 export const _setup_ = function () {};
 export default /* @__PURE__ */_createTemplate( /* @__PURE__ */_createRenderer(_template_, _walks_, _setup_, void 0, void 0, _params__), "packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/components/child.marko");

packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/dom.expected/template.js

@@ -1,7 +1,7 @@
 import { _setup_ as _child, _input_ as _child_input, _template_ as _child_template, _walks_ as _child_walks } from "./components/child.marko";
 import { register as _register, inChild as _inChild, data as _data, queueSource as _queueSource, value as _value, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/dom";
-const _valueChange = _register("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/template.marko_0/valueChange", _scope => function (newValue) {
-  _queueSource(_scope, _source, newValue);
+const _valueChange = _register("packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/template.marko_0/valueChange", _scope => function (_new_source) {
+  _queueSource(_scope, _source, _new_source);
 });
 const _source = /* @__PURE__ */_value("source", (_scope, source) => {
   _data(_scope["#text/1"], source);

packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/html.expected/components/child.js

@@ -3,11 +3,16 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
   const state = input.value;
   const _state_change = input.valueChange;
-  _write(`<button>${_escapeXML(input.value)}${_markResumeNode(_scope0_id, "#text/1")}|<!>${_escapeXML(state)}${_markResumeNode(_scope0_id, "#text/2")}</button>${_markResumeNode(_scope0_id, "#button/0")}`);
+  const otherState = input["value"];
+  const _otherState_change = input["value" + "Change"];
+  _write(`<button>${_escapeXML(input.value)}${_markResumeNode(_scope0_id, "#text/1")}|<!>${_escapeXML(state)}${_markResumeNode(_scope0_id, "#text/2")}</button>${_markResumeNode(_scope0_id, "#button/0")}<button>${_escapeXML(input.value)}${_markResumeNode(_scope0_id, "#text/4")}|<!>${_escapeXML(otherState)}${_markResumeNode(_scope0_id, "#text/5")}</button>${_markResumeNode(_scope0_id, "#button/3")}`);
+  _writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/components/child.marko_0__otherState_change_otherState");
   _writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/components/child.marko_0__state_change_state");
   _writeScope(_scope0_id, {
     "_state_change": _state_change,
-    "state": state
+    "state": state,
+    "_otherState_change": _otherState_change,
+    "otherState": otherState
   });
 });
 export default /* @__PURE__ */_createTemplate(_renderer, "packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/components/child.marko");

packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/html.expected/template.js

@@ -6,8 +6,8 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _childScope = _peekNextScope();
   _child._({
     value: source,
-    valueChange: _register(function (newValue) {
-      source = newValue;
+    valueChange: _register(function (_new_source) {
+      source = _new_source;
     }, "packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/template.marko_0/valueChange", _scope0_id)
   });
   _write(`source=<!>${_escapeXML(source)}${_markResumeNode(_scope0_id, "#text/1")}`);

packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/ssr-sanitized.expected.md

@@ -3,5 +3,8 @@
 <button>
   1|1
 </button>
+<button>
+  1|1
+</button>
 source=1
 ```

packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <button>1<!--M_*1 #text/1-->|<!>1<!--M_*1 #text/2--></button><!--M_*1 #button/0-->source=<!>1<!--M_*0 #text/1--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.c={0:_.a={"#childScope/0":_.b={state:1}},1:_.b},_.b._state_change=_._["packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/template.marko_0/valueChange"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/components/child.marko_0__state_change_state"];M._.d=1;M._.w()</script>
+  <button>1<!--M_*1 #text/1-->|<!>1<!--M_*1 #text/2--></button><!--M_*1 #button/0--><button>1<!--M_*1 #text/4-->|<!>1<!--M_*1 #text/5--></button><!--M_*1 #button/3-->source=<!>1<!--M_*0 #text/1--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.c={0:_.a={"#childScope/0":_.b={state:1,otherState:1}},1:_.b},_.b._state_change=_.b._otherState_change=_._["packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/template.marko_0/valueChange"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/components/child.marko_0__otherState_change_otherState",1,"packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/components/child.marko_0__state_change_state"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -16,12 +16,21 @@
       <!--M_*1 #text/2-->
     </button>
     <!--M_*1 #button/0-->
+    <button>
+      1
+      <!--M_*1 #text/4-->
+      |
+      <!---->
+      1
+      <!--M_*1 #text/5-->
+    </button>
+    <!--M_*1 #button/3-->
     source=
     <!---->
     1
     <!--M_*0 #text/1-->
     <script>
-      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={"#childScope/0":_.b={state:1}},1:_.b},_.b._state_change=_._["packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/template.marko_0/valueChange"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/components/child.marko_0__state_change_state"];M._.d=1;M._.w()
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={"#childScope/0":_.b={state:1,otherState:1}},1:_.b},_.b._state_change=_.b._otherState_change=_._["packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/template.marko_0/valueChange"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/components/child.marko_0__otherState_change_otherState",1,"packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/components/child.marko_0__state_change_state"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -40,10 +49,18 @@ inserted #document/html0/body1/button0/#comment3
 inserted #document/html0/body1/button0/#text4
 inserted #document/html0/body1/button0/#comment5
 inserted #document/html0/body1/#comment1
-inserted #document/html0/body1/#text2
+inserted #document/html0/body1/button2
+inserted #document/html0/body1/button2/#text0
+inserted #document/html0/body1/button2/#comment1
+inserted #document/html0/body1/button2/#text2
+inserted #document/html0/body1/button2/#comment3
+inserted #document/html0/body1/button2/#text4
+inserted #document/html0/body1/button2/#comment5
 inserted #document/html0/body1/#comment3
 inserted #document/html0/body1/#text4
 inserted #document/html0/body1/#comment5
-inserted #document/html0/body1/script6
-inserted #document/html0/body1/script6/#text0
+inserted #document/html0/body1/#text6
+inserted #document/html0/body1/#comment7
+inserted #document/html0/body1/script8
+inserted #document/html0/body1/script8/#text0
 ```

packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/components/child.marko

@@ -1,4 +1,9 @@
-<let/state=input.value valueChange=input.valueChange/>
+<let/state:=input.value/>
 <button onClick() { state++; }>
   ${input.value}|${state}
 </button>
+
+<let/otherState:=input["value"]/>
+<button onClick() { otherState++; }>
+  ${input.value}|${otherState}
+</button>

packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/template.marko

@@ -1,5 +1,3 @@
 <let/source=1/>
-<child value=source valueChange(newValue) {
-  source = newValue;
-} />
+<child value:=source />
 -- source=${source}

packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-child/test.ts

@@ -1,7 +1,7 @@
 export const steps = [{}, click, click, click];
 
 function click(container: Element) {
-  container.querySelector("button")!.click();
+  container.querySelectorAll("button")!.forEach((item) => item.click());
 }
 
 export const skip_resume = true;