diff --git a/README.md b/README.md index ab02b3c..72be222 100644 --- a/README.md +++ b/README.md @@ -61,7 +61,7 @@ All assume that `$d` is the default function from `fluent-dom-esm` (`import $d f ### Create a Paragraph ``` -$(document.body).app($d +$d(document.body).app($d .c("p") .s("background-color", "yellow") .s("color", "black") @@ -99,7 +99,7 @@ const $ul = $d ); }); -$(document.body).app($ul); +$d(document.body).app($ul); ``` renders (with added spaces) as @@ -114,6 +114,32 @@ renders (with added spaces) as ``` +### Access via QuerySelector + +Given the [example list above](#create-a-list): + +``` +$d('#example-list') + .app($d + .c("li") + .id(`fluentDom-example-list-item4`) + .t("List Item 4") + ); +``` + +renders (with added spaces) as + +``` + + + +``` + ## License Copyright © 2025 Eric Woodward @@ -123,8 +149,7 @@ Based on [original source](https://glacius.tmont.com/articles/fluent-dom-manipul ``` This program is free software. It comes without any warranty, to the extent permitted by applicable law. You can redistribute it and/or -modify it under the terms of the Do What The Fuck You Want To Public -License, Version 2, as published by Sam Hocevar. +modify it under the terms of the following license: DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE Version 2, December 2004 diff --git a/dist/fluent-dom-esm.js b/dist/fluent-dom-esm.js index 2d62cc8..3152652 100644 --- a/dist/fluent-dom-esm.js +++ b/dist/fluent-dom-esm.js @@ -4,25 +4,29 @@ const isHTMLElement = (value) => !!value.nodeType; const isNumber = (value) => typeof value === "number"; const isString = (value) => typeof value === "string"; /** - * fluent-dom-esm v2.0.0 + * fluent-dom-esm v2.1.0 * - * Fluent DOM Manipulation, adapted to ESM and cranked up to v2.0(.0). + * Fluent DOM Manipulation, adapted to ESM and cranked up to v2.1(.0). * * https://git.itsericwoodward.com/eric/fluent-dom-esm * - * v2.0.0 Copyright (c) 2025 Eric Woodward + * v2.1.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.0.0 update) + * @author Eric Woodward (v2.1.0 update) * @author Tommy Montgomery (original) * @license http://sam.zoy.org/wtfpl/ */ -const APP_VERSION = "2.0.0"; +const APP_VERSION = "2.1.0"; const fluentDomEsm = (function() { - const FluentDom = function(node) { - return new FluentDomInternal(node); + const FluentDom = function(nodeOrQuerySelector) { + if (typeof nodeOrQuerySelector !== "string") + return new FluentDomInternal(nodeOrQuerySelector); + const f = new FluentDomInternal(); + f.querySelector(nodeOrQuerySelector); + return f; }; FluentDom.create = FluentDom.c = function(tagName) { const f = new FluentDomInternal(); @@ -97,6 +101,10 @@ const fluentDomEsm = (function() { root.addEventListener(...props); return this; }; + this.q = this.querySelector = function(selector) { + root = document.querySelector(selector); + return this; + }; function styleFunction(prop, value) { if (!root) { throw new Error("Cannot get or set style for a non-element"); @@ -118,21 +126,17 @@ const fluentDomEsm = (function() { this.s = this.style = styleFunction; this.t = this.text = function(text) { if (!root) { - throw new Error( - "Cannot get or set innerText for a non-element" - ); + throw new Error("Cannot set innerText for a non-element"); } return this.append(text); }; this.title = function(title) { if (!root) { - throw new Error( - "Cannot get or set outerHTML for a non-element" - ); + throw new Error("Cannot get or set title for a non-element"); } return this.attr("title", title); }; - this.toDom = function() { + this.toDom = this.toHTMLElement = function() { return root; }; this.unlisten = function(...props) { diff --git a/dist/fluent-dom-esm.types.d.ts b/dist/fluent-dom-esm.types.d.ts index c26d894..c53898d 100644 --- a/dist/fluent-dom-esm.types.d.ts +++ b/dist/fluent-dom-esm.types.d.ts @@ -16,11 +16,14 @@ export interface FluentDomObject { id: (id: string) => FluentDomObject; l: (type: keyof HTMLElementEventMap, listener: () => {}, optionsOrUseCapture?: boolean | object) => FluentDomObject; listen: (type: keyof HTMLElementEventMap, listener: () => {}, optionsOrUseCapture?: boolean | object) => FluentDomObject; + q: (selector: string) => FluentDomObject; + querySelector: (selector: string) => FluentDomObject; 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; + toHTMLElement: () => HTMLElement | null; unlisten: (type: keyof HTMLElementEventMap, listener: () => {}, optionsOrUseCapture?: boolean | object) => FluentDomObject; } diff --git a/dist/styles/main.css b/dist/styles/main.css index c6682b7..646036b 100644 --- a/dist/styles/main.css +++ b/dist/styles/main.css @@ -47,6 +47,10 @@ figure { color: #347c7a; } +.code-cmnt { + color: #ccc; +} + .code-dom { color: var(--main-light); } diff --git a/index.html b/index.html index 91b096e..aa7b337 100644 --- a/index.html +++ b/index.html @@ -11,21 +11,27 @@