perf: remove async option for generateTemplate

BREAKING CHANGE: Adapters must now return an element synchronously
erictooth · Aug 28, 2024 · 80dfdef · 80dfdef
1 parent ed63a9c
commit 80dfdef
Show file tree

Hide file tree

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

diff --git a/src/adapters/SVGFetchAdapter.ts b/src/adapters/SVGFetchAdapter.ts
@@ -9,40 +9,42 @@ export const SVGFetchAdapter =
     (options: SVGFetchAdapterOptions = {}) =>
     (config: SmartIconOptions) => {
         return class SVGFetchAdapter extends BaseAdapter(config) {
-            async getSvgText(): Promise<Node> {
-                const svgText = await fetch(this.getPath()).then((res) => res.text());
-
+            getSvgText(): Node {
                 const el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                 el.setAttribute("width", "100%");
                 el.setAttribute("height", "100%");
 
-                if (!options.querySelector) {
-                    el.innerHTML = svgText;
-                    return el.children[0];
-                }
+                fetch(this.getPath())
+                    .then((res) => res.text())
+                    .then((svgText) => {
+                        if (!options.querySelector) {
+                            el.innerHTML = svgText;
+                            return el.children[0];
+                        }
 
-                const fragment = document
-                    .createRange()
-                    .createContextualFragment(svgText)
-                    .querySelector(options.querySelector(this.name));
+                        const fragment = document
+                            .createRange()
+                            .createContextualFragment(svgText)
+                            .querySelector(options.querySelector(this.name));
 
-                const viewBox = (fragment && fragment.getAttribute("viewBox")) || "";
+                        const viewBox = (fragment && fragment.getAttribute("viewBox")) || "";
 
-                if (viewBox) {
-                    el.setAttribute("viewBox", viewBox);
-                }
+                        if (viewBox) {
+                            el.setAttribute("viewBox", viewBox);
+                        }
 
-                if (fragment) {
-                    el.innerHTML = fragment.innerHTML;
-                }
+                        if (fragment) {
+                            el.innerHTML = fragment.innerHTML;
+                        }
+                    });
 
                 return el;
             }
             generateTemplate() {
                 return this.getSvgText();
             }
             update = async () => {
-                this.replaceChildren(await this.getSvgText());
+                this.replaceChildren(this.getSvgText());
             };
         };
     };
diff --git a/src/define.ts b/src/define.ts
@@ -13,8 +13,8 @@ const createdElems: Record<string, DefineResult> = {};
 export const define: DefineFn = (componentName, options) => {
     if (!globalThis || !globalThis.customElements) {
         return {
-            update: () => undefined
-        }
+            update: () => undefined,
+        };
     }
     if (globalThis.customElements.get(componentName)) {
         if (createdElems[componentName]) {