[doc] update wiki and readme

README.md

@@ -19,13 +19,14 @@ Vif is - _again an other_ - javascript pure front-end component library.
 
 For a weight of less than 6kb (3kb gzipped) Vif can do :
 
--   Reusable reactives components
-    -   HTML render
-    -   Javascript Render
-    -   Scoped CSS
--   Routing (SPA & more)
--   Lazy loading
--   Internationalization (i18n)
+-   [x] Reusable reactives components
+    -   [x] HTML render
+    -   [x] Javascript Render
+    -   [x] Signals
+    -   [x] Scoped CSS
+    -   [x] Lazy loaded components
+-   [x] Routing (Single Page App & more)
+-   [x] Internationalization (i18n)
 
 ## Why Vif.js ?
 
@@ -38,7 +39,7 @@ Vif represents the culmination of this learning.
 ```js
 /* script.js */
 import {
-    useDefine, // used to create a reactive we component
+    useDefine, // used to create a reactive web-component
     useSignal, // used to create a global signal
     useEffect, // used to create a reactive function
     useObserve, // used to create lazy actions based on component hydration
@@ -68,7 +69,7 @@ And here is the javascript part to make our **component reactive**.
 /* script.js */
 function Counter({ props }) {
     props.count = useSignal(0);
-    return this;
+    return this; // optional
 }
 
 useDefine("counter", Counter);

dist/README.md

@@ -19,13 +19,14 @@ Vif is - _again an other_ - javascript pure front-end component library.
 
 For a weight of less than 6kb (3kb gzipped) Vif can do :
 
--   Reusable reactives components
-    -   HTML render
-    -   Javascript Render
-    -   Scoped CSS
--   Routing (SPA & more)
--   Lazy loading
--   Internationalization (i18n)
+-   [x] Reusable reactives components
+    -   [x] HTML render
+    -   [x] Javascript Render
+    -   [x] Signals
+    -   [x] Scoped CSS
+    -   [x] Lazy loaded components
+-   [x] Routing (Single Page App & more)
+-   [x] Internationalization (i18n)
 
 ## Why Vif.js ?
 
@@ -38,7 +39,7 @@ Vif represents the culmination of this learning.
 ```js
 /* script.js */
 import {
-    useDefine, // used to create a reactive we component
+    useDefine, // used to create a reactive web-component
     useSignal, // used to create a global signal
     useEffect, // used to create a reactive function
     useObserve, // used to create lazy actions based on component hydration
@@ -68,7 +69,7 @@ And here is the javascript part to make our **component reactive**.
 /* script.js */
 function Counter({ props }) {
     props.count = useSignal(0);
-    return this;
+    return this; // optional
 }
 
 useDefine("counter", Counter);

wiki/README.md

@@ -51,6 +51,10 @@ const { ... } = require("vifjs");
 -   [`useNavigate`](./methods/navigate.md) used to navigate between routes
 -   [`useI18n`](./methods/i18n.md) used to create and use locales translations
 
+## Demos
+
+You can find demos for all the listed methods on [codepen.io](https://codepen.io/collection/WvPrEb).
+
 ---
 
 # Next

wiki/concepts/context.md

@@ -4,7 +4,7 @@ What is a component context ?
 
 The context can be represented by the `this` keyword. The context of the render function is the context of the whole component.
 
-## Method
+## Methods
 
 Inside of the render function, the context `this` expose two useful methods :
 
@@ -27,7 +27,7 @@ useDefine("ref-example", function ({ html }) {
         console.log("button found !", element);
     });
 
-    html`<button x-ref="button">My button</button>`;
+    return html`<button x-ref="button">My button</button>`;
 });
 ```
 

wiki/concepts/directives.md

@@ -50,8 +50,8 @@ Theses directives should be used on standard HTMLElements only.
 
 -   `x-text` change textContent
 -   `x-show` change style.display based on value
--   `x-ref` (no javascript) used to reference an element ([see this.useRef method](./context.md))
--   `x-css` (no javascript) used to reference an element for scoped style ([see examples](../methods/define.md))
+-   `x-ref` (text) used to reference an element ([see this.useRef method](./context.md))
+-   `x-css` (text) used to reference an element for scoped style ([see examples](../methods/define.md))
 -   `x-on:...` used to add an event handler to the element
 -   `x-...` used to define every attribute value
 
@@ -62,16 +62,48 @@ Theses directives should be used on `<template>...</template>` elements only.
 -   `x-if` used to append content conditionnaly
 -   `x-for` used to append content based on an array of values
     -   `item="itemName"` expose `item()` as signal and `item.index`, `item=` attribute can be used to change the variable name
--   `x-route` (no javascript) used to append content conditionnaly based on current URL, the value should be a RegExp with groups as parameters
+-   `x-route` (text) used to append content conditionnaly based on current URL, the value should be a RegExp with groups as parameters
     -   `params="paramsName"` expose `params()` as signal, `params=` attribute can be used to change the variable name
 
+```js
+useDefine("example-template", function ({ props, html }) {
+    props.list = useSignal(["I'm", "A", "List", "Of", "Elements"]);
+
+    return html`
+        <ul>
+            <template x-for="list()" item="listElement">
+                <li x-text="listElement.index + ' - ' + listElement()">...</li>
+            </template>
+        </ul>
+    `;
+});
+```
+
 ## Component directives
 
 Theses directives should be used on components only.
 
--   `...` (no javascript) used to dynamicaly create props in component context
+-   `...` (text) used to dynamicaly create props in component context
 -   `x-...` used to dynamicaly create props in component context
 
+```html
+<body>
+    <x-my-component firstprop="this is a text value"></x-my-component>
+</body>
+```
+
+```js
+useDefine("example-props-directive", function ({ props, html }) {
+    props.text = useSignal("this is a dynamic value");
+
+    return html`
+        <div>
+            <x-my-component x-secondprop="text()"></x-my-component>
+        </div>
+    `;
+});
+```
+
 ---
 
 # Next

wiki/concepts/lifecycle.md

@@ -42,6 +42,28 @@ componentClass.prototype.onUnmount = function({ props }){
 }
 ```
 
+## How to extend component ?
+
+Sometimes you will want to extend the behavior of a component, for example by reusing handler methods and keeping the default properties of other component.
+
+As a component is defined using a rendering function, you simply reuse the function of the parent component inside of child component.
+
+```js
+// as an abstract component
+function ParentRenderFunction({ props }) {
+    props.type = "div";
+    props.onClickHandler = (e) =>
+        console.log(`you just clicked a ${props.type}`);
+}
+
+function ChildRenderFunction({ props, html }) {
+    parentRenderFunction({ props });
+    props.type = "button";
+
+    return html`<button x-on:click="onClickHandler" x-text="type"></button>`;
+}
+```
+
 ---
 
 # Next

wiki/concepts/props.md

@@ -1,6 +1,8 @@
 # Props
 
-The `props` object represents the datas of the component and the scope inside directives (so it should be ommited in directives) :
+The `props` object represents the datas of the component and the scope inside directives (so it should be ommited in directives).
+
+The properties of the `props` object can contain any type of data (string, number, object, function, signal, etc...), and it is not mandatory to provide signals for non-reactive properties, as shown in the following example :
 
 ```js
 useDefine("app", function ({ props }) {