How to use decorators without babel?

[K1DV5]

Sorry if this is not a good question, but I want to try lit and I just found out that decorators are not directly supported in browsers. And I want to try it without using the decorator syntax. I looked but I couldn't find a good answer. How do I use the decorators directly without the syntax?

[revosw]

Asking for clarification, do you want to try using Lit using vanilla javascript without decorators? If so, here's a starter javascript file: https://lit.dev/playground/#sample=examples/hello-world-javascript

[revosw]

If you want to bypass all building (rollup, webpack etc.), you're going to hit a roadblock if you use npm i lit to make use of Lit. Since frontend scripts cannot access node module files using import { LitElement, html, css } from "lit", you are required to use a build tool to resolve "lit" into the correct package.

My recommendation here is to use Vite. It's a very user friendly and fast dev server + bundler which has a built in Lit starter template (though it uses the older lit-element and lit-html, instead of Lit 2.0. More info on upgrading down below.)

Here's the getting started guide: https://vitejs.dev/guide/#scaffolding-your-first-vite-project

In order to upgrade the starter template from lit-element to Lit 2.0, you have to do two things.

1. Run these two commands

   npm un lit-element
   npm i lit

2. In the example typescript file, you see the import looks like this:

   import { LitElement, html, css, customElement, state } from 'lit-element'

   Change it to this:

   import { LitElement, html, css } from 'lit'
   import { customElement, state } from 'lit/decorators.js' // <-- Only if you are using typescript!

[K1DV5]

@revosw thank you. That's exactly what I wanted. And Vite looks quite interesting, I'll try it. Thanks!