refactor: enforce consistent Pipe prefix (#1625)

* generate new pipes with correct prefix

BREAKING CHANGES: Pipes `sanitize`, `makeHref` and `htmlEncode` are renamed using an `ish` prefix (see Migrations / From 5.1 to 5.2 for more details).

.eslintrc.json

@@ -43,6 +43,12 @@
             "style": "camelCase"
           }
         ],
+        "@angular-eslint/pipe-prefix": [
+          "error",
+          {
+            "prefixes": ["ish"]
+          }
+        ],
         "@angular-eslint/sort-ngmodule-metadata-arrays": "warn",
         "@ngrx/avoid-combining-selectors": "off",
         "@ngrx/avoid-mapping-selectors": "off",

docs/guides/migrations.md

@@ -11,6 +11,10 @@ kb_sync_latest_only
 
 The store action and method `addBasketToNewOrderTemplate` of the OrderTemplatesFacade have been renamed to `createOrderTemplateFromLineItems` and refactored slightly.
 
+The Intershop PWA specific Pipes `sanitize`, `makeHref` and `htmlEncode` were renamed using the common `ish` prefix that is used for the other custom Pipes as well.
+When migrating all occurrences of these Pipes need to be renamed to `ishSanitize`, `ishMakeHref` and `ishHtmlEncode`.
+The code generation was adapted to generate new Pipes from the beginning with the correct prefixes now.
+
 ## From 5.0 to 5.1
 
 The OrderListComponent is strictly presentational, components using it have to supply the data.

schematics/customization/add/index.js

@@ -67,10 +67,16 @@ const addPrefixToRule = ruleConfig => {
   ruleConfig.prefix = ruleConfig.prefix.filter((val, idx, arr) => arr.indexOf(val) === idx);
 };
 
+const addPrefixesToRule = ruleConfig => {
+  ruleConfig.prefixes.push('custom');
+  ruleConfig.prefixes = ruleConfig.prefixes.filter((val, idx, arr) => arr.indexOf(val) === idx);
+};
+
 const eslintJson = parse(fs.readFileSync('./.eslintrc.json', { encoding: 'UTF-8' }));
 const overrideRules = eslintJson.overrides.find(c => c.files.includes('*.ts')).rules;
 addPrefixToRule(overrideRules['@angular-eslint/directive-selector'][1]);
 addPrefixToRule(overrideRules['@angular-eslint/component-selector'][1]);
+addPrefixesToRule(overrideRules['@angular-eslint/pipe-prefix'][1]);
 
 const reusePatterns = overrideRules['ish-custom-rules/project-structure'][1].reusePatterns;
 reusePatterns.theme = reusePatterns.theme.replace('b2b|b2c', `b2b|b2c|${theme}`);

schematics/src/pipe/factory.ts

@@ -11,7 +11,13 @@ import {
 } from '@angular-devkit/schematics';
 import { PWAPipeOptionsSchema as Options } from 'schemas/pipe/schema';
 
-import { applyNameAndPath, detectExtension, determineArtifactName, findDeclaringModule } from '../utils/common';
+import {
+  applyNameAndPath,
+  detectExtension,
+  determineArtifactName,
+  findDeclaringModule,
+  generateSelector,
+} from '../utils/common';
 import { applyLintFix } from '../utils/lint-fix';
 import { addDeclarationToNgModule, addExportToNgModule, addProviderToNgModule } from '../utils/registration';
 
@@ -23,6 +29,7 @@ export function createPipe(options: Options): Rule {
     options = await detectExtension('pipe', host, options);
     options = await applyNameAndPath('pipe', host, options);
     options = determineArtifactName('pipe', host, options);
+    options = await generateSelector(host, options);
 
     if (!options.extension) {
       options.module = `core/pipes.module`;

schematics/src/pipe/factory_spec.ts

@@ -101,4 +101,12 @@ export class PipesModule { }
     const content = tree.readContent('/src/app/extensions/feature/feature.module.ts');
     expect(content).toContain('FooPipe');
   });
+
+  it('should name the pipe with the correct prefix', async () => {
+    const options = { ...defaultOptions, name: 'foo' };
+
+    const tree = await schematicRunner.runSchematic('pipe', options, appTree);
+    const content = tree.readContent('/src/app/core/pipes/foo.pipe.ts');
+    expect(content).toContain('ishFoo');
+  });
 });

schematics/src/pipe/files/__name@dasherize__.pipe.ts.template

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-@Pipe({ name: '<%= camelize(name) %>', pure: true })
+@Pipe({ name: '<%= camelize(selector) %>', pure: true })
 export class <%= classify(name) %>Pipe implements PipeTransform {
   transform(value: boolean): string {
     return 'test: ' + (value ? 'okay' : 'failed');

schematics/src/pipe/schema.json

@@ -13,6 +13,10 @@
         "$source": "workingDirectory"
       }
     },
