Configures Lit to work with its decorators (#4503)

* Configures Lit to work with its decorators

* Remove comment

Author: matthewp

.changeset/beige-students-chew.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/lit': patch
+---
+
+Allow using Lit's decorators

packages/astro/test/fixtures/lit-element/src/components/my-element.js renamed to packages/astro/test/fixtures/lit-element/src/components/my-element.ts

@@ -1,8 +1,12 @@
 import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 
+@customElement('my-element')
 export class MyElement extends LitElement {
+	@property({ type: Boolean })
+  bool = 0;
+
   static properties = {
-    bool: {type: Boolean},
     str: {type: String, attribute: 'str-attr'},
     obj: {type: Object},
     reflectedBool: {type: Boolean, reflect: true},
@@ -36,5 +40,3 @@ export class MyElement extends LitElement {
     `;
   }
 }
-
-customElements.define('my-element', MyElement);

packages/astro/test/fixtures/lit-element/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "experimentalDecorators": true
+}

packages/integrations/lit/src/index.ts

@@ -13,7 +13,7 @@ function getViteConfiguration() {
 			exclude: ['@astrojs/lit/server.js'],
 		},
 		ssr: {
-			external: ['lit-element', '@lit-labs/ssr', '@astrojs/lit'],
+			external: ['lit-element', '@lit-labs/ssr', '@astrojs/lit', 'lit/decorators.js'],
 		},
 	};
 }