1.20.0 addClass(), chainable setters, domPath(), setAttribute() fix

ComLock · ComLock · commit 2f1022daedbd · 2018-04-04T16:23:50.000+02:00
diff --git a/README.md b/README.md
@@ -206,6 +206,13 @@ In terms of extendability, returning an object with named properties should be t
 
 ## Changelog
 
+### 1.20.0
+
+* Class FEATURE: addClass()
+* Class FEATURE: Chainable setters
+* Class BUG: domPath() must be external since clone doesn't rebuild self-references.
+* Class BUG: setAttribute() failed when no previous attributes
+
 ### 1.19.1
 
 * Deepmerge is a runtime dependancy.
@@ -214,7 +221,7 @@ In terms of extendability, returning an object with named properties should be t
 
 * Class syntax (semantic, path, style, build, clone, content, render)
 * Remove useless space in html style attribute after property colon.
-* BUG src/obj.es and src/svg.es wasn't transpiled in gradle.build.
+* BUG: src/obj.es and src/svg.es wasn't transpiled in gradle.build.
 
 ### 1.18.0
 
diff --git a/gradle.properties b/gradle.properties
@@ -3,4 +3,4 @@ projectName = render-js
 appName = com.enonic.lib.render-js
 displayName = Render JS
 xpVersion = 6.12.2
-version = 1.19.1
+version = 1.20.0
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "eslint-plugin-react": "^7.5.1",
     "mocha": "^4.0.1",
     "postcss-js": "^1.0.1",
+    "q-i": "^2.0.1",
     "sinon": "^4.1.3",
     "webpack": "^3.10.0"
   },
@@ -47,5 +48,5 @@
     "mocha": "node_modules/.bin/mocha -c --require babel-core/register",
     "test": "npm run mocha -- test/*.es* test/*/*.es*"
   },
-  "version": "1.19.1"
+  "version": "1.20.0"
 }
diff --git a/src/class.es b/src/class.es
@@ -8,7 +8,9 @@ import {element as importedElement} from './class/element.es';
 
 export {build} from './class/build.es';
 export {clone} from './class/clone.es';
+export {addClass} from './class/addClass.es';
 export {addContent} from './class/addContent.es';
+export {domPath} from './class/domPath.es';
 export const element = importedElement;
 
 export {getAttribute} from './class/getAttribute.es';
diff --git a/src/class/addClass.es b/src/class/addClass.es
@@ -0,0 +1,27 @@
+/* eslint-disable import/prefer-default-export */
+/* eslint-disable no-param-reassign */
+
+
+import {PROP_ATTR} from './element.es';
+import {isArray} from '../util/isArray.es';
+import {sortAndRemoveDups} from '../util/sortAndRemoveDups.es';
+
+
+export function addClass(element, classes) {
+  if (!element[PROP_ATTR]) { element[PROP_ATTR] = {}; }
+  if (!element[PROP_ATTR].class) {
+    element[PROP_ATTR].class = [];
+  } else if (!isArray(element[PROP_ATTR].class)) {
+    element[PROP_ATTR].class = [element[PROP_ATTR].class];
+  }
+  let arr = [];
+  if (isArray(classes)) {
+    classes.forEach(c => {
+      arr = arr.concat(c.split(' '));
+    });
+  } else {
+    arr = arr.concat(classes.split(' '));
+  }
+  element[PROP_ATTR].class = sortAndRemoveDups(element[PROP_ATTR].class.concat(arr));
+  return element; // Chainable
+}
diff --git a/src/class/addContent.es b/src/class/addContent.es
@@ -4,7 +4,6 @@ import {isArray} from '../util/isArray.es';
 import {PROP_CONTENT} from './element.es';
 
 
