JSPM

@blockquote/create-wc

1.40.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 264
  • Score
    100M100P100Q108711F
  • 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

    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

    • playwright
    • mocha-style reporter
    • coverage config
    • 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 outDir = process.env.OUTDIR || '.';

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

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

  /** Browsers to run tests on */
  browsers: [
    playwrightLauncher({ product: 'chromium' }),
    playwrightLauncher({ product: 'webkit' }),
  ],

  /** Amount of browsers to run concurrently */
  concurrentBrowsers: 2,

  /** Amount of test files per browser to test concurrently */
  concurrency: 1,

  reporters: [
    defaultReporter(),
    summaryReporter(),
    coverageTableReporter()
  ],

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

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

  ...
};

    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

    Custom Element Manifest

    Generating README from custom-elements.json

    npm run analyze

    TypeScript

    build ts

    npm run build

    Start:

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

    npm start

    Example:

    open-wc-vitejs-sass


    File structure JS & TS

    ./
├── my-el/
│   ├── .husky/
│   │   ├── _/
│   │   │   ├── .gitignore
│   │   │   └── husky.sh
│   │   └── pre-commit
│   ├── 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-test-runner.config.mjs

    the component definition is generated in its own folder

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