[REF] component: rename t-async into t-asyncroot

doc/component.md

@@ -928,7 +928,7 @@ Here are a few tips on how to work with asynchronous widgets:
 3. Lazy loading external libraries is a good use case for async rendering. This
    is mostly fine, because we can assume that it will only takes a fraction of a
    second, and only once (see `owl.utils.loadJS`)
-4. For all the other cases, the `t-async` directive (to use alongside
+4. For all the other cases, the `t-asyncroot` directive (to use alongside
    `t-widget`) is there to help you. When this directive is met, a new rendering
    sub tree is created, such that the rendering of that component (and its
    children) is not tied to the rendering of the rest of the interface. It can
@@ -941,6 +941,6 @@ Here are a few tips on how to work with asynchronous widgets:
    ```xml
    <div t-name="ParentWidget">
      <t t-widget="SyncChild"/>
-     <t t-widget="AsyncChild" t-async="1"/>
+     <t t-widget="AsyncChild" t-asyncroot="1"/>
    </div>
    ```

doc/qweb.md

@@ -65,16 +65,16 @@ We present here a list of all standard QWeb directives:
 The component system in Owl requires additional directives, to express various
 needs. Here is a list of all Owl specific directives:
 
-| Name                                 | Description                                                                         |
+| Name                                         | Description                                                                         |
-| ------------------------------------ | ----------------------------------------------------------------------------------- |
+| -------------------------------------------- | ----------------------------------------------------------------------------------- |
-| `t-widget`, `t-keepalive`, `t-async` | [Defining a sub component](component.md#composition)                                |
+| `t-widget`, `t-keepalive`, `t-asyncroot` | [Defining a sub component](component.md#composition)                                |
-| `t-ref`                              | [Setting a reference to a dom node or a sub component](component.md#references)     |
+| `t-ref`                                      | [Setting a reference to a dom node or a sub component](component.md#references)     |
-| `t-key`                              | [Defining a key (to help virtual dom reconciliation)](component.md#t-key-directive) |
+| `t-key`                                      | [Defining a key (to help virtual dom reconciliation)](component.md#t-key-directive) |
-| `t-on-*`                             | [Event handling](component.md#event-handling)                                       |
+| `t-on-*`                                     | [Event handling](component.md#event-handling)                                       |
-| `t-transition`                       | [Defining an animation](animations.md#css-transitions)                              |
+| `t-transition`                               | [Defining an animation](animations.md#css-transitions)                              |
-| `t-mounted`                          | [Callback when a node or component is mounted](component.md#t-mounted-directive)    |
+| `t-mounted`                                  | [Callback when a node or component is mounted](component.md#t-mounted-directive)    |
-| `t-slot`                             | [Rendering a slot](component.md#slots)                                              |
+| `t-slot`                                     | [Rendering a slot](component.md#slots)                                              |
-| `t-model`                            | [Form input bindings](component.md#form-input-bindings)                             |
+| `t-model`                                    | [Form input bindings](component.md#form-input-bindings)                             |
 
 ## QWeb Engine
 

src/qweb_extensions.ts

@@ -361,7 +361,7 @@ const T_WIDGET_MODS_CODE = Object.assign({}, MODS_CODE, {
 
 QWeb.addDirective({
   name: "widget",
-  extraNames: ["props", "keepalive", "async"],
+  extraNames: ["props", "keepalive", "asyncroot"],
   priority: 100,
   atNodeEncounter({ ctx, value, node, qweb }): boolean {
     ctx.addLine("//WIDGET");
@@ -369,7 +369,7 @@ QWeb.addDirective({
     ctx.rootContext.shouldDefineQWeb = true;
     ctx.rootContext.shouldDefineUtils = true;
     let keepAlive = node.getAttribute("t-keepalive") ? true : false;
-    let async = node.getAttribute("t-async") ? true : false;
+    let async = node.getAttribute("t-asyncroot") ? true : false;
 
     // t-on- events and t-transition
     const events: [string, string[], string, string][] = [];

tests/__snapshots__/component.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`async rendering delayed t-widget with t-async directive 1`] = `
+exports[`async rendering delayed t-widget with t-asyncroot directive 1`] = `
 "function anonymous(context,extra
 ) {
     let utils = this.utils;
@@ -81,7 +81,7 @@ exports[`async rendering delayed t-widget with t-async directive 1`] = `
 }"
 `;
 
-exports[`async rendering fast t-widget with t-async directive 1`] = `
+exports[`async rendering fast t-widget with t-asyncroot directive 1`] = `
 "function anonymous(context,extra
 ) {
     let utils = this.utils;
@@ -162,7 +162,7 @@ exports[`async rendering fast t-widget with t-async directive 1`] = `
 }"
 `;
 
-exports[`async rendering t-widget with t-async directive: mixed re-renderings 1`] = `
+exports[`async rendering t-widget with t-asyncroot directive: mixed re-renderings 1`] = `
 "function anonymous(context,extra
 ) {
     let utils = this.utils;

tests/component.test.ts

@@ -2354,14 +2354,14 @@ describe("async rendering", () => {
     expect(destroyCount).toBe(0);
   });
 
-  test("delayed t-widget with t-async directive", async () => {
+  test("delayed t-widget with t-asyncroot directive", async () => {
     env.qweb.addTemplates(`
       <templates>
         <div t-name="Parent">
           <button t-on-click="updateApp">Update App State</button>
           <div class="children">
             <t t-widget="Child" val="state.val"/>
-            <t t-widget="AsyncChild" t-async="1" val="state.val"/>
+            <t t-widget="AsyncChild" t-asyncroot="1" val="state.val"/>
           </div>
         </div>
         <span t-name="Child"><t t-esc="props.val"/></span>
@@ -2409,13 +2409,13 @@ describe("async rendering", () => {
     );
   });
 
-  test("fast t-widget with t-async directive", async () => {
+  test("fast t-widget with t-asyncroot directive", async () => {
     env.qweb.addTemplates(`
       <templates>
         <div t-name="Parent">
           <button t-on-click="updateApp">Update App State</button>
           <div class="children">
-            <t t-widget="Child" t-async="1" val="state.val"/>
+            <t t-widget="Child" t-asyncroot="1" val="state.val"/>
             <t t-widget="AsyncChild" val="state.val"/>
           </div>
         </div>
@@ -2464,14 +2464,14 @@ describe("async rendering", () => {
     );
   });
 
-  test("t-widget with t-async directive: mixed re-renderings", async () => {
+  test("t-widget with t-asyncroot directive: mixed re-renderings", async () => {
     env.qweb.addTemplates(`
       <templates>
         <div t-name="Parent">
           <button t-on-click="updateApp">Update App State</button>
           <div class="children">
             <t t-widget="Child" val="state.val"/>
-            <t t-widget="AsyncChild" t-async="1" val="state.val"/>
+            <t t-widget="AsyncChild" t-asyncroot="1" val="state.val"/>
           </div>
         </div>
         <span t-name="Child" t-on-click="increment">