refactor: don't use this.attributes

PatrickJS · PatrickJS · commit 5655befd5bbb · 2024-10-31T10:30:51.000-07:00
diff --git a/packages/custom-element-signals/src/let-signal.ts b/packages/custom-element-signals/src/let-signal.ts
@@ -30,12 +30,6 @@ export class LetSignal<T> extends HTMLElement {
 
   signal: null | Signal<T> = null;
   _signalRegistry: SignalStoreInstance;
-
-  attributes!: NamedNodeMap & {
-    name: { value: string };
-    value: { value: string };
-    save: { value: string };
-  };
   constructor() {
     super();
     // if ((globalThis as any).signalRegistry) {
@@ -60,7 +54,7 @@ export class LetSignal<T> extends HTMLElement {
   createSignal(name: string, value?: any) {
     // Use the value attribute if it exists, otherwise use the innerHTML
     if (value === undefined) {
-      const strValue = this.attributes?.["value"]?.value || this.innerHTML ||
+      const strValue = this.getAttribute("value") || this.innerHTML ||
         "";
       value = parseAttributeValue(strValue);
     }
@@ -71,13 +65,13 @@ export class LetSignal<T> extends HTMLElement {
     // attributeChangedCallback fires before connectedCallback
     this.ready = true;
 
-    const name = this.attributes["name"]?.value;
+    const name = this.getAttribute("name");
     if (!name) {
       throw new Error("let-signal must have a name attribute");
     }
     // console.log('connectedCallback', name)
 
-    const save = this.attributes["save"]?.value;
+    const save = this.getAttribute("save");
     let value = undefined;
     // use handler registry
     if (save) {
@@ -131,8 +125,10 @@ export class LetSignal<T> extends HTMLElement {
   }
 
   disconnectedCallback() {
-    const name = this.attributes["name"].value;
-    this._signalRegistry.delete(name);
+    const name = this.getAttribute("name");
+    if (name) {
+      this._signalRegistry.delete(name);
+    }
     this.ready = false;
     // (this as any)._signalRegistry = null;
     this.signal?.cleanUp();
diff --git a/packages/custom-element-signals/src/signal-html.ts b/packages/custom-element-signals/src/signal-html.ts
@@ -6,11 +6,6 @@ import { getTemplateContent } from "./utils/template-helpers";
 
 export class SignalHtml extends HTMLElement {
   static observedAttributes = ["name", "template-id"];
-  attributes!: NamedNodeMap & {
-    name: { value: string };
-    "template-id"?: { value: string };
-  };
-
   private signal: Signal<any> | null = null;
   private cleanUp: (() => void) | null = null;
   private template: string = '';
@@ -30,12 +25,12 @@ export class SignalHtml extends HTMLElement {
   
   connectedCallback() {
     if (!this.isConnected) return;
-    const name = this.attributes["name"]?.value;
+    const name = this.getAttribute("name");
     if (!name) {
       throw new Error("signal-html must have a name attribute");
     }
 
-    const templateId = this.attributes["template-id"]?.value || generateTemplateId(this);
+    const templateId = this.getAttribute("template-id") || generateTemplateId(this);
     const content = getTemplateContent(this, templateId, "signal-html");
     
     if (content) {
diff --git a/packages/custom-element-signals/src/signal-text.ts b/packages/custom-element-signals/src/signal-text.ts
@@ -8,11 +8,6 @@ export class SignalText extends HTMLElement {
     "watch"
   ];
 
-  attributes!: NamedNodeMap & {
-    name: { value: string };
-    watch?: { value: string };
-  };
-
   signal: null | Signal<any> = null;
   _signalRegistry: Map<string, Signal<any>>;
   _watch: string | null = null;
@@ -29,8 +24,8 @@ export class SignalText extends HTMLElement {
 
   connectedCallback() {
     this.mounted = true;
-    const name = this.attributes["name"]?.value;
-    this._watch = this.attributes["watch"]?.value ?? null;
+    const name = this.getAttribute("name");
+    this._watch = this.getAttribute("watch") ?? null;
     if (!name) {
       throw new Error("signal-text must have a name attribute");
     }
