From 77a26a586a343ccb17b686e948021295ba3f0c1a Mon Sep 17 00:00:00 2001 From: liruifengv Date: Tue, 14 May 2024 10:31:06 +0800 Subject: [PATCH 1/6] Added Lit with TypeScript example --- .../docs/en/guides/integrations-guide/lit.mdx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/content/docs/en/guides/integrations-guide/lit.mdx b/src/content/docs/en/guides/integrations-guide/lit.mdx index feb3b4f759ea6..521e5bc16001e 100644 --- a/src/content/docs/en/guides/integrations-guide/lit.mdx +++ b/src/content/docs/en/guides/integrations-guide/lit.mdx @@ -126,6 +126,34 @@ import { MyElement } from '../components/my-element.js'; Lit requires browser globals such as `HTMLElement` and `customElements` to be present. For this reason the Lit renderer shims the server with these globals so Lit can run. You *might* run into libraries that work incorrectly because of this. ::: +### Use TypeScript + +If you want use Lit with TypeScript, add the following to your `tsconfig.json` file: + +```json title="tsconfig.json" add={3} +{ + "compilerOptions": { + "experimentalDecorators": true, + } +} +``` + +Then you can write a Lit component like this: + +```ts title="src/components/my-element.ts" +import { LitElement, html } from "lit"; +import { customElement, state } from "lit/decorators.js"; + +@customElement("my-element") +export class MyElement extends LitElement { + @state() name = "my-element"; + + override render() { + return html`

Hello world! From ${this.name}

`; + } +} +``` + ### Polyfills & Hydration The renderer automatically handles adding appropriate polyfills for support in browsers that don't have Declarative Shadow DOM. The polyfill is about *1.5kB*. If the browser does support Declarative Shadow DOM then less than 250 bytes are loaded (to feature detect support). From 5310a7b0f8c6c2eb219aa6267a7fecf4ad983401 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Tue, 14 May 2024 19:52:36 +0800 Subject: [PATCH 2/6] Update src/content/docs/en/guides/integrations-guide/lit.mdx Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/integrations-guide/lit.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/integrations-guide/lit.mdx b/src/content/docs/en/guides/integrations-guide/lit.mdx index 521e5bc16001e..ddb20e7604336 100644 --- a/src/content/docs/en/guides/integrations-guide/lit.mdx +++ b/src/content/docs/en/guides/integrations-guide/lit.mdx @@ -126,7 +126,7 @@ import { MyElement } from '../components/my-element.js'; Lit requires browser globals such as `HTMLElement` and `customElements` to be present. For this reason the Lit renderer shims the server with these globals so Lit can run. You *might* run into libraries that work incorrectly because of this. ::: -### Use TypeScript +### Experimental Decorators If you want use Lit with TypeScript, add the following to your `tsconfig.json` file: From 68d9ae8b2f6ba328daf5e773ecc1c9ba2748db64 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Tue, 14 May 2024 19:52:46 +0800 Subject: [PATCH 3/6] Update src/content/docs/en/guides/integrations-guide/lit.mdx Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/integrations-guide/lit.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/integrations-guide/lit.mdx b/src/content/docs/en/guides/integrations-guide/lit.mdx index ddb20e7604336..1b4bc46a75a0e 100644 --- a/src/content/docs/en/guides/integrations-guide/lit.mdx +++ b/src/content/docs/en/guides/integrations-guide/lit.mdx @@ -138,7 +138,7 @@ If you want use Lit with TypeScript, add the following to your `tsconfig.json` f } ``` -Then you can write a Lit component like this: +This allows you to use [Lit's experimental decorators](https://lit.dev/docs/components/decorators/) in your Lit component: ```ts title="src/components/my-element.ts" import { LitElement, html } from "lit"; From e359b4a42803598098058e1cb0b780a7bcb894c6 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Tue, 14 May 2024 19:53:51 +0800 Subject: [PATCH 4/6] Update src/content/docs/en/guides/integrations-guide/lit.mdx Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/integrations-guide/lit.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/integrations-guide/lit.mdx b/src/content/docs/en/guides/integrations-guide/lit.mdx index 1b4bc46a75a0e..7e89ccb329790 100644 --- a/src/content/docs/en/guides/integrations-guide/lit.mdx +++ b/src/content/docs/en/guides/integrations-guide/lit.mdx @@ -128,7 +128,7 @@ Lit requires browser globals such as `HTMLElement` and `customElements` to be pr ### Experimental Decorators -If you want use Lit with TypeScript, add the following to your `tsconfig.json` file: +To use experimental decorators in Lit,, add the following to your `tsconfig.json` file: ```json title="tsconfig.json" add={3} { From fa2cefdf105422dfd9ded0f37094b2200f61cec1 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Tue, 14 May 2024 20:18:50 +0800 Subject: [PATCH 5/6] Update src/content/docs/en/guides/integrations-guide/lit.mdx Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/integrations-guide/lit.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/docs/en/guides/integrations-guide/lit.mdx b/src/content/docs/en/guides/integrations-guide/lit.mdx index 7e89ccb329790..73774feb4b646 100644 --- a/src/content/docs/en/guides/integrations-guide/lit.mdx +++ b/src/content/docs/en/guides/integrations-guide/lit.mdx @@ -128,7 +128,7 @@ Lit requires browser globals such as `HTMLElement` and `customElements` to be pr ### Experimental Decorators -To use experimental decorators in Lit,, add the following to your `tsconfig.json` file: +To use [experimental decorators in Lit](https://lit.dev/docs/components/decorators/) , add the following to your `tsconfig.json` file: ```json title="tsconfig.json" add={3} { @@ -138,7 +138,7 @@ To use experimental decorators in Lit,, add the following to your `tsconfig.json } ``` -This allows you to use [Lit's experimental decorators](https://lit.dev/docs/components/decorators/) in your Lit component: +This allows you to use experimental decorators such as `@customElement` and `@state` to register a custom element and define a state property in your Lit component: ```ts title="src/components/my-element.ts" import { LitElement, html } from "lit"; From deaa6fecacb6608643f45bf662ed92464463105b Mon Sep 17 00:00:00 2001 From: liruifengv Date: Tue, 14 May 2024 20:22:40 +0800 Subject: [PATCH 6/6] Update src/content/docs/en/guides/integrations-guide/lit.mdx Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/integrations-guide/lit.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/integrations-guide/lit.mdx b/src/content/docs/en/guides/integrations-guide/lit.mdx index 73774feb4b646..82d4c74e24049 100644 --- a/src/content/docs/en/guides/integrations-guide/lit.mdx +++ b/src/content/docs/en/guides/integrations-guide/lit.mdx @@ -128,7 +128,7 @@ Lit requires browser globals such as `HTMLElement` and `customElements` to be pr ### Experimental Decorators -To use [experimental decorators in Lit](https://lit.dev/docs/components/decorators/) , add the following to your `tsconfig.json` file: +To use [experimental decorators in Lit](https://lit.dev/docs/components/decorators/), add the following to your `tsconfig.json` file: ```json title="tsconfig.json" add={3} {