Web Components with Lit - Scaffold

This scaffold generator extends and customizes @open-wc/create, providing a starting point for creating web components with Lit.

Development Tools

Scaffold

• Lint: eslint
• Format: prettier

Vite & Vitest

• Server: Vite Server

• Preview: Vite Preview

• Build: Vite Build

  • TypeScript: vite transpile only
  • TypeScript: tsc emit declarations only

• Test: Vitest browser mode

• Sass

  • SCSS watcher with sass

• analyze

  • Custom Elements Manifest
    • Plugin: cem-to-markdown-readme

Installation

npm init @blockquote/wc

Start

npm start

Linting and Formatting

To scan the project for linting and formatting errors, run:

npm run lint

To automatically fix them, run:

npm run format

Testing

Run tests with:

npm run test

Development Server

Start the development server:

npm run start

Hosting a Static Demo (Do Not Bundle)

For hosting a static demo without bundling:

npm run dev:vite

Preview demo:

npm run preview:vite

TypeScript

npm run build

Sass

SCSS Watcher

Start the SCSS watcher:

npm run sass:watch

Custom Elements Manifest

Generating README from custom-elements.json

Generate documentation:

npm run analyze

Husky

Husky is pre-installed.

After initializing Git with git init, run:

npm run prepare

to set up Husky and its Git hooks.

Example:

• lit-vitest-testing-comparison