perf(*): support standalone

ng-alain · Jan 2, 2024 · bb93ec1 · bb93ec1
1 parent e17f5e7
commit bb93ec1
Show file tree

Hide file tree

Showing 27 changed files with 52 additions and 47 deletions.
diff --git a/packages/abc/count-down/count-down.component.ts b/packages/abc/count-down/count-down.component.ts
@@ -19,7 +19,9 @@ import { CountdownComponent, CountdownConfig, CountdownEvent } from 'ngx-countdo
   }`,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [CountdownComponent]
 })
 export class CountDownComponent {
   @ViewChild('cd', { static: false }) readonly instance!: CountdownComponent;

diff --git a/packages/abc/count-down/count-down.module.ts b/packages/abc/count-down/count-down.module.ts
@@ -8,8 +8,7 @@ import { CountDownComponent } from './count-down.component';
 const COMPONENTS = [CountDownComponent];
 
 @NgModule({
-  imports: [CommonModule, CountdownModule],
-  declarations: COMPONENTS,
+  imports: [CommonModule, CountdownModule, ...COMPONENTS],
   exports: COMPONENTS
 })
 export class CountDownModule {}
diff --git a/packages/abc/count-down/demo/accuracy.md b/packages/abc/count-down/demo/accuracy.md
@@ -18,13 +18,13 @@ import { Component } from '@angular/core';
 
 import { CountdownConfig } from 'ngx-countdown';
 
-import { CountDownModule } from '@delon/abc/count-down';
+import { CountDownComponent } from '@delon/abc/count-down';
 
 @Component({
   selector: 'app-demo',
   template: ` <count-down [config]="config" /> `,
   standalone: true,
-  imports: [CountDownModule]
+  imports: [CountDownComponent]
 })
 export class DemoComponent {
   config: CountdownConfig = {

diff --git a/packages/abc/count-down/demo/simple.md b/packages/abc/count-down/demo/simple.md
@@ -18,7 +18,7 @@ import { Component, inject } from '@angular/core';
 
 import { CountdownEvent } from 'ngx-countdown';
 
-import { CountDownModule } from '@delon/abc/count-down';
+import { CountDownComponent } from '@delon/abc/count-down';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
@@ -32,7 +32,7 @@ import { NzMessageService } from 'ng-zorro-antd/message';
     <button nz-button (click)="cd.instance.resume()">Resume</button>
   `,
   standalone: true,
