refactor(ngx-components)!: completely switch to standalone (#2184)

* refactor(ngx-components)!: completely switch to standalone

BREAKING CHANGE:
All Angular components are `standalone` now.
SCAM (Single Component Angular Modules) have been removed.
please import the standalone components directly in your `imports` section.

```ts app.component.ts
//app.component.ts
import { DBButton } from '@db-ui/ngx-components';

@component({
	// ...
	imports: [
		// ...,
		DBButton
    ],
	// ...
})
```

closes #237

* fix: use withHashLocation

* fix: add missing NavigationContentDirective import

* fix: add missing NavigationContentDirective import

* fix: remove --ui flag from test

* fix: add standalone for angular mitosis specific config as well

output/angular/README.md

@@ -39,16 +39,18 @@ Import the styles in scss or css. Based on your technology the file names could
 
 ## Usage
 
-```ts app.module.ts
-//app.module.ts
-import { DBButtonModule } from '@db-ui/ngx-components';
-
-@NgModule({
-	...
-		imports: [..., DBButtonModule],
-...
-})
+```ts app.component.ts
+//app.component.ts
+import { DBButton } from '@db-ui/ngx-components';
 
+@Component({
+	// ...
+	imports: [
+		// ...,
+		DBButton
+    ],
+	// ...
+})
 ```
 
 ```html app.component.html

packages/components/_templates/mitosis/new/component/angular-overrides.ejs.t

@@ -1,4 +1,4 @@
 ---
 to: overrides/angular/src/components/<%= name %>/index.ts
 ---
-export { DB<%= h.changeCase.pascal(name) %>, DB<%= h.changeCase.pascal(name) %>Module } from "./<%= name %>";
+export { DB<%= h.changeCase.pascal(name) %> } from "./<%= name %>";

packages/components/_templates/mitosis/new/showcases/angular-showcase-component.ejs.t

@@ -3,11 +3,14 @@ to: "<%= showcases ? `../../showcases/angular-showcase/src/app/components/${name
 ---
 import { Component } from '@angular/core';
 
+import { DefaultComponent } from '../default.component';
 import defaultComponentVariants from '../../../../../shared/<%= name %>.json';
 
 @Component({
 	selector: 'app-<%= name %>',
-	templateUrl: './<%= name %>.component.html'
+	templateUrl: './<%= name %>.component.html',
+	imports: [DefaultComponent],
+	standalone: true
 })
 export class <%= h.changeCase.pascal(name) %>Component {
 	variants = defaultComponentVariants;

packages/components/mitosis-angular.config.js

@@ -4,7 +4,8 @@ module.exports = {
 	dest: '../../output/tmp',
 	options: {
 		angular: {
-			typescript: true
+			typescript: true,
+			standalone: true
 		}
 	}
 };

packages/components/mitosis.config.js

@@ -7,7 +7,8 @@ module.exports = {
 			typescript: true
 		},
 		angular: {
-			typescript: true
+			typescript: true,
+			standalone: true
 		},
 		vue3: {
 			typescript: true

packages/components/overrides/angular/src/components/accordion-item/index.ts

@@ -1 +1 @@
-export { DBAccordionItem, DBAccordionItemModule } from './accordion-item';
+export { DBAccordionItem } from './accordion-item';

packages/components/overrides/angular/src/components/accordion/index.ts

@@ -1 +1 @@
-export { DBAccordion, DBAccordionModule } from './accordion';
+export { DBAccordion } from './accordion';

packages/components/overrides/angular/src/components/alert/index.ts

@@ -1 +1 @@
-export { DBAlert, DBAlertModule } from './alert';
+export { DBAlert } from './alert';

packages/components/overrides/angular/src/components/badge/index.ts

@@ -1 +1 @@
-export { DBBadge, DBBadgeModule } from './badge';
+export { DBBadge } from './badge';

packages/components/overrides/angular/src/components/brand/index.ts

@@ -1 +1 @@
-export { DBBrand, DBBrandModule } from './brand';
+export { DBBrand } from './brand';

packages/components/overrides/angular/src/components/button/index.ts

@@ -1 +1 @@
-export { DBButton, DBButtonModule } from './button';
+export { DBButton } from './button';

packages/components/overrides/angular/src/components/card/index.ts

@@ -1 +1 @@
-export { DBCard, DBCardModule } from './card';
+export { DBCard } from './card';

packages/components/overrides/angular/src/components/checkbox/index.ts

@@ -1 +1 @@
-export { DBCheckbox, DBCheckboxModule } from './checkbox';
+export { DBCheckbox } from './checkbox';

packages/components/overrides/angular/src/components/code-docs/index.ts

@@ -1 +1 @@
-export { DBCodeDocs, DBCodeDocsModule } from './code-docs';
+export { DBCodeDocs } from './code-docs';

packages/components/overrides/angular/src/components/divider/index.ts

@@ -1 +1 @@
-export { DBDivider, DBDividerModule } from './divider';
+export { DBDivider } from './divider';

packages/components/overrides/angular/src/components/drawer/index.ts

@@ -1 +1 @@
-export { DBDrawer, DBDrawerModule } from './drawer';
+export { DBDrawer } from './drawer';

packages/components/overrides/angular/src/components/header/index.ts

@@ -1 +1 @@
-export { DBHeader, DBHeaderModule } from './header';
+export { DBHeader } from './header';

packages/components/overrides/angular/src/components/icon/index.ts

@@ -1 +1 @@
-export { DBIcon, DBIconModule } from './icon';
+export { DBIcon } from './icon';

packages/components/overrides/angular/src/components/infotext/index.ts

@@ -1 +1 @@
-export { DBInfotext, DBInfotextModule } from './infotext';
+export { DBInfotext } from './infotext';

packages/components/overrides/angular/src/components/input/index.ts

@@ -1 +1 @@
-export { DBInput, DBInputModule } from './input';
+export { DBInput } from './input';

packages/components/overrides/angular/src/components/link/index.ts

@@ -1 +1 @@
-export { DBLink, DBLinkModule } from './link';
+export { DBLink } from './link';

packages/components/overrides/angular/src/components/main-navigation/index.ts

@@ -1 +1 @@
-export { DBMainNavigation, DBMainNavigationModule } from './main-navigation';
+export { DBMainNavigation } from './main-navigation';

packages/components/overrides/angular/src/components/navigation-item/index.ts

@@ -1 +1 @@
-export { DBNavigationItem, DBNavigationItemModule } from './navigation-item';
+export { DBNavigationItem } from './navigation-item';

packages/components/overrides/angular/src/components/page/index.ts

@@ -1 +1 @@
-export { DBPage, DBPageModule } from './page';
+export { DBPage } from './page';

packages/components/overrides/angular/src/components/popover/index.ts

@@ -1 +1 @@
-export { DBPopover, DBPopoverModule } from './popover';
+export { DBPopover } from './popover';

packages/components/overrides/angular/src/components/radio/index.ts

@@ -1 +1 @@
-export { DBRadio, DBRadioModule } from './radio';
+export { DBRadio } from './radio';

packages/components/overrides/angular/src/components/section/index.ts

@@ -1 +1 @@
-export { DBSection, DBSectionModule } from './section';
+export { DBSection } from './section';

packages/components/overrides/angular/src/components/select/index.ts

@@ -1 +1 @@
-export { DBSelect, DBSelectModule } from './select';
+export { DBSelect } from './select';

packages/components/overrides/angular/src/components/sub-navigation/index.ts

@@ -1 +1 @@
-export { DBSubNavigation, DBSubNavigationModule } from './sub-navigation';
+export { DBSubNavigation } from './sub-navigation';

packages/components/overrides/angular/src/components/tab-bar/index.ts

@@ -1 +1 @@
-export { DBTabBar, DBTabBarModule } from './tab-bar';
+export { DBTabBar } from './tab-bar';

packages/components/overrides/angular/src/components/tab/index.ts

@@ -1 +1 @@
-export { DBTab, DBTabModule } from './tab';
+export { DBTab } from './tab';

packages/components/overrides/angular/src/components/tag/index.ts

@@ -1 +1 @@
-export { DBTag, DBTagModule } from './tag';
+export { DBTag } from './tag';

packages/components/overrides/angular/src/components/textarea/index.ts

@@ -1 +1 @@
-export { DBTextarea, DBTextareaModule } from './textarea';
+export { DBTextarea } from './textarea';

packages/components/overrides/angular/src/components/tooltip/index.ts

@@ -1 +1 @@
-export { DBTooltip, DBTooltipModule } from './tooltip';
+export { DBTooltip } from './tooltip';

packages/components/scripts/post-build/angular.js

@@ -13,14 +13,6 @@ const changeFile = (component, input) => {
 				!line.includes(`[key]=`)
 		)
 		.map((line) => {
-			if (
-				line.includes(`import { DB`) &&
-				line.includes(`../`) &&
-				!line.includes(`Module`)
-			) {
-				return line.replace(` } from "../`, `Module } from "../`);
-			}
-
 			if (line.includes(': ElementRef')) {
 				return line.replace(': ElementRef', ': ElementRef | undefined');
 			}
@@ -59,7 +51,7 @@ const setControlValueAccessorReplacements = (
 	replacements.push({
 		from: '} from "@angular/core";',
 		to:
-			`, Renderer2 } from "@angular/core";\n` +
+			`Renderer2 } from "@angular/core";\n` +
 			`import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n`
 	});
 
@@ -148,10 +140,10 @@ const setDirectiveReplacements = (
 		});
 
 		replacements.push({
-			from: 'import { NgModule } from "@angular/core";',
+			from: '@Component({',
 			to:
-				'import { NgModule } from "@angular/core";\n' +
-				`import { ${directive.name}Directive } from './${directive.name}.directive';\n`
+				`import { ${directive.name}Directive } from './${directive.name}.directive';\n\n` +
+				'@Component({'
 		});
 
 		FS.writeFileSync(
@@ -160,16 +152,17 @@ const setDirectiveReplacements = (
 				"import { Directive } from '@angular/core';" +
 				`
 @Directive({
-\tselector: '[db${directive.name}]'
+\tselector: '[db${directive.name}]',
+\tstandalone: true
 })
 export class ${directive.name}Directive {}
 `
 		);
 	}
 
 	replacements.push({
-		from: 'import { NgModule } from "@angular/core";',
-		to: "import { NgModule, ContentChild, TemplateRef } from '@angular/core';"
+		from: '} from "@angular/core";',
+		to: 'ContentChild, TemplateRef } from  "@angular/core";'
 	});
 };
 

packages/components/scripts/post-build/components.js

@@ -157,12 +157,17 @@ const getComponents = () => [
 		config: {
 			angular: {
 				directives: [
-					{ name: 'ActionBar', ngContentName: 'action-bar' },
+					{
+						name: 'ActionBar',
+						ngContentName: 'action-bar'
+					},
 					{
 						name: 'MetaNavigation',
 						ngContentName: 'meta-navigation'
 					},
-					{ name: 'Navigation' }
+					{
+						name: 'Navigation'
+					}
 				]
 			}
 		},

packages/components/src/components/accordion-item/docs/Angular.md

@@ -6,12 +6,12 @@ For general installation and configuration look at the [ngx-components](https://
 
 ```ts app.component.ts
 // app.component.ts
-import { DBAccordionItemModule } from '@db-ui/ngx-components';
+import { DBAccordionItem } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBAccordionItemModule],
+  imports: [..., DBAccordionItem],
   // ...
 })
 ```

packages/components/src/components/accordion/docs/Angular.md

@@ -6,12 +6,12 @@ For general installation and configuration look at the [ngx-components](https://
 
 ```ts app.component.ts
 // app.component.ts
-import { DBAccordionModule } from '@db-ui/ngx-components';
+import { DBAccordion } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBAccordionModule],
+  imports: [..., DBAccordion],
   // ...
 })
 ```

packages/components/src/components/alert/docs/Angular.md

@@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ```ts app.component.ts
 // app.component.ts
-import { DBAlertModule } from '@db-ui/ngx-components';
+import { DBAlert } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBAlertModule],
+  imports: [..., DBAlert],
   // ...
 })
 ```

packages/components/src/components/badge/docs/Angular.md

@@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ```ts app.component.ts
 // app.component.ts
-import { DBBadgeModule } from '@db-ui/ngx-components';
+import { DBBadge } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBBadgeModule],
+  imports: [..., DBBadge],
   // ...
 })
 ```

packages/components/src/components/brand/docs/Angular.md

@@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ```ts app.component.ts
 // app.component.ts
-import { DBBrandModule } from '@db-ui/ngx-components';
+import { DBBrand } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBBrandModule],
+  imports: [..., DBBrand],
   // ...
 })
 ```

packages/components/src/components/button/docs/Angular.md

@@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ```ts app.component.ts
 // app.component.ts
-import { DBButtonModule } from '@db-ui/ngx-components';
+import { DBButton } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBButtonModule],
+  imports: [..., DBButton],
   // ...
 })
 ```

packages/components/src/components/card/docs/Angular.md

@@ -4,14 +4,17 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ### Load component
 
-```ts app.module.ts
-//app.module.ts
-import { DBCardModule } from '@db-ui/ngx-components';
+```ts app.component.ts
+//app.component.ts
+import { DBCard } from '@db-ui/ngx-components';
 
-@NgModule({
-  ...
-  imports: [..., DBCardModule],
-  ...
+@Component({
+	// ...
+	imports: [
+		// ...,
+		DBCard
+    ],
+	// ...
 })
 ```