create-wcs

create-wcs

A scaffolding tool for quickly creating modular projects based on Web Components, adhering to the four core technical specifications: HTML Template, Custom Elements, Shadow DOM, and ES Modules.

Features

• 🚀 One-click generation of a complete Web Components development environment
• 🔧 Modular design: Separates component logic, templates, and styles into independent files
• 📦 Built-in build tool configuration (Rollup + TypeScript)
• 🔄 Hot reloading support for the development environment
• 📝 Follows Web Components standard specifications
• 🎨 Style isolation (Shadow DOM feature)
• 📱 Responsive design support

Quick Start

Create a project directly using npm init:

npm init wcs my-web-components
cd my-web-components
npm start

Or use npx:

npx create-wcs my-web-components
cd my-web-components
npm start

Usage

Create a Project

# Create a project with the default name
npm init wcs

# Create a project with a specified name
npm init wcs <project-name>

After running the above command, the tool will guide you through the project creation process, including setting the version number and choosing whether to install dependencies immediately.

Development Mode

npm start

Starts the development server (default address: http://localhost:8080) with hot reloading. The page will automatically refresh when you modify the code.

Build for Production

npm run build

Bundles the project into production-ready code and outputs it to the dist directory.

Run Tests

npm test

Executes test cases (the project template includes basic test configuration).

Lint Code

npm run lint

Checks code compliance using ESLint.

Project Structure

The created project has the following structure:

my-web-components/
├── src/
│   ├── components/
│   │   └── my-element/        # Example component
│   │       ├── my-element.ts  # Component logic (Custom Element definition)
│   │       ├── my-element.html # Component template (HTML Template)
│   │       └── my-element.css  # Component styles (Shadow DOM styles)
│   ├── index.ts               # Entry file (exports components)
│   └── main.ts                # Main program (registers components and initializes)
├── public/
│   └── index.html             # Example HTML page
├── rollup.config.js           # Rollup configuration
├── tsconfig.json              # TypeScript configuration
├── package.json               # Project dependencies and scripts
└── README.md                  # Project documentation

Modular Component Design

The project adopts a modular design concept, splitting Web Components into three independent files:

• Logic File (.ts): Defines the Custom Element class, handles lifecycle methods, properties, and events.
• Template File (.html): Contains the component’s HTML structure, using the <template> tag.
• Style File (.css): Contains the component’s styles, which only apply to the component’s internal Shadow DOM.

This design makes the code easier to maintain and scale, and is suitable for large-scale projects and component library development.

Example Component

The created project includes a my-element example component that demonstrates core Web Components features:

• Custom properties (name, count, disabled)
• Event dispatching (count-changed)
• Slot usage (<slot name="content">)
• Lifecycle methods
• Responsive updates

License

MIT