feat(web): extract ui-services package

packages/snjs/lib/Services/ComponentManager/ComponentManager.spec.ts

@@ -10,10 +10,15 @@ import {
   FindNativeFeature,
   FeatureIdentifier,
 } from '@standardnotes/features'
-import { DesktopManagerInterface } from '@Lib/Services/ComponentManager/Types'
 import { ContentType } from '@standardnotes/common'
 import { GenericItem, SNComponent } from '@standardnotes/models'
-import { InternalEventBusInterface, Environment, Platform, AlertService } from '@standardnotes/services'
+import {
+  DesktopManagerInterface,
+  InternalEventBusInterface,
+  Environment,
+  Platform,
+  AlertService,
+} from '@standardnotes/services'
 import { ItemManager } from '@Lib/Services/Items/ItemManager'
 import { SNFeaturesService } from '@Lib/Services/Features/FeaturesService'
 import { SNComponentManager } from './ComponentManager'
@@ -34,7 +39,10 @@ describe('featuresService', () => {
       // eslint-disable-next-line @typescript-eslint/no-empty-function
       syncComponentsInstallation() {},
       // eslint-disable-next-line @typescript-eslint/no-empty-function
-      registerUpdateObserver() {},
+      registerUpdateObserver(_callback: (component: SNComponent) => void) {
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        return () => {}
+      },
       getExtServerHost() {
         return desktopExtHost
       },

packages/snjs/lib/Services/ComponentManager/ComponentManager.ts

@@ -3,21 +3,28 @@ import { SNPreferencesService } from '../Preferences/PreferencesService'
 import { SNFeaturesService } from '@Lib/Services/Features/FeaturesService'
 import { ContentType, DisplayStringForContentType } from '@standardnotes/common'
 import { ItemManager } from '@Lib/Services/Items/ItemManager'
-import { SNNote, SNTheme, SNComponent, ComponentMutator, PayloadEmitSource } from '@standardnotes/models'
+import {
+  ActionObserver,
+  SNNote,
+  SNTheme,
+  SNComponent,
+  ComponentMutator,
+  PayloadEmitSource,
+  PermissionDialog,
+} from '@standardnotes/models'
 import { SNSyncService } from '@Lib/Services/Sync/SyncService'
 import find from 'lodash/find'
 import uniq from 'lodash/uniq'
 import { ComponentArea, ComponentAction, ComponentPermission, FindNativeFeature } from '@standardnotes/features'
 import { Copy, filterFromArray, removeFromArray, sleep, assert } from '@standardnotes/utils'
 import { UuidString } from '@Lib/Types/UuidString'
-import {
-  PermissionDialog,
-  DesktopManagerInterface,
-  AllowedBatchContentTypes,
-} from '@Lib/Services/ComponentManager/Types'
-import { ActionObserver, ComponentViewer } from '@Lib/Services/ComponentManager/ComponentViewer'
+import { AllowedBatchContentTypes } from '@Lib/Services/ComponentManager/Types'
+import { ComponentViewer } from '@Lib/Services/ComponentManager/ComponentViewer'
 import {
   AbstractService,
+  ComponentManagerInterface,
+  ComponentViewerInterface,
+  DesktopManagerInterface,
   InternalEventBusInterface,
   Environment,
   Platform,
@@ -42,7 +49,7 @@ export enum ComponentManagerEvent {
 }
 
 export type EventData = {
-  componentViewer?: ComponentViewer
+  componentViewer?: ComponentViewerInterface
 }
 
 /**
@@ -50,9 +57,12 @@ export type EventData = {
  * and other components. The component manager primarily deals with iframes, and orchestrates
  * sending and receiving messages to and from frames via the postMessage API.
  */
-export class SNComponentManager extends AbstractService<ComponentManagerEvent, EventData> {
+export class SNComponentManager
+  extends AbstractService<ComponentManagerEvent, EventData>
+  implements ComponentManagerInterface
+{
   private desktopManager?: DesktopManagerInterface
-  private viewers: ComponentViewer[] = []
+  private viewers: ComponentViewerInterface[] = []
   private removeItemObserver!: () => void
   private permissionDialogs: PermissionDialog[] = []
 
@@ -137,7 +147,7 @@ export class SNComponentManager extends AbstractService<ComponentManagerEvent, E
     contextItem?: UuidString,
     actionObserver?: ActionObserver,
     urlOverride?: string,
-  ): ComponentViewer {
+  ): ComponentViewerInterface {
     const viewer = new ComponentViewer(
       component,
       this.itemManager,
@@ -159,7 +169,7 @@ export class SNComponentManager extends AbstractService<ComponentManagerEvent, E
     return viewer
   }
 
-  public destroyComponentViewer(viewer: ComponentViewer): void {
+  public destroyComponentViewer(viewer: ComponentViewerInterface): void {
     viewer.destroy()
     removeFromArray(this.viewers, viewer)
   }
@@ -316,11 +326,11 @@ export class SNComponentManager extends AbstractService<ComponentManagerEvent, E
     return this.itemManager.findItem<SNComponent>(uuid)
   }
 
-  findComponentViewer(identifier: string): ComponentViewer | undefined {
+  findComponentViewer(identifier: string): ComponentViewerInterface | undefined {
     return this.viewers.find((viewer) => viewer.identifier === identifier)
   }
 
-  componentViewerForSessionKey(key: string): ComponentViewer | undefined {
+  componentViewerForSessionKey(key: string): ComponentViewerInterface | undefined {
     return this.viewers.find((viewer) => viewer.sessionKey === key)
   }
 

packages/snjs/lib/Services/ComponentManager/ComponentViewer.ts

@@ -1,8 +1,19 @@
 import { SNPreferencesService } from '../Preferences/PreferencesService'
-import { FeatureStatus, FeaturesEvent } from '@Lib/Services/Features'
-import { Environment, Platform, AlertService } from '@standardnotes/services'
+import {
+  ComponentViewerInterface,
+  ComponentViewerError,
+  Environment,
+  FeatureStatus,
+  FeaturesEvent,
+  Platform,
+  AlertService,
+} from '@standardnotes/services'
 import { SNFeaturesService } from '@Lib/Services'
 import {
+  ActionObserver,
+  ComponentEventObserver,
+  ComponentViewerEvent,
+  ComponentMessage,
   SNComponent,
   PrefKey,
   NoteContent,
@@ -21,6 +32,8 @@ import {
   ComponentDataDomain,
   PayloadEmitSource,
   PayloadTimestampDefaults,
+  IncomingComponentItemPayload,
+  MessageData,
 } from '@standardnotes/models'
 import find from 'lodash/find'
 import uniq from 'lodash/uniq'
@@ -28,12 +41,10 @@ import remove from 'lodash/remove'
 import { SNSyncService } from '@Lib/Services/Sync/SyncService'
 import { environmentToString, platformToString } from '@Lib/Application/Platforms'
 import {
-  ComponentMessage,
   OutgoingItemMessagePayload,
   MessageReply,
   StreamItemsMessageData,
   AllowedBatchContentTypes,
-  IncomingComponentItemPayload,
   DeleteItemsMessageData,
   MessageReplyData,
 } from './Types'
@@ -53,7 +64,6 @@ import {
   sureSearchArray,
   isNotUndefined,
 } from '@standardnotes/utils'
-import { MessageData } from '..'
 
 type RunWithPermissionsCallback = (
   componentUuid: UuidString,
@@ -76,21 +86,9 @@ const ReadwriteActions = [
   ComponentAction.SetComponentData,
 ]
 
-export type ActionObserver = (action: ComponentAction, messageData: MessageData) => void
-
-export enum ComponentViewerEvent {
-  FeatureStatusUpdated = 'FeatureStatusUpdated',
-}
-type EventObserver = (event: ComponentViewerEvent) => void
-
-export enum ComponentViewerError {
-  OfflineRestricted = 'OfflineRestricted',
-  MissingUrl = 'MissingUrl',
-}
-
 type Writeable<T> = { -readonly [P in keyof T]: T[P] }
 
-export class ComponentViewer {
+export class ComponentViewer implements ComponentViewerInterface {
   private streamItems?: ContentType[]
   private streamContextItemOriginalMessage?: ComponentMessage
   private streamItemsOriginalMessage?: ComponentMessage
@@ -101,7 +99,7 @@ export class ComponentViewer {
   public overrideContextItem?: DecryptedItemInterface
   private featureStatus: FeatureStatus
   private removeFeaturesObserver: () => void
-  private eventObservers: EventObserver[] = []
+  private eventObservers: ComponentEventObserver[] = []
   private dealloced = false
 
   private window?: Window
@@ -189,7 +187,7 @@ export class ComponentViewer {
     ;(this.removeItemObserver as unknown) = undefined
   }
 
-  public addEventObserver(observer: EventObserver): () => void {
+  public addEventObserver(observer: ComponentEventObserver): () => void {
     this.eventObservers.push(observer)
 
     const thislessChangeObservers = this.eventObservers

packages/snjs/lib/Services/ComponentManager/Types.ts

@@ -1,24 +1,8 @@
-import {
-  ComponentArea,
-  ComponentAction,
-  ComponentPermission,
-  FeatureIdentifier,
-  LegacyFileSafeIdentifier,
-} from '@standardnotes/features'
-import { ItemContent, SNComponent, DecryptedTransferPayload } from '@standardnotes/models'
+import { ComponentArea, ComponentAction, FeatureIdentifier, LegacyFileSafeIdentifier } from '@standardnotes/features'
+import { ComponentMessage, ItemContent, MessageData } from '@standardnotes/models'
 import { UuidString } from '@Lib/Types/UuidString'
 import { ContentType } from '@standardnotes/common'
 
-export interface DesktopManagerInterface {
-  syncComponentsInstallation(components: SNComponent[]): void
-  registerUpdateObserver(callback: (component: SNComponent) => void): void
-  getExtServerHost(): string
-}
-
-export type IncomingComponentItemPayload = DecryptedTransferPayload & {
-  clientData: Record<string, unknown>
-}
-
 export type OutgoingItemMessagePayload = {
   uuid: string
   content_type: ContentType
@@ -63,46 +47,6 @@ export type StreamObserver = {
   contentTypes?: ContentType[]
 }
 
-export type PermissionDialog = {
-  component: SNComponent
-  permissions: ComponentPermission[]
-  permissionsString: string
-  actionBlock: (approved: boolean) => void
-  callback: (approved: boolean) => void
-}
-
-export enum KeyboardModifier {
-  Shift = 'Shift',
-  Ctrl = 'Control',
-  Meta = 'Meta',
-}
-
-export type MessageData = Partial<{
-  /** Related to the stream-item-context action */
-  item?: IncomingComponentItemPayload
-  /** Related to the stream-items action */
-  content_types?: ContentType[]
-  items?: IncomingComponentItemPayload[]
-  /** Related to the request-permission action */
-  permissions?: ComponentPermission[]
-  /** Related to the component-registered action */
-  componentData?: Record<string, unknown>
-  uuid?: UuidString
-  environment?: string
-  platform?: string
-  activeThemeUrls?: string[]
-  /** Related to set-size action */
-  width?: string | number
-  height?: string | number
-  type?: string
-  /** Related to themes action */
-  themes?: string[]
-  /** Related to clear-selection action */
-  content_type?: ContentType
-  /** Related to key-pressed action */
-  keyboardModifier?: KeyboardModifier
-}>
-
 export type MessageReplyData = {
   approved?: boolean
   deleted?: boolean
@@ -120,13 +64,6 @@ export type DeleteItemsMessageData = MessageData & {
   items: OutgoingItemMessagePayload[]
 }
 
-export type ComponentMessage = {
-  action: ComponentAction
-  sessionKey?: string
-  componentData?: Record<string, unknown>
-  data: MessageData
-}
-
 export type MessageReply = {
   action: ComponentAction
   original: ComponentMessage