feat: support Angular selectorless syntax (#45)

Author: fisker

packages/angular-html-parser/.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "editorconfig.editorconfig",
+    // "dbaeumer.vscode-eslint",
+    "streetsidesoftware.code-spell-checker"
+  ]
+}

packages/angular-html-parser/.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "[javascript][typescript][json][jsonc][markdown][yaml]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  // "[javascript][typescript]": {
+  //   "editor.codeActionsOnSave": {
+  //     "source.fixAll.eslint": "explicit",
+  //   },
+  // },
+  "prettier.requireConfig": true
+}

packages/angular-html-parser/src/index.ts

@@ -49,6 +49,11 @@ export interface ParseOptions {
    * tokenize angular let declaration syntax
    */
   tokenizeAngularLetDeclaration?: boolean;
+
+  /**
+   * enable angular selectorless syntax
+   */
+  enableAngularSelectorlessSyntax?: boolean;
 }
 
 export function parse(
@@ -62,6 +67,7 @@ export function parse(
     getTagContentType,
     tokenizeAngularBlocks = false,
     tokenizeAngularLetDeclaration = false,
+    enableAngularSelectorlessSyntax = false,
   } = options;
   return getParser().parse(
     input,
@@ -73,6 +79,7 @@ export function parse(
       allowHtmComponentClosingTags,
       tokenizeBlocks: tokenizeAngularBlocks,
       tokenizeLet: tokenizeAngularLetDeclaration,
+      selectorlessEnabled: enableAngularSelectorlessSyntax,
     },
     isTagNameCaseSensitive,
     getTagContentType,

packages/angular-html-parser/test/index_spec.ts

@@ -68,7 +68,7 @@ describe("AST format", () => {
     ]);
   });
 
-  it("should have `type` property when tokenizeBlocks is enabled", () => {
+  it("should support 'tokenizeAngularBlocks'", () => {
     const input = `@if (user.isHuman) { <p>Hello human</p> }`;
     const ast = parse(input, { tokenizeAngularBlocks: true });
     expect(ast.rootNodes).toEqual([
@@ -95,6 +95,90 @@ describe("AST format", () => {
       }),
     ]);
   });
+
+  it("should support 'tokenizeAngularLetDeclaration'", () => {
+    const input = `@let foo = 'bar';`;
+    const ast = parse(input, { tokenizeAngularLetDeclaration: true });
+    expect(ast.rootNodes).toEqual([
+      expect.objectContaining({
+        name: "foo",
+        type: "letDeclaration",
+        value: "'bar'",
+      }),
+    ]);
+  });
+
+  // https://github.com/angular/angular/pull/60724
+  it("should support 'enableAngularSelectorlessSyntax'", () => {
+    {
+      const ast = parse("<div @Dir></div>", {
+        enableAngularSelectorlessSyntax: true,
+      });
+      expect(ast.rootNodes).toEqual([
+        expect.objectContaining({
+          name: "div",
+          type: "element",
+          directives: [
+            expect.objectContaining({
+              name: "Dir",
+              type: "directive",
+            }),
+          ],
+        }),
+      ]);
+    }
+
+    {
+      const ast = parse("<MyComp>Hello</MyComp>", {
+        enableAngularSelectorlessSyntax: true,
+      });
+
+      expect(ast.rootNodes).toEqual([
+        expect.objectContaining({
+          fullName: "MyComp",
+          componentName: "MyComp",
+          type: "component",
+        }),
+      ]);
+    }
+
+    {
+      const ast = parse("<MyComp/>", { enableAngularSelectorlessSyntax: true });
+      expect(ast.rootNodes).toEqual([
+        expect.objectContaining({
+          fullName: "MyComp",
+          componentName: "MyComp",
+          type: "component",
+        }),
+      ]);
+    }
+
+    {
+      const ast = parse("<MyComp:button>Hello</MyComp:button>", {
+        enableAngularSelectorlessSyntax: true,
+      });
+      expect(ast.rootNodes).toEqual([
+        expect.objectContaining({
+          fullName: "MyComp:button",
+          componentName: "MyComp",
+          type: "component",
+        }),
+      ]);
+    }
+
+    {
+      const ast = parse("<MyComp:svg:title>Hello</MyComp:svg:title>", {
+        enableAngularSelectorlessSyntax: true,
+      });
+      expect(ast.rootNodes).toEqual([
+        expect.objectContaining({
+          fullName: "MyComp:svg:title",
+          componentName: "MyComp",
+          type: "component",
+        }),
+      ]);
+    }
+  });
 });
 
 it("Edge cases", () => {