@soil/dom
Version:
Declaratively create type-safe HTML and SVG elements.
416 lines • 14.4 kB
JavaScript
System.register("dom/src/addChildren", [], function (exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
/**
* Add children to the given element.
*/
function addChildren(elem, children) {
for (var i = 0; i < children.length; ++i) {
var child = children[i];
elem.appendChild(typeof child === 'string'
? document.createTextNode(child)
: child);
}
}
exports_1("addChildren", addChildren);
return {
setters: [],
execute: function () {
}
};
});
/// Script-generated.
System.register("dom/src/html/HTMLElementContent", [], function (exports_2, context_2) {
"use strict";
var __moduleName = context_2 && context_2.id;
return {
setters: [],
execute: function () {
}
};
});
/// Script-generated.
System.register("dom/src/html/HTMLElementChildrenMap", [], function (exports_3, context_3) {
"use strict";
var __moduleName = context_3 && context_3.id;
return {
setters: [],
execute: function () {
}
};
});
/// Script-generated.
System.register("shared/types/AriaAttributes", [], function (exports_4, context_4) {
"use strict";
var __moduleName = context_4 && context_4.id;
return {
setters: [],
execute: function () {
}
};
});
System.register("shared/functions/isPlainObject", [], function (exports_5, context_5) {
"use strict";
var __moduleName = context_5 && context_5.id;
function isPlainObject(o) {
return o instanceof Object && o.constructor === Object;
}
exports_5("isPlainObject", isPlainObject);
return {
setters: [],
execute: function () {
}
};
});
System.register("shared/types/Types", [], function (exports_6, context_6) {
"use strict";
var __moduleName = context_6 && context_6.id;
return {
setters: [],
execute: function () {
}
};
});
System.register("shared/types/Props", [], function (exports_7, context_7) {
"use strict";
var __moduleName = context_7 && context_7.id;
return {
setters: [],
execute: function () {
}
};
});
System.register("shared/functions/assignProps", ["shared/functions/isPlainObject"], function (exports_8, context_8) {
"use strict";
var isPlainObject_1;
var __moduleName = context_8 && context_8.id;
/**
* Assign properties from an object literal to an object of type `HTMLElement`
* or `SVGElement`.
*/
function assignProps(elem, props) {
for (var p in props) {
if (props.hasOwnProperty(p)) {
if (p === 'role' || p.startsWith('aria-')) {
// First-class support for accessibility attributes.
elem.setAttribute(p, props[p] || '');
}
else if (isPlainObject_1.isPlainObject(props[p])) {
// Go deeper for properties such as `style` or SVG-specific properties.
assignNestedProps(elem[p], props[p]);
}
else {
elem[p] = props[p];
}
}
}
}
exports_8("assignProps", assignProps);
function assignNestedProps(target, props) {
for (var p in props) {
if (props.hasOwnProperty(p)) {
if (isPlainObject_1.isPlainObject(props[p])) {
if (target[p] === undefined) {
target[p] = {};
}
assignNestedProps(target[p], props[p]);
}
else {
target[p] = props[p];
}
}
}
}
return {
setters: [
function (isPlainObject_1_1) {
isPlainObject_1 = isPlainObject_1_1;
}
],
execute: function () {
}
};
});
System.register("dom/src/html/h", ["dom/src/addChildren", "shared/functions/assignProps"], function (exports_9, context_9) {
"use strict";
var addChildren_1, assignProps_1, h;
var __moduleName = context_9 && context_9.id;
/**
* Factory function for HTML elements.
*/
function html(tag) {
return function (props, children) {
var elem = document.createElement(tag);
if (props !== undefined) {
assignProps_1.assignProps(elem, props);
}
if (children !== undefined) {
addChildren_1.addChildren(elem, children);
}
return elem;
};
}
return {
setters: [
function (addChildren_1_1) {
addChildren_1 = addChildren_1_1;
},
function (assignProps_1_1) {
assignProps_1 = assignProps_1_1;
}
],
execute: function () {
/**
* Helpers to facilitate the concise creation of any HTML element.
*
* NOTE The following functions silently depend on the `document` variable
* being globally available. Therefore, unit tests of components that use them
* must be run inside a browser, or must expose `document` globally, e.g.
* through PhantomJS or jsdom.
*
* TODO Missing: <rb>, <rtc>.
*/
exports_9("h", h = {
a: html('a'),
abbr: html('abbr'),
address: html('address'),
applet: html('applet'),
area: html('area'),
article: html('article'),
aside: html('aside'),
audio: html('audio'),
b: html('b'),
base: html('base'),
basefont: html('basefont'),
bdi: html('bdi'),
bdo: html('bdo'),
blockquote: html('blockquote'),
body: html('body'),
br: html('br'),
button: html('button'),
canvas: html('canvas'),
caption: html('caption'),
cite: html('cite'),
code: html('code'),
col: html('col'),
colgroup: html('colgroup'),
data: html('data'),
datalist: html('datalist'),
dd: html('dd'),
del: html('del'),
details: html('details'),
dfn: html('dfn'),
dialog: html('dialog'),
dir: html('dir'),
div: html('div'),
dl: html('dl'),
dt: html('dt'),
em: html('em'),
embed: html('embed'),
fieldset: html('fieldset'),
figcaption: html('figcaption'),
figure: html('figure'),
font: html('font'),
footer: html('footer'),
form: html('form'),
frame: html('frame'),
frameset: html('frameset'),
h1: html('h1'),
h2: html('h2'),
h3: html('h3'),
h4: html('h4'),
h5: html('h5'),
h6: html('h6'),
head: html('head'),
header: html('header'),
hgroup: html('hgroup'),
hr: html('hr'),
html: html('html'),
i: html('i'),
iframe: html('iframe'),
img: html('img'),
input: html('input'),
ins: html('ins'),
kbd: html('kbd'),
label: html('label'),
legend: html('legend'),
li: html('li'),
link: html('link'),
main: html('main'),
map: html('map'),
mark: html('mark'),
marquee: html('marquee'),
menu: html('menu'),
meta: html('meta'),
meter: html('meter'),
nav: html('nav'),
noscript: html('noscript'),
object: html('object'),
ol: html('ol'),
optgroup: html('optgroup'),
option: html('option'),
output: html('output'),
p: html('p'),
param: html('param'),
picture: html('picture'),
pre: html('pre'),
progress: html('progress'),
q: html('q'),
rp: html('rp'),
rt: html('rt'),
ruby: html('ruby'),
s: html('s'),
samp: html('samp'),
script: html('script'),
section: html('section'),
select: html('select'),
slot: html('slot'),
small: html('small'),
source: html('source'),
span: html('span'),
strong: html('strong'),
style: html('style'),
sub: html('sub'),
summary: html('summary'),
sup: html('sup'),
table: html('table'),
tbody: html('tbody'),
td: html('td'),
template: html('template'),
textarea: html('textarea'),
tfoot: html('tfoot'),
th: html('th'),
thead: html('thead'),
time: html('time'),
title: html('title'),
tr: html('tr'),
track: html('track'),
u: html('u'),
ul: html('ul'),
var: html('var'),
video: html('video'),
wbr: html('wbr'),
});
}
};
});
System.register("dom/src/svg/s", ["dom/src/addChildren", "shared/functions/assignProps"], function (exports_10, context_10) {
"use strict";
var addChildren_2, assignProps_2, s;
var __moduleName = context_10 && context_10.id;
/**
* Factory function for SVG elements.
*/
function svg(tag) {
return function (props, children) {
var elem = document.createElementNS('http://www.w3.org/2000/svg', tag);
if (props !== undefined) {
assignProps_2.assignProps(elem, props);
}
if (children !== undefined) {
addChildren_2.addChildren(elem, children);
}
return elem;
};
}
return {
setters: [
function (addChildren_2_1) {
addChildren_2 = addChildren_2_1;
},
function (assignProps_2_1) {
assignProps_2 = assignProps_2_1;
}
],
execute: function () {
/**
* Helpers to facilitate the concise creation of any SVG element.
*
* NOTE The following functions silently depend on the `document` variable
* being globally available. Therefore, unit tests of components that use them
* must be run inside a browser, or must expose `document` globally, e.g.
* through PhantomJS or jsdom.
*/
exports_10("s", s = {
a: svg('a'),
circle: svg('circle'),
clipPath: svg('clipPath'),
defs: svg('defs'),
desc: svg('desc'),
ellipse: svg('ellipse'),
feBlend: svg('feBlend'),
feColorMatrix: svg('feColorMatrix'),
feComponentTransfer: svg('feComponentTransfer'),
feComposite: svg('feComposite'),
feConvolveMatrix: svg('feConvolveMatrix'),
feDiffuseLighting: svg('feDiffuseLighting'),
feDisplacementMap: svg('feDisplacementMap'),
feDistantLight: svg('feDistantLight'),
feFlood: svg('feFlood'),
feFuncA: svg('feFuncA'),
feFuncB: svg('feFuncB'),
feFuncG: svg('feFuncG'),
feFuncR: svg('feFuncR'),
feGaussianBlur: svg('feGaussianBlur'),
feImage: svg('feImage'),
feMerge: svg('feMerge'),
feMergeNode: svg('feMergeNode'),
feMorphology: svg('feMorphology'),
feOffset: svg('feOffset'),
fePointLight: svg('fePointLight'),
feSpecularLighting: svg('feSpecularLighting'),
feSpotLight: svg('feSpotLight'),
feTile: svg('feTile'),
feTurbulence: svg('feTurbulence'),
filter: svg('filter'),
foreignObject: svg('foreignObject'),
g: svg('g'),
image: svg('image'),
line: svg('line'),
linearGradient: svg('linearGradient'),
marker: svg('marker'),
mask: svg('mask'),
metadata: svg('metadata'),
path: svg('path'),
pattern: svg('pattern'),
polygon: svg('polygon'),
polyline: svg('polyline'),
radialGradient: svg('radialGradient'),
rect: svg('rect'),
script: svg('script'),
stop: svg('stop'),
style: svg('style'),
svg: svg('svg'),
switch: svg('switch'),
symbol: svg('symbol'),
text: svg('text'),
textPath: svg('textPath'),
title: svg('title'),
tspan: svg('tspan'),
use: svg('use'),
view: svg('view'),
});
}
};
});
System.register("dom/src/index", ["dom/src/html/h", "dom/src/svg/s"], function (exports_11, context_11) {
"use strict";
var __moduleName = context_11 && context_11.id;
return {
setters: [
function (h_1_1) {
exports_11({
"h": h_1_1["h"]
});
},
function (s_1_1) {
exports_11({
"s": s_1_1["s"]
});
}
],
execute: function () {
}
};
});
//# sourceMappingURL=system.js.map