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

---