@endorphinjs/template-runtime
Advanced tools
Comparing version 0.1.13 to 0.1.14
@@ -116,2 +116,4 @@ 'use strict'; | ||
| const animatingKey = '$$animating'; | ||
| /** | ||
@@ -275,2 +277,111 @@ * Creates fast object | ||
| /** | ||
| * Creates element with given tag name | ||
| * @param {string} tagName | ||
| * @param {string} [cssScope] Scope for CSS isolation | ||
| * @return {Element} | ||
| */ | ||
| function elem(tagName, cssScope) { | ||
| const el = document.createElement(tagName); | ||
| cssScope && el.setAttribute(cssScope, ''); | ||
| return el; | ||
| } | ||
| /** | ||
| * Creates element with given tag name under `ns` namespace | ||
| * @param {string} tagName | ||
| * @param {string} ns | ||
| * @param {string} [cssScope] Scope for CSS isolation | ||
| * @return {Element} | ||
| */ | ||
| function elemNS(tagName, ns, cssScope) { | ||
| const el = document.createElementNS(ns, tagName); | ||
| cssScope && el.setAttribute(cssScope, ''); | ||
| return el; | ||
| } | ||
| /** | ||
| * Creates element with given tag name and text | ||
| * @param {string} tagName | ||
| * @param {string} text | ||
| * @param {string} [cssScope] Scope for CSS isolation | ||
| * @return {Element} | ||
| */ | ||
| function elemWithText(tagName, text, cssScope) { | ||
| const el = elem(tagName, cssScope); | ||
| el.textContent = textValue(text); | ||
| return el; | ||
| } | ||
| /** | ||
| * Creates element with given tag name under `ns` namespace and text | ||
| * @param {string} tagName | ||
| * @param {string} ns | ||
| * @param {string} text | ||
| * @param {string} [cssScope] Scope for CSS isolation | ||
| * @return {Element} | ||
| */ | ||
| function elemNSWithText(tagName, ns, text, cssScope) { | ||
| const el = elemNS(tagName, ns, cssScope); | ||
| el.textContent = textValue(text); | ||
| return el; | ||
| } | ||
| /** | ||
| * Creates text node with given value | ||
| * @param {String} value | ||
| * @returns {Text} | ||
| */ | ||
| function text(value) { | ||
| const node = document.createTextNode(textValue(value)); | ||
| node['$value'] = value; | ||
| return node; | ||
| } | ||
| /** | ||
| * Updates given text node value, if required | ||
| * @param {Text} node | ||
| * @param {*} value | ||
| * @returns {number} Returns `1` if text was updated, `0` otherwise | ||
| */ | ||
| function updateText(node, value) { | ||
| if (value !== node['$value']) { | ||
| node.nodeValue = textValue(value); | ||
| node['$value'] = value; | ||
| return 1; | ||
| } | ||
| return 0; | ||
| } | ||
| /** | ||
| * @param {Node} node | ||
| * @param {Node} parent | ||
| * @param {Node} anchor | ||
| * @returns {Node} Inserted item | ||
| */ | ||
| function domInsert(node, parent, anchor) { | ||
| return anchor | ||
| ? parent.insertBefore(node, anchor) | ||
| : parent.appendChild(node); | ||
| } | ||
| /** | ||
| * Removes given DOM node from its tree | ||
| * @param {Node} node | ||
| */ | ||
| function domRemove(node) { | ||
| const { parentNode } = node; | ||
| parentNode && parentNode.removeChild(node); | ||
| } | ||
| /** | ||
| * Returns textual representation of given `value` object | ||
| * @param {*} value | ||
| * @returns {string} | ||
| */ | ||
| function textValue(value) { | ||
| return value != null ? value : ''; | ||
| } | ||
| /** | ||
| * Creates injector instance for given target, if required | ||
@@ -376,3 +487,3 @@ * @param {Element} target | ||
| disposeBlock(value); | ||
| } else { | ||
| } else if (!value[animatingKey]) { | ||
| domRemove(value); | ||
@@ -458,23 +569,2 @@ } | ||
| /** | ||
| * @param {Node} node | ||
| * @param {Node} parent | ||
| * @param {Node} anchor | ||
| * @returns {Node} Inserted item | ||
| */ | ||
| function domInsert(node, parent, anchor) { | ||
| return anchor | ||
| ? parent.insertBefore(node, anchor) | ||
| : parent.appendChild(node); | ||
| } | ||
| /** | ||
| * Removes given DOM node from its tree | ||
| * @param {Node} node | ||
| */ | ||
| function domRemove(node) { | ||
| const { parentNode } = node; | ||
| parentNode && parentNode.removeChild(node); | ||
| } | ||
| /** | ||
| * Enters new variable scope context | ||
@@ -1248,90 +1338,2 @@ * @param {Component} host | ||
| /** | ||
| * Creates element with given tag name | ||
| * @param {string} tagName | ||
| * @param {string} [cssScope] Scope for CSS isolation | ||
| * @return {Element} | ||
| */ | ||
| function elem(tagName, cssScope) { | ||
| const el = document.createElement(tagName); | ||
| cssScope && el.setAttribute(cssScope, ''); | ||
| return el; | ||
| } | ||
| /** | ||
| * Creates element with given tag name under `ns` namespace | ||
| * @param {string} tagName | ||
| * @param {string} ns | ||
| * @param {string} [cssScope] Scope for CSS isolation | ||
| * @return {Element} | ||
| */ | ||
| function elemNS(tagName, ns, cssScope) { | ||
| const el = document.createElementNS(ns, tagName); | ||
| cssScope && el.setAttribute(cssScope, ''); | ||
| return el; | ||
| } | ||
| /** | ||
| * Creates element with given tag name and text | ||
| * @param {string} tagName | ||
| * @param {string} text | ||
| * @param {string} [cssScope] Scope for CSS isolation | ||
| * @return {Element} | ||
| */ | ||
| function elemWithText(tagName, text, cssScope) { | ||
| const el = elem(tagName, cssScope); | ||
| el.textContent = textValue(text); | ||
| return el; | ||
| } | ||
| /** | ||
| * Creates element with given tag name under `ns` namespace and text | ||
| * @param {string} tagName | ||
| * @param {string} ns | ||
| * @param {string} text | ||
| * @param {string} [cssScope] Scope for CSS isolation | ||
| * @return {Element} | ||
| */ | ||
| function elemNSWithText(tagName, ns, text, cssScope) { | ||
| const el = elemNS(tagName, ns, cssScope); | ||
| el.textContent = textValue(text); | ||
| return el; | ||
| } | ||
| /** | ||
| * Creates text node with given value | ||
| * @param {String} value | ||
| * @returns {Text} | ||
| */ | ||
| function text(value) { | ||
| const node = document.createTextNode(textValue(value)); | ||
| node['$value'] = value; | ||
| return node; | ||
| } | ||
| /** | ||
| * Updates given text node value, if required | ||
| * @param {Text} node | ||
| * @param {*} value | ||
| * @returns {number} Returns `1` if text was updated, `0` otherwise | ||
| */ | ||
| function updateText(node, value) { | ||
| if (value !== node['$value']) { | ||
| node.nodeValue = textValue(value); | ||
| node['$value'] = value; | ||
| return 1; | ||
| } | ||
| return 0; | ||
| } | ||
| /** | ||
| * Returns textual representation of given `value` object | ||
| * @param {*} value | ||
| * @returns {string} | ||
| */ | ||
| function textValue(value) { | ||
| return value != null ? value : ''; | ||
| } | ||
| /** | ||
| * Creates internal lightweight Endorphin component with given definition | ||
@@ -2014,2 +2016,77 @@ * @param {string} name | ||
| /** | ||
| * Animates element appearance | ||
| * @param {HTMLElement | Component} elem | ||
| * @param {string} animation | ||
| * @param {string} [cssScope] | ||
| */ | ||
| function animateIn(elem$$1, animation, cssScope$$1) { | ||
| if (animation = createAnimation(animation, cssScope$$1)) { | ||
| elem$$1.style.animation = animation; | ||
| } | ||
| } | ||
| /** | ||
| * Animates element disappearance | ||
| * @param {HTMLElement | Component} elem | ||
| * @param {string} animation | ||
| * @param {string} [cssScope] | ||
| */ | ||
| function animateOut(elem$$1, animation, cssScope$$1) { | ||
| if (animation = createAnimation(animation, cssScope$$1)) { | ||
| /** @param {AnimationEvent} evt */ | ||
| const handler = evt => { | ||
| if (evt.target === elem$$1) { | ||
| elem$$1[animatingKey] = false; | ||
| elem$$1.removeEventListener('animationend', handler); | ||
| elem$$1.removeEventListener('animationcancel', handler); | ||
| if (/** @type {Component} */ (elem$$1).componentModel) { | ||
| unmountComponent(/** @type {Component} */ (elem$$1)); | ||
| } | ||
| domRemove(elem$$1); | ||
| } | ||
| }; | ||
| elem$$1[animatingKey] = true; | ||
| elem$$1.addEventListener('animationend', handler); | ||
| elem$$1.addEventListener('animationcancel', handler); | ||
| elem$$1.style.animation = animation; | ||
| } | ||
| } | ||
| /** | ||
| * Creates animation CSS value with scoped animation name | ||
| * @param {string} animation | ||
| * @param {string} [cssScope] | ||
| * @returns {string} | ||
| */ | ||
| function createAnimation(animation, cssScope$$1) { | ||
| if (animation == null) { | ||
| return ''; | ||
| } | ||
| const parts = String(animation).split(' '); | ||
| let name = parts[0].trim(); | ||
| const globalPrefix = 'global:'; | ||
| if (name.indexOf(globalPrefix) === 0) { | ||
| // Do not scope animation name, use globally defined animation name | ||
| parts[0] = name.slice(globalPrefix.length); | ||
| } else if (cssScope$$1) { | ||
| parts[0] = concat(name, cssScope$$1); | ||
| } | ||
| return parts.join(' ').trim(); | ||
| } | ||
| /** | ||
| * Concatenates two strings with optional separator | ||
| * @param {string} name | ||
| * @param {string} suffix | ||
| */ | ||
| function concat(name, suffix) { | ||
| const sep = suffix[0] === '_' || suffix[0] === '-' ? '' : '-'; | ||
| return name + sep + suffix; | ||
| } | ||
| /** | ||
| * Safe property getter | ||
@@ -2118,2 +2195,4 @@ * @param {*} ctx | ||
| exports.updateText = updateText; | ||
| exports.domInsert = domInsert; | ||
| exports.domRemove = domRemove; | ||
| exports.mountPartial = mountPartial; | ||
@@ -2123,2 +2202,4 @@ exports.updatePartial = updatePartial; | ||
| exports.Store = Store; | ||
| exports.animateIn = animateIn; | ||
| exports.animateOut = animateOut; | ||
| //# sourceMappingURL=runtime.cjs.js.map |
@@ -112,2 +112,4 @@ /** | ||
| const animatingKey = '$$animating'; | ||
| /** | ||
@@ -271,2 +273,111 @@ * Creates fast object | ||
| /** | ||
| * Creates element with given tag name | ||
| * @param {string} tagName | ||
| * @param {string} [cssScope] Scope for CSS isolation | ||
| * @return {Element} | ||
| */ | ||
| function elem(tagName, cssScope) { | ||
| const el = document.createElement(tagName); | ||
| cssScope && el.setAttribute(cssScope, ''); | ||
| return el; | ||
| } | ||
| /** | ||
| * Creates element with given tag name under `ns` namespace | ||
| * @param {string} tagName | ||
| * @param {string} ns | ||
| * @param {string} [cssScope] Scope for CSS isolation | ||
| * @return {Element} | ||
| */ | ||
| function elemNS(tagName, ns, cssScope) { | ||
| const el = document.createElementNS(ns, tagName); | ||
| cssScope && el.setAttribute(cssScope, ''); | ||
| return el; | ||
| } | ||
| /** | ||
| * Creates element with given tag name and text | ||
| * @param {string} tagName | ||
| * @param {string} text | ||
| * @param {string} [cssScope] Scope for CSS isolation | ||
| * @return {Element} | ||
| */ | ||
| function elemWithText(tagName, text, cssScope) { | ||
| const el = elem(tagName, cssScope); | ||
| el.textContent = textValue(text); | ||
| return el; | ||
| } | ||
| /** | ||
| * Creates element with given tag name under `ns` namespace and text | ||
| * @param {string} tagName | ||
| * @param {string} ns | ||
| * @param {string} text | ||
| * @param {string} [cssScope] Scope for CSS isolation | ||
| * @return {Element} | ||
| */ | ||
| function elemNSWithText(tagName, ns, text, cssScope) { | ||
| const el = elemNS(tagName, ns, cssScope); | ||
| el.textContent = textValue(text); | ||
| return el; | ||
| } | ||
| /** | ||
| * Creates text node with given value | ||
| * @param {String} value | ||
| * @returns {Text} | ||
| */ | ||
| function text(value) { | ||
| const node = document.createTextNode(textValue(value)); | ||
| node['$value'] = value; | ||
| return node; | ||
| } | ||
| /** | ||
| * Updates given text node value, if required | ||
| * @param {Text} node | ||
| * @param {*} value | ||
| * @returns {number} Returns `1` if text was updated, `0` otherwise | ||
| */ | ||
| function updateText(node, value) { | ||
| if (value !== node['$value']) { | ||
| node.nodeValue = textValue(value); | ||
| node['$value'] = value; | ||
| return 1; | ||
| } | ||
| return 0; | ||
| } | ||
| /** | ||
| * @param {Node} node | ||
| * @param {Node} parent | ||
| * @param {Node} anchor | ||
| * @returns {Node} Inserted item | ||
| */ | ||
| function domInsert(node, parent, anchor) { | ||
| return anchor | ||
| ? parent.insertBefore(node, anchor) | ||
| : parent.appendChild(node); | ||
| } | ||
| /** | ||
| * Removes given DOM node from its tree | ||
| * @param {Node} node | ||
| */ | ||
| function domRemove(node) { | ||
| const { parentNode } = node; | ||
| parentNode && parentNode.removeChild(node); | ||
| } | ||
| /** | ||
| * Returns textual representation of given `value` object | ||
| * @param {*} value | ||
| * @returns {string} | ||
| */ | ||
| function textValue(value) { | ||
| return value != null ? value : ''; | ||
| } | ||
| /** | ||
| * Creates injector instance for given target, if required | ||
@@ -372,3 +483,3 @@ * @param {Element} target | ||
| disposeBlock(value); | ||
| } else { | ||
| } else if (!value[animatingKey]) { | ||
| domRemove(value); | ||
@@ -454,23 +565,2 @@ } | ||
| /** | ||
| * @param {Node} node | ||
| * @param {Node} parent | ||
| * @param {Node} anchor | ||
| * @returns {Node} Inserted item | ||
| */ | ||
| function domInsert(node, parent, anchor) { | ||
| return anchor | ||
| ? parent.insertBefore(node, anchor) | ||
| : parent.appendChild(node); | ||
| } | ||
| /** | ||
| * Removes given DOM node from its tree | ||
| * @param {Node} node | ||
| */ | ||
| function domRemove(node) { | ||
| const { parentNode } = node; | ||
| parentNode && parentNode.removeChild(node); | ||
| } | ||
| /** | ||
| * Enters new variable scope context | ||
@@ -1244,90 +1334,2 @@ * @param {Component} host | ||
| /** | ||
| * Creates element with given tag name | ||
| * @param {string} tagName | ||
| * @param {string} [cssScope] Scope for CSS isolation | ||
| * @return {Element} | ||
| */ | ||
| function elem(tagName, cssScope) { | ||
| const el = document.createElement(tagName); | ||
| cssScope && el.setAttribute(cssScope, ''); | ||
| return el; | ||
| } | ||
| /** | ||
| * Creates element with given tag name under `ns` namespace | ||
| * @param {string} tagName | ||
| * @param {string} ns | ||
| * @param {string} [cssScope] Scope for CSS isolation | ||
| * @return {Element} | ||
| */ | ||
| function elemNS(tagName, ns, cssScope) { | ||
| const el = document.createElementNS(ns, tagName); | ||
| cssScope && el.setAttribute(cssScope, ''); | ||
| return el; | ||
| } | ||
| /** | ||
| * Creates element with given tag name and text | ||
| * @param {string} tagName | ||
| * @param {string} text | ||
| * @param {string} [cssScope] Scope for CSS isolation | ||
| * @return {Element} | ||
| */ | ||
| function elemWithText(tagName, text, cssScope) { | ||
| const el = elem(tagName, cssScope); | ||
| el.textContent = textValue(text); | ||
| return el; | ||
| } | ||
| /** | ||
| * Creates element with given tag name under `ns` namespace and text | ||
| * @param {string} tagName | ||
| * @param {string} ns | ||
| * @param {string} text | ||
| * @param {string} [cssScope] Scope for CSS isolation | ||
| * @return {Element} | ||
| */ | ||
| function elemNSWithText(tagName, ns, text, cssScope) { | ||
| const el = elemNS(tagName, ns, cssScope); | ||
| el.textContent = textValue(text); | ||
| return el; | ||
| } | ||
| /** | ||
| * Creates text node with given value | ||
| * @param {String} value | ||
| * @returns {Text} | ||
| */ | ||
| function text(value) { | ||
| const node = document.createTextNode(textValue(value)); | ||
| node['$value'] = value; | ||
| return node; | ||
| } | ||
| /** | ||
| * Updates given text node value, if required | ||
| * @param {Text} node | ||
| * @param {*} value | ||
| * @returns {number} Returns `1` if text was updated, `0` otherwise | ||
| */ | ||
| function updateText(node, value) { | ||
| if (value !== node['$value']) { | ||
| node.nodeValue = textValue(value); | ||
| node['$value'] = value; | ||
| return 1; | ||
| } | ||
| return 0; | ||
| } | ||
| /** | ||
| * Returns textual representation of given `value` object | ||
| * @param {*} value | ||
| * @returns {string} | ||
| */ | ||
| function textValue(value) { | ||
| return value != null ? value : ''; | ||
| } | ||
| /** | ||
| * Creates internal lightweight Endorphin component with given definition | ||
@@ -2010,2 +2012,77 @@ * @param {string} name | ||
| /** | ||
| * Animates element appearance | ||
| * @param {HTMLElement | Component} elem | ||
| * @param {string} animation | ||
| * @param {string} [cssScope] | ||
| */ | ||
| function animateIn(elem$$1, animation, cssScope$$1) { | ||
| if (animation = createAnimation(animation, cssScope$$1)) { | ||
| elem$$1.style.animation = animation; | ||
| } | ||
| } | ||
| /** | ||
| * Animates element disappearance | ||
| * @param {HTMLElement | Component} elem | ||
| * @param {string} animation | ||
| * @param {string} [cssScope] | ||
| */ | ||
| function animateOut(elem$$1, animation, cssScope$$1) { | ||
| if (animation = createAnimation(animation, cssScope$$1)) { | ||
| /** @param {AnimationEvent} evt */ | ||
| const handler = evt => { | ||
| if (evt.target === elem$$1) { | ||
| elem$$1[animatingKey] = false; | ||
| elem$$1.removeEventListener('animationend', handler); | ||
| elem$$1.removeEventListener('animationcancel', handler); | ||
| if (/** @type {Component} */ (elem$$1).componentModel) { | ||
| unmountComponent(/** @type {Component} */ (elem$$1)); | ||
| } | ||
| domRemove(elem$$1); | ||
| } | ||
| }; | ||
| elem$$1[animatingKey] = true; | ||
| elem$$1.addEventListener('animationend', handler); | ||
| elem$$1.addEventListener('animationcancel', handler); | ||
| elem$$1.style.animation = animation; | ||
| } | ||
| } | ||
| /** | ||
| * Creates animation CSS value with scoped animation name | ||
| * @param {string} animation | ||
| * @param {string} [cssScope] | ||
| * @returns {string} | ||
| */ | ||
| function createAnimation(animation, cssScope$$1) { | ||
| if (animation == null) { | ||
| return ''; | ||
| } | ||
| const parts = String(animation).split(' '); | ||
| let name = parts[0].trim(); | ||
| const globalPrefix = 'global:'; | ||
| if (name.indexOf(globalPrefix) === 0) { | ||
| // Do not scope animation name, use globally defined animation name | ||
| parts[0] = name.slice(globalPrefix.length); | ||
| } else if (cssScope$$1) { | ||
| parts[0] = concat(name, cssScope$$1); | ||
| } | ||
| return parts.join(' ').trim(); | ||
| } | ||
| /** | ||
| * Concatenates two strings with optional separator | ||
| * @param {string} name | ||
| * @param {string} suffix | ||
| */ | ||
| function concat(name, suffix) { | ||
| const sep = suffix[0] === '_' || suffix[0] === '-' ? '' : '-'; | ||
| return name + sep + suffix; | ||
| } | ||
| /** | ||
| * Safe property getter | ||
@@ -2051,3 +2128,3 @@ * @param {*} ctx | ||
| export { get, filter, addDisposeCallback, mountBlock, updateBlock, unmountBlock, mountIterator, updateIterator, unmountIterator, iteratorHost, trimIteratorItems, mountKeyIterator, updateKeyIterator, unmountKeyIterator, createInjector, insert, injectBlock, run, emptyBlockContent, move, disposeBlock, enterScope, exitScope, createScope, setScope, getScope, getProp, getState, getVar, setVar, setAttribute, updateAttribute, updateProps, addClass, finalizeAttributes, normalizeClassName, addEvent, addStaticEvent, finalizeEvents, getEventHandler, mountSlot, unmountSlot, updateSlots, markSlotUpdate, setRef, setStaticRef, finalizeRefs, createComponent, mountComponent, updateComponent, unmountComponent, subscribeStore, scheduleRender, renderComponent, mountInnerHTML, updateInnerHTML, unmountInnerHTML, elem, elemNS, elemWithText, elemNSWithText, text, updateText, mountPartial, updatePartial, unmountPartial, Store }; | ||
| export { get, filter, addDisposeCallback, mountBlock, updateBlock, unmountBlock, mountIterator, updateIterator, unmountIterator, iteratorHost, trimIteratorItems, mountKeyIterator, updateKeyIterator, unmountKeyIterator, createInjector, insert, injectBlock, run, emptyBlockContent, move, disposeBlock, enterScope, exitScope, createScope, setScope, getScope, getProp, getState, getVar, setVar, setAttribute, updateAttribute, updateProps, addClass, finalizeAttributes, normalizeClassName, addEvent, addStaticEvent, finalizeEvents, getEventHandler, mountSlot, unmountSlot, updateSlots, markSlotUpdate, setRef, setStaticRef, finalizeRefs, createComponent, mountComponent, updateComponent, unmountComponent, subscribeStore, scheduleRender, renderComponent, mountInnerHTML, updateInnerHTML, unmountInnerHTML, elem, elemNS, elemWithText, elemNSWithText, text, updateText, domInsert, domRemove, mountPartial, updatePartial, unmountPartial, Store, animateIn, animateOut }; | ||
| //# sourceMappingURL=runtime.es.js.map |
| { | ||
| "name": "@endorphinjs/template-runtime", | ||
| "version": "0.1.13", | ||
| "version": "0.1.14", | ||
| "description": "EndorphinJS template runtime, embedded with template bundles", | ||
@@ -12,3 +12,3 @@ "main": "./dist/runtime.cjs.js", | ||
| "test": "mocha", | ||
| "prepublish": "npm run build" | ||
| "prepare": "npm run build" | ||
| }, | ||
@@ -15,0 +15,0 @@ "keywords": [ |
@@ -15,3 +15,3 @@ import { Store } from './lib/store'; | ||
| interface Component extends Element { | ||
| interface Component extends HTMLElement { | ||
| /** | ||
@@ -18,0 +18,0 @@ * Pointer to component view container. By default, it’s the same as component |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-9.48%
315426
- Number of package files
- decreased by-10%
9
- Lines of code
- decreased by-27.47%
4159
No dependency changes