[REL] v2.0.0-beta.2

# 2.0.0-beta.2

- only log dev message once, instead of once per app
- add subscriptions getter in dev mode on component node
- fix: issue with missing renderings
- fix: env now preserves prototype chain

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "browser": "dist/owl.iife.js",

src/app/app.ts

@@ -18,6 +18,8 @@ export interface AppConfig<P, E> extends TemplateSetConfig {
   test?: boolean;
 }
 
+let hasBeenLogged = false;
+
 export const DEV_MSG = () => {
   const hash = (window as any).owl ? (window as any).owl.__info__.hash : "master";
 
@@ -46,11 +48,13 @@ export class App<
     if (config.test) {
       this.dev = true;
     }
-    if (this.dev && !config.test) {
+    if (this.dev && !config.test && !hasBeenLogged) {
       console.info(DEV_MSG());
+      hasBeenLogged = true;
     }
-    const descrs = Object.getOwnPropertyDescriptors(config.env || {});
-    this.env = Object.freeze(Object.defineProperties({}, descrs)) as E;
+    const env = config.env || {};
+    const descrs = Object.getOwnPropertyDescriptors(env);
+    this.env = Object.freeze(Object.create(Object.getPrototypeOf(env), descrs));
     this.props = config.props || ({} as P);
   }
 

src/component/component_node.ts

@@ -1,6 +1,13 @@
 import type { App, Env } from "../app/app";
 import { BDom, VNode } from "../blockdom";
-import { clearReactivesForCallback, Reactive, reactive, TARGET, NonReactive } from "../reactivity";
+import {
+  clearReactivesForCallback,
+  Reactive,
+  reactive,
+  TARGET,
+  NonReactive,
+  getSubscriptions,
+} from "../reactivity";
 import { batched, Callback } from "../utils";
 import { Component, ComponentConstructor } from "./component";
 import { fibersInError, handleError } from "./error_handling";
@@ -51,6 +58,13 @@ export function useState<T extends object>(state: T): Reactive<T> | NonReactive<
     batchedRenderFunctions.set(node, render);
     // manual implementation of onWillDestroy to break cyclic dependency
     node.willDestroy.push(clearReactivesForCallback.bind(null, render));
+    if (node.app.dev) {
+      Object.defineProperty(node, "subscriptions", {
+        get() {
+          return getSubscriptions(render);
+        },
+      });
+    }
   }
   return reactive(state, render);
 }
@@ -93,8 +107,14 @@ export function component<P extends object>(
 
   const parentFiber = ctx.fiber!;
   if (node) {
-    const currentProps = node.component.props[TARGET];
-    if (parentFiber.deep || arePropsDifferent(currentProps, props)) {
+    let shouldRender = node.forceNextRender;
+    if (shouldRender) {
+      node.forceNextRender = false;
+    } else {
+      const currentProps = node.component.props[TARGET];
+      shouldRender = parentFiber.deep || arePropsDifferent(currentProps, props);
+    }
+    if (shouldRender) {
       node.updateAndRender(props, parentFiber);
     }
   } else {
@@ -129,6 +149,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
   component: Component<P, E>;
   bdom: BDom | null = null;
   status: STATUS = STATUS.NEW;
+  forceNextRender: boolean = false;
 
   renderFn: Function;
   parent: ComponentNode | null;

src/component/fibers.ts

@@ -43,7 +43,15 @@ function cancelFibers(fibers: Fiber[]): number {
   let result = 0;
   for (let fiber of fibers) {
     fiber.node.fiber = null;
-    if (!fiber.bdom) {
+    if (fiber.bdom) {
+      // if fiber has been rendered, this means that the component props have
+      // been updated. however, this fiber will not be patched to the dom, so
+      // it could happen that the next render compare the current props with
+      // the same props, and skip the render completely. With the next line,
+      // we kindly request the component code to force a render, so it works as
+      // expected.
+      fiber.node.forceNextRender = true;
+    } else {
       result++;
     }
     result += cancelFibers(fiber.children);

src/reactivity.ts

@@ -153,6 +153,17 @@ export function clearReactivesForCallback(callback: Callback): void {
   targetsToClear.clear();
 }
 
+export function getSubscriptions(callback: Callback) {
+  const targets = callbacksToTargets.get(callback) || [];
+  return [...targets].map((target) => {
+    const keysToCallbacks = targetToKeysToCallbacks.get(target);
+    return {
+      target,
+      keys: keysToCallbacks ? [...keysToCallbacks.keys()] : [],
+    };
+  });
+}
+
 const reactiveCache = new WeakMap<Target, WeakMap<Callback, Reactive>>();
 /**
  * Creates a reactive proxy for an object. Reading data on the reactive object

tests/components/__snapshots__/concurrency.test.ts.snap

@@ -1222,6 +1222,28 @@ exports[`rendering component again in next microtick 2`] = `
 }"
 `;
 
+exports[`rendering parent twice, with different props on child and stuff 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`rendering parent twice, with different props on child and stuff 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['props'].value);
+  }
+}"
+`;
+
 exports[`t-foreach with dynamic async component 1`] = `
 "function anonymous(bdom, helpers
 ) {

tests/components/concurrency.test.ts

@@ -3189,6 +3189,71 @@ test("Cascading renders after microtaskTick", async () => {
   await nextTick();
   expect(fixture.innerHTML).toBe("0123 _ 0123");
 });
+
+test("rendering parent twice, with different props on child and stuff", async () => {
+  class Child extends Component {
+    static template = xml`<t t-esc="props.value"/>`;
+    setup() {
+      useLogLifecycle();
+    }
+  }
+
+  class Parent extends Component {
+    static template = xml`<Child value="state.value"/>`;
+    static components = { Child };
+    state = useState({ value: 1 });
+    setup() {
+      useLogLifecycle();
+    }
+  }
+
+  const parent = await mount(Parent, fixture);
+  expect(fixture.innerHTML).toBe("1");
+  expect([
+    "Parent:setup",
+    "Parent:willStart",
+    "Parent:willRender",
+    "Child:setup",
+    "Child:willStart",
+    "Parent:rendered",
+    "Child:willRender",
+    "Child:rendered",
+    "Child:mounted",
+    "Parent:mounted",
+  ]).toBeLogged();
+
+  parent.state.value = 2;
+  // wait for child to be rendered
+  await nextMicroTick();
+  await nextMicroTick();
+  await nextMicroTick();
+  await nextMicroTick();
+  expect([
+    "Parent:willRender",
+    "Child:willUpdateProps",
+    "Parent:rendered",
+    "Child:willRender",
+    "Child:rendered",
+  ]).toBeLogged();
+  expect(fixture.innerHTML).toBe("1");
+
+  // trigger a render, but keep the props for child the same
+  parent.render();
+  await nextTick();
+  expect(fixture.innerHTML).toBe("2");
+  expect([
+    "Parent:willRender",
+    "Child:willUpdateProps",
+    "Parent:rendered",
+    "Child:willRender",
+    "Child:rendered",
+    "Parent:willPatch",
+    "Child:willPatch",
+    "Child:patched",
+    "Parent:patched",
+  ]).toBeLogged();
+});
+
 //   test.skip("components with shouldUpdate=false", async () => {
 //     const state = { p: 1, cc: 10 };
 

tests/components/env.test.ts

@@ -49,5 +49,7 @@ describe("env handling", () => {
 
     await new App(Test, { env }).mount(fixture);
     expect(child.env).toEqual(env);
+    // we check that the frozen env maintain the same prototype chain
+    expect(Object.getPrototypeOf(child.env)).toBe(Object.getPrototypeOf(env));
   });
 });