Package Exports
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
Web Component with Lit - Scaffolding
This scaffold generator extends and customizes the core parts of @open-wc/create providing a starting point for creating a web component with Lit
Development tools:
Open Web Components & Modern Web
- Scaffold
- Lint
es-lint - Format
prettier - Test
web-test-runner
Vite
Sass
- SCSS watcher with sass
analyze
Installation
npm init @blockquote/wc@latestStart
npm startLinting and formatting
To scan the project for linting and formatting errors, run
npm run lintTo automatically fix linting and formatting errors, run
npm run formatTesting with Web Test Runner
- playwright
- coverage
- TDD option
web-test-runner.config
import { playwrightLauncher } from '@web/test-runner-playwright';
import { defaultReporter, summaryReporter } from '@web/test-runner';
import { coverageTableReporter } from '@blockquote/coverage-table-reporter';
const filteredLogs = ['in dev mode'];
const outDir = process.env.OUTDIR || '.';
export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
files: [`${outDir}/test/**/*.test.js`],
nodeResolve: true,
browsers: [
playwrightLauncher({ product: 'chromium' }),
playwrightLauncher({ product: 'webkit' }),
],
concurrentBrowsers: 2,
concurrency: 1,
reporters: [summaryReporter({}), defaultReporter(), coverageTableReporter()],
preserveSymlinks: true,
coverage: true,
coverageConfig: {
reportDir: `${outDir}/test/coverage`,
reporters: ['lcov', 'lcovonly', 'json'],
threshold: {
statements: 80,
branches: 80,
functions: 80,
lines: 80,
},
include: ['**/src/**/*', '**/define/**/*'],
},
testFramework: {
config: {
ui: 'tdd',
timeout: 4000,
},
},
filterBrowserLogs(log) {
for (const arg of log.args) {
if (typeof arg === 'string' && filteredLogs.some((l) => arg.includes(l))) {
return false;
}
}
return true;
},
});To execute a single test run:
npm run testTo run the tests in interactive watch mode run:
npm run test:watchdev server
npm run viteFor hosting a static demo purposes only - Do not bundle
npm run dev:vitenpm run preview:viteTypeScript
npm run buildsass
scss watcher
npm run sass:watchCustom Element Manifest
Generating README from custom-elements.json
npm run analyzeHusky
Husky is pre-installed.
After git init; run npm run prepare to set up Husky and its Git hooks.
Example: