Web Components with Lit - Scaffold

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

Example:

---

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 and chai-a11y-axe

• 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:

// vitest --run --browser.headless

npm run test

// vitest

npm run test:watch

---

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.

---

Plugins:

• rollup-plugin-externalize-source-dependencies

• vite-plugin-prevent-rewrite-imports-type-module