Parser: Add dot_notation_tags parser option (#1436)

This pull request adds support for parsing dot-notation component tags
like `<Dialog.body>` and `<Dialog.footer>` as single HTML elements. A
new `dot_notation_tags` parser option enables this syntax (defaults to
`false`).

When enabled, the parser recognizes `<Identifier.identifier>` patterns
where the first segment starts with an uppercase letter as a single tag
name. Subsequent segments can be any valid identifier (uppercase or
lowercase). This is similar to how JSX handles compound component
patterns.

For example, the following template with `dot_notation_tags: true`:

```html
<Dialog.wrapper id="demo" title="Confirm">
  <Dialog.body>Are you sure?</Dialog.body>

  <Dialog.footer>
    <Dialog.cancel />
    <Dialog.confirm autofocus />
  </Dialog.footer>
</Dialog.wrapper>
```
Produces:
```js
@ DocumentNode (location: (1:0)-(9:0))
└── children: (1 item)
    └── @ HTMLElementNode (location: (1:0)-(8:18))
        ├── open_tag:
        │   └── @ HTMLOpenTagNode (location: (1:0)-(1:43))
        │       ├── tag_opening: "<" (location: (1:0)-(1:1))
        │       ├── tag_name: "Dialog.wrapper" (location: (1:1)-(1:15))
        │       ├── tag_closing: ">" (location: (1:42)-(1:43))
        │       ├── children: [...]
        │       └── is_void: false
        │
        ├── tag_name: "Dialog.wrapper" (location: (1:1)-(1:15))
        ├── body: [...]
        ├── close_tag:
        │   └── @ HTMLCloseTagNode (location: (8:0)-(8:18))
        │       ├── tag_name: "Dialog.wrapper" (location: (8:2)-(8:16))
        │       └── ...
        │
        ├── is_void: false
        └── element_source: "HTML"
```

When `dot_notation_tags` is `true` and the first segment starts with a
lowercase letter (e.g. `<dialog.Button>`), a `DotNotationCasingError` is
reported:

```js
@ DotNotationCasingError (location: (1:1)-(1:7))
├── message: "Dot-notation component tags require the first segment to start with an uppercase letter. `dialog` does not start with an uppercase letter."
└── segment: "dialog" (location: (1:1)-(1:7))
```

This is heavily inspired by
[`Phoenix.Component`](https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html)
and [JSX](https://react.dev/learn/writing-markup-with-jsx).

Author: marcoroth

config.yml

@@ -458,6 +458,16 @@ errors:
 
       fields: []
 
+    - name: DotNotationCasingError
+      message:
+        template: "Dot-notation component tags require the first segment to start with an uppercase letter. `%s` does not start with an uppercase letter."
+        arguments:
+          - segment->value
+
+      fields:
+        - name: segment
+          type: token
+
 warnings:
   fields: []
   types: []

ext/herb/extconf.rb

@@ -46,6 +46,7 @@
 $VPATH << "$(srcdir)/../../src"
 $VPATH << "$(srcdir)/../../src/analyze"
 $VPATH << "$(srcdir)/../../src/analyze/action_view"
+$VPATH << "$(srcdir)/../../src/parser"
 $VPATH << "$(srcdir)/../../src/util"
 $VPATH << prism_src_path
 $VPATH << "#{prism_src_path}/util"

ext/herb/extension.c

@@ -136,6 +136,12 @@ static VALUE Herb_parse(int argc, VALUE* argv, VALUE self) {
     }
     if (!NIL_P(action_view_helpers) && RTEST(action_view_helpers)) { parser_options.action_view_helpers = true; }
 
+    VALUE dot_notation_tags = rb_hash_lookup(options, rb_utf8_str_new_cstr("dot_notation_tags"));
+    if (NIL_P(dot_notation_tags)) {
+      dot_notation_tags = rb_hash_lookup(options, ID2SYM(rb_intern("dot_notation_tags")));
+    }
+    if (!NIL_P(dot_notation_tags) && RTEST(dot_notation_tags)) { parser_options.dot_notation_tags = true; }
+
     VALUE render_nodes = rb_hash_lookup(options, rb_utf8_str_new_cstr("render_nodes"));
     if (NIL_P(render_nodes)) { render_nodes = rb_hash_lookup(options, ID2SYM(rb_intern("render_nodes"))); }
     if (!NIL_P(render_nodes) && RTEST(render_nodes)) { parser_options.render_nodes = true; }

java/herb_jni.c

@@ -109,6 +109,14 @@ Java_org_herb_Herb_parse(JNIEnv* env, jclass clazz, jstring source, jobject opti
       parser_options.prism_program = (prismProgram == JNI_TRUE);
     }
 
+    jmethodID getDotNotationTags =
+        (*env)->GetMethodID(env, optionsClass, "isDotNotationTags", "()Z");
+
+    if (getDotNotationTags != NULL) {
+      jboolean dotNotationTags = (*env)->CallBooleanMethod(env, options, getDotNotationTags);
+      parser_options.dot_notation_tags = (dotNotationTags == JNI_TRUE);
+    }
+
     jmethodID getHtml =
         (*env)->GetMethodID(env, optionsClass, "isHtml", "()Z");
 

java/org/herb/ParserOptions.java

@@ -10,6 +10,7 @@ public class ParserOptions {
   private boolean prismNodes = false;
   private boolean prismNodesDeep = false;
   private boolean prismProgram = false;
+  private boolean dotNotationTags = false;
   private boolean html = true;
 
   public ParserOptions() {}
@@ -95,6 +96,15 @@ public boolean isPrismProgram() {
     return prismProgram;
   }
 
+  public ParserOptions dotNotationTags(boolean value) {
+    this.dotNotationTags = value;
+    return this;
+  }
+
+  public boolean isDotNotationTags() {
+    return dotNotationTags;
+  }
+
   public ParserOptions html(boolean value) {
     this.html = value;
     return this;

javascript/packages/core/src/parser-options.ts

@@ -8,6 +8,7 @@ export interface ParseOptions {
   prism_nodes?: boolean
   prism_nodes_deep?: boolean
   prism_program?: boolean
+  dot_notation_tags?: boolean
   html?: boolean
 }
 
@@ -23,6 +24,7 @@ export const DEFAULT_PARSER_OPTIONS: SerializedParserOptions = {
   prism_nodes: false,
   prism_nodes_deep: false,
   prism_program: false,
+  dot_notation_tags: false,
   html: true,
 }
 
@@ -57,6 +59,9 @@ export class ParserOptions {
   /** Whether the full Prism ProgramNode was serialized on the DocumentNode. */
   readonly prism_program: boolean
 
+  /** Whether dot-notation component tags (e.g. Dialog.Button) are parsed as HTML elements. */
+  readonly dot_notation_tags: boolean
+
   /** Whether HTML tag parsing is enabled during parsing. When false, HTML-like content is treated as literal text. */
   readonly html: boolean
 
@@ -74,6 +79,7 @@ export class ParserOptions {
     this.prism_nodes = options.prism_nodes ?? DEFAULT_PARSER_OPTIONS.prism_nodes
     this.prism_nodes_deep = options.prism_nodes_deep ?? DEFAULT_PARSER_OPTIONS.prism_nodes_deep
     this.prism_program = options.prism_program ?? DEFAULT_PARSER_OPTIONS.prism_program
+    this.dot_notation_tags = options.dot_notation_tags ?? DEFAULT_PARSER_OPTIONS.dot_notation_tags
     this.html = options.html ?? DEFAULT_PARSER_OPTIONS.html
   }
 }

javascript/packages/linter/test/parse-cache.test.ts

@@ -75,6 +75,7 @@ describe("ParseCache", () => {
         strict: true,
         strict_locals: false,
         action_view_helpers: false,
+        dot_notation_tags: false,
         html: true,
       })
     })
@@ -93,6 +94,7 @@ describe("ParseCache", () => {
         strict: false,
         strict_locals: false,
         action_view_helpers: false,
+        dot_notation_tags: false,
         html: true,
       })
     })
