From a6cd20f27574b2220ded85304df48e541fae8ea0 Mon Sep 17 00:00:00 2001 From: Keith Henry Date: Tue, 2 Nov 2021 11:41:34 +0000 Subject: [PATCH 1/2] docs: include use of TS declare syntax TS can use class fields with decorators without turning off useDefineForClassFields at the cost of losing inline initialisation see https://github.com/lit/lit.dev/pull/479 and https://github.com/lit/lit/issues/1985 for discussion --- packages/lit-dev-content/site/docs/components/properties.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/lit-dev-content/site/docs/components/properties.md b/packages/lit-dev-content/site/docs/components/properties.md index b4e10bbeb..f5d7d7999 100644 --- a/packages/lit-dev-content/site/docs/components/properties.md +++ b/packages/lit-dev-content/site/docs/components/properties.md @@ -130,6 +130,8 @@ constructor() { For **TypeScript**, you **may use class fields** for declaring reactive properties as long as the `useDefineForClassFields` setting in your `tsconfig` is set to `false`. Note, this is not required for some configurations of TypeScript, but it's recommended to explicitly set it to `false`. +For **TypeScript**, you can use `declare` syntax for class fields that you explicitly want to exclude from the JS output regardless of the `useDefineForClassFields` setting. This will allow you to use decorators, but cannot be initialised inline. Similar to JS declared fields can only be initialised in the `constructor`. + When compiling JavaScript with **Babel**, you **may use class fields** for declaring reactive properties as long as you set `setPublicClassFields` to `true` in the `assumptions` config of your `babelrc`. Note, for older versions of Babel, you also need to include the plugin `@babel/plugin-proposal-class-properties`: ```js From c1bdb2ef4beed0565a8ecf2e575538d740caf73b Mon Sep 17 00:00:00 2001 From: Keith Henry Date: Tue, 2 Nov 2021 11:46:44 +0000 Subject: [PATCH 2/2] docs: clarify version es2020 will cause useDefineForClassFields to default to true --- packages/lit-dev-content/site/docs/tools/publishing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lit-dev-content/site/docs/tools/publishing.md b/packages/lit-dev-content/site/docs/tools/publishing.md index ddea894f9..a4d87fe51 100644 --- a/packages/lit-dev-content/site/docs/tools/publishing.md +++ b/packages/lit-dev-content/site/docs/tools/publishing.md @@ -51,7 +51,7 @@ The following JSON sample is a partial `tsconfig.json` that uses recommended opt } ``` -Note, setting `useDefineForClassFields` to `false` should only be required when the `target` is set to `esnext` or greater, but it's recommended to explicitly ensure this setting is `false`. +Note, setting `useDefineForClassFields` to `false` should only be required when the `target` is set to `es2020` or greater, but it's recommended to explicitly ensure this setting is `false`. When compiling from TypeScript, you should include declaration files (generated based on `declaration: true` above) for your component's types in the