typed-dom - npm Package Compare versions

Comparing version 0.0.34 to 0.0.35

dist/typed-dom.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.34 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.35 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 require = function e(t, n, r) {
@@ -315,7 +315,24 @@ function s(o, u) {
                 return obj[tag] = function (attrs, children, factory) {
-                    return !attrs || children === void 0 || typeof children === 'function' ? new builder_1.TypedHTMLElement((children || function () {
-                        return document.createElement(tag);
-                    })(), attrs) : new builder_1.TypedHTMLElement(attribute(attrs, (factory || function () {
-                        return document.createElement(tag);
-                    })()), children);
+                    switch (typeof attrs) {
+                    case 'undefined':
+                        return new builder_1.TypedHTMLElement(document.createElement(tag), void 0);
+                    case 'function':
+                        return new builder_1.TypedHTMLElement(attrs(), void 0);
+                    case 'string':
+                        return new builder_1.TypedHTMLElement((children || function () {
+                            return document.createElement(tag);
+                        })(), attrs);
+                    case 'object':
+                        return Object.keys(attrs).some(function (key) {
+                            return typeof attrs[key] === 'string';
+                        }) ? typeof children === 'function' ? new builder_1.TypedHTMLElement(attribute(attrs, (children || function () {
+                            return document.createElement(tag);
+                        })()), void 0) : new builder_1.TypedHTMLElement(attribute(attrs, (factory || function () {
+                            return document.createElement(tag);
+                        })()), children) : new builder_1.TypedHTMLElement((children || function () {
+                            return document.createElement(tag);
+                        })(), attrs);
+                    default:
+                        throw new TypeError('Invalid arguments: [' + attrs + ', ' + children + ', ' + factory + ']');
+                    }
                 }, obj;
@@ -322,0 +339,0 @@ }, {});

