https://github.com/oscarmarina/create-wc
Web component with Lit scaffolding - Extending Open Web Component & Vitejs & SCSS/SASS
https://github.com/oscarmarina/create-wc
eslint lit-element lit-html open-wc prettier sass scss typescript vitejs
Last synced: 3 months ago
JSON representation
Web component with Lit scaffolding - Extending Open Web Component & Vitejs & SCSS/SASS
- Host: GitHub
- URL: https://github.com/oscarmarina/create-wc
- Owner: oscarmarina
- License: mit
- Created: 2021-11-03T16:04:18.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-10-18T10:57:46.000Z (8 months ago)
- Last Synced: 2024-10-20T20:44:36.186Z (8 months ago)
- Topics: eslint, lit-element, lit-html, open-wc, prettier, sass, scss, typescript, vitejs
- Language: JavaScript
- Homepage:
- Size: 819 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Web Components with Lit - Scaffold
This scaffold generator extends and customizes **[@open-wc/create](https://open-wc.org/docs/development/generator/#extending)**, providing a starting point for creating web components with **[Lit](https://lit.dev/)**.
**Example:**
[](https://github.com/oscarmarina/lit-vitest-testing-comparison)
[](https://stackblitz.com/github/oscarmarina/lit-vitest-testing-comparison)
## Development Tools
### Scaffold
- Lint: `eslint`
- Format: `prettier`
### Vite & Vitest
- **Server**: [Vite Server](https://vitejs.dev/config/server-options.html)
- **Preview**: [Vite Preview](https://vitejs.dev/config/preview-options.html)
- **Build**: [Vite Build](https://vitejs.dev/guide/build.html)
- TypeScript: [`vite` transpile only](https://vite.dev/guide/features.html#typescript)
- TypeScript: [`tsc` emit declarations only](https://www.typescriptlang.org/tsconfig/#emitDeclarationOnly)
- **Test**: [Vitest browser mode](https://vitest.dev/guide/browser/) and [chai-a11y-axe](https://www.npmjs.com/package/chai-a11y-axe)
- ### Sass
- SCSS [watcher](https://github.com/oscarmarina/sass-style-template) with [sass](https://www.npmjs.com/package/sass)
- ### analyze
- [Custom Elements Manifest](https://custom-elements-manifest.open-wc.org/blog/intro/)
- [Plugin: cem-to-markdown-readme](https://github.com/oscarmarina/cem-to-markdown-readme)
## Installation
```bash
npm init @blockquote/wc
```
### Start
```bash
npm start
```
### Linting and Formatting
To scan the project for linting and formatting errors, run:
```bash
npm run lint
```
To automatically fix them, run:
```bash
npm run format
```
### Testing
Run tests with:
```bash
// vitest --run --browser.headless
npm run test
```
```bash
// vitest
npm run test:watch
```
### Development Server
Start the development server:
```bash
npm run start
```
### Hosting a Static Demo (Do Not Bundle)
For hosting a static demo without bundling:
```bash
npm run dev:vite
```
Preview demo:
```bash
npm run preview:vite
```
### TypeScript
```bash
npm run build
```
### Sass
#### SCSS Watcher
Start the SCSS watcher:
```bash
npm run sass:watch
```
### Custom Elements Manifest
#### Generating README from `custom-elements.json`
Generate documentation:
```bash
npm run analyze
```
### Husky
Husky is pre-installed.
After initializing Git with `git init`, run:
```bash
npm run prepare
```
to set up Husky and its Git hooks.
**Plugins:**
- [rollup-plugin-externalize-source-dependencies](https://github.com/oscarmarina/rollup-plugin-externalize-source-dependencies)
- [vite-plugin-prevent-rewrite-imports-type-module](https://github.com/oscarmarina/vite-plugin-prevent-rewrite-imports-type-module/tree/main)