@endorphinjs/template-runtime - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

dist/runtime.cjs.js

@@ -97,16 +97,3 @@ 'use strict';
 
-
 /**
- * Adds given `scope` attribute to `el` to isolate its CSS
- * @param {HTMLElement} el
- * @param {Component} [host]
- * @returns {HTMLElement}
- */
-function cssScope(el, host) {
-	const cssScope = host && host.componentModel && host.componentModel.definition.cssScope;
-	cssScope && el.setAttribute(cssScope, '');
-	return el;
-}
-
-/**
  * Queues given `fn` function to be invoked asynchronously as soon as possible
@@ -168,18 +155,33 @@ * @param {function} fn
  * @param {string} tagName
- * @param {Component} [host] Host component for style scoping
+ * @param {string} [cssScope] Scope for CSS isolation
  * @return {HTMLElement}
  */
-function elem(tagName, host) {
-	return cssScope(document.createElement(tagName), host);
+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 {HTMLElement}
+ */
+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 {Component} [host] Host component for style scoping
+ * @param {string} [cssScope] Scope for CSS isolation
  * @return {HTMLElement}
  */
-function elemWithText(tagName, text, host) {
-	const el = elem(tagName, host);
+function elemWithText(tagName, text, cssScope) {
+	const el = elem(tagName, cssScope);
 	el.textContent = textValue(text);
@@ -190,2 +192,16 @@ 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 {HTMLElement}
+ */
+function elemNSWithText(tagName, ns, text, cssScope) {
+	const el = elemNS(tagName, ns, cssScope);
+	el.textContent = textValue(text);
+	return el;
+}
+
+/**
  * Creates text node with given value
@@ -597,6 +613,6 @@ * @param {String} value
 	/** @type {import('../types').Component} */
-	const element = elem(name, host);
+	const element = elem(name, host && host.componentModel && host.componentModel.definition.cssScope);
 
 	// Add host scope marker: we can’t rely on tag name since component
-	// definition is bound to element element in runtime
+	// definition is bound to element in runtime, not compile time
 	const { cssScope: cssScope$$1 } = definition;
@@ -1452,6 +1468,12 @@ if (cssScope$$1) {
 
+/**
+ * @param {import('../types').Component} host
+ * @param {import('../types').Injector} injector
+ * @param {Object} ctx
+ */
 function renderHTML(host, injector, ctx) {
 	const div = document.createElement('div');
 	div.innerHTML = ctx.code;
-	scopeDOM(div, host);
+	const cssScope$$1 = host.componentModel.definition.cssScope;
+	cssScope$$1 && scopeDOM(div, cssScope$$1);
 	while (div.firstChild) {
@@ -1465,10 +1487,10 @@ insert(injector, div.firstChild, ctx.slotName);
  * @param {Element} node
- * @param {Comment} host
+ * @param {string} cssScope
  */
-function scopeDOM(node, host) {
+function scopeDOM(node, cssScope$$1) {
 	node = node.firstChild;
 	while (node) {
 		if (node.nodeType === node.ELEMENT_NODE) {
-			cssScope(node, host);
-			scopeDOM(node, host);
+			node.setAttribute(cssScope$$1, '');
+			scopeDOM(node, cssScope$$1);
 		}
@@ -1723,3 +1745,5 @@ node = node.nextSibling;
 exports.elem = elem;
+exports.elemNS = elemNS;
 exports.elemWithText = elemWithText;
+exports.elemNSWithText = elemNSWithText;
 exports.text = text;
@@ -1726,0 +1750,0 @@ exports.updateText = updateText;

dist/runtime.es.js

@@ -93,16 +93,3 @@ /**
 
-
 /**
- * Adds given `scope` attribute to `el` to isolate its CSS
- * @param {HTMLElement} el
- * @param {Component} [host]
- * @returns {HTMLElement}
- */
-function cssScope(el, host) {
-	const cssScope = host && host.componentModel && host.componentModel.definition.cssScope;
-	cssScope && el.setAttribute(cssScope, '');
-	return el;
-}
-
-/**
  * Queues given `fn` function to be invoked asynchronously as soon as possible
@@ -164,18 +151,33 @@ * @param {function} fn
  * @param {string} tagName
- * @param {Component} [host] Host component for style scoping
+ * @param {string} [cssScope] Scope for CSS isolation
  * @return {HTMLElement}
  */
-function elem(tagName, host) {
-	return cssScope(document.createElement(tagName), host);
+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 {HTMLElement}
+ */
+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 {Component} [host] Host component for style scoping
+ * @param {string} [cssScope] Scope for CSS isolation
  * @return {HTMLElement}
  */
-function elemWithText(tagName, text, host) {
-	const el = elem(tagName, host);
+function elemWithText(tagName, text, cssScope) {
+	const el = elem(tagName, cssScope);
 	el.textContent = textValue(text);
@@ -186,2 +188,16 @@ 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 {HTMLElement}
+ */
+function elemNSWithText(tagName, ns, text, cssScope) {
+	const el = elemNS(tagName, ns, cssScope);
+	el.textContent = textValue(text);
+	return el;
+}
+
+/**
  * Creates text node with given value
@@ -593,6 +609,6 @@ * @param {String} value
 	/** @type {import('../types').Component} */
-	const element = elem(name, host);
+	const element = elem(name, host && host.componentModel && host.componentModel.definition.cssScope);
 
 	// Add host scope marker: we can’t rely on tag name since component
-	// definition is bound to element element in runtime
+	// definition is bound to element in runtime, not compile time
 	const { cssScope: cssScope$$1 } = definition;
@@ -1448,6 +1464,12 @@ if (cssScope$$1) {
 
+/**
+ * @param {import('../types').Component} host
+ * @param {import('../types').Injector} injector
+ * @param {Object} ctx
+ */
 function renderHTML(host, injector, ctx) {
 	const div = document.createElement('div');
 	div.innerHTML = ctx.code;
-	scopeDOM(div, host);
+	const cssScope$$1 = host.componentModel.definition.cssScope;
+	cssScope$$1 && scopeDOM(div, cssScope$$1);
 	while (div.firstChild) {
@@ -1461,10 +1483,10 @@ insert(injector, div.firstChild, ctx.slotName);
  * @param {Element} node
- * @param {Comment} host
+ * @param {string} cssScope
  */
-function scopeDOM(node, host) {
+function scopeDOM(node, cssScope$$1) {
 	node = node.firstChild;
 	while (node) {
 		if (node.nodeType === node.ELEMENT_NODE) {
-			cssScope(node, host);
-			scopeDOM(node, host);
+			node.setAttribute(cssScope$$1, '');
+			scopeDOM(node, cssScope$$1);
 		}
@@ -1671,3 +1693,3 @@ node = node.nextSibling;
 
-export { get, filter, mountBlock, updateBlock, mountIterator, updateIterator, mountKeyIterator, updateKeyIterator, createInjector, block, run, insert, move, dispose, enterScope, exitScope, createScope, setScope, getScope, getProp, getState, getVar, setVar, setAttribute, updateAttribute, updateProps, addClass, finalizeAttributes, finalizeProps, addEvent, addStaticEvent, finalizeEvents, getEventHandler, mountSlot, updateSlots, setRef, setStaticRef, finalizeRefs, createComponent, mountComponent, updateComponent, unmountComponent, subscribeStore, scheduleRender, renderComponent, mountInnerHTML, updateInnerHTML, elem, elemWithText, text, updateText, mountPartial, updatePartial, Store };
+export { get, filter, mountBlock, updateBlock, mountIterator, updateIterator, mountKeyIterator, updateKeyIterator, createInjector, block, run, insert, move, dispose, enterScope, exitScope, createScope, setScope, getScope, getProp, getState, getVar, setVar, setAttribute, updateAttribute, updateProps, addClass, finalizeAttributes, finalizeProps, addEvent, addStaticEvent, finalizeEvents, getEventHandler, mountSlot, updateSlots, setRef, setStaticRef, finalizeRefs, createComponent, mountComponent, updateComponent, unmountComponent, subscribeStore, scheduleRender, renderComponent, mountInnerHTML, updateInnerHTML, elem, elemNS, elemWithText, elemNSWithText, text, updateText, mountPartial, updatePartial, Store };
 //# sourceMappingURL=runtime.es.js.map

package.json

 {
   "name": "@endorphinjs/template-runtime",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "EndorphinJS template runtime, embedded with template bundles",
@@ -5,0 +5,0 @@ "main": "./dist/runtime.cjs.js",

No alert changes

Improved metrics

Total package byte prevSize

258275

increased by1.81%

Lines of code

3309

increased by1.41%

No dependency changes