From f6266a60263479434417b4955b650456f814ec35 Mon Sep 17 00:00:00 2001
From: Phu Minh <53084840+nguyenphuminh@users.noreply.github.com>
Date: Sun, 15 May 2022 17:24:39 +0700
Subject: [PATCH] v0.10.0
- Fixed error from `el`.
- Added `onupdate` event.
---
examples/counter/index.html | 3 +
examples/counter/reval.js | 105 +++++++++++++++---------------
examples/shopping cart/index.html | 2 +
examples/shopping cart/reval.js | 103 ++++++++++++++++-------------
examples/todo/index.html | 4 +-
examples/todo/reval.js | 66 +++++++++++++++++++
package.json | 4 +-
reval.js | 97 +++++++++++++++------------
reval.min.js | 2 +-
tutorial.md | 76 +++++++++++++++------
10 files changed, 297 insertions(+), 165 deletions(-)
create mode 100644 examples/todo/reval.js
diff --git a/examples/counter/index.html b/examples/counter/index.html
index 446c75e..ef2eda3 100644
--- a/examples/counter/index.html
+++ b/examples/counter/index.html
@@ -8,6 +8,8 @@
+
```
-Or if you want it to load faster, consider downloading the library from [our releases page](https://github.com/nguyenphuminh/reval/releases/tag/v0.6.0) and use it.
+Or for better load time, consider downloading the library from [our releases page](https://github.com/nguyenphuminh/reval/releases/tag/v0.6.0).
-Or install it through npm:
+And then get the necessary functions:
+```js
+const { el, mount, unmount, setState } = Reval;
+```
+
+### From npm
+
+You can also just install it through `npm`:
```
npm i revaljs
```
-And then import the required functions like this:
+And then get the required functions like this:
```js
const { el, mount, unmount, setState } = require("revaljs");
```
## Creating HTML elements in Reval
+
There is a handy dandy function called `el` to create HTML elements:
Syntax: `el(tagName, props, childNodes)`
@@ -42,8 +55,10 @@ Note that in `props`, you can also assign event handlers, for example:
const hello = el("p", { id: "Hello": onclick: () => alert("You clicked me!") }, el("br"));
```
+
## Mount and unmount
-You can mount an HTML element or a Reval component to another HTML element:
+
+You can mount an HTML element or a Reval component to another HTML element (container):
```js
mount(document.body, hello);
```
@@ -55,17 +70,19 @@ You can also unmount that element:
unmount(document.body, hello);
```
-You can mount the element before and element:
+You can mount the element before a specified element:
```js
-mount(parent, child, before)
+mount(parent, child, before);
```
-If you pass in `true` as the fourth argument, you can replace an element with an element in the parent node:
-```
-mount(parent, child, before, true)
+To re-render an element, pass in `true` as the fourth argument.
+```js
+mount(parent, child, before, true);
```
+
## Components
+
Reval components all have a basic form like this:
```js
class ComponentName {
@@ -78,26 +95,36 @@ class ComponentName {
const componentName = new ComponentName();
// mount the component
-mount(parent, componentName)
+mount(parent, componentName);
// unmount the component
-unmount(parent, componentName)
+unmount(parent, componentName);
```
-## States
-You can create states using the `states` prop:
+
+## State
+
+You can manage components' states using the `states` prop:
```js
this.states = {}
```
and change the state with `setState`:
```js
-setState(component, { state: value })
+setState(component, { state: value });
```
-If you don't know what states are, basically, the HTML element got re-rendered every time states are changed.
+The HTML element got re-rendered every time states are changed.
+
+### Scope
+
+Be careful when you pass in handlers for events, because if you use arrow functions, the scope will be inside the component's class, but if you use normal functions, the scope will be the HTML element itself with `this` pointed to the element.
+
## Component lifecycle
-There are 2 special methods in a component:
+
+There are three lifecycle events in a Reval's component - `onmount` - when the component is mounted to a container, `onunmount` - when the component is unmounted from a container, and `onupdate` - when a component is updated.
+
+You can pass in handlers for each events as methods of the component's class:
```js
onmount() {
@@ -107,9 +134,14 @@ There are 2 special methods in a component:
onunmount() {
// Gets triggered when component is unmounted
}
+
+ onupdate() {
+ // Gets triggered every time the component is updated (when the state is changed)
+ }
```
## Creating a counter example!
+
Basically, we will create a `Counter` component, set the `counter` state to `1`. `render()` should return an HTML element with a list of child nodes consists of the current value of the counter, a button for incrementing the counter, a button for decrementing the counter. We will use `setState` to change the value of `counter` and re-render the element. Finally, we will create an instance of `Counter` called `counter` and mount it to `document.body`.
```js
@@ -142,8 +174,10 @@ mount(document.body, counter);
```
## More on Reval
+
### Conditional rendering
-You can just simply use the ternary operator to do conditional rendering:
+
+You can just use the ternary operator to do conditional rendering:
```js
render() {
return 1 === 1 ? el("p", {}, "I'm fine") : el("p", {}, "I'm crazy");
@@ -151,7 +185,9 @@ You can just simply use the ternary operator to do conditional rendering:
```
### Lists
+
Rendering a list of elements can be done easily with `map` and the spread operator.
+
```js
render() {
return el("ul", {}, [