typed-dom - npm Package Compare versions

Comparing version 0.0.19 to 0.0.20

dist/typed-dom.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.19 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | MIT License */
+/*! typed-dom v0.0.20 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | MIT License */
 require = function e(t, n, r) {
@@ -104,3 +104,5 @@ function s(o, u) {
                         case 'object':
-                            void Object.keys(children).forEach(function (k) {
+                            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);
@@ -125,3 +127,5 @@ });
                                 cache[k] = newElt;
-                                element.replaceChild(newElt.element, oldElt.element);
+                                if (newElt.element === oldElt.element)
+                                    return;
+                                void element.replaceChild(newElt.element, oldElt.element);
                             }
@@ -128,0 +132,0 @@ });

dist/typed-dom.min.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.19 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,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).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.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"]);

package.json

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

README.md

@@ -9,4 +9,10 @@ # typed-dom
 
+## API
+
 [typed-dom.d.ts](typed-dom.d.ts)
 
+## Example
+
+Create a dom component.
+
 ```ts
@@ -24,3 +30,36 @@ import TypedHTML from 'typed-dom';
 });
+```
 
+Then this component has the following static type generated by type inference.
+
+```ts
+type ComponentTypeIs =
+TypedHTMLElement<"article", HTMLElement, {
+  style: TypedHTMLElement<"style", HTMLStyleElement, string>;
+  title: TypedHTMLElement<"title", HTMLHeadingElement, string>;
+  content: TypedHTMLElement<"ul", HTMLUListElement, TypedHTMLElement<"li", HTMLLIElement, string>[]>;
+}>;
+
+// Note: TypedHTMLElement type is defined as follows in typed-dom.d.ts.
+export interface TypedHTMLElement<
+  T extends string,
+  E extends HTMLElement,
+  C extends TypedHTMLElementChildren<HTMLElement>,
+> extends AbstractTypedHTMLElement<T> {
+  readonly element: E;
+  children: C;
+}
+export type TypedHTMLElementChildren<E extends HTMLElement>
+  = string
+  | TypedHTMLElement<string, E, any>[]
+  | { [name: string]: TypedHTMLElement<string, E, any>; };
+abstract class AbstractTypedHTMLElement<E extends string> {
+  private identifier: E;
+}
+```
+
+You can know the internal structure via this type which can be used as the visualization.
+And you can access and manipulate the internal structure safely guided by this type.
+
+```ts
 // inspect
@@ -27,0 +66,0 @@ component.element.outerHTML; // '<article id="id"><style>#id ul { width: 100px; }</style><h1>title</h1><ul><li>item</li><li>item</li></ul></article>'

src/dom/builder.ts

 import { TypedHTMLElement, TypedHTMLElementChildren } from 'typed-dom';
 
 export function build
-  <S extends string, T extends HTMLElement, U extends TypedHTMLElementChildren<HTMLElement>>
-  (factory: () => T, attrs: {}, children: U)
-  : TypedHTMLElement<S, T, U> {
+  <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<S, T, U>>Object.freeze({
+  if (children === void 0) return <TypedHTMLElement<T, E, C>>Object.freeze({
     element,
-    children: <U>children
+    children: <C>children
   });
@@ -38,8 +38,8 @@ const mode = typeof children === 'string'
   }
-  return <TypedHTMLElement<S, T, U>>Object.freeze({
+  return <TypedHTMLElement<T, E, C>>Object.freeze({
     element,
-    get children(): U {
+    get children(): C {
       switch (mode) {
         case 'text':
-          return <U>(<Text><any>children).data;
+          return <C>(<Text><any>children).data;
         default:
@@ -57,3 +57,3 @@ return children;
         case 'array':
-          cs = <U>Object.freeze(cs);
+          cs = <C>Object.freeze(cs);
           void (<TypedHTMLElement<string, HTMLElement, any>[]>cs)
@@ -75,5 +75,7 @@ .reduce<TypedHTMLElement<string, HTMLElement, any>[]>((os, n) => {
           void Object.keys(children)
+            .filter(k =>
+              cs[k].element !== children[k].element)
             .forEach(k =>
               void element.replaceChild(cs[k].element, children[k].element));
-          cs = <U>observe(<{ [name: string]: TypedHTMLElement<string, HTMLElement, any>; }>cs);
+          cs = <C>observe(<{ [name: string]: TypedHTMLElement<string, HTMLElement, any>; }>cs);
           break;
@@ -86,4 +88,4 @@
 
-  function observe<T extends { [name: string]: TypedHTMLElement<string, HTMLElement, any>; }>(children: T): T {
-    const cache: T = <T>{};
+  function observe<C extends { [name: string]: TypedHTMLElement<string, HTMLElement, any>; }>(children: C): C {
+    const cache: C = <C>{};
     return Object.keys(children)
@@ -96,6 +98,7 @@ .reduce((children, k) => {
           },
-          set(newElt) {
+          set(newElt: C[keyof C]) {
             const oldElt = cache[k];
             cache[k] = newElt;
-            element.replaceChild(newElt.element, oldElt.element);
+            if (newElt.element === oldElt.element) return;
+            void element.replaceChild(newElt.element, oldElt.element);
           }
@@ -102,0 +105,0 @@ });

src/dom/html.ts

@@ -1,6 +0,5 @@
-import { TypedHTMLElement as ITypedHTML, TypedHTMLElementChildren } from 'typed-dom';
+import { TypedHTMLElement, TypedHTMLElementChildren } from 'typed-dom';
 import { build } from './builder';
 
-export type TypedHTML<S extends string, T extends HTMLElement, U extends TypedHTMLElementChildren<HTMLElement>> = ITypedHTML<S, T, U>;
-export const TypedHTML: TypedHTML<string, HTMLElement, TypedHTMLElementChildren<HTMLElement>> = [
+export const TypedHTML: TypedHTMLElement<string, HTMLElement, TypedHTMLElementChildren<HTMLElement>> = [
   // lib.dom.d.ts
@@ -136,3 +135,3 @@ 'a',
       (attrs?: { [name: string]: string; }, children?: T, factory?: () => HTMLElement)
-      : TypedHTML<string, HTMLElement, T> =>
+      : TypedHTMLElement<string, HTMLElement, T> =>
           !attrs || !children || typeof children === 'function'
@@ -142,2 +141,2 @@ ? build(<any>children || (() => document.createElement(tag)), {}, <T><any>attrs)
     obj
-  ), <TypedHTML<string, HTMLElement, TypedHTMLElementChildren<HTMLElement>>>{});
+  ), <TypedHTMLElement<string, HTMLElement, TypedHTMLElementChildren<HTMLElement>>>{});

typed-dom.d.ts

@@ -12,29 +12,29 @@ /**
   export interface TypedHTMLElement<
-    S extends string,
-    T extends HTMLElement,
-    U extends TypedHTMLElementChildren<HTMLElement>,
-  > extends AbstractTypedHTMLElement<S> {
-    readonly element: T;
-    children: U;
+    T extends string,
+    E extends HTMLElement,
+    C extends TypedHTMLElementChildren<HTMLElement>,
+  > extends AbstractTypedHTMLElement<T> {
+    readonly element: E;
+    children: C;
   }
-  export type TypedHTMLElementChildren<T extends HTMLElement>
+  export type TypedHTMLElementChildren<E extends HTMLElement>
     = string
-    | TypedHTMLElement<string, T, any>[]
-    | { [name: string]: TypedHTMLElement<string, T, any>; };
-  abstract class AbstractTypedHTMLElement<T extends string> {
-    private identifier: T;
+    | TypedHTMLElement<string, E, any>[]
+    | { [name: string]: TypedHTMLElement<string, E, any>; };
+  abstract class AbstractTypedHTMLElement<E extends string> {
+    private identifier: E;
   }
 
-  interface TypedHTMLElementBuilder<T extends HTMLElement, S extends string> {
-    (): TypedHTMLElement<S, T, never>;
-    <U extends string>
-    (children: U): TypedHTMLElement<S, T, U>;
-    <U extends string>
-    (children: U, factory?: () => T): never;
-    <U extends TypedHTMLElementChildren<HTMLElement>>
-    (children: U, factory?: () => T): TypedHTMLElement<S, T, U>;
-    <U extends string>
-    (attrs: { [name: string]: string; }, children: U, factory?: () => T): never;
-    <U extends TypedHTMLElementChildren<HTMLElement>>
-    (attrs: { [name: string]: string; }, children: U, factory?: () => T): TypedHTMLElement<S, T, U>;
+  interface TypedHTMLElementBuilder<E extends HTMLElement, T extends string> {
+    (): TypedHTMLElement<T, E, never>;
+    <C extends string>
+    (children: C): TypedHTMLElement<T, E, C>;
+    <C extends string>
+    (children: C, factory?: () => E): never;
+    <C extends TypedHTMLElementChildren<HTMLElement>>
+    (children: C, factory?: () => E): TypedHTMLElement<T, E, C>;
+    <C extends string>
+    (attrs: { [name: string]: string; }, children: C, factory?: () => E): never;
+    <C extends TypedHTMLElementChildren<HTMLElement>>
+    (attrs: { [name: string]: string; }, children: C, factory?: () => E): TypedHTMLElement<T, E, C>;
   }
@@ -168,4 +168,4 @@
     // custom
-    custom<T extends TypedHTMLElementChildren<HTMLElement>, U extends HTMLElement, V extends string>(children: T, factory: () => U, identity: V): TypedHTMLElement<V, U, T>;
+    custom<E extends HTMLElement, T extends string, C extends TypedHTMLElementChildren<HTMLElement>>(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

46479

increased by3.37%

Lines of code

1126

increased by0.54%

Number of lines in readme file

88

increased by79.59%

No dependency changes