[FIX] stores: bye bye reactivity 👋

Reactivity is very very (very) slow, with potential overhead exceeding 90%.

This commit completely revisit the way store updates trigger app rendering.
Previously, this process relied entirely on Owl's reactivity system.

With a reactive store, every `this.something` call traverses the reactive
proxy, incurring significant cost, regardless of whether `something` was
a method, a property, called publicly or privately.

Instead, it introduces a new approach where store updates are triggered by
explicitly declared public methods (mutators)
Since stores follow the Command-Query Separation (CQS) principle, all
public methods strictly mutate state in a store, they cannot have any
other effect since they cannot return anything.

The new approach also relies on proxies to track mutators calls, but
the proxy is only on the surface. A mutator is usually only called once
in the component. A property is also usually accessed only once for
rendering. The internal working of the store is not affected and can
run at full speed without any overhead.

Note the loss of fined-grained rendering. However, as observed, bypassing
reactivity might result in faster overall app rendering compared to
relying on reactivity for fine-grained rendering, even if it means rendering
the entire app rather than a few components.

Reactivity had another unexpected error-prone issue: since everything
was proxied, we could never compare objects references without using
`toRaw` to retrieve the underlying un-proxied object. It was very
error prone and added noise in the code.

On the large number data set, open the find & replace panel and search for "1"
It currently takes 1080ms (search + rendering)
With this commit, that time is reduced to just 111ms, nearly a tenfold
improvement!

closes #4244

Task: 3829125
X-original-commit: 894216f
Signed-off-by: Rémi Rahir (rar) <[email protected]>
Signed-off-by: Lucas Lefèvre (lul) <[email protected]>

Author: LucasLefevre

src/components/composer/autocomplete_dropdown/autocomplete_dropdown_store.ts

