73 lines
2.5 KiB
Plaintext
73 lines
2.5 KiB
Plaintext
{
|
|
"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"
|
|
}
|
|
}
|