Added resource pipe and service for libraries

package.json

@@ -12,7 +12,8 @@
     "skyux": "skyux",
     "start": "skyux serve --hmr",
     "test": "skyux test --coverage library --logFormat none",
-    "test:visual": "skyux e2e --logFormat none"
+    "test:visual": "skyux e2e --logFormat none",
+    "watch": "skyux watch --coverage library"
   },
   "keywords": [],
   "author": "Blackbaud",
@@ -44,9 +45,10 @@
     "@angular/platform-browser": "4.3.6",
     "@angular/platform-browser-dynamic": "4.3.6",
     "@angular/router": "4.3.6",
-    "@blackbaud/auth-client": "2.7.0",
-    "@blackbaud/skyux": "2.25.0",
-    "@blackbaud/skyux-builder": "1.22.0",
+    "@blackbaud/auth-client": "2.10.0",
+    "@blackbaud/skyux": "2.26.0",
+    "@blackbaud/skyux-builder": "blackbaud/skyux-builder#host-locale-provider",
+    "@skyux-sdk/builder-plugin-skyux": "blackbaud/skyux-builder-plugin-skyux#lib-resources",
     "@skyux-sdk/testing": "3.0.0",
     "@skyux/assets": "3.0.0",
     "@skyux/core": "3.0.2",

skyuxconfig.json

@@ -2,6 +2,9 @@
   "name": "skyux-i18n",
   "mode": "easy",
   "compileMode": "aot",
