Skip to content
staticview

Staticbolt Plugin

A staticbolt plugin for compiling web components with @staticview/core.

The plugin:

  • Transforms matching .ts files into bundled web components
  • Tracks and watches embedded HTML and CSS dependencies
  • Triggers recompilation of importers when dependencies change
  • Supports PostCSS integration
  • Supports optional IIFE output mode
  • Serves component source maps in development
  • Exposes granular minification controls per asset type

Installation

Terminal window
npm install @staticview/staticbolt-plugin

Options

export interface PluginOptions {
  /** 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;


  /**
   * Serves a source map next to every processed component, mapping the served JavaScript back to its `.ts` source.
   *
   * Only applies to the development server, where the component is served as it was built, skipping the plugins that transform
   * its AST afterwards, so the served code keeps matching the map.
   *
   * @default false
   */
  sourceMap?: 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 { defineConfig } from "@staticbolt/core";
import { staticviewPlugin } from "@staticview/staticbolt-plugin";
import autoprefixer from "autoprefixer";


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