Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Generate from angular selectors. ENG-7482 #1653

Merged
merged 7 commits into from
Dec 12, 2024
Merged

Generate from angular selectors. ENG-7482 #1653

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6888b88
Generate from angular selectors. ENG-7482
STRd6 Dec 10, 2024
1ce09e3
fmt
STRd6 Dec 10, 2024
a54c48d
Merge branch 'main' into generate-from-angular-selectors
STRd6 Dec 10, 2024
9ada8a4
using angular selector parser
STRd6 Dec 11, 2024
d7dee37
stringify values
STRd6 Dec 11, 2024
bd3c03a
expand tests
STRd6 Dec 12, 2024
2314e23
changeset
STRd6 Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions packages/core/src/__tests__/angular.selector.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { parse } from '../generators/angular/parse-selector';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh one more thing I just noticed: Do you intend for this to be a version bump in Mitosis? If so, you'll need to generate a new changeset.


describe('Angular selectors', () => {
test('should parse gnarly selectors', () => {
expect(parse('ccc.c1#wat[co].c2[counter="cool"]#wat[x=\'y\'].c3')).toEqual({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are support for the :not pseudo-class and multiple selectors (e.g. foo, [bar]) in scope? Both are supported by Angular: https://angular.dev/guide/components/selectors#types-of-selectors

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 I should add parsing for those. They don't affect the code generation but will need to be accounted for in the parsing.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok great! Only other thing I can think of here is to add a test for those cases for parsing.

element: 'ccc',
classNames: ['c1', 'c2', 'c3'],
attributes: {
co: '',
counter: 'cool',
id: 'wat',
x: 'y',
},
});
});
});
46 changes: 41 additions & 5 deletions packages/core/src/generators/angular/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ import {
ToAngularOptions,
} from './types';

import { parse } from './parse-selector';

const { types } = babel;

const mappers: {
Expand Down Expand Up @@ -427,10 +429,44 @@ export const blockToAngular = ({

str += `</ng-container>`;
} else {
const elSelector = childComponents.find((impName) => impName === json.name)
? kebabCase(json.name)
: json.name;
str += `<${elSelector} `;
let element,
classNames: string[] = [],
attributes;

const isComponent = childComponents.find((impName) => impName === json.name);

if (isComponent) {
const selector = json.meta.selector || blockOptions?.selector;
if (selector) {
try {
({ element, classNames, attributes } = parse(`${selector}`));
} catch {
element = kebabCase(json.name);
}
} else {
element = kebabCase(json.name);
}
} else {
element = json.name;
}

str += `<${element} `;

// TODO: merge with existing classes/bindings
if (classNames.length) {
str += `class="${classNames.join(' ')}" `;
}

// TODO: Merge with existing properties
if (attributes) {
Object.entries(attributes).forEach(([key, value]) => {
if (value) {
str += `${key}=${JSON.stringify(value)} `;
} else {
str += `${key} `;
}
});
}

for (const key in json.properties) {
if (key.startsWith('$')) {
Expand Down Expand Up @@ -516,7 +552,7 @@ export const blockToAngular = ({
.join('\n');
}

str += `</${elSelector}>`;
str += `</${element}>`;
}
return str;
};
Expand Down
17 changes: 17 additions & 0 deletions packages/core/src/generators/angular/parse-selector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
};
}
Loading