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

2026-05-16 22:17:12 -07:00
parent 4dc3c8a3ff
commit 95667e3038
527 changed files with 63872 additions and 54 deletions
@@ -0,0 +1,72 @@
+{
+    "Create Example Lit Module": {
+        "prefix": "lit-module-example",
+        "body": [
+            "import { html, css, LitElement } from \"lit\";",
+            "import { customElement, property } from \"lit/decorators.js\";",
+            "",
+            "export const $1ModuleStyles = [css`",
+            "  .welcome {",
+            "    font-size: 2em;",
+            "    text-align: center;",
+            "  }",
+            "`;]",
+            "",
+            "export interface ${1/(.*)/${1:/capitalize}/}ModuleProps {",
+            "  name: string;",
+            "  $2",
+            "}",
+            "",
+            "export function $1ModuleTemplate(props: ${1/(.*)/${1:/capitalize}/}ModuleProps) {",
+            "  return html`<div class=\"welcome\">Hello ${props.name}!</div>`;",
+            "}",
+            "",
+            "@customElement(\"$1-module\")",
+            "export class ${1/(.*)/${1:/capitalize}/}Module extends LitElement implements ${1/(.*)/${1:/capitalize}/}ModuleProps {",
+            "  static styles = $1ModuleStyles;",
+            "",
+            "  @property({ type: String }) name = \"World\";",
+            "",
+            "  render() {",
+            "    return $1ModuleTemplate(this);",
+            "  }",
+            "}",
+            "",
+        ],
+        "description": "Create an example of a reusable lit module"
+    },
+    "Create Lit Module": {
+        "prefix": "lit-module",
+        "body": [
+            "import { html, css, LitElement } from \"lit\";",
+            "import { customElement, property } from \"lit/decorators.js\";",
+            "",
+            "export const $1ModuleStyles = [css`",
+            "  ${2:main} {",
+            "    $5",
+            "  }",
+            "`;]",
+            "",
+            "export interface ${1/(.*)/${1:/capitalize}/}ModuleProps {",
+            "  $3",
+            "}",
+            "",
+            "export function $1ModuleTemplate(props: ${1/(.*)/${1:/capitalize}/}ModuleProps) {",
+            "  return html`<${2:main}>$6</${2:main}>`;",
+            "}",
+            "",
+            "@customElement(\"$1-module\")",
+            "export class ${1/(.*)/${1:/capitalize}/}Module extends LitElement implements ${1/(.*)/${1:/capitalize}/}ModuleProps {",
+            "  static styles = $1ModuleStyles;",
+            "",
+            "  $4",
+            "",
+            "  render() {",
+            "    return $1ModuleTemplate(this);",
+            "  }",
+            "}",
+            "",
+        ],
+        "description": "Create a reuseable lit module"
+    }
+}