fix(angular): rework template to reduce InputChanges (#641)

https://coveord.atlassian.net/browse/CDX-793
coveo · Feb 1, 2022 · 87a9446 · 87a9446
1 parent 7f0c272
commit 87a9446
Show file tree

Hide file tree

Showing 8 changed files with 99,997 additions and 100,381 deletions.
diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -24,19 +24,20 @@
   "license": "Apache-2.0",
   "schematics": "./dist/collection.json",
   "dependencies": {
-    "@angular-devkit/core": "13.1.4",
-    "@angular-devkit/schematics": "13.1.4",
-    "@angular/cdk": "13.1.3",
-    "@angular/cli": "13.1.4",
+    "@angular-devkit/core": "13.2.1",
+    "@angular-devkit/schematics": "13.2.1",
+    "@angular/cdk": "13.2.0",
+    "@angular/cli": "13.2.1",
     "@coveo/search-token-server": "latest",
-    "@schematics/angular": "13.1.4",
+    "@schematics/angular": "13.2.1",
     "typescript": "^4.3.5"
   },
   "devDependencies": {
-    "@angular/core": "13.1.3",
-    "@angular/forms": "13.1.3",
-    "@angular/material": "13.1.3",
-    "@angular/router": "13.1.3",
+    "@angular/core": "13.2.0",
+    "@angular/forms": "13.2.0",
+    "@angular/material": "13.2.0",
+    "@angular/platform-browser": "13.2.0",
+    "@angular/router": "13.2.0",
     "@coveo/headless": "latest",
     "@types/fs-extra": "9.0.13",
     "@types/jasmine": "3.10.3",

diff --git a/packages/angular/src/ng-add-setup-project/files/src/app/coveo.components.module.ts b/packages/angular/src/ng-add-setup-project/files/src/app/coveo.components.module.ts
@@ -0,0 +1,51 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {ReactiveFormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatInputModule} from '@angular/material/input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatListModule} from '@angular/material/list';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatSelectModule} from '@angular/material/select';
+import {ErrorComponent} from './error/error.component';
+import {FacetListComponent} from './facet-list/facet-list.component';
+import {FacetComponent} from './facet/facet.component';
+import {PagerComponent} from './pager/pager.component';
+import {QuerySummaryComponent} from './query-summary/query-summary.component';
+import {ResultListComponent} from './result-list/result-list.component';
+import {SearchBoxComponent} from './search-box/search-box.component';
+import {SearchPageComponent} from './search-page/search-page.component';
+import {SortComponent} from './sort/sort.component';
+import {HeroComponent} from './hero/hero.component';
+import {HomeComponent} from './home/home.component';
+import {InitProvider} from './init.service';
+
+@NgModule({
+  declarations: [
+    ErrorComponent,
+    FacetComponent,
+    FacetListComponent,
+    PagerComponent,
+    QuerySummaryComponent,
+    ResultListComponent,
+    SearchBoxComponent,
+    SearchPageComponent,
+    SortComponent,
+    HeroComponent,
+    HomeComponent,
+  ],
+  imports: [
+    BrowserModule,
+    MatAutocompleteModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatListModule,
+    MatPaginatorModule,
+    MatSelectModule,
+    MatButtonModule,
+  ],
+  providers: [InitProvider],
+})
+export class CoveoComponentsModule {}
diff --git a/packages/angular/src/ng-add-setup-project/rules/ng-module.ts b/packages/angular/src/ng-add-setup-project/rules/ng-module.ts
@@ -1,15 +1,9 @@
-import {
-  addDeclarationToModule,
-  addSymbolToNgModuleMetadata,
-  addImportToModule,
-} from '@angular/cdk/schematics';
-import {basename, dirname} from 'path';
-import {classify} from '@angular-devkit/core/src/utils/strings';
+import {addImportToModule} from '@angular/cdk/schematics';
 import {createSourceFile, ScriptTarget} from 'typescript';
 import {getAppModulePath, getProjectMainFile} from '@angular/cdk/schematics';
 import {InsertChange} from '@schematics/angular/utility/change';
 import {ProjectDefinition} from '@angular-devkit/core/src/workspace';
-import {Action, Rule, Tree} from '@angular-devkit/schematics';
+import {Rule, Tree} from '@angular-devkit/schematics';
 import {SourceFile} from 'typescript';
 import {CoveoSchema} from '../../schema';
 
@@ -32,11 +26,7 @@ export function updateNgModule(
     );
     const updateRecorder = tree.beginUpdate(appModulePath);
 
-    const changes = [
-      ...injectInitService(source, appModulePath),
-      ...getAllCoveoComponentsToInject(tree, source, appModulePath),
-      ...injectAdditionalImports(source, appModulePath),
-    ];
+    const changes = getAdditionalImports(source, appModulePath);
 
     changes.map((change) => {
       if (change instanceof InsertChange) {
@@ -70,74 +60,13 @@ function getDefaultAppModuleContent() {
     `;
 }
 
-function isTypeScriptSourceFile(action: Action) {
-  return (
-    action.path.endsWith('.ts') &&
-    !action.path.endsWith('.d.ts') &&
-    !action.path.endsWith('.spec.ts')
-  );
-}
-
-function isCreateAction(action: Action) {
-  return action.kind === 'c';
-}
-
-function injectInitService(source: SourceFile, appModulePath: string) {
-  const changes: InsertChange[] = [];
-
-  changes.push(
-    ...(addSymbolToNgModuleMetadata(
-      source,
-      appModulePath,
-      'providers',
-      'InitProvider',
-      './init.service'
-    ) as InsertChange[])
-  );
-
-  return changes;
-}
-
-function getAllCoveoComponentsToInject(
-  tree: Tree,
-  source: SourceFile,
-  appModulePath: string
-) {
-  const changes: InsertChange[] = [];
-
-  tree.actions
-    .filter(isTypeScriptSourceFile)
-    .filter(isCreateAction)
-    .map((action) => {
-      const componentName = basename(dirname(action.path));
-      const fileLocation = `./${componentName}/${basename(action.path, '.ts')}`;
-
-      changes.push(
-        ...(addDeclarationToModule(
-          source,
-          appModulePath,
-          `${classify(componentName)}Component`,
-          fileLocation
-        ) as InsertChange[])
-      );
-    });
-  return changes;
-}
-
-export function injectAdditionalImports(
+export function getAdditionalImports(
   source: SourceFile,
   appModulePath: string
 ) {
   const modules = {
-    MatAutocompleteModule: '@angular/material/autocomplete',
-    MatFormFieldModule: '@angular/material/form-field',
-    ReactiveFormsModule: '@angular/forms',
-    MatInputModule: '@angular/material/input',
-    MatListModule: '@angular/material/list',
-    MatPaginatorModule: '@angular/material/paginator',
-    MatSelectModule: '@angular/material/select',
-    MatButtonModule: '@angular/material/button',
     AppRoutingModule: './app-routing.module',
+    CoveoComponentsModule: './coveo.components.module',
   };
 
   const changes: InsertChange[] = [];