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.

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

feat[Angular]: Allow passing explicit selectors #1443

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
480 changes: 239 additions & 241 deletions packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap

Large diffs are not rendered by default.

480 changes: 239 additions & 241 deletions packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap

Large diffs are not rendered by default.

480 changes: 239 additions & 241 deletions packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap

Large diffs are not rendered by default.

960 changes: 478 additions & 482 deletions packages/core/src/__tests__/__snapshots__/angular.test.ts.snap

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions packages/core/src/generators/angular/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ Add the options to `options.angular` inside [MitosisConfig](https://github.com/B
```ts
export interface ToAngularOptions extends BaseTranspilerOptions {
standalone?: boolean;
selector?: string;
preserveImports?: boolean;
preserveFileExtensions?: boolean;
importMapper?: Function;
Expand Down
10 changes: 6 additions & 4 deletions packages/core/src/generators/angular/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -637,11 +637,13 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =

// Preparing built in component metadata parameters
const componentMetadata: Record<string, any> = {
selector: `'${kebabCase(json.name || 'my-component')}, ${json.name}'`,
selector: options.selector
? `'${options.selector}'`
: `'${kebabCase(json.name || 'my-component')}'`,
template: `\`
${indent(dynamicTemplate, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${')}
${indent(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${')}
\``,
${indent(dynamicTemplate, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${')}
${indent(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${')}
\``,
...(styles
? {
styles: `[\`${indent(styles, 8)}\`]`,
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/generators/angular/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export const BUILT_IN_COMPONENTS = new Set(['Show', 'For', 'Fragment', 'Slot']);

export interface ToAngularOptions extends BaseTranspilerOptions {
standalone?: boolean;
selector?: string;
preserveImports?: boolean;
preserveFileExtensions?: boolean;
importMapper?: Function;
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/components/code-rotator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const angularOutput = `
import { Component } from "@angular/core";

@Component({
selector: "my-component, MyComponent",
selector: "my-component",
template: \`
<div>
<input
Expand Down