diff --git a/README.md b/README.md index 14b5f96..5f7b578 100644 --- a/README.md +++ b/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); diff --git a/dist/README.md b/dist/README.md index 14b5f96..5f7b578 100644 --- a/dist/README.md +++ b/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); diff --git a/wiki/README.md b/wiki/README.md index 75e4202..2881146 100644 --- a/wiki/README.md +++ b/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 diff --git a/wiki/concepts/context.md b/wiki/concepts/context.md index 105a5e9..5153b70 100644 --- a/wiki/concepts/context.md +++ b/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``; + return html``; }); ``` diff --git a/wiki/concepts/directives.md b/wiki/concepts/directives.md index 9b6c30a..84d00dd 100644 --- a/wiki/concepts/directives.md +++ b/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 `` 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` + + `; +}); +``` + ## 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 + + + +``` + +```js +useDefine("example-props-directive", function ({ props, html }) { + props.text = useSignal("this is a dynamic value"); + + return html` +
+ +
+ `; +}); +``` + --- # Next diff --git a/wiki/concepts/lifecycle.md b/wiki/concepts/lifecycle.md index 1068901..224f97b 100644 --- a/wiki/concepts/lifecycle.md +++ b/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``; +} +``` + --- # Next diff --git a/wiki/concepts/props.md b/wiki/concepts/props.md index f9cbf40..0e1aa41 100644 --- a/wiki/concepts/props.md +++ b/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 }) {