Skip to main content

Tools and development environment

Build tools​

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      entry: 'src/my-component.ts',
      formats: ['es']
    },
    rollupOptions: {
      external: ['lit']
    }
  }
});

Webpack​

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
};

Development tools​

Lit plugin for Visual Studio Code​

  • Syntax highlighting for Lit templates.
  • IntelliSense for Lit APIs.
  • Template type checking.

Web dev server​

npm install @web/dev-server
npx wds --node-resolve --open

Testing tools​

Web test runner

// web-test-runner.config.js
export default {
  files: 'test/**/*.test.js',
  nodeResolve: true,
  plugins: [
    // Test coverage, etc.
  ]
};

Jest with JSDOM

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/test-setup.js']
};

Debugging tools​

Chrome dev tools extensions​

  • Lit DevTools: Inspect Lit component properties and state.
  • Shadow DOM Inspector: Navigate shadow DOM trees.

Browser support testing​

// Feature detection
if ('customElements' in window && 'shadowRoot' in Element.prototype) {
  // Native support
  import('./my-component.js');
} else {
  // Load polyfills
  import('@webcomponents/webcomponentsjs').then(() => {
    import('./my-component.js');
  });
}