feature: add platform layer

app/assets/javascripts/app.ts

@@ -1,6 +1,7 @@
 'use strict';
 
-declare const __VERSION__: string
+declare const __VERSION__: string;
+declare const __PLATFORM_WEB__: boolean;
 
 import angular from 'angular';
 import { configRoutes } from './routes';
@@ -50,13 +51,22 @@ import {
 
 import { trusted } from './filters';
 import { isDev } from './utils';
+import { Platform, WebPlatform } from './services/platform';
 
+if (__PLATFORM_WEB__) {
+  startApplication(new WebPlatform());
+} else {
+  (window as any).startApplication = startApplication;
+}
+
+function startApplication(platform: Platform) {
   angular.module('app', ['ngSanitize']);
 
   // Config
   angular
     .module('app')
     .config(configRoutes)
+    .constant('platform', platform)
     .constant('appVersion', __VERSION__);
 
   // Controllers
@@ -121,3 +131,4 @@ if (isDev) {
       },
     });
   }
+}

app/assets/javascripts/interface.ts

@@ -1,13 +1,16 @@
 import { DeviceInterface, getGlobalScope, SNApplication } from 'snjs';
 import { Database } from '@/database';
-
+import { Platform } from './services/platform';
-const KEYCHAIN_STORAGE_KEY = 'keychain';
 
 export class WebDeviceInterface extends DeviceInterface {
 
   private database: Database
 
-  constructor(namespace: string, timeout: any) {
+  constructor(
+    namespace: string,
+    timeout: any,
+    private platform: Platform
+  ) {
     super(
       namespace,
       timeout || setTimeout.bind(getGlobalScope()),
@@ -97,19 +100,16 @@ export class WebDeviceInterface extends DeviceInterface {
     return this.database.clearAllPayloads();
   }
 
-  async getKeychainValue() {
+  getKeychainValue(): Promise<unknown> {
-    const value = localStorage.getItem(KEYCHAIN_STORAGE_KEY);
+    return this.platform.getKeychainValue();
-    if (value) {
-      return JSON.parse(value);
-    }
   }
 
-  async setKeychainValue(value: any) {
+  setKeychainValue(value: any) {
-    localStorage.setItem(KEYCHAIN_STORAGE_KEY, JSON.stringify(value));
+    return this.platform.setKeychainValue(value);
   }
 
-  async clearKeychainValue() {
+  clearKeychainValue() {
-    localStorage.removeItem(KEYCHAIN_STORAGE_KEY);
+    return this.platform.clearKeychainValue();
   }
 
   openUrl(url: string) {

app/assets/javascripts/services/platform.ts

@@ -0,0 +1,24 @@
+/** Platform-specific (i-e desktop/web) behavior is handled by a Platform object. */
+export interface Platform {
+  getKeychainValue(): Promise<unknown>;
+  setKeychainValue(value: any): Promise<void>;
+  clearKeychainValue(): Promise<void>;
+}
+
+const KEYCHAIN_STORAGE_KEY = 'keychain';
+
+export class WebPlatform implements Platform {
+  async getKeychainValue(): Promise<unknown> {
+    const value = localStorage.getItem(KEYCHAIN_STORAGE_KEY);
+    if (value) {
+      return JSON.parse(value);
+    }
+  }
+  async setKeychainValue(value: any): Promise<void> {
+    localStorage.setItem(KEYCHAIN_STORAGE_KEY, JSON.stringify(value));
+  }
+
+  async clearKeychainValue(): Promise<void> {
+    localStorage.removeItem(KEYCHAIN_STORAGE_KEY);
+  }
+}

app/assets/javascripts/ui_models/application.ts

@@ -26,6 +26,7 @@ import {
 } from '@/services';
 import { AppState } from '@/ui_models/app_state';
 import { SNWebCrypto } from 'sncrypto/dist/sncrypto-web';
+import { Platform } from '@/services/platform';
 
 type WebServices = {
   appState: AppState
@@ -54,10 +55,15 @@ export class WebApplication extends SNApplication {
     $compile: ng.ICompileService,
     $timeout: ng.ITimeoutService,
     scope: ng.IScope,
-    onDeinit: (app: WebApplication) => void
+    onDeinit: (app: WebApplication) => void,
+    platform: Platform,
   ) {
     const namespace = '';
-    const deviceInterface = new WebDeviceInterface(namespace, $timeout);
+    const deviceInterface = new WebDeviceInterface(
+      namespace,
+      $timeout,
+      platform
+    );
     super(
       Environment.Web,
       platformFromString(getPlatformString()),

app/assets/javascripts/ui_models/application_group.ts

@@ -11,6 +11,7 @@ import {
   ThemeManager
 } from '@/services';
 import { AppState } from '@/ui_models/app_state';
+import { Platform } from '@/services/platform';
 
 type AppManagerChangeCallback = () => void
 
@@ -27,7 +28,8 @@ export class ApplicationGroup {
   constructor(
     $compile: ng.ICompileService,
     $rootScope: ng.IRootScopeService,
-    $timeout: ng.ITimeoutService
+    $timeout: ng.ITimeoutService,
+    private platform: Platform
   ) {
     this.$compile = $compile;
     this.$timeout = $timeout;
@@ -68,7 +70,8 @@ export class ApplicationGroup {
       this.$compile,
       this.$timeout,
       scope,
-      this.onApplicationDeinit
+      this.onApplicationDeinit,
+      this.platform
     );
     const appState = new AppState(
       this.$rootScope,

webpack.config.js

@@ -9,7 +9,8 @@ module.exports = {
   },
   plugins: [
     new webpack.DefinePlugin({
-      __VERSION__: JSON.stringify(require('./package.json').version)
+      __VERSION__: JSON.stringify(require('./package.json').version),
+      __PLATFORM_WEB__: JSON.stringify(true),
     }),
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output