Avoid 9.2 breaking change in Widget base class (#9814)

Author: Pessimistress

modules/core/src/lib/widget-manager.ts

@@ -201,12 +201,11 @@ export class WidgetManager {
     widget.deck = this.deck;
 
     // Create an attach the HTML root element
-    widget.rootElement = widget.onCreateRootElement();
+    widget.rootElement = widget._onAdd({deck: this.deck, viewId});
     if (widget.rootElement) {
       this._getContainer(viewId, placement).append(widget.rootElement);
     }
 
-    widget.onAdd?.({deck: this.deck, viewId});
     widget.updateHTML();
   }
 

modules/core/src/lib/widget.ts

@@ -90,16 +90,14 @@ export abstract class Widget<
     }
   }
 
-  // WIDGET LIFECYCLE
-
   // @note empty method calls have an overhead in V8 but it is very low, ~1ns
 
   /**
-   * Called to create the root DOM element for this widget
+   * Common utility to create the root DOM element for this widget
    * Configures the top-level styles and adds basic class names for theming
-   * @returns an optional UI element that should be appended to the Deck container
+   * @returns an UI element that should be appended to the Deck container
    */
-  onCreateRootElement(): HTMLDivElement {
+  protected onCreateRootElement(): HTMLDivElement {
     const CLASS_NAMES = [
       // Add class names for theming
       'deck-widget',
@@ -116,16 +114,25 @@ export abstract class Widget<
     return element;
   }
 
+  // WIDGET LIFECYCLE
+
   /** Called to render HTML into the root element */
   abstract onRenderHTML(rootElement: HTMLElement): void;
 
-  /** Called after the widget is added to a Deck instance and the DOM rootElement has been created */
+  /** Internal API called by Deck when the widget is first added to a Deck instance */
+  _onAdd(params: {deck: Deck<any>; viewId: string | null}): HTMLDivElement {
+    return this.onAdd(params) ?? this.onCreateRootElement();
+  }
+
+  /** Overridable by subclass - called when the widget is first added to a Deck instance
+   * @returns an optional UI element that should be appended to the Deck container
+   */
   onAdd(params: {
     /** The Deck instance that the widget is attached to */
     deck: Deck<any>;
     /** The id of the view that the widget is attached to */
     viewId: string | null;
-  }) {}
+  }): HTMLDivElement | void {}
 
   /** Called when the widget is removed */
   onRemove(): void {}