+  "plugins": [
+    "@skyux-sdk/builder-plugin-skyux"
+  ],
   "testSettings": {
     "unit": {
       "browserSet": "paranoid"

src/app/app-extras.module.ts

@@ -2,10 +2,13 @@ import {
   NgModule
 } from '@angular/core';
 
+import {
+  SkySampleResourcesModule
+} from './demos';
+
 @NgModule({
-  imports: [],
-  exports: [],
-  providers: [],
-  entryComponents: []
+  exports: [
+    SkySampleResourcesModule
+  ]
 })
 export class AppExtrasModule { }

src/app/demos/index.ts

@@ -0,0 +1 @@
+export * from './sample-resources.module';

src/app/demos/sample-resources.component.html

@@ -0,0 +1,14 @@
+<table>
+  <tr>
+    <td>Pipe result:</td>
+    <td>{{ 'greeting' | skyLibResources }}</td>
+  </tr>
+  <tr>
+    <td>Default greeting (service):</td>
+    <td>{{ defaultGreeting }}</td>
+  </tr>
+  <tr>
+    <td>Localized greeting (service):</td>
+    <td>{{ localizedGreeting }}</td>
+  </tr>
+</table>

src/app/demos/sample-resources.component.ts

@@ -0,0 +1,36 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit
+} from '@angular/core';
+
+import {
+  SkyLibResourcesService
+} from '../public';
+
+@Component({
+  selector: 'sky-sample-resources',
+  templateUrl: './sample-resources.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SkySampleResourcesComponent implements OnInit {
+  public defaultGreeting: string;
+  public localizedGreeting: string;
+
+  constructor(
+    private resourcesService: SkyLibResourcesService
+  ) { }
+
+  public ngOnInit(): void {
+    this.defaultGreeting = this.resourcesService.getStringForLocale(
+      { locale: 'en_US' },
+      'greeting'
+    );
+
+    this.resourcesService
+      .getString('greeting')
+      .subscribe((localizedValue: string) => {
+        this.localizedGreeting = localizedValue;
+      });
+  }
+}

src/app/demos/sample-resources.module.ts

@@ -0,0 +1,24 @@
+import {
+  NgModule
+} from '@angular/core';
+
+import {
+  SKY_LIB_RESOURCES_PROVIDERS,
+  SkyI18nModule
+} from '../public';
+
+import {
+  SkySampleResourcesProvider
+} from '../public/plugin-resources/sample-resources-provider';
+
+@NgModule({
+  exports: [
+    SkyI18nModule
+  ],
+  providers: [{
+    provide: SKY_LIB_RESOURCES_PROVIDERS,
+    useClass: SkySampleResourcesProvider,
+    multi: true
+  }]
+})
+export class SkySampleResourcesModule { }

src/app/index.html

@@ -0,0 +1 @@
+<sky-sample-resources></sky-sample-resources>

src/app/public/modules/i18n/host-locale-provider.ts

@@ -32,6 +32,11 @@ export class SkyAppHostLocaleProvider extends SkyAppLocaleProvider {
   }
 
   public getLocaleInfo(): Observable<SkyAppLocaleInfo> {
+    console.warn([
+      'The class `SkyAppHostLocaleProvider`, imported from `@skyux/i18n`',
+      'is deprecated. Please import from `@blackbaud/skyux-builder/runtime/i18n`.'
+    ].join(' '));
+
     if (this.localeProvider) {
       return this.localeProvider.getLocaleInfo();
     }

src/app/public/modules/i18n/i18n.module.ts

@@ -14,10 +14,6 @@ import {
   SkyAppWindowRef
 } from '@skyux/core';
 
-import {
-  SkyAppHostLocaleProvider
-} from './host-locale-provider';
-
 import {
   SkyAppResourcesPipe
 } from './resources.pipe';
@@ -26,12 +22,26 @@ import {
   SkyAppResourcesService
 } from './resources.service';
 
+import {
+  SkyLibResourcesPipe
+} from './lib-resources.pipe';
+
+import {
+  SkyLibResourcesService
+} from './lib-resources.service';
+
+import {
+  SkyAppLocaleProvider
+} from './locale-provider';
+
 @NgModule({
   declarations: [
-    SkyAppResourcesPipe
+    SkyAppResourcesPipe,
+    SkyLibResourcesPipe
   ],
   exports: [
-    SkyAppResourcesPipe
+    SkyAppResourcesPipe,
+    SkyLibResourcesPipe
   ],
   imports: [
     HttpModule
@@ -43,9 +53,10 @@ import {
       provide: SkyAppAssetsService,
       useValue: SkyAppAssetsService
     },
-    SkyAppHostLocaleProvider,
+    SkyAppLocaleProvider,
     SkyAppResourcesService,
-    SkyAppWindowRef
+    SkyAppWindowRef,
+    SkyLibResourcesService
   ]
 })
 export class SkyI18nModule { }

src/app/public/modules/i18n/index.ts

@@ -1,5 +1,10 @@
 export * from './host-locale-provider';
 export * from './i18n.module';
+export * from './lib-resources-provider';
+export * from './lib-resources-providers-token';
+export * from './lib-resources.pipe';
+export * from './lib-resources.service';
+export * from './locale-info';
 export * from './locale-provider';
 export * from './resources.pipe';
 export * from './resources.service';

src/app/public/modules/i18n/lib-resources-provider.spec.ts

@@ -0,0 +1,7 @@
+// import {
+//   SkyLibResourcesProvider
+// } from './lib-resources-provider';
+
+// describe('Library resources provider', () => {
+//   it('should ');
+// });

src/app/public/modules/i18n/lib-resources-provider.ts

@@ -0,0 +1,16 @@
+// #region imports
+import {
+  Injectable
+} from '@angular/core';
+
+import {
+  SkyAppLocaleInfo
+} from './locale-info';
+// #endregion
+
+@Injectable()
+export abstract class SkyLibResourcesProvider {
+
+  public getString: (localeInfo: SkyAppLocaleInfo, name: string) => string;
+
+}

src/app/public/modules/i18n/lib-resources-providers-token.ts

@@ -0,0 +1,12 @@
+// #region imports
+import {
+  InjectionToken
+} from '@angular/core';
+
+import {
+  SkyLibResourcesProvider
+} from './lib-resources-provider';
+// #endregion
+
+export const SKY_LIB_RESOURCES_PROVIDERS =
+  new InjectionToken<SkyLibResourcesProvider>('SKY_LIB_RESOURCES_PROVIDERS');

src/app/public/modules/i18n/lib-resources.pipe.spec.ts

@@ -0,0 +1,84 @@
+// #region imports
+import {
+  Observable
+} from 'rxjs/Observable';
+
+import {
+  SkyLibResourcesPipe
+} from './lib-resources.pipe';
+
+import {
+  SkyLibResourcesService
+} from './lib-resources.service';
+// #endregion
+
+describe('Library resources pipe', () => {
+  let resources: SkyLibResourcesService;
+  let changeDetector: any;
+
+  beforeEach(() => {
+    changeDetector = {
+      markForCheck: jasmine.createSpy('markForCheck')
+    };
+
+    resources = {
+      getString: (name: string, ...args: any[]) => {
+        let value: string;
+
+        if (args && args.length > 0) {
+          value = 'format me ' + args.join(' ');
+        } else {
+          value = 'hello';
+        }
+
+        return Observable.of(value);
+      }
+    } as SkyLibResourcesService;
+  });
+
+  it('should return the expected string', () => {
+    const pipe = new SkyLibResourcesPipe(changeDetector, resources);
+    expect(pipe.transform('hi')).toBe('hello');
+  });
+
+  it('should return the expected string formatted with the specified parameters', () => {
+    const pipe = new SkyLibResourcesPipe(changeDetector, resources);
+    expect(pipe.transform('hi', 'abc', 'def')).toBe('format me abc def');
+  });
+
+  it('should cache strings that have been retrieved via the resource service', () => {
+    const pipe = new SkyLibResourcesPipe(changeDetector, resources);
+
+    const getStringSpy = spyOn(resources, 'getString').and.callThrough();
+
+    pipe.transform('hi');
+    pipe.transform('hi');
+    pipe.transform('hi');
+
+    expect(getStringSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should consider format args as part of the cache key', () => {
+    const pipe = new SkyLibResourcesPipe(changeDetector, resources);
+    const getStringSpy = spyOn(resources, 'getString').and.callThrough();
+
+    expect(pipe.transform('hi')).toBe('hello');
+    expect(pipe.transform('hi', 'abc')).toBe('format me abc');
+    expect(pipe.transform('hi')).toBe('hello');
+    expect(pipe.transform('hi', 'abc')).toBe('format me abc');
+    expect(pipe.transform('hi')).toBe('hello');
+    expect(pipe.transform('hi', 'abc')).toBe('format me abc');
+
+    expect(getStringSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('should mark the change detector for check when the string is loaded asynchronously', () => {
+    const pipe = new SkyLibResourcesPipe(changeDetector, resources);
+
+    pipe.transform('hi');
+    pipe.transform('hi');
+    pipe.transform('hi');
+
+    expect(changeDetector.markForCheck).toHaveBeenCalledTimes(1);
+  });
+});

src/app/public/modules/i18n/lib-resources.pipe.ts

@@ -0,0 +1,38 @@
+// #region imports
+import {
+  ChangeDetectorRef,
+  Pipe,
+  PipeTransform
+} from '@angular/core';
+
+import {
+  SkyLibResourcesService
+} from './lib-resources.service';
+// #endregion
+
+@Pipe({
+  name: 'skyLibResources',
+  pure: false
+})
+export class SkyLibResourcesPipe implements PipeTransform {
+  private resourceCache: {[key: string]: any} = {};
+
+  constructor(
+    private changeDetector: ChangeDetectorRef,
+    private resourcesService: SkyLibResourcesService
+  ) { }
+
+  public transform(name: string, ...args: any[]): string {
+    const cacheKey = name + JSON.stringify(args);
+
+    if (!(cacheKey in this.resourceCache)) {
+      this.resourcesService.getString(name, ...args)
+        .subscribe((value: string) => {
+          this.resourceCache[cacheKey] = value;
+          this.changeDetector.markForCheck();
+        });
+    }
+
+    return this.resourceCache[cacheKey];
+  }
+}