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

1. Clone the repository

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

2. Install dependencies

   npm install

3. Build the project

   npm run build

4. 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

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

Adding or Modifying Templates

When adding or modifying the component templates:

1. Place template files in src/generators/component/files/
2. Use .template extension for files that need EJS processing
3. Use <%= variableName %> syntax for template variables
4. 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