code.H3RALD.com — h3: 9a70ace1f94a7c76e11ecc7b6c73874de580e564

Improved support for setting DOM properties/attributes.

h3rald h3rald@h3rald.com

Wed, 10 Jun 2020 17:17:25 +0200

commit

9a70ace1f94a7c76e11ecc7b6c73874de580e564

parent

4d111c2f6b7046be8f969c13c074ef62d3082236

10 files changed, 55 insertions(+), 29 deletions(-)

jump to

README.md

__tests__/vnode.js

docs/H3_DeveloperGuide.htm

docs/example/assets/js/h3.js

docs/js/app.js

docs/js/h3.js

docs/md/overview.md

docs/md/tutorial.md

h3.js

package.json

M README.md → README.md

@@ -19,7 +19,7 @@ ### I'm sold! Where can I get it?
 
 Here, look, it's just one file:
 
-<a href="https://raw.githubusercontent.com/h3rald/h3/v0.8.0/h3.js" target="_blank" class="button primary">Download v0.8.0 (Humble Human)</a>
+<a href="https://raw.githubusercontent.com/h3rald/h3/v0.9.0/h3.js" target="_blank" class="button primary">Download v0.9.0 (Impeccable Iconian)</a>
 
 Yes there is also a [NPM package](https://www.npmjs.com/package/@h3rald/h3) if you want to use it with WebPack and similar, but let me repeat: _it's just one file_.

M __tests__/vnode.js → __tests__/vnode.js

@@ -75,6 +75,32 @@ vnode1.redraw({ node, vnode });
     expect(node.checked).toEqual(false);
   });
 
+  it("should handle non-string attributes as properties and not create attributes", () => {
+    const v = h3("div", {
+      test: true,
+      obj: { a: 1, b: 2 },
+      arr: [1, 2, 3],
+      num: 2.3,
+      str: "test",
+      s: "",
+      title: "testing!",
+      value: false,
+    });
+    const n = v.render();
+    expect(n.test).toEqual(true);
+    expect(n.obj).toEqual({ a: 1, b: 2 });
+    expect(n.arr).toEqual([1, 2, 3]);
+    expect(n.num).toEqual(2.3);
+    expect(n.str).toEqual("test");
+    expect(n.getAttribute("str")).toEqual("test");
+    expect(n.s).toEqual("");
+    expect(n.getAttribute("s")).toEqual(null);
+    expect(n.title).toEqual("testing!");
+    expect(n.getAttribute("title")).toEqual("testing!");
+    expect(n.value).toEqual(undefined);
+    expect(n.getAttribute("value")).toEqual(null);
+  });
+
   it("should provide a render method able to render element nodes with a value", () => {
     const vnode = h3("input", { value: "test" });
     const createElement = jest.spyOn(document, "createElement");

M docs/H3_DeveloperGuide.htm → docs/H3_DeveloperGuide.htm

@@ -7337,7 +7337,7 @@ <h3>I&rsquo;m sold! Where can I get it?<a href="#document-top" title="Go to top"></a></h3>
 
 <p>Here, look, it&rsquo;s just one file:</p>
 
-<p><a href="https://raw.githubusercontent.com/h3rald/h3/v0.8.0/h3.js" target="_blank" class="button primary">Download v0.8.0 (Humble Human)</a></p>
+<p><a href="https://raw.githubusercontent.com/h3rald/h3/v0.9.0/h3.js" target="_blank" class="button primary">Download v0.9.0 (Impeccable Iconian)</a></p>
 
 <p>Yes there is also a <a href="https://www.npmjs.com/package/@h3rald/h3">NPM package</a> if you want to use it with WebPack and similar, but let me repeat: <em>it&rsquo;s just one file</em>.</p>
 
@@ -7702,8 +7702,8 @@ h3("a.logo.col-sm-1", { href: "#/" }, [
       h3("img", { alt: "H3", src: "images/h3.svg" }),
     ]),
     h3("div.version.col-sm.col-md", [
-      h3("div.version-number", "v0.8.0"),
-      h3("div.version-label", "“Humble Human“"),
+      h3("div.version-number", "v0.9.0"),
+      h3("div.version-label", "“Impeccable Iconian“"),
     ]),
     h3("label.drawer-toggle.button.col-sm-last", { for: "drawer-control" }),
   ]);

M docs/example/assets/js/h3.js → docs/example/assets/js/h3.js

