Consolidate Lit repositories: figma-to-lit, figma_lit_example, lit-3d-piano, lit-calculator, lit-code-editor, lit-draggable-dom, lit-file-based-routing, lit-force-graph, lit-html-editor, lit-html-table, lit-modules, lit-native, lit-node-editor, lit-sheet-music, lit-starter-ts, lit-vscode-extension, lit-wmr, vite-lit-capacitor, vite-lit-element-starter, vite-rxdb-lit

figma_lit_example/src/code.ts

@@ -0,0 +1,27 @@
+const options: ShowUIOptions = {
+  width: 250,
+  height: 200,
+};
+
+figma.showUI(__html__, options);
+
+figma.ui.onmessage = msg => {
+  switch (msg.type) {
+    case 'create-rectangles':
+      const nodes: SceneNode[] = [];
+      for (let i = 0; i < msg.count; i++) {
+        const rect = figma.createRectangle();
+        rect.x = i * 150;
+        rect.fills = [{ type: 'SOLID', color: { r: 1, g: 0.5, b: 0 } }];
+        figma.currentPage.appendChild(rect);
+        nodes.push(rect);
+      }
+      figma.currentPage.selection = nodes;
+      figma.viewport.scrollAndZoomIntoView(nodes);
+      break;
+    default:
+      break;
+  }
+
+  figma.closePlugin();
+};

figma_lit_example/src/my-app.ts

@@ -0,0 +1,34 @@
+import { html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+
+@customElement("my-app")
+export class MyApp extends LitElement {
+  @property() amount = "5"; // <-- Pass in a value for the number of rectangles to create
+  @query("#count") countInput!: HTMLInputElement;
+
+  render() {
+    return html`
+      <div>
+        <h2>Rectangle Creator</h2>
+        <!-- Pass in the amount to the input value -->
+        <p>Count: <input id="count" value="${this.amount}" /></p>
+        <button id="create" @click=${this.create}>Create</button>
+        <button id="cancel" @click=${this.cancel}>Cancel</button>
+      </div>
+    `;
+  }
+
+  create() {
+    const count = parseInt(this.countInput.value, 10);
+    this.sendMessage("create-rectangles", { count });
+  }
+
+  cancel() {
+    this.sendMessage("cancel");
+  }
+
+  private sendMessage(type: string, content: Object = {}) {
+    const message = { pluginMessage: { type: type, ...content } };
+    parent.postMessage(message, "*");
+  }
+}

figma_lit_example/src/ui.ts

@@ -0,0 +1,11 @@
+import "./my-app";
+
+import wasm from "./wasm"; // <-- Our WASM file to load
+
+WebAssembly.instantiateStreaming(wasm as Promise<Response>).then((obj) => {
+  // @ts-ignore
+  const value: number = obj.instance.exports.add(2, 4);
+  console.log("return from wasm", value);
+  const elem = document.querySelector("my-app")! as HTMLElement;
+  elem.setAttribute("amount", `${value}`);
+});

figma_lit_example/src/wasm.ts

@@ -0,0 +1,10 @@
+const encoded = 'AGFzbQEAAAABBwFgAn9/AX8DAgEABQMBAAAHEAIDYWRkAAAGbWVtb3J5AgAKCQEHACAAIAFqCwAmEHNvdXJjZU1hcHBpbmdVUkwULi9vcHRpbWl6ZWQud2FzbS5tYXA=';
+export default new Promise(resolve => {
+    const decoded = atob(encoded);
+    const len = decoded.length;
+    const bytes = new Uint8Array(len);
+    for (var i = 0; i < len; i++) {
+        bytes[i] = decoded.charCodeAt(i);
+    }
+    resolve(new Response(bytes, { status: 200, headers: { "Content-Type": "application/wasm" } }));
+});