eric/fluent-dom-esm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update to v2.3.0

Browse Source 
add `.rep()` & `.replaceChildren()` function
update `.app()` & `.append()` to support rest params
update build target to ES6
fix comment color on demo page
add (more) tests
This commit is contained in:
Eric Woodward
2025-09-13 19:44:55 -04:00
parent af2e0d2eec
commit 96c8f980e9
19 changed files with 732 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
dist/fluent-dom-esm.js vendored
View File

@@ -4,22 +4,22 @@ const isHTMLElement = (value) => !!value.nodeType;
const isNumber = (value) => typeof value === "number";
const isString = (value) => typeof value === "string";
/**
* fluent-dom-esm v2.2.1
* fluent-dom-esm v2.3.0
*
* Fluent DOM Manipulation, adapted to ESM and cranked up to v2.2(.1).
* Fluent DOM Manipulation, adapted to ESM and cranked up to v2.3(.0).
*
* https://git.itsericwoodward.com/eric/fluent-dom-esm
*
* v2.2.1 Copyright (c) 2025 Eric Woodward
* v2.3.0 Copyright (c) 2025 Eric Woodward
* Original copyright (c) 2009 Tommy Montgomery (https://glacius.tmont.com/articles/fluent-dom-manipulation-in-javascript)
*
* Released under the WTFPL (Do What the Fuck You Want to Public License)
*
* @author Eric Woodward (v2 update)
* @author Eric Woodward (v2+)
* @author Tommy Montgomery (original)
* @license http://sam.zoy.org/wtfpl/
*/
const APP_VERSION = "2.2.1";
const APP_VERSION = "2.3.0";
const fluentDomEsm = (function() {
const FluentDom = function(nodeOrQuerySelector) {
if (typeof nodeOrQuerySelector !== "string")
@@ -40,35 +40,43 @@ const fluentDomEsm = (function() {
let root = node || null;
this.fluentDom = APP_VERSION;
this.a = this.attr = function(name, value) {
if (!root || typeof name === "undefined" || typeof value === "undefined") {
if (!root) {
throw new Error("Cannot set an attribute on a non-element");
}
if (typeof name === "undefined") {
throw new Error("Cannot set an attribute without a name");
}
root.setAttribute(name, value);
return this;
};
this.app = this.append = function(value) {
this.app = this.append = function(...content) {
if (!root || !root?.appendChild) {
throw new Error("Cannot append to a non-element");
}
const type = typeof value;
if (type === "object") {
if (isFluentDomObject(value)) {
const domVal = value.toDom();
if (domVal !== null) root.appendChild(domVal);
} else if (isHTMLElement(value)) {
root.appendChild(value);
if (!content || content.length < 1) {
throw new Error("Cannot append without a value");
}
content.forEach((value) => {
const type = typeof value;
if (type === "object") {
if (isFluentDomObject(value)) {
const domVal = value.toDom();
if (domVal !== null) root?.appendChild(domVal);
} else if (isHTMLElement(value)) {
root?.appendChild(value);
} else {
throw new Error(
"Invalid argument: not an HTMLElement or FluentDom object"
);
}
} else if (isNumber(value) || isString(value)) {
root?.appendChild(document.createTextNode(`${value}`));
} else {
throw new Error(
"Invalid argument: not an HTMLElement or FluentDom object"
`Invalid argument: not a valid type (${typeof value})`
);
}
} else if (isNumber(value) || isString(value)) {
root.appendChild(document.createTextNode(`${value}`));
} else {
throw new Error(
`Invalid argument: not a valid type (${typeof value})`
);
}
});
return this;
};
this.c = this.create = function(tagName) {
@@ -87,9 +95,7 @@ const fluentDomEsm = (function() {
};
this.html = function(content) {
if (!root) {
throw new Error(
"Cannot get or set innerHTML for a non-element"
);
throw new Error("Cannot set innerHTML for a non-element");
}
root.innerHTML = content;
return this;
@@ -108,6 +114,25 @@ const fluentDomEsm = (function() {
root = document.querySelector(selector);
return this;
};
this.rep = this.replaceChildren = function(...content) {
if (!root) {
throw new Error("Cannot replaceChildren on a non-element");
}
if (!root.replaceChildren) {
if (!content) return this.html("");
return this.html("").append(...content);
}
if (content.length && content[0] && isFluentDomObject(content[0])) {
const domValues = content.map(
(val) => val.toDom()
);
root.replaceChildren(
...domValues.filter((val) => val !== null)
);
}
root.replaceChildren(...content);
return this;
};
function styleFunction(prop, value) {
if (!root) {
throw new Error("Cannot get or set style for a non-element");
@@ -150,7 +175,7 @@ const fluentDomEsm = (function() {
return this;
};
this.v = this.version = function() {
return APP_VERSION;
return this.fluentDom;
};
};
return FluentDom;