From c9de0883ebb581fc746d3e062f1e44355cd9e8a1 Mon Sep 17 00:00:00 2001
From: Eric Woodward <git@itsericwoodward.com>
Date: Sat, 13 Sep 2025 01:55:41 -0400
Subject: [PATCH] update to v2.2.0

add library version getter
fix demo issues
---
 README.md                      |  6 ++-
 dist/demo.html                 | 70 +++++++++++++++++++++++++---------
 dist/fluent-dom-esm.js         | 16 +++++---
 dist/fluent-dom-esm.types.d.ts |  6 ++-
 index.html                     |  4 +-
 jsr.json                       |  2 +-
 package.json                   |  2 +-
 public/demo.html               | 70 +++++++++++++++++++++++++---------
 src/fluent-dom-esm.ts          | 24 +++++++++---
 src/fluent-dom-esm.types.ts    |  9 +++--
 10 files changed, 151 insertions(+), 58 deletions(-)

diff --git a/README.md b/README.md
index 72be222..665bfee 100644
--- a/README.md
+++ b/README.md
@@ -54,7 +54,11 @@ If everything goes as expected, you should have a newly built `fluent-dom-esm.js
 
 ## Examples
 
-All assume that `$d` is the default function from `fluent-dom-esm` (`import $d from './fluent-dom-esm.js'`);
+All assume that `$d` is the default function from `fluent-dom-esm`:
+
+```
+import $d from "@itsericwoodward/fluent-dom-esm";
+```
 
 - For more examples, see the `demo.html` file in the `dist` folder.
 
diff --git a/dist/demo.html b/dist/demo.html
index 9634ab1..1afadbb 100644
--- a/dist/demo.html
+++ b/dist/demo.html
@@ -11,21 +11,27 @@
         <script type="module">
             import $d from "/fluent-dom-esm.js";
 
+            // Create new objects in memory with a simple, chainable interface
             const $article = $d
-                .c("article")
+                .create("article")
                 .id("fde-article")
-                .cls("cool-article")
-                .app($d.c("h1").cls("cool-heading").t("fluent-dom-esm"))
-                .app(
+                .className("cool-article")
+                .append(
                     $d
-                        .c("p")
-                        .s("background-color", "#db7c17")
-                        .s("color", "var(--main-dark)")
-                        .t("Why is it so cool?"),
+                        .create("h1")
+                        .className("cool-heading")
+                        .text(`fluent-dom-esm v${$d.version()}`),
+                )
+                .append(
+                    $d
+                        .create("p")
+                        .style("background-color", "#db7c17")
+                        .style("color", "var(--main-dark)")
+                        .text("Why is it so cool?"),
                 );
 
+            // Or if you prefer the shorter syntax...
             const $ul = $d.c("ul").id("fluentDom-example-list");
-
             [
                 "Remarkably simple syntax",
                 "Surprisingly powerful features",
@@ -35,10 +41,12 @@
                     $d
                         .c("li")
                         .id(`fluentDom-example-list-item${idx + 1}`)
+                        .s("font-style", "italic")
                         .t(reason),
                 );
             });
 
+            // HTMLElements an also be wrapped and combined with other in-memory objects
             $d(document.body).app(
                 $article
                     .app($ul)
@@ -46,6 +54,14 @@
                         $d.c("em").t("Try it today!").style("color", "#c43a19"),
                     ),
             );
+
+            // Or pass in a querySelector value to wrap the first matching element
+            $d("#fluentDom-example-list").app(
+                $d
+                    .c("li")
+                    .id("fluentDom-example-list-itemExtra")
+                    .t("More features coming soon"),
+            );
         </script>
 
         <script type="module">
@@ -56,23 +72,29 @@
                 .t(
                     `
                     \<script type="module">
-                        import $d from "/src/fluent-dom-esm.ts";
+                        import $d from "/fluent-dom-esm.ts";
 
+                        // Create new objects in memory with a simple, chainable interface
                         const $article = $d
-                            .c("article")
+                            .create("article")
                             .id("fde-article")