@@ -2,6 +2,7 @@ import { AutoCompleteProposal, AutoCompleteProvider } from "../../../registries"
 import { SpreadsheetStore } from "../../../stores";
 
 export class AutoCompleteStore extends SpreadsheetStore {
+  mutators = ["useProvider", "moveSelection", "hide", "selectIndex"] as const;
   selectedIndex: number | undefined = undefined;
   provider: AutoCompleteProvider | undefined;
 

src/components/composer/composer/composer.ts

@@ -680,7 +680,9 @@ export class Composer extends Component<ComposerProps, SpreadsheetChildEnv> {
    */
   private processTokenAtCursor(): void {
     let content = this.composerStore.currentContent;
-    this.autoCompleteState.hide();
+    if (this.autoCompleteState.provider) {
+      this.autoCompleteState.hide();
+    }
     this.functionDescriptionState.showDescription = false;
     const autoCompleteProvider = this.composerStore.autocompleteProvider;
     if (autoCompleteProvider) {

src/components/composer/composer/composer_store.ts

@@ -1,4 +1,3 @@
-import { toRaw } from "@odoo/owl";
 import { EnrichedToken, composerTokenize } from "../../../formulas/composer_tokenizer";
 import { POSTFIX_UNARY_OPERATORS } from "../../../formulas/tokenizer";
 import { parseLiteral } from "../../../helpers/cells";
@@ -68,6 +67,16 @@ export interface ComposerSelection {
 }
 
 export class ComposerStore extends SpreadsheetStore {
+  mutators = [
+    "startEdition",
+    "setCurrentContent",
+    "stopEdition",
+    "stopComposerRangeSelection",
+    "cancelEdition",
+    "cycleReferences",
+    "changeComposerCursorSelection",
+    "replaceComposerCursorSelection",
+  ] as const;
   private col: HeaderIndex = 0;
   private row: HeaderIndex = 0;
   editionMode: EditionMode = "inactive";
@@ -84,9 +93,9 @@ export class ComposerStore extends SpreadsheetStore {
 
   constructor(get: Get) {
     super(get);
-    this.highlightStore.register(toRaw(this));
+    this.highlightStore.register(this);
     this.onDispose(() => {
-      this.highlightStore.unRegister(toRaw(this));
+      this.highlightStore.unRegister(this);
     });
   }
 
@@ -229,7 +238,7 @@ export class ComposerStore extends SpreadsheetStore {
         if (this.isSelectingRange) {
           this.editionMode = "editing";
         }
-        this.model.selection.resetAnchor(toRaw(this), {
+        this.model.selection.resetAnchor(this, {
           cell: { col: left, row: top },
           zone: cmd.zone,
         });
@@ -247,7 +256,7 @@ export class ComposerStore extends SpreadsheetStore {
             row: activePosition.row,
           });
           const zone = this.getters.expandZone(cmd.sheetIdTo, positionToZone({ col, row }));
-          this.model.selection.resetAnchor(toRaw(this), { cell: { col, row }, zone });
+          this.model.selection.resetAnchor(this, { cell: { col, row }, zone });
         }
         break;
       case "DELETE_SHEET":
@@ -373,7 +382,7 @@ export class ComposerStore extends SpreadsheetStore {
   private startComposerRangeSelection() {
     if (this.sheetId === this.getters.getActiveSheetId()) {
       const zone = positionToZone({ col: this.col, row: this.row });
-      this.model.selection.resetAnchor(toRaw(this), {
+      this.model.selection.resetAnchor(this, {
         cell: { col: this.col, row: this.row },
         zone,
       });
@@ -404,7 +413,7 @@ export class ComposerStore extends SpreadsheetStore {
     this.colorIndexByRange = {};
     const zone = positionToZone({ col: this.col, row: this.row });
     this.model.selection.capture(
-      toRaw(this),
+      this,
       { cell: { col: this.col, row: this.row }, zone },
       {
         handleEvent: this.handleEvent.bind(this),
@@ -519,7 +528,7 @@ export class ComposerStore extends SpreadsheetStore {
       return;
     }
     this.editionMode = "inactive";
-    this.model.selection.release(toRaw(this));
+    this.model.selection.release(this);
   }
 
   /**

src/components/composer/composer_focus_store.ts

@@ -4,6 +4,7 @@ import { ComposerSelection, ComposerStore } from "./composer/composer_store";
 export type ComposerFocusType = "inactive" | "cellFocus" | "contentFocus";
 
 export class ComposerFocusStore extends SpreadsheetStore {
+  mutators = ["focusTopBarComposer", "focusGridComposerContent", "focusGridComposerCell"] as const;
   private composerStore = this.get(ComposerStore);
 
   private topBarFocus: Exclude<ComposerFocusType, "cellFocus"> = "inactive";

src/components/focus_store.ts

@@ -1,15 +1,14 @@
-import { toRaw } from "@odoo/owl";
-
 // The name is misleading and can be confused with the DOM focus.
 export class FocusStore {
+  mutators = ["focus", "unfocus"] as const;
   public focusedElement: object | null = null;
 
   focus(element: object) {
     this.focusedElement = element;
   }
 
   unfocus(element: object) {
-    if (this.focusedElement && toRaw(this.focusedElement) === toRaw(element)) {
+    if (this.focusedElement && this.focusedElement === element) {
       this.focusedElement = null;
     }
   }

src/components/grid/hovered_cell_store.ts

@@ -2,6 +2,7 @@ import { SpreadsheetStore } from "../../stores";
 import { Command, Position } from "../../types";
 
 export class HoveredCellStore extends SpreadsheetStore {
+  mutators = ["clear", "hover"] as const;
   col: number | undefined;
   row: number | undefined;
 

src/components/helpers/draw_grid_hook.ts

@@ -9,7 +9,7 @@ import { DOMDimension, OrderedLayers } from "../../types";
 export function useGridDrawing(refName: string, model: Model, canvasSize: () => DOMDimension) {
   const canvasRef = useRef(refName);
   useEffect(drawGrid);
-  const rendererManager = useStore(RendererStore);
+  const rendererStore = useStore(RendererStore);
   useStore(GridRenderer);
 
   function drawGrid() {
@@ -39,7 +39,11 @@ export function useGridDrawing(refName: string, model: Model, canvasSize: () =>
 
     for (const layer of OrderedLayers()) {
       model.drawLayer(renderingContext, layer);
-      rendererManager.drawLayer(renderingContext, layer);
+      // @ts-ignore 'drawLayer' is not declated as a mutator because:
+      // it does not mutate anything. Most importantly it's used
+      // during rendering. Invoking a mutator during rendering would
+      // trigger another rendering, ultimately resulting in an infinite loop.
+      rendererStore.drawLayer(renderingContext, layer);
     }
   }
 }

src/components/helpers/highlight_hook.ts

@@ -1,12 +1,12 @@
-import { onMounted, useEffect, useEnv } from "@odoo/owl";
-import { useLocalStore } from "../../store_engine";
+import { onMounted, useEffect } from "@odoo/owl";
+import { useLocalStore, useStoreProvider } from "../../store_engine";
 import { HighlightProvider, HighlightStore } from "../../stores/highlight_store";
-import { Ref, SpreadsheetChildEnv } from "../../types";
+import { Ref } from "../../types";
 import { useHoveredElement } from "./listener_hook";
 
 export function useHighlightsOnHover(ref: Ref<HTMLElement>, highlightProvider: HighlightProvider) {
   const hoverState = useHoveredElement(ref);
-  const env = useEnv() as SpreadsheetChildEnv;
+  const stores = useStoreProvider();
 
   useHighlights({
     get highlights() {
@@ -15,7 +15,7 @@ export function useHighlightsOnHover(ref: Ref<HTMLElement>, highlightProvider: H
   });
   useEffect(
     () => {
-      env.model.dispatch("RENDER_CANVAS");
+      stores.trigger("store-updated");
     },
     () => [hoverState.hovered]
   );

src/components/popover/cell_popover_store.ts

@@ -11,6 +11,8 @@ import {
 import { HoveredCellStore } from "../grid/hovered_cell_store";
 
 export class CellPopoverStore extends SpreadsheetStore {
+  mutators = ["open", "close"] as const;
+
   private persistentPopover?: CellPosition & { type: CellPopoverType };
 
   protected hoveredCell = this.get(HoveredCellStore);

src/components/selection_input/selection_input_store.ts

@@ -1,4 +1,3 @@
-import { toRaw } from "@odoo/owl";
 import { colors, isEqual, positionToZone, splitReference } from "../../helpers/index";
 import { Get } from "../../store_engine";
 import { SpreadsheetStore } from "../../stores";
@@ -21,6 +20,16 @@ export interface RangeInputValue {
  * This plugin handles this internal state.
  */
 export class SelectionInputStore extends SpreadsheetStore {
+  mutators = [
+    "resetWithRanges",
+    "focusById",
+    "unfocus",
+    "addEmptyRange",
+    "removeRange",
+    "changeRange",
+    "reset",
+    "confirm",
+  ] as const;
   ranges: RangeInputValue[] = [];
   focusedRangeIndex: number | null = null;
   private inputSheetId: UID;
@@ -90,7 +99,7 @@ export class SelectionInputStore extends SpreadsheetStore {
             row: 0,
           });
           const zone = this.getters.expandZone(cmd.sheetIdTo, positionToZone({ col, row }));
-          this.model.selection.resetAnchor(toRaw(this), { cell: { col, row }, zone });
+          this.model.selection.resetAnchor(this, { cell: { col, row }, zone });
         }
         break;
       }
@@ -110,7 +119,7 @@ export class SelectionInputStore extends SpreadsheetStore {
         if (focusIndex !== -1) {
           this.focus(focusIndex);
           const { left, top } = newZone;
-          this.model.selection.resetAnchor(toRaw(this), {
+          this.model.selection.resetAnchor(this, {
             cell: { col: left, row: top },
             zone: newZone,
           });
@@ -216,7 +225,7 @@ export class SelectionInputStore extends SpreadsheetStore {
 
   private get hasMainFocus() {
     const focusedElement = this.focusStore.focusedElement;
-    return !!focusedElement && toRaw(focusedElement) === toRaw(this);
+    return !!focusedElement && focusedElement === this;
   }
 
   get highlights(): Highlight[] {
@@ -251,7 +260,7 @@ export class SelectionInputStore extends SpreadsheetStore {
   unfocus() {
     this.focusedRangeIndex = null;
     this.focusStore.unfocus(this);
-    this.model.selection.release(toRaw(this));
+    this.model.selection.release(this);
   }
 
   private captureSelection() {
@@ -262,7 +271,7 @@ export class SelectionInputStore extends SpreadsheetStore {
     const sheetId = this.getters.getActiveSheetId();
     const zone = this.getters.getRangeFromSheetXC(sheetId, range?.xc || "A1").zone;
     this.model.selection.capture(
-      toRaw(this),
+      this,
       { cell: { col: zone.left, row: zone.top }, zone },
       {
         handleEvent: this.handleEvent.bind(this),

src/components/side_panel/chart/main_chart_panel/main_chart_panel_store.ts

@@ -3,6 +3,7 @@ import { SpreadsheetStore } from "../../../../stores";
 import { ChartCreationContext, ChartType, UID } from "../../../../types";
 
 export class MainChartPanelStore extends SpreadsheetStore {
+  mutators = ["activatePanel", "changeChartType"] as const;
   panel: "configuration" | "design" = "configuration";
   private creationContext: ChartCreationContext = {};
 

src/components/side_panel/find_and_replace/find_and_replace_store.ts

@@ -2,7 +2,6 @@ import { debounce, getSearchRegex, isInside, positionToZone } from "../../../hel
 import { HighlightProvider, HighlightStore } from "../../../stores/highlight_store";
 import { CellPosition, Color, Command, Highlight } from "../../../types";
 
-import { toRaw } from "@odoo/owl";
 import { Get } from "../../../store_engine";
 import { SpreadsheetStore } from "../../../stores";
 import { SearchOptions } from "../../../types/find_and_replace";
@@ -16,6 +15,14 @@ enum Direction {
 }
 
 export class FindAndReplaceStore extends SpreadsheetStore implements HighlightProvider {
+  mutators = [
+    "updateSearchOptions",
+    "updateSearchContent",
+    "searchFormulas",
+    "selectPreviousMatch",
+    "selectNextMatch",
+    "replace",
+  ] as const;
   private allSheetsMatches: CellPosition[] = [];
   private activeSheetMatches: CellPosition[] = [];
   private specificRangeMatches: CellPosition[] = [];
@@ -44,11 +51,11 @@ export class FindAndReplaceStore extends SpreadsheetStore implements HighlightPr
     this.searchOptions.searchFormulas = this.initialShowFormulaState;
 
     const highlightStore = get(HighlightStore);
-    highlightStore.register(toRaw(this));
+    highlightStore.register(this);
     this.onDispose(() => {
       this.model.dispatch("SET_FORMULA_VISIBILITY", { show: this.initialShowFormulaState });
       this.updateSearchContent.stopDebounce();
-      highlightStore.unRegister(toRaw(this));
+      highlightStore.unRegister(this);
     });
   }
 

src/components/side_panel/pivot/pivot_side_panel/pivot_side_panel_store.ts

@@ -14,6 +14,7 @@ import {
 } from "../../../../types/pivot";
 
 export class PivotSidePanelStore extends SpreadsheetStore {
+  mutators = ["applyUpdate", "renamePivot", "update"] as const;
   private updatesAreDeferred: boolean = true;
   private draft: PivotCoreDefinition | null = null;
   constructor(get: Get, private pivotId: UID) {

src/components/side_panel/side_panel/side_panel_store.ts

@@ -19,6 +19,7 @@ interface ClosedSidePanel {
 export type SidePanelState = OpenSidePanel | ClosedSidePanel;
 
 export class SidePanelStore extends SpreadsheetStore {
+  mutators = ["open", "toggle", "close"] as const;
   initialPanelProps: SidePanelProps = {};
   componentTag: string = "";
 

src/components/spreadsheet/spreadsheet.ts

@@ -28,6 +28,7 @@ import {
   SEPARATOR_COLOR,
   TOPBAR_HEIGHT,
 } from "../../constants";
+import { batched } from "../../helpers";
 import { ImageProvider } from "../../helpers/figures/images/image_provider";
 import { Model } from "../../model";
 import { Store, useStore, useStoreProvider } from "../../store_engine";
@@ -336,10 +337,15 @@ export class Spreadsheet extends Component<SpreadsheetProps, SpreadsheetChildEnv
       }
     });
 
+    const render = batched(this.render.bind(this, true));
     onMounted(() => {
       this.checkViewportSize();
+      stores.on("store-updated", this, render);
+    });
+    onWillUnmount(() => {
+      this.unbindModelEvents();
+      stores.off("store-updated", this);
     });
-    onWillUnmount(() => this.unbindModelEvents());
     onPatched(() => {
       this.checkViewportSize();
     });

src/helpers/misc.ts

@@ -313,6 +313,27 @@ export function debounce<T extends (...args: any) => void>(
   return debounced as DebouncedFunction<T>;
 }
 
+/**
+ * Creates a batched version of a callback so that all calls to it in the same
+ * microtick will only call the original callback once.
+ *
+ * @param callback the callback to batch
+ * @returns a batched version of the original callback
+ *
+ * Copied from odoo/owl repo.
+ */
+export function batched(callback: () => void): () => void {
+  let scheduled = false;
+  return async (...args) => {
+    if (!scheduled) {
+      scheduled = true;
+      await Promise.resolve();
+      scheduled = false;
+      callback(...args);
+    }
+  };
+}
+
 /*
  * Concatenate an array of strings.
  */

src/store_engine/dependency_container.ts

@@ -1,9 +1,14 @@
+import { EventBus } from "../helpers/event_bus";
 import { Get, StoreConstructor, StoreParams } from "./store";
 
+interface StoreUpdateEvent {
+  type: "store-updated";
+}
+
 /**
  * A type-safe dependency container
  */
-export class DependencyContainer {
+export class DependencyContainer extends EventBus<StoreUpdateEvent> {
   private dependencies: Map<StoreConstructor, any> = new Map();
   private factory = new StoreFactory(this.get.bind(this));