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-wc & modern-web

  • Scaffold
  • Lint (es-lint)
  • Format (prettier)
  • Test (web-test-runner)

• vitejs

  • Dev Server
  • Static demo
  • TypeScript

• sass

  • SCSS watcher with autoprefixer

• miscellany

  • tsconfig
  • Custom Elements Manifest
  • ESLint 8 - decorators

Installation

npm init @blockquote/wc

open-wc & modern-web

- 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

• mocha-style reporter
• coverage config
• TDD option

web-test-runner.config

import { defaultReporter } from '@web/test-runner';
import { mochaStyleReporter } from '@blockquote/test-runner-mocha-style-reporter';

const outDir = process.env.OUTDIR || '.';

export default ({
  files: [`${outDir}/test/**/*.test.js`],

  nodeResolve: {
    exportConditions: ['browser', 'development'],
  },

  reporters: [
    defaultReporter(),
    mochaStyleReporter(),
  ],

  coverageConfig: {
    report: true,
    reportDir: `${outDir}/test/coverage`,
    threshold: {
      statements: 80,
      branches: 80,
      functions: 80,
      lines: 80,
    },
  },

  testFramework: {
    config: {
      ui: 'tdd',
    },
  },

  ...
};

To execute a single test run:

npm run test

To run the tests in interactive watch mode run:

npm run test:watch

vite

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

server static-deploy

npm run preview:vite

sass

scss watcher with autoprefixer

npm run sass:watch

TypeScript

build ts

npm run build

Start:

"start": "concurrently -k -r \"npm:sass:watch\" \"npm:vite\""

npm start

Example:

open-wc-vitejs-sass

Different major versions:

"devDependencies": {
  "eslint": "^8.0.0",
  "@open-wc/eslint-config": "^7.0.0",
  ...
}

open-wc scaffold

"devDependencies": {
  "eslint": "^7.32.0",
  "@open-wc/eslint-config": "^4.3.0",
  ...
}

File structure JS & TS

./
├── my-el/
│   ├── define/
│   │   └── my-el.{js,ts}
│   ├── demo/
│   │   └── index.html
│   ├── src/
│   │   ├── styles/
│   │   │   ├── MyEl-styles.{js,ts}
│   │   │   └── MyEl.scss
│   │   └── MyEl.{js,ts}
│   ├── test/
│   │   └── my-el.test.{js,ts}
│   ├── .editorconfig
│   ├── .gitignore
│   ├── index.html
│   ├── index.{js,ts}
│   ├── LICENSE
│   ├── package.json
│   ├── README.md
│   ├── vite.config.js
│   ├── web-dev-server.config.mjs
│   └── web-test-runner.config.mjs

the component definition is generated in its own folder

./
├── my-el/
│   ├── define/
│   │   └── my-el.{js,ts}