Skip to content

Web component with Lit scaffolding - Extending Open Web Component & Vitejs & SCSS/SASS

License

Notifications You must be signed in to change notification settings

oscarmarina/create-wc

Repository files navigation

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:


About

Web component with Lit scaffolding - Extending Open Web Component & Vitejs & SCSS/SASS

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published