add lit reactive element

folk-systems · Dec 4, 2024 · a7421f9 · a7421f9
1 parent c81eb7c
commit a7421f9
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@babel/parser": "^7.26.2",
+    "@lit/reactive-element": "^2.0.4",
     "leaflet": "^1.9.4",
     "perfect-arrows": "^0.3.7",
     "perfect-freehand": "^1.2.2"

diff --git a/src/common/folk-element.ts b/src/common/folk-element.ts
@@ -1,5 +1,7 @@
+import { ReactiveElement } from '@lit/reactive-element';
+
 // will eventually extend Lit's ReactiveElement
-export class FolkElement extends HTMLElement {
+export class FolkElement extends ReactiveElement {
   static tagName = '';
 
   static define() {

diff --git a/src/folk-base-connection.ts b/src/folk-base-connection.ts
@@ -9,7 +9,7 @@ function parseCSSSelector(selector: string): string[] {
 }
 
 export class FolkBaseConnection extends HTMLElement {
-  static tagName = 'folk-base-connection';
+  static tagName = '';
 
   static define() {
     if (customElements.get(this.tagName)) return;

diff --git a/src/folk-base-set.ts b/src/folk-base-set.ts
@@ -2,16 +2,10 @@ import { ClientRectObserverEntry, ClientRectObserverManager } from './common/cli
 
 const clientRectObserver = new ClientRectObserverManager();
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'folk-base-set': FolkBaseSet;
-  }
-}
-
 const defaultRect = DOMRectReadOnly.fromRect();
 
 export class FolkBaseSet extends HTMLElement {
-  static tagName = 'folk-base-set';
+  static tagName = '';
 
   static define() {
     if (customElements.get(this.tagName)) return;