@@ -1,5 +1,5 @@ 
 /**
- * H3 v0.8.0 "Humble Human"
+ * H3 v0.9.0 "Impeccable Iconian"
  * Copyright 2020 Fabio Cevasco <h3rald@h3rald.com>
  *
  * This source code is licensed under the MIT license found in the
@@ -264,15 +264,15 @@ if (this.id) {
       node.id = this.id;
     }
     Object.keys(this.attributes).forEach((attr) => {
-      // Standard attributes (unless falsy)
-      if (this.attributes[attr]) {
+      // Set attributes (only if non-empty strings)
+      if (this.attributes[attr] && typeof this.attributes[attr] === "string") {
         const a = document.createAttribute(attr);
         a.value = this.attributes[attr];
         node.setAttributeNode(a);
       }
-      // Handle boolean attributes
-      if (this.attributes[attr] === false) {
-        node[attr] = false;
+      // Set properties
+      if (typeof this.attributes[attr] !== "string" || !node[attr]) {
+        node[attr] = this.attributes[attr];
       }
     });
     // Event Listeners

M docs/js/app.js → docs/js/app.js

@@ -44,8 +44,8 @@ h3("a.logo.col-sm-1", { href: "#/" }, [
       h3("img", { alt: "H3", src: "images/h3.svg" }),
     ]),
     h3("div.version.col-sm.col-md", [
-      h3("div.version-number", "v0.8.0"),
-      h3("div.version-label", "“Humble Human“"),
+      h3("div.version-number", "v0.9.0"),
+      h3("div.version-label", "“Impeccable Iconian“"),
     ]),
     h3("label.drawer-toggle.button.col-sm-last", { for: "drawer-control" }),
   ]);

M docs/js/h3.js → docs/js/h3.js

@@ -1,5 +1,5 @@ 
 /**
- * H3 v0.8.0 "Humble Human"
+ * H3 v0.9.0 "Impeccable Iconian"
  * Copyright 2020 Fabio Cevasco <h3rald@h3rald.com>
  *
  * This source code is licensed under the MIT license found in the
@@ -264,15 +264,15 @@ if (this.id) {
       node.id = this.id;
     }
     Object.keys(this.attributes).forEach((attr) => {
-      // Standard attributes (unless falsy)
-      if (this.attributes[attr]) {
+      // Set attributes (only if non-empty strings)
+      if (this.attributes[attr] && typeof this.attributes[attr] === "string") {
         const a = document.createAttribute(attr);
         a.value = this.attributes[attr];
         node.setAttributeNode(a);
       }
-      // Handle boolean attributes
-      if (this.attributes[attr] === false) {
-        node[attr] = false;
+      // Set properties
+      if (typeof this.attributes[attr] !== "string" || !node[attr]) {
+        node[attr] = this.attributes[attr];
       }
     });
     // Event Listeners

M docs/md/overview.md → docs/md/overview.md

@@ -12,7 +12,7 @@ ### I'm sold! Where can I get it?
 
 Here, look, it's just one file:
 
-<a href="https://raw.githubusercontent.com/h3rald/h3/v0.8.0/h3.js" target="_blank" class="button primary">Download v0.8.0 (Humble Human)</a>
+<a href="https://raw.githubusercontent.com/h3rald/h3/v0.9.0/h3.js" target="_blank" class="button primary">Download v0.9.0 (Impeccable Iconian)</a>
 
 Yes there is also a [NPM package](https://www.npmjs.com/package/@h3rald/h3) if you want to use it with WebPack and similar, but let me repeat: _it's just one file_.

M docs/md/tutorial.md → docs/md/tutorial.md

@@ -118,8 +118,8 @@ h3("a.logo.col-sm-1", { href: "#/" }, [
       h3("img", { alt: "H3", src: "images/h3.svg" }),
     ]),
     h3("div.version.col-sm.col-md", [
-      h3("div.version-number", "v0.8.0"),
-      h3("div.version-label", "“Humble Human“"),
+      h3("div.version-number", "v0.9.0"),
+      h3("div.version-label", "“Impeccable Iconian“"),
     ]),
     h3("label.drawer-toggle.button.col-sm-last", { for: "drawer-control" }),
   ]);

M h3.js → h3.js

@@ -1,5 +1,5 @@ 
 /**
- * H3 v0.8.0 "Humble Human"
+ * H3 v0.9.0 "Impeccable Iconian"
  * Copyright 2020 Fabio Cevasco <h3rald@h3rald.com>
  *
  * This source code is licensed under the MIT license found in the
@@ -264,15 +264,15 @@ if (this.id) {
       node.id = this.id;
     }
     Object.keys(this.attributes).forEach((attr) => {
-      // Standard attributes (unless falsy)
-      if (this.attributes[attr]) {
+      // Set attributes (only if non-empty strings)
+      if (this.attributes[attr] && typeof this.attributes[attr] === "string") {
         const a = document.createAttribute(attr);
         a.value = this.attributes[attr];
         node.setAttributeNode(a);
       }
-      // Handle boolean attributes
-      if (this.attributes[attr] === false) {
-        node[attr] = false;
+      // Set properties
+      if (typeof this.attributes[attr] !== "string" || !node[attr]) {
+        node[attr] = this.attributes[attr];
       }
     });
     // Event Listeners

M package.json → package.json

@@ -1,7 +1,7 @@ 
 {
   "name": "@h3rald/h3",
-  "version": "0.8.0",
-  "versionName": "Humble Human",
+  "version": "0.9.0",
+  "versionName": "Impeccable Iconian",
   "description": "A tiny, extremely minimalist JavaScript microframework.",
   "main": "h3.js",
   "scripts": {