-  imports: [CountDownModule, NzButtonModule]
+  imports: [CountDownComponent, NzButtonModule]
 })
 export class DemoComponent {
   private readonly msg = inject(NzMessageService);

diff --git a/packages/abc/date-picker/date-picker.module.ts b/packages/abc/date-picker/date-picker.module.ts
@@ -10,8 +10,7 @@ import { RangePickerDirective } from './range.directive';
 const COMPONENTS = [RangePickerDirective, RangePickerShortcutTplComponent];
 
 @NgModule({
-  imports: [CommonModule, FormsModule, NzDatePickerModule],
-  declarations: COMPONENTS,
+  imports: [CommonModule, FormsModule, NzDatePickerModule, ...COMPONENTS],
   exports: COMPONENTS
 })
 export class DatePickerModule {}
diff --git a/packages/abc/date-picker/demo/basic.md b/packages/abc/date-picker/demo/basic.md
@@ -18,7 +18,7 @@ import { JsonPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { DatePickerModule } from '@delon/abc/date-picker';
+import { RangePickerDirective } from '@delon/abc/date-picker';
 import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 
 @Component({
@@ -28,7 +28,7 @@ import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
     <nz-range-picker [(ngModel)]="i.start" extend [(ngModelEnd)]="i.end" />
   `,
   standalone: true,
-  imports: [JsonPipe, FormsModule, NzDatePickerModule, DatePickerModule]
+  imports: [JsonPipe, FormsModule, NzDatePickerModule, RangePickerDirective]
 })
 export class DemoComponent {
   i: { start?: Date; end?: Date } = {};

diff --git a/packages/abc/date-picker/demo/shortcut.md b/packages/abc/date-picker/demo/shortcut.md
@@ -18,7 +18,7 @@ import { JsonPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { DatePickerModule } from '@delon/abc/date-picker';
+import { RangePickerDirective } from '@delon/abc/date-picker';
 import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 
 @Component({
@@ -28,7 +28,7 @@ import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
     <nz-range-picker [(ngModel)]="i.start" extend [(ngModelEnd)]="i.end" shortcut />
   `,
   standalone: true,
-  imports: [JsonPipe, FormsModule, NzDatePickerModule, DatePickerModule]
+  imports: [JsonPipe, FormsModule, NzDatePickerModule, RangePickerDirective]
 })
 export class DemoComponent {
   i: { start?: Date; end?: Date } = {};

diff --git a/packages/abc/date-picker/range-shortcut.component.ts b/packages/abc/date-picker/range-shortcut.component.ts
@@ -7,14 +7,15 @@ import { AlainDateRangePickerShortcutItem } from '@delon/util/config';
   template: `
     <ng-template #tpl>
       @for (i of list; track $index) {
-        <a (click)="click(i)" [innerHTML]="i._text" [ngClass]="{ 'ml-sm': !$first }"></a>
+        <a (click)="click(i)" [innerHTML]="i._text" [class.ml-sm]="!$first"></a>
       }
     </ng-template>
-  `
+  `,
+  standalone: true
 })
 export class RangePickerShortcutTplComponent {
   @ViewChild('tpl', { static: true })
-  tpl!: TemplateRef<void>;
+  readonly tpl!: TemplateRef<void>;
 
   list: AlainDateRangePickerShortcutItem[] = [];
 

diff --git a/packages/abc/date-picker/range.directive.ts b/packages/abc/date-picker/range.directive.ts
@@ -24,7 +24,8 @@ import { RangePickerShortcutTplComponent } from './range-shortcut.component';
 
 @Directive({
   selector: 'nz-range-picker[extend]',
-  exportAs: 'extendRangePicker'
+  exportAs: 'extendRangePicker',
+  standalone: true
 })
 export class RangePickerDirective implements OnDestroy, AfterViewInit {
   static ngAcceptInputType_shortcut: AlainDateRangePickerShortcut | string | null;

diff --git a/packages/abc/down-file/demo/simple.md b/packages/abc/down-file/demo/simple.md
@@ -16,7 +16,7 @@ Download a file.
 ```ts
 import { Component } from '@angular/core';
 
-import { DownFileModule } from '@delon/abc/down-file';
+import { DownFileDirective } from '@delon/abc/down-file';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 
 @Component({
@@ -29,7 +29,7 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
     }
   `,
   standalone: true,
-  imports: [DownFileModule, NzButtonModule]
+  imports: [DownFileDirective, NzButtonModule]
 })
 export class DemoComponent {
   fileTypes = ['.xlsx', '.docx', '.pptx', '.pdf'];

diff --git a/packages/abc/down-file/down-file.directive.ts b/packages/abc/down-file/down-file.directive.ts
@@ -12,7 +12,8 @@ import type { NzSafeAny } from 'ng-zorro-antd/core/types';
   exportAs: 'downFile',
   host: {
     '(click)': '_click($event)'
-  }
+  },
+  standalone: true
 })
 export class DownFileDirective {
   private isFileSaverSupported = true;

diff --git a/packages/abc/down-file/down-file.module.ts b/packages/abc/down-file/down-file.module.ts
@@ -8,8 +8,7 @@ import { DownFileDirective } from './down-file.directive';
 const DIRECTIVES = [DownFileDirective];
 
 @NgModule({
-  imports: [CommonModule, AlainThemeModule],
-  declarations: [...DIRECTIVES],
-  exports: [...DIRECTIVES]
+  imports: [CommonModule, AlainThemeModule, ...DIRECTIVES],
+  exports: DIRECTIVES
 })
 export class DownFileModule {}
diff --git a/packages/abc/full-content/full-content-toggle.directive.ts b/packages/abc/full-content/full-content-toggle.directive.ts
@@ -7,7 +7,8 @@ import { FullContentComponent } from './full-content.component';
   exportAs: 'fullToggle',
   host: {
     '(click)': '_click()'
-  }
+  },
+  standalone: true
 })
 export class FullContentToggleDirective {
   constructor(private parent: FullContentComponent) {}

diff --git a/packages/abc/full-content/full-content.component.ts b/packages/abc/full-content/full-content.component.ts
@@ -39,7 +39,8 @@ const hideTitleCls = `full-content__hidden-title`;
   },
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true
 })
 export class FullContentComponent implements AfterViewInit, OnInit, OnChanges, OnDestroy {
   static ngAcceptInputType_fullscreen: BooleanInput;

diff --git a/packages/abc/full-content/full-content.module.ts b/packages/abc/full-content/full-content.module.ts
@@ -7,8 +7,7 @@ import { FullContentComponent } from './full-content.component';
 const COMPONENTS = [FullContentComponent, FullContentToggleDirective];
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: COMPONENTS,
+  imports: [CommonModule, ...COMPONENTS],
   exports: COMPONENTS
 })
 export class FullContentModule {}
diff --git a/packages/abc/global-footer/demo/basic.md b/packages/abc/global-footer/demo/basic.md
@@ -9,7 +9,7 @@ browser: 400
 ```ts
 import { Component } from '@angular/core';
 
-import { GlobalFooterLink, GlobalFooterModule } from '@delon/abc/global-footer';
+import { GlobalFooterComponent, GlobalFooterLink } from '@delon/abc/global-footer';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 
 @Component({
@@ -30,7 +30,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
     `
   ],
   standalone: true,
-  imports: [GlobalFooterModule, NzIconModule]
+  imports: [GlobalFooterComponent, NzIconModule]
 })
 export class DemoComponent {
   links: GlobalFooterLink[] = [

diff --git a/packages/abc/global-footer/global-footer-item.component.ts b/packages/abc/global-footer/global-footer-item.component.ts
@@ -8,7 +8,8 @@ import { BooleanInput, InputBoolean } from '@delon/util/decorator';
   template: ` <ng-template #host><ng-content /></ng-template> `,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true
 })
 export class GlobalFooterItemComponent {
   static ngAcceptInputType_blankTarget: BooleanInput;

diff --git a/packages/abc/global-footer/global-footer.component.ts b/packages/abc/global-footer/global-footer.component.ts
@@ -31,7 +31,8 @@ import { GlobalFooterLink } from './global-footer.types';
   },
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true
 })
 export class GlobalFooterComponent implements OnInit {
   private dir$ = this.directionality.change?.pipe(takeUntilDestroyed());
@@ -48,7 +49,7 @@ export class GlobalFooterComponent implements OnInit {
     return this._links;
   }
 
-  @ContentChildren(GlobalFooterItemComponent) items!: QueryList<GlobalFooterItemComponent>;
+  @ContentChildren(GlobalFooterItemComponent) readonly items!: QueryList<GlobalFooterItemComponent>;
 
   constructor(
     private router: Router,

diff --git a/packages/abc/global-footer/global-footer.module.ts b/packages/abc/global-footer/global-footer.module.ts
@@ -8,8 +8,7 @@ import { GlobalFooterComponent } from './global-footer.component';
 const COMPONENTS = [GlobalFooterComponent, GlobalFooterItemComponent];
 
 @NgModule({
-  imports: [CommonModule, RouterModule],
-  declarations: COMPONENTS,
+  imports: [CommonModule, RouterModule, ...COMPONENTS],
   exports: COMPONENTS
 })
 export class GlobalFooterModule {}
diff --git a/packages/abc/media/demo/custom.md b/packages/abc/media/demo/custom.md
@@ -18,7 +18,7 @@ import { Component } from '@angular/core';
 
 import type Plyr from 'plyr';
 
-import { MediaModule } from '@delon/abc/media';
+import { MediaComponent } from '@delon/abc/media';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 
 @Component({
@@ -31,7 +31,7 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
     <div media #media [source]="source" [options]="options"></div>
   `,
   standalone: true,
-  imports: [NzButtonModule, MediaModule]
+  imports: [NzButtonModule, MediaComponent]
 })
 export class DemoComponent {
   source: Plyr.SourceInfo = {

diff --git a/packages/abc/media/demo/mp3.md b/packages/abc/media/demo/mp3.md
@@ -16,7 +16,7 @@ Specify `type="audio"` to play MP3.
 ```ts
 import { Component } from '@angular/core';
 
-import { MediaModule } from '@delon/abc/media';
+import { MediaComponent } from '@delon/abc/media';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 
 @Component({
@@ -30,7 +30,7 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
     <div media #media type="audio" [source]="mp3"></div>
   `,
   standalone: true,
-  imports: [NzButtonModule, MediaModule]
+  imports: [NzButtonModule, MediaComponent]
 })
 export class DemoComponent {
   mp3 = `https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3`;

diff --git a/packages/abc/media/demo/mp4.md b/packages/abc/media/demo/mp4.md
@@ -16,7 +16,7 @@ Simplest of usage.
 ```ts
 import { Component } from '@angular/core';
 
-import { MediaModule } from '@delon/abc/media';
+import { MediaComponent } from '@delon/abc/media';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 
 @Component({
@@ -30,7 +30,7 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
     <div media #media [source]="mp4"></div>
   `,
   standalone: true,
-  imports: [NzButtonModule, MediaModule]
+  imports: [NzButtonModule, MediaComponent]
 })
 export class DemoComponent {
   mp4 = `https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4`;

diff --git a/packages/abc/media/media.component.ts b/packages/abc/media/media.component.ts
@@ -37,7 +37,8 @@ export type MediaType = 'html5' | 'youtube' | 'video' | 'audio';
   },
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true
 })
 export class MediaComponent implements OnChanges, AfterViewInit, OnDestroy {
   static ngAcceptInputType_delay: NumberInput;

diff --git a/packages/abc/media/media.module.ts b/packages/abc/media/media.module.ts
@@ -6,8 +6,7 @@ import { MediaComponent } from './media.component';
 const COMPONENTS = [MediaComponent];
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: COMPONENTS,
+  imports: [CommonModule, ...COMPONENTS],
   exports: COMPONENTS
 })
 export class MediaModule {}
diff --git a/packages/abc/sg/sg-container.component.ts b/packages/abc/sg/sg-container.component.ts
@@ -16,7 +16,8 @@ import { InputNumber, NumberInput } from '@delon/util/decorator';
   },
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true
 })
 export class SGContainerComponent {
   static ngAcceptInputType_gutter: NumberInput;

diff --git a/packages/abc/sg/sg.component.ts b/packages/abc/sg/sg.component.ts
@@ -28,7 +28,8 @@ const prefixCls = `sg`;
   },
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true
 })
 export class SGComponent implements OnChanges, AfterViewInit {
   static ngAcceptInputType_col: NumberInput;

diff --git a/packages/abc/sg/sg.module.ts b/packages/abc/sg/sg.module.ts
@@ -7,8 +7,7 @@ import { SGComponent } from './sg.component';
 const COMPONENTS = [SGContainerComponent, SGComponent];
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: COMPONENTS,
+  imports: [CommonModule, ...COMPONENTS],
   exports: COMPONENTS
 })
 export class SGModule {}