typed-dom - npm Package Compare versions

Comparing version 0.0.14 to 0.0.15

dist/typed-dom.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.14 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | MIT License */
+/*! typed-dom v0.0.15 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | MIT License */
 require = function e(t, n, r) {
@@ -42,20 +42,47 @@ function s(o, u) {
             function build(factory, attrs, contents) {
-                if (contents === void 0) {
-                    contents = [];
+                var raw = factory();
+                if (contents === void 0)
+                    return Object.freeze({
+                        raw: raw,
+                        contents: contents
+                    });
+                var mode = typeof contents === 'string' ? 'text' : Array.isArray(contents) ? 'array' : 'object';
+                switch (mode) {
+                case 'text':
+                    contents = document.createTextNode(contents);
+                    void raw.appendChild(contents);
+                    break;
+                default:
+                    void Object.keys(attrs).forEach(function (name) {
+                        return raw.setAttribute(name, attrs[name] || '');
+                    });
+                    void Object.keys(contents).forEach(function (k) {
+                        return void raw.appendChild(contents[k].raw);
+                    });
+                    switch (mode) {
+                    case 'array':
+                        void Object.freeze(contents);
+                        break;
+                    case 'object':
+                        void observe(contents);
+                        break;
+                    }
                 }
-                var raw = factory();
-                void Object.keys(attrs).forEach(function (name) {
-                    return raw.setAttribute(name, attrs[name] || '');
-                });
-                void Object.keys(contents).forEach(function (k) {
-                    return void raw.appendChild(contents[k].raw || document.createTextNode(contents[k]));
-                });
-                contents = Array.isArray(contents) ? Object.freeze(contents) : observe(contents);
                 return Object.freeze({
                     raw: raw,
                     get contents() {
-                        return contents;
+                        switch (mode) {
+                        case 'text':
+                            return contents.data;
+                        default:
+                            return contents;
+                        }
                     },
                     set contents(cs) {
-                        if (Array.isArray(contents)) {
+                        switch (mode) {
+                        case 'text':
+                            contents.data = cs;
+                            cs = contents;
+                            break;
+                        case 'array':
                             cs = Object.freeze(cs);
@@ -69,3 +96,3 @@ void cs.reduce(function (os, n) {
                             }, contents.slice()).map(function (a) {
-                                return a.raw || document.createTextNode(a);
+                                return a.raw;
                             }).forEach(function (a) {
@@ -75,7 +102,8 @@ return void a.remove();
                             void cs.map(function (a) {
-                                return a.raw || document.createTextNode(a);
+                                return a.raw;
                             }).forEach(function (c) {
                                 return void raw.appendChild(c);
                             });
-                        } else {
+                            break;
+                        case 'object':
                             void Object.keys(cs).forEach(function (k) {
@@ -85,2 +113,3 @@ return void raw.replaceChild(cs[k].raw, contents[k].raw);
                             cs = observe(cs);
+                            break;
                         }
@@ -87,0 +116,0 @@ contents = cs;

dist/typed-dom.min.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.14 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | MIT License */
-require=function e(t,r,n){function o(u,c){if(!r[u]){if(!t[u]){var a="function"==typeof require&&require;if(!c&&a)return a(u,!0);if(i)return i(u,!0);var d=new Error("Cannot find module '"+u+"'");throw d.code="MODULE_NOT_FOUND",d}var f=r[u]={exports:{}};t[u][0].call(f.exports,function(e){var r=t[u][1][e];return o(r?r:e)},f,f.exports,e,t,r,n)}return r[u].exports}for(var i="function"==typeof require&&require,u=0;u<n.length;u++)o(n[u]);return o}({1:[function(e,t,r){},{}],2:[function(e,t,r){arguments[4][1][0].apply(r,arguments)},{dup:1}],3:[function(e,t,r){"use strict";function n(e,t,r){function n(e){var t={};return Object.keys(e).reduce(function(e,r){return t[r]=e[r],Object.defineProperty(e,r,{get:function(){return t[r]},set:function(e){var n=t[r];t[r]=e,o.replaceChild(e.raw,n.raw)}}),e},e)}void 0===r&&(r=[]);var o=e();return void Object.keys(t).forEach(function(e){return o.setAttribute(e,t[e]||"")}),void Object.keys(r).forEach(function(e){return void o.appendChild(r[e].raw||document.createTextNode(r[e]))}),r=Array.isArray(r)?Object.freeze(r):n(r),Object.freeze({raw:o,get contents(){return r},set contents(e){Array.isArray(r)?(e=Object.freeze(e),void e.reduce(function(e,t){var r=e.indexOf(t);return r===-1?e:(void e.splice(r,1),e)},r.slice()).map(function(e){return e.raw||document.createTextNode(e)}).forEach(function(e){return void e.remove()}),void e.map(function(e){return e.raw||document.createTextNode(e)}).forEach(function(e){return void o.appendChild(e)})):(void Object.keys(e).forEach(function(t){return void o.replaceChild(e[t].raw,r[t].raw)}),e=n(e)),r=e}})}r.build=n},{}],4:[function(e,t,r){"use strict";var n=e("./builder");r.TypedHTML=["a","abbr","acronym","address","applet","area","article","aside","audio","b","base","basefont","bdo","big","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","datalist","dd","del","dfn","dir","div","dl","dt","em","embed","fieldset","figcaption","figure","font","footer","form","frame","frameset","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","isindex","kbd","keygen","label","legend","li","link","listing","map","mark","marquee","menu","meta","nav","nextid","nobr","noframes","noscript","object","ol","optgroup","option","p","param","picture","plaintext","pre","progress","q","rt","ruby","s","samp","script","section","select","small","source","span","strike","strong","style","sub","sup","table","tbody","td","template","textarea","tfoot","th","thead","title","tr","track","tt","u","ul","var","video","wbr","xmp","custom"].reduce(function(e,t){return e[t]=function(e,r,o){return r&&"function"!=typeof r||(o=r,r=e,e={}),n.build(o||function(){return document.createElement(t)},e,r)},e},{})},{"./builder":3}],5:[function(e,t,r){"use strict";var n=e("./dom/html");r.default=n.TypedHTML},{"./dom/html":4}],6:[function(e,t,r){arguments[4][1][0].apply(r,arguments)},{dup:1}],"typed-dom":[function(e,t,r){"use strict";function n(e){for(var t in e)r.hasOwnProperty(t)||(r[t]=e[t])}n(e("./src/export"));var o=e("./src/export");r.default=o.default,r.__esModule=!0},{"./src/export":5}]},{},[1,2,6,"typed-dom"]);
+/*! typed-dom v0.0.15 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | MIT License */
+require=function e(t,r,n){function o(a,c){if(!r[a]){if(!t[a]){var u="function"==typeof require&&require;if(!c&&u)return u(a,!0);if(i)return i(a,!0);var d=new Error("Cannot find module '"+a+"'");throw d.code="MODULE_NOT_FOUND",d}var f=r[a]={exports:{}};t[a][0].call(f.exports,function(e){var r=t[a][1][e];return o(r?r:e)},f,f.exports,e,t,r,n)}return r[a].exports}for(var i="function"==typeof require&&require,a=0;a<n.length;a++)o(n[a]);return o}({1:[function(e,t,r){},{}],2:[function(e,t,r){arguments[4][1][0].apply(r,arguments)},{dup:1}],3:[function(e,t,r){"use strict";function n(e,t,r){function n(e){var t={};return Object.keys(e).reduce(function(e,r){return t[r]=e[r],Object.defineProperty(e,r,{get:function(){return t[r]},set:function(e){var n=t[r];t[r]=e,o.replaceChild(e.raw,n.raw)}}),e},e)}var o=e();if(void 0===r)return Object.freeze({raw:o,contents:r});var i="string"==typeof r?"text":Array.isArray(r)?"array":"object";switch(i){case"text":r=document.createTextNode(r),void o.appendChild(r);break;default:switch(void Object.keys(t).forEach(function(e){return o.setAttribute(e,t[e]||"")}),void Object.keys(r).forEach(function(e){return void o.appendChild(r[e].raw)}),i){case"array":void Object.freeze(r);break;case"object":void n(r)}}return Object.freeze({raw:o,get contents(){switch(i){case"text":return r.data;default:return r}},set contents(e){switch(i){case"text":r.data=e,e=r;break;case"array":e=Object.freeze(e),void e.reduce(function(e,t){var r=e.indexOf(t);return r===-1?e:(void e.splice(r,1),e)},r.slice()).map(function(e){return e.raw}).forEach(function(e){return void e.remove()}),void e.map(function(e){return e.raw}).forEach(function(e){return void o.appendChild(e)});break;case"object":void Object.keys(e).forEach(function(t){return void o.replaceChild(e[t].raw,r[t].raw)}),e=n(e)}r=e}})}r.build=n},{}],4:[function(e,t,r){"use strict";var n=e("./builder");r.TypedHTML=["a","abbr","acronym","address","applet","area","article","aside","audio","b","base","basefont","bdo","big","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","datalist","dd","del","dfn","dir","div","dl","dt","em","embed","fieldset","figcaption","figure","font","footer","form","frame","frameset","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","isindex","kbd","keygen","label","legend","li","link","listing","map","mark","marquee","menu","meta","nav","nextid","nobr","noframes","noscript","object","ol","optgroup","option","p","param","picture","plaintext","pre","progress","q","rt","ruby","s","samp","script","section","select","small","source","span","strike","strong","style","sub","sup","table","tbody","td","template","textarea","tfoot","th","thead","title","tr","track","tt","u","ul","var","video","wbr","xmp","custom"].reduce(function(e,t){return e[t]=function(e,r,o){return r&&"function"!=typeof r||(o=r,r=e,e={}),n.build(o||function(){return document.createElement(t)},e,r)},e},{})},{"./builder":3}],5:[function(e,t,r){"use strict";var n=e("./dom/html");r.default=n.TypedHTML},{"./dom/html":4}],6:[function(e,t,r){arguments[4][1][0].apply(r,arguments)},{dup:1}],"typed-dom":[function(e,t,r){"use strict";function n(e){for(var t in e)r.hasOwnProperty(t)||(r[t]=e[t])}n(e("./src/export"));var o=e("./src/export");r.default=o.default,r.__esModule=!0},{"./src/export":5}]},{},[1,2,6,"typed-dom"]);

package.json

 {
   "name": "typed-dom",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "Static typed html dom builder.",
@@ -5,0 +5,0 @@ "private": false,

README.md

@@ -11,6 +11,6 @@ # typed-dom
 const component = TypedHTML.article({
-  title: TypedHTML.h1(['title']),
+  title: TypedHTML.h1('title'),
   content: TypedHTML.ul([
-    TypedHTML.li(['item']),
-    TypedHTML.li(['item']),
+    TypedHTML.li('item'),
+    TypedHTML.li('item'),
   ])
@@ -22,4 +22,6 @@ });
 assert(component.contents.title.raw.outerHTML === '<h1>title</h1>');
+assert(component.contents.title.contents === 'title');
 assert(component.contents.content.raw.nodeName === 'UL');
 assert(component.contents.content.raw.outerHTML === '<ul><li>item</li><li>item</li></ul>');
+assert(component.contents.content[0].contents === 'item');
 ```

src/dom/builder.ts

@@ -5,40 +5,74 @@ import { TypedHTML, TypedHTMLContents } from 'typed-dom';
   <S extends string, T extends HTMLElement, U extends TypedHTMLContents<HTMLElement>>
-  (factory: () => T, attrs: {}, contents: U = <U>[])
+  (factory: () => T, attrs: {}, contents: U)
   : TypedHTML<S, T, U> {
   const raw = factory();
-  void Object.keys(attrs)
-    .forEach(name => raw.setAttribute(name, attrs[name] || ''));
-  void Object.keys(contents)
-    .forEach(k => void raw.appendChild(contents[k].raw || document.createTextNode(contents[k])));
-  contents = Array.isArray(contents)
-    // https://github.com/Microsoft/TypeScript/issues/8563
-    ? <U>Object.freeze(contents)
-    : observe(contents);
+  if (contents === void 0) return <TypedHTML<S, T, U>>Object.freeze({
+    raw,
+    contents: <U>contents
+  });
+  const mode = typeof contents === 'string'
+    ? 'text'
+    : Array.isArray(contents)
+      ? 'array'
+      : 'object';
+  switch (mode) {
+    case 'text':
+      contents = <any>document.createTextNode(<string>contents)
+      void raw.appendChild(<Text><any>contents);
+      break;
+    default:
+      void Object.keys(attrs)
+        .forEach(name => raw.setAttribute(name, attrs[name] || ''));
+      void Object.keys(contents)
+        .forEach(k => void raw.appendChild(contents[k].raw));
+      switch (mode) {
+        case 'array':
+          void Object.freeze(contents);
+          break;
+        case 'object':
+          void observe(contents);
+          break;
+      }
+  }
   return <TypedHTML<S, T, U>>Object.freeze({
     raw,
     get contents(): U {
-      return contents;
+      switch (mode) {
+        case 'text':
+          return <U>(<Text><any>contents).data;
+        default:
+          return contents;
+      }
     },
     set contents(cs) {
-      if (Array.isArray(contents)) {
-        cs = Object.freeze(cs);
-        void (<Array<TypedHTML<string, T, any> | string>>cs)
-          .reduce<Array<TypedHTML<string, T, any> | string>>((os, n) => {
-            const i = os.indexOf(n);
-            if (i === -1) return os;
-            void os.splice(i, 1);
-            return os;
-          }, contents.slice())
-          .map(a => (<TypedHTML<string, T, any>>a).raw || document.createTextNode(<string>a))
-          .forEach(a =>
-            void a.remove());
-        void (<Array<TypedHTML<string, T, any> | string>>cs)
-          .map(a => (<TypedHTML<string, T, any>>a).raw || document.createTextNode(<string>a))
-          .forEach(c => void raw.appendChild(c));
+      switch (mode) {
+        case 'text':
+          (<Text><any>contents).data = <string>cs;
+          cs = contents;
+          break;
+
+        case 'array':
+          cs = <U>Object.freeze(cs);
+          void (<TypedHTML<string, T, any>[]><any>cs)
+            .reduce<TypedHTML<string, T, any>[]>((os, n) => {
+              const i = os.indexOf(n);
+              if (i === -1) return os;
+              void os.splice(i, 1);
+              return os;
+            }, (<TypedHTML<string, T, any>[]><any>contents).slice())
+            .map(a => (<TypedHTML<string, T, any>>a).raw)
+            .forEach(a =>
+              void a.remove());
+          void (<TypedHTML<string, T, any>[]><any>cs)
+            .map(a => (<TypedHTML<string, T, any>>a).raw)
+            .forEach(c => void raw.appendChild(c));
+          break;
+
+        case 'object':
+          void Object.keys(cs)
+            .forEach(k => void raw.replaceChild(cs[k].raw, contents[k].raw));
+          cs = observe(cs);
+          break;
+
       }
-      else {
-        void Object.keys(cs)
-          .forEach(k => void raw.replaceChild(cs[k].raw, contents[k].raw));
-        cs = observe(cs);
-      }
       contents = cs;
@@ -45,0 +79,0 @@ }

src/dom/html.ts

@@ -134,3 +134,3 @@ import { TypedHTML as ITypedHTML, TypedHTMLContents } from 'typed-dom';
       <T extends TypedHTMLContents<HTMLElement>>
-        (attrs: { [name: string]: string; }, contents?: T, factory?: () => HTMLElement)
+        (attrs: { [name: string]: string; }, contents: T, factory?: () => HTMLElement)
         : TypedHTML<string, HTMLElement, T> => {
@@ -137,0 +137,0 @@ if (!contents || typeof contents === 'function') {

test/integration/typedhtml.ts

@@ -44,8 +44,23 @@ import { Sequence } from 'spica';
 
+    it('sanitize', function () {
+      const dom = TypedHTML.div('<script>');
+      assert(dom.raw.innerHTML === '&lt;script&gt;');
+      assert(dom.contents === '<script>');
+      dom.contents = '<script>';
+      assert(dom.raw.innerHTML === '&lt;script&gt;');
+      assert(dom.contents === '<script>');
+    });
+
+    it('empty', function () {
+      const empty = TypedHTML.div();
+      assert(empty.raw.outerHTML === '<div></div>');
+      assert(empty.contents === void 0);
+    });
+
     it('struct', function () {
       const struct = TypedHTML.article({
-        title: TypedHTML.h1(['<text>']),
+        title: TypedHTML.h1('title'),
         content: TypedHTML.p([TypedHTML.a()])
       });
-      assert(struct.raw.outerHTML === '<article><h1>&lt;text&gt;</h1><p><a></a></p></article>');
+      assert(struct.raw.outerHTML === '<article><h1>title</h1><p><a></a></p></article>');
       assert(struct.contents.title.raw === struct.raw.firstChild);
@@ -57,9 +72,10 @@ assert(struct.contents.content.raw === struct.raw.lastChild);
       const struct = TypedHTML.article({
-        title: TypedHTML.h1(['a'])
+        title: TypedHTML.h1<string>('a')
       });
       struct.contents = {
-        title: TypedHTML.h1(['b'])
+        title: TypedHTML.h1('b')
       };
       assert(struct.contents.title.raw.textContent === 'b');
       assert(struct.contents.title.raw === struct.raw.firstChild);
+      assert(struct.contents.title.contents === 'b');
     });
@@ -69,7 +85,12 @@
       const struct = TypedHTML.article({
-        title: TypedHTML.h1(['a'])
+        title: TypedHTML.h1<string>('a')
       });
-      struct.contents.title = TypedHTML.h1(['b']);
+      struct.contents.title = TypedHTML.h1('b');
       assert(struct.contents.title.raw.textContent === 'b');
       assert(struct.contents.title.raw === struct.raw.firstChild);
+      assert(struct.contents.title.contents === 'b');
+      struct.contents.title.contents = 'c';
+      assert(struct.contents.title.raw.textContent === 'c');
+      assert(struct.contents.title.raw === struct.raw.firstChild);
+      assert(struct.contents.title.contents === 'c');
     });
@@ -79,4 +100,4 @@
       const collection = TypedHTML.ul([
-        TypedHTML.li(['1']),
-        TypedHTML.li(['2'])
+        TypedHTML.li('1'),
+        TypedHTML.li('2')
       ]);
@@ -83,0 +104,0 @@ assert(collection.raw.outerHTML === '<ul><li>1</li><li>2</li></ul>');

typed-dom.d.ts

@@ -16,5 +16,5 @@ /**
   }
-  export type TypedHTMLContents<T extends HTMLElement> = never[] | string[] | TypedHTML<string, T, any>[] | { [name: string]: TypedHTML<string, T, any>; };
+  export type TypedHTMLContents<T extends HTMLElement> = never | string | TypedHTML<string, T, any>[] | { [name: string]: TypedHTML<string, T, any>; };
   interface TypedHTMLBuilder<T extends HTMLElement, S extends string> {
-    (): TypedHTML<S, T, never[]>;
+    (): TypedHTML<S, T, never>;
     <U extends TypedHTMLContents<HTMLElement>>(contents: U, factory?: () => T): TypedHTML<S, T, U>;
@@ -21,0 +21,0 @@ <U extends TypedHTMLContents<HTMLElement>>(attrs: { [name: string]: string; }, contents: U, factory?: () => T): TypedHTML<S, T, U>;

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

41979

increased by7.18%

Lines of code

1103

increased by7.71%

Number of lines in readme file

26

increased by8.33%

No dependency changes