From f8e07f6d30f902dace88abbaa8488a25f5822fdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Mon, 3 Jun 2019 11:15:13 +0200
Subject: [PATCH] [DOC] *: remove all remaining references to t-props

closes #135
---
 doc/component.md        | 11 +++++++----
 doc/qweb.md             | 17 ++++++++++-------
 src/qweb_extensions.ts  |  4 ++--
 tests/component.test.ts |  4 ++--
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/doc/component.md b/doc/component.md
index 61159cdf..9c81b033 100644
--- a/doc/component.md
+++ b/doc/component.md
@@ -79,7 +79,7 @@ widgets:
 ```xml
 <div t-name="ParentWidget">
   <span>some text</span>
-  <t t-widget="MyWidget" t-props="{info: 13}"/>
+  <t t-widget="MyWidget" info="13"/>
 </div>
 ```
 
@@ -91,8 +91,11 @@ class ParentWidget extends owl.Component {
 ```
 
 In this example, the `ParentWidget`'s template creates a widget `MyWidget` just
-after the span. See the [QWeb](qweb.md) documentation for more information on the
-`t-widget` directive.
+after the span. The `info` key will be added to the subwidget's props. Each
+props is a string which represents a javascript (QWeb) expression, so it is
+dynamic. If it is necessary to give a string, this can be done by quoting it:
+`someString="'somevalue'"`. See the
+[QWeb](qweb.md) documentation for more information on the `t-widget` directive.
 
 Note that the rendering context for the template is the widget itself. This means
 that the template can access `state`, `props`, `env`, or any methods defined in the widget.
@@ -103,7 +106,7 @@ root widget element.
 
 ```xml
 <div t-name="ParentWidget">
-  <t t-widget="MyWidget" class="someClass" style="font-weight:bold;" t-props="{info: 13}"/>
+  <t t-widget="MyWidget" class="someClass" style="font-weight:bold;" info="13"/>
 </div>
 ```
 
diff --git a/doc/qweb.md b/doc/qweb.md
index 2e5f78ab..6dedbdcf 100644
--- a/doc/qweb.md
+++ b/doc/qweb.md
@@ -18,7 +18,7 @@
 - [JS/OWL Specific Extensions](#jsowl-specific-extensions)
 
   - [`t-on` directive](#t-on-directive)
-  - [Component: `t-widget`, `t-props`](#component-t-widget-t-props)
+  - [Component: `t-widget`](#component-t-widget)
   - [`t-ref` directive](#t-ref-directive)
   - [`t-key` directive](#t-key-directive)
   - [`t-transition` directive](#t-transition-directive)
@@ -422,15 +422,15 @@ The `t-on` directive also allows to prebind some arguments. For example,
 Here, `expr` is a valid Owl expression, so it could be `true` or some variable
 from the rendering context.
 
-### Component: `t-widget`, `t-props`
+### Component: `t-widget`
 
-The `t-widget` and the `t-props` directives are the key to a declarative component
-system. They allow a template to define where and how a sub widget is created
+The `t-widget` directive is the key to a declarative component
+system. It allows a template to define where and how a sub widget is created
 and/or updated. For example:
 
 ```xml
 <div t-name="ParentWidget">
-    <t t-widget="ChildWidget" t-props="{count: state.val}"/>
+    <t t-widget="ChildWidget" count="state.val"/>
 </div>
 ```
 
@@ -447,11 +447,14 @@ actual component class in the special `widgets` key, or the class registered in
 QWeb's global registry (see `register` function of QWeb). It first looks inside
 the local `widgets` key, then fallbacks on the global registry.
 
-In this example, the child widget will receive the object `{count: 4}` in its
+*Props*: In this example, the child widget will receive the object `{count: 4}` in its
 constructor. This will be assigned to the `props` variable, which can be accessed
 on the widget (and also, in the template). Whenever the state is updated, then
 the subwidget will also be updated automatically.
 
+Note that there are some restrictions on prop names: `class`, `style` and any
+string which starts with `t-` are not allowed.
+
 The `t-widget` directive also accepts dynamic values with string interpolation
 (like the [`t-attf-`](#dynamic-attributes-t-att-and-t-attf-directives) directive):
 
@@ -505,7 +508,7 @@ variable between `willPatch` and `patched`.
 
 The `t-ref` directive also accepts dynamic values with string interpolation
 (like the [`t-attf-`](#dynamic-attributes-t-att-and-t-attf-directives) and
-[`t-widget-`](#component-t-widget-t-props) directives). For example, if we have
+[`t-widget-`](#component-t-widget) directives). For example, if we have
 `id` set to 44 in the rendering context,
 
 ```xml
diff --git a/src/qweb_extensions.ts b/src/qweb_extensions.ts
index b4085ffd..49c1d0e7 100644
--- a/src/qweb_extensions.ts
+++ b/src/qweb_extensions.ts
@@ -9,7 +9,7 @@ import { QWeb, UTILS } from "./qweb_core";
  * - t-on
  * - t-ref
  * - t-transition
- * - t-widget/t-props/t-keepalive
+ * - t-widget/t-keepalive
  * - t-mounted
  */
 
@@ -194,7 +194,7 @@ QWeb.addDirective({
  * ```xml
  *   <t t-widget="child"
  *      t-key="'somestring'"
- *      t-props="{flag:state.flag}"
+ *      flag="state.flag"
  *      t-transition="fade"/>
  * ```
  *
diff --git a/tests/component.test.ts b/tests/component.test.ts
index f6f8e4fb..b22f6cdc 100644
--- a/tests/component.test.ts
+++ b/tests/component.test.ts
@@ -2054,8 +2054,8 @@ describe("async rendering", () => {
             <span t-name="ChildB">b<t t-esc="props.val"/></span>
             <span t-name="Parent">
                 <t t-if="state.flag">
-                    <t t-widget="ChildA" t-props="{val:state.valA}"/>
-                    <t t-widget="ChildB" t-props="{val:state.valB}"/>
+                    <t t-widget="ChildA" val="state.valA"/>
+                    <t t-widget="ChildB" val="state.valB"/>
                 </t>
             </span>
         </templates>