#2581: add initialize trigger

src/devTools/editor/tabs/trigger/TriggerConfiguration.tsx

@@ -32,6 +32,7 @@ function supportsSelector(trigger: Trigger) {
 }
 
 function supportsTargetMode(trigger: Trigger) {
+  // XXX: why doesn't `appear` support target mode?
   return supportsSelector(trigger) && trigger !== "appear";
 }
 
@@ -50,6 +51,9 @@ const TriggerConfiguration: React.FC<{
       if (!supportsSelector(nextTrigger)) {
         setFieldValue("extensionPoint.definition.rootSelector", null);
         setFieldValue("extensionPoint.definition.attachMode", null);
+      }
+
+      if (!supportsTargetMode(nextTrigger)) {
         setFieldValue("extensionPoint.definition.targetMode", null);
       }
 
@@ -75,6 +79,7 @@ const TriggerConfiguration: React.FC<{
         >
           <option value="load">Page Load</option>
           <option value="interval">Interval</option>
+          <option value="initialize">Initialize</option>
           <option value="appear">Appear</option>
           <option value="click">Click</option>
           <option value="dblclick">Double Click</option>

src/devTools/editor/toolbar/ReloadToolbar.tsx

@@ -36,7 +36,7 @@ function isPanelElement(element: FormState | null): boolean {
  * @param element
  */
 function isAutomaticTrigger(element: FormState): boolean {
-  const automatic = ["load", "appear", "interval"];
+  const automatic = ["load", "appear", "initialize", "interval"];
   return (
     element?.type === "trigger" &&
     automatic.includes(element?.extensionPoint.definition.trigger)

src/extensionPoints/triggerExtension.ts

@@ -75,8 +75,10 @@ export type Trigger =
   | "interval"
   // `appear` is triggered when an element enters the user's viewport
   | "appear"
-  | "click"
+  // `initialize` is triggered when an element is added to the DOM
+  | "initialize"
   | "blur"
+  | "click"
   | "dblclick"
   | "mouseover"
   | "change";
@@ -155,6 +157,12 @@ export abstract class TriggerExtensionPoint extends ExtensionPoint<TriggerConfig
    */
   private cancelWatchNewElements: (() => void) | null;
 
+  /**
+   * Cancel "initialize" trigger observer
+   * @private
+   */
+  private initializeObserver: MutationObserver | undefined;
+
   /**
    * Observer to watch for new elements to appear, or undefined if the trigger is not an `appear` trigger
    * @private
@@ -214,6 +222,8 @@ export abstract class TriggerExtensionPoint extends ExtensionPoint<TriggerConfig
     // Clean up observers
     this.cancelInitialWaitElements?.();
     this.cancelWatchNewElements?.();
+    this.initializeObserver?.disconnect();
+    this.initializeObserver = null;
     this.appearObserver?.disconnect();
     this.appearObserver = null;
     this.cancelInitialWaitElements = null;
@@ -418,6 +428,37 @@ export abstract class TriggerExtensionPoint extends ExtensionPoint<TriggerConfig
     }
   }
 
+  private attachInitializeTrigger(
+    $element: JQuery<Document | HTMLElement>
+  ): void {
+    this.initializeObserver?.disconnect();
+    this.initializeObserver = null;
+
+    // The caller will have already waited for the element. So $element will contain at least one element
+    if (this.attachMode === "once") {
+      for (const element of $element.get()) {
+        void this.runTrigger(element);
+      }
+
+      return;
+    }
+
+    this.initializeObserver = initialize(
+      this.triggerSelector,
+      (index, element) => {
+        void this.runTrigger(element as HTMLElement).then((errors) => {
+          if (errors.length > 0) {
+            console.error("An error occurred while running a trigger", {
+              errors,
+            });
+            notifyError("An error occurred while running a trigger");
+          }
+        });
+      },
+      { target: document }
+    );
+  }
+
   private attachAppearTrigger($element: JQuery): void {
     // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
 
@@ -525,9 +566,14 @@ export abstract class TriggerExtensionPoint extends ExtensionPoint<TriggerConfig
   }
 
   private cancelObservers() {
+    this.intervalController?.abort();
+    this.appearObserver?.disconnect();
+    this.appearObserver = null;
+    this.initializeObserver?.disconnect();
+    this.initializeObserver = null;
     this.cancelInitialWaitElements?.();
-    this.cancelWatchNewElements?.();
     this.cancelInitialWaitElements = null;
+    this.cancelWatchNewElements?.();
     this.cancelWatchNewElements = null;
   }
 
@@ -550,6 +596,11 @@ export abstract class TriggerExtensionPoint extends ExtensionPoint<TriggerConfig
         break;
       }
 
+      case "initialize": {
+        this.attachInitializeTrigger($root);
+        break;
+      }
+
       case "appear": {
         this.assertElement($root);
         this.attachAppearTrigger($root);