Added filter to virtual DOM to remove non HTML attributes

Author: James Hill

package.json

@@ -1,6 +1,6 @@
 {
    "name": "hypnode",
-   "version": "1.1.3",
+   "version": "1.1.4",
    "description": "",
    "main": "dist/index.js",
    "types": "dist/index.d.ts",

src/attributes.ts

@@ -9,6 +9,7 @@ import { Hypnode } from './index';
 interface IAttrs {
    [index: string]: any;
    children?: string | Hypnode[];
+   ref?: (el: HTMLElement) => void;
    id?: string;
    title?: string;
    class?: string;

src/virtualDom.ts

@@ -22,11 +22,28 @@ interface IVNode {
 function virtualDom(tag: Tag, attrs: IAttrs, children: any[]): any {
    return {
       nodeName: tag,
-      attrs,
+      attrs: filterValidAttributes(attrs),
       children,
    };
 }
 
+/* -----------------------------------
+ *
+ * Filter
+ *
+ * -------------------------------- */
+
+function filterValidAttributes(attrs: IAttrs) {
+   const keys = Object.keys(attrs);
+   const valid = keys.filter(key => key.slice(0, 2) !== 'on' && key !== 'ref');
+
+   return valid.reduce((result: IAttrs, key) => {
+      result[key] = attrs[key];
+
+      return result;
+   }, {});
+}
+
 /* -----------------------------------
  *
  * Export

tests/src/virtualDom.spec.ts

@@ -1,4 +1,5 @@
 import { IAttrs } from '../../src/attributes';
+import { IVNode } from '../../src/virtualDom';
 
 /* -----------------------------------
  *
@@ -57,6 +58,22 @@ describe('Core:virtualDom', () => {
 
       expect(result).toEqual(sample);
    });
+
+   it('filters non HTML attributes from virtual nodes', () => {
+      const sample: IVNode = {
+         nodeName: 'div',
+         attrs: { title: testTitle },
+         children: [],
+      };
+
+      const result = h('div', {
+         title: testTitle,
+         onClick: ev => console.log(ev),
+         ref: (el: HTMLElement) => console.log(el),
+      });
+
+      expect(result).toEqual(sample);
+   });
 });
 
 /* -----------------------------------