From db7a683dc9b34e955c5291d22798a414d4baf09d Mon Sep 17 00:00:00 2001
From: Lee Kelleher <leekelleher@users.noreply.github.com>
Date: Mon, 14 Oct 2024 08:56:33 +0100
Subject: [PATCH] Chore: Update's VS Code new `UmbLitElement` code snippet
 (#2449)

* Reworked VSCode code snippet for creating new `UmbLitElement` classes

* Removed ctor

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>

* Marks `styles` as `readonly`

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>

* Removes `elementName` constant

---------

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
---
 .../.vscode/lit.code-snippets                 | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/.vscode/lit.code-snippets b/src/Umbraco.Web.UI.Client/.vscode/lit.code-snippets
index b8907220b6..4920d8011b 100644
--- a/src/Umbraco.Web.UI.Client/.vscode/lit.code-snippets
+++ b/src/Umbraco.Web.UI.Client/.vscode/lit.code-snippets
@@ -1,30 +1,30 @@
 {
-	"Create Lit Component": {
-		"prefix": "lit new",
+	"UmbNewLitElement": {
+		"prefix": "new umb element",
 		"scope": "typescript",
 		"body": [
-			"import { UmbTextStyles } from '@umbraco-ui/backoffice/style';",
-			"import { css, html } from 'lit';",
-			"import { customElement } from 'lit/decorators.js';",
+			"import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';",
 			"import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';",
+			"import { UmbTextStyles } from '@umbraco-cms/backoffice/style';",
 			"",
 			"@customElement('umb-${TM_FILENAME_BASE/(.*)\\..+$/$1/}')",
-			"export class Umb${TM_FILENAME_BASE/(.*)\\..+$/${1:/pascalcase}/}Element extends UmbLitElement {",
-			"\trender() {",
-			"\t\treturn html`${0:umb-${TM_FILENAME_BASE/(.*)\\..+$/$1/}}`;",
+			"export class Umb${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/}Element extends UmbLitElement {",
+			"\toverride render() {",
+			"\t\treturn html`$0`;",
 			"\t}",
 			"",
-			"\tstatic styles = [UmbTextStyles, css``];",
+			"\tstatic override readonly styles = [UmbTextStyles, css``];",
 			"}",
 			"",
-			"export default Umb${TM_FILENAME_BASE/(.*)\\..+$/${1:/pascalcase}/}Element",
+			"export { Umb${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/}Element as element };",
 			"",
 			"declare global {",
 			"\tinterface HTMLElementTagNameMap {",
-			"\t\t'umb-${TM_FILENAME_BASE/(.*)\\..+$/$1/}': Umb${TM_FILENAME_BASE/(.*)\\..+$/${1:/pascalcase}/}Element;",
+			"\t\t'umb-${TM_FILENAME_BASE/(.*)\\..+$/$1/}': Umb${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/}Element;",
 			"\t}",
-			"}"
+			"}",
+			"",
 		],
-		"description": "Create a new Lit Component"
-	}
+		"description": "Create a new Umbraco Lit element",
+	},
 }