feat: update nx and angular 17 migration

dylannnn · Dec 21, 2023 · 362a0d3 · 362a0d3
1 parent 407a128
commit 362a0d3
Showing 54 changed files with 10,846 additions and 13,163 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -27,7 +27,11 @@
     },
     {
       "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nx/typescript"],
+      "plugins": ["prettier"],
+      "extends": [
+        "plugin:@nx/typescript",
+        "plugin:prettier/recommended"
+      ],
       "rules": {}
     },
     {

diff --git a/.prettierrc b/.prettierrc
@@ -1,3 +1,6 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "plugins": [
+    "prettier-plugin-organize-imports"
+  ]
 }
diff --git a/.storybook/main.ts b/.storybook/main.ts
diff --git a/.storybook/tsconfig.json b/.storybook/tsconfig.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -8,21 +8,21 @@
     "editor.formatOnPaste": true
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.markdownlint": true
+    "source.fixAll.markdownlint": "explicit"
   },
   "[html]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
+      "source.fixAll.eslint": "explicit"
     },
-    "editor.formatOnSave": false
+    "editor.formatOnSave": true
   },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true,
-      "source.organizeImports": true
+      "source.fixAll.eslint": "explicit",
+      "source.organizeImports": "explicit"
     },
-    "editor.formatOnSave": false
+    "editor.formatOnSave": true
   },
 }
diff --git a/apps/demo-e2e/cypress.config.ts b/apps/demo-e2e/cypress.config.ts
@@ -1,5 +1,5 @@
-import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
+import { defineConfig } from 'cypress';
 
 export default defineConfig({
   // viewportWidth: 1440,

diff --git a/apps/demo-e2e/src/e2e/app.cy.ts b/apps/demo-e2e/src/e2e/app.cy.ts
@@ -12,15 +12,24 @@ describe('demo', () => {
     it('should show the Highlighter button and toggle the multi keywords highlighter', () => {
       appPage.getToggleHighlightButton().should('exist');
       appPage.getToggleHighlightElement().should('not.exist');
-      cy.url().should('not.include', '(multi-keywords-highlighter:lib-experimental)');
-
+      cy.url().should(
+        'not.include',
+        '(multi-keywords-highlighter:lib-experimental)',
+      );
+
       appPage.getToggleHighlightButton().trigger('click');
-      cy.url().should('include', '(multi-keywords-highlighter:lib-experimental)');
+      cy.url().should(
+        'include',
+        '(multi-keywords-highlighter:lib-experimental)',
+      );
       appPage.getToggleHighlightElement().should('exist');
-  
+
       appPage.getToggleHighlightButton().trigger('click');
       appPage.getToggleHighlightElement().should('not.exist');
-      cy.url().should('not.include', '(multi-keywords-highlighter:lib-experimental)');
+      cy.url().should(
+        'not.include',
+        '(multi-keywords-highlighter:lib-experimental)',
+      );
     });
   });
 

diff --git a/apps/demo-e2e/src/support/app.po.ts b/apps/demo-e2e/src/support/app.po.ts
@@ -1,6 +1,11 @@
 export class AppPageObject {
-  getToggleHighlightButton = () => cy.get(`[data-testid="toggle-highlight-button"]`);
+  getToggleHighlightButton = () =>
+    cy.get(`[data-testid="toggle-highlight-button"]`);
   getDefaultToggleHighlightButton = () => cy.get(`[data-testid="custom-lib"]`);
-  getToggleHighlightElement = () => cy.get(`router-outlet[name="multi-keywords-highlighter"] + mkh-multi-keywords-highlighter`);
-  getCustomHighlightElement = () => cy.get(`nav [data-testid="highlight-keywords-button"]`);
-}
+  getToggleHighlightElement = () =>
+    cy.get(
+      `router-outlet[name="multi-keywords-highlighter"] + mkh-multi-keywords-highlighter`,
+    );
+  getCustomHighlightElement = () =>
+    cy.get(`nav [data-testid="highlight-keywords-button"]`);
+}
diff --git a/apps/demo/jest.config.ts b/apps/demo/jest.config.ts
@@ -15,7 +15,7 @@ const config: Config = {
         tsconfig: '<rootDir>/tsconfig.spec.json',
         stringifyContentPathRegex: '\\.(html|svg)$',
       },
-    ]
+    ],
   },
   transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
   snapshotSerializers: [
@@ -30,9 +30,9 @@ const config: Config = {
       {
         outputDirectory: 'dist/reports',
         outputName: 'unit-report.xml',
-      }
-    ]
-  ]
+      },
+    ],
+  ],
 };
 
