fix: universal services stubbed

Author: patrickmichalina

fuse.ts

@@ -4,6 +4,7 @@ import { resolve } from 'path'
 import { argv } from 'yargs'
 import shabang from './tools/scripts/fuse-shebang'
 import { SparkyFile } from 'fuse-box/sparky/SparkyFile'
+import { unlinkSync } from 'fs'
 
 const appName = 'fng'
 const outputDir = '.build'
@@ -47,7 +48,7 @@ task('cp.jest', () => {
   return src('jest/**', { base: 'src/templates/unit-tests' }).dest('.build/')
 })
 
-task('bundle', ['cp.jest', 'ng.svg'], () => {
+task('bundle', ['cp.jest', 'ng.util', 'ng.svg'], () => {
   bundle.instructions('> [src/index.ts]')
   !isProdBuild &&
     bundle.watch(`src/**`).completed(fp => shabang(fp.bundle, absOutputPath))
@@ -82,3 +83,37 @@ task('ng.svg', () => {
   config.bundle('index').instructions('> [src/modules/svg/test.ts]')
   config.run()
 })
+
+task('ng.util', () => {
+  const config = FuseBox.init({
+    homeDir,
+    target: 'universal@es5',
+    output: `${outputDir}/modules/util/$name.js`,
+    globals: {
+      default: '*'
+    },
+    package: {
+      name: 'default',
+      main: outputPath
+    }
+  })
+  src('**/*.ts', { base: 'src/modules/util' })
+    .dest('.build/modules/util')
+    .exec()
+    .then(() => {
+      return src('.build/modules/util/index.ts')
+        .file('*', (file: SparkyFile) => file.rename('index.d.ts'))
+        .dest('.build/modules/util/$name')
+        .exec()
+        .then(() => {
+          unlinkSync('.build/modules/util/index.ts')
+        })
+    })
+
+  config
+    .bundle('index')
+    .instructions(
+      '> [src/modules/util/tokens.ts] + [src/modules/util/window.service.ts]'
+    )
+  config.run()
+})

package-lock.json

@@ -43,6 +43,7 @@
     "@types/node-sass": "^3.10.32",
     "@types/npm": "^2.0.29",
     "@types/sinon": "^5.0.1",
+    "@types/ua-parser-js": "^0.7.32",
     "@types/yargs": "^11.0.0",
     "chokidar-cli": "^1.2.0",
     "condition-circle": "^2.0.1",
@@ -98,6 +99,7 @@
     "ts-node": "^7.0.0",
     "tslint": "^5.10.0",
     "typescript": "2.7.2",
+    "ua-parser-js": "^0.7.18",
     "uglify-js": "^3.4.3",
     "yargs": "^12.0.1",
     "zone.js": "^0.8.26"

package.json

@@ -0,0 +1,53 @@
+import { Inject, Injectable } from '@angular/core'
+import {
+  HttpHandler,
+  HttpInterceptor,
+  HttpRequest,
+  HttpResponse
+} from '@angular/common/http'
+import {
+  CACHE_TAG_CONFIG,
+  CACHE_TAG_FACTORY,
+  CacheFactory,
+  CacheTagConfig
+} from './http-cache-tag.server.module'
+import { map } from 'rxjs/operators'
+
+// tslint:disable:no-class
+// tslint:disable:no-this
+// tslint:disable:no-if-statement
+@Injectable()
+export class HttpCacheTagInterceptor implements HttpInterceptor {
+  constructor(
+    @Inject(CACHE_TAG_CONFIG) private config: CacheTagConfig,
+    @Inject(CACHE_TAG_FACTORY) private factory: CacheFactory
+  ) {
+    if (!config.headerKey) throw new Error('missing config.headerKey')
+    if (!config.cacheableResponseCodes)
+      throw new Error('missing config.cacheableResponseCodes')
+  }
+
+  isCacheableCode(code: number) {
+    return this.config.cacheableResponseCodes.find(a => a === code)
+  }
+
+  isCacheableUrl(url: string | null) {
+    if (!this.config.cacheableUrls || !url || url === null) return true
+    return this.config.cacheableUrls.test(url)
+  }
+
+  intercept(req: HttpRequest<any>, next: HttpHandler) {
+    return next.handle(req).pipe(
+      map(event => {
+        if (
+          event instanceof HttpResponse &&
+          this.isCacheableCode(event.status) &&
+          this.isCacheableUrl(event.url)
+        ) {
+          this.factory(event, this.config)
+        }
+        return event
+      })
+    )
+  }
+}

src/modules/http-cache-tag/http-cache-tag-interceptor.service.ts

@@ -0,0 +1,66 @@
+import {
+  InjectionToken,
+  ModuleWithProviders,
+  NgModule,
+  Optional,
+  SkipSelf
+} from '@angular/core'
+import { HTTP_INTERCEPTORS, HttpResponse } from '@angular/common/http'
+import { HttpCacheTagInterceptor } from './http-cache-tag-interceptor.service'
+
+export const CACHE_TAG_CONFIG = new InjectionToken<CacheTagConfig>(
+  'cfg.http.ct'
+)
+export const CACHE_TAG_FACTORY = new InjectionToken<CacheFactory>(
+  'cfg.http.ctf'
+)
+
+export interface CacheTagConfig {
+  readonly headerKey: string
+  readonly cacheableResponseCodes: ReadonlyArray<number>
+  readonly cacheableUrls?: RegExp
+}
+
+export type CacheFactory = (
+  httpResponse: HttpResponse<any>,
+  config: CacheTagConfig
+) => void
+
+// tslint:disable-next-line:no-class
+@NgModule()
+export class HttpCacheTagModule {
+  static forRoot(
+    configProvider: any,
+    factoryProvider: any
+  ): ModuleWithProviders {
+    return {
+      ngModule: HttpCacheTagModule,
+      providers: [
+        {
+          provide: HttpCacheTagInterceptor,
+          useClass: HttpCacheTagInterceptor,
+          deps: [CACHE_TAG_CONFIG, CACHE_TAG_FACTORY]
+        },
+        {
+          provide: HTTP_INTERCEPTORS,
+          useExisting: HttpCacheTagInterceptor,
+          multi: true
+        },
+        configProvider,
+        factoryProvider
+      ]
+    }
+  }
+
+  constructor(
+    @Optional()
+    @SkipSelf()
+    parentModule: HttpCacheTagModule
+  ) {
+    // tslint:disable-next-line:no-if-statement
+    if (parentModule)
+      throw new Error(
+        'HttpCachTageModule already loaded. Import in root module only.'
+      )
+  }
+}

src/modules/http-cache-tag/http-cache-tag.server.module.ts

@@ -0,0 +1,8 @@
+export { HttpCacheTagInterceptor } from './http-cache-tag-interceptor.service'
+export {
+  HttpCacheTagModule,
+  CACHE_TAG_CONFIG,
+  CACHE_TAG_FACTORY,
+  CacheFactory,
+  CacheTagConfig
+} from './http-cache-tag.server.module'

src/modules/http-cache-tag/index.ts

@@ -0,0 +1,13 @@
+import { Directive, ElementRef, Renderer2 } from '@angular/core'
+
+// tslint:disable-next-line:no-class
+@Directive({
+  selector: 'a[fngExternalLink]'
+})
+export class ExternalLinkDirective {
+  constructor(el: ElementRef, rd: Renderer2) {
+    const anchor = el.nativeElement as HTMLAnchorElement
+    rd.setAttribute(anchor, 'target', '_blank')
+    rd.setAttribute(anchor, 'rel', 'noopener')
+  }
+}

src/modules/util/external-link.directive.ts

@@ -0,0 +1,3 @@
+export { WINDOW } from './tokens'
+
+export { IWindowService, WindowService } from './window.service'

src/modules/util/index.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core'
+
+export const WINDOW = new InjectionToken<Window>('fng.window')

src/modules/util/tokens.ts

@@ -0,0 +1,139 @@
+import { REQUEST } from '@nguniversal/express-engine/tokens'
+import { Inject, Injectable, PLATFORM_ID } from '@angular/core'
+import { UAParser } from 'ua-parser-js'
+import { Request } from 'express'
+import { isPlatformServer } from '@angular/common'
+import { WINDOW } from './tokens'
+
+export interface IUserAgentService {
+  readonly userAgent: () => IUAParser.IResult
+  readonly isiPhone: () => boolean
+  readonly isiPad: () => boolean
+  readonly isMobile: () => boolean
+  readonly isTablet: () => boolean
+  readonly isDesktop: () => boolean
+  readonly isChrome: () => boolean
+  readonly isFirefox: () => boolean
+  readonly isSafari: () => boolean
+  readonly isIE: () => boolean
+  readonly isIE7: () => boolean
+  readonly isIE8: () => boolean
+  readonly isIE9: () => boolean
+  readonly isIE10: () => boolean
+  readonly isIE11: () => boolean
+  readonly isWindows: () => boolean
+  readonly isWindowsXP: () => boolean
+  readonly isWindows7: () => boolean
+  readonly isWindows8: () => boolean
+  readonly isMac: () => boolean
+  readonly isChromeOS: () => boolean
+  readonly isiOS: () => boolean
+  readonly isAndroid: () => boolean
+}
+
+// tslint:disable:no-class
+// tslint:disable:no-this
+@Injectable()
+export class UserAgentService implements IUserAgentService {
+  constructor(
+    @Inject(PLATFORM_ID) private platformId: any,
+    @Inject(REQUEST) private req: Request,
+    @Inject(WINDOW) private _window: Window
+  ) {}
+
+  public userAgent(): IUAParser.IResult {
+    const ua = isPlatformServer(this.platformId)
+      ? new UAParser(this.req.headers['user-agent'] as string | undefined)
+      : new UAParser(this._window.navigator.userAgent)
+
+    return ua.getResult()
+  }
+
+  isiPhone(): boolean {
+    return this.userAgent().device.type === 'iPhone'
+  }
+
+  isiPad(): boolean {
+    return this.userAgent().device.type === 'iPad'
+  }
+
+  isMobile(): boolean {
+    return this.userAgent().device.type === 'mobile'
+  }
+
+  isTablet(): boolean {
+    return this.userAgent().device.type === 'tablet'
+  }
+
+  isDesktop(): boolean {
+    return !this.isTablet && !this.isMobile
+  }
+
+  isChrome(): boolean {
+    return this.userAgent().browser.name === 'Chrome'
+  }
+
+  isFirefox(): boolean {
+    return this.userAgent().browser.name === 'Firefox'
+  }
+
+  isSafari(): boolean {
+    return this.userAgent().browser.name === 'Safari'
+  }
+
+  isIE(): boolean {
+    return this.userAgent().browser.name === 'IE'
+  }
+
+  isIE7(): boolean {
+    return this.isIE && this.userAgent().browser.major === '7'
+  }
+
+  isIE8(): boolean {
+    return this.isIE && this.userAgent().browser.major === '8'
+  }
+
+  isIE9(): boolean {
+    return this.isIE && this.userAgent().browser.major === '9'
+  }
+
+  isIE10(): boolean {
+    return this.isIE && this.userAgent().browser.major === '10'
+  }
+
+  isIE11(): boolean {
+    return this.isIE && this.userAgent().browser.major === '11'
+  }
+
+  isWindows(): boolean {
+    return this.userAgent().os.name === 'Windows'
+  }
+
+  isWindowsXP(): boolean {
+    return this.isWindows && this.userAgent().os.version === 'XP'
+  }
+
+  isWindows7(): boolean {
+    return this.isWindows && this.userAgent().os.version === '7'
+  }
+
+  isWindows8(): boolean {
+    return this.isWindows && this.userAgent().os.version === '8'
+  }
+
+  isMac(): boolean {
+    return this.userAgent().os.name === 'Mac OS X'
+  }
+
+  isChromeOS(): boolean {
+    return this.userAgent().os.name === 'Chromium OS'
+  }
+
+  isiOS(): boolean {
+    return this.userAgent().os.name === 'iOS'
+  }
+
+  isAndroid(): boolean {
+    return this.userAgent().os.name === 'Android'
+  }
+}