JSPM

  • Created
  • Published
  • Downloads 264
  • Score
    100M100P100Q108624F
  • License MIT

Web component with Lit scaffolding - Extending Open Web Component

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:


    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: