Configures Lit to work with its decorators (#4503)

* Configures Lit to work with its decorators * Remove comment
withastro · Aug 29, 2022 · 1222ab9 · 1222ab9
1 parent feb88af
commit 1222ab9
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/.changeset/beige-students-chew.md b/.changeset/beige-students-chew.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/lit': patch
+---
+
+Allow using Lit's decorators
diff --git a/.../lit-element/src/components/my-element.js → .../lit-element/src/components/my-element.ts b/.../lit-element/src/components/my-element.js → .../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);
diff --git a/packages/astro/test/fixtures/lit-element/tsconfig.json b/packages/astro/test/fixtures/lit-element/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "experimentalDecorators": true
+}
diff --git a/packages/integrations/lit/src/index.ts b/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'],
 		},
 	};
 }