[DOC] *: remove all remaining references to t-props

closes #135

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
+after the span. The `info` key will be added to the subwidget's props. Each
-`t-widget` directive.
+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>
 ```
 

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
+The `t-widget` directive is the key to a declarative component
-system. They allow a template to define where and how a sub widget is created
+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

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"/>
  * ```
  *

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="ChildA" val="state.valA"/>
-                    <t t-widget="ChildB" t-props="{val:state.valB}"/>
+                    <t t-widget="ChildB" val="state.valB"/>
                 </t>
             </span>
         </templates>