using angular selector parser

packages/core/package.json

@@ -62,7 +62,6 @@
     "@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

@@ -1,15 +1,15 @@
-import { parse } from '../../src/generators/angular/selector-parser.js';
+import { parse } from '../generators/angular/parse-selector';
 
 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'],
+      element: 'ccc',
+      classNames: ['c1', 'c2', 'c3'],
       attributes: {
-        co: undefined,
-        counter: '"cool"',
-        x: "'y'",
+        co: '',
+        counter: 'cool',
+        id: 'wat',
+        x: 'y',
       },
     });
   });

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

@@ -62,7 +62,7 @@ import {
   ToAngularOptions,
 } from './types';
 
-import { parse } from './selector-parser';
+import { parse } from './parse-selector';
 
 const { types } = babel;
 
@@ -429,9 +429,8 @@ export const blockToAngular = ({
 
     str += `</ng-container>`;
   } else {
-    let tagName,
-      id,
-      classes = [],
+    let element,
+      classNames: string[] = [],
       attributes;
 
     const isComponent = childComponents.find((impName) => impName === json.name);
@@ -440,26 +439,22 @@ export const blockToAngular = ({
       const selector = json.meta.selector || blockOptions?.selector;
       if (selector) {
         try {
-          ({ tagName, id, classes, attributes } = parse(selector));
+          ({ element, classNames, attributes } = parse(`${selector}`));
         } catch {
-          tagName = kebabCase(json.name);
+          element = kebabCase(json.name);
         }
       } else {
-        tagName = kebabCase(json.name);
+        element = kebabCase(json.name);
       }
     } else {
-      tagName = json.name;
+      element = json.name;
     }
 
-    str += `<${tagName} `;
-
-    if (id) {
-      str += `#${id} `;
-    }
+    str += `<${element} `;
 
     // TODO: merge with existing classes/bindings
-    if (classes.length) {
-      str += `class="${classes.join(' ')}" `;
+    if (classNames.length) {
+      str += `class="${classNames.join(' ')}" `;
     }
 
     // TODO: Merge with existing properties
@@ -557,7 +552,7 @@ export const blockToAngular = ({
         .join('\n');
     }
 
-    str += `</${tagName}>`;
+    str += `</${element}>`;
   }
   return str;
 };

packages/core/src/generators/angular/parse-selector.ts

@@ -0,0 +1,17 @@
+import { CssSelector } from '@angular/compiler';
+
+export function parse(selector: string) {
+  const { element, classNames, attrs } = CssSelector.parse(selector)[0];
+  const attributes = attrs.reduce((acc, attr, i) => {
+    if (i % 2 === 0) {
+      acc[attr] = attrs[i + 1];
+    }
+    return acc;
+  }, {} as Record<string, string>);
+
+  return {
+    element,
+    classNames,
+    attributes,
+  };
+}