add element parts, startTag & endTag

glimmerjs · Jan 25, 2024 · 38bec77 · 38bec77
1 parent 2ddbbc4
commit 38bec77
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 1 deletion.
diff --git a/packages/@glimmer/syntax/lib/parser/tokenizer-event-handlers.ts b/packages/@glimmer/syntax/lib/parser/tokenizer-event-handlers.ts
@@ -14,7 +14,7 @@ import * as src from '../source/api';
 import { generateSyntaxError } from '../syntax-error';
 import traverse from '../traversal/traverse';
 import Walker from '../traversal/walker';
-import { appendChild, parseElementBlockParams } from '../utils';
+import { appendChild, parseElementBlockParams, parseElementPartLocs } from '../utils';
 import b from '../v1/parser-builders';
 import publicBuilder from '../v1/public-builders';
 import { HandlebarsNodeVisitors } from './handlebars-node-visitors';
@@ -135,6 +135,12 @@ export class TokenizerEventHandlers extends HandlebarsNodeVisitors {
       blockParams: [],
       loc,
     });
+    element.startTag = {
+      type: 'ElementStartNode',
+      value: name,
+      loc: loc,
+    };
+    parseElementPartLocs(this.source, element);
     this.elementStack.push(element);
   }
 
@@ -143,6 +149,12 @@ export class TokenizerEventHandlers extends HandlebarsNodeVisitors {
 
     let element = this.elementStack.pop() as ASTv1.ElementNode;
 
+    element.endTag = {
+      type: 'ElementEndNode',
+      loc: tag.loc,
+      value: element.selfClosing ? '' : tag.name,
+    };
+
     this.validateEndTag(tag, element, isVoid);
     let parent = this.currentElement();
 

diff --git a/packages/@glimmer/syntax/lib/utils.ts b/packages/@glimmer/syntax/lib/utils.ts
@@ -1,6 +1,7 @@
 import type { Nullable } from '@glimmer/interfaces';
 import { expect, unwrap } from '@glimmer/util';
 
+import type { src } from '..';
 import type * as ASTv1 from './v1/api';
 import type * as HBS from './v1/handlebars-ast';
 
@@ -20,6 +21,26 @@ export function parseElementBlockParams(element: ASTv1.ElementNode): void {
   if (params) element.blockParams = params;
 }
 
+export function parseElementPartLocs(code: src.Source, element: ASTv1.ElementNode) {
+  const elementRange = [element.loc.getStart().offset!, element.loc.getEnd().offset!] as [
+    number,
+    number,
+  ];
+  let start = elementRange[0];
+  let codeSlice = code.slice(...elementRange);
+  for (const part of element.parts) {
+    const idx = codeSlice.indexOf(part.value);
+    const range = [start + idx, 0] as [number, number];
+    range[1] = range[0] + part.value.length;
+    codeSlice = code.slice(range[1], elementRange[1]);
+    start = range[1];
+    part.loc = code.spanFor({
+      start: code.hbsPosFor(range[0])!,
+      end: code.hbsPosFor(range[1])!,
+    });
+  }
+}
+
 function parseBlockParams(element: ASTv1.ElementNode): Nullable<string[]> {
   let l = element.attributes.length;
   let attrNames = [];

diff --git a/packages/@glimmer/syntax/lib/v1/nodes-v1.ts b/packages/@glimmer/syntax/lib/v1/nodes-v1.ts
@@ -141,9 +141,27 @@ export interface ElementName {
   loc: src.SourceLocation;
 }
 
+export interface ElementStartNode extends BaseNode {
+  type: 'ElementStartNode';
+  value: string;
+}
+
+export interface ElementEndNode extends BaseNode {
+  type: 'ElementEndNode';
+  value: string;
+}
+
+export interface ElementPartNode extends BaseNode {
+  type: 'ElementPartNode';
+  value: string;
+}
+
 export interface ElementNode extends BaseNode {
   type: 'ElementNode';
   tag: string;
+  startTag: ElementStartNode;
+  endTag: ElementEndNode;
+  parts: ElementPartNode[];
   selfClosing: boolean;
   attributes: AttrNode[];
   blockParams: string[];
@@ -315,6 +333,9 @@ export type SharedNodes = {
 };
 
 export type Nodes = SharedNodes & {
+  ElementEndNode: ElementEndNode;
+  ElementStartNode: ElementStartNode;
+  ElementPartNode: ElementPartNode;
   Program: Program;
   Template: Template;
   Block: Block;

diff --git a/packages/@glimmer/syntax/lib/v1/parser-builders.ts b/packages/@glimmer/syntax/lib/v1/parser-builders.ts
@@ -166,6 +166,17 @@ class Builders {
     return {
       type: 'ElementNode',
       tag,
+      startTag: {
+        type: 'ElementStartNode',
+        value: tag,
+      } as ASTv1.ElementStartNode,
+      endTag: {
+        type: 'ElementEndNode',
+        value: selfClosing ? '' : tag,
+      } as ASTv1.ElementEndNode,
+      parts: tag
+        .split('.')
+        .map((t) => ({ type: 'ElementPartNode', value: t }) as ASTv1.ElementPartNode),
       selfClosing: selfClosing,
       attributes: attrs || [],
       blockParams: blockParams || [],

diff --git a/packages/@glimmer/syntax/lib/v1/public-builders.ts b/packages/@glimmer/syntax/lib/v1/public-builders.ts
@@ -224,6 +224,17 @@ function buildElement(tag: TagDescriptor, options: BuildElementOptions = {}): AS
   return {
     type: 'ElementNode',
     tag: tagName,
+    startTag: {
+      type: 'ElementStartNode',
+      value: tag,
+    } as ASTv1.ElementStartNode,
+    endTag: {
+      type: 'ElementEndNode',
+      value: selfClosing ? '' : tag,
+    } as ASTv1.ElementEndNode,
+    parts: tagName
+      .split('.')
+      .map((t) => ({ type: 'ElementPartNode', value: t }) as ASTv1.ElementPartNode),
     selfClosing: selfClosing,
     attributes: attrs || [],
     blockParams: blockParams || [],

diff --git a/packages/@glimmer/syntax/lib/v1/visitor-keys.ts b/packages/@glimmer/syntax/lib/v1/visitor-keys.ts
@@ -14,6 +14,9 @@ const visitorKeys = {
   CommentStatement: [],
   MustacheCommentStatement: [],
   ElementNode: ['attributes', 'modifiers', 'children', 'comments'],
+  ElementStartNode: [],
+  ElementPartNode: [],
+  ElementEndNode: [],
   AttrNode: ['value'],
   TextNode: [],
 

diff --git a/packages/@glimmer/syntax/test/loc-node-test.ts b/packages/@glimmer/syntax/test/loc-node-test.ts
@@ -134,6 +134,28 @@ test('html elements', () => {
   }
 });
 
+test('html elements with paths', () => {
+  let ast = parse(`
+    <Foo as |bar|>
+      <bar.x.y/>
+      <bar.x.y></bar.x.y>
+    </Foo>
+  `);
+
+  let [, section] = ast.body;
+  locEqual(section, 2, 4, 5, 10, 'Foo element');
+  if (assertNodeType(section, 'ElementNode')) {
+    locEqual(section.startTag, 2, 4, 2, 18, 'Foo start tag');
+    locEqual(section.endTag, 5, 4, 5, 10, 'Foo end tag');
+    let [, barSelfClosed] = section.children;
+    if (assertNodeType(barSelfClosed, 'ElementNode')) {
+      locEqual(barSelfClosed.parts[0], 3, 7, 3, 10, 'bar.x.y bar part');
+      locEqual(barSelfClosed.parts[1], 3, 11, 3, 12, 'bar.x.y x part');
+      locEqual(barSelfClosed.parts[2], 3, 13, 3, 14, 'bar.x.y y part');
+    }
+  }
+});
+
 test('html elements with nested blocks', (assert) => {
   let ast = parse(`
     <div>

diff --git a/packages/@glimmer/syntax/test/parser-node-test.ts b/packages/@glimmer/syntax/test/parser-node-test.ts
@@ -892,6 +892,17 @@ export function element(tag: TagDescriptor, ...options: ElementParts[]): ASTv1.E
   return {
     type: 'ElementNode',
     tag: tag || '',
+    startTag: {
+      type: 'ElementStartNode',
+      value: tag,
+    } as ASTv1.ElementStartNode,
+    endTag: {
+      type: 'ElementEndNode',
+      value: selfClosing ? '' : tag,
+    } as ASTv1.ElementEndNode,
+    parts: tag
+      .split('.')
+      .map((t) => ({ type: 'ElementPartNode', value: t }) as ASTv1.ElementPartNode),
     selfClosing: selfClosing,
     attributes: attrs || [],
     blockParams: blockParams || [],