Lit Tutorial

This repo contains the codebase for a tutorial on Lit, a simple and fast library for extending web components.

Setup

The setup is really simple, what you need to do is first run npm i, which will install all of the dependencies (vite, typescript, Lit). Then, to run the project it's just npm run dev, which will start a dev server using vite.

Ofcourse, you need to have a recent version of node installed before doing any of the above.

Linting

Linting for this project is setup using eslint, and notably uses the eslint-plugin-lit and eslint-plugin-wc packages to extend the eslint config for working with Lit and Web Components respectively. You can run the linting using npm run lint and npm run lint:fix, and also with an eslint plugin in IDEs. This demonstrates that Lit can projects can be setup with linting easily.

Repo Structure

The repo structure consists of a simple environment scaffolded using vite, to display our components in, but of particular relevance to the tutorial are the /components, /context and /controllers directories located in /src. This is where all the lit related code lies, structured similair to how you might in an actual project.

All of the components are imported in the src/index.ts file. This script is then loaded in the index.html file, which ensures that all of the components get initialised, so we can use them.

The tutorial is segmented into progressive stages, each building in complexity, to better demonstrate the why and how of using Lit. This way, there's a natural flow that makes the tutorial more interesting as well. The codebase reflects this, where different files relate to different stages.

Tutorial Flow

• Stage 1 - attribute-only web component: album_list_1.ts
• Stage 2 - internal state + manual DOM: album_list_2.ts
• Stage 3 - Lit reactive properties: album_list_3.ts
• Stage 4 - Lit templating + composition: album_list_4.ts, album_card.ts

From here I've extended it in two ways:

• Ext 1 - handling async data: album_list_async.ts
• Ext 2 - mini-router w/ custom reactive controller & context:
  • components: albums_showcase.ts, album_page.ts, albums_page.ts, album_card_redirect.ts
  • controllers: router.ts
  • context: albums_context.ts, router_context.ts

Build / NPM Export

There are a few config files in this repo (tsconfig, vite.config). Some of these are standard configuration files to ensure that vite builds the project correctly, so that the dev server works.

However, there are also some config files that contain .lib. These are actually for building the package that I'm exporting from this repo, which is the final version of the component (Ext 2). Creating standalone components for use in other applications is a common use case of Lit, and this demonstrates one way of how that can be done.

You can find the published component at https://www.npmjs.com/package/albums-showcase.

Tutorial Script

I've included the script for this tutorial in the repo itself at ./Script.md.