feat: create a lit component

package.json

@@ -30,6 +30,7 @@
     "htmx.org": "^1.9.12",
     "kysely": "^0.26.0",
     "leaflet": "^1.9.4",
+    "lit": "^3.1.4",
     "lucide-react": "^0.309.0",
     "nanoid": "^5.0.4",
     "react": "^18.2.0",

src/components/WebComponentWrapper.astro

@@ -111,5 +111,8 @@ const { contentId = "", imageUrl = "#", location = "" } = Astro.props;
   imageURL={imageUrl}
   targetPos={location}
   id="locked-content"></locked-content>
+<locked-content-lit imageId="sample" targetPosition="[1,1]"
+></locked-content-lit>
 
 <script src="../components/locked-content.ts"></script>
+<script src="../components/locked-content-lit.ts"></script>

src/components/locked-content-lit.ts

@@ -0,0 +1,28 @@
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+@customElement("locked-content-lit")
+export class LockedContent extends LitElement {
+  // Static properties
+  @property() readonly imageId?: string;
+  @property() readonly imageURL?: string;
+  @property({ type: Object })
+  readonly targetPosition?: [lat: number, lng: number];
+
+  // Reactive state
+  @state()
+  protected _hasGeolocationPermission = false;
+  @state()
+  protected _unlocked = false;
+  @state()
+  protected _targetProximity?: number;
+
+  render() {
+    return html`
+      <div>
+        Hello from MyElement! ${this.imageId}
+        <p>${this.targetPosition}</p>
+      </div>
+    `;
+  }
+}

src/components/locked-content.ts

@@ -2,7 +2,6 @@ import L, { type LatLngTuple } from "leaflet";
 import Toastify from "toastify-js";
 
 class LockedContent extends HTMLElement {
-  unlockButtonElement: HTMLElement | null;
   watchId: number;
   targetPos: LatLngTuple;
   geolocationOptions = {

tsconfig.json

@@ -6,6 +6,8 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
   }
 }