-                            .cls("cool-article")
-                            .app($d.c("h1").cls("cool-heading").t("fluent-dom-esm"))
-                            .app(
+                            .className("cool-article")
+                            .append(
                                 $d
-                                    .c("p")
-                                    .s("background-color", "#db7c17")
-                                    .s("color", "var(--main-dark)")
-                                    .t("Why is it so cool?"),
+                                    .create("h1")
+                                    .className("cool-heading")
+                                    .text("fluent-dom-esm"),
+                            )
+                            .append(
+                                $d
+                                    .create("p")
+                                    .style("background-color", "#db7c17")
+                                    .style("color", "var(--main-dark)")
+                                    .text("Why is it so cool?"),
                             );
 
+                        // Or if you prefer the shorter syntax
                         const $ul = $d.c("ul").id("fluentDom-example-list");
-
                         [
                             "Remarkably simple syntax",
                             "Surprisingly powerful features",
@@ -82,10 +104,12 @@
                                 $d
                                     .c("li")
                                     .id(\`fluentDom-example-list-item$\{idx + 1}\`)
+                                    .s("font-style", "italic")
                                     .t(reason),
                             );
                         });
 
+                        // HTMLElements can also be wrapped and combined with other in-memory objects
                         $d(document.body).app(
                             $article
                                 .app($ul)
@@ -94,6 +118,14 @@
                                 ),
                         );
 
+                        // Or pass in a querySelector value to wrap the first matching element
+                        $d("#fluentDom-example-list").app(
+                            $d
+                                .c("li")
+                                .id("fluentDom-example-list-itemExtra")
+                                .t("More features coming soon"),
+                        );
+
                     <\/script>
                     `
                         .trim()
diff --git a/dist/fluent-dom-esm.js b/dist/fluent-dom-esm.js
index 3152652..be1df68 100644
--- a/dist/fluent-dom-esm.js
+++ b/dist/fluent-dom-esm.js
@@ -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.1.0
+ * fluent-dom-esm v2.2.0
  *
  * Fluent DOM Manipulation, adapted to ESM and cranked up to v2.1(.0).
  *
  * https://git.itsericwoodward.com/eric/fluent-dom-esm
  *
- * v2.1.0 Copyright (c) 2025 Eric Woodward
+ * v2.2.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.1.0 update)
+ * @author	Eric Woodward (v2 update)
  * @author  Tommy Montgomery (original)
  * @license http://sam.zoy.org/wtfpl/
  */
-const APP_VERSION = "2.1.0";
+const APP_VERSION = "2.2.0";
 const fluentDomEsm = (function() {
   const FluentDom = function(nodeOrQuerySelector) {
     if (typeof nodeOrQuerySelector !== "string")
@@ -28,11 +28,14 @@ const fluentDomEsm = (function() {
     f.querySelector(nodeOrQuerySelector);
     return f;
   };
-  FluentDom.create = FluentDom.c = function(tagName) {
+  FluentDom.c = FluentDom.create = function(tagName) {
     const f = new FluentDomInternal();
     f.create(tagName);
     return f;
   };
+  FluentDom.v = FluentDom.version = function() {
+    return APP_VERSION;
+  };
   const FluentDomInternal = function(node) {
     let root = node || null;
     this.fluentDom = APP_VERSION;
@@ -146,6 +149,9 @@ const fluentDomEsm = (function() {
       root.removeEventListener(...props);
       return this;
     };
+    this.v = this.version = function() {
+      return APP_VERSION;
+    };
   };
   return FluentDom;
 })();
diff --git a/dist/fluent-dom-esm.types.d.ts b/dist/fluent-dom-esm.types.d.ts
index c53898d..0aff0f8 100644
--- a/dist/fluent-dom-esm.types.d.ts
+++ b/dist/fluent-dom-esm.types.d.ts
@@ -5,11 +5,11 @@ export interface FluentDomObject {
     append: (obj: FluentDomObject | HTMLElement | string) => FluentDomObject;
     attr: (name: string, value: string) => FluentDomObject;
     c: (tagName: string) => FluentDomObject;
-    create: (tagName: string) => FluentDomObject;
     className: (className: string) => FluentDomObject;
     clear: () => FluentDomObject;
-    cls: (className: string) => FluentDomObject;
     clr: () => FluentDomObject;
+    cls: (className: string) => FluentDomObject;
+    create: (tagName: string) => FluentDomObject;
     h: (url: string) => FluentDomObject;
     href: (url: string) => FluentDomObject;
     html: (content: string) => FluentDomObject;
@@ -26,4 +26,6 @@ export interface FluentDomObject {
     toDom: () => HTMLElement | null;
     toHTMLElement: () => HTMLElement | null;
     unlisten: (type: keyof HTMLElementEventMap, listener: () => {}, optionsOrUseCapture?: boolean | object) => FluentDomObject;
+    v: () => string;
+    version: () => string;
 }
diff --git a/index.html b/index.html
index aa7b337..a9b53c2 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
                     $d
                         .create("h1")
                         .className("cool-heading")
-                        .text("fluent-dom-esm"),
+                        .text(`fluent-dom-esm v${$d.version()}`),
                 )
                 .append(
                     $d
@@ -72,7 +72,7 @@
                 .t(
                     `
                     \<script type="module">
-                        import $d from "/src/fluent-dom-esm.ts";
+                        import $d from "/fluent-dom-esm.ts";
 
                         // Create new objects in memory with a simple, chainable interface
                         const $article = $d
diff --git a/jsr.json b/jsr.json
index 9406cb7..a4b88e1 100644
--- a/jsr.json
+++ b/jsr.json
@@ -1,5 +1,5 @@
 {
   "name": "@itsericwoodward/fluent-dom-esm",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "exports": "./src/fluent-dom-esm.ts"
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index c7097e5..20ee7ff 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fluent-dom-esm",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "",
   "license": "WTFPL",
   "exports": {
diff --git a/public/demo.html b/public/demo.html
index 9634ab1..1afadbb 100644
--- a/public/demo.html
+++ b/public/demo.html
@@ -11,21 +11,27 @@
         <script type="module">
             import $d from "/fluent-dom-esm.js";
 
+            // Create new objects in memory with a simple, chainable interface
             const $article = $d
-                .c("article")
+                .create("article")
                 .id("fde-article")
-                .cls("cool-article")
-                .app($d.c("h1").cls("cool-heading").t("fluent-dom-esm"))
-                .app(
+                .className("cool-article")
+                .append(
                     $d
-                        .c("p")
-                        .s("background-color", "#db7c17")
-                        .s("color", "var(--main-dark)")
-                        .t("Why is it so cool?"),
+                        .create("h1")
+                        .className("cool-heading")
+                        .text(`fluent-dom-esm v${$d.version()}`),
+                )
+                .append(
+                    $d
+                        .create("p")
+                        .style("background-color", "#db7c17")
+                        .style("color", "var(--main-dark)")
+                        .text("Why is it so cool?"),
                 );
 
+            // Or if you prefer the shorter syntax...
             const $ul = $d.c("ul").id("fluentDom-example-list");
-
             [
                 "Remarkably simple syntax",
                 "Surprisingly powerful features",
@@ -35,10 +41,12 @@
                     $d
                         .c("li")
                         .id(`fluentDom-example-list-item${idx + 1}`)
+                        .s("font-style", "italic")
                         .t(reason),
                 );
             });
 
+            // HTMLElements an also be wrapped and combined with other in-memory objects
             $d(document.body).app(
                 $article
                     .app($ul)
@@ -46,6 +54,14 @@
                         $d.c("em").t("Try it today!").style("color", "#c43a19"),
                     ),
             );
+
+            // Or pass in a querySelector value to wrap the first matching element
+            $d("#fluentDom-example-list").app(
+                $d
+                    .c("li")
+                    .id("fluentDom-example-list-itemExtra")
+                    .t("More features coming soon"),
+            );
         </script>
 
         <script type="module">
@@ -56,23 +72,29 @@
                 .t(
                     `
                     \<script type="module">
-                        import $d from "/src/fluent-dom-esm.ts";
+                        import $d from "/fluent-dom-esm.ts";
 
+                        // Create new objects in memory with a simple, chainable interface
                         const $article = $d
-                            .c("article")
+                            .create("article")
                             .id("fde-article")
-                            .cls("cool-article")
-                            .app($d.c("h1").cls("cool-heading").t("fluent-dom-esm"))
-                            .app(
+                            .className("cool-article")
+                            .append(
                                 $d
-                                    .c("p")
-                                    .s("background-color", "#db7c17")
-                                    .s("color", "var(--main-dark)")
-                                    .t("Why is it so cool?"),
+                                    .create("h1")
+                                    .className("cool-heading")
+                                    .text("fluent-dom-esm"),
+                            )
+                            .append(
+                                $d
+                                    .create("p")
+                                    .style("background-color", "#db7c17")
+                                    .style("color", "var(--main-dark)")
+                                    .text("Why is it so cool?"),
                             );
 
+                        // Or if you prefer the shorter syntax
                         const $ul = $d.c("ul").id("fluentDom-example-list");
-
                         [
                             "Remarkably simple syntax",
                             "Surprisingly powerful features",
@@ -82,10 +104,12 @@
                                 $d
                                     .c("li")
                                     .id(\`fluentDom-example-list-item$\{idx + 1}\`)
+                                    .s("font-style", "italic")
                                     .t(reason),
                             );
                         });
 
+                        // HTMLElements can also be wrapped and combined with other in-memory objects
                         $d(document.body).app(
                             $article
                                 .app($ul)
@@ -94,6 +118,14 @@
                                 ),
                         );
 
+                        // Or pass in a querySelector value to wrap the first matching element
+                        $d("#fluentDom-example-list").app(
+                            $d
+                                .c("li")
+                                .id("fluentDom-example-list-itemExtra")
+                                .t("More features coming soon"),
+                        );
+
                     <\/script>
                     `
                         .trim()
diff --git a/src/fluent-dom-esm.ts b/src/fluent-dom-esm.ts
index 575bded..d390c7d 100644
--- a/src/fluent-dom-esm.ts
+++ b/src/fluent-dom-esm.ts
@@ -1,16 +1,16 @@
 /**
- * fluent-dom-esm v2.1.0
+ * fluent-dom-esm v2.2.0
  *
  * Fluent DOM Manipulation, adapted to ESM and cranked up to v2.1(.0).
  *
  * https://git.itsericwoodward.com/eric/fluent-dom-esm
  *
- * v2.1.0 Copyright (c) 2025 Eric Woodward
+ * v2.2.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.1.0 update)
+ * @author	Eric Woodward (v2 update)
  * @author  Tommy Montgomery (original)
  * @license http://sam.zoy.org/wtfpl/
  */
@@ -24,7 +24,7 @@ import {
     isString,
 } from "./fluent-dom-esm.type-guards";
 
-const APP_VERSION = "2.1.0";
+const APP_VERSION = "2.2.0";
 
 /**
  * IIFE that creates the FluentDomObject as default export
@@ -45,12 +45,19 @@ export default (function () {
     /**
      * Creates a new HTML element which is wrapped in a FluentDomObject and returned
      */
-    FluentDom.create = FluentDom.c = function (tagName: string) {
+    FluentDom.c = FluentDom.create = function (tagName: string) {
         const f = new (FluentDomInternal as any)();
         f.create(tagName);
         return f;
     };
 
+    /**
+     * Returns library version
+     */
+    FluentDom.v = FluentDom.version = function () {
+        return APP_VERSION;
+    };
+
     /**
      * The internal representation of the FluentDomObject
      */
@@ -260,6 +267,13 @@ export default (function () {
             root.removeEventListener(...props);
             return this;
         };
+
+        /**
+         * Returns library version
+         */
+        this.v = this.version = function () {
+            return APP_VERSION;
+        };
     };
 
     return FluentDom;
diff --git a/src/fluent-dom-esm.types.ts b/src/fluent-dom-esm.types.ts
index 746169d..3f3e39e 100644
--- a/src/fluent-dom-esm.types.ts
+++ b/src/fluent-dom-esm.types.ts
@@ -5,13 +5,13 @@ export interface FluentDomObject {
     app: (obj: FluentDomObject | HTMLElement | string) => FluentDomObject;
     append: (obj: FluentDomObject | HTMLElement | string) => FluentDomObject;
     attr: (name: string, value: string) => FluentDomObject;
-    c: (tagName: string) => FluentDomObject;
 
-    create: (tagName: string) => FluentDomObject;
+    c: (tagName: string) => FluentDomObject;
     className: (className: string) => FluentDomObject;
     clear: () => FluentDomObject;
-    cls: (className: string) => FluentDomObject;
     clr: () => FluentDomObject;
+    cls: (className: string) => FluentDomObject;
+    create: (tagName: string) => FluentDomObject;
 
     h: (url: string) => FluentDomObject;
     href: (url: string) => FluentDomObject;
@@ -51,4 +51,7 @@ export interface FluentDomObject {
         listener: () => {},
         optionsOrUseCapture?: boolean | object,
     ) => FluentDomObject;
+
+    v: () => string;
+    version: () => string;
 }