feat(module:theme): add url pipe (#254)

packages/theme/public_api.ts

@@ -18,6 +18,8 @@ export { DatePipe } from './src/pipes/date/date.pipe';
 export { CNCurrencyPipe } from './src/pipes/currency/cn-currency.pipe';
 export { KeysPipe } from './src/pipes/keys/keys.pipe';
 export { YNPipe } from './src/pipes/yn/yn.pipe';
+export { HTMLPipe } from './src/pipes/safe/html.pipe';
+export { URLPipe } from './src/pipes/safe/url.pipe';
 export { AlainThemeConfig } from './src/theme.config';
 export { AlainThemeModule } from './src/theme.module';
 export { VERSION } from './src/version';

packages/theme/src/pipes/safe/index.en-US.md

@@ -0,0 +1,21 @@
+---
+order: 1
+title: safe-XSS
+type: Pipe
+---
+
+## html
+
+Simplify the use of `bypassSecurityTrustHtml`.
+
+```html
+<div [innerHTML]="content | html"></div>
+```
+
+## url
+
+Simplify the use of `bypassSecurityTrustUrl`.
+
+```html
+<a [href]="file_url | url" target="_blank"></a>
+```

packages/theme/src/pipes/safe/index.zh-CN.md

@@ -0,0 +1,21 @@
+---
+order: 1
+title: safe-XSS
+type: Pipe
+---
+
+## html
+
+简化 `bypassSecurityTrustHtml` 的使用。
+
+```html
+<div [innerHTML]="content | html"></div>
+```
+
+## url
+
+简化 `bypassSecurityTrustUrl` 的使用。
+
+```html
+<a [href]="file_url | url" target="_blank"></a>
+```

packages/theme/src/pipes/safe/url.pipe.spec.ts

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { AlainThemeModule } from '../../theme.module';
+
+describe('Pipe: url', () => {
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AlainThemeModule.forRoot()],
+      declarations: [TestComponent],
+    });
+    fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+  });
+
+  [
+    { value: '', result: `` },
+    { value: 'https://ng-alain.com', result: `https://ng-alain.com` },
+  ].forEach((item: any) => {
+    it(`${item.value.toString()} muse be ${item.result}`, () => {
+      fixture.componentInstance.value = item.value;
+      fixture.detectChanges();
+      const el = fixture.debugElement.query(By.css('#result'))
+        .nativeElement as HTMLElement;
+      expect(el.attributes.getNamedItem('href').textContent).toBe(item.result);
+    });
+  });
+});
+
+@Component({
+  template: `<a id="result" [href]="value | url"></a>`,
+})
+class TestComponent {
+  value = '';
+}

packages/theme/src/pipes/safe/url.pipe.ts

@@ -0,0 +1,11 @@
+import { PipeTransform, Pipe } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({ name: 'url' })
+export class URLPipe implements PipeTransform {
+  constructor(private dom: DomSanitizer) {}
+
+  transform(url: string): string {
+    return url ? this.dom.bypassSecurityTrustUrl(url) as any : '';
+  }
+}

packages/theme/src/theme.module.ts

@@ -23,8 +23,9 @@ import { CNCurrencyPipe } from './pipes/currency/cn-currency.pipe';
 import { KeysPipe } from './pipes/keys/keys.pipe';
 import { YNPipe } from './pipes/yn/yn.pipe';
 import { I18nPipe } from './services/i18n/i18n.pipe';
-import { HTMLPipe } from './pipes/html/html.pipe';
-const PIPES = [DatePipe, CNCurrencyPipe, KeysPipe, YNPipe, I18nPipe, HTMLPipe];
+import { HTMLPipe } from './pipes/safe/html.pipe';
+import { URLPipe } from './pipes/safe/url.pipe';
+const PIPES = [DatePipe, CNCurrencyPipe, KeysPipe, YNPipe, I18nPipe, HTMLPipe, URLPipe];
 
 // #endregion