feat(tsrx): member expression tag names map to dynamic tags

.changeset/ninety-radios-smash.md

@@ -0,0 +1,5 @@
+---
+"@marko/tsrx": patch
+---
+
+Member expression tag names map to dynamic tags

packages/tsrx/README.md

@@ -27,7 +27,7 @@ const { files } = compile(source, "App.tsrx");
 | --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
 | `component App(props: T) { ... }`                         | `export type Input = T;` + `<const/props=input/>`                                                                           |
 | `component App({ a, b }: T) { ... }`                      | `export type Input = T;` + `<const/{ a, b }=input/>`                                                                        |
-| `component App() { ... }`                                  | (no Input type, no binding)                                                                                                 |
+| `component App() { ... }`                                 | (no Input type, no binding)                                                                                                 |
 | `<div class="x">{expr}</div>`                             | `<div class="x">${expr}</div>`                                                                                              |
 | `{text "safe string"}`                                    | `safe string` (plain text when value contains none of `< > $ {`)                                                            |
 | `{text expr}`                                             | `${expr}`                                                                                                                   |
@@ -38,12 +38,13 @@ const { files } = compile(source, "App.tsrx");
 | `<div {...rest}>`                                         | `<div ...rest>`                                                                                                             |
 | `const name = expr`                                       | `<const/name=expr/>`                                                                                                        |
 | `let name` / `let name = expr`                            | `<let/name/>` / `<let/name=expr/>`                                                                                          |
-| `const title = <tsx><span class="x">{"Hi"}</span></tsx>;` | `<define/title><span class="x">${"Hi"}</span></define>` · use `{title}` → Marko `<${title}/>`                              |
+| `const title = <tsx><span class="x">{"Hi"}</span></tsx>;` | `<define/title><span class="x">${"Hi"}</span></define>` · use `{title}` → Marko `<${title}/>`                               |
+| `<input.content/>`                                        | `<${input.content}/>` (member expression tag names map to dynamic tags)                                                     |
 | `if / else if / else`                                     | `<if=...>`, `<else if=...>`, `<else>`                                                                                       |
 | `for (const x of xs; index i)`                            | `<for\|x, i\| of=xs>`                                                                                                       |
 | `for (const x of xs; key x.id)`                           | `<for\|x\| of=xs by=(x) => x.id>`                                                                                           |
 | `switch (d) { case a: ...; default: ...; }`               | chained `<if=d===a>` / `<else>`                                                                                             |
-| `try { ... } pending { ... } catch (err) { ... }`         | `<try>` … `<@placeholder>` … `<@catch|err|>` … `</try>` (catch param name replaces `err`)                                  |
+| `try { ... } pending { ... } catch (err) { ... }`         | `<try>` … `<@placeholder>` … `<@catch\|err\|>` … `</try>` (catch param name replaces `err`)                                 |
 | `<style>...</style>`                                      | `<style>...</style>` (passed through as CSS-modules-friendly; scoped hash is applied by the existing `@tsrx/core` pipeline) |
 
 ## Not yet supported (MVP)

packages/tsrx/src/transform.ts

@@ -433,8 +433,9 @@ export class Transformer {
     }
 
     const isDynamic =
-      el.id.type === "Identifier" &&
-      this.#defineNames.has((el.id as AST.Identifier).name);
+      el.id.type === "MemberExpression" ||
+      (el.id.type === "Identifier" &&
+        this.#defineNames.has((el.id as AST.Identifier).name));
 
     const refAttr = el.attributes.find((a) => a.type === "RefAttribute") as
       | (AST.BaseNode & { type: "RefAttribute"; argument: AST.Expression })

packages/tsrx/tests/__snapshots__/volar-mappings.txt

@@ -213,6 +213,10 @@
 
 === style-tag ===
 
+=== tag-member-expression ===
+  src: 2 "div" -> "div"
+  src: 2 "input.content" -> "input.content"
+
 === top-level-text ===
   src: 1 "{ count: number }" -> "{ count: number }"
   src: 1 "{ count }" -> "{ count }"

packages/tsrx/tests/fixtures/tag-member-expression/__snapshots__/index.marko

@@ -0,0 +1 @@
+<div><${input.content}/></div>

packages/tsrx/tests/fixtures/tag-member-expression/index.tsrx

@@ -0,0 +1,3 @@
+export default component(input) {
+  <div><input.content/></div>
+}