fix: simplify component logic

app/assets/javascripts/directives/views/componentView.ts

@@ -55,17 +55,18 @@ class ComponentViewCtrl implements ComponentViewScope {
   }
 
   $onDestroy() {
+    this.application.componentManager.onComponentIframeDestroyed(this.component.uuid);
+    if(this.liveComponent) {
+      this.liveComponent.deinit();
+    } else {
+      this.application.componentManager.removeTemporaryTemplateComponent(this.templateComponent);
+    }
     this.cleanUpOn();
     (this.cleanUpOn as any) = undefined;
     this.unregisterComponentHandler();
     (this.unregisterComponentHandler as any) = undefined;
     this.unregisterDesktopObserver();
     (this.unregisterDesktopObserver as any) = undefined;
-    if(this.liveComponent) {
-      this.liveComponent.deinit();
-    } else {
-      this.application.componentManager.removeTemporaryTemplateComponent(this.templateComponent);
-    }
     (this.templateComponent as any) = undefined;
     (this.liveComponent as any) = undefined;
     (this.application as any) = undefined;
@@ -91,6 +92,7 @@ class ComponentViewCtrl implements ComponentViewScope {
     return this.templateComponent || this.liveComponent?.item;
   }
 
+  /** @template */
   public onIframeInit() {
     /** Perform in timeout required so that dynamic iframe id is set (based on ctrl values) */
     this.$timeout(() => {

app/assets/javascripts/services/themeManager.ts

@@ -6,7 +6,7 @@ import {
   SNTheme,
   ComponentArea,
   removeFromArray,
-  ApplicationEvent
+  ApplicationEvent, ContentType
 } from 'snjs';
 import { AppStateEvent } from '@/ui_models/app_state';
 
@@ -17,24 +17,16 @@ export class ThemeManager extends ApplicationService {
   private activeThemes: string[] = []
   private unsubState?: () => void
   private unregisterDesktop!: () => void
-  private unregisterComponent!: () => void
+  private unregisterStream!: () => void
 
-  /** @override */
-  async onAppLaunch() {
-    super.onAppLaunch();
-    this.unsubState = this.webApplication.getAppState().addObserver(
-      async (eventName) => {
-        if (eventName === AppStateEvent.DesktopExtsReady) {
-          this.activateCachedThemes();
-        }
-      }
-    );
-  }
-
-  onAppEvent(event: ApplicationEvent) {
+  async onAppEvent(event: ApplicationEvent) {
     super.onAppEvent(event);
     if (event === ApplicationEvent.SignedOut) {
       this.deactivateAllThemes();
+    } else if (event === ApplicationEvent.StorageReady) {
+      if (!this.webApplication.getDesktopService().isDesktop) {
+        await this.activateCachedThemes();
+      }
     }
   }
 
@@ -47,19 +39,23 @@ export class ThemeManager extends ApplicationService {
     (this.unsubState as any) = undefined;
     this.activeThemes.length = 0;
     this.unregisterDesktop();
-    this.unregisterComponent();
+    this.unregisterStream();
     (this.unregisterDesktop as any) = undefined;
-    (this.unregisterComponent as any) = undefined;
+    (this.unregisterStream as any) = undefined;
     super.deinit();
   }
 
   /** @override */
   async onAppStart() {
     super.onAppStart();
     this.registerObservers();
-    if (!this.webApplication.getDesktopService().isDesktop) {
-      this.activateCachedThemes();
-    }
+    this.unsubState = this.webApplication.getAppState().addObserver(
+      async (eventName) => {
+        if (eventName === AppStateEvent.DesktopExtsReady) {
+          this.activateCachedThemes();
+        }
+      }
+    );
   }
 
   private async activateCachedThemes() {
@@ -81,17 +77,16 @@ export class ThemeManager extends ApplicationService {
         }
       });
 
-    this.unregisterComponent = this.application!.componentManager!.registerHandler({
-      identifier: 'themeManager',
-      areas: [ComponentArea.Themes],
-      activationHandler: (uuid, component) => {
-        if (component?.active) {
-          this.activateTheme(component as SNTheme);
+    this.unregisterStream = this.application.streamItems(ContentType.Theme, (items) => {
+      const themes = items as SNTheme[];
+      for (const theme of themes) {
+        if (theme.active) {
+          this.activateTheme(theme);
         } else {
-          this.deactivateTheme(uuid);
+          this.deactivateTheme(theme.uuid);
         }
       }
-    });
+    })
   }
 
   private deactivateAllThemes() {

app/assets/javascripts/views/abstract/pure_view_ctrl.ts

@@ -124,6 +124,8 @@ export class PureViewCtrl<P = CtrlProps, S = CtrlState> {
         this.onAppFullSync();
       } else if (eventName === ApplicationEvent.KeyStatusChanged) {
         this.onAppKeyChange();
+      } else if (eventName === ApplicationEvent.LocalDataLoaded) {
+        this.onLocalDataLoaded();
       }
     });
   }
@@ -137,6 +139,10 @@ export class PureViewCtrl<P = CtrlProps, S = CtrlState> {
     await this.resetState();
   }
 
+  onLocalDataLoaded() {
+    /** Optional override */
+  }
+
   async onAppLaunch() {
     /** Optional override */
   }

app/assets/javascripts/views/editor/editor_view.ts

@@ -5,6 +5,7 @@ import angular from 'angular';
 import {
   ApplicationEvent,
   isPayloadSourceRetrieved,
+  isPayloadSourceInternalChange,
   ContentType,
   ProtectedAction,
   SNComponent,
@@ -209,12 +210,6 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
     });
   }
 
-  $onDestroy() {
-    if (this.state.tagsComponent) {
-      this.application.componentManager!.deregisterComponent(this.state.tagsComponent.uuid);
-    }
-  }
-
   /** @override */
   getInitialState() {
     return {
@@ -337,7 +332,10 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
 
     this.removeComponentsObserver = this.application.streamItems(
       ContentType.Component,
-      async () => {
+      async (_items, source) => {
+        if (isPayloadSourceInternalChange(source!)) {
+          return;
+        }
         if (!this.note) return;
         this.reloadStackComponents();
         this.reloadNoteTagsComponent();
@@ -350,25 +348,15 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
     const newEditor = this.application.componentManager!.editorForNote(this.note);
     const currentEditor = this.state.editorComponent;
     if (currentEditor?.uuid !== newEditor?.uuid) {
-      const unloading = this.setState({
+      await this.setState({
         /** Unload current component view so that we create a new one */
         editorUnloading: true
       });
-      if (newEditor) {
-        /** Register this new editor while the editor view is reloading */
-        this.application.componentManager!.registerComponent(newEditor.uuid);
-      }
-      await unloading;
-      const reloading = this.setState({
+      await this.setState({
         /** Reload component view */
         editorComponent: newEditor,
         editorUnloading: false,
       });
-      if (currentEditor) {
-        /** Deregister the current (previous) editor while the editor view is reloading */
-        this.application.componentManager!.deregisterComponent(currentEditor.uuid);
-      }
-      await reloading;
       this.reloadFont();
     }
     this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.Editor);
@@ -1066,15 +1054,6 @@ class EditorViewCtrl extends PureViewCtrl<{}, EditorState> {
   reloadNoteTagsComponent() {
     const [tagsComponent] =
       this.application.componentManager!.componentsForArea(ComponentArea.NoteTags);
-    if (tagsComponent?.uuid !== this.state.tagsComponent?.uuid) {
-      if (tagsComponent) {
-        if (tagsComponent.active) {
-          this.application.componentManager!.registerComponent(tagsComponent.uuid);
-        } else {
-          this.application.componentManager!.deregisterComponent(tagsComponent.uuid);
-        }
-      }
-    }
     this.setState({
       tagsComponent: tagsComponent?.active ? tagsComponent : undefined
     });

app/assets/javascripts/views/tags/tags_view.ts

@@ -46,7 +46,8 @@ class TagsViewCtrl extends PureViewCtrl<{}, TagState> {
   private editingOriginalName?: string
   formData: { tagTitle?: string } = {}
   titles: Partial<Record<UuidString, string>> = {}
-  private removeTagsObserver?: () => void
+  private removeTagsObserver!: () => void
+  private removeFoldersObserver!: () => void
 
   /* @ngInject */
   constructor(
@@ -60,7 +61,8 @@ class TagsViewCtrl extends PureViewCtrl<{}, TagState> {
 
   deinit() {
     this.removeTagsObserver?.();
-    this.removeTagsObserver = undefined;
+    (this.removeTagsObserver as any) = undefined;
+    (this.removeFoldersObserver as any) = undefined;
     this.unregisterComponent();
     this.unregisterComponent = undefined;
     super.deinit();
@@ -112,6 +114,13 @@ class TagsViewCtrl extends PureViewCtrl<{}, TagState> {
   }
 
   beginStreamingItems() {
+    this.removeFoldersObserver = this.application.streamItems(
+      [ContentType.Component],
+      async (_items) => {
+        this.component = this.application.componentManager
+          .componentsForArea(ComponentArea.TagsList)[0];
+      });
+
     this.removeTagsObserver = this.application.streamItems(
       [ContentType.Tag, ContentType.SmartTag],
       async (items) => {
@@ -218,8 +227,8 @@ class TagsViewCtrl extends PureViewCtrl<{}, TagState> {
 
   onPanelResize = (
     newWidth: number,
-    lastLeft: number,
-    isAtMaxWidth: boolean,
+    _lastLeft: number,
+    _isAtMaxWidth: boolean,
     isCollapsed: boolean
   ) => {
     this.application.getPrefsService().setUserPrefValue(
@@ -237,12 +246,6 @@ class TagsViewCtrl extends PureViewCtrl<{}, TagState> {
     this.unregisterComponent = this.application.componentManager!.registerHandler({
       identifier: 'tags',
       areas: [ComponentArea.TagsList],
-      activationHandler: (_, component) => {
-        this.component = component;
-      },
-      contextRequestHandler: () => {
-        return undefined;
-      },
       actionHandler: (_, action, data) => {
         if (action === ComponentAction.SelectItem) {
           if (data.item.content_type === ContentType.Tag) {

app/assets/templates/directives/component-view.pug

@@ -25,7 +25,7 @@
             .sk-p
               | Extensions are in a read-only state.
     .right
-      .sk-app-bar-item(ng-click='ctrl.reloadComponent()')
+      .sk-app-bar-item(ng-click='ctrl.reloadIframe()')
         .sk-button.info
           .sk-label Reload
       .sk-app-bar-item

dist/@types/app/assets/javascripts/services/autolock_service.d.ts

@@ -11,6 +11,7 @@ export declare class AutolockService extends ApplicationService {
     private lockApplication;
     setAutoLockInterval(interval: number): Promise<void>;
     getAutoLockInterval(): Promise<any>;
+    deleteAutolockPreference(): Promise<void>;
     /**
      *  Verify document is in focus every so often as visibilitychange event is
      *  not triggered on a typical window blur event but rather on tab changes.

dist/@types/app/assets/javascripts/services/themeManager.d.ts

@@ -4,10 +4,8 @@ export declare class ThemeManager extends ApplicationService {
     private activeThemes;
     private unsubState?;
     private unregisterDesktop;
-    private unregisterComponent;
-    /** @override */
-    onAppLaunch(): Promise<void>;
-    onAppEvent(event: ApplicationEvent): void;
+    private unregisterStream;
+    onAppEvent(event: ApplicationEvent): Promise<void>;
     get webApplication(): WebApplication;
     deinit(): void;
     /** @override */

dist/@types/app/assets/javascripts/views/abstract/pure_view_ctrl.d.ts

@@ -36,6 +36,7 @@ export declare class PureViewCtrl<P = CtrlProps, S = CtrlState> {
     onAppEvent(eventName: ApplicationEvent): void;
     /** @override */
     onAppStart(): Promise<void>;
+    onLocalDataLoaded(): void;
     onAppLaunch(): Promise<void>;
     onAppKeyChange(): Promise<void>;
     onAppIncrementalSync(): void;

package.json

@@ -68,6 +68,6 @@
   },
   "dependencies": {
     "sncrypto": "github:standardnotes/sncrypto#8794c88daa967eaae493cd5fdec7506d52b257ad",
-    "snjs": "github:standardnotes/snjs#7abfb3eb46db1409dbcb152b3d9d14ee0453c4a6"
+    "snjs": "github:standardnotes/snjs#30520edbd80564d584c4b00a09b552d89d1c9e26"
   }
 }