@@ -111,6 +113,7 @@ describe("ParseCache", () => {
         strict: true,
         strict_locals: false,
         action_view_helpers: false,
+        dot_notation_tags: false,
         html: true,
       })
     })
@@ -129,6 +132,7 @@ describe("ParseCache", () => {
         strict: false,
         strict_locals: false,
         action_view_helpers: false,
+        dot_notation_tags: false,
         html: true,
       })
     })

javascript/packages/node/binding.gyp

@@ -45,6 +45,7 @@
         "./extension/libherb/lexer_peek_helpers.c",
         "./extension/libherb/lexer.c",
         "./extension/libherb/location.c",
+        "./extension/libherb/parser/dot_notation.c",
         "./extension/libherb/parser_helpers.c",
         "./extension/libherb/parser_match_tags.c",
         "./extension/libherb/parser.c",

playground/index.html

@@ -501,6 +501,16 @@
                     />
                     <span class="select-none">HTML</span>
                   </label>
+
+                  <label class="flex items-center gap-1.5 text-gray-300 text-sm" title="Enable dot-notation component tags like &lt;Dialog.Button&gt; — requires each segment to start with an uppercase letter">
+                    <input
+                      type="checkbox"
+                      data-option="dot_notation_tags"
+                      data-action="change->playground#onOptionChange"
+                      class="rounded border-gray-600 text-green-600 focus:ring-green-500 bg-gray-700"
+                    />
+                    <span class="select-none">Dot-notation tags</span>
+                  </label>
                 </div>
 
                 <pre

playground/src/controllers/playground_controller.js

@@ -1271,6 +1271,7 @@ export default class extends Controller {
       prism_program: false,
       prism_nodes: false,
       prism_nodes_deep: false,
+      dot_notation_tags: false,
       html: true,
     }