@webtides/element-js 1.0.0-alpha.10 → 1.0.0-alpha.12

package/package.json

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

package/src/BaseElement.js

@@ -24,7 +24,12 @@ export { toString } from './util/toString.js';
 
 /**
  * Options object for the BaseElement propertyOptions option
- * @typedef {Object} PropertyOptions
+ * @typedef {Object<string, PropertyOption>} PropertyOptions
+ */
+
+/**
+ * Option object for a property of the BaseElement propertyOptions option
+ * @typedef {Object} PropertyOption
  * @property {undefined | boolean | function} [reflect] - When set to true the element will reflect property changes back to attributes if the attribute was not present when connecting the element. By default, all attributes that are present when connecting the element will be reflected anyway. Default is `undefined`
  * @property {undefined | boolean | function} [parse] - When set to false the element will not automatically try to parse the attributes string value to a complex type (number, array, object). Default is `undefined`
  * @property {undefined | boolean | function} [notify] - When set to true the element will dispatch CustomEvents for every property/attribute change. The event name will be the property name all lowercase and camel to dashes with a postfix of -changed. Default is `undefined`

package/src/TemplateElement.js

@@ -31,13 +31,13 @@ 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();
 	}
 
 	/**
 	 * The template method should be overridden in extending elements and return the template to be rendered to the root
-	 * @returns {TemplateResult}
+	 * @returns {TemplateResult | string}
 	 */
 	template() {
 		return html``;
@@ -57,12 +57,7 @@ class TemplateElement extends StyledElement {
 	 */
 	renderTemplate() {
 		const template = this._template || this.template();
-		if (typeof template === 'string') {
-			// just a plain string literal. no lit-html required
-			this.getRoot().innerHTML = `${template}`;
-		} else {
-			render(template, this.getRoot());
-		}
+		render(template, this.getRoot());
 	}
 
 	/**

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/dom-parts/render.js

@@ -4,7 +4,12 @@
  * @param {Element} domNode
  */
 const render = (template, domNode) => {
-	template.renderInto(domNode);
+	if (typeof template === 'string') {
+		// just a plain string (or literal)
+		domNode.innerHTML = template;
+	} else {
+		template.renderInto(domNode);
+	}
 };
 
 export { render };

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;
 };