+    "prefix": {
+      "type": "string",
+      "visible": false
+    },
     "restricted": {
       "type": "boolean",
       "visible": false,

src/app/core/pipes/html-encode.pipe.ts

@@ -5,7 +5,7 @@ import { Pipe, PipeTransform } from '@angular/core';
  * so they can be displayed as plain text in a web page.
  * https://jasonwatmore.com/vanilla-js-html-encode-in-javascript
  */
-@Pipe({ name: 'htmlEncode', pure: true })
+@Pipe({ name: 'ishHtmlEncode', pure: true })
 export class HtmlEncodePipe implements PipeTransform {
   transform(value: string): string {
     return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

src/app/core/pipes/make-href.pipe.ts

@@ -6,7 +6,7 @@ import { map, switchMap } from 'rxjs/operators';
 import { omit } from 'ish-core/utils/functions';
 import { MultiSiteService } from 'ish-core/utils/multi-site/multi-site.service';
 
-@Pipe({ name: 'makeHref', pure: false })
+@Pipe({ name: 'ishMakeHref', pure: false })
 export class MakeHrefPipe implements PipeTransform {
   constructor(private multiSiteService: MultiSiteService) {}
   transform(location: LocationStrategy, urlParams: Record<string, string>): Observable<string> {

src/app/core/pipes/sanitize.pipe.ts

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-@Pipe({ name: 'sanitize', pure: true })
+@Pipe({ name: 'ishSanitize', pure: true })
 export class SanitizePipe implements PipeTransform {
   transform(value: string): string {
     return value !== undefined

src/app/pages/account-overview/account-overview/account-overview.component.html

@@ -2,7 +2,7 @@
   <h1
     [innerHTML]="
       'account.overview.personal_message_b2b.text'
-        | translate : { '0': user.firstName + '&nbsp;' + user.lastName, '1': customer.companyName | htmlEncode }
+        | translate : { '0': user.firstName + '&nbsp;' + user.lastName, '1': customer.companyName | ishHtmlEncode }
     "
     data-testing-id="personal-message-b2b"
   ></h1>

src/app/pages/search/search-no-result/search-no-result.component.html

@@ -13,7 +13,7 @@ <h1 class="h2">{{ 'search.noResult.heading' | translate }}</h1>
 
   <p
     class="no-search-result-title"
-    [innerHTML]="'search.noResult.message' | translate : { '0': searchTerm | htmlEncode }"
+    [innerHTML]="'search.noResult.message' | translate : { '0': searchTerm | ishHtmlEncode }"
   ></p>
 
   <div class="search-container main-search-container">

src/app/shared/components/filter/filter-swatch-images/filter-swatch-images.component.html

@@ -6,7 +6,7 @@
         [title]="facet.displayName + ' (' + facet.count + ')'"
         (click)="filter(facet)"
         (keypress.down)="filter(facet)"
-        [attr.data-testing-id]="'filter-link-' + (facet.displayName | sanitize)"
+        [attr.data-testing-id]="'filter-link-' + (facet.displayName | ishSanitize)"
         tabindex="0"
       >
         <span

src/app/shared/components/filter/filter-text/filter-text.component.html

@@ -7,7 +7,7 @@
           type="button"
           class="btn btn-link btn-link-action"
           (click)="filter(facet)"
-          [attr.data-testing-id]="'filter-link-' + (facet.name | sanitize)"
+          [attr.data-testing-id]="'filter-link-' + (facet.name | ishSanitize)"
         >
           <span class="filter-item-name"> {{ facet.displayName }} </span>
           <span class="count"> ({{ facet.count }}) </span>
@@ -23,7 +23,7 @@
           type="button"
           class="filter-item-name btn btn-link btn-link-action"
           (click)="filter(facet)"
-          [attr.data-testing-id]="'filter-link-' + (facet.name | sanitize)"
+          [attr.data-testing-id]="'filter-link-' + (facet.name | ishSanitize)"
         >
           {{ facet.displayName }}
           <ng-container *ngIf="facet.level === maxLevel"> ({{ facet.count }}) </ng-container>

src/app/shell/header/language-switch/language-switch.component.html

@@ -25,7 +25,7 @@
         <ul *ngIf="availableLocales.length">
           <ng-container *ngFor="let l of availableLocales">
             <li *ngIf="l !== locale">
-              <a [href]="location | makeHref : { lang: l } | async" (click)="setLocaleCookie(l)" role="menuitem">
+              <a [href]="location | ishMakeHref : { lang: l } | async" (click)="setLocaleCookie(l)" role="menuitem">
                 {{ 'locale.' + l + '.long' | translate }}
               </a>
             </li>