Update component.md

Replace `onWillUnmount` by `onWillDestroy` in the said paragraph

CHANGELOG.md

@@ -30,19 +30,32 @@ All changes are documented here in no particular order.
 - breaking: `catchError` method is replaced by `onError` hook ([details](#36-catcherror-method-is-replaced-by-onerror-hook))
 - breaking: Support for inline css (`css` tag and static `style`) has been removed ([details](#37-support-for-inline-css-css-tag-and-static-style-has-been-removed))
 - new: prop validation system can now describe that additional props are allowed (with `*`) ([doc](doc/reference/props.md#props-validation))
+- breaking: prop validation system does not allow default prop on a mandatory (not optional) prop ([doc](doc/reference/props.md#props-validation))
+
 
 
 **Templates**
 
 - breaking: `t-foreach` should always have a corresponding `t-key` ([details](#20-t-foreach-should-always-have-a-corresponding-t-key))
 - breaking: `t-ref` does not work on components ([details](#29-t-ref-does-not-work-on-component))
-- breaking: `t-on` does not accept expressions, only functions ([details](#30-t-on-does-not-accept-expressions-only-functions))
 - breaking: `t-raw` directive has been removed (replaced by `t-out`) ([details](#38-t-raw-directive-has-been-removed-replaced-by-t-out))
 - new: add support for synthetic events ([doc](doc/reference/event_handling.md#synthetic-events))
 - breaking: style/class on components are now regular props ([details](#10-styleclass-on-components-are-now-regular-props))
 - new: components can use the `.bind` suffix to bind function props ([doc](doc/reference/props.md#binding-function-props))
+- breaking: `t-on` does not accept expressions, only functions ([details](#30-t-on-does-not-accept-expressions-only-functions))
 - breaking: `t-on` does not work on components any more ([details](#12-t-on-does-not-work-on-components-any-more))
+- new: an error is thrown if an handler defined in a `t-on-` directive is not a function (failed silently previously in some cases)
 - breaking: `t-component` no longer accepts strings ([details](#17-t-component-no-longer-accepts-strings))
+- new: the `this` variable in template expressions is now bound to the component
+
+
+**Reactivity**
+
+- finer grained reactivity: owl 2 tracks change per key/component
+- finer grained reactivity: sub components can reobserve state ([doc](doc/reference/reactivity.md))
+- new: `reactive` function: create reactive state (without being linked to a component) ([doc](doc/reference/reactivity.md#reactive))
+- new: `markRaw` function: mark an object or array so that it is ignored by the reactivity system ([doc](doc/reference/reactivity.md#markraw))
+- new: `toRaw` function: given a reactive objet, return the raw (non reactive) underlying object ([doc](doc/reference/reactivity.md#toraw))
 
 
 **Slots**
@@ -66,8 +79,6 @@ All changes are documented here in no particular order.
 
 - improved performance
 - much simpler code 
-- finer grained reactivity: owl 2 tracks change per key/component
-- finer grained reactivity: sub components can reobserve state
 - new App class to encapsulate a root Owl component (with the config for that application) ([doc](doc/reference/app.md))
 - new `Memo` component
 - new `useEffect` hook ([doc](doc/reference/hooks.md#useeffect))

doc/reference/app.md

@@ -3,6 +3,7 @@
 ## Content
 
 - [Overview](#overview)
+- [API](#api)
 - [Configuration](#configuration)
 - [`mount` helper](#mount-helper)
 - [Loading templates](#loading-templates)
@@ -26,24 +27,10 @@ The basic workflow is: create an `App` instance configured with the root
 component, the templates, and possibly other settings. Then, we mount that
 instance somewhere in the DOM.
 
-## Configuration
+## API
 
 - **`constructor(Root[, config])`**: first argument should be a component class (not
-  an instance), and the optional second argument is a configuration object.
-
-  The `config` object is an object with some of the following keys:
-
-  - **`env (object)`**: if given, this will be the shared `env` given to each component
-  - **`props (object)`**: the props given to the root component
-  - **`dev (boolean, default=false)`**: if `true`, the application is rendered in `dev`
-    mode, which activates some additional checks (in particular, the props validation
-    code is only performed in dev mode)
-  - **`translatableAttributes (string[])`**: a list of additional attributes that should
-    be translated (see [translations](translations.md))
-  - **`translateFn (function)`**: a function that will be called by owl to translate
-    templates (see [translations](translations.md))
-  - **`templates (string | xml document)`**: all the templates that will be used by
-    the components created by the application.
+  an instance), and the optional second argument is a configuration object (see below).
 
 - **`mount(target, options)`**: first argument is an html element, and the optional
   second argument is an object with mounting options (see below). Mount the app
@@ -58,6 +45,24 @@ instance somewhere in the DOM.
 
 - **`destroy()`**: destroys the application
 
+## Configuration
+
+The `config` object is an object with some of the following keys:
+
+- **`env (object)`**: if given, this will be the shared `env` given to each component
+- **`props (object)`**: the props given to the root component
+- **`dev (boolean, default=false)`**: if `true`, the application is rendered in `dev`
+  mode, which activates some additional checks (in particular, the props validation
+  code is only performed in dev mode)
+- **`test (boolean, default=false)`**: `test` mode is the same as `dev` mode, except
+  that Owll will not log a message to warn that Owl is in `dev` mode.
+- **`translatableAttributes (string[])`**: a list of additional attributes that should
+  be translated (see [translations](translations.md))
+- **`translateFn (function)`**: a function that will be called by owl to translate
+  templates (see [translations](translations.md))
+- **`templates (string | xml document)`**: all the templates that will be used by
+  the components created by the application.
+
 ## `mount` helper
 
 Note that there is a `mount` helper to do that in just a line:

doc/reference/component.md

@@ -352,7 +352,7 @@ cleaning operation, since the component may be destroyed before it has even been
 mounted. The `willDestroy` hook is useful in that situation, since it is always
 called.
 
-The `onWillUnmount` hook is used to register a function that will be executed at
+The `onWillDestroy` hook is used to register a function that will be executed at
 this moment:
 
 ```javascript

doc/reference/props.md

@@ -168,11 +168,15 @@ For each key, a `prop` definition is either a boolean, a constructor, a list of
   - `shape`: if the type was `Object`, then the `shape` key describes the interface of the object. If it is not set, then we only validate the object, not its elements,
   - `validate`: this is a function which should return a boolean to determine if
     the value is valid or not. Useful for custom validation logic.
+  - `optional`: if true, the prop is not mandatory
 
 There is a special `*` prop that means that additional prop are allowed. This is
 sometimes useful for generic components that will propagate some or all their
 props to their child components.
 
+Note that default values cannot be defined for a mandatory props. Doing so will
+result in a prop validation error.
+
 Examples:
 
 ```js
@@ -190,7 +194,8 @@ class ComponentB extends owl.Component {
       element: {type: Object, shape: {id: Boolean, text: String }
     },
    date: Date,
-   combinedVal: [Number, Boolean]
+   combinedVal: [Number, Boolean],
+   optionalProp: { type: Number, optional: true }
   };
 
   ...

doc/reference/slots.md

@@ -87,8 +87,8 @@ grandparent of the slot content).
 
 ## Default Slot
 
-The first element inside the component which is not a named slot will
-be considered the `default` slot. For example:
+All elements inside the component which are not a named slot will be treated as
+part of the content of the `default` slot. For example:
 
 ```xml
 <div t-name="Parent">
@@ -110,6 +110,7 @@ One can mix default slot and named slots:
     default content
     <t t-set-slot="footer">
       content for footer slot here
+    </t>
   </Child>
 </div>
 ```
@@ -209,30 +210,45 @@ use this `Notebook` component:
 </Notebook>
 ```
 
+Slot params works like normal props, so one can use the `.bind` suffix to
+bind a function if needed.
+
 ## Slot scopes
 
-For other kind of advanced use cases, the content of a slot may depends on some
-specific information specific to the generic component. This is the opposite
-of the slot params.
+For other kinds of advanced use cases, the content of a slot may depends on some
+information specific to the generic component. This is the opposite of the slot
+params.
 
 To solve this kind of problems, one can use the `t-slot-scope` directive along
 with the `t-set-slot`. This defines the name of a variable that can access
 everything given by the child component:
 
 ```xml
-<div>
+<MyComponent>
     <t t-set-slot="foo" t-slot-scope="scope">
         content
         <t t-esc="scope.bool"/>
         <t t-esc="scope.num"/>
     </t>
-</div>
+</MyComponent>
 ```
 
 And the child component that includes the slot can provide values like this:
 
 ```xml
-<div>
-    <t t-slot="foo" bool="other_var" num="5">
-</div>
+<t t-slot="foo" bool="other_var" num="5">
 ```
+
+In the case of the default slot, you may declare the slot scope directly on the
+component itself:
+
+```xml
+<MyComponent t-slot-scope="scope">
+    content
+    <t t-esc="scope.bool"/>
+    <t t-esc="scope.num"/>
+</MyComponent>
+```
+
+Slot values works like normal props, so one can use the `.bind` suffix to
+bind a function if needed.

doc/reference/translations.md

@@ -54,6 +54,17 @@ For example, one may want to also translate `data-title` attributes. To do that,
 we can define additional attributes with the `translatableAttributes` option:
 
 ```js
-const app = new App(Root, { templates, tranaslateFn, translatalbeAttributes: ["data-title"] });
+const app = new App(Root, { templates, tranaslateFn, translatableAttributes: ["data-title"] });
 // ...
 ```
+
+It is also possible to remove an attribute from the default list by prefixing it with `-`:
+
+```js
+const app = new App(Root, {
+  templates,
+  tranaslateFn,
+  translatableAttributes: ["data-title", "-title"],
+});
+// data-title attribute will be translated, but not title attribute...
+```

package.json

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

src/app/app.ts

@@ -4,6 +4,7 @@ import { MountOptions } from "../component/fibers";
 import { Scheduler } from "../component/scheduler";
 import { TemplateSet, TemplateSetConfig } from "./template_set";
 import { nodeErrorHandlers } from "../component/error_handling";
+import { validateTarget } from "../utils";
 
 // reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f
 
@@ -14,6 +15,7 @@ export interface Env {
 export interface AppConfig<P, E> extends TemplateSetConfig {
   props?: P;
   env?: E;
+  test?: boolean;
 }
 
 export const DEV_MSG = `Owl is running in 'dev' mode.
@@ -26,6 +28,8 @@ export class App<
   P = any,
   E = any
 > extends TemplateSet {
+  static validateTarget = validateTarget;
+
   Root: ComponentConstructor<P, E>;
   props: P;
   env: E;
@@ -35,7 +39,10 @@ export class App<
   constructor(Root: ComponentConstructor<P, E>, config: AppConfig<P, E> = {}) {
     super(config);
     this.Root = Root;
-    if (config.dev) {
+    if (config.test) {
+      this.dev = true;
+    }
+    if (this.dev && !config.test) {
       console.info(DEV_MSG);
     }
     const descrs = Object.getOwnPropertyDescriptors(config.env || {});
@@ -44,22 +51,13 @@ export class App<
   }
 
   mount(target: HTMLElement, options?: MountOptions): Promise<Component<P, E> & InstanceType<T>> {
-    this.checkTarget(target);
+    App.validateTarget(target);
     const node = this.makeNode(this.Root, this.props);
     const prom = this.mountNode(node, target, options);
     this.root = node;
     return prom;
   }
 
-  checkTarget(target: HTMLElement) {
-    if (!(target instanceof HTMLElement)) {
-      throw new Error("Cannot mount component: the target is not a valid DOM element");
-    }
-    if (!document.body.contains(target)) {
-      throw new Error("Cannot mount a component on a detached dom node");
-    }
-  }
-
   makeNode(Component: ComponentConstructor, props: any): ComponentNode {
     return new ComponentNode(Component, props, this);
   }

src/app/template_helpers.ts

@@ -135,7 +135,7 @@ export function safeOutput(value: any): ReturnType<typeof toggler> {
   } else if (value instanceof LazyValue) {
     safeKey = `lazy_value`;
     block = value.evaluate();
-  } else if (typeof value === "string") {
+  } else if (value instanceof String || typeof value === "string") {
     safeKey = "string_unsafe";
     block = text(value);
   } else {

src/blockdom/block_compiler.ts

@@ -299,12 +299,13 @@ interface BlockCtx {
   locations: IndexedLocation[];
   children: Child[];
   cbRefs: number[];
+  refList: (() => void)[][];
 }
 
 function buildContext(tree: IntermediateTree, ctx?: BlockCtx, fromIdx?: number): BlockCtx {
   if (!ctx) {
     const children = new Array(tree.info.filter((v) => v.type === "child").length);
-    ctx = { collectors: [], locations: [], children, cbRefs: [], refN: tree.refN };
+    ctx = { collectors: [], locations: [], children, cbRefs: [], refN: tree.refN, refList: [] };
     fromIdx = 0;
   }
   if (tree.refN) {
@@ -408,11 +409,11 @@ function updateCtx(ctx: BlockCtx, tree: IntermediateTree) {
         break;
       }
       case "ref":
-        ctx.cbRefs.push(info.idx);
+        const index = ctx.cbRefs.push(info.idx) - 1;
         ctx.locations.push({
           idx: info.idx,
           refIdx: info.refIdx!,
-          setData: setRef,
+          setData: makeRefSetter(index, ctx.refList),
           updateData: NO_OP,
         });
     }
@@ -426,12 +427,21 @@ function buildBlock(template: HTMLElement, ctx: BlockCtx): BlockType {
   let B = createBlockClass(template, ctx);
 
   if (ctx.cbRefs.length) {
-    const refs = ctx.cbRefs;
+    const cbRefs = ctx.cbRefs;
+    const refList = ctx.refList;
+    let cbRefsNumber = cbRefs.length;
     B = class extends B {
+      mount(parent: HTMLElement, afterNode: Node | null) {
+        refList.push(new Array(cbRefsNumber));
+        super.mount(parent, afterNode);
+        for (let cbRef of refList.pop()!) {
+          cbRef();
+        }
+      }
       remove() {
         super.remove();
-        for (let ref of refs) {
-          let fn = (this as any).data[ref];
+        for (let cbRef of cbRefs) {
+          let fn = (this as any).data[cbRef];
           fn(null);
         }
       }
@@ -476,12 +486,12 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
   const nodeInsertBefore = nodeProto.insertBefore;
   const elementRemove = elementProto.remove;
 
-  return class Block {
+  class Block {
     el: HTMLElement | undefined;
-    refs: Node[] | undefined;
-    data: any[] | undefined;
     parentEl?: HTMLElement | undefined;
+    data: any[] | undefined;
     children?: (VNode | undefined)[];
+    refs: Node[] | undefined;
 
     constructor(data?: any[]) {
       this.data = data;
@@ -502,46 +512,62 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
       nodeInsertBefore.call(this.parentEl, this.el!, target);
     }
 
+    toString() {
+      const div = document.createElement("div");
+      this.mount(div, null);
+      return div.innerHTML;
+    }
+
     mount(parent: HTMLElement, afterNode: Node | null) {
-      const el = nodeCloneNode.call(template, true);
+      const el = nodeCloneNode.call(template, true) as HTMLElement;
       nodeInsertBefore.call(parent, el, afterNode);
-      if (isDynamic) {
-        // collecting references
-        const refs: Node[] = new Array(refN);
-        this.refs = refs;
-        refs[0] = el;
-        for (let i = 0; i < colN; i++) {
-          const w = collectors[i];
-          refs[w.idx] = w.getVal.call(refs[w.prevIdx]);
-        }
+      this.el = el;
+      this.parentEl = parent;
+    }
+    patch(other: Block, withBeforeRemove: boolean) {}
+  }
 
-        // applying data to all update points
-        if (locN) {
-          const data = this.data!;
-          for (let i = 0; i < locN; i++) {
-            const loc = locations[i];
-            loc.setData.call(refs[loc.refIdx], data[i]);
-          }
-        }
+  if (isDynamic) {
+    Block.prototype.mount = function mount(parent: HTMLElement, afterNode: Node | null) {
+      const el = nodeCloneNode.call(template, true);
+      // collecting references
+      const refs: Node[] = new Array(refN);
+      this.refs = refs;
+      refs[0] = el;
+      for (let i = 0; i < colN; i++) {
+        const w = collectors[i];
+        refs[w.idx] = w.getVal.call(refs[w.prevIdx]);
+      }
 
-        // preparing all children
-        if (childN) {
-          const children = this.children;
-          for (let i = 0; i < childN; i++) {
-            const child = children![i];
-            if (child) {
-              const loc = childrenLocs[i];
-              const afterNode = loc.afterRefIdx ? refs[loc.afterRefIdx] : null;
-              child.isOnlyChild = loc.isOnlyChild;
-              child.mount(refs[loc.parentRefIdx] as any, afterNode);
-            }
+      // applying data to all update points
+      if (locN) {
+        const data = this.data!;
+        for (let i = 0; i < locN; i++) {
+          const loc = locations[i];
+          loc.setData.call(refs[loc.refIdx], data[i]);
+        }
+      }
+
+      nodeInsertBefore.call(parent, el, afterNode);
+
+      // preparing all children
+      if (childN) {
+        const children = this.children;
+        for (let i = 0; i < childN; i++) {
+          const child = children![i];
+          if (child) {
+            const loc = childrenLocs[i];
+            const afterNode = loc.afterRefIdx ? refs[loc.afterRefIdx] : null;
+            child.isOnlyChild = loc.isOnlyChild;
+            child.mount(refs[loc.parentRefIdx] as any, afterNode);
           }
         }
       }
       this.el = el as HTMLElement;
       this.parentEl = parent;
-    }
-    patch(other: Block, withBeforeRemove: boolean) {
+    };
+
+    Block.prototype.patch = function patch(other: Block, withBeforeRemove: boolean) {
       if (this === other) {
         return;
       }
@@ -586,19 +612,17 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
           }
         }
       }
-    }
-    toString() {
-      const div = document.createElement("div");
-      this.mount(div, null);
-      return div.innerHTML;
-    }
-  };
+    };
+  }
+  return Block;
 }
 
 function setText(this: Text, value: any) {
   characterDataSetData.call(this, toText(value));
 }
 
-function setRef(this: HTMLElement, fn: any) {
-  fn(this);
+function makeRefSetter(index: number, refs: (() => void)[][]): Setter<HTMLElement> {
+  return function setRef(this: HTMLElement, fn: any) {
+    refs[refs.length - 1][index] = () => fn(this);
+  };
 }

src/blockdom/text.ts

@@ -9,11 +9,11 @@ const characterDataSetData = getDescriptor(characterDataProto, "data").set!;
 const nodeRemoveChild = nodeProto.removeChild;
 
 abstract class VSimpleNode {
-  text: string;
+  text: string | String;
   parentEl?: HTMLElement | undefined;
   el?: any;
 
-  constructor(text: string) {
+  constructor(text: string | String) {
     this.text = text;
   }
 
@@ -65,7 +65,7 @@ class VComment extends VSimpleNode {
   patch() {}
 }
 
-export function text(str: string): VNode<VText> {
+export function text(str: string | String): VNode<VText> {
   return new VText(str);
 }
 

src/compiler/code_generator.ts

@@ -214,14 +214,24 @@ export class CodeGenerator {
   templateName?: string;
   dev: boolean;
   translateFn: (s: string) => string;
-  translatableAttributes: string[];
+  translatableAttributes: string[] = TRANSLATABLE_ATTRS;
   ast: AST;
   staticCalls: { id: string; template: string }[] = [];
   helpers: Set<string> = new Set();
 
   constructor(ast: AST, options: CodeGenOptions) {
     this.translateFn = options.translateFn || ((s: string) => s);
-    this.translatableAttributes = options.translatableAttributes || TRANSLATABLE_ATTRS;
+    if (options.translatableAttributes) {
+      const attrs = new Set(TRANSLATABLE_ATTRS);
+      for (let attr of options.translatableAttributes) {
+        if (attr.startsWith("-")) {
+          attrs.delete(attr.slice(1));
+        } else {
+          attrs.add(attr);
+        }
+      }
+      this.translatableAttributes = [...attrs];
+    }
     this.hasSafeContext = options.hasSafeContext || false;
     this.dev = options.dev || false;
     this.ast = ast;
@@ -1040,29 +1050,50 @@ export class CodeGenerator {
     return parts.join("__");
   }
 
+  /**
+   * Formats a prop name and value into a string suitable to be inserted in the
+   * generated code. For example:
+   *
+   * Name              Value            Result
+   * ---------------------------------------------------------
+   * "number"          "state"          "number: ctx['state']"
+   * "something"       ""               "something: undefined"
+   * "some-prop"       "state"          "'some-prop': ctx['state']"
+   * "onClick.bind"    "onClick"        "onClick: bind(ctx, ctx['onClick'])"
+   */
+  formatProp(name: string, value: string): string {
+    value = this.captureExpression(value);
+    if (name.includes(".")) {
+      let [_name, suffix] = name.split(".");
+      if (suffix === "bind") {
+        this.helpers.add("bind");
+        name = _name;
+        value = `bind(ctx, ${value || undefined})`;
+      } else {
+        throw new Error("Invalid prop suffix");
+      }
+    }
+    name = /^[a-z_]+$/i.test(name) ? name : `'${name}'`;
+    return `${name}: ${value || undefined}`;
+  }
+
+  formatPropObject(obj: { [prop: string]: any }): string {
+    const params = [];
+    for (const [n, v] of Object.entries(obj)) {
+      params.push(this.formatProp(n, v));
+    }
+    return params.join(", ");
+  }
+
   compileComponent(ast: ASTComponent, ctx: Context) {
     let { block } = ctx;
 
     // props
+    const hasSlotsProp = "slots" in ast.props;
     const props: string[] = [];
-    let hasSlotsProp = false;
-    for (let propName in ast.props) {
-      let propValue = this.captureExpression(ast.props[propName]) || undefined;
-      if (propName.includes(".")) {
-        let [name, suffix] = propName.split(".");
-        if (suffix === "bind") {
-          this.helpers.add("bind");
-          propName = name;
-          propValue = `bind(ctx, ${propValue})`;
-        } else {
-          throw new Error("Invalid prop suffix");
-        }
-      }
-      propName = /^[a-z_]+$/i.test(propName) ? propName : `'${propName}'`;
-      props.push(`${propName}: ${propValue}`);
-      if (propName === "slots") {
-        hasSlotsProp = true;
-      }
+    const propExpr = this.formatPropObject(ast.props);
+    if (propExpr) {
+      props.push(propExpr);
     }
 
     // slots
@@ -1085,9 +1116,7 @@ export class CodeGenerator {
           params.push(`__scope: "${scope}"`);
         }
         if (ast.slots[slotName].attrs) {
-          for (const [n, v] of Object.entries(ast.slots[slotName].attrs!)) {
-            params.push(`${n}: ${compileExpr(v) || undefined}`);
-          }
+          params.push(this.formatPropObject(ast.slots[slotName].attrs!));
         }
         const slotInfo = `{${params.join(", ")}}`;
         slotStr.push(`'${slotName}': ${slotInfo}`);
@@ -1166,15 +1195,7 @@ export class CodeGenerator {
       slotName = "'" + ast.name + "'";
     }
 
-    let scope = null;
-    if (ast.attrs) {
-      const params = [];
-      for (const [n, v] of Object.entries(ast.attrs!)) {
-        params.push(`${n}: ${compileExpr(v) || undefined}`);
-      }
-      scope = `{${params.join(", ")}}`;
-    }
-
+    const scope = ast.attrs ? `{${this.formatPropObject(ast.attrs)}}` : null;
     if (ast.defaultContent) {
       const name = this.compileInNewTarget("defaultContent", ast.defaultContent, ctx);
       blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope}, ${name})`;

src/compiler/parser.ts

@@ -677,6 +677,9 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
   const dynamicProps = node.getAttribute("t-props");
   node.removeAttribute("t-props");
 
+  const defaultSlotScope = node.getAttribute("t-slot-scope");
+  node.removeAttribute("t-slot-scope");
+
   const props: ASTComponent["props"] = {};
   for (let name of node.getAttributeNames()) {
     const value = node.getAttribute(name)!;
@@ -742,6 +745,9 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
     const defaultContent = parseChildNodes(clone, ctx);
     if (defaultContent) {
       slots.default = { content: defaultContent };
+      if (defaultSlotScope) {
+        slots.default.scope = defaultSlotScope;
+      }
     }
   }
   return { type: ASTType.TComponent, name, isDynamic, dynamicProps, props, slots };

src/component/component_node.ts

@@ -15,7 +15,10 @@ import { STATUS } from "./status";
 
 let currentNode: ComponentNode | null = null;
 
-export function getCurrent(): ComponentNode | null {
+export function getCurrent(): ComponentNode {
+  if (!currentNode) {
+    throw new Error("No active component (a hook function should only be called in 'setup')");
+  }
   return currentNode;
 }
 
@@ -108,6 +111,7 @@ export class ComponentNode<P = any, E = any> implements VNode<ComponentNode<P, E
     this.component = new C(props, env, this) as any;
     this.renderFn = app.getTemplate(C.template).bind(this.component, this.component, this);
     this.component.setup();
+    currentNode = null;
   }
 
   mountComponent(target: any, options?: MountOptions) {

src/component/fibers.ts

@@ -159,6 +159,7 @@ export class MountFiber extends RootFiber {
     let current: Fiber | undefined = this;
     try {
       const node = this.node;
+      (node.app.constructor as any).validateTarget(this.target);
       if (node.bdom) {
         // this is a complicated situation: if we mount a fiber with an existing
         // bdom, this means that this same fiber was already completed, mounted,

src/component/lifecycle_hooks.ts

@@ -6,42 +6,42 @@ import { nodeErrorHandlers } from "./error_handling";
 // -----------------------------------------------------------------------------
 
 export function onWillStart(fn: () => Promise<void> | void | any) {
-  const node = getCurrent()!;
+  const node = getCurrent();
   node.willStart.push(fn.bind(node.component));
 }
 
 export function onWillUpdateProps(fn: (nextProps: any) => Promise<void> | void | any) {
-  const node = getCurrent()!;
+  const node = getCurrent();
   node.willUpdateProps.push(fn.bind(node.component));
 }
 
 export function onMounted(fn: () => void | any) {
-  const node = getCurrent()!;
+  const node = getCurrent();
   node.mounted.push(fn.bind(node.component));
 }
 
 export function onWillPatch(fn: () => Promise<void> | any | void) {
-  const node = getCurrent()!;
+  const node = getCurrent();
   node.willPatch.unshift(fn.bind(node.component));
 }
 
 export function onPatched(fn: () => void | any) {
-  const node = getCurrent()!;
+  const node = getCurrent();
   node.patched.push(fn.bind(node.component));
 }
 
 export function onWillUnmount(fn: () => Promise<void> | void | any) {
-  const node = getCurrent()!;
+  const node = getCurrent();
   node.willUnmount.unshift(fn.bind(node.component));
 }
 
 export function onWillDestroy(fn: () => Promise<void> | void | any) {
-  const node = getCurrent()!;
+  const node = getCurrent();
   node.willDestroy.push(fn.bind(node.component));
 }
 
 export function onWillRender(fn: () => void | any) {
-  const node = getCurrent()!;
+  const node = getCurrent();
   const renderFn = node.renderFn;
   node.renderFn = () => {
     fn.call(node.component);
@@ -50,7 +50,7 @@ export function onWillRender(fn: () => void | any) {
 }
 
 export function onRendered(fn: () => void | any) {
-  const node = getCurrent()!;
+  const node = getCurrent();
   const renderFn = node.renderFn;
   node.renderFn = () => {
     const result = renderFn();
@@ -61,7 +61,7 @@ export function onRendered(fn: () => void | any) {
 
 type OnErrorCallback = (error: any) => void | any;
 export function onError(callback: OnErrorCallback) {
-  const node = getCurrent()!;
+  const node = getCurrent();
   let handlers = nodeErrorHandlers.get(node);
   if (!handlers) {
     handlers = [];

src/component/props_validation.ts

@@ -47,6 +47,7 @@ export function validateProps<P>(name: string | ComponentConstructor<P>, props:
   }
   applyDefaultProps(props, ComponentClass);
 
+  const defaultProps = ComponentClass.defaultProps || {};
   let propsDef = getPropDescription(ComponentClass.props);
   const allowAdditionalProps = "*" in propsDef;
 
@@ -54,8 +55,18 @@ export function validateProps<P>(name: string | ComponentConstructor<P>, props:
     if (propName === "*") {
       continue;
     }
+    const propDef = propsDef[propName];
+    let isMandatory = !!propDef;
+    if (typeof propDef === "object" && "optional" in propDef) {
+      isMandatory = !propDef.optional;
+    }
+    if (isMandatory && propName in defaultProps) {
+      throw new Error(
+        `A default value cannot be defined for a mandatory prop (name: '${propName}', component: ${ComponentClass.name})`
+      );
+    }
     if ((props as any)[propName] === undefined) {
-      if (propsDef[propName] && !propsDef[propName].optional) {
+      if (isMandatory) {
         throw new Error(`Missing props '${propName}' (component '${ComponentClass.name}')`);
       } else {
         continue;
@@ -63,7 +74,7 @@ export function validateProps<P>(name: string | ComponentConstructor<P>, props:
     }
     let isValid;
     try {
-      isValid = isValidProp((props as any)[propName], propsDef[propName]);
+      isValid = isValidProp((props as any)[propName], propDef);
     } catch (e) {
       (e as Error).message = `Invalid prop '${propName}' in component ${ComponentClass.name} (${
         (e as Error).message

src/hooks.ts

@@ -11,7 +11,7 @@ import { onMounted, onPatched, onWillUnmount } from "./component/lifecycle_hooks
  * html node or component.
  */
 export function useRef<T extends HTMLElement = HTMLElement>(name: string): { el: T | null } {
-  const node = getCurrent()!;
+  const node = getCurrent();
   const refs = node.refs;
   return {
     get el(): T | null {
@@ -29,7 +29,7 @@ export function useRef<T extends HTMLElement = HTMLElement>(name: string): { el:
  * need a reference to the env of the component calling them.
  */
 export function useEnv<E extends Env>(): E {
-  return getCurrent()!.component.env as any;
+  return getCurrent().component.env as any;
 }
 
 function extendEnv(currentEnv: Object, extension: Object): Object {
@@ -44,14 +44,13 @@ function extendEnv(currentEnv: Object, extension: Object): Object {
  * constructor method.
  */
 export function useSubEnv(envExtension: Env) {
-  const node = getCurrent()!;
-  const newEnv = extendEnv(node.component.env as any, envExtension);
+  const node = getCurrent();
   node.component.env = extendEnv(node.component.env as any, envExtension);
-  node.childEnv = newEnv;
+  useChildSubEnv(envExtension);
 }
 
 export function useChildSubEnv(envExtension: Env) {
-  const node = getCurrent()!;
+  const node = getCurrent();
   node.childEnv = extendEnv(node.childEnv, envExtension);
 }
 // -----------------------------------------------------------------------------
@@ -122,7 +121,7 @@ export function useExternalListener(
   handler: EventListener,
   eventParams?: AddEventListenerOptions
 ) {
-  const node = getCurrent()!;
+  const node = getCurrent();
   const boundHandler = handler.bind(node.component);
   onMounted(() => target.addEventListener(eventName, boundHandler, eventParams));
   onWillUnmount(() => target.removeEventListener(eventName, boundHandler, eventParams));

src/reactivity.ts

@@ -239,7 +239,7 @@ const batchedRenderFunctions = new WeakMap<ComponentNode, Callback>();
  * @see reactive
  */
 export function useState<T extends object>(state: T): Reactive<T> | NonReactive<T> {
-  const node = getCurrent()!;
+  const node = getCurrent();
   if (!batchedRenderFunctions.has(node)) {
     batchedRenderFunctions.set(
       node,

src/utils.ts

@@ -24,6 +24,15 @@ export function batched(callback: Callback): Callback {
   };
 }
 
+export function validateTarget(target: HTMLElement) {
+  if (!(target instanceof HTMLElement)) {
+    throw new Error("Cannot mount component: the target is not a valid DOM element");
+  }
+  if (!document.body.contains(target)) {
+    throw new Error("Cannot mount a component on a detached dom node");
+  }
+}
+
 export class EventBus extends EventTarget {
   trigger(name: string, payload?: any) {
     this.dispatchEvent(new CustomEvent(name, { detail: payload }));

tests/blockdom/block_refs.test.ts

@@ -1,4 +1,5 @@
 import { createBlock, mount, patch, remove } from "../../src/blockdom";
+import { logStep } from "../helpers";
 import { makeTestFixture } from "./helpers";
 
 //------------------------------------------------------------------------------
@@ -55,3 +56,15 @@ test("is in dom when callback is called", async () => {
 
   mount(tree, fixture);
 });
+
+test("callback ref in callback ref with same block", async () => {
+  const block = createBlock('<p block-ref="0"><block-text-1/><block-child-0/></p>');
+  let refFn = (el: HTMLParagraphElement) => logStep(el.outerHTML);
+
+  const child = block([refFn, "child"], []);
+  const parent = block([refFn, "parent"], [child]);
+  mount(parent, fixture);
+
+  expect(fixture.innerHTML).toBe("<p>parent<p>child</p></p>");
+  expect(["<p>child</p>", "<p>parent<p>child</p></p>"]).toBeLogged();
+});

tests/compiler/__snapshots__/misc.test.ts.snap

@@ -34,7 +34,7 @@ exports[`misc complex template 1`] = `
     for (let i1 = 0; i1 < l_block4; i1++) {
       ctx[\`slot\`] = v_block4[i1];
       let key1 = ctx['slot'].id;
-      c_block4[i1] = withKey(component(\`SlotButton\`, {class: ctx['slot_container'],slot: ctx['slot']}, key + \`__1__\${key1}\`, node, ctx), key1);
+      c_block4[i1] = withKey(component(\`SlotButton\`, {class: ctx['slot_container'], slot: ctx['slot']}, key + \`__1__\${key1}\`, node, ctx), key1);
     }
     ctx = ctx.__proto__;
     b4 = list(c_block4);
@@ -316,8 +316,8 @@ exports[`misc other complex template 1`] = `
     if (!ctx['project']) {
       b24 = block24();
     } else {
-      let b26 = component(\`BundlesList\`, {bundles: ctx['bundles'].sticky,category_custom_views: ctx['category_custom_views'],search: ctx['search']}, key + \`__2\`, node, ctx);
-      let b27 = component(\`BundlesList\`, {bundles: ctx['bundles'].dev,search: ctx['search']}, key + \`__3\`, node, ctx);
+      let b26 = component(\`BundlesList\`, {bundles: ctx['bundles'].sticky, category_custom_views: ctx['category_custom_views'], search: ctx['search']}, key + \`__2\`, node, ctx);
+      let b27 = component(\`BundlesList\`, {bundles: ctx['bundles'].dev, search: ctx['search']}, key + \`__3\`, node, ctx);
       b25 = block25([], [b26, b27]);
     }
     return block1([attr1, txt1, hdlr2, hdlr3, attr8, hdlr4, hdlr5, ref1, hdlr6, ref2], [b2, b4, b14, b17, b22, b23, b24, b25]);

tests/compiler/__snapshots__/t_out.test.ts.snap

@@ -407,6 +407,36 @@ exports[`t-out variable 1`] = `
 }"
 `;
 
+exports[`t-out with a String class 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { safeOutput } = helpers;
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = safeOutput(ctx['var']);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-out with an extended String class 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { safeOutput } = helpers;
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = safeOutput(ctx['var']);
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`t-raw is deprecated should warn 1`] = `
 "function anonymous(bdom, helpers
 ) {

tests/compiler/__snapshots__/translation.test.ts.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`translation support can set translatable attributes 1`] = `
+exports[`translation support can set and remove translatable attributes 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div tomato=\\"word\\" potato=\\"mot\\" title=\\"word\\">text</div>\`);
+  let block1 = createBlock(\`<div tomato=\\"word\\" potato=\\"mot\\" title=\\"mot\\" label=\\"word\\">text</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     return block1();

tests/compiler/t_out.test.ts

@@ -37,6 +37,26 @@ describe("t-out", () => {
     expect(renderToString(template, { var: "ok" })).toBe("<span>ok</span>");
   });
 
+  test("with a String class", () => {
+    const template = `<span><t t-out="var"/></span>`;
+    expect(renderToString(template, { var: new String("ok") })).toBe("<span>ok</span>");
+  });
+
+  test("with an extended String class", () => {
+    class LoveString extends String {
+      valueOf(): string {
+        return `<3 ${super.valueOf()} <3`;
+      }
+      toString(): string {
+        return this.valueOf();
+      }
+    }
+    const template = `<span><t t-out="var"/></span>`;
+    expect(renderToString(template, { var: new LoveString("ok") })).toBe(
+      "<span>&lt;3 ok &lt;3</span>"
+    );
+  });
+
   test("not escaping", () => {
     const template = `<div><t t-out="var"/></div>`;
     expect(renderToString(template, { var: markup("<ok></ok>") })).toBe("<div><ok></ok></div>");

tests/compiler/translation.test.ts

@@ -59,18 +59,20 @@ describe("translation support", () => {
     );
   });
 
-  test("can set translatable attributes", async () => {
+  test("can set and remove translatable attributes", async () => {
     class SomeComponent extends Component {
       static template = xml`
-        <div tomato="word" potato="word" title="word">text</div>
+        <div tomato="word" potato="word" title="word" label="word">text</div>
       `;
     }
 
     await mount(SomeComponent, fixture, {
       translateFn: (expr: string) => (expr === "word" ? "mot" : expr),
-      translatableAttributes: ["potato"],
+      translatableAttributes: ["potato", "-label"],
     });
-    expect(fixture.innerHTML).toBe('<div tomato="word" potato="mot" title="word">text</div>');
+    expect(fixture.innerHTML).toBe(
+      '<div tomato="word" potato="mot" title="mot" label="word">text</div>'
+    );
   });
 
   test("translation is done on the trimmed text, with extra spaces readded after", async () => {

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

@@ -81,6 +81,19 @@ exports[`basics a class component inside a class component, no external dom 2`]
 }"
 `;
 
+exports[`basics a component cannot be mounted in a detached node (even if node is detached later) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`basics a component inside a component 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -981,7 +994,7 @@ exports[`basics update props of component without concrete own node 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['props'].subKey;
-    return toggler(tKey_1, component(\`Custom\`, {key: ctx['props'].key,subKey: ctx['props'].subKey}, tKey_1 + key + \`__1\`, node, ctx));
+    return toggler(tKey_1, component(\`Custom\`, {key: ctx['props'].key, subKey: ctx['props'].subKey}, tKey_1 + key + \`__1\`, node, ctx));
   }
 }"
 `;

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

@@ -183,7 +183,7 @@ exports[`concurrent renderings scenario 1 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA,fromB: ctx['state'].fromB}, key + \`__1\`, node, ctx);
+    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA, fromB: ctx['state'].fromB}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -227,7 +227,7 @@ exports[`concurrent renderings scenario 2 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA,fromB: ctx['state'].fromB}, key + \`__1\`, node, ctx);
+    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA, fromB: ctx['state'].fromB}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -270,7 +270,7 @@ exports[`concurrent renderings scenario 2bis 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA,fromB: ctx['state'].fromB}, key + \`__1\`, node, ctx);
+    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA, fromB: ctx['state'].fromB}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -327,7 +327,7 @@ exports[`concurrent renderings scenario 3 3`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA,fromC: ctx['state'].fromC}, key + \`__1\`, node, ctx);
+    let b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA, fromC: ctx['state'].fromC}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -384,7 +384,7 @@ exports[`concurrent renderings scenario 4 3`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA,fromC: ctx['state'].fromC}, key + \`__1\`, node, ctx);
+    let b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA, fromC: ctx['state'].fromC}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -557,7 +557,7 @@ exports[`concurrent renderings scenario 9 3`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA,fromC: ctx['state'].fromC}, key + \`__1\`, node, ctx);
+    let b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA, fromC: ctx['state'].fromC}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -734,7 +734,7 @@ exports[`concurrent renderings scenario 14 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`C\`, {fromB: ctx['state'].fromB,fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
+    let b2 = component(\`C\`, {fromB: ctx['state'].fromB, fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -778,7 +778,7 @@ exports[`concurrent renderings scenario 15 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`C\`, {fromB: ctx['state'].fromB,fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
+    let b2 = component(\`C\`, {fromB: ctx['state'].fromB, fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -817,7 +817,7 @@ exports[`concurrent renderings scenario 16 2`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`C\`, {fromB: ctx['state'].fromB,fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
+    return component(\`C\`, {fromB: ctx['state'].fromB, fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
   }
 }"
 `;

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

@@ -85,6 +85,17 @@ exports[`basics simple catchError 2`] = `
 }"
 `;
 
+exports[`can catch errors calling a hook outside setup should crash 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['state'].value);
+  }
+}"
+`;
+
 exports[`can catch errors can catch an error in a component render function 1`] = `
 "function anonymous(bdom, helpers
 ) {

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

@@ -103,6 +103,37 @@ exports[`hooks mounted callbacks should be called in reverse order from willUnmo
 }"
 `;
 
+exports[`hooks parent and child env (with useChildSubEnv then useSubEnv) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = text(ctx['env'].val);
+    let b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`hooks parent and child env (with useChildSubEnv then useSubEnv) 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block2 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['env'].hasParent) {
+      let txt1 = ctx['env'].val;
+      b2 = block2([txt1]);
+    }
+    return multi([b2]);
+  }
+}"
+`;
+
 exports[`hooks parent and child env (with useChildSubEnv) 1`] = `
 "function anonymous(bdom, helpers
 ) {

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

@@ -273,7 +273,7 @@ exports[`bound functions is referentially equal after update 1`] = `
   let { bind } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {val: ctx['state'].val,fn: bind(ctx, ctx['someFunction'])}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {val: ctx['state'].val, fn: bind(ctx, ctx['someFunction'])}, key + \`__1\`, node, ctx);
   }
 }"
 `;

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

@@ -1,6 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`default props can set default required boolean values 1`] = `
+exports[`default props a default prop cannot be defined on a mandatory prop 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {};
+    helpers.validateProps(\`Child\`, props1, ctx);
+    return component(\`Child\`, props1, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`default props can set default boolean values 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -16,7 +29,7 @@ exports[`default props can set default required boolean values 1`] = `
 }"
 `;
 
-exports[`default props can set default required boolean values 2`] = `
+exports[`default props can set default boolean values 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -102,7 +115,7 @@ exports[`props validation can specify that additional props are allowed (array)
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    const props1 = {message: 'm',otherProp: 'o'};
+    const props1 = {message: 'm', otherProp: 'o'};
     helpers.validateProps(\`Child\`, props1, ctx);
     return component(\`Child\`, props1, key + \`__1\`, node, ctx);
   }
@@ -128,7 +141,7 @@ exports[`props validation can specify that additional props are allowed (object)
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    const props1 = {message: 'm',otherProp: 'o'};
+    const props1 = {message: 'm', otherProp: 'o'};
     helpers.validateProps(\`Child\`, props1, ctx);
     return component(\`Child\`, props1, key + \`__1\`, node, ctx);
   }

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

@@ -38,6 +38,26 @@ exports[`refs can use 2 refs with same name in a t-if/t-else situation 1`] = `
 }"
 `;
 
+exports[`refs refs and recursive templates 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<p block-ref=\\"0\\"><block-text-1/><block-child-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const refs = ctx.__owl__.refs;
+    const ref1 = (el) => refs[\`root\`] = el;
+    let b2;
+    let txt1 = ctx['props'].tree.value;
+    if (ctx['props'].tree.child) {
+      b2 = component(\`Test\`, {tree: ctx['props'].tree.child}, key + \`__1\`, node, ctx);
+    }
+    return block1([ref1, txt1], [b2]);
+  }
+}"
+`;
+
 exports[`refs refs are properly bound in slots 1`] = `
 "function anonymous(bdom, helpers
 ) {

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

@@ -75,6 +75,37 @@ exports[`slots can define and call slots 2`] = `
 }"
 `;
 
+exports[`slots can define and call slots with bound params 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { capture, bind } = helpers;
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return text(\`abc\`);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    const ctx1 = capture(ctx);
+    return component(\`Child\`, {slots: {'abc': {__render: slot1, __ctx: ctx1, getValue: bind(ctx, ctx['getValue'])}}}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`slots can define and call slots with bound params 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callSlot(ctx, node, key, 'abc', false, {});
+    let b3 = text(ctx['props'].slots['abc'].getValue());
+    return multi([b2, b3]);
+  }
+}"
+`;
+
 exports[`slots can define and call slots with params 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -424,6 +455,69 @@ exports[`slots default slot next to named slot, with default content 2`] = `
 }"
 `;
 
+exports[`slots default slot with params with - in it 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return text(ctx['slotScope']['some-value']);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx, __scope: \\"slotScope\\"}}}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`slots default slot with params with - in it 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return callSlot(ctx, node, key, 'default', false, {'some-value': ctx['state'].value});
+  }
+}"
+`;
+
+exports[`slots default slot with slot scope: shorthand syntax 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  function slot1(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['slotScope'].bool) {
+      b2 = text(\`some text\`);
+    } else {
+      b3 = text(\`other text\`);
+    }
+    return multi([b2, b3]);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx, __scope: \\"slotScope\\"}}}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`slots default slot with slot scope: shorthand syntax 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callSlot(ctx, node, key, 'default', false, {bool: ctx['state'].bool});
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`slots default slot work with text nodes (variation) 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -1139,7 +1233,6 @@ exports[`slots simple default slot with params 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { capture } = helpers;
   
   function slot1(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -1152,8 +1245,7 @@ exports[`slots simple default slot with params 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
-    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1, __scope: \\"slotScope\\"}}}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -1173,38 +1265,29 @@ exports[`slots simple default slot with params 2`] = `
 }"
 `;
 
-exports[`slots simple default slot with params 3`] = `
+exports[`slots simple default slot with params and bound function 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   function slot1(ctx, node, key = \\"\\") {
-    let b2,b3;
-    if (ctx['slotScope'].bool) {
-      b2 = text(\`some text\`);
-    } else {
-      b3 = text(\`other text\`);
-    }
-    return multi([b2, b3]);
+    return text(ctx['slotScope'].fn());
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx, __scope: \\"slotScope\\"}}}, key + \`__1\`, node, ctx);
   }
 }"
 `;
 
-exports[`slots simple default slot with params 4`] = `
+exports[`slots simple default slot with params and bound function 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  let { callSlot, bind } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'default', false, {bool: ctx['state'].bool});
-    return block1([], [b2]);
+    return callSlot(ctx, node, key, 'default', false, {fn: bind(ctx, ctx['getValue'])});
   }
 }"
 `;
@@ -1236,6 +1319,44 @@ exports[`slots simple default slot, variation 2`] = `
 }"
 `;
 
+exports[`slots simple slot with slot scope 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { capture } = helpers;
+  
+  function slot1(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['slotScope'].bool) {
+      b2 = text(\`some text\`);
+    } else {
+      b3 = text(\`other text\`);
+    }
+    return multi([b2, b3]);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    const ctx1 = capture(ctx);
+    return component(\`Child\`, {slots: {'slotName': {__render: slot1, __ctx: ctx1, __scope: \\"slotScope\\"}}}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`slots simple slot with slot scope 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callSlot(ctx, node, key, 'slotName', false, {bool: ctx['state'].bool});
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`slots slot and (inline) t-call 1`] = `
 "function anonymous(bdom, helpers
 ) {

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

@@ -147,7 +147,7 @@ exports[`style and class handling class on sub component, which is switched to a
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'someclass',child: ctx['state'].child}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {class: 'someclass', child: ctx['state'].child}, key + \`__1\`, node, ctx);
   }
 }"
 `;

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

@@ -177,7 +177,7 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach,
       for (let i2 = 0; i2 < l_block4; i2++) {
         ctx[\`col\`] = v_block4[i2];
         let key2 = ctx['col'];
-        let b6 = component(\`Child\`, {row: ctx['row'],col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, ctx);
+        let b6 = component(\`Child\`, {row: ctx['row'], col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, ctx);
         c_block4[i2] = withKey(block5([], [b6]), key2);
       }
       ctx = ctx.__proto__;

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

@@ -117,7 +117,7 @@ exports[`t-props t-props with props 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, Object.assign({}, ctx['childProps'], {a: 1,b: 2}), key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, Object.assign({}, ctx['childProps'], {a: 1, b: 2}), key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"

tests/components/basics.test.ts

@@ -171,6 +171,27 @@ describe("basics", () => {
     expect(error!.message).toBe("Cannot mount a component on a detached dom node");
   });
 
+  test("a component cannot be mounted in a detached node (even if node is detached later)", async () => {
+    const warn = console.warn;
+    console.warn = jest.fn();
+    class Test extends Component {
+      static template = xml`<div/>`;
+    }
+    let error: Error;
+    const prom = mount(Test, fixture);
+    await Promise.resolve();
+    fixture.remove();
+    try {
+      await prom;
+    } catch (e) {
+      error = e as Error;
+    }
+    expect(error!).toBeDefined();
+    expect(error!.message).toBe("Cannot mount a component on a detached dom node");
+    expect(console.warn).toBeCalledTimes(1);
+    console.warn = warn;
+  });
+
   test("crashes if it cannot find a template", async () => {
     class Test extends Component {
       static template = "wrongtemplate";

tests/components/error_handling.test.ts

@@ -374,6 +374,28 @@ describe("can catch errors", () => {
     expect(mockConsoleWarn).toBeCalledTimes(0);
   });
 
+  test("calling a hook outside setup should crash", async () => {
+    class Root extends Component {
+      static template = xml`<t t-esc="state.value"/>`;
+      state = useState({ value: 1 });
+
+      setup() {
+        onWillStart(() => {
+          this.state = useState({ value: 2 });
+        });
+      }
+    }
+    let e: any = null;
+    try {
+      await mount(Root, fixture);
+    } catch (error) {
+      e = error;
+    }
+    expect(e.message).toBe(
+      "No active component (a hook function should only be called in 'setup')"
+    );
+  });
+
   test("can catch an error in the initial call of a component render function (parent mounted)", async () => {
     class ErrorComponent extends Component {
       static template = xml`<div>hey<t t-esc="state.this.will.crash"/></div>`;

tests/components/hooks.test.ts

@@ -322,6 +322,24 @@ describe("hooks", () => {
     expect(fixture.innerHTML).toBe("3<div>5</div>");
   });
 
+  test("parent and child env (with useChildSubEnv then useSubEnv)", async () => {
+    class Child extends Component {
+      static template = xml`<div t-if="env.hasParent"><t t-esc="env.val"/></div>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<t t-esc="env.val"/><Child/>`;
+      static components = { Child };
+      setup() {
+        useChildSubEnv({ hasParent: true });
+        useSubEnv({ val: 5 });
+      }
+    }
+    const env = { val: 3 };
+    await mount(Parent, fixture, { env });
+    expect(fixture.innerHTML).toBe("5<div>5</div>");
+  });
+
   test("can use onWillStart, onWillUpdateProps", async () => {
     const steps: string[] = [];
     async function slow(): Promise<string> {

tests/components/props_validation.test.ts

@@ -684,7 +684,7 @@ describe("props validation", () => {
   test("default values are applied before validating props at update", async () => {
     // need to do something about errors catched in render
     class SubComp extends Component {
-      static props = { p: { type: Number } };
+      static props = { p: { type: Number, optional: true } };
       static template = xml`<div><t t-esc="props.p"/></div>`;
       static defaultProps = { p: 4 };
     }
@@ -791,9 +791,9 @@ describe("default props", () => {
     expect(fixture.innerHTML).toBe("<div><div>4</div></div>");
   });
 
-  test("can set default required boolean values", async () => {
+  test("can set default boolean values", async () => {
     class SubComp extends Component {
-      static props = ["p", "q"];
+      static props = ["p?", "q?"];
       static defaultProps = { p: true, q: false };
       static template = xml`<span><t t-if="props.p">hey</t><t t-if="!props.q">hey</t></span>`;
     }
@@ -804,4 +804,28 @@ describe("default props", () => {
     await mount(Parent, fixture, { dev: true });
     expect(fixture.innerHTML).toBe("<div><span>heyhey</span></div>");
   });
+
+  test("a default prop cannot be defined on a mandatory prop", async () => {
+    class Child extends Component {
+      static props = {
+        mandatory: Number,
+      };
+      static defaultProps = { mandatory: 3 };
+      static template = xml` <div><t t-esc="props.mandatory"/></div>`;
+    }
+    class Parent extends Component {
+      static components = { Child };
+      static template = xml`<Child/>`;
+    }
+    let error: Error;
+    try {
+      await mount(Parent, fixture, { dev: true });
+    } catch (e) {
+      error = e as Error;
+    }
+    expect(error!).toBeDefined();
+    expect(error!.message).toBe(
+      "A default value cannot be defined for a mandatory prop (name: 'mandatory', component: Child)"
+    );
+  });
 });

tests/components/refs.test.ts

@@ -1,5 +1,5 @@
-import { Component, mount, useRef, useState } from "../../src/index";
-import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { Component, mount, onMounted, useRef, useState } from "../../src/index";
+import { logStep, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 import { xml } from "../../src/index";
 
 snapshotEverything();
@@ -100,4 +100,27 @@ describe("refs", () => {
     expect(console.warn).toBeCalledTimes(1);
     console.warn = consoleWarn;
   });
+
+  test("refs and recursive templates", async () => {
+    class Test extends Component {
+      static components = {};
+      static template = xml`
+        <p t-ref="root">
+          <t t-esc="props.tree.value"/>
+          <t t-if="props.tree.child"><Test tree="props.tree.child"/></t>
+        </p>`;
+      root = useRef("root");
+
+      setup() {
+        onMounted(() => logStep(this.root.el!.outerHTML));
+      }
+    }
+    Test.components = { Test };
+
+    const tree = { value: "a", child: { value: "b", child: null } };
+
+    await mount(Test, fixture, { props: { tree } });
+    expect(fixture.innerHTML).toBe("<p>a<p>b</p></p>");
+    expect(["<p>b</p>", "<p>a<p>b</p></p>"]).toBeLogged();
+  });
 });

tests/components/slots.test.ts

@@ -45,7 +45,36 @@ describe("slots", () => {
     expect(fixture.innerHTML).toBe("some text");
   });
 
-  test("simple default slot with params", async () => {
+  test("simple slot with slot scope", async () => {
+    let child: any;
+    class Child extends Component {
+      static template = xml`<span><t t-slot="slotName" bool="state.bool"/></span>`;
+      state = useState({ bool: true });
+      setup() {
+        child = this;
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <Child>
+          <t t-set-slot="slotName" t-slot-scope="slotScope">
+            <t t-if="slotScope.bool">some text</t>
+            <t t-else="slotScope.bool">other text</t>
+          </t>
+        </Child>`;
+      static components = { Child };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<span>some text</span>");
+
+    child.state.bool = false;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<span>other text</span>");
+  });
+
+  test("default slot with slot scope: shorthand syntax", async () => {
     let child: any;
     class Child extends Component {
       static template = xml`<span><t t-slot="default" bool="state.bool"/></span>`;
@@ -57,11 +86,9 @@ describe("slots", () => {
 
     class Parent extends Component {
       static template = xml`
-        <Child>
-          <t t-set-slot="default" t-slot-scope="slotScope">
-            <t t-if="slotScope.bool">some text</t>
-            <t t-else="slotScope.bool">other text</t>
-          </t>
+        <Child t-slot-scope="slotScope">
+          <t t-if="slotScope.bool">some text</t>
+          <t t-else="slotScope.bool">other text</t>
         </Child>`;
       static components = { Child };
     }
@@ -99,6 +126,41 @@ describe("slots", () => {
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 
+  test("simple default slot with params and bound function", async () => {
+    class Child extends Component {
+      static template = xml`<t t-slot="default" fn.bind="getValue"/>`;
+      state = useState({ value: 123 });
+      getValue() {
+        return this.state.value;
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <Child t-slot-scope="slotScope"><t t-esc="slotScope.fn()"/></Child>`;
+      static components = { Child };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("123");
+  });
+
+  test("default slot with params with - in it", async () => {
+    class Child extends Component {
+      static template = xml`<t t-slot="default" some-value="state.value"/>`;
+      state = useState({ value: 123 });
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <Child t-slot-scope="slotScope"><t t-esc="slotScope['some-value']"/></Child>`;
+      static components = { Child };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("123");
+  });
+
   test("fun: two calls to the same slot", async () => {
     class Child extends Component {
       static template = xml`<t t-slot="default"/><t t-slot="default"/>`;
@@ -215,6 +277,30 @@ describe("slots", () => {
     );
   });
 
+  test("can define and call slots with bound params", async () => {
+    class Child extends Component {
+      static template = xml`
+        <t t-slot="abc"/>
+        <t t-esc="props.slots['abc'].getValue()"/>`;
+    }
+
+    class Parent extends Component {
+      static components = { Child };
+      static template = xml`
+          <Child>
+            <t t-set-slot="abc" getValue.bind="getValue">abc</t>
+          </Child>`;
+      state = useState({ value: 444 });
+      getValue() {
+        return this.state.value;
+      }
+    }
+
+    await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("abc444");
+  });
+
   test("no named slot content => just no children", async () => {
     class Dialog extends Component {
       static template = xml`<span><t t-slot="header"/></span>`;

tests/misc/__snapshots__/memo.test.ts.snap

@@ -16,7 +16,7 @@ exports[`Memo if no prop change, prevent renderings from above  1`] = `
     let b2 = text(ctx['state'].a);
     let b3 = text(ctx['state'].b);
     let b4 = text(ctx['state'].c);
-    let b9 = component(\`Memo\`, {a: ctx['state'].a,b: ctx['state'].b,slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    let b9 = component(\`Memo\`, {a: ctx['state'].a, b: ctx['state'].b,slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
     return multi([b2, b3, b4, b9]);
   }
 }"