[Feature]: lit-html Rsbuild template configuration

[alexUXUI]

What problem does this feature solve?

Hey Byte Infra team! Thanks so much for all the wonderful work you do in the Open Source Community. Projects like Rspack and Federation runtime are truly such amazing gifts to share with the world. Thank you.

---

Story:

As an engineer, I would like to use Rsbuild for Lit-HTML development.

There is a preset option for Lit-HTML in npm create rsbuild@latest.

Problem:

When I try to use features of Lit-HTML framework like reactive properties, Rsbuild's default transpiler, SWC, is unable to handle the Field-Level Typescript Decorators Lit-HTML depends on.

Because this is a SWC limitation, not an Rsbuild limitation, I am trying to configure Rsbuild to use babel, but I am not successful.

Feature Request:

Could we collaborate on an Rsbuild configuration that supports Lit-HTML development and use this in the Rsbuild template for Lit-HTML projects?

I am currently trying an approach that looks like:

export default defineConfig({
  html: {
    template: './src/index.html',
  },
  // Attempting to use babel instead of SWC
  plugins: [pluginBabel({
    include: ['src/**/*'],
    exclude: ['node_modules/**/*'],
    babelLoaderOptions: {
      babelrc: false,
      configFile: false,
      presets: [
        [
          '@babel/preset-env',
          '@babel/preset-typescript',
          {
            experimentalDecorators: true,
          },
        ],
      ],
      plugins: [
        // add decorators support
        ["@babel/plugin-proposal-class-properties", { "loose": true }],
        ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true, "version": "2023-11" }],
      ],
    }
  })],
  tools: {
   // Trying to disable SWC
    swc: {
      exclude: ['node_modules/**/*', 'src/**/*'],
    }
  }
});

This is not working.

Is there any guidance from the community or Byte Infra team on how I can correctly figure Rsbuild for Lit-HTML development?

Thank you so much for your time and consideration. We are hoping to use Rsbuild for all development at Accuris

What does the proposed API look like?

In this feature request, there are no new APIs.

Rather, the output would be a new Rsbuild template for scaffolding Lit-HTML projects, using npm create rsbuild@latest CLI.

[chenjiahan]

Thank you! it's our pleasure. ❤️

For the lit decorators issue, I checked the Lit documentation and it says "We recommend that TypeScript developers use experimental decorators for now".

In Rsbuild, we can set source.decorators.version to legacy, which will be consistent with TypeScript's experimental decorators. Could you try setting it and check the result?

[chenjiahan]

If it works, we can follow the lit-element-starter-ts and enable experimentalDecorators by default in the Rsbuild lit templates.

[alexUXUI]

Thank you so much @chenjiahan for your thoughtful support on this request.

You are exactly right, configuring source.decorators.version to "legacy" worked beautifully. I can now use field level decorators with Rsbuild.

You make a great point about experimentalDecorators setting in tsconfig. That is also needed.

If it is ok, I am happy to create a PR with these two changes specifically for the ts and js lit templates.

What do you think?

[alexUXUI]

Here is a PR with the changes.

Thanks again for your awesome work on this OSS project and for helping us advance our usage.

Our team is thrilled to be using Rsbuild.

[chenjiahan]

PR merged 😄