Merge pull request #1 from nguyenphuminh/v0.10.0

v0.10.0
nguyenphuminh · May 15, 2022 · 41b28c0 · 41b28c0
2 parents 4551500 + f6266a6
commit 41b28c0
Show file tree

Hide file tree

Showing 10 changed files with 297 additions and 165 deletions.
diff --git a/examples/counter/index.html b/examples/counter/index.html
@@ -8,6 +8,8 @@
 
 <body>
 	<script>
+		const { el, setState, mount, unmount } = Reval;
+
 		class Counter {
 			constructor() {
 				this.states = { counter: 1 };
@@ -29,6 +31,7 @@
 				]);
 			}
 		}
+
 		const counter = new Counter();
 
 		mount(document.body, counter);

diff --git a/examples/counter/reval.js b/examples/counter/reval.js
@@ -1,63 +1,66 @@
 "use strict";
 
-function el(tag, attr, body) {
-	const newEl = document.createElement(tag);
+const Reval = {
+	el(tag, attr, body) {
+		const newEl = document.createElement(tag);
+
+		Array.isArray(body) ? body.forEach(item => newEl.append(item)) : newEl.append(body);
 
-	Array.isArray(body) ? body.forEach(item => newEl.append(item)) : newEl.append(body);
-
-	if (typeof attr === "object" && attr !== null) {
-		Object.keys(attr).forEach(attrName => {
-			if (typeof attr[attrName] === "function") {
-				newEl[attrName] = attr[attrName];
-			} else {
-				newEl.setAttribute(attrName, attr[attrName])
-			}
-		});
-	}
+		if (typeof attr === "object" && attr !== null) {
+			Object.keys(attr).forEach(attrName => {
+				if (typeof attr[attrName] === "function") {
+					newEl[attrName] = attr[attrName];
+				} else {
+					newEl.setAttribute(attrName, attr[attrName])
+				}
+			});
+		}
 
-	return newEl;
-}
+		return newEl;
+	},
 
-function mount(target, child, before, replace) {
-	if (typeof child.render !== "function") {
-		(!(typeof before === "undefined" || before === null)) ? 
-		(replace ? target.replaceChild(child, before) : target.insertBefore(child, before)) :
-		target.append(child);
-	} else {
-		child.el = child.render();
-		(!(typeof before === "undefined" || before === null)) ?
-		(replace ? target.replaceChild(child.el, before) : target.insertBefore(child.el, before)) :
-		target.append(child.el);
-		child.mountedTo = target;
-		typeof child.onmount === "function" && child.onmount();
-	}
-}
+	mount(target, child, before, replace) {
+		if (typeof child.render !== "function") {
+			(!(typeof before === "undefined" || before === null)) ? 
+			(replace ? target.replaceChild(child, before) : target.insertBefore(child, before)) :
+			target.append(child);
+		} else {
+			child.el = child.render();
+			(!(typeof before === "undefined" || before === null)) ?
+			(replace ? target.replaceChild(child.el, before) : target.insertBefore(child.el, before)) :
+			target.append(child.el);
 
-function unmount(target, child) {
-	if (typeof child.render !== "function") {
-		target.removeChild(child);
-	} else {
-		target.removeChild(child.el);
-		child.mountedTo = null;
-		typeof child.onunmount === "function" && child.onunmount();
-	}
-}
+			child.mountedTo = target;
 
-function setState(component, states) {
-	Object.keys(states).forEach(key => {
-		if (typeof states[key] === "object") {
-			Object.keys(states[key]).forEach(stateKey => {
-				component.states[key][stateKey] = states[key][stateKey];
-			});
+			typeof child.onmount === "function" && child.onmount();
+		}
+	},
+
+	unmount(target, child) {
+		if (typeof child.render !== "function") {
+			target.removeChild(child);
 		} else {
-			component.states[key] = states[key];
+			target.removeChild(child.el);
+
+			child.mountedTo = null;
+
+			typeof child.onunmount === "function" && child.onunmount();
 		}
-	})
-	component.mountedTo.removeChild(component.el);
-	component.el = component.render();
-	component.mountedTo.appendChild(component.el);
-}
+	},
+
+	setState(component, states) {
+		Object.keys(states).forEach(key => {
+			component.states[key] = states[key];
+		});
+
+		component.mountedTo.removeChild(component.el);
+		component.el = component.render();
+		component.mountedTo.appendChild(component.el);
+
+		typeof component.onupdate === "function" && component.onupdate();
+	}
+};
 
 if (typeof module === "object" && typeof module.exports === "object") {
-	module.exports = { el, mount, unmount, setState };
+	module.exports = Reval;
 }
diff --git a/examples/shopping cart/index.html b/examples/shopping cart/index.html
@@ -6,6 +6,8 @@
 </head>
 <body>
 	<script>
+		const { el, setState, mount, unmount } = Reval;
+
 		class TodoList {
 			constructor() {
 				this.states = { list: [] };

diff --git a/examples/shopping cart/reval.js b/examples/shopping cart/reval.js
@@ -1,57 +1,66 @@
 "use strict";
 
-function el(tag, attr, body) {
-	const newEl = document.createElement(tag);
+const Reval = {
+	el(tag, attr, body) {
+		const newEl = document.createElement(tag);
+
+		Array.isArray(body) ? body.forEach(item => newEl.append(item)) : newEl.append(body);
 
-	Array.isArray(body) ? body.forEach(item => newEl.append(item)) : newEl.append(body);
-
-	if (typeof attr === "object" && attr !== null) {
-		Object.keys(attr).forEach(attrName => {
-			if (typeof attr[attrName] === "function") {
-				newEl[attrName] = attr[attrName];
-			} else {
-				newEl.setAttribute(attrName, attr[attrName])
-			}
-		});
-	}
+		if (typeof attr === "object" && attr !== null) {
+			Object.keys(attr).forEach(attrName => {
+				if (typeof attr[attrName] === "function") {
+					newEl[attrName] = attr[attrName];
+				} else {
+					newEl.setAttribute(attrName, attr[attrName])
+				}
+			});
+		}
 
-	return newEl;
-}
+		return newEl;
+	},
 
-function mount(target, child, before, replace) {
-	if (typeof child.render !== "function") {
-		(!(typeof before === "undefined" || before === null)) ? 
-		(replace ? target.replaceChild(child, before) : target.insertBefore(child, before)) :
-		target.append(child);
-	} else {
-		child.el = child.render();
-		(!(typeof before === "undefined" || before === null)) ?
-		(replace ? target.replaceChild(child.el, before) : target.insertBefore(child.el, before)) :
-		target.append(child.el);
-		child.mountedTo = target;
-		typeof child.onmount === "function" && child.onmount();
-	}
-}
+	mount(target, child, before, replace) {
+		if (typeof child.render !== "function") {
+			(!(typeof before === "undefined" || before === null)) ? 
+			(replace ? target.replaceChild(child, before) : target.insertBefore(child, before)) :
+			target.append(child);
+		} else {
+			child.el = child.render();
+			(!(typeof before === "undefined" || before === null)) ?
+			(replace ? target.replaceChild(child.el, before) : target.insertBefore(child.el, before)) :
+			target.append(child.el);
 
-function unmount(target, child) {
-	if (typeof child.render !== "function") {
-		target.removeChild(child);
-	} else {
-		target.removeChild(child.el);
-		child.mountedTo = null;
-		typeof child.onunmount === "function" && child.onunmount();
-	}
-}
+			child.mountedTo = target;
 
-function setState(component, states) {
-	Object.keys(states).forEach(key => {
-		component.states[key] = Array.isArray(states[key]) ? [...states[key]] : typeof states[key] === "object" ? {...states[key]} : states[key];
-	})
-	component.mountedTo.removeChild(component.el);
-	component.el = component.render();
-	component.mountedTo.appendChild(component.el);
-}
+			typeof child.onmount === "function" && child.onmount();
+		}
+	},
+
+	unmount(target, child) {
+		if (typeof child.render !== "function") {
+			target.removeChild(child);
+		} else {
+			target.removeChild(child.el);
+
+			child.mountedTo = null;
+
+			typeof child.onunmount === "function" && child.onunmount();
+		}
+	},
+
+	setState(component, states) {
+		Object.keys(states).forEach(key => {
+			component.states[key] = states[key];
+		});
+
+		component.mountedTo.removeChild(component.el);
+		component.el = component.render();
+		component.mountedTo.appendChild(component.el);
+
+		typeof component.onupdate === "function" && component.onupdate();
+	}
+};
 
 if (typeof module === "object" && typeof module.exports === "object") {
-	module.exports = { el, mount, unmount, setState };
+	module.exports = Reval;
 }
diff --git a/examples/todo/index.html b/examples/todo/index.html
@@ -2,10 +2,12 @@
 <html>
 <head>
 	<meta charset="utf-8">
-	<script src="./reval.min.js"></script>
+	<script src="./reval.js"></script>
 </head>
 <body>
 	<script>
+		const { el, setState, mount, unmount } = Reval;
+
 		class TodoList {
 			constructor() {
 				this.states = { todos: [] };

diff --git a/examples/todo/reval.js b/examples/todo/reval.js
@@ -0,0 +1,66 @@
+"use strict";
+
+const Reval = {
+	el(tag, attr, body) {
+		const newEl = document.createElement(tag);
+
+		Array.isArray(body) ? body.forEach(item => newEl.append(item)) : newEl.append(body);
+
+		if (typeof attr === "object" && attr !== null) {
+			Object.keys(attr).forEach(attrName => {
+				if (typeof attr[attrName] === "function") {
+					newEl[attrName] = attr[attrName];
+				} else {
+					newEl.setAttribute(attrName, attr[attrName])
+				}
+			});
+		}
+
+		return newEl;
+	},
+
+	mount(target, child, before, replace) {
+		if (typeof child.render !== "function") {
+			(!(typeof before === "undefined" || before === null)) ? 
+			(replace ? target.replaceChild(child, before) : target.insertBefore(child, before)) :
+			target.append(child);
+		} else {
+			child.el = child.render();
+			(!(typeof before === "undefined" || before === null)) ?
+			(replace ? target.replaceChild(child.el, before) : target.insertBefore(child.el, before)) :
+			target.append(child.el);
+
+			child.mountedTo = target;
+
+			typeof child.onmount === "function" && child.onmount();
+		}
+	},
+
+	unmount(target, child) {
+		if (typeof child.render !== "function") {
+			target.removeChild(child);
+		} else {
+			target.removeChild(child.el);
+
+			child.mountedTo = null;
+
+			typeof child.onunmount === "function" && child.onunmount();
+		}
+	},
+
+	setState(component, states) {
+		Object.keys(states).forEach(key => {
+			component.states[key] = states[key];
+		});
+
+		component.mountedTo.removeChild(component.el);
+		component.el = component.render();
+		component.mountedTo.appendChild(component.el);
+
+		typeof component.onupdate === "function" && component.onupdate();
+	}
+};
+
+if (typeof module === "object" && typeof module.exports === "object") {
+	module.exports = Reval;
+}
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "revaljs",
-  "version": "0.9.0",
-  "description": "An extremely lightweight Javascript library to build web apps",
+  "version": "0.10.0",
+  "description": "A front-end library created just for the sake of being light",
   "main": "reval.min.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"