fix(lit-components): fix rendering and interaction issues in force-graph, html-table, and draggable-dom

- lit-force-graph: Refactored for instance reuse, better lifecycle management, and added dynamic imports for AR/VR modes. - lit-html-table: Improved visual design, readability of headers, and fixed reactivity in editable mode. - lit-draggable-dom: Fixed clipping issues by switching to relative/absolute positioning and resolved a panning speed bug caused by CSS variable inheritance.
2026-05-17 00:41:14 -07:00
parent bbdbeb9788
commit b9e42c3ef4
253 changed files with 2555 additions and 4471 deletions
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Lit + WMR</title>
+    <meta name="description" content="Lit WMR App" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link rel="icon" href="data:" />
+    <link rel="modulepreload" as="script" href="/index.js" />
+  </head>
+  <body>
+    <simple-greeting></simple-greeting>
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>
@@ -0,0 +1 @@
+import './simple-greeting.js';
@@ -0,0 +1,25 @@
+import { html, css, LitElement } from "lit";
+
+export class SimpleGreeting extends LitElement {
+  static styles = css`
+    p {
+      color: blue;
+    }
+  `;
+
+  static properties = {
+    name: { type: String },
+  };
+
+  constructor(public name: string = "Somebody") {
+    super();
+  }
+
+  render() {
+    return html`<p>Hello, ${this.name}!</p>`;
+  }
+}
+
+if (!customElements.get("simple-greeting")) {
+  customElements.define("simple-greeting", SimpleGreeting);
+}
@@ -0,0 +1,19 @@
+import { describe, expect, test } from "vitest";
+import "./simple-greeting";
+
+describe("Lit WMR Components", () => {
+  test("registers simple-greeting custom element successfully", () => {
+    expect(customElements.get("simple-greeting")).toBeDefined();
+  });
+
+  test("mounts simple-greeting successfully", async () => {
+    document.body.innerHTML = '<simple-greeting name="WMR"></simple-greeting>';
+    await window.happyDOM.whenAsyncComplete();
+
+    const element = document.body.querySelector("simple-greeting");
+    expect(element).toBeDefined();
+    
+    // Assert against textContent to strip out Lit HTML comments and formatting tags
+    expect(element?.shadowRoot?.textContent).toContain("Hello, WMR!");
+  });
+});