feat(web): extract ui-services package

packages/web/src/javascripts/Application/Application.ts

@@ -1,11 +1,5 @@
 import { WebCrypto } from '@/Application/Crypto'
-import { WebAlertService } from '@/Services/AlertService'
-import { ArchiveManager } from '@/Services/ArchiveManager'
-import { AutolockService } from '@/Services/AutolockService'
-import { DesktopManager } from '@/Services/DesktopManager'
-import { IOService } from '@/Services/IOService'
-import { ThemeManager } from '@/Services/ThemeManager'
-import { ViewControllerManager } from '@/Services/ViewControllerManager'
+import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { WebOrDesktopDevice } from '@/Application/Device/WebOrDesktopDevice'
 import {
   DeinitSource,
@@ -21,11 +15,14 @@ import {
   SNTag,
   ContentType,
   DecryptedItemInterface,
+  WebAppEvent,
+  WebApplicationInterface,
 } from '@standardnotes/snjs'
 import { makeObservable, observable } from 'mobx'
 import { PanelResizedData } from '@/Types/PanelResizedData'
-import { WebAppEvent } from './WebAppEvent'
 import { isDesktopApplication } from '@/Utils'
+import { DesktopManager } from './Device/DesktopManager'
+import { ArchiveManager, AutolockService, IOService, ThemeManager, WebAlertService } from '@standardnotes/ui-services'
 
 type WebServices = {
   viewControllerManager: ViewControllerManager
@@ -38,7 +35,7 @@ type WebServices = {
 
 export type WebEventObserver = (event: WebAppEvent, data?: unknown) => void
 
-export class WebApplication extends SNApplication {
+export class WebApplication extends SNApplication implements WebApplicationInterface {
   private webServices!: WebServices
   private webEventObservers: WebEventObserver[] = []
   public itemControllerGroup: ItemGroupController

packages/web/src/javascripts/Application/ApplicationGroup.ts

@@ -6,14 +6,12 @@ import {
   InternalEventBus,
   isDesktopDevice,
 } from '@standardnotes/snjs'
-import { ViewControllerManager } from '@/Services/ViewControllerManager'
+import { ArchiveManager, IOService, AutolockService, ThemeManager } from '@standardnotes/ui-services'
+
+import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { getPlatform, isDesktopApplication } from '@/Utils'
-import { ArchiveManager } from '@/Services/ArchiveManager'
-import { DesktopManager } from '@/Services/DesktopManager'
-import { IOService } from '@/Services/IOService'
-import { AutolockService } from '@/Services/AutolockService'
-import { ThemeManager } from '@/Services/ThemeManager'
 import { WebOrDesktopDevice } from '@/Application/Device/WebOrDesktopDevice'
+import { DesktopManager } from './Device/DesktopManager'
 
 const createApplication = (
   descriptor: ApplicationDescriptor,

packages/web/src/javascripts/Application/Device/DesktopManager.ts

@@ -0,0 +1,160 @@
+import {
+  SNComponent,
+  ComponentMutator,
+  AppDataField,
+  ApplicationService,
+  ApplicationEvent,
+  removeFromArray,
+  DesktopManagerInterface,
+  InternalEventBus,
+  DecryptedTransferPayload,
+  ComponentContent,
+  assert,
+  DesktopClientRequiresWebMethods,
+  DesktopDeviceInterface,
+  WebApplicationInterface,
+  WebAppEvent,
+} from '@standardnotes/snjs'
+
+export class DesktopManager
+  extends ApplicationService
+  implements DesktopManagerInterface, DesktopClientRequiresWebMethods
+{
+  updateObservers: {
+    callback: (component: SNComponent) => void
+  }[] = []
+
+  dataLoaded = false
+  lastSearchedText?: string
+
+  constructor(application: WebApplicationInterface, private device: DesktopDeviceInterface) {
+    super(application, new InternalEventBus())
+  }
+
+  get webApplication() {
+    return this.application as WebApplicationInterface
+  }
+
+  override deinit() {
+    this.updateObservers.length = 0
+    super.deinit()
+  }
+
+  override async onAppEvent(eventName: ApplicationEvent) {
+    super.onAppEvent(eventName).catch(console.error)
+    if (eventName === ApplicationEvent.LocalDataLoaded) {
+      this.dataLoaded = true
+      this.device.onInitialDataLoad()
+    } else if (eventName === ApplicationEvent.MajorDataChange) {
+      this.device.onMajorDataChange()
+    }
+  }
+
+  saveBackup() {
+    this.device.onMajorDataChange()
+  }
+
+  getExtServerHost(): string {
+    assert(this.device.extensionsServerHost)
+
+    return this.device.extensionsServerHost
+  }
+
+  /**
+   * Sending a component in its raw state is really slow for the desktop app
+   * Keys are not passed into ItemParams, so the result is not encrypted
+   */
+  convertComponentForTransmission(component: SNComponent) {
+    return component.payloadRepresentation().ejected()
+  }
+
+  syncComponentsInstallation(components: SNComponent[]) {
+    Promise.all(
+      components.map((component) => {
+        return this.convertComponentForTransmission(component)
+      }),
+    )
+      .then((payloads) => {
+        this.device.syncComponents(payloads)
+      })
+      .catch(console.error)
+  }
+
+  registerUpdateObserver(callback: (component: SNComponent) => void): () => void {
+    const observer = {
+      callback: callback,
+    }
+    this.updateObservers.push(observer)
+    return () => {
+      removeFromArray(this.updateObservers, observer)
+    }
+  }
+
+  searchText(text?: string) {
+    this.lastSearchedText = text
+    this.device.onSearch(text)
+  }
+
+  redoSearch() {
+    if (this.lastSearchedText) {
+      this.searchText(this.lastSearchedText)
+    }
+  }
+
+  updateAvailable(): void {
+    this.webApplication.notifyWebEvent(WebAppEvent.NewUpdateAvailable)
+  }
+
+  windowGainedFocus(): void {
+    this.webApplication.notifyWebEvent(WebAppEvent.WindowDidFocus)
+  }
+
+  windowLostFocus(): void {
+    this.webApplication.notifyWebEvent(WebAppEvent.WindowDidBlur)
+  }
+
+  async onComponentInstallationComplete(componentData: DecryptedTransferPayload<ComponentContent>) {
+    const component = this.application.items.findItem(componentData.uuid)
+    if (!component) {
+      return
+    }
+
+    const updatedComponent = await this.application.mutator.changeAndSaveItem(
+      component,
+      (m) => {
+        const mutator = m as ComponentMutator
+        // eslint-disable-next-line camelcase
+        mutator.local_url = componentData.content.local_url as string
+        // eslint-disable-next-line camelcase
+        mutator.package_info = componentData.content.package_info
+        mutator.setAppDataItem(AppDataField.ComponentInstallError, undefined)
+      },
+      undefined,
+    )
+
+    for (const observer of this.updateObservers) {
+      observer.callback(updatedComponent as SNComponent)
+    }
+  }
+
+  async requestBackupFile(): Promise<string | undefined> {
+    const encrypted = this.application.hasProtectionSources()
+    const data = encrypted
+      ? await this.application.createEncryptedBackupFileForAutomatedDesktopBackups()
+      : await this.application.createDecryptedBackupFile()
+
+    if (data) {
+      return JSON.stringify(data, null, 2)
+    }
+
+    return undefined
+  }
+
+  didBeginBackup() {
+    this.webApplication.notifyWebEvent(WebAppEvent.BeganBackupDownload)
+  }
+
+  didFinishBackup(success: boolean) {
+    this.webApplication.notifyWebEvent(WebAppEvent.EndedBackupDownload, { success })
+  }
+}

packages/web/src/javascripts/Application/WebAppEvent.ts

@@ -1,9 +0,0 @@
-export enum WebAppEvent {
-  NewUpdateAvailable = 'NewUpdateAvailable',
-  EditorFocused = 'EditorFocused',
-  BeganBackupDownload = 'BeganBackupDownload',
-  EndedBackupDownload = 'EndedBackupDownload',
-  PanelResized = 'PanelResized',
-  WindowDidFocus = 'WindowDidFocus',
-  WindowDidBlur = 'WindowDidBlur',
-}