Labs Feedback: @lit-labs/compiler

[AndrewJakubowicz]

@lit-labs/compiler exports a TypeScript Transformer that can be run over your JavaScript or TypeScript files to optimize away the lit-html prepare render phase. For template heavy applications this can result in a quicker first render.

We want to collect your feedback on your experiences with @lit-labs/compiler as we iterate on it according to our Lit Labs process and move the package towards possible graduation or retirement.

• Status: Prototyping
• Major known issues: None yet
• Issues: [labs/compiler]
• Docs: README
• npm: @lit-labs/compiler

Please try @lit-labs/compiler and tell us about your experience. Leave comments with your thoughts; highlight what issues or missing features you're blocked on; give a link to a project that uses it; etc.

And so we can have some numbers to look at, you can add reactions to this comment to indicate your experience with this package:

🚀 I have tried this package and it works great. I need it. Ship it!
👍 I have tried this package and it seems like a good idea.
😕 I have tried this package and would use it, but it has serious bugs or missing features.
👀 I am interested, but haven't tried the package yet.
👎 I'm not interested in this package.

Note: other reactions like 😄, 🎉, and ❤️ don't mean anything as part of this scheme. You probably mean, and please use, 🚀, 👍, or 👀.

[justinfagnani]

I see a bunch of people giving this the 👍 reaction, but since we haven't released the package I know that you haven't tried it. I wonder if we need to use a different emoji so people don't use 👍 to mean they just like the idea?

[AndrewJakubowicz]

The pre-release has been published! You can now test this labs package with npm install @lit-labs/compiler.

[driesva]

For those using Webpack, it seems the configuration should be something like this:

      // ...
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        options: {
          getCustomTransformers: () => ({
            before: [
              compileLitTemplates()
            ]
          })
        }
      }
      // ...

[rushilnpatel]

Nice Work @AndrewJakubowicz,
This could works well with webpack but by anychance do you know it supports for vite as well ?

It would be gamechanger if this works with vite as well.

[AndrewJakubowicz]

Currently we haven't yet tested support with Vite explicitly. However, as Vite accepts plugins using the Rollup interface, it could work if you find a plugin that accepts a TypeScript transformer.

You could try with the rollup typescript plugin? Let me know how it goes!

[filimon-danopoulos-stratsys]

I would like to discuss the possibilities of distributing this in other ways than a TS-transform and rollup plugin (as mentioned in the RFC). Not having an option to transform a single file without additional tooling makes it hard or impractical to use the compiler in esoteric or custom build environments. The immediate issue is that it is not possible to use the compiler with esbuild and in extension Vite in development mode.

It seems to me that the compiler should be standalone and not force consumers to use a certain toolchain that depends on TSC. What would the practical implications be if this was to be implemented without the requirement of TSC?

Concerning providing plugins for other tools, one alternative would be to use some thing like https://github.com/unjs/unplugin. Seems like it should be fairly simple to build given that a transform function for a single file is available.

[AndrewJakubowicz]

Agree that this would be super valuable. I've split this discussion into a standalone issue to track the feature: #4350

Note, I responded in the issue: #4350 (comment)

[suyouwanggang]

how to use this tool in vitejs ?

[mdownes]

Firstly, i love the idea behind this feature but it seems to work nicely for the happy path but i am getting "variable already declared" errors when i use a more complex lit template.

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('mfe-template')
export class MFETemplate extends LitElement {
    dataLoaded = false;
    render() {
        // This works
        // return html`<hello-world></hello-world>`;

        // This does not work
           return this.dataLoaded
                ? html`<my-example></my-example>`
                : html`<my-example2></my-example2>`
    }
}

The error i get when using the html that does not work is :

[!] (plugin rpt2) RollupError: Identifier "b_1" has already been declared
src/components/MFE/mfe-template.ts (5:6)
3: import { customElement } from 'lit/decorators.js';
4: const b_1 = i => i;
5: const b_1 = { h: b_1 `<my-example></my-example>`, parts: [] };
         ^
6: const lit_template_1 = { h: b_1 `<my-example2></my-example2>`, parts: [] };

I am using rollup and this is my sample configuration:

import {compileLitTemplates} from '@lit-labs/compiler';
import typescript from 'rollup-plugin-typescript2';

...

const litTransformer = () => ({
	before: [compileLitTemplates()],
	after: []
});

...

Rollup config
{
...
plugins:[
    typescript({
        transformers:[litTransformer],
    }),
]

...
}

Any ideas why this might be? I first thought it might be because i had multiple rollup builds but i removed them to break it down to this simple example and still getting the issue

[driesva]

FYI, I opened #4460 a while ago when I started to encounter this issue after upgrading TS.

[mdownes]

Thanks for the heads up, interestingly i am using typescript 5.2.2 which is where you said it worked fine.

[mdownes]

FYI I got this to start working again by upgrading to typescript@5.3.3 and using @lit-labs/compiler@1.0.3 (which uses 5.3.3 internally)