Is it possible to use Lit with TypeScript using only TSC?

[BOLL7708]

I bumped into Lit and it sounded closer to the metal than Vue, which I have some experience with, even if I'm mostly a backend developer. I hoped to find a similar framework but one which had less requirements on the development and build process. As Lit claims to be using native web components, functions and features, my expectation was that it would be straight forward to build it for the browser, as well as not requiring a custom language server for types.

My experience so far is that it's hard to get the NPM package(s) to run in the browser without first running the project through a bundler. I'm used to using a bundler with Vue, but here I was specifically looking for something that depends less on various build tools and more on core browser tech, going away from specialized build tools like with Vue.

Just using a bundler could be OK if I were to deploy the project after built, but the project I'm working on is for end users to download, customize, and build locally themselves, so I wanted to reduce the number of things that could go wrong, thus reducing the amount of tooling needed.

Is it just not feasible to build a Lit project only using TSC, so that the project still can use TypeScript, without using any bundler or other tooling?

[BOLL7708]

Funny enough I actually got the NPM package to work straight with the browser by doing the below changes to imports in the library, which of course is not a reasonable solution as an update of the package would nuke all my local adjustments, this is mostly because I had to try.

1. Make the imports on the page itself point into the modules dir: lit => ../node_modules/lit/index.js
2. Make all direct library imports relative by prefixing ../, e.g. lib-html => ../lib-html
3. Reference files instead of folders by appending the associated file, e.g. lib-html => lib-html/lib-html.js

A few minutes of project-wide search & replace and voila, it works! The page loads and at least the hello world custom tag with a reactive property works with zero warnings or errors.

This is exactly what I want, but I am unfamiliar with package publishing, and if applying these changes will wreck compatibility with bundlers instead. In any case, I'll go through some tutorials now when I have a working dev environment and might report back here if I have to do more adjustments.

[augustjk]

You certainly can write your source code in TS, and use tsc to emit JS and use it directly.

You should keep the bare module specifiers like lit as they are for your published package so users can supply their own copy from npm and use their own bundler for resolving/bundling them.

For your own consumption and testing of your component, you can also use importmaps to resolve those bare module specifiers in the browser without doing a search and replace.
example https://stackblitz.com/edit/lit-importmap?file=index.html

Depending on other packages you use like directives and such, you may need to add more entries to the importmap. There might be tools that help you emit that importmap json too, though I'm not familiar with any.

Alternative to that, there are dev server tools like vite and web dev server that can help you run a dev server and on the fly do bare module resolution to node_modules.

[BOLL7708]

Phew. I didn't know importmaps was a thing so thanks for pointing this out! It would of course be even neater to have a browser compatible package out of the box, but this will suffice.

Here is the test project that I got working if anyone else needs to reference this, the failed imports keep going until the ones used are covered by the import map. My TypeScript files correctly resolves the imports, and it runs in the browser!

I'm circumventing having to run any imported dev server by simply using the browser previewing option available in WebStorm, which is basically the same thing, just built in. It updates the webpage as soon as files have changed, whoopdedoo!

[tbroyer]

@augustjk Import maps are Baseline 2023 Newly Available, and will become Widely Available in ~4 months. Maybe it's time to revisit the docs (https://lit.dev/docs/tools/requirements/#building-for-modern-browsers) with full instructions?

[BOLL7708]

(as a side note, in the live project I was going to use this, I have a shared library that works both in Deno and in the browser, and now I noticed that for Deno it contains .*ts imports, which is not allowed when building for the browser, so now I need to configure Rollup, or use Vite that comes with that preconfigured, to build with working imports, so I guess this struggle was for naught as that will also work for Lit. An interesting exercise in any case, and I learned some things!)