-export default config;
+export default config;
diff --git a/apps/demo/src/app/app-routing.module.ts b/apps/demo/src/app/app-routing.module.ts
@@ -1,28 +1,27 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
 import {
   // LABEL_POSITION,
   // MATERIAL_COLOR,
   NgxMultiKeywordsHighlighterComponent,
 } from '@amfrontender/ngx-multi-keywords-highlighter';
-
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 import { DemoComponent } from './demo/demo.component';
 
 const routes: Routes = [
   {
     path: '',
     redirectTo: 'demo',
-    pathMatch: 'full'
+    pathMatch: 'full',
   },
   {
     path: 'demo',
-    component: DemoComponent
+    component: DemoComponent,
   },
   // Demo for lazyloading library
   {
     path: 'lib-experimental',
     outlet: 'multi-keywords-highlighter',
-    component: NgxMultiKeywordsHighlighterComponent
+    component: NgxMultiKeywordsHighlighterComponent,
     /**
      *  IF NgxMultiKeywordsHighlighterModule not been loaded via AppModule, then it can be lazy loaded here with code below.
      */
@@ -41,7 +40,7 @@ const routes: Routes = [
   },
   {
     path: '**',
-    redirectTo: 'demo'
+    redirectTo: 'demo',
   },
 ];
 

diff --git a/apps/demo/src/app/app.component.spec.ts b/apps/demo/src/app/app.component.spec.ts
@@ -1,4 +1,8 @@
-import { MULTI_KEYWORDS_HIGHLIGHTER_CONFIG_TOKEN, MATERIAL_COLOR, LABEL_POSITION } from '@amfrontender/ngx-multi-keywords-highlighter';
+import {
+  LABEL_POSITION,
+  MATERIAL_COLOR,
+  MULTI_KEYWORDS_HIGHLIGHTER_CONFIG_TOKEN,
+} from '@amfrontender/ngx-multi-keywords-highlighter';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -20,10 +24,10 @@ describe('AppComponent', () => {
             enableHighlighterTooltip: 'Turn on/off highlighter',
             minWidth: 320,
             appRoot: 'mkh-root',
-          }
-        }
+          },
+        },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
   });
 

diff --git a/apps/demo/src/app/app.module.ts b/apps/demo/src/app/app.module.ts
@@ -1,7 +1,11 @@
+import {
+  LABEL_POSITION,
+  MATERIAL_COLOR,
+  NgxMultiKeywordsHighlighterModule,
+} from '@amfrontender/ngx-multi-keywords-highlighter';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgxMultiKeywordsHighlighterModule, MATERIAL_COLOR, LABEL_POSITION } from '@amfrontender/ngx-multi-keywords-highlighter';
 
 import { AppRoutingModule } from './app-routing.module';
 import { MaterialModule } from './material/material.module';
@@ -12,24 +16,24 @@ import { DynamicComponent } from './dynamic-component/dynamic.component';
 import { NavBarComponent } from './nav-bar/nav-bar.component';
 
 @NgModule({
-    declarations: [AppComponent],
-    imports: [
-        BrowserModule,
-        BrowserAnimationsModule,
-        AppRoutingModule,
-        MaterialModule,
-        NgxMultiKeywordsHighlighterModule.forRoot({
-            themeColor: MATERIAL_COLOR.PRIMARY,
-            enableToggleLabel: true,
-            toggleLabelPosition: LABEL_POSITION.BEFORE,
-            enableHighlighterTooltip: 'Turn on/off highlighter',
-            minWidth: 320,
-            appRoot: 'mkh-root',
-        }),
-        NavBarComponent,
-        DemoComponent,
-        DynamicComponent
-    ],
-    bootstrap: [AppComponent]
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    AppRoutingModule,
+    MaterialModule,
+    NgxMultiKeywordsHighlighterModule.forRoot({
+      themeColor: MATERIAL_COLOR.PRIMARY,
+      enableToggleLabel: true,
+      toggleLabelPosition: LABEL_POSITION.BEFORE,
+      enableHighlighterTooltip: 'Turn on/off highlighter',
+      minWidth: 320,
+      appRoot: 'mkh-root',
+    }),
+    NavBarComponent,
+    DemoComponent,
+    DynamicComponent,
+  ],
+  bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/apps/demo/src/app/demo/demo.component.spec.ts b/apps/demo/src/app/demo/demo.component.spec.ts
@@ -1,4 +1,8 @@
-import { LABEL_POSITION, MATERIAL_COLOR, MULTI_KEYWORDS_HIGHLIGHTER_CONFIG_TOKEN } from '@amfrontender/ngx-multi-keywords-highlighter';
+import {
+  LABEL_POSITION,
+  MATERIAL_COLOR,
+  MULTI_KEYWORDS_HIGHLIGHTER_CONFIG_TOKEN,
+} from '@amfrontender/ngx-multi-keywords-highlighter';
 import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -23,9 +27,9 @@ describe('DemoComponent', () => {
             enableHighlighterTooltip: 'Turn on/off highlighter',
             minWidth: 320,
             appRoot: 'mkh-root',
-          }
-        }
-      ]
+          },
+        },
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(DemoComponent);

