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

  • De Server
  • Preview
  • Build
    • TypeScript & tsconfig

• Sass

  • SCSS watcher with sass

• analyze

  • Custom Elements Manifest
    • Plugin: cem-to-markdown-readme

Installation

npm init @blockquote/wc@latest

Start

npm start

Linting and formatting

To scan the project for linting and formatting errors, run

npm run lint

To automatically fix linting and formatting errors, run

npm run format

Testing 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 test

To run the tests in interactive watch mode run:

npm run test:watch

dev server

• Vite supports importing .ts files out of the box (4848, 3040)

npm run vite

For hosting a static demo purposes only - Do not bundle

npm run dev:vite

npm run preview:vite

TypeScript

npm run build

sass

scss watcher

npm run sass:watch

Custom Element Manifest

Generating README from custom-elements.json

npm run analyze

Husky

Husky is pre-installed.

After git init; run npm run prepare to set up Husky and its Git hooks.

Example:

• https://github.com/oscarmarina/blockquote-web-components