Skip to content

Commit

Permalink
Very rough draft of 3.0 post
Browse files Browse the repository at this point in the history
  • Loading branch information
justinfagnani committed Sep 26, 2023
1 parent f3dcb82 commit e6ece1f
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 0 deletions.
132 changes: 132 additions & 0 deletions packages/lit-dev-content/site/blog/2023-10-04-lit-3.0.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
---
tags: blogPosts
layout: blog-post.html
title: "Lit Launch Day: Lit 3.0, Labs graduations, a compiler and more!"
summary: "We're launching the next major version of Lit"
date: 2023-10-04
author:
- lit-team
---

# Lit Launch Day: Lit 3.0, Labs graduations, a compiler and more!

It's launch day for the Lit team, and we have a bunch of exciting releases to share with the Lit and web components communities!

After several month of development, the Lit team is happy to announce the final release of Lit 3.0 - our fist major version since Lit 2.0 in early 2021 - the first graduating class of Lit Labs packages: lit/context 1.0, lit/task 1.0, and lit/react 1.0, and two bonus releases `@lit-labs/compiler` and `@lit-labs/preact-signals`.

This is a big release, so here are links to the individual announcements:
- [Lit 3.0](#lit-3.0)
- [The New Lit Template Compiler](#compiler)
- [Labs Graduation Day](#labs-graduation)
- [Preact Signals Integration](#preact-signals)

## Lit 3.0: Bye, Bye IE, Hello TC39 Decorators! { #lit-3.0 }

As we've mentioned before, we value stability for our customers. Breaking changes are a cost that our customers and entire ecosystem have to bear: projects have to upgrade, multiple versions can be included in an app, and documents, samples, tutorials, starter kits, etc. might have to be updated.

So we want to only make creaking changes when we must, or when there's a large benefit to the project or user like decreased code size, increased performance, or in this case, or a significant reduction in maintenance burden.

For Lit 3.0, the biggest change is that we've dropped IE11 support. After surveying our developer community, we feel like now is the right time to say goodbye to IE, and very few customers will be effected.

### Breaking Changes

Lit 3.0 adds no new features, because new features are generally not breaking changes and can be added in minor versions, according to semver. The Lit 3.0 release is an opportunity to make a few breaking changes that trim out some technical debt to unlock new features we have scheduled for our 3.x release series.

The Lit 3.0 changes are mostly in browser support, removing deprecated APIs, and how packages are published. If you run Lit 2.x with no deprecation warnings, this should be a seamless upgrade!

Here are the biggest things Lit 3.0 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 were moved to the `@lit-labs/ssr-client` package.
- Decorator behavior has been unified between TypeScript experimental decorators and standard decorators.

### Standard Decorators



### Upgrading

The upgrade from Lit 2.0 should be seamless for the vast majority of users. You can usually upgrade your npm dependency version with:

```sh
> npm i lit@latest
```

You can find more details and how to handle the changes in the [Lit 2.x to 3.0 upgrade guide](/docs/v3/releases/upgrade/) is available in the docs.

Detailed change logs can be found [on GitHub](https://github.com/lit/lit/releases?q=%22-pre.1%22&expanded=true).

## Even Faster Rendering with the new Lit Template Compiler { #compiler }

The Lit team is excited to announce a new Labs package @lit-labs/compiler, which provides a [TypeScript Transformer](https://github.com/itsdouges/typescript-transformer-handbook#the-basics) that can be run over your JavaScript or TypeScript files to optimize away some of the work that Lit would have to do at runtime!

![Lit Compiler benchmarks](/images/blog/3.0-launch/compiler-benchmarks.png)

In the best case scenario with a template heavy page, we measured a 46% faster first render, and a 21% faster update!

To try out @lit-labs/compiler today, you’ll need a build step that accepts a TypeScript transformer. For Rollup.js users, this could be @rollup/plugin-typescript. An example rollup.config.js file might look like:

```js
// File: rollup.config.js
import typescript from '@rollup/plugin-typescript';
import {compileLitTemplates} from '@lit-labs/compiler';

export default {
// ...
plugins: [
typescript({
transformers: {
before: [compileLitTemplates()],
},
}),
// other rollup plugins
],
};
```

### What does the transform do?

Given some source code containing an `html`` tag function to declare templates:

```ts
const hi = (name) => html`<h1>Hello ${name}!</h1>`;
```

The Lit template transform will remove the html tag function and replace it with something like the following:

```ts
const b = (s) => s;
const lit_template_1 = {h: b`<h1>Hello <?></h1>`, parts: [{type: 2, index: 1}]};
const hi = (name) => ({_$litType$: lit_template_1, values: [name]});
```

Then when Lit renders the compiled template, it can skip an internal render phase that we’ve called the Prepare phase, which means you get a quicker initial render.

As you can see in the above example, there is some additional code generated as part of the transform. We’ve measured that minified and compressed, you may get a 5% increase in file size for the compiled file. This is something we have plans to address.

### Looking forward

We’d love to hear from you and get feedback on your experience using the transform, as well as hear what you’d like to see optimized! Leave that feedback in this [Labs Feedback discussion](https://github.com/lit/lit/discussions/4117). We’d also like to learn more about what build systems Lit is used in, and welcome contributions!

This is just the beginning. With this new package we have a foundation for layering on additional build-time optimizations. Some optimizations we’ve thought about:

- For a Lit app which can be completely compiled, we could vend an import of lit-html that is smaller.
- Add an option to the compiler transform to also minify and compress the HTML in the templates.
- Provide domain specific and targeted transforms, such as a standard decorator transform with a smaller emit.
- Compress the emitted output file by applying domain specific file compression.


## Lit Labs Graduation Day { #labs-graduation }

### Context

### Task

### React

## Preact Signals Integration { #preact-signals }

**Thanks!,**

**-The Lit Team**
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e6ece1f

Please sign in to comment.