-
Notifications
You must be signed in to change notification settings - Fork 185
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0efa652
commit cd643c2
Showing
1 changed file
with
74 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,43 +2,48 @@ | |
| tags: blogPosts | ||
| layout: blog-post.html | ||
| title: "Lit 3.0 Prerelease 2 and more!" | ||
| summary: "Today we are publishing a second of prereleases for the upcoming Lit 3.0 launch." | ||
| summary: "Today we are publishing the second prerelease of Lit 3.0." | ||
| date: 2023-09-27 | ||
| author: | ||
| - justin-fagnani | ||
| --- | ||
|
|
||
| # Lit 3.0 Prerelease 2 and more! | ||
|
|
||
| Today we are publishing a second of prereleases for the upcoming Lit 3.0 launch. This includes the core packages of `lit`, `lit-html`, and `lit-element`, prereleases for the Task, Context, and React packages that are graduating from Lit Labs, and previews of two exciting new Lit Labs packages: `@lit-labs/compiler` and `@lit-labs/preact-signals`. | ||
| Today we are publishing the second prerelease of Lit 3.0. | ||
|
|
||
| The full list of prerelease packages is: | ||
| - `[email protected]` | ||
| - `[email protected]` | ||
| - `[email protected]` | ||
| - `@lit/[email protected]` | ||
| - `@lit/[email protected]` | ||
| - `@lit/[email protected]` | ||
| - `@lit/[email protected]` | ||
| - `@lit/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| This prerelease includes: | ||
| - The core Lit 3.0 packages | ||
| - The first graduating class of Lit Labs: Task, Context, and React | ||
| - Our first preview of our new optimizing template compiler | ||
| - A Preact Signals integration library | ||
|
|
||
| There are many other packages in this prerelease. See the full list and how to try them our [here](). | ||
|
|
||
| ## Lit 3.0 Prerelease 2 | ||
|
|
||
| As we [announced with the first prerelease](./2023-05-15-lit-3.0-prerelease/), Lit 3.0 is a breaking change that most notably removes support for IE11. Lit 3.0 is intended to have no new features, since new features can be added in non-breaking minor versions. | ||
|
|
||
| ### New hybrid decorators with standard decorators support | ||
| ### Breaking changes | ||
|
|
||
| - IE11 is no longer supported. | ||
| - Lit's npm modules are now published as ES2021. | ||
| - APIs deprecated with the Lit 2.0 release have been removed. | ||
| - SSR hydration support modules are moved to the `@lit-labs/ssr-client` package. | ||
| - Decorator behavior has been unified between TypeScript experimental decorators and standard decorators. | ||
| - Support was removed for Babel decorators version "2018-09" | ||
|
|
||
| These breaking changes should have minimal impact for most users – based on testing against Google's codebase, they impact about one in a thousand elements – and allow our project to move forward more efficiently. | ||
|
|
||
| One new thing we _have_ added to Lit 3.0 though is support for TC39 standard decorators. The new decorator spec has reached Stage 3 in TC39, meaning that browsers and compilers are now implementing them. This is a huge step for Lit because it allows us to begin the process of moving to decorator implementation that won't require a compiler to use. | ||
| ### New: standard decorators support | ||
|
|
||
| Recently TypeScript 5.2 added support for standard decorator metadata, which was the last piece needed for us to use the new specification (Babel's next release will have support). So we've made our decorators work with TypeScript's `experimentalDecorators` flag set to either `true` or `false`. | ||
| The one new feature that we _did_ add to Lit 3.0 is support for the TC39 standard decorators specification to our _existing_ decorators. | ||
|
|
||
| The reason why we've included standard decorator support in a breaking change is that we've taken great care to make the upgrade path from experimental decorators smooth, and in order do that we've introduced a few minor breaking changes to our experimental decorator behavior to make the behavior consistent with the standard decorator behavior. | ||
| The new decorator spec has reached Stage 3 in TC39, meaning that browsers and compilers are now implementing them. This is a huge step for Lit! The arrival of standard decorators allows us to begin the process of moving to a decorator implementation that won't require a compiler to use. | ||
|
|
||
| The big thing is that we've added support for decorating the new "auto-accessors" - fields prefixed with the `accessor` keyword. Auto-accessors create a getter/setter pair and private storage that they access. These are able to be overridden by standard decorators. | ||
| It's very important to us to make the upgrade path from experimental decorators as smooth as possible. To accomplish this we made our existing decorators support the standard spec and made them work with the new `accessor` keyword in experimental decorator mode. | ||
|
|
||
| Standard decorators _require_ that fields use the `accessor` keyword. To facilitate incremental upgrades to standard decorators, we now supportm them in experimental decorators, so that the same callsite works with both settings: | ||
| This way you can use Lit decorators with auto-accessors (using the `accessor` keyword) so that the same call site works with both settings: | ||
|
|
||
| ```ts | ||
| class MyElement extends LitElement { | ||
|
|
@@ -47,11 +52,13 @@ class MyElement extends LitElement { | |
| } | ||
| ``` | ||
|
|
||
| This means that you can upgrade your decorated fields to use `accessor`, and once they all are, you can turn off `experimentalDecorators`. | ||
| Once all decorator call sites in your project use the `accessor` keyword, you can build with `experimentalDecorators` set to `true` or `false`. | ||
|
|
||
| The breaking changes were required because it's not possible to differentiate between auto-accessors and hand-written accessors. Previously we wouldn't automatically call `this.requestUpdate()` for accessors, instead requiring the hand-written setter to call it manually. Now we do call `requestUpdate()` automatically. We also will read the value of an accessor on first render and use that as the initial value for `changedProperties` and attribute reflection. | ||
| But in order to make these hybrid decorators have consistent behavior in both modes we had to make a few minor breaking changes to our experimental decorators. | ||
|
|
||
| This means that experimental decorators behave similarly for class fields and auto-accessors, but is a change from Lit 2.x. | ||
| These breaking changes were required because it's not possible to differentiate between auto-accessors and hand-written accessors. We now call `requestUpdate()` automatically for `@property` decorated accessors when previously we didn't. We also will read the value of an accessor on first render and use that as the initial value for `changedProperties` and attribute reflection. | ||
|
|
||
| Standard decorator mode requires [TypeScript 5.2](https://devblogs.microsoft.com/typescript/announcing-typescript-5-2/#decorator-metadata) or [Babel 7.23](https://babeljs.io/blog/2023/09/25/7.23.0) with the `@babel/plugin-proposal-decorators` plugin using decorator version `"2023-05"`. | ||
|
|
||
| ## New Lit template compiler! | ||
|
|
||
|
|
@@ -130,4 +137,48 @@ We are also graduating our first set of Lit Labs packages: Context, Task, and Re | |
|
|
||
| These packages have a new home in the `@lit` npm scope, but are otherwise exactly the same as the current labs version. | ||
|
|
||
| ## | ||
| ## Trying out the prerelease | ||
|
|
||
| The packages in the prerelease are: | ||
|
|
||
| - `[email protected]` | ||
| - `[email protected]` | ||
| - `[email protected]` | ||
| - `@lit/[email protected]` | ||
| - `@lit/[email protected]` | ||
| - `@lit/[email protected]` | ||
| - `@lit/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
|
|
||
| <details> | ||
| <summary>plus our other packages that depend on those:</summary> | ||
|
|
||
| - `@lit/[email protected]` | ||
| - `@lit/[email protected]` | ||
| - `@lit/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
| - `@lit-labs/[email protected]` | ||
|
|
||
| </details> | ||