[IMP] env: env is now frozen, useSubEnv does not affect user env

src/app/app.ts

@@ -6,9 +6,13 @@ import { TemplateSet } from "./template_set";
 
 // reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f
 
+export interface Env {
+  [key: string]: any;
+}
+
 interface Config {
   dev?: boolean;
-  env?: { [key: string]: any };
+  env?: Env;
   translatableAttributes?: string[];
   translateFn?: (s: string) => string;
 }
@@ -21,7 +25,7 @@ See https://github.com/odoo/owl/blob/master/doc/reference/config.md#mode for mor
 export class App<T extends typeof Component = any> extends TemplateSet {
   Root: T;
   props: any;
-  env: any = {};
+  env: Env = Object.freeze({});
   scheduler = new Scheduler(window.requestAnimationFrame.bind(window));
   root: ComponentNode | null = null;
 
@@ -36,9 +40,8 @@ export class App<T extends typeof Component = any> extends TemplateSet {
       this.dev = config.dev;
       console.info(DEV_MSG);
     }
-
     if (config.env) {
-      this.env = config.env;
+      this.env = Object.freeze(Object.assign({}, config.env));
     }
     if (config.translateFn) {
       this.translateFn = config.translateFn;

src/component/component.ts

@@ -1,3 +1,4 @@
+import type { Env } from "../app/app";
 import type { ComponentNode } from "./component_node";
 
 // -----------------------------------------------------------------------------
@@ -9,10 +10,10 @@ export class Component {
   static style: string = "";
 
   props: any;
-  env: any;
+  env: Env;
   __owl__: ComponentNode;
 
-  constructor(props: any, env: any, node: ComponentNode) {
+  constructor(props: any, env: Env, node: ComponentNode) {
     this.props = props;
     this.env = env;
     this.__owl__ = node;

src/component/component_node.ts

@@ -1,4 +1,4 @@
-import type { App } from "../app/app";
+import type { App, Env } from "../app/app";
 import { BDom, VNode } from "../blockdom";
 import { Component } from "./component";
 import {
@@ -83,6 +83,7 @@ export class ComponentNode<T extends typeof Component = any> implements VNode<Co
   renderFn: Function;
   parent: ComponentNode | null;
   level: number;
+  childEnv: Env;
   children: { [key: string]: ComponentNode } = Object.create(null);
   slots: any = {};
   refs: any = {};
@@ -101,7 +102,9 @@ export class ComponentNode<T extends typeof Component = any> implements VNode<Co
     this.parent = parent || null;
     this.level = parent ? parent.level + 1 : 0;
     applyDefaultProps(props, C);
-    this.component = new C(props, app.env, this) as any;
+    const env = (parent && parent.childEnv) || app.env;
+    this.childEnv = env;
+    this.component = new C(props, env, this) as any;
     this.renderFn = app.getTemplate(C.template).bind(this.component, this.component, this);
     if (C.style) {
       applyStyles(C);

src/hooks.ts

@@ -0,0 +1,41 @@
+import type { Env } from "./app/app";
+import { getCurrent } from "./component/component_node";
+
+// -----------------------------------------------------------------------------
+// useRef
+// -----------------------------------------------------------------------------
+
+/**
+ * The purpose of this hook is to allow components to get a reference to a sub
+ * html node or component.
+ */
+export function useRef<T extends HTMLElement = HTMLElement>(name: string): { el: T | null } {
+  const node = getCurrent()!;
+  return {
+    get el(): T | null {
+      return node.refs[name] || null;
+    },
+  };
+}
+
+// -----------------------------------------------------------------------------
+// useEnv and useSubEnv
+// -----------------------------------------------------------------------------
+
+/**
+ * This hook is useful as a building block for some customized hooks, that may
+ * need a reference to the env of the component calling them.
+ */
+export function useEnv<E extends Env>(): E {
+  return getCurrent()!.component.env as any;
+}
+
+/**
+ * This hook is a simple way to let components use a sub environment.  Note that
+ * like for all hooks, it is important that this is only called in the
+ * constructor method.
+ */
+export function useSubEnv(envExtension: Env) {
+  const node = getCurrent()!;
+  node.childEnv = Object.freeze(Object.assign({}, node.childEnv, envExtension));
+}

src/index.ts

@@ -31,11 +31,9 @@ export const blockDom = {
   html,
 };
 
-// import { makeBlockClass } from "./_old_bdom/element";
 import { App } from "./app/app";
 import { Component } from "./component/component";
 import { getCurrent } from "./component/component_node";
-// import { getCurrent } from "./b_node";
 
 export { App, Component };
 
@@ -57,7 +55,7 @@ export { Portal } from "./misc/portal";
 export { Memo } from "./misc/memo";
 export { css, xml } from "./tags";
 export { useState } from "./reactivity";
-export { useRef } from "./refs";
+export { useRef, useEnv, useSubEnv } from "./hooks";
 export const utils = { EventBus, whenReady, loadFile };
 
 export {

src/refs.ts

@@ -1,18 +0,0 @@
-// -----------------------------------------------------------------------------
-// useRef
-// -----------------------------------------------------------------------------
-
-import { getCurrent } from "./component/component_node";
-
-/**
- * The purpose of this hook is to allow components to get a reference to a sub
- * html node or component.
- */
-export function useRef<T extends HTMLElement = HTMLElement>(name: string): { el: T | null } {
-  const node = getCurrent()!;
-  return {
-    get el(): T | null {
-      return node.refs[name] || null;
-    },
-  };
-}