@webtides/element-js 1.0.0-alpha.11 → 1.0.0-alpha.13

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webtides/element-js",
-	"version": "1.0.0-alpha.11",
+	"version": "1.0.0-alpha.13",
 	"module": "index.js",
 	"main": "index.js",
 	"type": "module",

package/src/TemplateElement.js

@@ -31,7 +31,7 @@ class TemplateElement extends StyledElement {
 	 * This will attach a shadow DOM if the element is supposed to render in shadow DOM.
 	 */
 	connectedCallback() {
-		if (this._options.shadowRender) this.attachShadow({ mode: 'open' });
+		if (this._options.shadowRender && !this.shadowRoot) this.attachShadow({ mode: 'open' });
 		super.connectedCallback();
 	}
 

package/src/dom-parts/ChildNodePart.js

@@ -310,7 +310,7 @@ export class ChildNodePart extends Part {
 			} else if (Array.isArray(value)) {
 				let childNodePart = this.parts[index];
 				if (!childNodePart) {
-					// TODO: this seems not correct :(
+					// TODO: this seems not correct :( (maybe Template vs DOM Parts !?)
 					const templatePartCommentNodes = this.childNodes?.filter(
 						(node) => node && node.nodeType === COMMENT_NODE && node.data === 'template-part',
 					);

package/src/dom-parts/TemplateResult.js

@@ -29,6 +29,7 @@ export const createTemplateString = (templateStrings, attributePlaceholders = ''
 	// find (match) all elements to identify their attributes
 	template = template.replace(elements, (_, name, attributesString, trailingSlash) => {
 		let elementTagWithAttributes = name + attributesString.replaceAll('\x01', attributePlaceholders).trimEnd();
+		// TODO the closing case is weird.
 		if (trailingSlash.length) elementTagWithAttributes += voidElements.test(name) ? ' /' : '></' + name;
 		// collect all attribute parts so that we can place matching comment nodes
 		const attributeParts = attributesString.replace(attributes, (attribute, name, valueWithQuotes, directive) => {
@@ -48,26 +49,23 @@ export const createTemplateString = (templateStrings, attributePlaceholders = ''
 			}
 			return parts.join('');
 		});
+		// TODO create test to check if lf are in place
 		return `
-				${attributesString.includes('\x01') ? attributeParts : ''}
-				<${elementTagWithAttributes}>
-			`;
+				${attributesString.includes('\x01') ? attributeParts : ''}\n
+				<${elementTagWithAttributes}>\n
+			`.trim();
 	});
 	// replace interpolation placeholders with our indexed markers
 	template = template.replace(partPositions, (partPosition) => {
 		if (partPosition === '\x01') {
 			return `<!--dom-part-${partIndex}--><!--/dom-part-${partIndex++}-->`;
-		}
-		if (partPosition === '\x02') {
+		} else if (partPosition === '\x02') {
 			return `dom-part-${partIndex++}`;
 		}
 	});
-	return `
-		<!--template-part-->
-		${template}
-		<!--/template-part-->
-	`;
-	// TODO: ^ this is actually important because of the whitespace
+	// TODO create test to check if lf are in place
+	// /n is important in the returns as we expect a certain order of text / comments an nodes
+	return `<!--template-part-->\n${template}\n<!--/template-part-->`.trim();
 };
 
 /**

package/src/util/DOMHelper.js

@@ -153,8 +153,7 @@ export const convertStringToHTML = (template) => {
  */
 export const convertStringToTemplate = (string) => {
 	const template = globalThis.document?.createElement('template');
-	// TODO: ensure that SSRed and CSRed templates have the same amount of whitespace text nodes
-	template.innerHTML = string.trimStart().trimEnd();
+	template.innerHTML = string;
 	return template.content;
 };
 

package/src/util/GlobalStylesStore.js

@@ -53,7 +53,11 @@ class GlobalStylesStore extends Store {
 				if (styleSheet.ownerNode.tagName === 'STYLE') {
 					cssStyleSheet.replaceSync(styleSheet.ownerNode.textContent);
 				} else if (styleSheet.ownerNode.tagName === 'LINK') {
-					Array.from(styleSheet.cssRules).map((rule) => cssStyleSheet.insertRule(rule.cssText));
+					try {
+						Array.from(styleSheet?.cssRules ?? []).map((rule) => cssStyleSheet.insertRule(rule.cssText));
+					} catch (e) {
+						console.error('GlobalStylesStore: cannot read cssRules. Maybe add crossorigin="anonymous" to your style link?', e);
+					}
 				}
 			}
 			cssStyleSheets.push(cssStyleSheet);