@hirojs/dom-build - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

index.js

@@ -41,5 +41,44 @@ const DEFAULT_UNITS = {
 
+function setAttribute(el, k, v) {
+    if (v === true) {
+        el.setAttribute(k, '');
+    } else if (typeof v === 'object') {
+        el.setAttribute(k, JSON.stringify(v));
+    } else if (v !== false) {
+        el.setAttribute(k, v);
+    }
+}
+
+const setters = {
+    style(el, v) {
+        if (typeof v === 'string') {
+            el.style.cssText = v;
+        } else {
+            for (let prop in v) {
+                let pv = v[prop];
+                if (typeof pv === 'number' && DEFAULT_UNITS[prop]) {
+                    pv += DEFAULT_UNITS[prop];
+                }
+                el.style[prop] = pv;
+            }
+        }
+    },
+    properties(el, v) {
+        for (let prop in v) {
+            el[prop] = v[prop];
+        }
+    },
+    innerHTML(el, v) {
+        el.innerHTML = v;
+    },
+    data(el, v) {
+        for (let prop in v) {
+            setAttribute(el, `data-${prop}`, v[prop]);
+        }
+    }
+};
+
 function append(el, items, startOffset) {
-    for (var i = startOffset, len = items.length; i < len; ++i) {
-        var item = items[i];
+    for (let i = startOffset, len = items.length; i < len; ++i) {
+        let item = items[i];
         while (typeof item === 'function') {
@@ -61,28 +100,10 @@ item = item();
         } else {
-            for (var k in item) {
-                var v = item[k];
-                if (typeof v === 'function' && k[0] === 'o' && k[1] === 'n') {
+            for (let k in item) {
+                const v = item[k];
+                if (setters[k]) {
+                    setters[k](el, v);
+                } else if (typeof v === 'function' && k[0] === 'o' && k[1] === 'n') {
                     el.addEventListener(k.substr(2), v);
-                } else if (k === 'style') {
-                    if (typeof v === 'string') {
-                        el.style.cssText = v;
-                    } else {
-                        for (var prop in v) {
-                            var propVal = v[prop];
-                            if (typeof propVal === 'number' && DEFAULT_UNITS[prop]) {
-                                propVal += DEFAULT_UNITS[prop];
-                            }
-                            el.style[prop] = propVal;
-                        }   
-                    }
-                } else if (k === 'properties' && typeof v === 'object') {
-                    for (var prop in v) {
-                        el[prop] = v[prop];
-                    }
-                } else if (k === 'innerHTML') {
-                    el.innerHTML = v;
-                } else if (v === true) {
-                    el.setAttribute(k, '');
-                } else if (v !== false) {
-                    el.setAttribute(k, v);
+                } else {
+                    setAttribute(el, k, v);
                 }
@@ -89,0 +110,0 @@ }

package.json

 {
   "name": "@hirojs/dom-build",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Build DOM trees in Javascript",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -5,10 +5,62 @@ # dom-build
 
+## Installation
+
+Install:
+
+```shell
+npm install --save @hirojs/dom-build
+```
+
+Require:
+
 ```javascript
-var d = require('@hirojs/dom-build');
+const D = require('@hirojs/dom-build');
+```
 
-var el = d('#root.a.b.c',
-  "This is a text node", d('br'),
-  "This is another text node", d('br'),
-  d('span.myMessage',
-    d('%text',
+## Usage
+
+The general form is:
+
+```javascript
+D(selector, contents...)
+```
+
+Selector defines the type/ID/classlist of the created element and usually takes the form `element#id.class1.class2.class3`; all components are optional but at least one must be present. If `element` is omitted, `div` is assumed. A second selector form, `%text`, is available for creating text nodes.
+
+Each item in `contents` can be one of:
+
+  - `string` or `number`: appended to element as text
+  - `Array`: all array contents are appended to the element, recursively
+  - DOM element or text node: appended to element
+  - object: each key-value pair is considered according to the following rules:
+    - `key == style`: if value is string, assigned to `element.style.cssText`; if object, each key/value pair is attached to `element.style`
+    - `key == "properties"`: value must be an object; each key/value pair is attached directly to `element`
+    - `key == "innerHTML"`: value is assigned to `element.innerHTML`
+    - `key == "data"`: value must be an object; each key/value pair is mapped to a corresponding `data-` attribute on the element
+    - all other key/value pairs are attached as attributes to `element`, with some special rules:
+      - `value === true`: a no-value boolean attribute is set
+      - `value === false`: no attribute is set
+      - `typeof(value) == "function"`: an event listener is attached if `key` starts with `on` e.g. `onmouseover`
+      - `typeof(value) == "object"`: attribute value is JSON-encoded
+
+Any falsey values (`false`, `null`, `undefined`) in `contents` are skipped.
+
+Any functions present in `contents` will be called to yield a value; if another function is returned, this will be called, and so on, until a non-function value is received.
+
+## Example
+
+```javascript
+const D = require('@hirojs/dom-build');
+
+var ui = D('#root.a.b.c',
+
+  "This is a text node", D('br'),
+  "This is another text node", D('br'),
+  
+  D('span',
+    // Properties will be attached directly to the object
+    { properties: { a: 123 } },
+
+    // Create a text object by concatenating 3 strings
+    D('%text',
       'This is an explicit text node; it will be returned.',
@@ -19,14 +71,27 @@ ' Multiple strings ',
   ),
-  d('br'),
-  d('a.active',
+
+  D('br'),
+
+  D('a.active',
     { href: "/foo/bar",
+      // Added as a click event listener
       onclick: function(evt) { evt.preventDefault(); alert("hello!"); } },
     "Click me! ", [
-      d("b", "here's some bold text"),
+      D("b", "here's some bold text"),
       " ",
-      d("i", "here's some italic text")
+      D("i", "here's some italic text")
     ]
   ),
-  d("div", {style: {width: 100, height: 100, backgroundColor: 'red'}})
+
+  // Set style properties.
+  // Also note the trailing falsey values are skipped as children for this element
+  D("div", {style: {width: 100, height: 100, backgroundColor: 'red'}}, 0, null, void 0, false),
+
+  // Set innerHTML directly
+  D("div", {innerHTML: '<b>HERE IS <i>SOME RAW</i> HTML</b>'}),
+
+  // Element is omitted so will be div.data-indicator
+  // This will set data-test="100" and data-json='{"foo":"bar"}'
+  D(".data-indicator", {data: {test: 100, json:{foo: "bar"}}}, 'the data value is:')
 );
 ````

test/bundle.js

@@ -42,5 +42,44 @@ (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 
+function setAttribute(el, k, v) {
+    if (v === true) {
+        el.setAttribute(k, '');
+    } else if (typeof v === 'object') {
+        el.setAttribute(k, JSON.stringify(v));
+    } else if (v !== false) {
+        el.setAttribute(k, v);
+    }
+}
+
+const setters = {
+    style(el, v) {
+        if (typeof v === 'string') {
+            el.style.cssText = v;
+        } else {
+            for (let prop in v) {
+                let pv = v[prop];
+                if (typeof pv === 'number' && DEFAULT_UNITS[prop]) {
+                    pv += DEFAULT_UNITS[prop];
+                }
+                el.style[prop] = pv;
+            }
+        }
+    },
+    properties(el, v) {
+        for (let prop in v) {
+            el[prop] = v[prop];
+        }
+    },
+    innerHTML(el, v) {
+        el.innerHTML = v;
+    },
+    data(el, v) {
+        for (let prop in v) {
+            setAttribute(el, `data-${prop}`, v[prop]);
+        }
+    }
+};
+
 function append(el, items, startOffset) {
-    for (var i = startOffset, len = items.length; i < len; ++i) {
-        var item = items[i];
+    for (let i = startOffset, len = items.length; i < len; ++i) {
+        let item = items[i];
         while (typeof item === 'function') {
@@ -62,26 +101,10 @@ item = item();
         } else {
-            for (var k in item) {
-                var v = item[k];
-                if (typeof v === 'function' && k[0] === 'o' && k[1] === 'n') {
+            for (let k in item) {
+                const v = item[k];
+                if (setters[k]) {
+                    setters[k](el, v);
+                } else if (typeof v === 'function' && k[0] === 'o' && k[1] === 'n') {
                     el.addEventListener(k.substr(2), v);
-                } else if (k === 'style') {
-                    if (typeof v === 'string') {
-                        el.style.cssText = v;
-                    } else {
-                        for (var prop in v) {
-                            var propVal = v[prop];
-                            if (typeof propVal === 'number' && DEFAULT_UNITS[prop]) {
-                                propVal += DEFAULT_UNITS[prop];
-                            }
-                            el.style[prop] = propVal;
-                        }   
-                    }
-                } else if (k === 'properties' && typeof v === 'object') {
-                    for (var prop in v) {
-                        el[prop] = v[prop];
-                    }
-                } else if (k === 'innerHTML') {
-                    el.innerHTML = v;
                 } else {
-                    el.setAttribute(k, v);
+                    setAttribute(el, k, v);
                 }
@@ -136,3 +159,4 @@ }
     d("div", {style: {width: 100, height: 100, backgroundColor: 'red'}}, 0, null, void 0, false),
-    d("div", {innerHTML: '<b>HERE IS <i>SOME RAW</i> HTML</b>'})
+    d("div", {innerHTML: '<b>HERE IS <i>SOME RAW</i> HTML</b>'}),
+    d(".data-indicator", {data: {test: 100, json:{foo: "bar"}}}, 'the data value is:')
   );
@@ -139,0 +163,0 @@

test/main.js

@@ -28,3 +28,4 @@ var d = require('..');
     d("div", {style: {width: 100, height: 100, backgroundColor: 'red'}}, 0, null, void 0, false),
-    d("div", {innerHTML: '<b>HERE IS <i>SOME RAW</i> HTML</b>'})
+    d("div", {innerHTML: '<b>HERE IS <i>SOME RAW</i> HTML</b>'}),
+    d(".data-indicator", {data: {test: 100, json:{foo: "bar"}}}, 'the data value is:')
   );
@@ -31,0 +32,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13806

increased by30.66%

Lines of code

296

increased by16.54%

Number of lines in readme file

96

increased by209.68%

No dependency changes