Staticview Vite Plugin

A Vite plugin for compiling web components with @staticview/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

npm install @staticview/vite-plugin

Options

export interface StaticViewVitePluginOptions {
  /** Glob patterns for web component `.ts` files to process. */
  include: string[];

  /** Glob patterns for files to exclude from processing. */
  exclude?: string[];

  /** Forces the plugin to run in production mode regardless of environment. */
  forceProduction?: boolean;

  /** Loads the local PostCSS config file and applies its plugins. */
  loadPostcssConfig?: boolean;

  /** Additional PostCSS plugins to apply during processing. */
  postcssPlugins?: readonly AcceptedPlugin[];

  /**
   * Wraps the generated component bundle in an IIFE.
   *
   * @default true
   */
  iife?: boolean;

  /**
   * Minifies component CSS, CSS classes, CSS variables, HTML, and JS output.
   *
   * Defaults to `true` in production mode.
   */
  minify?: boolean;

  /**
   * Minifies component CSS output.
   *
   * Defaults to the value of `minify`.
   */
  minifyCSS?: boolean;

  /**
   * Minifies component HTML output.
   *
   * Defaults to the value of `minify`.
   */
  minifyHTML?: boolean;

  /**
   * Minifies generated CSS class names.
   *
   * Defaults to the value of `minify`.
   */
  minifyCssClasses?: boolean;

  /**
   * Ignore CSS classes with these prefixes when minifying CSS classes.
   *
   * @default ["_"]
   */
  minifyCssClassesIgnorePrefix?: string[];

  /**
   * Minifies generated CSS variable names.
   *
   * Defaults to the value of `minify`.
   */
  minifyCssVariables?: boolean;

  /**
   * Ignore CSS variables with these prefixes when minifying CSS variables.
   *
   * @default ["sv-", "_"]
   */
  minifyCssVariablesIgnorePrefix?: string[];

  /**
   * Minifies generated JavaScript output.
   *
   * Defaults to the value of `minify`.
   */
  minifyJS?: boolean;
}

Example

import autoprefixer from "autoprefixer";
import { defineConfig } from "vite";
import staticviewVitePlugin from "@staticview/vite-plugin";

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