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

update to 2.0

Browse Source 
I overreached on the getter / setters sharing the same names, and everything
_seemed_ to work OK at first, but then when I tried to import it...
This commit is contained in:
Eric Woodward
2025-09-06 21:46:50 -04:00
parent d11e4e963c
commit 35058fe201
16 changed files with 1801 additions and 676 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/fluent-dom-esm.ts
View File

@@ -1,23 +1,22 @@
/**
* fluent-dom-esm v1.1.0
* fluent-dom-esm v2.0.0
*
* Fluent DOM Manipulation, adapted to ESM and cranked up to v1.1(.0).
* Fluent DOM Manipulation, adapted to ESM and cranked up to v2.0(.0).
*
* https://git.itsericwoodward.com/eric/fluent-dom-esm
*
* v1.1.0 Copyright (c) 2025 Eric Woodward
* v2.0.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 (v1.1.0 update)
* @author Eric Woodward (v2.0.0 update)
* @author Tommy Montgomery (original)
* @license http://sam.zoy.org/wtfpl/
*/
import type { FluentDomObject } from "./fluent-dom-esm.types";
import { version } from "../package.json" with { type: "json" };
import {
isFluentDomObject,
isHTMLElement,
@@ -25,6 +24,8 @@ import {
isString,
} from "./fluent-dom-esm.type-guards";
const APP_VERSION = "2.0.0";
/**
* IIFE that creates the FluentDomObject as default export
*/
@@ -55,18 +56,20 @@ export default (function () {
let root = node || null;
// adds several new features
this.fluentDom = version;
this.fluentDom = APP_VERSION;
/**
* Gets or sets the named attribute on the wrapped HTMLElement
* Sets the named attribute on the wrapped HTMLElement
*/
this.a = this.attr = function (name, value) {
if (!root || (value && !root.setAttribute)) {
if (
!root ||
typeof name === "undefined" ||
typeof value === "undefined"
) {
throw new Error("Cannot set an attribute on a non-element");
}
if (!value) return root.getAttribute(name);
root.setAttribute(name, value);
return this;
};
@@ -111,10 +114,10 @@ export default (function () {
};
/**
* Gets or sets the "class" attribute on the wrapped HTMLElement
* Sets the "class" attribute on the wrapped HTMLElement
*/
this.className = this.cls = function (value) {
return this.attr("class", value);
return this.attr("class", value as string);
};
/**
@@ -126,30 +129,28 @@ export default (function () {
};
/**
* Gets or sets the "href" attribute on the wrapped HTMLElement
* Sets the "href" attribute on the wrapped HTMLElement
*/
this.h = this.href = function (link) {
return this.attr("href", link);
this.h = this.href = function (url) {
return this.attr("href", url);
};
/**
* Gets or sets the wrapped HTMLElement's "innerHTML" property
* Sets the wrapped HTMLElement's "innerHTML" property
*/
this.html = function (content) {
this.html = function (content: string) {
if (!root) {
throw new Error(
"Cannot get or set innerHTML for a non-element",
);
}
if (!content) return root.innerHTML;
root.innerHTML = content;
return this;
};
/**
* Gets or sets the "id" attribute on the wrapped HTMLElement
* Sets the "id" attribute on the wrapped HTMLElement
*/
this.id = function (value) {
return this.attr("id", value);
@@ -167,50 +168,47 @@ export default (function () {
return this;
};
/**
* Gets or sets the wrapped HTMLElement's "outerHTML" property
*/
this.ohtml = function (content) {
if (!root) {
throw new Error(
"Cannot get or set outerHTML for a non-element",
);
}
if (!content) return root.outerHTML;
root.outerHTML = content;
return this;
};
/**
* Gets or sets a one or more style attributes on the wrapped HTMLElement
*/
this.s = this.style = function (prop, value) {
function styleFunction(
this: FluentDomObject,
prop: CSSStyleDeclaration,
): FluentDomObject;
function styleFunction(
this: FluentDomObject,
prop: string,
value: string,
): FluentDomObject;
function styleFunction(
this: FluentDomObject,
prop: string | CSSStyleDeclaration,
value?: string,
): FluentDomObject {
if (!root) {
throw new Error("Cannot get or set style for a non-element");
}
if (typeof prop === "undefined") return root.style;
if (typeof value !== "undefined") {
if (typeof prop === "string" && typeof value !== "undefined") {
root.style[prop as any] = value;
return this;
}
if (typeof prop === "string") return root.style[prop as any];
if (typeof prop !== "object") {
throw new Error(
`Invalid argument: "prop" must be string or object (found ${typeof prop})`,
);
}
Object.keys(prop).forEach((key) => {
(root as HTMLElement).style[key as any] = prop[key as any];
Object.keys(prop as CSSStyleDeclaration).forEach((key) => {
(root as HTMLElement).style[key as any] = prop[
key as any
] as string;
});
return this;
};
}
this.s = this.style = styleFunction;
/**
* Gets or sets the wrapped HTMLElement's "innerText" property
@@ -222,22 +220,20 @@ export default (function () {
);
}
if (typeof text === "undefined") return root.innerText;
return this.append(text);
};
/**
* Gets or sets the "title" attribute on the wrapped HTMLElement
*/
this.title = function (value) {
this.title = function (title) {
if (!root) {
throw new Error(
"Cannot get or set outerHTML for a non-element",
);
}
return this.attr("title", value);
return this.attr("title", title);
};
/**

38
src/fluent-dom-esm.types.ts
View File

@@ -1,20 +1,20 @@
export interface FluentDomObject {
fluentDom: string;
a: (name: string, value?: string) => FluentDomObject | string | null;
a: (name: string, value: string) => FluentDomObject;
app: (obj: FluentDomObject | HTMLElement | string) => FluentDomObject;
append: (obj: FluentDomObject | HTMLElement | string) => FluentDomObject;
attr: (name: string, value?: string) => FluentDomObject | string | null;
attr: (name: string, value: string) => FluentDomObject;
c: (tagName: string) => FluentDomObject;
create: (tagName: string) => FluentDomObject;
className: (className?: string) => FluentDomObject | string | null;
className: (className: string) => FluentDomObject;
clear: () => FluentDomObject;
cls: (className?: string) => FluentDomObject | string | null;
cls: (className: string) => FluentDomObject;
clr: () => FluentDomObject;
h: (url?: string) => FluentDomObject | string | null;
href: (url?: string) => FluentDomObject | string | null;
html: (content?: string) => string | FluentDomObject;
id: (id?: string) => FluentDomObject | string | null;
h: (url: string) => FluentDomObject;
href: (url: string) => FluentDomObject;
html: (content: string) => FluentDomObject;
id: (id: string) => FluentDomObject;
l: (
type: keyof HTMLElementEventMap,
listener: () => {},
@@ -25,18 +25,16 @@ export interface FluentDomObject {
listener: () => {},
optionsOrUseCapture?: boolean | object,
) => FluentDomObject;
ohtml: (content?: string) => string | FluentDomObject;
s: (
prop?: CSSStyleDeclaration | string,
value?: string,
) => FluentDomObject | CSSStyleDeclaration | string | undefined;
style: (
prop?: CSSStyleDeclaration | string,
value?: string,
) => FluentDomObject | CSSStyleDeclaration | string | undefined;
t: (text?: string) => FluentDomObject | string;
text: (text?: string) => FluentDomObject | string;
title: (title?: string) => FluentDomObject | string | null;
s:
| ((prop: CSSStyleDeclaration) => FluentDomObject)
| ((prop: string, value: string) => FluentDomObject);
style:
| ((prop: CSSStyleDeclaration) => FluentDomObject)
| ((prop: string, value: string) => FluentDomObject);
t: (text: string) => FluentDomObject;
text: (text: string) => FluentDomObject;
title: (title: string) => FluentDomObject;
toDom: () => HTMLElement | null;
unlisten: (
type: keyof HTMLElementEventMap,