fix!: improve performance of element creation

erictooth · Aug 27, 2024 · 8ac887e · 8ac887e
1 parent d991dc4
commit 8ac887e
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 14 deletions.
diff --git a/src/BaseAdapter.ts b/src/BaseAdapter.ts
@@ -27,16 +27,19 @@ export const BaseAdapter = (config: SmartIconOptions, eventBus: EventBus) =>
             this.setAttribute("name", name);
         }
 
-        generateTemplate(): string | PromiseLike<string> {
-            return "";
+        generateTemplate(): Node | PromiseLike<Node> | null {
+            return null;
         }
 
         update = (): void | Promise<void> => {
             return;
         };
 
         async connectedCallback() {
-            this.innerHTML = await this.generateTemplate();
+            const template = await this.generateTemplate();
+            if (template) {
+                this.replaceChildren(template);
+            }
             eventBus.addEventListener(Events.UPDATED, this.update);
         }
 

diff --git a/src/adapters/SVGFetchAdapter.ts b/src/adapters/SVGFetchAdapter.ts
@@ -9,11 +9,16 @@ export const SVGFetchAdapter =
     (options: SVGFetchAdapterOptions = {}) =>
     (config: SmartIconOptions, eventBus: EventBus) => {
         return class SVGFetchAdapter extends BaseAdapter(config, eventBus) {
-            async getSvgText(): Promise<string> {
+            async getSvgText(): Promise<Node> {
                 const svgText = await fetch(this.getPath()).then((res) => res.text());
 
+                const el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                el.setAttribute("width", "100%");
+                el.setAttribute("height", "100%");
+
                 if (!options.querySelector) {
-                    return svgText;
+                    el.innerHTML = svgText;
+                    return el.children[0];
                 }
 
                 const fragment = document
@@ -23,15 +28,21 @@ export const SVGFetchAdapter =
 
                 const viewBox = (fragment && fragment.getAttribute("viewBox")) || "";
 
-                return `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" ${
-                    (viewBox && `viewBox="${viewBox}"`) || ""
-                }>${(fragment && fragment.innerHTML) || null}</svg>`;
+                if (viewBox) {
+                    el.setAttribute("viewBox", viewBox);
+                }
+
+                if (fragment) {
+                    el.innerHTML = fragment.innerHTML;
+                }
+
+                return el;
             }
             generateTemplate() {
                 return this.getSvgText();
             }
             update = async () => {
-                this.innerHTML = await this.generateTemplate();
+                this.replaceChildren(await this.getSvgText());
             };
         };
     };
diff --git a/src/adapters/SVGUseAdapter.ts b/src/adapters/SVGUseAdapter.ts
@@ -5,13 +5,17 @@ export const SVGUseAdapter = (config: SmartIconOptions, eventBus: EventBus) =>
     class SVGUseAdapter extends BaseAdapter(config, eventBus) {
         generateTemplate() {
             const href = this.getPath();
-            return `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><use id="smart-icon__use" xlink:href="${href}" href="${href}" /></svg>`;
+            const el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            el.setAttribute("width", "100%");
+            el.setAttribute("height", "100%");
+            const useEl = document.createElementNS("http://www.w3.org/2000/svg", "use");
+            useEl.setAttribute("href", href);
+            el.replaceChildren(useEl);
+            return el;
         }
 
         update = () => {
-            const useElem = this.querySelector("#smart-icon__use")!;
-            const href = this.getPath();
-            useElem.setAttribute("xlink:href", href);
-            useElem.setAttribute("href", href);
+            const useElem = this.children[0].children[0];
+            useElem.setAttribute("href", this.getPath());
         };
     };