Generate from angular selectors. ENG-7482

packages/core/package.json

@@ -62,6 +62,7 @@
     "@babel/plugin-transform-react-jsx": "^7.13.12",
     "@babel/preset-typescript": "^7.13.0",
     "@builder.io/sdk": "^2.1.1",
+    "@danielx/hera": "^0.8.16",
     "astring": "^1.8.6",
     "csstype": "^3.0.4",
     "fp-ts": "^2.11.10",

packages/core/src/__tests__/angular.selector.test.ts

@@ -0,0 +1,16 @@
+import { parse } from '../../src/generators/angular/selector-parser.js';
+
+describe('Angular selectors', () => {
+  test('should parse gnarly selectors', () => {
+    expect(parse('ccc.c1#wat[co].c2[counter="cool"]#wat[x=\'y\'].c3')).toEqual({
+      tagName: 'ccc',
+      id: 'wat',
+      classes: ['c1', 'c2', 'c3'],
+      attributes: {
+        co: undefined,
+        counter: '"cool"',
+        x: "'y'",
+      },
+    });
+  });
+});

packages/core/src/generators/angular/index.ts

@@ -62,6 +62,8 @@ import {
   ToAngularOptions,
 } from './types';
 
+import { parse } from './selector-parser';
+
 const { types } = babel;
 
 const mappers: {
@@ -427,10 +429,49 @@ export const blockToAngular = ({
 
     str += `</ng-container>`;
   } else {
-    const elSelector = childComponents.find((impName) => impName === json.name)
-      ? kebabCase(json.name)
-      : json.name;
-    str += `<${elSelector} `;
+    let tagName,
+      id,
+      classes = [],
+      attributes;
+
+    const isComponent = childComponents.find((impName) => impName === json.name);
+
+    if (isComponent) {
+      const selector = json.meta.selector || blockOptions?.selector;
+      if (selector) {
+        try {
+          ({ tagName, id, classes, attributes } = parse(selector));
+        } catch {
+          tagName = kebabCase(json.name);
+        }
+      } else {
+        tagName = kebabCase(json.name);
+      }
+    } else {
+      tagName = json.name;
+    }
+
+    str += `<${tagName} `;
+
+    if (id) {
+      str += `#${id} `;
+    }
+
+    // TODO: merge with existing classes/bindings
+    if (classes.length) {
+      str += `class="${classes.join(' ')}" `;
+    }
+
+    // TODO: Merge with existing properties
+    if (attributes) {
+      Object.entries(attributes).forEach(([key, value]) => {
+        if (value) {
+          str += `${key}=${value} `;
+        } else {
+          str += `${key} `;
+        }
+      });
+    }
 
     for (const key in json.properties) {
       if (key.startsWith('$')) {
@@ -516,7 +557,7 @@ export const blockToAngular = ({
         .join('\n');
     }
 
-    str += `</${elSelector}>`;
+    str += `</${tagName}>`;
   }
   return str;
 };

packages/core/src/generators/angular/selector-parser.hera

@@ -0,0 +1,67 @@
+# Parser for angular selectors
+# https://angular.dev/guide/components/selectors#types-of-selectors
+#
+# to build:
+# ./node_modules/.bin/hera --libPath @danielx/hera/dist/machine.js < src/generators/angular/selector-parser.hera > src/generators/angular/selector-parser.js
+Selector
+  TagName?:tagName Part*:parts ->
+    const firstId = parts.find(([key]) => key === "id");
+    let id;
+    if (firstId) {
+      id = firstId[1];
+    }
+
+    return {
+      tagName,
+      id,
+      classes: parts.filter(([key]) => key === "class").map(([, value]) => value),
+      attributes: Object.fromEntries(parts.filter(([key]) => key !== "id" && key !== "class"))
+    }
+
+TagName
+  Identifier
+
+Part
+  Attribute
+  Class
+  Id
+
+Attribute
+  "[" __ AttributeName __ "=" __ AttributeValue __  "]" ->
+    return [$3, $7]
+  "[" __ AttributeName __ "]" ->
+    return [$3]
+
+AttributeValue
+  $DoubleQuotedString
+  $SingleQuotedString
+
+DoubleQuotedString
+  "\"" /(?:\\.|[^"])*/ "\""
+
+SingleQuotedString
+  "'" /(?:\\.|[^'])*/ "'"
+
+Class
+  "." Identifier ->
+    return ["class", $2]
+
+Id
+  "#" Identifier ->
+    return ["id", $2]
+
+EscapeSequence
+  "'"
+  "\""
+  "\\"
+  /./  ->
+    return "\\" + $0
+
+Identifier
+  /[_a-zA-Z][_a-zA-Z0-9-]*/ -> $0
+
+AttributeName
+  Identifier
+
+__
+  /[ \t]*/