feat: update app and lib to standalone

BePo65 · Mar 5, 2024 · 917fd2a · 917fd2a
1 parent 91f95c4
commit 917fd2a
Show file tree

Hide file tree

Showing 23 changed files with 535 additions and 491 deletions.
diff --git a/backlog.md b/backlog.md
@@ -1,4 +1,2 @@
-* change library to standalone
-* publish v17
 * add prettier
 * add ssr
diff --git a/projects/mat-datatable-demo/src/app/app.component.spec.ts b/projects/mat-datatable-demo/src/app/app.component.spec.ts
@@ -11,24 +11,22 @@ import { NgxRerenderModule } from 'ngx-rerender';
 
 import { AppComponent } from './app.component';
 
-import { MatDatatableModule } from 'mat-datatable';
+import { MatDatatableComponent } from 'mat-datatable';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
       imports: [
+        AppComponent,
         BrowserAnimationsModule,
         HttpClientModule,
         MatButtonModule,
         MatChipsModule,
+        MatDatatableComponent,
         MatFormFieldModule,
         MatIconModule,
         MatSelectModule,
         MatSlideToggleModule,
-        MatDatatableModule,
         NgxRerenderModule
       ]
     }).compileComponents();

diff --git a/projects/mat-datatable-demo/src/app/app.component.ts b/projects/mat-datatable-demo/src/app/app.component.ts
@@ -1,8 +1,15 @@
 import { trigger, transition, style, animate } from '@angular/animations';
+import { NgIf, NgFor, AsyncPipe } from '@angular/common';
 import { AfterViewInit, Component, OnDestroy, ViewChild } from '@angular/core';
-import { MatIconRegistry } from '@angular/material/icon';
-import { MatSlideToggleChange } from '@angular/material/slide-toggle';
+import { MatButton, MatMiniFabButton } from '@angular/material/button';
+import { MatChipListbox, MatChip, MatChipRemove } from '@angular/material/chips';
+import { MatOption } from '@angular/material/core';
+import { MatLabel, MatFormField } from '@angular/material/form-field';
+import { MatIconRegistry, MatIcon } from '@angular/material/icon';
+import { MatSelect } from '@angular/material/select';
+import { MatSlideToggleChange, MatSlideToggle } from '@angular/material/slide-toggle';
 import { DomSanitizer } from '@angular/platform-browser';
+import { NgxRerenderModule } from 'ngx-rerender';
 import { BehaviorSubject, delay, Subject, takeUntil } from 'rxjs';
 
 import { ARROW_UPWARD, ARROW_DOWNWARD } from './app.svg';
@@ -18,20 +25,39 @@ import {
 } from 'mat-datatable';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
-  animations: [
-    trigger('slideInBottom', [
-      transition(':enter', [
-        style({ transform: 'translateY(100%)' }),
-        animate('500ms ease-out', style({ transform: 'translateY(0)' }))
-      ]),
-      transition(':leave', [
-        animate('500ms ease-out', style({ transform: 'translateY(100%)' }))
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    animations: [
+      trigger('slideInBottom', [
+        transition(':enter', [
+          style({ transform: 'translateY(100%)' }),
+          animate('500ms ease-out', style({ transform: 'translateY(0)' }))
+        ]),
+        transition(':leave', [
+          animate('500ms ease-out', style({ transform: 'translateY(100%)' }))
+        ])
       ])
-    ])
-  ]
+    ],
+    standalone: true,
+    imports: [
+      AsyncPipe,
+      MatButton,
+      MatChip,
+      MatChipListbox,
+      MatChipRemove,
+      MatDatatableComponent,
+      MatFormField,
+      MatIcon,
+      MatLabel,
+      MatMiniFabButton,
+      MatOption,
+      MatSelect,
+      MatSlideToggle,
+      NgIf,
+      NgFor,
+      NgxRerenderModule
+    ]
 })
 export class AppComponent implements AfterViewInit, OnDestroy {
   @ViewChild('datatable') table!: MatDatatableComponent<DemoTableItem>;

diff --git a/projects/mat-datatable-demo/src/app/app.module.ts b/projects/mat-datatable-demo/src/app/app.module.ts
diff --git a/projects/mat-datatable-demo/src/main.ts b/projects/mat-datatable-demo/src/main.ts
@@ -1,6 +1,31 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { withInterceptorsFromDi, provideHttpClient } from '@angular/common/http';
+import { importProvidersFrom } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { NgxRerenderModule } from 'ngx-rerender';
 
-import { AppModule } from './app/app.module';
+import { AppComponent } from './app/app.component';
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+  providers: [
+    importProvidersFrom(
+      BrowserModule,
+      MatButtonModule,
+      MatChipsModule,
+      MatFormFieldModule,
+      MatIconModule,
+      MatSelectModule,
+      MatSlideToggleModule,
+      NgxRerenderModule
+    ),
+    provideAnimations(),
+    provideHttpClient(withInterceptorsFromDi())
+  ]
+})
   .catch(err => console.error(err));
