Skip to content
WCP

WCP Vite Plugin

A Vite plugin for compiling web components with @staticbolt/wcp-core.

The plugin:

  • Transforms matching .ts files into bundled web components
  • Watches embedded HTML and CSS dependencies
  • Triggers full page reloads when component dependencies change
  • Supports PostCSS integration
  • Supports optional IIFE output mode

Installation

Terminal window
npm install @staticbolt/vite-plugin-wcp

Usage

Add the plugin to your Vite config.

import wcpVitePlugin from "@staticbolt/wcp-vite-plugin";
import { defineConfig } from "vite";


export default defineConfig({
  plugins: [wcpVitePlugin()],
});

Options

type VitePluginWcpOptions = {
  include: string[];
  exclude?: string[];
  forceProduction?: boolean;
  loadPostcssConfig?: boolean;
  postcssPlugins?: readonly AcceptedPlugin[];
  iife?: boolean;
};

include Required

Array of file patterns to include web component .ts files.

exclude

File patterns to exclude.

forceProduction

Force production mode regardless of the current Vite mode.

In production mode, minification is enabled including CSS class names and CSS variables names.

loadPostcssConfig

Automatically load a PostCSS config file.

postcssPlugins

Provide custom PostCSS plugins directly.

import autoprefixer from "autoprefixer";


vitePluginWcp({
  include: ["src/components/**/*.ts"],
  postcssPlugins: [autoprefixer()],
});

iife

Generate output in IIFE format.

Example

import autoprefixer from "autoprefixer";
import { defineConfig } from "vite";
import vitePluginWcp from "vite-plugin-wcp";


export default defineConfig({
  plugins: [
    vitePluginWcp({
      include: ["src/components/**/*.ts"],
      loadPostcssConfig: true,
      postcssPlugins: [autoprefixer()],
      iife: false,
    }),
  ],
});