typed-dom
Advanced tools
Comparing version 0.0.45 to 0.0.46
@@ -1,2 +0,2 @@ | ||
/*! typed-dom v0.0.45 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */ | ||
/*! typed-dom v0.0.46 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */ | ||
require = function e(t, n, r) { | ||
@@ -45,4 +45,4 @@ function s(o, u) { | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
var TypedHTMLElement = function () { | ||
function TypedHTMLElement(element_, children_) { | ||
var El = function () { | ||
function El(element_, children_) { | ||
var _this = this; | ||
@@ -104,3 +104,3 @@ this.element_ = element_; | ||
} | ||
Object.defineProperty(TypedHTMLElement.prototype, 'element', { | ||
Object.defineProperty(El.prototype, 'element', { | ||
get: function () { | ||
@@ -112,3 +112,3 @@ return this.element_; | ||
}); | ||
Object.defineProperty(TypedHTMLElement.prototype, 'children', { | ||
Object.defineProperty(El.prototype, 'children', { | ||
get: function () { | ||
@@ -164,3 +164,3 @@ switch (this.mode) { | ||
}); | ||
TypedHTMLElement.prototype.observe = function (children) { | ||
El.prototype.observe = function (children) { | ||
var _this = this; | ||
@@ -186,5 +186,5 @@ return Object.defineProperties(children, this.structkeys.reduce(function (descs, key) { | ||
}; | ||
return TypedHTMLElement; | ||
return El; | ||
}(); | ||
exports.TypedHTMLElement = TypedHTMLElement; | ||
exports.El = El; | ||
}, | ||
@@ -352,9 +352,9 @@ {} | ||
case 'undefined': | ||
return new builder_1.TypedHTMLElement(define(tag, function () { | ||
return new builder_1.El(define(tag, function () { | ||
return document.createElement(tag); | ||
}), void 0); | ||
case 'function': | ||
return new builder_1.TypedHTMLElement(define(tag, attrs), void 0); | ||
return new builder_1.El(define(tag, attrs), void 0); | ||
case 'string': | ||
return new builder_1.TypedHTMLElement(define(tag, children || function () { | ||
return new builder_1.El(define(tag, children || function () { | ||
return document.createElement(tag); | ||
@@ -368,3 +368,3 @@ }), attrs); | ||
return key === void 0 || typeof attrs[key] === 'object'; | ||
}) ? new builder_1.TypedHTMLElement(define(tag, factory), attrs) : new builder_1.TypedHTMLElement(define(tag, factory, attrs), children === factory ? void 0 : children); | ||
}) ? new builder_1.El(define(tag, factory), attrs) : new builder_1.El(define(tag, factory, attrs), children === factory ? void 0 : children); | ||
default: | ||
@@ -371,0 +371,0 @@ throw new TypeError('Invalid arguments: [' + attrs + ', ' + children + ', ' + factory + ']'); |
@@ -1,2 +0,2 @@ | ||
/*! typed-dom v0.0.45 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 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 s=r[c]={exports:{}};t[c][0].call(s.exports,function(e){var r=t[c][1][e];return i(r||e)},s,s.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(){for(;e.childNodes.length>0;)e.removeChild(e.firstChild)}function i(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 o=this;switch(this.element_=e,this.children_=t,this.mode=void 0===this.children_?"void":"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"void":return;case"text":return r(),this.children_=document.createTextNode(""),this.element_.appendChild(this.children_),void(this.children=t);case"collection":return r(),e.id&&t.forEach(function(e){var t=e.element;return t instanceof HTMLStyleElement&&void i(t)}),this.children_=Object.freeze([]),void(this.children=t);case"struct":return r(),e.id&&Object.keys(t).map(function(e){return t[e]}).forEach(function(e){var t=e.element;return t instanceof HTMLStyleElement&&void i(t)}),this.children_=this.observe(n({},t)),void this.structkeys.forEach(function(e){return void o.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"void":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,r){var n=t();if(e!==n.tagName&&e!==n.tagName.toLowerCase())throw new Error('Tag name must be "'+e+'" but "'+n.tagName.toLowerCase()+'".');return r?Object.keys(r).reduce(function(e,t){return e.setAttribute(t,r[t]||""),e},n):n}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","create","any"].reduce(function(e,t){return e[t]="create"===t?function(e,t,n,i){return void 0===t&&(t=function(){return document.createElement(e)}),void 0===n&&(n=function(){return document.createElement(e)}),void 0===i&&(i=function(){return document.createElement(e)}),r.TypedHTML.any(t,n,i,e)}:function(e,r,o,c){switch(void 0===c&&(c=t),c="any"===t?c:t,typeof e){case"undefined":return new i.TypedHTMLElement(n(c,function(){return document.createElement(c)}),void 0);case"function":return new i.TypedHTMLElement(n(c,e),void 0);case"string":return new i.TypedHTMLElement(n(c,r||function(){return document.createElement(c)}),e);case"object":return o="function"==typeof r?r:o||function(){return document.createElement(c)},Object.keys(e).slice(-1).every(function(t){return void 0===t||"object"==typeof e[t]})?new i.TypedHTMLElement(n(c,o),e):new i.TypedHTMLElement(n(c,o,e),r===o?void 0:r);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 a?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 a=!1;try{document.createElement("div").addEventListener("test",function(){},{get capture(){return a=!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.46 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 a="function"==typeof require&&require;if(!u&&a)return a(c,!0);if(o)return o(c,!0);var s=new Error("Cannot find module '"+c+"'");throw s.code="MODULE_NOT_FOUND",s}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(){for(;e.childNodes.length>0;)e.removeChild(e.firstChild)}function i(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 o=this;switch(this.element_=e,this.children_=t,this.mode=void 0===this.children_?"void":"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"void":return;case"text":return r(),this.children_=document.createTextNode(""),this.element_.appendChild(this.children_),void(this.children=t);case"collection":return r(),e.id&&t.forEach(function(e){var t=e.element;return t instanceof HTMLStyleElement&&void i(t)}),this.children_=Object.freeze([]),void(this.children=t);case"struct":return r(),e.id&&Object.keys(t).map(function(e){return t[e]}).forEach(function(e){var t=e.element;return t instanceof HTMLStyleElement&&void i(t)}),this.children_=this.observe(n({},t)),void this.structkeys.forEach(function(e){return void o.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"void":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.El=i},{}],3:[function(e,t,r){"use strict";function n(e,t,r){var n=t();if(e!==n.tagName&&e!==n.tagName.toLowerCase())throw new Error('Tag name must be "'+e+'" but "'+n.tagName.toLowerCase()+'".');return r?Object.keys(r).reduce(function(e,t){return e.setAttribute(t,r[t]||""),e},n):n}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","create","any"].reduce(function(e,t){return e[t]="create"===t?function(e,t,n,i){return void 0===t&&(t=function(){return document.createElement(e)}),void 0===n&&(n=function(){return document.createElement(e)}),void 0===i&&(i=function(){return document.createElement(e)}),r.TypedHTML.any(t,n,i,e)}:function(e,r,o,c){switch(void 0===c&&(c=t),c="any"===t?c:t,typeof e){case"undefined":return new i.El(n(c,function(){return document.createElement(c)}),void 0);case"function":return new i.El(n(c,e),void 0);case"string":return new i.El(n(c,r||function(){return document.createElement(c)}),e);case"object":return o="function"==typeof r?r:o||function(){return document.createElement(c)},Object.keys(e).slice(-1).every(function(t){return void 0===t||"object"==typeof e[t]})?new i.El(n(c,o),e):new i.El(n(c,o,e),r===o?void 0:r);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 a?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 a=!1;try{document.createElement("div").addEventListener("test",function(){},{get capture(){return a=!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"]); |
{ | ||
"name": "typed-dom", | ||
"version": "0.0.45", | ||
"version": "0.0.46", | ||
"description": "Static typed dom component builder.", | ||
@@ -5,0 +5,0 @@ "private": false, |
@@ -1,17 +0,17 @@ | ||
export type TypedHTMLElementChildren = | ||
| TypedHTMLElementChildren.Void | ||
| TypedHTMLElementChildren.Text | ||
| TypedHTMLElementChildren.Collection | ||
| TypedHTMLElementChildren.Struct; | ||
export namespace TypedHTMLElementChildren { | ||
export type ElChildren = | ||
| ElChildren.Void | ||
| ElChildren.Text | ||
| ElChildren.Collection | ||
| ElChildren.Struct; | ||
export namespace ElChildren { | ||
export type Void = void; | ||
export type Text = string; | ||
export type Collection = ReadonlyArray<TypedHTMLElement<string, HTMLElement, any>>; | ||
export type Struct = { [name: string]: TypedHTMLElement<string, HTMLElement, any>; }; | ||
export type Collection = ReadonlyArray<El<string, HTMLElement, any>>; | ||
export type Struct = { [name: string]: El<string, HTMLElement, any>; }; | ||
} | ||
export class TypedHTMLElement< | ||
export class El< | ||
T extends string, | ||
E extends HTMLElement, | ||
C extends TypedHTMLElementChildren | ||
C extends ElChildren | ||
> { | ||
@@ -36,3 +36,3 @@ private tag: T; | ||
if (element_.id) { | ||
void (children_ as TypedHTMLElementChildren.Collection) | ||
void (children_ as ElChildren.Collection) | ||
.forEach(({ element }) => | ||
@@ -42,3 +42,3 @@ element instanceof HTMLStyleElement && | ||
} | ||
this.children_ = Object.freeze([]) as TypedHTMLElementChildren.Collection as C; | ||
this.children_ = Object.freeze([]) as ElChildren.Collection as C; | ||
this.children = children_; | ||
@@ -49,4 +49,4 @@ return; | ||
if (element_.id) { | ||
void Object.keys(children_ as TypedHTMLElementChildren.Struct) | ||
.map(k => (children_ as TypedHTMLElementChildren.Struct)[k]) | ||
void Object.keys(children_ as ElChildren.Struct) | ||
.map(k => (children_ as ElChildren.Struct)[k]) | ||
.forEach(({ element }) => | ||
@@ -56,3 +56,3 @@ element instanceof HTMLStyleElement && | ||
} | ||
this.children_ = this.observe({ ...<TypedHTMLElementChildren.Struct>children_ }) as C; | ||
this.children_ = this.observe({ ...<ElChildren.Struct>children_ }) as C; | ||
void this.structkeys | ||
@@ -87,3 +87,3 @@ .forEach(k => | ||
this.mode === 'struct' | ||
? Object.keys(this.children_ as TypedHTMLElementChildren.Struct) | ||
? Object.keys(this.children_ as ElChildren.Struct) | ||
: []; | ||
@@ -114,3 +114,3 @@ public get element(): E { | ||
if (!Object.isFrozen(this.children_)) throw new Error('TypedHTMLElement collections cannot be updated recursively.'); | ||
void (children as TypedHTMLElementChildren.Collection) | ||
void (children as ElChildren.Collection) | ||
.reduce((cs, c) => { | ||
@@ -121,7 +121,7 @@ const i = cs.indexOf(c); | ||
return cs; | ||
}, (this.children_ as TypedHTMLElementChildren.Collection).slice()) | ||
}, (this.children_ as ElChildren.Collection).slice()) | ||
.forEach(child => | ||
void child.element.remove()); | ||
this.children_ = [] as TypedHTMLElementChildren.Collection as C; | ||
void (children as TypedHTMLElementChildren.Collection) | ||
this.children_ = [] as ElChildren.Collection as C; | ||
void (children as ElChildren.Collection) | ||
.forEach((child, i) => ( | ||
@@ -142,3 +142,3 @@ this.children_[i] = child, | ||
} | ||
private observe<C extends TypedHTMLElementChildren.Struct>(children: C): C { | ||
private observe<C extends ElChildren.Struct>(children: C): C { | ||
return Object.defineProperties( | ||
@@ -152,6 +152,6 @@ children, | ||
enumerable: true, | ||
get: (): TypedHTMLElement<string, HTMLElement, any> => { | ||
get: (): El<string, HTMLElement, any> => { | ||
return current; | ||
}, | ||
set: (newChild: TypedHTMLElement<string, HTMLElement, any>) => { | ||
set: (newChild: El<string, HTMLElement, any>) => { | ||
const oldChild = current; | ||
@@ -158,0 +158,0 @@ if (newChild === oldChild) return; |
@@ -1,78 +0,71 @@ | ||
import { TypedHTMLElement, TypedHTMLElementChildren } from './builder'; | ||
import { El, ElChildren } from './builder'; | ||
interface TypedHTMLElementBuilder<T extends string, E extends HTMLElement> { | ||
(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> | ||
(attrs: { [name: string]: string; }, children: C, factory?: () => E): TypedHTMLElement<T, E, C>; | ||
interface ElBuilder<T extends string, E extends HTMLElement = HTMLElement> { | ||
(factory?: () => E): El<T, E, void>; <C extends ElChildren> | ||
(children: C, factory?: () => E): El<T, E, C>; | ||
(attrs: { [name: string]: string; }, factory?: () => E): El<T, E, void>; <C extends ElChildren> | ||
(attrs: { [name: string]: string; }, children: C, factory?: () => E): El<T, E, C>; | ||
} | ||
export const TypedHTML: { | ||
// lib.dom.d.ts | ||
[K in keyof HTMLElementTagNameMap]: TypedHTMLElementBuilder<K, HTMLElementTagNameMap[K]>; | ||
[K in keyof HTMLElementTagNameMap]: ElBuilder<K, HTMLElementTagNameMap[K]>; | ||
} & { | ||
// other | ||
abbr: TypedHTMLElementBuilder<'abbr', HTMLElement>; | ||
acronym: TypedHTMLElementBuilder<'acronym', HTMLElement>; | ||
address: TypedHTMLElementBuilder<'address', HTMLElement>; | ||
article: TypedHTMLElementBuilder<'article', HTMLElement>; | ||
aside: TypedHTMLElementBuilder<'aside', HTMLElement>; | ||
b: TypedHTMLElementBuilder<'b', HTMLElement>; | ||
bdo: TypedHTMLElementBuilder<'bdo', HTMLElement>; | ||
big: TypedHTMLElementBuilder<'big', HTMLElement>; | ||
center: TypedHTMLElementBuilder<'center', HTMLElement>; | ||
cite: TypedHTMLElementBuilder<'cite', HTMLElement>; | ||
code: TypedHTMLElementBuilder<'code', HTMLElement>; | ||
dd: TypedHTMLElementBuilder<'dd', HTMLElement>; | ||
dfn: TypedHTMLElementBuilder<'dfn', HTMLElement>; | ||
dt: TypedHTMLElementBuilder<'dt', HTMLElement>; | ||
em: TypedHTMLElementBuilder<'em', HTMLElement>; | ||
figcaption: TypedHTMLElementBuilder<'figcaption', HTMLElement>; | ||
figure: TypedHTMLElementBuilder<'figure', HTMLElement>; | ||
footer: TypedHTMLElementBuilder<'footer', HTMLElement>; | ||
header: TypedHTMLElementBuilder<'header', HTMLElement>; | ||
hgroup: TypedHTMLElementBuilder<'hgroup', HTMLElement>; | ||
i: TypedHTMLElementBuilder<'i', HTMLElement>; | ||
kbd: TypedHTMLElementBuilder<'kbd', HTMLElement>; | ||
keygen: TypedHTMLElementBuilder<'keygen', HTMLElement>; | ||
mark: TypedHTMLElementBuilder<'mark', HTMLElement>; | ||
nav: TypedHTMLElementBuilder<'nav', HTMLElement>; | ||
nobr: TypedHTMLElementBuilder<'nobr', HTMLElement>; | ||
noframes: TypedHTMLElementBuilder<'noframes', HTMLElement>; | ||
noscript: TypedHTMLElementBuilder<'noscript', HTMLElement>; | ||
plaintext: TypedHTMLElementBuilder<'plaintext', HTMLElement>; | ||
rt: TypedHTMLElementBuilder<'rt', HTMLElement>; | ||
ruby: TypedHTMLElementBuilder<'ruby', HTMLElement>; | ||
s: TypedHTMLElementBuilder<'s', HTMLElement>; | ||
samp: TypedHTMLElementBuilder<'samp', HTMLElement>; | ||
section: TypedHTMLElementBuilder<'section', HTMLElement>; | ||
small: TypedHTMLElementBuilder<'small', HTMLElement>; | ||
strike: TypedHTMLElementBuilder<'strike', HTMLElement>; | ||
strong: TypedHTMLElementBuilder<'strong', HTMLElement>; | ||
sub: TypedHTMLElementBuilder<'sub', HTMLElement>; | ||
sup: TypedHTMLElementBuilder<'sup', HTMLElement>; | ||
tt: TypedHTMLElementBuilder<'tt', HTMLElement>; | ||
u: TypedHTMLElementBuilder<'u', HTMLElement>; | ||
var: TypedHTMLElementBuilder<'var', HTMLElement>; | ||
wbr: TypedHTMLElementBuilder<'wbr', HTMLElement>; | ||
abbr: ElBuilder<'abbr'>; | ||
acronym: ElBuilder<'acronym'>; | ||
address: ElBuilder<'address'>; | ||
article: ElBuilder<'article'>; | ||
aside: ElBuilder<'aside'>; | ||
b: ElBuilder<'b'>; | ||
bdo: ElBuilder<'bdo'>; | ||
big: ElBuilder<'big'>; | ||
center: ElBuilder<'center'>; | ||
cite: ElBuilder<'cite'>; | ||
code: ElBuilder<'code'>; | ||
dd: ElBuilder<'dd'>; | ||
dfn: ElBuilder<'dfn'>; | ||
dt: ElBuilder<'dt'>; | ||
em: ElBuilder<'em'>; | ||
figcaption: ElBuilder<'figcaption'>; | ||
figure: ElBuilder<'figure'>; | ||
footer: ElBuilder<'footer'>; | ||
header: ElBuilder<'header'>; | ||
hgroup: ElBuilder<'hgroup'>; | ||
i: ElBuilder<'i'>; | ||
kbd: ElBuilder<'kbd'>; | ||
keygen: ElBuilder<'keygen'>; | ||
mark: ElBuilder<'mark'>; | ||
nav: ElBuilder<'nav'>; | ||
nobr: ElBuilder<'nobr'>; | ||
noframes: ElBuilder<'noframes'>; | ||
noscript: ElBuilder<'noscript'>; | ||
plaintext: ElBuilder<'plaintext'>; | ||
rt: ElBuilder<'rt'>; | ||
ruby: ElBuilder<'ruby'>; | ||
s: ElBuilder<'s'>; | ||
samp: ElBuilder<'samp'>; | ||
section: ElBuilder<'section'>; | ||
small: ElBuilder<'small'>; | ||
strike: ElBuilder<'strike'>; | ||
strong: ElBuilder<'strong'>; | ||
sub: ElBuilder<'sub'>; | ||
sup: ElBuilder<'sup'>; | ||
tt: ElBuilder<'tt'>; | ||
u: ElBuilder<'u'>; | ||
var: ElBuilder<'var'>; | ||
wbr: ElBuilder<'wbr'>; | ||
// create | ||
create<T extends keyof HTMLElementTagNameMap> | ||
(tag: T, factory?: () => HTMLElementTagNameMap[T]): TypedHTMLElement<T, HTMLElementTagNameMap[T], void>; | ||
create<T extends keyof HTMLElementTagNameMap, C extends TypedHTMLElementChildren = TypedHTMLElementChildren> | ||
(tag: T, children: C, factory?: () => HTMLElementTagNameMap[T]): TypedHTMLElement<T, HTMLElementTagNameMap[T], C>; | ||
create<T extends keyof HTMLElementTagNameMap> | ||
(tag: T, attrs: { [name: string]: string; }, factory?: () => HTMLElementTagNameMap[T]): TypedHTMLElement<T, HTMLElementTagNameMap[T], void>; | ||
create<T extends keyof HTMLElementTagNameMap, C extends TypedHTMLElementChildren = TypedHTMLElementChildren> | ||
(tag: T, attrs: { [name: string]: string; }, children: C, factory?: () => HTMLElementTagNameMap[T]): TypedHTMLElement<T, HTMLElementTagNameMap[T], C>; | ||
create<T extends string, E extends HTMLElement = HTMLElement> | ||
(tag: T, factory?: () => E): TypedHTMLElement<T, E, void>; | ||
create<T extends string, E extends HTMLElement = HTMLElement, C extends TypedHTMLElementChildren = TypedHTMLElementChildren> | ||
(tag: T, children: C, factory?: () => E): TypedHTMLElement<T, E, C>; | ||
create<T extends string, E extends HTMLElement = HTMLElement> | ||
(tag: T, attrs: { [name: string]: string; }, factory?: () => E): TypedHTMLElement<T, E, void>; | ||
create<T extends string, E extends HTMLElement = HTMLElement, C extends TypedHTMLElementChildren = TypedHTMLElementChildren> | ||
(tag: T, attrs: { [name: string]: string; }, children: C, factory?: () => E): TypedHTMLElement<T, E, C>; | ||
create: { <T extends keyof HTMLElementTagNameMap> | ||
(tag: T, factory?: () => HTMLElementTagNameMap[T]): El<T, HTMLElementTagNameMap[T], void>; <T extends keyof HTMLElementTagNameMap, C extends ElChildren = ElChildren> | ||
(tag: T, children: C, factory?: () => HTMLElementTagNameMap[T]): El<T, HTMLElementTagNameMap[T], C>; <T extends keyof HTMLElementTagNameMap> | ||
(tag: T, attrs: { [name: string]: string; }, factory?: () => HTMLElementTagNameMap[T]): El<T, HTMLElementTagNameMap[T], void>; <T extends keyof HTMLElementTagNameMap, C extends ElChildren = ElChildren> | ||
(tag: T, attrs: { [name: string]: string; }, children: C, factory?: () => HTMLElementTagNameMap[T]): El<T, HTMLElementTagNameMap[T], C>; | ||
<T extends string, E extends HTMLElement = HTMLElement> | ||
(tag: T, factory?: () => E): El<T, E, void>; <T extends string, E extends HTMLElement = HTMLElement, C extends ElChildren = ElChildren> | ||
(tag: T, children: C, factory?: () => E): El<T, E, C>; <T extends string, E extends HTMLElement = HTMLElement> | ||
(tag: T, attrs: { [name: string]: string; }, factory?: () => E): El<T, E, void>; <T extends string, E extends HTMLElement = HTMLElement, C extends ElChildren = ElChildren> | ||
(tag: T, attrs: { [name: string]: string; }, children: C, factory?: () => E): El<T, E, C>; | ||
}; | ||
} = [ | ||
@@ -215,13 +208,13 @@ // lib.dom.d.ts | ||
TypedHTML['any'](b, c, d, tag) | ||
: <C extends TypedHTMLElementChildren> | ||
: <C extends ElChildren> | ||
(attrs?: { [name: string]: string; }, children?: C, factory?: () => HTMLElement, tag = prop) | ||
: TypedHTMLElement<string, HTMLElement, C> => { | ||
: El<string, HTMLElement, C> => { | ||
tag = prop === 'any' ? tag : prop; | ||
switch (typeof attrs) { | ||
case 'undefined': | ||
return new TypedHTMLElement(define(tag, () => document.createElement(tag)), <never>void 0); | ||
return new El(define(tag, () => document.createElement(tag)), <never>void 0); | ||
case 'function': | ||
return new TypedHTMLElement(define(tag, attrs as any), <never>void 0); | ||
return new El(define(tag, attrs as any), <never>void 0); | ||
case 'string': | ||
return new TypedHTMLElement(define(tag, children as any || (() => document.createElement(tag))), <never>attrs); | ||
return new El(define(tag, children as any || (() => document.createElement(tag))), <never>attrs); | ||
case 'object': | ||
@@ -232,4 +225,4 @@ factory = typeof children === 'function' | ||
return Object.keys(attrs!).slice(-1).every(key => key === void 0 || typeof attrs![key] === 'object') | ||
? new TypedHTMLElement(define(tag, factory), <any>attrs) | ||
: new TypedHTMLElement(define(tag, factory, attrs!), <never>children === factory ? void 0 : children) | ||
? new El(define(tag, factory), <any>attrs) | ||
: new El(define(tag, factory, attrs!), <never>children === factory ? void 0 : children) | ||
default: | ||
@@ -236,0 +229,0 @@ throw new TypeError(`Invalid arguments: [${attrs}, ${children}, ${factory}]`); |
@@ -5,5 +5,3 @@ import TypedHTML from '../../index'; | ||
declare const _: { | ||
shuffle<T>(as: T[]): T[]; | ||
}; | ||
declare const _: { shuffle<T>(as: T[]): T[]; }; | ||
@@ -13,5 +11,5 @@ describe('Integration: Typed DOM', function () { | ||
it('empty', function () { | ||
const empty = TypedHTML.p(); | ||
assert(empty.element.outerHTML === '<p></p>'); | ||
assert(empty.children === void 0); | ||
const dom = TypedHTML.p(); | ||
assert(dom.element.outerHTML === '<p></p>'); | ||
assert(dom.children === void 0); | ||
}); | ||
@@ -30,12 +28,12 @@ | ||
it('text', function () { | ||
const text = TypedHTML.p(`a`); | ||
assert(text.element.outerHTML === '<p>a</p>'); | ||
assert(text.children === 'a'); | ||
const dom = TypedHTML.p(`a`); | ||
assert(dom.element.outerHTML === '<p>a</p>'); | ||
assert(dom.children === 'a'); | ||
}); | ||
it('text children update', function () { | ||
const text = TypedHTML.p(`a` as string); | ||
text.children = 'b'; | ||
assert(text.element.outerHTML === '<p>b</p>'); | ||
assert(text.children === 'b'); | ||
const dom = TypedHTML.p(`a` as string); | ||
dom.children = 'b'; | ||
assert(dom.element.outerHTML === '<p>b</p>'); | ||
assert(dom.children === 'b'); | ||
}); | ||
@@ -54,28 +52,28 @@ | ||
it('collection', function () { | ||
const collection = TypedHTML.ul([ | ||
const dom = TypedHTML.ul([ | ||
TypedHTML.li(`1` as string), | ||
TypedHTML.li(`2`) | ||
]); | ||
assert(collection.element.outerHTML === '<ul><li>1</li><li>2</li></ul>'); | ||
assert(collection.children.length === 2); | ||
assert(collection.children.every(({element}, i) => element === collection.element.children[i])); | ||
assert(dom.element.outerHTML === '<ul><li>1</li><li>2</li></ul>'); | ||
assert(dom.children.length === 2); | ||
assert(dom.children.every(({element}, i) => element === dom.element.children[i])); | ||
}); | ||
it('collection children update', function () { | ||
const collection = TypedHTML.ul([ | ||
const dom = TypedHTML.ul([ | ||
TypedHTML.li(`1` as string) | ||
]); | ||
collection.children = [ | ||
dom.children = [ | ||
TypedHTML.li('2'), | ||
TypedHTML.li('3') | ||
]; | ||
assert(collection.element.outerHTML === '<ul><li>2</li><li>3</li></ul>'); | ||
assert(collection.children.length === 2); | ||
assert(collection.children.every(({element}, i) => element === collection.element.children[i])); | ||
collection.children = [ | ||
assert(dom.element.outerHTML === '<ul><li>2</li><li>3</li></ul>'); | ||
assert(dom.children.length === 2); | ||
assert(dom.children.every(({element}, i) => element === dom.element.children[i])); | ||
dom.children = [ | ||
TypedHTML.li('4') | ||
]; | ||
assert(collection.element.outerHTML === '<ul><li>4</li></ul>'); | ||
assert(collection.children.length === 1); | ||
assert(collection.children.every(({element}, i) => element === collection.element.children[i])); | ||
assert(dom.element.outerHTML === '<ul><li>4</li></ul>'); | ||
assert(dom.children.length === 1); | ||
assert(dom.children.every(({element}, i) => element === dom.element.children[i])); | ||
@@ -94,5 +92,5 @@ // property test | ||
.forEach(([os, ns]) => { | ||
collection.children = os; | ||
dom.children = os; | ||
Sequence.zip( | ||
Sequence.from(Array.from(collection.element.children)), | ||
Sequence.from(Array.from(dom.element.children)), | ||
Sequence.from(os.map(({element}) => element))) | ||
@@ -102,5 +100,5 @@ .extract() | ||
void assert(a === b)); | ||
collection.children = ns; | ||
dom.children = ns; | ||
Sequence.zip( | ||
Sequence.from(Array.from(collection.element.children)), | ||
Sequence.from(Array.from(dom.element.children)), | ||
Sequence.from(ns.map(({element}) => element))) | ||
@@ -114,11 +112,11 @@ .extract() | ||
it('collection children partial update', function () { | ||
const collection = TypedHTML.ul([ | ||
const dom = TypedHTML.ul([ | ||
TypedHTML.li() | ||
]); | ||
assert.throws(() => collection.children[0] = TypedHTML.li()); | ||
assert.throws(() => collection.children.push(TypedHTML.li())); | ||
assert.throws(() => collection.children.pop()); | ||
assert.throws(() => collection.children.length = 0); | ||
assert(collection.children.length === 1); | ||
assert(collection.children.every(({element}, i) => element === collection.element.children[i])); | ||
assert.throws(() => dom.children[0] = TypedHTML.li()); | ||
assert.throws(() => dom.children.push(TypedHTML.li())); | ||
assert.throws(() => dom.children.pop()); | ||
assert.throws(() => dom.children.length = 0); | ||
assert(dom.children.length === 1); | ||
assert(dom.children.every(({element}, i) => element === dom.element.children[i])); | ||
}); | ||
@@ -137,35 +135,35 @@ | ||
it('struct', function () { | ||
const struct = TypedHTML.article({ | ||
const dom = 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); | ||
assert(dom.element.outerHTML === '<article><h1>title</h1><p><a></a></p></article>'); | ||
assert(dom.children.title.element === dom.element.firstChild); | ||
assert(dom.children.content.element === dom.element.lastChild); | ||
}); | ||
it('struct children update', function () { | ||
const struct = TypedHTML.article({ | ||
const dom = TypedHTML.article({ | ||
title: TypedHTML.h1(`a` as string) | ||
}); | ||
struct.children = { | ||
dom.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'); | ||
assert(dom.children.title.element.textContent === 'b'); | ||
assert(dom.children.title.element === dom.element.firstChild); | ||
assert(dom.children.title.children === 'b'); | ||
}); | ||
it('struct children partial update', function () { | ||
const struct = TypedHTML.article({ | ||
const dom = TypedHTML.article({ | ||
title: TypedHTML.h1(`a` as string) | ||
}); | ||
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'); | ||
dom.children.title = TypedHTML.h1(`b`); | ||
assert(dom.children.title.element.textContent === 'b'); | ||
assert(dom.children.title.element === dom.element.firstChild); | ||
assert(dom.children.title.children === 'b'); | ||
dom.children.title.children = 'c'; | ||
assert(dom.children.title.element.textContent === 'c'); | ||
assert(dom.children.title.element === dom.element.firstChild); | ||
assert(dom.children.title.children === 'c'); | ||
}); | ||
@@ -172,0 +170,0 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
355
97921
1617