diff --git a/projects/mat-datatable-lib/src/directives/datatable-header-align.directive.spec.ts b/projects/mat-datatable-lib/src/directives/datatable-header-align.directive.spec.ts
@@ -10,13 +10,13 @@ describe('MatDatatableHeaderAlignDirective', () => {
 
   beforeEach(() => {
     fixture = TestBed.configureTestingModule({
-      declarations: [
-        MatDatatableHeaderAlignDirective,
+      imports: [
         TestComponent
       ]
-    })
-    .createComponent(TestComponent);
-    fixture.detectChanges(); // initial binding
+    }).createComponent(TestComponent);
+
+    // initial binding
+    fixture.detectChanges();
 
     // all elements with an attached MatDatatableHeaderAlignDirective
     directiveElements = fixture.debugElement.queryAll(By.directive(MatDatatableHeaderAlignDirective));
@@ -97,6 +97,10 @@ describe('MatDatatableHeaderAlignDirective', () => {
     </tbody>
   </table>
 </div>
-  `
+  `,
+  standalone: true,
+  imports: [
+    MatDatatableHeaderAlignDirective
+  ]
 })
 class TestComponent { }
diff --git a/projects/mat-datatable-lib/src/directives/datatable-header-align.directive.ts b/projects/mat-datatable-lib/src/directives/datatable-header-align.directive.ts
@@ -3,7 +3,8 @@ import { AfterViewInit, Directive, ElementRef, Input, Renderer2 } from '@angular
 import { ColumnAlignmentType } from '../interfaces/datatable-column-definition.interface';
 
 @Directive({
-  selector: '[matHeaderAlignment]'
+    selector: '[matHeaderAlignment]',
+    standalone: true
 })
 export class MatDatatableHeaderAlignDirective implements AfterViewInit {
   @Input() matHeaderAlignment: ColumnAlignmentType | undefined;

diff --git a/projects/mat-datatable-lib/src/directives/datatable-resizable.directive.spec.ts b/projects/mat-datatable-lib/src/directives/datatable-resizable.directive.spec.ts
@@ -10,11 +10,9 @@ describe('MatResizableDirective', () => {
 
   beforeEach(() => {
     fixture = TestBed.configureTestingModule({
-      declarations: [
-        MatDatatableResizableDirective,
-        TestComponent
-      ]
-    })
+    imports: [MatDatatableResizableDirective,
+        TestComponent]
+})
     .createComponent(TestComponent);
     fixture.detectChanges(); // initial binding
 
@@ -66,23 +64,27 @@ describe('MatResizableDirective', () => {
 
 @Component({
   template: `
-    <tr>
-      <th id="resizableDefault" class="mat-sort-header">
-        <div class="mat-sort-header-container">default header</div>
-      </th>
-      <th id="resizableTrue" class="mat-sort-header" [matResizable]="true">
-        <div class="mat-sort-header-container">resizable header</div>
-      </th>
-      <th id="resizableFalse" class="mat-sort-header" [matResizable]="false">
-        <div class="mat-sort-header-container">not resizable header</div>
-      </th>
-      <th id="resizableDefault" class="mat-sort-header" [matResizable]>
-        <div class="mat-sort-header-container">not resizable header</div>
-      </th>
-      <th id="resizableDefault" class="mat-sort-header" matResizable>
-        <div class="mat-sort-header-container">not resizable header</div>
-      </th>
-    </tr>
-  `
+<tr>
+  <th id="resizableDefault" class="mat-sort-header">
+    <div class="mat-sort-header-container">default header</div>
+  </th>
+  <th id="resizableTrue" class="mat-sort-header" [matResizable]="true">
+    <div class="mat-sort-header-container">resizable header</div>
+  </th>
+  <th id="resizableFalse" class="mat-sort-header" [matResizable]="false">
+    <div class="mat-sort-header-container">not resizable header</div>
+  </th>
+  <th id="resizableDefault" class="mat-sort-header" [matResizable]>
+    <div class="mat-sort-header-container">not resizable header</div>
+  </th>
+  <th id="resizableDefault" class="mat-sort-header" matResizable>
+    <div class="mat-sort-header-container">not resizable header</div>
+  </th>
+</tr>
+  `,
+    standalone: true,
+    imports: [
+      MatDatatableResizableDirective
+    ]
 })
 class TestComponent { }
diff --git a/projects/mat-datatable-lib/src/directives/datatable-resizable.directive.ts b/projects/mat-datatable-lib/src/directives/datatable-resizable.directive.ts
@@ -10,7 +10,8 @@ import {
 } from '@angular/core';
 
 @Directive({
-  selector: '[matResizable]'
+    selector: '[matResizable]',
+    standalone: true
 })
 export class MatDatatableResizableDirective implements OnInit, OnDestroy {
   @Input()

diff --git a/...ts/mat-datatable-lib/src/directives/datatable-sort/mat-multi-sort-badge.directive.spec.ts b/...ts/mat-datatable-lib/src/directives/datatable-sort/mat-multi-sort-badge.directive.spec.ts
@@ -14,10 +14,9 @@ describe('MatMultiSortBadgeDirective', () => {
 
   beforeEach(() => {
     fixture = TestBed.configureTestingModule({
-      declarations: [
-        BadgeTestApp,
-        MatMultiSortBadgeDirective
-      ]
+    imports: [
+      BadgeTestApp
+    ]
     }).createComponent(BadgeTestApp);
     testComponent = fixture.debugElement.componentInstance as BadgeTestApp;
     fixture.detectChanges(); // initial binding
@@ -181,15 +180,19 @@ describe('MatMultiSortBadgeDirective', () => {
   encapsulation: ViewEncapsulation.Emulated,
   styles: ['span { color: hotpink; }'],
   template: `
-    <span [matMultiSortBadge]="badgeContent"
-          [matMultiSortBadgeArrowDirection]="badgeDirection"
-          [matMultiSortBadgePosition]="badgePosition"
-          [matMultiSortBadgeHidden]="badgeHidden"
-          [matMultiSortBadgeDescription]="badgeDescription"
-          [matMultiSortBadgeDisabled]="badgeDisabled">
-      home
-    </span>
-  `
+<span [matMultiSortBadge]="badgeContent"
+      [matMultiSortBadgeArrowDirection]="badgeDirection"
+      [matMultiSortBadgePosition]="badgePosition"
+      [matMultiSortBadgeHidden]="badgeHidden"
+      [matMultiSortBadgeDescription]="badgeDescription"
+      [matMultiSortBadgeDisabled]="badgeDisabled">
+  home
+</span>
+  `,
+  standalone: true,
+  imports: [
+    MatMultiSortBadgeDirective
+  ]
 })
 class BadgeTestApp {
   @ViewChild(MatMultiSortBadgeDirective) badgeInstance!: MatMultiSortBadgeDirective;
@@ -203,10 +206,10 @@ class BadgeTestApp {
 
 @Component({
   template: `
-    <span matMultiSortBadge="Hello">
-      home
-      <div class="mat-multi-sort-badge-content">Pre-existing badge</div>
-    </span>
+<span matMultiSortBadge="Hello">
+  home
+  <div class="mat-multi-sort-badge-content">Pre-existing badge</div>
+</span>
   `
 })
 class PreExistingBadge {}
diff --git a/projects/mat-datatable-lib/src/directives/datatable-sort/mat-multi-sort-badge.directive.ts b/projects/mat-datatable-lib/src/directives/datatable-sort/mat-multi-sort-badge.directive.ts
@@ -26,17 +26,18 @@ const BADGE_CONTENT_CLASS = 'mat-multi-sort-badge-content';
 
 /** Directive to display a text badge. */
 @Directive({
-  selector: '[matMultiSortBadge]',
-  inputs: ['disabled: matMultiSortBadgeDisabled'],
-  host: {
-    'class': 'mat-multi-sort-badge',
-    '[class.mat-multi-sort-badge-above]': '!isAscending()',
-    '[class.mat-multi-sort-badge-below]': 'isAscending()',
-    '[class.mat-multi-sort-badge-before]': '!isAfter()',
-    '[class.mat-multi-sort-badge-after]': 'isAfter()',
-    '[class.mat-multi-sort-badge-hidden]': 'hidden || !content',
-    '[class.mat-multi-sort-badge-disabled]': 'disabled'
-  }
+    selector: '[matMultiSortBadge]',
+    inputs: ['disabled: matMultiSortBadgeDisabled'],
+    host: {
+        'class': 'mat-multi-sort-badge',
+        '[class.mat-multi-sort-badge-above]': '!isAscending()',
+        '[class.mat-multi-sort-badge-below]': 'isAscending()',
+        '[class.mat-multi-sort-badge-before]': '!isAfter()',
+        '[class.mat-multi-sort-badge-after]': 'isAfter()',
+        '[class.mat-multi-sort-badge-hidden]': 'hidden || !content',
+        '[class.mat-multi-sort-badge-disabled]': 'disabled'
+    },
+    standalone: true
 })
 export class MatMultiSortBadgeDirective implements OnInit, OnDestroy {
   /**