Added resource pipe and service for libraries

package.json

@@ -44,9 +44,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": "1.24.0",
+    "@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-provider.ts

@@ -0,0 +1,8 @@
+import {
+  SkyAppLocaleInfo,
+  SkyLibResourcesProvider
+} from '../public';
+
+export class SkySampleResourcesProvider implements SkyLibResourcesProvider {
+  public getString: (localeInfo: SkyAppLocaleInfo, name: string) => string;
+}

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,32 @@
+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.getDefaultString('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 './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/i18n.module.ts

@@ -26,12 +26,22 @@ import {
   SkyAppResourcesService
 } from './resources.service';
 
+import {
+  SkyLibResourcesPipe
+} from './lib-resources.pipe';
+
+import {
+  SkyLibResourcesService
+} from './lib-resources.service';
+
 @NgModule({
   declarations: [
-    SkyAppResourcesPipe
+    SkyAppResourcesPipe,
+    SkyLibResourcesPipe
   ],
   exports: [
-    SkyAppResourcesPipe
+    SkyAppResourcesPipe,
+    SkyLibResourcesPipe
   ],
   imports: [
     HttpModule
@@ -45,7 +55,8 @@ import {
     },
     SkyAppHostLocaleProvider,
     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.ts

@@ -0,0 +1,14 @@
+import {
+  Injectable
+} from '@angular/core';
+
+import {
+  SkyAppLocaleInfo
+} from './locale-info';
+
+@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,10 @@
+import {
+  InjectionToken
+} from '@angular/core';
+
+import {
+  SkyLibResourcesProvider
+} from './lib-resources-provider';
+
+export const SKY_LIB_RESOURCES_PROVIDERS =
+  new InjectionToken<SkyLibResourcesProvider>('SKY_LIB_RESOURCES_PROVIDERS');

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

@@ -0,0 +1,40 @@
+import {
+  ChangeDetectorRef,
+  Pipe,
+  PipeTransform
+} from '@angular/core';
+
+import {
+  Observable
+} from 'rxjs/Observable';
+
+import {
+  SkyLibResourcesService
+} from './lib-resources.service';
+
+@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[]): Observable<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];
+  }
+}

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

@@ -0,0 +1,68 @@
+import {
+  Inject,
+  Injectable
+} from '@angular/core';
+
+import {
+  Observable
+} from 'rxjs/Observable';
+
+import 'rxjs/add/observable/merge';
+
+import {
+  SkyAppFormat
+} from '@skyux/core';
+
+import {
+  SkyAppHostLocaleProvider
+} from './host-locale-provider';
+
+import {
+  SkyAppLocaleInfo
+} from './locale-info';
+
+import {
+  SkyAppLocaleProvider
+} from './locale-provider';
+
+import {
+  SKY_LIB_RESOURCES_PROVIDERS
+} from './lib-resources-providers-token';
+
+import {
+  SkyLibResourcesProvider
+} from './lib-resources-provider';
+
+@Injectable()
+export class SkyLibResourcesService {
+  private format = new SkyAppFormat();
+
+  constructor(
+    @Inject(SkyAppHostLocaleProvider) private localeProvider: SkyAppLocaleProvider,
+    @Inject(SKY_LIB_RESOURCES_PROVIDERS) private providers: SkyLibResourcesProvider[]
+  ) { }
+
+  public getString(name: string, ...args: any[]): Observable<string> {
+    return this.localeProvider
+      .getLocaleInfo()
+      .map((info) => this.getStringForLocale(info, name, args));
+  }
+
+  public getDefaultString(name: string, ...args: any[]): string {
+    return this.getStringForLocale({ locale: 'en_US' }, name, args);
+  }
+
+  private getStringForLocale(
+    info: SkyAppLocaleInfo,
+    name: string, ...args: any[]
+  ): string {
+    for (const provider of this.providers) {
+      const s = provider.getString(info, name);
+       if (s) {
+        return this.format.formatText(s, args);
+      }
+    }
+
+    return undefined;
+  }
+}

src/assets/locales/resources_en_US.json

@@ -1 +1,6 @@
-{}
+{
+  "greeting": {
+    "message": "Hello",
+    "_description": "A simple greeting."
+  }
+}

src/assets/locales/resources_fr_CA.json

@@ -0,0 +1,6 @@
+{
+  "greeting": {
+    "message": "Bonjour",
+    "_description": "A simple greeting."
+  }
+}

tsconfig.json

@@ -1,7 +1,12 @@
 {
   "extends": "./node_modules/@blackbaud/skyux-builder/tsconfig",
   "compilerOptions": {
-    "module": "commonjs"
+    "module": "commonjs",
+    "paths": {
+      "@skyux/i18n": [
+        "./src/app/public"
+      ]
+    }
   },
   "exclude": [
     "node_modules"