Package Exports

@blockquote/create-wc

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@blockquote/create-wc) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

create-wc

create-wc extends @open-wc/create and scaffolds Lit web components with a batteries-included setup for linting, formatting, testing, Sass, Vite, and Custom Elements Manifest generation.

Example output:

Tutorial

Use this section if you want the shortest path from zero to a working component.

Create a project

npm init @blockquote/wc

The generator will ask for:

The custom element tag name
An optional namespace
Whether the project should use TypeScript

Start development

After the project is generated:

cd your-project-name
npm install
npm start

npm start runs the Vite workflow together with the Sass watcher.

How-to Guides

Use these commands once you already have a generated project.

Format the generated project

npm run format

This runs ESLint, Prettier, and Stylelint fixes.

Run tests

npm run test

For interactive browser testing:

npm run test:watch

Preview the demo output

Build the demo assets:

npm run dev:vite

Preview the built output:

npm run preview:vite

Build the TypeScript variant

In TypeScript projects:

npm run build

This runs Vite for bundling and tsc for declarations.

Regenerate Custom Elements documentation

npm run analyze

Enable Husky hooks

After git init, run:

npm run prepare

Reference

What the generator includes

Lit for component authoring
Vite for local development and preview builds
Vitest in browser mode plus chai-a11y-axe for testing
ESLint, Prettier, and Stylelint for code quality
Sass via sass-style-template
Custom Elements Manifest generation and README tooling

Generated project scripts

These scripts are available in generated projects.

Script	Purpose
`npm start`	Run Vite and the Sass watcher together
`npm run vite`	Start the Vite dev server
`npm run dev:vite`	Build the demo assets
`npm run preview:vite`	Preview the built demo
`npm run test`	Run Vitest
`npm run test:watch`	Run Vitest in browser mode without headless mode
`npm run analyze`	Generate the Custom Elements Manifest
`npm run prepare`	Install Husky hooks
`npm run format`	Run ESLint, Prettier, and Stylelint fixes
`npm run sass:watch`	Run the Sass watcher

Variant-specific scripts

JavaScript projects:

npm run build prints a message because there is no TypeScript build step.

TypeScript projects:

npm run build runs the library build and TypeScript declaration output.

Maintainer scripts for this repository

These scripts belong to this generator repository itself, not to generated projects.

Script	Purpose
`npm start`	Run the generator locally
`npm run format`	Format this repository

Explanation

This project exists to provide a more opinionated starting point than raw @open-wc/create, while still building on its generator model instead of replacing it.

The generated scaffold is aimed at teams building Lit-based web components that want:

A ready-to-run development setup
Sass support out of the box
Test tooling for browser-oriented component work
Linting and formatting defaults across JavaScript, TypeScript, HTML, and styles
Custom Elements Manifest generation as part of the workflow

The repository itself is intentionally small: it assembles mixins and templates that define the generated project structure and scripts.

@blockquote/create-wc