@webtides/element-js 1.1.3 → 1.1.4

package/CHANGELOG.md

@@ -16,6 +16,11 @@ to [Semantic Versioning](http://semver.org/).
 <!-- ### Removed -->
 <!-- ### Fixed -->
 
+## [1.1.4] - 2024-11-12
+
+### FIXED
+
+- Fixed rendering interpolations inside textarea nodes ([#133](https://github.com/webtides/element-js/issues/133))
 
 ## [1.1.3] - 2024-11-11
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webtides/element-js",
-    "version": "1.1.3",
+    "version": "1.1.4",
     "module": "index.js",
     "main": "index.js",
     "type": "module",

package/src/dom-parts/AttributePart.js

@@ -7,8 +7,6 @@ import { Part } from './Part.js';
  * @return {(function(*): void)|*}
  */
 const processBooleanAttribute = (node, name, oldValue) => {
-    // TODO: It would be better if the ?boolean= attribute would not be there in the first place...
-    node.removeAttribute(`?${name}`);
     return (newValue) => {
         const value = !!newValue?.valueOf() && newValue !== 'false';
         if (oldValue !== value) {
@@ -23,8 +21,6 @@ const processBooleanAttribute = (node, name, oldValue) => {
  * @return {(function(*): void)|*}
  */
 const processPropertyAttribute = (node, name) => {
-    // TODO: It would be better if the .property= attribute would not be there in the first place...
-    node.removeAttribute(`.${name}`);
     return (value) => {
         node[name] = value;
     };
@@ -36,9 +32,6 @@ const processPropertyAttribute = (node, name) => {
  * @return {(function(*): void)|*}
  */
 const processEventAttribute = (node, name) => {
-    // TODO: It would be better if the event attribute would not be there in the first place...
-    node.removeAttribute(name);
-
     let oldValue = undefined;
     let type = name.startsWith('@') ? name.slice(1) : name.toLowerCase().slice(2);
 

package/src/dom-parts/RawTextNodePart.js

@@ -0,0 +1,64 @@
+import { Part } from './Part.js';
+
+/** @type {Map<Element, RawTextNodePart>} */
+const rawTextNodePartsCache = new WeakMap();
+
+/**
+ * For updating a node that can only be updated via node.textContent
+ * The nodes are: script | style | textarea | title
+ */
+export class RawTextNodePart extends Part {
+    /** @type {Node} */
+    node = undefined;
+
+    interpolations = 1;
+    values = [];
+    currentValueIndex = 0;
+    initialValue = undefined;
+
+    /**
+     * @param {Node} node
+     * @param {string} initialValue
+     */
+    constructor(node, initialValue) {
+        // If we have multiple raw text node parts for the same node, it means we have multiple
+        // interpolations inside that node. Instead of creating a new part, we will return the same
+        // as before and let it defer the update until the last interpolation gets updated
+        const rawTextNodePart = rawTextNodePartsCache.get(node.nextElementSibling);
+        if (rawTextNodePart) {
+            rawTextNodePart.interpolations++;
+            node.__part = rawTextNodePart; // add Part to comment node for debugging in the browser
+            return rawTextNodePart;
+        }
+
+        super();
+        this.initialValue = initialValue;
+        node.__part = this; // add Part to comment node for debugging in the browser
+        this.node = node.nextElementSibling;
+        rawTextNodePartsCache.set(node.nextElementSibling, this);
+    }
+
+    /**
+     * @param {string} value
+     */
+    update(value) {
+        // If we only have one sole interpolation, we can just apply the update
+        if (this.interpolations === 1) {
+            this.node.textContent = value;
+            return;
+        }
+
+        // Instead of applying the update immediately, we check if the part has multiple interpolations
+        // and store the values for each interpolation in a list
+        this.values[this.currentValueIndex++] = value;
+
+        // Only the last call to update (for the last interpolation) will actually trigger the update
+        // on the DOM processor. Here we can reset everything before the next round of updates
+        if (this.interpolations === this.currentValueIndex) {
+            this.currentValueIndex = 0;
+            let replaceIndex = 0;
+            // Note: this will coarse the values into strings, but it's probably ok since we are writing to raw text (only) nodes?!
+            this.node.textContent = this.initialValue.replace(/\x03/g, () => this.values[replaceIndex++]);
+        }
+    }
+}

package/src/dom-parts/TemplatePart.js

@@ -4,6 +4,7 @@ import { TemplateResult } from './TemplateResult.js';
 import { AttributePart } from './AttributePart.js';
 import { ChildNodePart, processNodePart } from './ChildNodePart.js';
 import { NodePart } from './NodePart.js';
+import { RawTextNodePart } from './RawTextNodePart.js';
 
 /** @type {Map<TemplateStringsArray, Part[]>} */
 const partsCache = new WeakMap();
@@ -124,6 +125,9 @@ export class TemplatePart extends Part {
                     if (part.type === 'attribute') {
                         return new AttributePart(part.node, part.name, part.initialValue);
                     }
+                    if (part.type === 'raw-text-node') {
+                        return new RawTextNodePart(part.node, part.initialValue);
+                    }
                     if (part.type === 'directive') {
                         return new NodePart(part.node, templateResult.values[index]);
                     }

package/src/dom-parts/TemplateResult.js

@@ -3,6 +3,7 @@ import { encodeAttribute, isObjectLike } from '../util/AttributeParser.js';
 import { TemplatePart } from './TemplatePart.js';
 
 const voidElements = /^(?:area|base|br|col|embed|hr|img|input|link|meta|source|track|wbr)$/i;
+const rawTextElements = /<(script|style|textarea|title)([^>]*)>(.*?)<\/\1>/i;
 const elements = /<([a-z]+[a-z0-9:._-]*)([^>]*?)(\/?)>/g;
 // TODO: v this will not match any values with escaped quotes like onClick='console.log("\'test")'
 const attributes = /([^\s]*)=((?:")[^"]*(?:")|(?:')[^']*(?:')|[^\s\/>]*)|([^\s\/>]*)/g;
@@ -12,52 +13,115 @@ const partPositions = /[\x01\x02]/g;
 // \x03 COMMENT.ATTRIBUTE_TOKEN
 // \x04 Node.ATTRIBUTE_TOKEN
 
-const interpolation = new RegExp(`(<!--dom-part-(\\d+)--><!--/dom-part-(\\d+)-->|(\\S[-\\w]+)="\x04(")?|\x04)`, 'g');
+const ssrPlaceholder = /{{dom-part\?(.*?)}}/g;
+function makeSSRPlaceholder(type, params) {
+    const urlSearchParams = new URLSearchParams({ type, ...params });
+    const queryString = urlSearchParams.toString();
+    return `{{dom-part?${queryString}}}`;
+}
 
 /**
  * Given a template, find part positions as both nodes and attributes and
  * return a string with placeholders as either comment nodes or named attributes.
  * @param {TemplateStringsArray | string[]} templateStrings a template literal tag array
- * @param {string} attributePlaceholders replace placeholders inside attribute values with this value
+ * @param {boolean} ssr replace interpolations with placeholders
  * @returns {string} X/HTML with prefixed comments or attributes
  */
-export const createTemplateString = (templateStrings, attributePlaceholders = '') => {
-    // TODO: make it easier to identify attribute and node parts for SSR and leave the comments at those positions to be replaced in toString()
+export const createTemplateString = (templateStrings, ssr = false) => {
     let partIndex = 0;
     // join all interpolations (for values) with a special placeholder and remove any whitespace
     let template = templateStrings.join('\x01').trim();
     // find (match) all elements to identify their attributes
     template = template.replace(elements, (_, name, attributesString, trailingSlash) => {
-        let elementTagWithAttributes = name + attributesString.replaceAll('\x01', attributePlaceholders).trimEnd();
+        let elementTagWithAttributes = name + attributesString;
         // 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) => {
             if (directive && directive === '\x01') {
+                elementTagWithAttributes = elementTagWithAttributes.replace(
+                    attribute,
+                    ssr ? makeSSRPlaceholder('directive') : '',
+                );
                 return `<!--\x02$-->`;
             }
 
             // remove quotes from attribute value to normalize the value
-            const value =
-                valueWithQuotes?.startsWith('"') || valueWithQuotes?.startsWith("'")
-                    ? valueWithQuotes.slice(1, -1)
-                    : valueWithQuotes;
+            const hasQuotes = valueWithQuotes?.startsWith('"') || valueWithQuotes?.startsWith("'");
+            const quotes = hasQuotes ? valueWithQuotes.at(0) : '';
+            const value = hasQuotes ? valueWithQuotes.slice(1, -1) : valueWithQuotes;
             const partsCount = (attribute.match(/\x01/g) || []).length;
             const parts = [];
             for (let index = 0; index < partsCount; index++) {
+                // TODO: maybe we could use url parameters here?! -> ?type=attribute&name=${name}&initialValue=${initialValue}
                 parts.push(`<!--\x02:${name}=${value.replaceAll('\x01', '\x03')}-->`);
             }
+
+            if (parts.length > 0) {
+                let replacement = '';
+                if (ssr) {
+                    for (let index = 0; index < partsCount - 1; index++) {
+                        replacement = replacement + makeSSRPlaceholder('noop');
+                    }
+                    replacement =
+                        replacement +
+                        makeSSRPlaceholder('attribute', {
+                            name,
+                            interpolations: partsCount,
+                            initialValue: value.replaceAll('\x01', '\x03'),
+                            quotes,
+                        });
+                }
+                elementTagWithAttributes = elementTagWithAttributes.replace(attribute, replacement);
+            }
+
             return parts.join('');
         });
         // TODO create test to check if lf are in place
         return `
 				${attributesString.includes('\x01') ? attributeParts : ''}\n
-				<${elementTagWithAttributes}>\n
+				<${elementTagWithAttributes.trimEnd()}>\n
 			`.trim();
     });
+    /**
+     * Processes the HTML template content by identifying specific "raw text" nodes (e.g., <script>, <style>, <textarea>, <title>)
+     * and inserts comments before each instance of an interpolation within these nodes.
+     * The placeholders are represented by a control character (in this case, "\x01").
+     *
+     * Explanation of logic:
+     * - The main regex, `rawTextElements`, identifies and captures specific HTML tags (script, style, textarea, title)
+     *   along with their attributes and content. This regex captures:
+     *     1. `tag`: The tag name (e.g., "textarea").
+     *     2. `attributes`: Any attributes within the opening tag (e.g., `foo="bar"`).
+     *     3. `content`: The inner content within the tag (which may contain interpolations).
+     * - Inside the replace function:
+     *     - The number of placeholder occurrences (`\x01` instances) in `content` is counted to determine
+     *       how many parts (comments) should be generated.
+     *     - An array `parts` is created, where each entry represents a comment to be inserted before the raw text node.
+     *       Each comment includes a modified version of `content` where each placeholder (`\x01`) is replaced with a
+     *       different control character (`\x03`) for later differentiation.
+     *     - The `content` is then modified by removing each interpolation (`\x01` is removed), leaving the raw text
+     *       content without markers.
+     *     - The processed comments in `parts` are joined and placed before the modified raw text node, preserving
+     *       its tag, attributes, and inner content without placeholders.
+     * - The function finally returns the modified template string with comments in the correct places.
+     */
+    template = template.replace(rawTextElements, (match, tag, attributes, content) => {
+        const partsCount = (content.match(/\x01/g) || []).length;
+        const parts = [];
+        for (let index = 0; index < partsCount; index++) {
+            // TODO: maybe we could use url parameters here?! -> ?type=raw-text-node&initialValue=${initialValue}
+            parts.push(`<!--\x02/raw-text-node=${content.replaceAll('\x01', '\x03')}-->`);
+        }
+        const parsedContent = content.replaceAll('\x01', ssr ? makeSSRPlaceholder('raw-text-node') : '');
+        return `${parts.join('')}<${tag}${attributes}>${parsedContent}</${tag}>`;
+    });
     // replace interpolation placeholders with our indexed markers
     template = template.replace(partPositions, (partPosition) => {
         if (partPosition === '\x01') {
+            if (ssr) {
+                return `<!--dom-part-${partIndex}-->${makeSSRPlaceholder('node')}<!--/dom-part-${partIndex++}-->`;
+            }
             return `<!--dom-part-${partIndex}--><!--/dom-part-${partIndex++}-->`;
         } else if (partPosition === '\x02') {
             return `dom-part-${partIndex++}`;
@@ -71,13 +135,11 @@ export const createTemplateString = (templateStrings, attributePlaceholders = ''
 /**
  * @param {String} name
  * @param {any} value
- * @param {Boolean} isSingleValue
+ * @param {string} quotes
  * @return {String}
  */
-const attribute = (name, value, isSingleValue = true) => {
-    return ` ${name}="${encodeAttribute(isObjectLike(value) ? JSON.stringify(value) : value)}${
-        isSingleValue ? '"' : ''
-    }`;
+const attribute = (name, value, quotes = '"') => {
+    return ` ${name}=${quotes}${encodeAttribute(isObjectLike(value) ? JSON.stringify(value) : value)}${quotes}`;
 };
 
 /**
@@ -111,11 +173,14 @@ const getValue = (value) => {
     return value == null ? '' : encodeAttribute(String(value));
 };
 
-/** @type {Map<TemplateStringsArray, *[]>} */
-const parsedUpdates = new WeakMap();
+/** @type {Map<TemplateStringsArray, string>} */
+const ssrTemplateStringsCache = new WeakMap();
+
+/** @type {Map<TemplateStringsArray, (() => String)[]>} */
+const ssrUpdatesCache = new WeakMap();
 
 /** @type {Map<Element, TemplatePart>} */
-const templateParts = new WeakMap();
+const templatePartsCache = new WeakMap();
 
 export class TemplateResult {
     /**
@@ -132,7 +197,7 @@ export class TemplateResult {
      */
     renderInto(domNode) {
         let serverSideRendered = false;
-        let templatePart = templateParts.get(domNode);
+        let templatePart = templatePartsCache.get(domNode);
         if (!templatePart) {
             const startNode = Array.from(domNode.childNodes)
                 .filter((node) => node.nodeType === COMMENT_NODE)
@@ -141,7 +206,7 @@ export class TemplateResult {
             serverSideRendered = startNode !== undefined;
 
             templatePart = new TemplatePart(startNode, this);
-            templateParts.set(domNode, templatePart);
+            templatePartsCache.set(domNode, templatePart);
 
             if (!serverSideRendered) {
                 domNode.replaceChildren(...templatePart.childNodes);
@@ -152,100 +217,130 @@ export class TemplateResult {
     }
 
     /**
-     * @param {String[]} strings
+     * @param {TemplateStringsArray} strings
      * @return {(() => String)[]}
      */
-    parse(strings) {
-        const html = createTemplateString(strings, '\x04');
-        const parts = [];
-        let i = 0;
-        let match = null;
-        while ((match = interpolation.exec(html))) {
-            const pre = html.slice(i, match.index);
-            i = match.index + match[0].length;
-            if (match[2]) {
-                // ChildNodePart
-                const index = match[2];
-                parts.push((value) => `${pre}<!--dom-part-${index}-->${getValue(value)}<!--/dom-part-${index}-->`);
-            } else if (match[4]) {
-                // AttributePart with single interpolation or the first interpolation right after the attribute=
-                const isSingleValue = match[5] !== undefined;
-                let name = match[4];
-                switch (true) {
-                    case name[0] === '?':
-                        const booleanName = name.slice(1).toLowerCase();
-                        parts.push((value) => {
-                            if (!value) return '';
-                            return `${pre} ${booleanName}=""`;
-                        });
-                        break;
-                    case name[0] === '.':
-                        const lower = name.slice(1).toLowerCase();
-                        parts.push((value) => {
-                            let result = pre;
-                            // null, undefined, and false are not shown at all
-                            if (value === null || value === undefined || value === '') {
-                                result += attribute(lower, '');
-                            } else {
-                                // in all other cases, just escape it in quotes
-                                result += attribute(lower, value, isSingleValue);
-                            }
-                            return result;
-                        });
-                        break;
-                    case name[0] === '@':
-                        name = 'on' + name.slice(1);
-                    case name[0] === 'o' && name[1] === 'n':
-                        parts.push((value) => {
-                            return pre;
-                        });
-                        break;
-                    default:
-                        parts.push((value) => {
-                            let result = pre;
-                            if (value != null) {
-                                result += attribute(name, value, isSingleValue);
-                            }
-                            return result;
+    parseSSRUpdates(strings) {
+        let templateString = ssrTemplateStringsCache.get(strings);
+
+        if (!templateString) {
+            templateString = createTemplateString(strings, true);
+            ssrTemplateStringsCache.set(strings, templateString);
+        }
+
+        let updates = ssrUpdatesCache.get(strings);
+
+        if (!updates) {
+            const partMatches = [...templateString.matchAll(ssrPlaceholder)].map((match) => match[0]);
+            updates = partMatches.flatMap((match) => {
+                const placeholderContent = match.replace('{{', '').replace('}}', '');
+                const [_, paramsString] = placeholderContent.split('?');
+                const searchParams = new URLSearchParams(paramsString);
+                const type = searchParams.get('type');
+                if (type === 'noop') return [];
+                if (type === 'attribute') {
+                    const name = searchParams.get('name');
+                    const quotes = searchParams.get('quotes');
+
+                    if (name.startsWith('?')) {
+                        const booleanName = name.replace('?', '');
+                        return [
+                            {
+                                type: 'attribute',
+                                processor: (value) => {
+                                    if (!value) return '';
+                                    return `${booleanName}=""`;
+                                },
+                            },
+                        ];
+                    }
+
+                    if (name.startsWith('.')) {
+                        const propertyName = name.replace('.', '');
+                        return [
+                            {
+                                type: 'attribute',
+                                processor: (value) => {
+                                    // null, undefined, and false are not shown at all
+                                    if (value === null || value === undefined || value === '') {
+                                        return '';
+                                    }
+                                    // in all other cases, just escape it in quotes
+                                    return attribute(propertyName, value, quotes);
+                                },
+                            },
+                        ];
+                    }
+
+                    if (name.startsWith('@') || name.startsWith('on')) {
+                        return [
+                            {
+                                type: 'attribute',
+                                processor: (value) => {
+                                    // event handlers have nothing to do on the server side
+                                    return '';
+                                },
+                            },
+                        ];
+                    }
+
+                    const interpolations = searchParams.get('interpolations');
+                    let values = [];
+                    const attributeUpdates = [];
+                    for (let index = 0; index < interpolations - 1; index++) {
+                        attributeUpdates.push({
+                            type: 'noop',
+                            processor: (value) => {
+                                values.push(value);
+                                return '';
+                            },
                         });
-                        break;
-                }
-            } else {
-                // AttributePart in the middle of an attribute value or NodePart
-                parts.push((value) => {
-                    let result = pre;
-                    // TODO: we currently cannot distinguish between NodeParts and AttributeParts before
-                    if (isObjectLike(value) && value.directiveClass) {
-                        // NodePart
-                        const directive = new value.directiveClass();
-                        result += directive.stringify(...value.values);
-                    } else if (value != null) {
-                        result += encodeAttribute(isObjectLike(value) ? JSON.stringify(value) : value);
                     }
-                    return result;
-                });
-            }
+                    attributeUpdates.push({
+                        type: 'attribute',
+                        name: searchParams.get('name'),
+                        interpolations,
+                        initialValue: searchParams.get('initialValue'),
+                        processor: (value) => {
+                            values.push(value);
+                            const initialValue = searchParams.get('initialValue');
+                            let replaceIndex = 0;
+                            // Note: this will coarse the values into strings, but it's probably ok since there can only be multiple values in string attributes?!
+                            const parsedValue = initialValue.replace(/\x03/g, () => values[replaceIndex++]);
+                            values = [];
+                            return attribute(searchParams.get('name'), parsedValue, quotes);
+                        },
+                    });
+                    return attributeUpdates;
+                }
+                if (type === 'node') return [{ type: 'node', processor: (value) => getValue(value) }];
+                if (type === 'raw-text-node') return [{ type: 'raw-text-node', processor: (value) => getValue(value) }];
+                if (type === 'directive')
+                    return [
+                        {
+                            type: 'directive',
+                            processor: (value) => {
+                                const directive = new value.directiveClass();
+                                return directive.stringify(...value.values);
+                            },
+                        },
+                    ];
+            });
+            ssrUpdatesCache.set(strings, updates);
         }
 
-        // We couldn't correctly parse parts from the template
-        if (parts.length !== strings.length - 1) {
+        // We couldn't correctly parse updates from the template
+        if (updates.length !== strings.length - 1) {
             throw {
                 name: 'ParseTemplateError',
-                message: 'Could not parse parts from template correctly. Parts length has not the expected length.',
+                message: 'Could not parse updates from template correctly. Updates length has not the expected length.',
                 strings,
-                templateString: html,
-                parts,
+                templateString,
+                updates,
             };
         }
 
-        if (parts.length) {
-            const last = parts[parts.length - 1];
-            const chunk = html.slice(i);
-            parts[parts.length - 1] = (value) => last(value) + chunk;
-        } else {
-            parts.push(() => html);
-        }
-        return parts;
+        return updates;
     }
 
     /**
@@ -294,6 +389,17 @@ export class TemplateResult {
                 });
                 continue;
             }
+            if (/^dom-part-\d+\/raw-text-node/.test(node.data)) {
+                // For html`<textarea>${'foo'} bar</textarea>` we will get:
+                // <!--dom-part-0/raw-text-node=\x03 bar-->
+                const [_, ...initialValue] = node.data.split('=');
+                parts.push({
+                    type: 'raw-text-node',
+                    path: getNodePath(node),
+                    initialValue: initialValue.join('='),
+                });
+                continue;
+            }
             if (/^dom-part-\d+\$/.test(node.data)) {
                 parts.push({ type: 'directive', path: getNodePath(node) });
             }
@@ -328,13 +434,12 @@ export class TemplateResult {
     }
 
     toString() {
-        let updates = parsedUpdates.get(this.strings);
-
-        if (!updates) {
-            updates = this.parse(this.strings);
-            parsedUpdates.set(this.strings, updates);
-        }
+        const updates = this.parseSSRUpdates(this.strings);
+        let template = ssrTemplateStringsCache.get(this.strings);
 
-        return this.values.length ? this.values.map((value, index) => updates[index](value)).join('') : updates[0]();
+        let index = 0;
+        return template.replaceAll(ssrPlaceholder, () => {
+            return updates[index].processor(this.values[index++]);
+        });
     }
 }