typed-dom - npm Package Compare versions

Comparing version 0.0.20 to 0.0.21

dist/typed-dom.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.20 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | MIT License */
+/*! typed-dom v0.0.21 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | MIT License */
 require = function e(t, n, r) {
@@ -41,97 +41,98 @@ function s(o, u) {
             'use strict';
-            function build(factory, attrs, children) {
-                var element = factory();
-                if (children === void 0)
-                    return Object.freeze({
-                        element: element,
-                        children: children
-                    });
-                var mode = typeof children === 'string' ? 'text' : Array.isArray(children) ? 'array' : 'object';
-                switch (mode) {
-                case 'text':
-                    children = document.createTextNode(children);
-                    void element.appendChild(children);
-                    break;
-                default:
-                    void Object.keys(attrs).forEach(function (name) {
-                        return void element.setAttribute(name, attrs[name] || '');
-                    });
-                    void Object.keys(children).forEach(function (k) {
-                        return void element.appendChild(children[k].element);
-                    });
+            var TypedHTMLElement = function () {
+                function TypedHTMLElement(element, children) {
+                    this.element = element;
+                    if (children === void 0) {
+                        void Object.freeze(this);
+                        return;
+                    }
+                    var mode = typeof children === 'string' ? 'text' : Array.isArray(children) ? 'collection' : 'struct';
                     switch (mode) {
-                    case 'array':
-                        void Object.freeze(children);
+                    case 'text':
+                        children = document.createTextNode(children);
+                        void element.appendChild(children);
                         break;
-                    case 'object':
-                        void observe(children);
-                        break;
-                    }
-                }
-                return Object.freeze({
-                    element: element,
-                    get children() {
+                    default:
+                        void Object.keys(children).forEach(function (k) {
+                            return void element.appendChild(children[k].element);
+                        });
                         switch (mode) {
-                        case 'text':
-                            return children.data;
-                        default:
-                            return children;
-                        }
-                    },
-                    set children(cs) {
-                        switch (mode) {
-                        case 'text':
-                            children.data = cs;
-                            cs = children;
+                        case 'collection':
+                            void Object.freeze(children);
                             break;
-                        case 'array':
-                            cs = Object.freeze(cs);
-                            void cs.reduce(function (os, n) {
-                                var i = os.indexOf(n);
-                                if (i === -1)
-                                    return os;
-                                void os.splice(i, 1);
-                                return os;
-                            }, children.slice()).forEach(function (_a) {
-                                var child = _a.element;
-                                return void child.remove();
-                            });
-                            void cs.forEach(function (_a) {
-                                var child = _a.element;
-                                return void element.appendChild(child);
-                            });
+                        case 'struct':
+                            void observe(element, children);
                             break;
-                        case 'object':
-                            void Object.keys(children).filter(function (k) {
-                                return cs[k].element !== children[k].element;
-                            }).forEach(function (k) {
-                                return void element.replaceChild(cs[k].element, children[k].element);
-                            });
-                            cs = observe(cs);
-                            break;
                         }
-                        children = cs;
                     }
-                });
-                function observe(children) {
-                    var cache = {};
-                    return Object.keys(children).reduce(function (children, k) {
-                        cache[k] = children[k];
-                        Object.defineProperty(children, k, {
+                    Object.defineProperties(this, {
+                        children: {
                             get: function () {
-                                return cache[k];
+                                switch (mode) {
+                                case 'text':
+                                    return children.data;
+                                default:
+                                    return children;
+                                }
                             },
-                            set: function (newElt) {
-                                var oldElt = cache[k];
-                                cache[k] = newElt;
-                                if (newElt.element === oldElt.element)
-                                    return;
-                                void element.replaceChild(newElt.element, oldElt.element);
+                            set: function (cs) {
+                                switch (mode) {
+                                case 'text':
+                                    children.data = cs;
+                                    cs = children;
+                                    break;
+                                case 'collection':
+                                    cs = Object.freeze(cs);
+                                    void cs.reduce(function (os, n) {
+                                        var i = os.indexOf(n);
+                                        if (i === -1)
+                                            return os;
+                                        void os.splice(i, 1);
+                                        return os;
+                                    }, children.slice()).forEach(function (_a) {
+                                        var child = _a.element;
+                                        return void child.remove();
+                                    });
+                                    void cs.forEach(function (_a) {
+                                        var child = _a.element;
+                                        return void element.appendChild(child);
+                                    });
+                                    break;
+                                case 'struct':
+                                    void Object.keys(children).filter(function (k) {
+                                        return cs[k].element !== children[k].element;
+                                    }).forEach(function (k) {
+                                        return void element.replaceChild(cs[k].element, children[k].element);
+                                    });
+                                    cs = observe(element, cs);
+                                    break;
+                                }
+                                children = cs;
                             }
-                        });
-                        return children;
-                    }, children);
+                        }
+                    });
+                    void Object.freeze(this);
                 }
+                return TypedHTMLElement;
+            }();
+            exports.TypedHTMLElement = TypedHTMLElement;
+            function observe(element, children) {
+                var cache = {};
+                return Object.keys(children).reduce(function (children, k) {
+                    cache[k] = children[k];
+                    Object.defineProperty(children, k, {
+                        get: function () {
+                            return cache[k];
+                        },
+                        set: function (newElt) {
+                            var oldElt = cache[k];
+                            cache[k] = newElt;
+                            if (newElt.element === oldElt.element)
+                                return;
+                            void element.replaceChild(newElt.element, oldElt.element);
+                        }
+                    });
+                    return children;
+                }, children);
             }
-            exports.build = build;
         },
@@ -270,9 +271,15 @@ {}
                 return obj[tag] = function (attrs, children, factory) {
-                    return !attrs || !children || typeof children === 'function' ? builder_1.build(children || function () {
+                    return !attrs || !children || typeof children === 'function' ? new builder_1.TypedHTMLElement((children || function () {
                         return document.createElement(tag);
-                    }, {}, attrs) : builder_1.build(factory || function () {
+                    })(), attrs) : new builder_1.TypedHTMLElement(attribute(attrs, (factory || function () {
                         return document.createElement(tag);
-                    }, attrs, children);
+                    })()), children);
                 }, obj;
             }, {});
+            function attribute(attrs, element) {
+                void Object.keys(attrs).forEach(function (name) {
+                    return void element.setAttribute(name, attrs[name] || '');
+                });
+                return element;
+            }
         },
@@ -279,0 +286,0 @@ { './builder': 3 }

dist/typed-dom.min.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.20 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | MIT License */
-require=function e(t,r,n){function o(c,a){if(!r[c]){if(!t[c]){var u="function"==typeof require&&require;if(!a&&u)return u(c,!0);if(i)return i(c,!0);var d=new Error("Cannot find module '"+c+"'");throw d.code="MODULE_NOT_FOUND",d}var f=r[c]={exports:{}};t[c][0].call(f.exports,function(e){var r=t[c][1][e];return o(r?r:e)},f,f.exports,e,t,r,n)}return r[c].exports}for(var i="function"==typeof require&&require,c=0;c<n.length;c++)o(n[c]);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,e.element!==n.element&&void o.replaceChild(e.element,n.element)}}),e},e)}var o=e();if(void 0===r)return Object.freeze({element:o,children: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 void o.setAttribute(e,t[e]||"")}),void Object.keys(r).forEach(function(e){return void o.appendChild(r[e].element)}),i){case"array":void Object.freeze(r);break;case"object":void n(r)}}return Object.freeze({element:o,get children(){switch(i){case"text":return r.data;default:return r}},set children(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()).forEach(function(e){var t=e.element;return void t.remove()}),void e.forEach(function(e){var t=e.element;return void o.appendChild(t)});break;case"object":void Object.keys(r).filter(function(t){return e[t].element!==r[t].element}).forEach(function(t){return void o.replaceChild(e[t].element,r[t].element)}),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","meter","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 e&&r&&"function"!=typeof r?n.build(o||function(){return document.createElement(t)},e,r):n.build(r||function(){return document.createElement(t)},{},e)},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.21 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | MIT License */
+require=function e(t,r,n){function i(c,u){if(!r[c]){if(!t[c]){var a="function"==typeof require&&require;if(!u&&a)return a(c,!0);if(o)return o(c,!0);var d=new Error("Cannot find module '"+c+"'");throw d.code="MODULE_NOT_FOUND",d}var f=r[c]={exports:{}};t[c][0].call(f.exports,function(e){var r=t[c][1][e];return i(r?r:e)},f,f.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){arguments[4][1][0].apply(r,arguments)},{dup:1}],3:[function(e,t,r){"use strict";function n(e,t){var r={};return Object.keys(t).reduce(function(t,n){return r[n]=t[n],Object.defineProperty(t,n,{get:function(){return r[n]},set:function(t){var i=r[n];r[n]=t,t.element!==i.element&&void e.replaceChild(t.element,i.element)}}),t},t)}var i=function(){function e(e,t){if(this.element=e,void 0===t)return void void Object.freeze(this);var r="string"==typeof t?"text":Array.isArray(t)?"collection":"struct";switch(r){case"text":t=document.createTextNode(t),void e.appendChild(t);break;default:switch(void Object.keys(t).forEach(function(r){return void e.appendChild(t[r].element)}),r){case"collection":void Object.freeze(t);break;case"struct":void n(e,t)}}Object.defineProperties(this,{children:{get:function(){switch(r){case"text":return t.data;default:return t}},set:function(i){switch(r){case"text":t.data=i,i=t;break;case"collection":i=Object.freeze(i),void i.reduce(function(e,t){var r=e.indexOf(t);return r===-1?e:(void e.splice(r,1),e)},t.slice()).forEach(function(e){var t=e.element;return void t.remove()}),void i.forEach(function(t){var r=t.element;return void e.appendChild(r)});break;case"struct":void Object.keys(t).filter(function(e){return i[e].element!==t[e].element}).forEach(function(r){return void e.replaceChild(i[r].element,t[r].element)}),i=n(e,i)}t=i}}}),void Object.freeze(this)}return e}();r.TypedHTMLElement=i},{}],4:[function(e,t,r){"use strict";function n(e,t){return void Object.keys(e).forEach(function(r){return void t.setAttribute(r,e[r]||"")}),t}var i=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","meter","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 e&&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":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 i=e("./src/export");r.default=i.default,r.__esModule=!0},{"./src/export":5}]},{},[1,2,6,"typed-dom"]);

package.json

 {
   "name": "typed-dom",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "Static typed dom component builder.",
@@ -5,0 +5,0 @@ "private": false,

README.md

@@ -13,5 +13,5 @@ # typed-dom
 
-## Example
+## Usage
 
-Create a dom component.
+Build a typed dom object.
 
@@ -89,1 +89,47 @@ ```ts
 ```
+
+## Example
+
+### Micro DOM Component
+
+Use micro dom components to hide and manage the typed dom object.
+
+```ts
+import TypedHTML from 'typed-dom';
+
+class MicroComponent {
+  constructor(private parent: HTMLElement) {
+    parent.appendChild(this.dom.element);
+  }
+  private id = this.parent.id;
+  private dom = TypedHTML.article({ id: this.id }, {
+    content: TypedHTML.ul([
+      TypedHTML.li(`item`)
+    ])
+  });
+  destroy() {
+    this.dom.element.remove();
+  }
+}
+```
+
+### DOM Component
+
+Use dom components to manage the micro dom components.
+
+```ts
+import TypedHTML from 'typed-dom';
+
+class Component {
+  constructor(private parent: HTMLElement) {
+    parent.appendChild(this.element);
+  }
+  private element = document.createElement('div');
+  private children = {
+    todo: new MicroComponent(this.element)
+  };
+  destroy() {
+    this.element.remove();
+  }
+}
+```

src/dom/builder.ts

@@ -1,104 +0,116 @@
-import { TypedHTMLElement, TypedHTMLElementChildren } from 'typed-dom';
+import { TypedHTMLElement as ITHTML, TypedHTMLElementChildren } from 'typed-dom';
 
-export function build
-  <T extends string, E extends HTMLElement, C extends TypedHTMLElementChildren<HTMLElement>>
-  (factory: () => E, attrs: {}, children: C)
-  : TypedHTMLElement<T, E, C> {
-  const element = factory();
-  if (children === void 0) return <TypedHTMLElement<T, E, C>>Object.freeze({
-    element,
-    children: <C>children
-  });
-  const mode = typeof children === 'string'
-    ? 'text'
-    : Array.isArray(children)
-      ? 'array'
-      : 'object';
-  switch (mode) {
-    case 'text':
-      children = <any>document.createTextNode(<string>children)
-      void element.appendChild(<Text><any>children);
-      break;
-    default:
-      void Object.keys(attrs)
-        .forEach(name =>
-          void element.setAttribute(name, attrs[name] || ''));
-      void Object.keys(children)
-        .forEach(k =>
-          void element.appendChild(children[k].element));
-      switch (mode) {
-        case 'array':
-          void Object.freeze(children);
-          break;
-        case 'object':
-          void observe(<{ [name: string]: TypedHTMLElement<string, HTMLElement, any>; }>children);
-          break;
-      }
-  }
-  return <TypedHTMLElement<T, E, C>>Object.freeze({
-    element,
-    get children(): C {
-      switch (mode) {
-        case 'text':
-          return <C>(<Text><any>children).data;
-        default:
-          return children;
-      }
-    },
-    set children(cs) {
-      switch (mode) {
-        case 'text':
-          (<Text><any>children).data = <string>cs;
-          cs = children;
-          break;
+export interface TypedHTMLElement<
+  T extends string,
+  E extends HTMLElement,
+  C extends TypedHTMLElementChildren,
+  > extends ITHTML<T, E, C> {
+}
+export class TypedHTMLElement<
+  T extends string,
+  E extends HTMLElement,
+  C extends TypedHTMLElementChildren,
+  >
+  implements ITHTML<T, E, C> {
+  constructor(
+    public readonly element: E,
+    children: C
+  ) {
+    if (children === void 0) {
+      void Object.freeze(this);
+      return;
+    }
+    const mode = typeof children === 'string'
+      ? 'text'
+      : Array.isArray(children)
+        ? 'collection'
+        : 'struct';
+    switch (mode) {
+      case 'text':
+        children = <any>document.createTextNode(<string>children)
+        void element.appendChild(<Text><any>children);
+        break;
+      default:
+        void Object.keys(children)
+          .forEach(k =>
+            void element.appendChild(children[k].element));
+        switch (mode) {
+          case 'collection':
+            void Object.freeze(children);
+            break;
+          case 'struct':
+            void observe(element, <{ [name: string]: TypedHTMLElement<string, HTMLElement, any>; }>children);
+            break;
+        }
+    }
+    Object.defineProperties(this, {
+      children: {
+        get(): C {
+          switch (mode) {
+            case 'text':
+              return <C>(<Text><any>children).data;
+            default:
+              return children;
+          }
+        },
+        set(cs) {
+          switch (mode) {
+            case 'text':
+              (<Text><any>children).data = <string>cs;
+              cs = children;
+              break;
 
-        case 'array':
-          cs = <C>Object.freeze(cs);
-          void (<TypedHTMLElement<string, HTMLElement, any>[]>cs)
-            .reduce<TypedHTMLElement<string, HTMLElement, any>[]>((os, n) => {
-              const i = os.indexOf(n);
-              if (i === -1) return os;
-              void os.splice(i, 1);
-              return os;
-            }, (<TypedHTMLElement<string, HTMLElement, any>[]>children).slice())
-            .forEach(({element: child}) =>
-              void child.remove());
-          void (<TypedHTMLElement<string, HTMLElement, any>[]>cs)
-            .forEach(({element: child}) =>
-              void element.appendChild(child));
-          break;
+            case 'collection':
+              cs = <C>Object.freeze(cs);
+              void (<TypedHTMLElement<string, HTMLElement, any>[]>cs)
+                .reduce<TypedHTMLElement<string, HTMLElement, any>[]>((os, n) => {
+                  const i = os.indexOf(n);
+                  if (i === -1) return os;
+                  void os.splice(i, 1);
+                  return os;
+                }, (<TypedHTMLElement<string, HTMLElement, any>[]>children).slice())
+                .forEach(({element: child}) =>
+                  void child.remove());
+              void (<TypedHTMLElement<string, HTMLElement, any>[]>cs)
+                .forEach(({element: child}) =>
+                  void element.appendChild(child));
+              break;
 
-        case 'object':
-          void Object.keys(children)
-            .filter(k =>
-              cs[k].element !== children[k].element)
-            .forEach(k =>
-              void element.replaceChild(cs[k].element, children[k].element));
-          cs = <C>observe(<{ [name: string]: TypedHTMLElement<string, HTMLElement, any>; }>cs);
-          break;
+            case 'struct':
+              void Object.keys(children)
+                .filter(k =>
+                  cs[k].element !== children[k].element)
+                .forEach(k =>
+                  void element.replaceChild(cs[k].element, children[k].element));
+              cs = <C>observe(element, <{ [name: string]: TypedHTMLElement<string, HTMLElement, any>; }>cs);
+              break;
 
+          }
+          children = cs;
+        }
       }
-      children = cs;
-    }
-  });
-
-  function observe<C extends { [name: string]: TypedHTMLElement<string, HTMLElement, any>; }>(children: C): C {
-    const cache: C = <C>{};
-    return Object.keys(children)
-      .reduce((children, k) => {
-        cache[k] = children[k];
-        Object.defineProperty(children, k, {
-          get() {
-            return cache[k];
-          },
-          set(newElt: C[keyof C]) {
-            const oldElt = cache[k];
-            cache[k] = newElt;
-            if (newElt.element === oldElt.element) return;
-            void element.replaceChild(newElt.element, oldElt.element);
-          }
-        });
-        return children;
-      }, children);
+    });
+    void Object.freeze(this);
   }
+  public children: C;
 }
+
+function observe<E extends HTMLElement, C extends { [name: string]: TypedHTMLElement<string, HTMLElement, any>; }>(element: E, children: C): C {
+  const cache: C = <C>{};
+  return Object.keys(children)
+    .reduce((children, k) => {
+      cache[k] = children[k];
+      Object.defineProperty(children, k, {
+        get() {
+          return cache[k];
+        },
+        set(newElt: C[keyof C]) {
+          const oldElt = cache[k];
+          cache[k] = newElt;
+          if (newElt.element === oldElt.element) return;
+          void element.replaceChild(newElt.element, oldElt.element);
+        }
+      });
+      return children;
+    }, children);
+}

src/dom/html.ts

@@ -1,5 +0,5 @@
-import { TypedHTMLElement, TypedHTMLElementChildren } from 'typed-dom';
-import { build } from './builder';
+import { TypedHTMLElementChildren } from 'typed-dom';
+import { TypedHTMLElement } from './builder';
 
-export const TypedHTML: TypedHTMLElement<string, HTMLElement, TypedHTMLElementChildren<HTMLElement>> = [
+export const TypedHTML: TypedHTMLElement<string, HTMLElement, TypedHTMLElementChildren> = [
   // lib.dom.d.ts
@@ -133,9 +133,16 @@ 'a',
     obj[tag] =
-      <T extends TypedHTMLElementChildren<HTMLElement>>
-      (attrs?: { [name: string]: string; }, children?: T, factory?: () => HTMLElement)
-      : TypedHTMLElement<string, HTMLElement, T> =>
+      <C extends TypedHTMLElementChildren>
+      (attrs?: { [name: string]: string; }, children?: C, factory?: () => HTMLElement)
+      : TypedHTMLElement<string, HTMLElement, C> =>
           !attrs || !children || typeof children === 'function'
-            ? build(<any>children || (() => document.createElement(tag)), {}, <T><any>attrs)
-            : build(factory || (() => document.createElement(tag)), attrs, children),
+            ? new TypedHTMLElement((<any>children || (() => document.createElement(tag)))(), <C><any>attrs)
+            : new TypedHTMLElement(attribute(attrs, (factory || (() => document.createElement(tag)))()), children),
     obj
-  ), <TypedHTMLElement<string, HTMLElement, TypedHTMLElementChildren<HTMLElement>>>{});
+  ), <TypedHTMLElement<string, HTMLElement, TypedHTMLElementChildren>>{});
+
+function attribute<E extends HTMLElement>(attrs: { [name: string]: string }, element: E): E {
+  void Object.keys(attrs)
+    .forEach(name =>
+      void element.setAttribute(name, attrs[name] || ''));
+  return element;
+}

typed-dom.d.ts

@@ -14,3 +14,3 @@ /**
     E extends HTMLElement,
-    C extends TypedHTMLElementChildren<HTMLElement>,
+    C extends TypedHTMLElementChildren,
   > extends AbstractTypedHTMLElement<T> {
@@ -20,6 +20,11 @@ readonly element: E;
   }
-  export type TypedHTMLElementChildren<E extends HTMLElement>
-    = string
-    | TypedHTMLElement<string, E, any>[]
-    | { [name: string]: TypedHTMLElement<string, E, any>; };
+  export type TypedHTMLElementChildren
+    = TypedHTMLElementChildren.Text
+    | TypedHTMLElementChildren.Collection
+    | TypedHTMLElementChildren.Struct;
+  export namespace TypedHTMLElementChildren {
+    export type Text = string;
+    export type Collection = TypedHTMLElement<string, HTMLElement, any>[];
+    export type Struct = { [name: string]: TypedHTMLElement<string, HTMLElement, any>; };
+  }
   abstract class AbstractTypedHTMLElement<E extends string> {
@@ -35,7 +40,7 @@ private identifier: E;
     (children: C, factory?: () => E): never;
-    <C extends TypedHTMLElementChildren<HTMLElement>>
+    <C extends TypedHTMLElementChildren>
     (children: C, factory?: () => E): TypedHTMLElement<T, E, C>;
     <C extends string>
     (attrs: { [name: string]: string; }, children: C, factory?: () => E): never;
-    <C extends TypedHTMLElementChildren<HTMLElement>>
+    <C extends TypedHTMLElementChildren>
     (attrs: { [name: string]: string; }, children: C, factory?: () => E): TypedHTMLElement<T, E, C>;
@@ -170,4 +175,4 @@ }
     // custom
-    custom<E extends HTMLElement, T extends string, C extends TypedHTMLElementChildren<HTMLElement>>(children: C, factory: () => E, tag: T): TypedHTMLElement<T, E, C>;
+    custom<E extends HTMLElement, T extends string, C extends TypedHTMLElementChildren>(children: C, factory: () => E, tag: T): TypedHTMLElement<T, E, C>;
   };
 }

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

48861

increased by5.12%

Lines of code

1156

increased by2.66%

Number of lines in readme file

134

increased by52.27%

No dependency changes