create-lit-component

Create Lit Component

A command-line tool to generate Lit web components with a standardized structure.

Usage

You can use this generator with npm's create command:

# Using npm
npm create lit-component my-awesome-component

# Using npm
npx create-lit-component my-awesome-component

# Using yarn
yarn create lit-component my-awesome-component

# Using pnpm
pnpm create lit-component my-awesome-component

Or you can install it globally and use it:

# Install globally
npm install -g create-lit-component

# Then use it
create-lit-component

Options

When using the CLI, you'll be prompted for information, or you can provide it via command-line options:

• --name: Name of the component
• --tags: Add tags to the component (comma separated)
• --directory: Specify a directory for the component (default: current directory)
• --description: Description of the component
• --yes: Skip all prompts and use default values

Example:

npm create lit-component -- --name my-counter --tags ui,counter --directory components

Note: When using npm create with arguments, you need to add -- before passing arguments.

Generated Component Structure

The generator will create a new Lit component with the following structure:

my-component/
├── README.md
├── package.json
├── tsconfig.json
├── src/
│   ├── index.ts
│   └── lib/
│       └── my-component.ts
└── test/
    └── my-component.test.ts

Tech Stack

This generator uses the following technologies:

• TypeScript: For type-safe code generation
• Lit: The generated components use Lit, a lightweight library for building fast, reactive web components
• ES Modules: The generator and generated components use modern ESM imports
• Template-based Generation: Uses EJS templates for flexible code generation
• Key Dependencies:
  • ejs: For template rendering
  • fs-extra: For enhanced file system operations
  • yargs and inquirer: For interactive CLI experience
  • glob: For file pattern matching

Contributing

We welcome contributions to improve the generator! Here's how you can help:

Development Setup

• Clone the repository

  git clone https://github.com/yourusername/create-lit-component.git
  cd create-lit-component
  

• Install dependencies

  npm install
  

• Build the project

  npm run build
  

• Test locally

  node dist/cli.js
  

Code Style Guidelines

• Follow the TypeScript coding conventions
• Use ESM import statements with file extensions (e.g., import { x } from './y.js')
• For ES modules compatibility, use the appropriate import patterns (default vs. named exports)
• Document public API methods and interfaces

Pull Request Process

• Fork the repository and create your branch from main
• Update the documentation to reflect any changes
• Ensure your code builds without errors (npm run build)
• Test your changes thoroughly
• Submit a pull request

Adding or Modifying Templates

When adding or modifying the component templates:

• Place template files in src/generators/component/files/
• Use .template extension for files that need EJS processing
• Use <%= variableName %> syntax for template variables
• Test template generation with different component names

Development

Building the package

npm run build

Running Tests

The project includes comprehensive unit tests using Vitest. To run the tests:

# Run tests once
npm test

# Run tests in watch mode during development
npm run test:watch

# Run tests with coverage report
npm run test:coverage

Test Structure

Tests are organized in the tests/ directory:

• generators/component/generator.test.ts: Tests for component generator functions
• cli.test.ts: Tests for CLI functionality

Publishing to npm

npm publish