Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages Wiki Activity

extract argument detection for el and use it in both html and Template

Browse source
This commit is contained in:
Bruno Windels 2019-06-15 17:50:54 +02:00
parent 03df472c53
commit 95e1d55b97
2 changed files with 18 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/ui/web/Template.js
View file

@ -1,4 +1,4 @@
import { setAttribute, text, TAG_NAMES } from "./html.js"; import { setAttribute, text, isChildren, TAG_NAMES } from "./html.js";
function classNames(obj, value) { function classNames(obj, value) {
@ -130,14 +130,9 @@ export default class Template {
} }
el(name, attributes, children) { el(name, attributes, children) {
if (attributes) { if (attributes && isChildren(attributes)) {
// valid attributes is only object that is not a DOM node children = attributes;
// anything else (string, fn, array, dom node) is presumed attributes = null;
// to be children with no attributes passed
if (typeof attributes !== "object" || !!attributes.nodeType || Array.isArray(attributes)) {
children = attributes;
attributes = null;
}
} }
const node = document.createElement(name); const node = document.createElement(name);

17
src/ui/web/html.js
View file

@ -1,5 +1,9 @@
// DOM helper functions // DOM helper functions
export function isChildren(children) {
return typeof children !== "object" || !!children.nodeType || Array.isArray(children);
}
export function setAttribute(el, name, value) { export function setAttribute(el, name, value) {
if (name === "className") { if (name === "className") {
name = "class"; name = "class";
@ -14,13 +18,20 @@ export function setAttribute(el, name, value) {
} }
} }
export function el(elementName, attrs, children) { export function el(elementName, attributes, children) {
if (attributes && isChildren(attributes)) {
children = attributes;
attributes = null;
}
const e = document.createElement(elementName); const e = document.createElement(elementName);
if (typeof attrs === "object" && attrs !== null) {
for (let [name, value] of Object.entries(attrs)) { if (attributes) {
for (let [name, value] of Object.entries(attributes)) {
setAttribute(e, name, value); setAttribute(e, name, value);
} }
} }
if (children) { if (children) {
if (!Array.isArray(children)) { if (!Array.isArray(children)) {
children = [children]; children = [children];