diff --git a/apps/demo/src/app/demo/demo.component.ts b/apps/demo/src/app/demo/demo.component.ts
@@ -1,3 +1,4 @@
+import { NgComponentOutlet } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -6,24 +7,29 @@ import {
   OnInit,
   ViewChild,
 } from '@angular/core';
-import { NgComponentOutlet } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, Sort, MatSortModule } from '@angular/material/sort';
+import { MatSort, MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { MatCardModule } from '@angular/material/card';
 
 import { DynamicComponent } from '../dynamic-component/dynamic.component';
 import { Info } from '../shared/info.class';
 import { PeriodicElement } from '../shared/periodic-element.interface';
 import { MOCK_PERIODIC_ELEMENT_DATA } from '../shared/periodic-element.mock';
 
 @Component({
-    selector: 'mkh-demo',
-    templateUrl: './demo.component.html',
-    styleUrls: ['./demo.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
-    imports: [MatCardModule, MatTableModule, MatSortModule, MatPaginatorModule, NgComponentOutlet]
+  selector: 'mkh-demo',
+  templateUrl: './demo.component.html',
+  styleUrls: ['./demo.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    MatCardModule,
+    MatTableModule,
+    MatSortModule,
+    MatPaginatorModule,
+    NgComponentOutlet,
+  ],
 })
 export class DemoComponent implements OnInit, AfterViewInit {
   dataSource: MatTableDataSource<PeriodicElement>;

diff --git a/apps/demo/src/app/dynamic-component/dynamic.component.spec.ts b/apps/demo/src/app/dynamic-component/dynamic.component.spec.ts
@@ -1,4 +1,8 @@
-import { MULTI_KEYWORDS_HIGHLIGHTER_CONFIG_TOKEN, MATERIAL_COLOR, LABEL_POSITION } from '@amfrontender/ngx-multi-keywords-highlighter';
+import {
+  LABEL_POSITION,
+  MATERIAL_COLOR,
+  MULTI_KEYWORDS_HIGHLIGHTER_CONFIG_TOKEN,
+} from '@amfrontender/ngx-multi-keywords-highlighter';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 // import { Info } from '../shared/info.class';
@@ -22,9 +26,9 @@ describe('DynamicComponent', () => {
             enableHighlighterTooltip: 'Turn on/off highlighter',
             minWidth: 320,
             appRoot: 'mkh-root',
-          }
-        }
-      ]
+          },
+        },
+      ],
     }).compileComponents();
   });
 

diff --git a/apps/demo/src/app/dynamic-component/dynamic.component.ts b/apps/demo/src/app/dynamic-component/dynamic.component.ts
@@ -1,13 +1,16 @@
+import {
+  IKeyword,
+  NgxMultiKeywordsHighlighterComponent,
+} from '@amfrontender/ngx-multi-keywords-highlighter';
 import { Component } from '@angular/core';
-import { IKeyword, NgxMultiKeywordsHighlighterComponent } from '@amfrontender/ngx-multi-keywords-highlighter';
 // import { Info } from '../shared/info.class';
 
 @Component({
-    selector: 'mkh-dynamic',
-    templateUrl: './dynamic.component.html',
-    styleUrls: ['./dynamic.component.scss'],
-    standalone: true,
-    imports: [NgxMultiKeywordsHighlighterComponent]
+  selector: 'mkh-dynamic',
+  templateUrl: './dynamic.component.html',
+  styleUrls: ['./dynamic.component.scss'],
+  standalone: true,
+  imports: [NgxMultiKeywordsHighlighterComponent],
 })
 export class DynamicComponent {
   // constructor(private info: Info) {}