all repos — h3 @ 4eaeb4a491990f91fb316c0349ad12066b7666d8

A tiny, extremely minimalist JavaScript microframework.

Handling string-only contents
h3rald h3rald@h3rald.com
Fri, 10 Apr 2020 18:27:48 +0200
commit

4eaeb4a491990f91fb316c0349ad12066b7666d8

parent

af1f1a5943e809b4a5ebd7a4ef13c8dc612ed5dc

M example/assets/js/app.jsexample/assets/js/app.js

@@ -102,7 +102,7 @@ };

const start = (page - 1) * pagesize; const end = Math.min(start + pagesize, filteredTodos.length); return h3("div#todolist.todo-list-container", [ - h3("h1", ["To Do List"]), + h3("h1", "To Do List"), AddTodoForm({ addTodo, addTodoOnEnter }), EmptyTodoError({ displayEmptyTodoError }, { clearError }), NavigationBar({ filter, paginatorData }, { update, setFilter }),
M example/assets/js/components/emptyTodoError.jsexample/assets/js/components/emptyTodoError.js

@@ -11,7 +11,7 @@ "span.dismiss-error",

{ onclick: clearError, }, - ["✘"] + "✘" ), ]); }
M example/assets/js/components/todo.jsexample/assets/js/components/todo.js

@@ -5,8 +5,8 @@ const { toggleTodo, removeTodo } = actions;

const todoStateClass = data.done ? ".done" : ".todo"; return h3("div.todo-item", { id: data.key }, [ h3(`div.todo-content${todoStateClass}`, [ - h3("span.todo-text", { onclick: () => toggleTodo(data) }, [data.text]), + h3("span.todo-text", { onclick: () => toggleTodo(data) }, data.text), ]), - h3("span.delete-todo", { onclick: () => removeTodo(data) }, ["✘"]), + h3("span.delete-todo", { onclick: () => removeTodo(data) }, "✘"), ]); };
M h3.jsh3.js

@@ -52,16 +52,16 @@ }

return true; } return checkProperties(o1, o2) && checkProperties(o2, o1); -} +}; /** * Mounts a VNode and renders it as a child of an existing DOM Element. - * @param {string} id A unique ID of of an existing DOM Element. + * @param {string} id A unique ID of of an existing DOM Element. * @param {VNode} vnode The VNode to mount as child of the specified DOM element. */ export const mount = (id, vnode) => { document.getElementById(id).appendChild(vnode.render()); -} +}; // Virtual Node Implementation with HyperScript-like syntax export class VNode {

@@ -83,20 +83,22 @@ this.type = "element";

const elSelector = String(args[0]); if (args[1] && !args[2]) { // assuming no attributes - if (args[1].constructor === Array) { + if (typeof args[1] === "string") { + this.children = [args[1]]; + } else if (args[1].constructor === Array) { this.children = args[1]; } else { this.attributes = args[1]; } } else { this.attributes = args[1] || {}; - this.children = args[2] || []; + this.children = typeof args[2] === "string" ? [args[2]] : args[2] || []; } - const selectorRegex = /^([a-z0-9:_-]+)(#[a-z0-9:_-]+)?(\..+)?$/i + const selectorRegex = /^([a-z0-9:_-]+)(#[a-z0-9:_-]+)?(\..+)?$/i; const [, element, id, classes] = elSelector.match(selectorRegex); this.element = element; this.id = id && id.slice(1); - this.classList = classes && classes.split('.').slice(1) || []; + this.classList = (classes && classes.split(".").slice(1)) || []; this.children = this.children.map((c) => typeof c === "string" ? new VNode({ type: "text", value: c }) : c );

@@ -141,7 +143,7 @@ // Updates the current Virtual Node with a new Virtual Node (and syncs the existing DOM Node)

update(data) { let { node, vnode } = data || {}; if (!node && this.id) { - node = document.getElementById(this.id) + node = document.getElementById(this.id); } if (!vnode) { vnode = this.render();