fix: replace eventbus with document query to force icons to re-render

erictooth · Aug 27, 2024 · 4fd6e4f · 4fd6e4f
1 parent 7fa58cd
commit 4fd6e4f
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 25 deletions.
diff --git a/src/BaseAdapter.ts b/src/BaseAdapter.ts
@@ -1,7 +1,6 @@
-import { Events } from "./events";
-import { SmartIconOptions, EventBus } from "./types";
+import { SmartIconOptions } from "./types";
 
-export const BaseAdapter = (config: SmartIconOptions, eventBus: EventBus) =>
+export const BaseAdapter = (config: SmartIconOptions) =>
     class SmartIcon extends HTMLElement {
         constructor() {
             super();
@@ -40,16 +39,11 @@ export const BaseAdapter = (config: SmartIconOptions, eventBus: EventBus) =>
             if (template) {
                 this.replaceChildren(template);
             }
-            eventBus.addEventListener(Events.UPDATED, this.update);
         }
 
         attributeChangedCallback(attrName: string): void {
             if (this.children[0] && attrName === "name") {
                 this.update();
             }
         }
-
-        disconnectedCallback(): void {
-            eventBus.removeEventListener(Events.UPDATED, this.update);
-        }
     };
diff --git a/src/adapters/SVGFetchAdapter.ts b/src/adapters/SVGFetchAdapter.ts
@@ -1,4 +1,4 @@
-import { SmartIconOptions, EventBus } from "../types";
+import { SmartIconOptions } from "../types";
 import { BaseAdapter } from "../BaseAdapter";
 
 type SVGFetchAdapterOptions = {
@@ -7,8 +7,8 @@ type SVGFetchAdapterOptions = {
 
 export const SVGFetchAdapter =
     (options: SVGFetchAdapterOptions = {}) =>
-    (config: SmartIconOptions, eventBus: EventBus) => {
-        return class SVGFetchAdapter extends BaseAdapter(config, eventBus) {
+    (config: SmartIconOptions) => {
+        return class SVGFetchAdapter extends BaseAdapter(config) {
             async getSvgText(): Promise<Node> {
                 const svgText = await fetch(this.getPath()).then((res) => res.text());
 

diff --git a/src/adapters/SVGUseAdapter.ts b/src/adapters/SVGUseAdapter.ts
@@ -1,8 +1,8 @@
-import { SmartIconOptions, EventBus } from "../types";
+import { SmartIconOptions } from "../types";
 import { BaseAdapter } from "../BaseAdapter";
 
-export const SVGUseAdapter = (config: SmartIconOptions, eventBus: EventBus) =>
-    class SVGUseAdapter extends BaseAdapter(config, eventBus) {
+export const SVGUseAdapter = (config: SmartIconOptions) =>
+    class SVGUseAdapter extends BaseAdapter(config) {
         generateTemplate() {
             const href = this.getPath();
             const el = document.createElementNS("http://www.w3.org/2000/svg", "svg");

diff --git a/src/define.ts b/src/define.ts
@@ -1,5 +1,4 @@
-import { Events } from "./events";
-import { DefineOptions, SmartIconOptions, EventBus } from "./types";
+import { DefineOptions, SmartIconOptions } from "./types";
 
 type DefineResult = {
     update: (
@@ -34,13 +33,15 @@ export const define: DefineFn = (componentName, options) => {
         aliases: options.aliases || {},
     };
 
-    const eventBus: EventBus = new Comment("smart-icon-events");
-
     const triggerUpdate = (): void => {
-        eventBus.dispatchEvent(new CustomEvent(Events.UPDATED));
+        for (const el of document.querySelectorAll(componentName)) {
+            if ("update" in el && typeof el.update === "function") {
+                el.update();
+            }
+        }
     };
 
-    globalThis.customElements.define(componentName, options.adapter(config, eventBus));
+    globalThis.customElements.define(componentName, options.adapter(config));
 
     const result: DefineResult = {
         update: (options) => {

diff --git a/src/events.ts b/src/events.ts
diff --git a/src/types.ts b/src/types.ts
@@ -10,5 +10,3 @@ export type DefineOptions = {
     aliases?: SmartIconOptions["aliases"];
     resolvePath: SmartIconOptions["resolvePath"];
 };
-
-export type EventBus = Comment;