feat: use data attr instead of id + prep dist

stampedai · Dec 8, 2023 · eee1bd4 · eee1bd4
1 parent 466978e
commit eee1bd4
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 29 deletions.
diff --git a/dist/turbo.es2017-esm.js b/dist/turbo.es2017-esm.js
@@ -360,17 +360,17 @@ function nextMicrotask() {
 function parseHTMLDocument(html = "") {
     const styleMap = {};
     html = html.replace(/<(\w+)([^>]*)style="([^"]*)"/g, (match, tag, otherAttrs, style) => {
-        const id = Math.random().toString(36).substr(2, 9);
-        styleMap[id] = style;
-        return `<${tag}${otherAttrs}id="${id}"`;
+        const uniqueKey = Math.random().toString(36).substr(2, 9);
+        styleMap[uniqueKey] = style;
+        return `<${tag}${otherAttrs.trim()} data-style-attribute="${uniqueKey}"`;
     });
     const doc = new DOMParser().parseFromString(html, "text/html");
-    Object.keys(styleMap).forEach(id => {
-        const element = doc.getElementById(id);
-        if (element) {
-            element.style.cssText = styleMap[id];
-            element.removeAttribute("id");
-        }
+    Object.keys(styleMap).forEach(uniqueKey => {
+        const elements = doc.querySelectorAll(`[data-style-attribute="${uniqueKey}"]`);
+        elements.forEach(element => {
+            element.style.cssText = styleMap[uniqueKey];
+            element.removeAttribute("data-style-attribute");
+        });
     });
     return doc;
 }

diff --git a/dist/turbo.es2017-umd.js b/dist/turbo.es2017-umd.js
@@ -366,17 +366,17 @@ Copyright © 2023 37signals LLC
     function parseHTMLDocument(html = "") {
         const styleMap = {};
         html = html.replace(/<(\w+)([^>]*)style="([^"]*)"/g, (match, tag, otherAttrs, style) => {
-            const id = Math.random().toString(36).substr(2, 9);
-            styleMap[id] = style;
-            return `<${tag}${otherAttrs}id="${id}"`;
+            const uniqueKey = Math.random().toString(36).substr(2, 9);
+            styleMap[uniqueKey] = style;
+            return `<${tag}${otherAttrs.trim()} data-style-attribute="${uniqueKey}"`;
         });
         const doc = new DOMParser().parseFromString(html, "text/html");
-        Object.keys(styleMap).forEach(id => {
-            const element = doc.getElementById(id);
-            if (element) {
-                element.style.cssText = styleMap[id];
-                element.removeAttribute("id");
-            }
+        Object.keys(styleMap).forEach(uniqueKey => {
+            const elements = doc.querySelectorAll(`[data-style-attribute="${uniqueKey}"]`);
+            elements.forEach(element => {
+                element.style.cssText = styleMap[uniqueKey];
+                element.removeAttribute("data-style-attribute");
+            });
         });
         return doc;
     }

diff --git a/src/util.ts b/src/util.ts
@@ -66,22 +66,26 @@ export function nextMicrotask() {
   return Promise.resolve()
 }
 
-export function parseHTMLDocument(html = "") {
+export function parseHTMLDocument(html: string = ""): Document {
   const styleMap: { [key: string]: string } = {};
+
+  // Replace style attribute with data-style-attribute and ensure proper spacing
   html = html.replace(/<(\w+)([^>]*)style="([^"]*)"/g, (match, tag, otherAttrs, style) => {
-    const id = Math.random().toString(36).substr(2, 9); 
-    styleMap[id] = style;
-    return `<${tag}${otherAttrs}id="${id}"`;
+    const uniqueKey: string = Math.random().toString(36).substr(2, 9); 
+    styleMap[uniqueKey] = style;
+    // Ensure there is a space before data-style-attribute
+    return `<${tag}${otherAttrs.trim()} data-style-attribute="${uniqueKey}"`;
   });
 
-  const doc = new DOMParser().parseFromString(html, "text/html");
+  const doc: Document = new DOMParser().parseFromString(html, "text/html");
 
-  Object.keys(styleMap).forEach(id => {
-      const element = doc.getElementById(id);
-      if (element) {
-          element.style.cssText = styleMap[id];
-          element.removeAttribute("id");
-      }
+  // Apply styles and remove data-style-attribute
+  Object.keys(styleMap).forEach(uniqueKey => {
+    const elements = doc.querySelectorAll(`[data-style-attribute="${uniqueKey}"]`);
+    elements.forEach(element => {
+        (element as HTMLElement).style.cssText = styleMap[uniqueKey];
+        element.removeAttribute("data-style-attribute");
+    });
   });
 
   return doc;