v0.3.0

Author: Zelechos

JavaScript/Reactividad/06_libreria_componentes_con_estado.js

@@ -0,0 +1,33 @@
+'use strict';
+import Component from "./Components.js";
+
+const d = document;
+const app = new Component({
+    element : "#todo-list",
+    data : {
+        todoList: [],
+    },
+    template : function(props){
+        if(props.todoList.length < 1)return `<p>Empty to do List.</p>`;
+        let todos = props.todoList.map( task => `<li>${task}</li>`).join("");
+        return todos;
+    }
+});
+
+d.addEventListener('DOMContentLoaded', app.render);
+
+d.addEventListener('submit', e=>{
+    if(!e.target.matches('#todo-form'))return false;
+    e.preventDefault();
+    const $item = d.getElementById('todo-item');
+    if(!$item)return;
+
+    const lastState = app.getState();
+    // Actualizar el State de forma Reactiva
+    lastState.todoList.push($item.value);
+    app.setState({todoList : lastState.todoList});
+
+    // Limpiamos el input
+    $item.value = "";
+    $item.focus();
+});

JavaScript/Reactividad/Components.js

@@ -0,0 +1,46 @@
+'use strict';
+
+export const Component = (function(){
+
+    /**
+     *  Constructor del Componente
+     */
+    const Constructor = function(options){
+        this.element = options.element;
+        this.data = options.data;
+        this.template = options.template;
+    }
+
+    //  ------------- Metodos -------------
+
+    /**
+     *  Render UI
+     */
+    Constructor.prototype.render = function(){
+        const $element = document.querySelector(this.element);
+        if(!$element)return;
+        $element.innerHTML = this.template(this.data);
+    }
+    /**
+     *  Actualizamos el Estado de forma Reactiva
+     */
+    Constructor.prototype.setState = function(object){
+        for (const key in object) {
+            if (this.data.hasOwnProperty(key)) {
+                this.data[key] = object[key] ;
+            }
+        }
+        this.render();
+    }
+
+    /**
+     *  Obtenemos una copia Inmutable del Estado
+     */
+    Constructor.prototype.getState = function(){
+        return JSON.parse(JSON.stringify(this.data));
+    }
+
+    return Constructor;
+})();
+
+export default Component;

JavaScript/Reactividad/index.html

@@ -15,6 +15,7 @@ <h1>Reactividad con Vanilla JS</h1>
     <h2>Task List</h2>
     <ul id="todo-list">
     </ul>
-    <script src="./05_componentes_con_estado.js"></script>
+    <script type="module" src="./Components.js"></script>
+    <script type="module" src="./06_libreria_componentes_con_estado.js"></script>
 </body>
 </html>