[IMP] component: use reactivity to allow shallow renderings

With this commit, component only render child
components if they have different props (shallow
equality). Otherwise, we trust the reactivity
system to make sure that all impacted components
are updated

src/app/app.ts

@@ -29,7 +29,7 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
 
 export class App<
   T extends abstract new (...args: any) => any = any,
-  P = any,
+  P extends object = any,
   E = any
 > extends TemplateSet {
   static validateTarget = validateTarget;
@@ -102,7 +102,11 @@ export class App<
   }
 }
 
-export async function mount<T extends abstract new (...args: any) => any = any, P = any, E = any>(
+export async function mount<
+  T extends abstract new (...args: any) => any = any,
+  P extends object = any,
+  E = any
+>(
   C: T & ComponentConstructor<P, E>,
   target: HTMLElement,
   config: AppConfig<P, E> & MountOptions = {}

src/app/template_helpers.ts

@@ -2,6 +2,8 @@ import { BDom, multi, text, toggler } from "../blockdom";
 import { validateProps } from "../component/props_validation";
 import { Markup } from "../utils";
 import { html } from "../blockdom/index";
+import { TARGET } from "../reactivity";
+
 /**
  * This file contains utility functions that will be injected in each template,
  * to perform various useful tasks in the compiled code.
@@ -21,7 +23,7 @@ function callSlot(
   defaultContent?: (ctx: any, node: any, key: string) => BDom
 ): BDom {
   key = key + "__slot_" + name;
-  const slots = (ctx.props && ctx.props.slots) || {};
+  const slots = ctx.props[TARGET].slots || {};
   const { __render, __ctx, __scope } = slots[name] || {};
   const slotScope = Object.create(__ctx || {});
   if (__scope) {

src/compiler/code_generator.ts

@@ -1125,18 +1125,17 @@ export class CodeGenerator {
     }
 
     if (slotDef && !(ast.dynamicProps || hasSlotsProp)) {
-      props.push(`slots: ${slotDef}`);
+      this.helpers.add("markRaw");
+      props.push(`slots: markRaw(${slotDef})`);
     }
 
     const propStr = `{${props.join(",")}}`;
 
     let propString = propStr;
     if (ast.dynamicProps) {
-      if (!props.length) {
-        propString = `Object.assign({}, ${compileExpr(ast.dynamicProps)})`;
-      } else {
-        propString = `Object.assign({}, ${compileExpr(ast.dynamicProps)}, ${propStr})`;
-      }
+      propString = `Object.assign({}, ${compileExpr(ast.dynamicProps)}${
+        props.length ? ", " + propStr : ""
+      })`;
     }
 
     let propVar: string;
@@ -1147,7 +1146,8 @@ export class CodeGenerator {
     }
 
     if (slotDef && (ast.dynamicProps || hasSlotsProp)) {
-      this.addLine(`${propVar!}.slots = Object.assign(${slotDef}, ${propVar!}.slots)`);
+      this.helpers.add("markRaw");
+      this.addLine(`${propVar!}.slots = markRaw(Object.assign(${slotDef}, ${propVar!}.slots))`);
     }
 
     // cmap key

src/component/component.ts

@@ -36,7 +36,7 @@ export class Component<Props = any, Env = any> {
 
   setup() {}
 
-  render() {
-    this.__owl__.render();
+  render(deep: boolean = false) {
+    this.__owl__.render(deep);
   }
 }

src/component/component_node.ts

@@ -1,6 +1,6 @@
 import type { App, Env } from "../app/app";
 import { BDom, VNode } from "../blockdom";
-import { clearReactivesForCallback, NonReactive, Reactive, reactive } from "../reactivity";
+import { clearReactivesForCallback, Reactive, reactive, TARGET, NonReactive } from "../reactivity";
 import { batched, Callback } from "../utils";
 import { Component, ComponentConstructor } from "./component";
 import { fibersInError, handleError } from "./error_handling";
@@ -58,14 +58,24 @@ export function useState<T extends object>(state: T): Reactive<T> | NonReactive<
 // -----------------------------------------------------------------------------
 // component function (used in compiled template code)
 // -----------------------------------------------------------------------------
+type Props = { [key: string]: any };
 
-export function component(
-  name: string | typeof Component,
-  props: any,
+function arePropsDifferent(props1: Props, props2: Props): boolean {
+  for (let k in props1) {
+    if (props1[k] !== props2[k]) {
+      return true;
+    }
+  }
+  return Object.keys(props1).length !== Object.keys(props2).length;
+}
+
+export function component<P extends object>(
+  name: string | ComponentConstructor<P>,
+  props: P,
   key: string,
   ctx: ComponentNode,
   parent: any
-): ComponentNode {
+): ComponentNode<P> {
   let node: any = ctx.children[key];
   let isDynamic = typeof name !== "string";
 
@@ -83,7 +93,10 @@ export function component(
 
   const parentFiber = ctx.fiber!;
   if (node) {
-    node.updateAndRender(props, parentFiber);
+    const currentProps = node.component.props[TARGET];
+    if (parentFiber.deep || arePropsDifferent(currentProps, props)) {
+      node.updateAndRender(props, parentFiber);
+    }
   } else {
     // new component
     let C;
@@ -98,8 +111,7 @@ export function component(
     node = new ComponentNode(C, props, ctx.app, ctx);
     ctx.children[key] = node;
 
-    const fiber = makeChildFiber(node, parentFiber);
-    node.initiateRender(fiber);
+    node.initiateRender(new Fiber(node, parentFiber));
   }
   return node;
 }
@@ -110,7 +122,7 @@ export function component(
 
 type LifecycleHook = Function;
 
-export class ComponentNode<P = any, E = any> implements VNode<ComponentNode<P, E>> {
+export class ComponentNode<P extends object = any, E = any> implements VNode<ComponentNode<P, E>> {
   el?: HTMLElement | Text | undefined;
   app: App;
   fiber: Fiber | null = null;
@@ -141,6 +153,7 @@ export class ComponentNode<P = any, E = any> implements VNode<ComponentNode<P, E
     applyDefaultProps(props, C);
     const env = (parent && parent.childEnv) || app.env;
     this.childEnv = env;
+    props = useState(props);
     this.component = new C(props, env, this) as any;
     this.renderFn = app.getTemplate(C.template).bind(this.component, this.component, this);
     this.component.setup();
@@ -170,21 +183,29 @@ export class ComponentNode<P = any, E = any> implements VNode<ComponentNode<P, E
     }
   }
 
-  async render() {
+  async render(deep: boolean = false) {
     let current = this.fiber;
     if (current && current.root!.locked) {
       await Promise.resolve();
       // situation may have changed after the microtask tick
       current = this.fiber;
     }
-    if (current && !current.bdom && !fibersInError.has(current)) {
-      return;
-    }
-    if (!this.bdom && !current) {
+    if (current) {
+      if (!current.bdom && !fibersInError.has(current)) {
+        if (deep) {
+          // we want the render from this point on to be with deep=true
+          current.deep = deep;
+        }
+        return;
+      }
+      // if current rendering was with deep=true, we want this one to be the same
+      deep = deep || current.deep;
+    } else if (!this.bdom) {
       return;
     }
 
     const fiber = makeRootFiber(this);
+    fiber.deep = deep;
     this.fiber = fiber;
     this.app.scheduler.addFiber(fiber);
     await Promise.resolve();
@@ -246,6 +267,10 @@ export class ComponentNode<P = any, E = any> implements VNode<ComponentNode<P, E
     this.fiber = fiber;
     const component = this.component;
     applyDefaultProps(props, component.constructor as any);
+
+    currentNode = this;
+    props = useState(props);
+    currentNode = null;
     const prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
     await prom;
     if (fiber !== this.fiber) {
@@ -310,6 +335,14 @@ export class ComponentNode<P = any, E = any> implements VNode<ComponentNode<P, E
   }
 
   patch() {
+    if (this.fiber && this.fiber.parent) {
+      // we only patch here renderings coming from above. renderings initiated
+      // by the component will be patched independently in the appropriate
+      // fiber.complete
+      this._patch();
+    }
+  }
+  _patch() {
     const hasChildren = Object.keys(this.children).length > 0;
     this.bdom!.patch(this!.fiber!.bdom!, hasChildren);
     if (hasChildren) {

src/component/fibers.ts

@@ -16,9 +16,8 @@ export function makeRootFiber(node: ComponentNode): Fiber {
   let current = node.fiber;
   if (current) {
     let root = current.root!;
-    root.counter -= cancelFibers(current.children);
+    root.counter = root.counter + 1 - cancelFibers(current.children);
     current.children = [];
-    root.counter++;
     current.bdom = null;
     if (fibersInError.has(current)) {
       fibersInError.delete(current);
@@ -34,7 +33,6 @@ export function makeRootFiber(node: ComponentNode): Fiber {
   if (node.patched.length) {
     fiber.patched.push(fiber);
   }
-
   return fiber;
 }
 
@@ -60,11 +58,13 @@ export class Fiber {
   parent: Fiber | null;
   children: Fiber[] = [];
   appliedToDom = false;
+  deep: boolean = false;
 
   constructor(node: ComponentNode, parent: Fiber | null) {
     this.node = node;
     this.parent = parent;
     if (parent) {
+      this.deep = parent.deep;
       const root = parent.root!;
       root.counter++;
       this.root = root;
@@ -107,7 +107,7 @@ export class RootFiber extends Fiber {
       current = undefined;
 
       // Step 2: patching the dom
-      node.patch();
+      node._patch();
       this.locked = false;
 
       // Step 4: calling all mounted lifecycle hooks

src/index.ts

@@ -14,11 +14,13 @@ import {
 } from "./blockdom";
 import { mainEventHandler } from "./component/handler";
 import { Portal } from "./portal";
+import { markRaw } from "./reactivity";
 export type { Reactive } from "./reactivity";
 
 config.shouldNormalizeDom = false;
 config.mainEventHandler = mainEventHandler;
 (UTILS as any).Portal = Portal;
+(UTILS as any).markRaw = markRaw;
 
 export const blockDom = {
   config,

src/reactivity.ts

@@ -1,7 +1,7 @@
 import { Callback } from "./utils";
 
 // Allows to get the target of a Reactive (used for making a new Reactive from the underlying object)
-const TARGET = Symbol("Target");
+export const TARGET = Symbol("Target");
 // Escape hatch to prevent reactivity system to turn something into a reactive
 const SKIP = Symbol("Skip");
 // Special key to subscribe to, to be notified of key creation/deletion