@webtides/element-js 1.1.4 → 1.1.5

package/CHANGELOG.md

@@ -16,6 +16,12 @@ to [Semantic Versioning](http://semver.org/).
 <!-- ### Removed -->
 <!-- ### Fixed -->
 
+## [1.1.5] - 2024-11-14
+
+### FIXED
+
+- Fixed using special characters in attribute static strings ([#134](https://github.com/webtides/element-js/issues/134))
+
 ## [1.1.4] - 2024-11-12
 
 ### FIXED

package/package.json

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

package/src/dom-parts/AttributePart.js

@@ -49,23 +49,15 @@ const processEventAttribute = (node, name) => {
  * @return {(function(*): void)|*}
  */
 const processAttribute = (node, name) => {
-    let oldValue,
-        orphan = true;
-    const attributeNode = globalThis.document?.createAttributeNS(null, name);
+    let oldValue;
     return (newValue) => {
         const value = newValue?.valueOf();
         if (oldValue !== value) {
-            if ((oldValue = value) == null) {
-                if (!orphan) {
-                    node.removeAttributeNode(attributeNode);
-                    orphan = true;
-                }
+            oldValue = value;
+            if (value == null) {
+                node.removeAttribute(name);
             } else {
-                attributeNode.value = value;
-                if (orphan) {
-                    node.setAttributeNodeNS(attributeNode);
-                    orphan = false;
-                }
+                node.setAttribute(name, value);
             }
         }
     };

package/src/dom-parts/TemplateResult.js

@@ -1,4 +1,4 @@
-import { COMMENT_NODE, getNodePath } from '../util/DOMHelper.js';
+import { COMMENT_NODE, getNodePath, encodeHTML } from '../util/DOMHelper.js';
 import { encodeAttribute, isObjectLike } from '../util/AttributeParser.js';
 import { TemplatePart } from './TemplatePart.js';
 
@@ -8,18 +8,35 @@ 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;
 const partPositions = /[\x01\x02]/g;
+const ssrPlaceholder = /{{dom-part\?(.*?)}}/g;
 // \x01 Node.ELEMENT_NODE
 // \x02 Node.ATTRIBUTE_NODE
 // \x03 COMMENT.ATTRIBUTE_TOKEN
 // \x04 Node.ATTRIBUTE_TOKEN
 
-const ssrPlaceholder = /{{dom-part\?(.*?)}}/g;
-function makeSSRPlaceholder(type, params) {
+/**
+ * Creates a URL query string for meta information to pass along ssr part placeholders
+ * @param type
+ * @param params
+ * @return {string}
+ */
+function makeSSRPlaceholderParams(type, params) {
     const urlSearchParams = new URLSearchParams({ type, ...params });
     const queryString = urlSearchParams.toString();
     return `{{dom-part?${queryString}}}`;
 }
 
+/**
+ * Creates a URL query string for meta information to pass along part comments
+ * @param {string} type
+ * @param {{}} params
+ * @return {string}
+ */
+function makePartParams(type, params) {
+    const urlSearchParams = new URLSearchParams({ type, ...params });
+    return urlSearchParams.toString();
+}
+
 /**
  * Given a template, find part positions as both nodes and attributes and
  * return a string with placeholders as either comment nodes or named attributes.
@@ -41,9 +58,10 @@ export const createTemplateString = (templateStrings, ssr = false) => {
             if (directive && directive === '\x01') {
                 elementTagWithAttributes = elementTagWithAttributes.replace(
                     attribute,
-                    ssr ? makeSSRPlaceholder('directive') : '',
+                    ssr ? makeSSRPlaceholderParams('directive') : '',
                 );
-                return `<!--\x02$-->`;
+                const params = makePartParams('directive');
+                return `<!--\x02?${params}-->`;
             }
 
             // remove quotes from attribute value to normalize the value
@@ -53,19 +71,22 @@ export const createTemplateString = (templateStrings, ssr = false) => {
             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')}-->`);
+                const params = makePartParams('attribute', {
+                    name,
+                    initialValue: value.replaceAll('\x01', '\x03'),
+                });
+                parts.push(`<!--\x02?${params}-->`);
             }
 
             if (parts.length > 0) {
                 let replacement = '';
                 if (ssr) {
                     for (let index = 0; index < partsCount - 1; index++) {
-                        replacement = replacement + makeSSRPlaceholder('noop');
+                        replacement = replacement + makeSSRPlaceholderParams('noop');
                     }
                     replacement =
                         replacement +
-                        makeSSRPlaceholder('attribute', {
+                        makeSSRPlaceholderParams('attribute', {
                             name,
                             interpolations: partsCount,
                             initialValue: value.replaceAll('\x01', '\x03'),
@@ -110,19 +131,19 @@ export const createTemplateString = (templateStrings, ssr = false) => {
         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 params = makePartParams('raw-text-node', {
+                initialValue: content.replaceAll('\x01', '\x03'),
+            });
+            parts.push(`<!--\x02?${params}-->`);
         }
-        const parsedContent = content.replaceAll('\x01', ssr ? makeSSRPlaceholder('raw-text-node') : '');
+        const parsedContent = content.replaceAll('\x01', ssr ? makeSSRPlaceholderParams('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++}-->`;
+            const placeholder = ssr ? makeSSRPlaceholderParams('node') : '';
+            return `<!--dom-part-${partIndex}-->${placeholder}<!--/dom-part-${partIndex++}-->`;
         } else if (partPosition === '\x02') {
             return `dom-part-${partIndex++}`;
         }
@@ -149,7 +170,7 @@ const attribute = (name, value, quotes = '"') => {
 const getValue = (value) => {
     switch (typeof value) {
         case 'string':
-            return encodeAttribute(value);
+            return encodeHTML(value);
         case 'boolean':
         case 'number':
             return String(value);
@@ -170,7 +191,7 @@ const getValue = (value) => {
         case 'function':
             return getValue(value());
     }
-    return value == null ? '' : encodeAttribute(String(value));
+    return value == null ? '' : encodeHTML(String(value));
 };
 
 /** @type {Map<TemplateStringsArray, string>} */
@@ -378,29 +399,32 @@ export class TemplateResult {
                 parts.push({ type: 'node', path: getNodePath(node) });
                 continue;
             }
-            if (/^dom-part-\d+:/.test(node.data)) {
-                const [_, ...attribute] = node.data.split(':');
-                const [name, ...initialValue] = attribute.join(':').split('=');
+            if (/^dom-part-\d+\?type=attribute&(.*?)$/.test(node.data)) {
+                // For html`<div id="${'foo'}" class="${'bar'}"></div>` we will get:
+                // <!--dom-part-0?type=attribute&name=id&initialValue=\x03--><!--dom-part-1?type=attribute&name=class&initialValue=\x03-->
+                const [_, paramsString] = node.data.split('?');
+                const searchParams = new URLSearchParams(paramsString);
                 parts.push({
                     type: 'attribute',
                     path: getNodePath(node),
-                    name: name,
-                    initialValue: initialValue.join('='),
+                    name: searchParams.get('name'),
+                    initialValue: searchParams.get('initialValue'),
                 });
                 continue;
             }
-            if (/^dom-part-\d+\/raw-text-node/.test(node.data)) {
+            if (/^dom-part-\d+\?type=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('=');
+                // <!--dom-part-0?type=raw-text-node&initialValue=\x03 bar-->
+                const [_, paramsString] = node.data.split('?');
+                const searchParams = new URLSearchParams(paramsString);
                 parts.push({
                     type: 'raw-text-node',
                     path: getNodePath(node),
-                    initialValue: initialValue.join('='),
+                    initialValue: searchParams.get('initialValue'),
                 });
                 continue;
             }
-            if (/^dom-part-\d+\$/.test(node.data)) {
+            if (/^dom-part-\d+\?type=directive$/.test(node.data)) {
                 parts.push({ type: 'directive', path: getNodePath(node) });
             }
         }

package/src/util/AttributeParser.js

@@ -125,29 +125,23 @@ export function camelToDash(string) {
 }
 
 /**
- * Decodes an attribute.
+ * Decodes an attribute according to {@link https://html.spec.whatwg.org/multipage/syntax.html#attributes-2}
  * @param {string} attribute
  * @returns {string}
  */
 export function decodeAttribute(attribute) {
-    return `${attribute}`
-        .replace(/&lt;/g, '<')
-        .replace(/&gt;/g, '>')
-        .replace(/&quot;/g, '"')
-        .replace(/&apos;/g, "'");
+    return `${attribute}`.replace(/&quot;/g, '"').replace(/&amp;/g, '&');
 }
 
 /**
- * Encodes an attribute.
+ * Encodes an attribute according to {@link https://html.spec.whatwg.org/multipage/syntax.html#attributes-2}
  * @param {string} attribute
  * @returns {string}
  */
 export function encodeAttribute(attribute) {
     return `${attribute}`
-        .replace(/'/g, '&apos;')
+        .replace(/&/g, '&amp;')
         .replace(/"/g, '&quot;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
         .replace(/\r\n/g, '\n')
         .replace(/[\r\n]/g, '\n');
 }

package/src/util/DOMHelper.js

@@ -305,3 +305,33 @@ export const diffNodes = function (templateNode, domNode, shouldDiffChildNodes =
         }
     }
 };
+
+/**
+ * Decodes a html string
+ * @param {string} html
+ * @returns {string}
+ */
+export function decodeHTML(html) {
+    return `${html}`
+        .replace(/&/g, '&')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&quot;/g, '"')
+        .replace(/&apos;/g, "'");
+}
+
+/**
+ * Encodes a html string
+ * @param {string} html
+ * @returns {string}
+ */
+export function encodeHTML(html) {
+    return `${html}`
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&apos;')
+        .replace(/\r\n/g, '\n')
+        .replace(/[\r\n]/g, '\n');
+}