-// TODO applyPath
 export function addContent(element, content) {
   if (isArray(element[PROP_CONTENT])) {
     element[PROP_CONTENT].push(content);
@@ -14,4 +13,5 @@ export function addContent(element, content) {
   } else {
     element[PROP_CONTENT] = content; // eslint-disable-line no-param-reassign
   }
+  return element; // Chainable
 } // export function addContent
diff --git a/src/class/domPath.es b/src/class/domPath.es
@@ -0,0 +1,46 @@
+/* eslint-disable import/prefer-default-export */
+
+//import {print as inspect} from 'q-i';
+import {PROP_CONTENT, PROP_TAG} from './element.es';
+import {isArray} from '../util/isArray.es';
+
+
+export function domPath(element, path) {
+  //inspect({domPath: {element, path}});
+  //inspect({path});
+  if (!element[PROP_CONTENT]) { return null; }
+
+  const contentArr = isArray(element[PROP_CONTENT]) ?
+    element[PROP_CONTENT] : [element[PROP_CONTENT]];
+
+  const pathObj = {};
+  for (let i = 0; i < contentArr.length; i += 1) {
+    const item = contentArr[i];
+    const childTag = item[PROP_TAG];
+    if (isArray(pathObj[childTag])) {
+      pathObj[childTag].push(item); // reference
+    } else if (pathObj[childTag]) {
+      pathObj[childTag] = [pathObj[childTag], item]; // reference
+    } else {
+      pathObj[childTag] = item; // reference
+    }
+  } // for
+  //inspect({pathObj});
+
+  const parts = path.split('.');
+  const currentPart = parts.shift(); //inspect({currentPart});
+  const brackets = currentPart.split('['); //inspect({brackets});
+  let child;
+  if (brackets.length > 1) {
+    //child = eval(`pathObj.${currentPart}`); // NOTE eval can be harmful, so this avoids it:
+    const a = brackets[0]; //inspect({a});
+    const b = brackets[1].substring(0, brackets[1].length - 1); //inspect({b});
+    child = pathObj[a][b];
+  } else {
+    child = pathObj[currentPart];
+  }
+  //inspect({child});
+  if (!child) { return null; }
+  if (!parts.length) { return child; } // reference
+  return domPath(child, parts.join('.')); // recurse
+} // export function domPath
diff --git a/src/class/element.es b/src/class/element.es
@@ -24,25 +24,6 @@ const PROP_BODY_BEGIN = '_bb';
 const PROP_BODY_END   = '_be';*/
 
 
-function applyPath(obj) {
-  const contentArr = isArray(obj[PROP_CONTENT]) ? obj[PROP_CONTENT] : [obj[PROP_CONTENT]];
-  for (let i = 0; i < contentArr.length; i += 1) {
-    const item = contentArr[i];
-    //if (isString(item)) { // TODO Parse string into Element? }
-    if (item && item[PROP_TAG]) {
-      const childTag = item[PROP_TAG];
-      if (isArray(obj[childTag])) {
-        obj[childTag].push(item);
-      } else if (obj[childTag]) {
-        obj[childTag] = [obj[childTag], item]; // eslint-disable-line no-param-reassign
-      } else {
-        obj[childTag] = item; // eslint-disable-line no-param-reassign
-      }
-    } // if Element
-  } // for
-} // function applyPath
-
-
 export function Element({
   tagName = DEFAULT_TAGNAME,
   spec = null,
@@ -70,10 +51,7 @@ export function Element({
     }
     if (!isEmptyObject(attributes)) { obj[PROP_ATTR] = attributes; }
   } // if spec
-  if (content) {
-    obj[PROP_CONTENT] = content;
-    applyPath(obj);
-  } // if content
+  if (content) { obj[PROP_CONTENT] = content; } // if content
   /*
   if (headBegin ) { obj[PROP_HEAD_BEGIN] = headBegin; }
   if (headEnd   ) { obj[PROP_HEAD_END  ] = headEnd  ; }
diff --git a/src/class/setAttribute.es b/src/class/setAttribute.es
@@ -5,5 +5,12 @@ import {PROP_ATTR} from './element.es';
 
 
 export function setAttribute(element, name, value) {
-  element[PROP_ATTR][name] = value; // eslint-disable-line no-param-reassign
+  if (element[PROP_ATTR]) {
+    element[PROP_ATTR][name] = value; // eslint-disable-line no-param-reassign
+  } else {
+    element[PROP_ATTR] = { // eslint-disable-line no-param-reassign
+      [name]: value
+    };
+  }
+  return element; // Chainable
 }
diff --git a/src/class/setAttributes.es b/src/class/setAttributes.es
@@ -8,4 +8,5 @@ import {PROP_ATTR} from './element.es';
 export function setAttributes(element, attributes) {
   // eslint-disable-next-line no-param-reassign
   element[PROP_ATTR] = merge(element[PROP_ATTR], attributes);
+  return element; // Chainable
 }
diff --git a/src/class/setContent.es b/src/class/setContent.es
@@ -6,4 +6,5 @@ import {PROP_CONTENT} from './element.es';
 
 export function setContent(element, content) {
   element[PROP_CONTENT] = content; // eslint-disable-line no-param-reassign
+  return element; // Chainable
 }
diff --git a/src/class/setMedia.es b/src/class/setMedia.es
@@ -6,4 +6,5 @@ import {PROP_MEDIA} from './element.es';
 
 export function setMedia(element, media) {
   element[PROP_MEDIA] = media; // eslint-disable-line no-param-reassign
+  return element; // Chainable
 }
diff --git a/src/class/setStyle.es b/src/class/setStyle.es
@@ -6,4 +6,5 @@ import {PROP_STYLE} from './element.es';
 
 export function setStyle(element, style) {
   element[PROP_STYLE] = style; // eslint-disable-line no-param-reassign
+  return element; // Chainable
 }
diff --git a/src/util.es b/src/util.es
@@ -7,5 +7,6 @@ export {isFunction} from './util/isFunction.es';
 export {isObject} from './util/isObject.es';
 export {isSet} from './util/isSet.es';
 export {isString} from './util/isString.es';
+export {sortAndRemoveDups} from './util/sortAndRemoveDups.es';
 export {sortedUniqStr} from './util/sortedUniqStr.es';
 export {toStr} from './util/toStr.es';
diff --git a/src/util/sortAndRemoveDups.es b/src/util/sortAndRemoveDups.es
@@ -0,0 +1,15 @@
+/* eslint-disable import/prefer-default-export */
+
+
+// This implementation has been profiled. If you want to change it,
+// duplicate it and profile old and new too see if your changes are faster...
+export function sortAndRemoveDups(arr) {
+  const sorted = arr.sort();
+  const uniq = [];
+  let prev = null;
+  for (let i = 0; i < sorted.length; i += 1) {
+    if (sorted[i] !== prev) { uniq.push(sorted[i]); }
+    prev = sorted[i];
+  }
+  return uniq;
+}
diff --git a/test/class/accessors.test.es b/test/class/accessors.test.es
@@ -1,7 +1,8 @@
 import {deepStrictEqual} from 'assert';
 import {
   html,
-  addContent, getAttribute, getAttributes, getContent, getMedia, getStyle,
+  addClass, addContent,
+  getAttribute, getAttributes, getContent, getMedia, getStyle,
   setAttribute, setAttributes, setContent, setMedia, setStyle
 } from '../../src/class.es';
 
@@ -15,16 +16,34 @@ describe('class', () => {
         borderBottomWidth: 1
       }
     };
+    const CLASS = [
+      'a',
+      'b',
+      'c'
+    ];
     describe('dom setters', () => {
-      it('setAttributes()', () => {
-        setAttributes(dom, { name: 'value' });
-        deepStrictEqual(dom._a.name, 'value');
-      }); // it setAttributes
-      it('setAttribute()', () => {
+      it('setAttribute() when no previous attributes', () => {
         setAttribute(dom, 'anotherName', 'anotherValue');
         deepStrictEqual(dom._a.anotherName, 'anotherValue');
       }); // it setAttribute
-      it('setContent()', () => {
+      it('addClass()', () => {
+        addClass(dom, [
+          'a a b c',
+          'c b b a'
+        ]);
+        deepStrictEqual(dom._a.class, CLASS);
+      }); // it setAttributes
+      it('addContent() handles no previous content else makes array', () => {
+        addContent(dom, 'content');
+        deepStrictEqual(dom._c, 'content');
+        addContent(dom, 'content');
+        deepStrictEqual(dom._c, ['content', 'content']);
+      }); // it setContent
+      it('setAttributes() merges', () => {
+        setAttributes(dom, { name: 'value' });
+        deepStrictEqual(dom._a.name, 'value');
+      }); // it setAttributes
+      it('setContent() overwrites previous content', () => {
         setContent(dom, 'content');
         deepStrictEqual(dom._c, 'content');
       }); // it setContent
@@ -36,21 +55,51 @@ describe('class', () => {
         setMedia(dom, MEDIA);
         deepStrictEqual(dom._m, MEDIA);
       }); // it setContent
+      it('are chainable', () => {
+        const semantic = html();
+        setStyle(
+          setMedia(
+            setAttributes(
+              setAttribute(
+                addContent(
+                  setContent(
+                    addClass(semantic, 'className'),
+                    'Text'
+                  ),
+                  'More text'
+                ),
+                'name', 'value'
+              ),
+              {gets: 'merged'}
+            ),
+            MEDIA
+          ),
+          STYLE
+        );
+        deepStrictEqual(semantic, {
+          _t: 'html',
+          _a: {
+            class: ['className'],
+            gets: 'merged',
+            name: 'value'
+          },
+          _c: ['Text', 'More text'],
+          _s: STYLE,
+          _m: MEDIA
+        });
+      }); // it are chainable
     }); // describe dom setters
-    describe('dom adders', () => {
-      it('addContent()', () => {
-        addContent(dom, 'content');
-        deepStrictEqual(dom._c, ['content', 'content']);
-      }); // it setContent
-    }); // describe dom setters
+
+
     describe('dom getters', () => {
       it('getAttribute()', () => {
         deepStrictEqual(getAttribute(dom, 'name'), 'value');
       }); // it getAttribute
       it('getAttributes()', () => {
         deepStrictEqual(getAttributes(dom), {
           name: 'value',
-          anotherName: 'anotherValue'
+          anotherName: 'anotherValue',
+          class: CLASS
         });
         it('getContent()', () => {
           deepStrictEqual(getContent(dom), 'content');
diff --git a/test/class/domPath.test.es b/test/class/domPath.test.es
@@ -0,0 +1,27 @@
+import {deepStrictEqual} from 'assert';
+import {
+  html, head, title, body, main, h1, ul, li, domPath
+} from '../../src/class.es';
+
+
+describe('class', () => {
+  describe('domPath', () => {
+    it('brackets notation', () => {
+      const view = ul([
+        li('First'),
+        li('Second')
+      ]);
+      deepStrictEqual(domPath(view, 'li[0]')._c, 'First');
+      deepStrictEqual(domPath(view, 'li[1]')._c, 'Second');
+    }); // it dot notation
+
+    it('dot notation', () => {
+      const dom = html([
+        head(title('Title')),
+        body(main(h1('Title')))
+      ]);
+      deepStrictEqual(domPath(dom, 'head.title')._c, 'Title');
+      deepStrictEqual(domPath(dom, 'body.main.h1')._c, 'Title');
+    }); // it dot notation
+  }); // describe domPath
+});// describe class
diff --git a/test/class/path.test.es b/test/class/path.test.es
diff --git a/util.es b/util.es
diff --git a/webpack.config.babel.js b/webpack.config.babel.js

Original file line number	Diff line number	Diff line change
`@@ -8,4 +8,5 @@ import {PROP_ATTR} from './element.es';`
`8`	`8`	`export function setAttributes(element, attributes) {`
`9`	`9`	`// eslint-disable-next-line no-param-reassign`
`10`	`10`	`element[PROP_ATTR] = merge(element[PROP_ATTR], attributes);`
	`11`	`+ return element; // Chainable`
`11`	`12`	`}`