dist/typed-dom.min.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.34 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
-require=function e(t,r,n){function i(c,u){if(!r[c]){if(!t[c]){var s="function"==typeof require&&require;if(!u&&s)return s(c,!0);if(o)return o(c,!0);var a=new Error("Cannot find module '"+c+"'");throw a.code="MODULE_NOT_FOUND",a}var d=r[c]={exports:{}};t[c][0].call(d.exports,function(e){var r=t[c][1][e];return i(r||e)},d,d.exports,e,t,r,n)}return r[c].exports}for(var o="function"==typeof require&&require,c=0;c<n.length;c++)i(n[c]);return i}({1:[function(e,t,r){},{}],2:[function(e,t,r){"use strict";var n=this&&this.__assign||Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++){t=arguments[r];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e};Object.defineProperty(r,"__esModule",{value:!0});var i=function(){function e(e,t){function r(t){e.id.match(/^[\w\-]+$/)&&(t.innerHTML=t.innerHTML.replace(/^\s*\$scope(?!\w)/gm,"#"+e.id),Array.from(t.querySelectorAll("*")).forEach(function(e){return void e.remove()}))}var i=this;switch(this.element_=e,this.children_=t,this.mode=void 0===this.children_?"empty":"string"==typeof this.children_?"text":Array.isArray(this.children_)?"collection":"struct",this.structkeys="struct"===this.mode?Object.keys(this.children_):[],this.tag,this.mode){case"empty":return;case"text":return this.children_=document.createTextNode(""),this.element_.appendChild(this.children_),void(this.children=t);case"collection":return e.id&&t.forEach(function(e){var t=e.element;return t instanceof HTMLStyleElement&&void r(t)}),this.children_=Object.freeze([]),void(this.children=t);case"struct":return e.id&&Object.keys(t).map(function(e){return t[e]}).forEach(function(e){var t=e.element;return t instanceof HTMLStyleElement&&void r(t)}),this.children_=this.observe(n({},t)),void this.structkeys.forEach(function(e){return void i.element_.appendChild(t[e].element)})}}return Object.defineProperty(e.prototype,"element",{get:function(){return this.element_},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"children",{get:function(){switch(this.mode){case"text":return this.children_.data;default:return this.children_}},set:function(e){var t=this;switch(this.mode){case"empty":return;case"text":if(e===this.children_.data)return;return void(this.children_.data=e);case"collection":if(e===this.children_)return;if(!Object.isFrozen(this.children_))throw new Error("TypedHTMLElement collections cannot be updated recursively.");return e.reduce(function(e,t){var r=e.indexOf(t);return-1===r?e:(e.splice(r,1),e)},this.children_.slice()).forEach(function(e){return void e.element.remove()}),this.children_=[],e.forEach(function(e,r){return t.children_[r]=e,void t.element_.appendChild(e.element)}),void Object.freeze(this.children_);case"struct":if(e===this.children_)return;return void this.structkeys.forEach(function(r){return t.children_[r]=e[r]})}},enumerable:!0,configurable:!0}),e.prototype.observe=function(e){var t=this;return Object.defineProperties(e,this.structkeys.reduce(function(r,n){var i=e[n];return r[n]={configurable:!0,enumerable:!0,get:function(){return i},set:function(e){var r=i;e!==r&&(i=e,t.element_.replaceChild(e.element,r.element))}},r},{}))},e}();r.TypedHTMLElement=i},{}],3:[function(e,t,r){"use strict";function n(e,t){return Object.keys(e).forEach(function(r){return void t.setAttribute(r,e[r]||"")}),t}Object.defineProperty(r,"__esModule",{value:!0});var i=e("./builder");r.TypedHTML=["a","applet","area","audio","base","basefont","blockquote","body","br","button","canvas","caption","col","colgroup","data","datalist","del","dir","div","dl","embed","fieldset","font","form","frame","frameset","h1","h2","h3","h4","h5","h6","head","hr","html","iframe","img","input","ins","isindex","label","legend","li","link","listing","map","marquee","menu","meta","meter","nextid","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","script","select","source","span","style","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","track","ul","video","x-ms-webview","xmp","abbr","acronym","address","article","aside","b","bdo","big","center","cite","code","dd","dfn","dt","em","figcaption","figure","footer","header","hgroup","i","kbd","keygen","mark","nav","nobr","noframes","noscript","plaintext","rt","ruby","s","samp","section","small","strike","strong","sub","sup","tt","u","var","wbr","custom"].reduce(function(e,t){return e[t]=function(e,r,o){return e&&void 0!==r&&"function"!=typeof r?new i.TypedHTMLElement(n(e,(o||function(){return document.createElement(t)})()),r):new i.TypedHTMLElement((r||function(){return document.createElement(t)})(),e)},e},{})},{"./builder":2}],4:[function(e,t,r){"use strict";Object.defineProperty(r,"__esModule",{value:!0});var n=e("./dom/html");r.default=n.TypedHTML,r.TypedHTML=n.TypedHTML,function(e){for(var t in e)r.hasOwnProperty(t)||(r[t]=e[t])}(e("./util/dom"))},{"./dom/html":3,"./util/dom":5}],5:[function(e,t,r){"use strict";function n(e,t,r,n){function i(e){"object"==typeof n&&n.passive&&(e.preventDefault=u.noop),r(e)}void 0===n&&(n=!1),e.addEventListener(t,i,o(n));var c=function(){return c=u.noop,void e.removeEventListener(t,i,o(n))};return function(){return void c()}}function i(e,t,r,i){void 0===i&&(i=!1);var o=n(e,t,function(e){o(),r(e)},i);return function(){return void o()}}function o(e){return s?e:"boolean"==typeof e?e:e.capture}var c=this&&this.__assign||Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++){t=arguments[r];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e};Object.defineProperty(r,"__esModule",{value:!0});var u=e("./noop");r.bind=n,r.once=i,r.delegate=function(e,t,r,o,u){return void 0===u&&(u={}),n(e,r,function(n){var c=n.target.closest(t);c&&Array.from(e.querySelectorAll(t)).filter(function(e){return e===c}).forEach(function(e){return void i(e,r,function(e){o(e)},u)})},c({},u,{capture:!0}))};var s=!1;try{document.createElement("div").addEventListener("test",function(){},{get capture(){return s=!0}})}catch(e){}},{"./noop":6}],6:[function(e,t,r){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r.noop=function(){}},{}],"typed-dom":[function(e,t,r){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),function(e){for(var t in e)r.hasOwnProperty(t)||(r[t]=e[t])}(e("./src/export"));var n=e("./src/export");r.default=n.default},{"./src/export":4}]},{},[1,"typed-dom"]);
+/*! typed-dom v0.0.35 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+require=function e(t,r,n){function i(c,u){if(!r[c]){if(!t[c]){var s="function"==typeof require&&require;if(!u&&s)return s(c,!0);if(o)return o(c,!0);var a=new Error("Cannot find module '"+c+"'");throw a.code="MODULE_NOT_FOUND",a}var d=r[c]={exports:{}};t[c][0].call(d.exports,function(e){var r=t[c][1][e];return i(r||e)},d,d.exports,e,t,r,n)}return r[c].exports}for(var o="function"==typeof require&&require,c=0;c<n.length;c++)i(n[c]);return i}({1:[function(e,t,r){},{}],2:[function(e,t,r){"use strict";var n=this&&this.__assign||Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++){t=arguments[r];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e};Object.defineProperty(r,"__esModule",{value:!0});var i=function(){function e(e,t){function r(t){e.id.match(/^[\w\-]+$/)&&(t.innerHTML=t.innerHTML.replace(/^\s*\$scope(?!\w)/gm,"#"+e.id),Array.from(t.querySelectorAll("*")).forEach(function(e){return void e.remove()}))}var i=this;switch(this.element_=e,this.children_=t,this.mode=void 0===this.children_?"empty":"string"==typeof this.children_?"text":Array.isArray(this.children_)?"collection":"struct",this.structkeys="struct"===this.mode?Object.keys(this.children_):[],this.tag,this.mode){case"empty":return;case"text":return this.children_=document.createTextNode(""),this.element_.appendChild(this.children_),void(this.children=t);case"collection":return e.id&&t.forEach(function(e){var t=e.element;return t instanceof HTMLStyleElement&&void r(t)}),this.children_=Object.freeze([]),void(this.children=t);case"struct":return e.id&&Object.keys(t).map(function(e){return t[e]}).forEach(function(e){var t=e.element;return t instanceof HTMLStyleElement&&void r(t)}),this.children_=this.observe(n({},t)),void this.structkeys.forEach(function(e){return void i.element_.appendChild(t[e].element)})}}return Object.defineProperty(e.prototype,"element",{get:function(){return this.element_},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"children",{get:function(){switch(this.mode){case"text":return this.children_.data;default:return this.children_}},set:function(e){var t=this;switch(this.mode){case"empty":return;case"text":if(e===this.children_.data)return;return void(this.children_.data=e);case"collection":if(e===this.children_)return;if(!Object.isFrozen(this.children_))throw new Error("TypedHTMLElement collections cannot be updated recursively.");return e.reduce(function(e,t){var r=e.indexOf(t);return-1===r?e:(e.splice(r,1),e)},this.children_.slice()).forEach(function(e){return void e.element.remove()}),this.children_=[],e.forEach(function(e,r){return t.children_[r]=e,void t.element_.appendChild(e.element)}),void Object.freeze(this.children_);case"struct":if(e===this.children_)return;return void this.structkeys.forEach(function(r){return t.children_[r]=e[r]})}},enumerable:!0,configurable:!0}),e.prototype.observe=function(e){var t=this;return Object.defineProperties(e,this.structkeys.reduce(function(r,n){var i=e[n];return r[n]={configurable:!0,enumerable:!0,get:function(){return i},set:function(e){var r=i;e!==r&&(i=e,t.element_.replaceChild(e.element,r.element))}},r},{}))},e}();r.TypedHTMLElement=i},{}],3:[function(e,t,r){"use strict";function n(e,t){return Object.keys(e).forEach(function(r){return void t.setAttribute(r,e[r]||"")}),t}Object.defineProperty(r,"__esModule",{value:!0});var i=e("./builder");r.TypedHTML=["a","applet","area","audio","base","basefont","blockquote","body","br","button","canvas","caption","col","colgroup","data","datalist","del","dir","div","dl","embed","fieldset","font","form","frame","frameset","h1","h2","h3","h4","h5","h6","head","hr","html","iframe","img","input","ins","isindex","label","legend","li","link","listing","map","marquee","menu","meta","meter","nextid","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","script","select","source","span","style","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","track","ul","video","x-ms-webview","xmp","abbr","acronym","address","article","aside","b","bdo","big","center","cite","code","dd","dfn","dt","em","figcaption","figure","footer","header","hgroup","i","kbd","keygen","mark","nav","nobr","noframes","noscript","plaintext","rt","ruby","s","samp","section","small","strike","strong","sub","sup","tt","u","var","wbr","custom"].reduce(function(e,t){return e[t]=function(e,r,o){switch(typeof e){case"undefined":return new i.TypedHTMLElement(document.createElement(t),void 0);case"function":return new i.TypedHTMLElement(e(),void 0);case"string":return new i.TypedHTMLElement((r||function(){return document.createElement(t)})(),e);case"object":return Object.keys(e).some(function(t){return"string"==typeof e[t]})?"function"==typeof r?new i.TypedHTMLElement(n(e,(r||function(){return document.createElement(t)})()),void 0):new i.TypedHTMLElement(n(e,(o||function(){return document.createElement(t)})()),r):new i.TypedHTMLElement((r||function(){return document.createElement(t)})(),e);default:throw new TypeError("Invalid arguments: ["+e+", "+r+", "+o+"]")}},e},{})},{"./builder":2}],4:[function(e,t,r){"use strict";Object.defineProperty(r,"__esModule",{value:!0});var n=e("./dom/html");r.default=n.TypedHTML,r.TypedHTML=n.TypedHTML,function(e){for(var t in e)r.hasOwnProperty(t)||(r[t]=e[t])}(e("./util/dom"))},{"./dom/html":3,"./util/dom":5}],5:[function(e,t,r){"use strict";function n(e,t,r,n){function i(e){"object"==typeof n&&n.passive&&(e.preventDefault=u.noop),r(e)}void 0===n&&(n=!1),e.addEventListener(t,i,o(n));var c=function(){return c=u.noop,void e.removeEventListener(t,i,o(n))};return function(){return void c()}}function i(e,t,r,i){void 0===i&&(i=!1);var o=n(e,t,function(e){o(),r(e)},i);return function(){return void o()}}function o(e){return s?e:"boolean"==typeof e?e:e.capture}var c=this&&this.__assign||Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++){t=arguments[r];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e};Object.defineProperty(r,"__esModule",{value:!0});var u=e("./noop");r.bind=n,r.once=i,r.delegate=function(e,t,r,o,u){return void 0===u&&(u={}),n(e,r,function(n){var c=n.target.closest(t);c&&Array.from(e.querySelectorAll(t)).filter(function(e){return e===c}).forEach(function(e){return void i(e,r,function(e){o(e)},u)})},c({},u,{capture:!0}))};var s=!1;try{document.createElement("div").addEventListener("test",function(){},{get capture(){return s=!0}})}catch(e){}},{"./noop":6}],6:[function(e,t,r){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r.noop=function(){}},{}],"typed-dom":[function(e,t,r){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),function(e){for(var t in e)r.hasOwnProperty(t)||(r[t]=e[t])}(e("./src/export"));var n=e("./src/export");r.default=n.default},{"./src/export":4}]},{},[1,"typed-dom"]);

package.json

 {
   "name": "typed-dom",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "description": "Static typed dom component builder.",
@@ -54,7 +54,7 @@ "private": false,
     "karma-mocha": "^1.3.0",
-    "mocha": "^3.4.2",
+    "mocha": "^3.5.0",
     "npm-check-updates": "^2.12.1",
     "power-assert": "^1.4.4",
     "pump": "^1.0.2",
-    "run-sequence": "^2.0.0",
+    "run-sequence": "^2.1.0",
     "spica": "0.0.99",
@@ -61,0 +61,0 @@ "tsify": "^3.0.1",

README.md

@@ -47,6 +47,8 @@ # typed-dom
 type TypedHTMLElementChildren
-  = TypedHTMLElementChildren.Text
+  = TypedHTMLElementChildren.Void
+  | TypedHTMLElementChildren.Text
   | TypedHTMLElementChildren.Collection
   | TypedHTMLElementChildren.Struct;
 namespace TypedHTMLElementChildren {
+  export type Void = void;
   export type Text = string;
@@ -53,0 +55,0 @@ export type Collection = TypedHTMLElement<string, HTMLElement, any>[];

src/dom/builder.ts

 export type TypedHTMLElementChildren
-  = TypedHTMLElementChildren.Text
+  = TypedHTMLElementChildren.Void
+  | TypedHTMLElementChildren.Text
   | TypedHTMLElementChildren.Collection
   | TypedHTMLElementChildren.Struct;
 export namespace TypedHTMLElementChildren {
+  export type Void = void;
   export type Text = string;
@@ -7,0 +9,0 @@ export type Collection = TypedHTMLElement<string, HTMLElement, any>[];

src/dom/html.ts

 import { TypedHTMLElement, TypedHTMLElementChildren } from './builder';
 
 interface TypedHTMLElementBuilder<T extends string, E extends HTMLElement> {
-  (): TypedHTMLElement<T, E, never>;
+  (factory?: () => E): TypedHTMLElement<T, E, void>;
   <C extends TypedHTMLElementChildren>
   (children: C, factory?: () => E): TypedHTMLElement<T, E, C>;
+  (attrs: { [name: string]: string; }, factory?: () => E): TypedHTMLElement<T, E, void>;
   <C extends TypedHTMLElementChildren>
@@ -199,6 +200,20 @@ (attrs: { [name: string]: string; }, children: C, factory?: () => E): TypedHTMLElement<T, E, C>;
       (attrs?: { [name: string]: string; }, children?: C, factory?: () => HTMLElement)
-      : TypedHTMLElement<string, HTMLElement, C> =>
-          !attrs || children === void 0 || typeof children === 'function'
-            ? new TypedHTMLElement((<any>children || (() => document.createElement(tag)))(), <C><any>attrs)
-            : new TypedHTMLElement(attribute(attrs, (factory || (() => document.createElement(tag)))()), children),
+      : TypedHTMLElement<string, HTMLElement, C> => {
+        switch (typeof attrs) {
+          case 'undefined':
+            return new TypedHTMLElement(document.createElement(tag), <any>void 0);
+          case 'function':
+            return new TypedHTMLElement((<any>attrs)(), <any>void 0);
+          case 'string':
+            return new TypedHTMLElement((<any>children || (() => document.createElement(tag)))(), <C><any>attrs);
+          case 'object':
+            return Object.keys(attrs).some(key => typeof attrs![key] === 'string')
+              ? typeof children === 'function'
+                ? new TypedHTMLElement(attribute(attrs!, (children || (() => document.createElement(tag)))()), <any>void 0)
+                : new TypedHTMLElement(attribute(attrs!, (factory || (() => document.createElement(tag)))()), children!)
+              : new TypedHTMLElement((<any>children || (() => document.createElement(tag)))(), <C><any>attrs);
+          default:
+            throw new TypeError(`Invalid arguments: [${attrs}, ${children}, ${factory}]`);
+        }
+      },
     obj
@@ -205,0 +220,0 @@ ), <any>{});

test/integration/dom.ts

@@ -11,61 +11,2 @@ import TypedHTML from '../../index';
   describe('spec', function () {
-    it('attr with text', function () {
-      const dom = TypedHTML.script({ id: 'test', src: './' }, '');
-      assert(dom.element.id === 'test');
-      assert(dom.element.getAttribute('src') === './');
-      assert.deepStrictEqual(dom.children, '');
-    });
-
-    it('attr with array', function () {
-      const dom = TypedHTML.script({ id: 'test', src: './' }, []);
-      assert(dom.element.id === 'test');
-      assert(dom.element.getAttribute('src') === './');
-      assert.deepStrictEqual(dom.children, []);
-    });
-
-    it('attr with object', function () {
-      const dom = TypedHTML.script({ id: 'test', src: './' }, {});
-      assert(dom.element.id === 'test');
-      assert(dom.element.getAttribute('src') === './');
-      assert.deepStrictEqual(dom.children, {});
-    });
-
-    it('factory with array', function () {
-      const dom = TypedHTML.script([], () => {
-        const el = document.createElement('script');
-        el.id = 'test';
-        return el;
-      });
-      assert(dom.element.id === 'test');
-      assert.deepStrictEqual(dom.children, []);
-    });
-
-    it('factory with object', function () {
-      const dom = TypedHTML.script({}, () => {
-        const el = document.createElement('script');
-        el.id = 'test';
-        return el;
-      });
-      assert(dom.element.id === 'test');
-      assert.deepStrictEqual(dom.children, {});
-    });
-
-    it('sanitize', function () {
-      const dom = TypedHTML.div('<script>');
-      assert(dom.element.innerHTML === '&lt;script&gt;');
-      assert(dom.children === '<script>');
-      dom.children = '<script>';
-      assert(dom.element.innerHTML === '&lt;script&gt;');
-      assert(dom.children === '<script>');
-    });
-
-    it('scope', function () {
-      const template = `$scope {}\n  $scope {}`;
-      const result = `#test {}\n#test {}`;
-      assert(TypedHTML.div({ id: 'test' }, [TypedHTML.style(template)]).children[0].element.innerHTML === result);
-      assert(TypedHTML.div({ id: 'test' }, { style: TypedHTML.style(template) }).children.style.element.innerHTML === result);
-      assert(TypedHTML.div({ id: 'test' }, [TypedHTML.style(`<script>`)]).children[0].element.children.length === 0);
-      assert(TypedHTML.div({ id: '><script>' }, [TypedHTML.style(template)]).children[0].element.innerHTML === template);
-    });
-
     it('empty', function () {
@@ -77,2 +18,8 @@ const empty = TypedHTML.div();
 
+    it('factory', function () {
+      const dom = TypedHTML.div(() => <any>document.createElement('p'));
+      assert(dom.element.outerHTML === '<p></p>');
+      assert.deepStrictEqual(dom.children, void 0);
+    });
+
     it('text', function () {
@@ -91,38 +38,12 @@ const text = TypedHTML.p(`a`);
 
-    it('struct', function () {
-      const struct = TypedHTML.article({
-        title: TypedHTML.h1(`title`),
-        content: TypedHTML.p([TypedHTML.a()])
+    it('text with factory', function () {
+      const dom = TypedHTML.p(`a`, () => {
+        const el = document.createElement('p');
+        el.id = 'test';
+        return el;
       });
-      assert(struct.element.outerHTML === '<article><h1>title</h1><p><a></a></p></article>');
-      assert(struct.children.title.element === struct.element.firstChild);
-      assert(struct.children.content.element === struct.element.lastChild);
+      assert(dom.element.id === 'test');
+      assert.deepStrictEqual(dom.children, 'a');
     });
 
-    it('struct children update', function () {
-      const struct = TypedHTML.article({
-        title: TypedHTML.h1(`a`)
-      });
-      struct.children = {
-        title: TypedHTML.h1(`b`)
-      };
-      assert(struct.children.title.element.textContent === 'b');
-      assert(struct.children.title.element === struct.element.firstChild);
-      assert(struct.children.title.children === 'b');
-    });
-
-    it('struct children partial update', function () {
-      const struct = TypedHTML.article({
-        title: TypedHTML.h1(`a`)
-      });
-      struct.children.title = TypedHTML.h1(`b`);
-      assert(struct.children.title.element.textContent === 'b');
-      assert(struct.children.title.element === struct.element.firstChild);
-      assert(struct.children.title.children === 'b');
-      struct.children.title.children = 'c';
-      assert(struct.children.title.element.textContent === 'c');
-      assert(struct.children.title.element === struct.element.firstChild);
-      assert(struct.children.title.children === 'c');
-    });
-
     it('collection', function () {
@@ -157,6 +78,6 @@ const collection = TypedHTML.ul([
       // property test
-      const ss = Array(3).fill(0).map(() => TypedHTML.li());
+      const ss = Array(3).fill(0).map(() => TypedHTML.li(``));
       void Sequence.zip(
-        Sequence.cycle([Array(3).fill(0).map(() => TypedHTML.li()).concat(ss)]),
-        Sequence.cycle([Array(3).fill(0).map(() => TypedHTML.li()).concat(ss)]))
+        Sequence.cycle([Array(3).fill(0).map(() => TypedHTML.li(``)).concat(ss)]),
+        Sequence.cycle([Array(3).fill(0).map(() => TypedHTML.li(``)).concat(ss)]))
         .take(1000)
@@ -198,2 +119,152 @@ .map(lss =>
 
+    it('collection with factory', function () {
+      const dom = TypedHTML.ul([], () => {
+        const el = document.createElement('ul');
+        el.id = 'test';
+        return el;
+      });
+      assert(dom.element.id === 'test');
+      assert.deepStrictEqual(dom.children, []);
+    });
+
+    it('struct', function () {
+      const struct = TypedHTML.article({
+        title: TypedHTML.h1(`title`),
+        content: TypedHTML.p([TypedHTML.a()])
+      });
+      assert(struct.element.outerHTML === '<article><h1>title</h1><p><a></a></p></article>');
+      assert(struct.children.title.element === struct.element.firstChild);
+      assert(struct.children.content.element === struct.element.lastChild);
+    });
+
+    it('struct children update', function () {
+      const struct = TypedHTML.article({
+        title: TypedHTML.h1(`a`)
+      });
+      struct.children = {
+        title: TypedHTML.h1(`b`)
+      };
+      assert(struct.children.title.element.textContent === 'b');
+      assert(struct.children.title.element === struct.element.firstChild);
+      assert(struct.children.title.children === 'b');
+    });
+
+    it('struct children partial update', function () {
+      const struct = TypedHTML.article({
+        title: TypedHTML.h1(`a`)
+      });
+      struct.children.title = TypedHTML.h1(`b`);
+      assert(struct.children.title.element.textContent === 'b');
+      assert(struct.children.title.element === struct.element.firstChild);
+      assert(struct.children.title.children === 'b');
+      struct.children.title.children = 'c';
+      assert(struct.children.title.element.textContent === 'c');
+      assert(struct.children.title.element === struct.element.firstChild);
+      assert(struct.children.title.children === 'c');
+    });
+
+    it('struct with factory', function () {
+      const dom = TypedHTML.article({}, () => {
+        const el = document.createElement('article');
+        el.id = 'test';
+        return el;
+      });
+      assert(dom.element.id === 'test');
+      assert.deepStrictEqual(dom.children, {});
+    });
+
+    it('attr', function () {
+      const dom = TypedHTML.div({ id: 'test', class: 'test' });
+      assert(dom.element.id === 'test');
+      assert(dom.element.getAttribute('class') === 'test');
+      assert.deepStrictEqual(dom.children, void 0);
+    });
+
+    it('attr with factory', function () {
+      const dom = TypedHTML.div({ id: 'test' }, () => {
+        const el = document.createElement('div');
+        el.id = 'test';
+        el.className = 'test';
+        return el;
+      });
+      assert(dom.element.id === 'test');
+      assert(dom.element.className === 'test');
+      assert.deepStrictEqual(dom.children, void 0);
+    });
+
+    it('attr with text', function () {
+      const dom = TypedHTML.div({ id: 'test', class: 'test' }, '');
+      assert(dom.element.id === 'test');
+      assert(dom.element.getAttribute('class') === 'test');
+      assert.deepStrictEqual(dom.children, '');
+    });
+
+    it('attr with collection', function () {
+      const dom = TypedHTML.div({ id: 'test', class: 'test' }, []);
+      assert(dom.element.id === 'test');
+      assert(dom.element.getAttribute('class') === 'test');
+      assert.deepStrictEqual(dom.children, []);
+    });
+
+    it('attr with struct', function () {
+      const dom = TypedHTML.div({ id: 'test', class: 'test' }, {});
+      assert(dom.element.id === 'test');
+      assert(dom.element.getAttribute('class') === 'test');
+      assert.deepStrictEqual(dom.children, {});
+    });
+
+    it('attr with text and factory', function () {
+      const dom = TypedHTML.div({ id: 'test' }, '', () => {
+        const el = document.createElement('div');
+        el.id = 'test';
+        el.className = 'test';
+        return el;
+      });
+      assert(dom.element.id === 'test');
+      assert(dom.element.className === 'test');
+      assert.deepStrictEqual(dom.children, '');
+    });
+
+    it('attr with collection and factory', function () {
+      const dom = TypedHTML.div({ id: 'test' }, [], () => {
+        const el = document.createElement('div');
+        el.id = 'test';
+        el.className = 'test';
+        return el;
+      });
+      assert(dom.element.id === 'test');
+      assert(dom.element.className === 'test');
+      assert.deepStrictEqual(dom.children, []);
+    });
+
+    it('attr with struct and factory', function () {
+      const dom = TypedHTML.div({ id: 'test' }, {}, () => {
+        const el = document.createElement('div');
+        el.id = 'test';
+        el.className = 'test';
+        return el;
+      });
+      assert(dom.element.id === 'test');
+      assert(dom.element.className === 'test');
+      assert.deepStrictEqual(dom.children, {});
+    });
+
+    it('sanitize', function () {
+      const dom = TypedHTML.div('<script>');
+      assert(dom.element.innerHTML === '&lt;script&gt;');
+      assert(dom.children === '<script>');
+      dom.children = '<script>';
+      assert(dom.element.innerHTML === '&lt;script&gt;');
+      assert(dom.children === '<script>');
+    });
+
+    it('scope', function () {
+      const template = `$scope {}\n  $scope {}`;
+      const result = `#test {}\n#test {}`;
+      assert(TypedHTML.div({ id: 'test' }, [TypedHTML.style(template)]).children[0].element.innerHTML === result);
+      assert(TypedHTML.div({ id: 'test' }, { style: TypedHTML.style(template) }).children.style.element.innerHTML === result);
+      assert(TypedHTML.div({ id: 'test' }, [TypedHTML.style(`<script>`)]).children[0].element.children.length === 0);
+      assert(TypedHTML.div({ id: '><script>' }, [TypedHTML.style(template)]).children[0].element.innerHTML === template);
+    });
+
   });
@@ -200,0 +271,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

92539

increased by5.47%

Lines of code

1482

increased by7.08%

Number of lines in readme file

137

increased by1.48%

No dependency changes