WCP Staticbolt Plugin

A staticbolt plugin for compiling web components with @staticbolt/wcp-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
• Exposes granular minification controls per asset type

Installation

npm install @staticbolt/wcp-staticbolt-plugin

Usage

Add the plugin to your staticbolt config.

import { defineConfig } from "@staticbolt/core";
import { wcpStaticBoltPlugin } from "@staticbolt/wcp-staticbolt-plugin";

export default defineConfig({
  plugins: [
    wcpStaticBoltPlugin({
      include: ["src/components/**/*.ts"],
    }),
  ],
});

Options

interface WcpStaticBoltPluginOptions {
  include: string[];
  exclude?: string[];
  forceProduction?: boolean;
  loadPostcssConfig?: boolean;
  postcssPlugins?: readonly AcceptedPlugin[];
  iife?: boolean;
  minifyJS?: boolean;
  minifyCSS?: boolean;
  minifyHTML?: boolean;
  minifyCssClasses?: boolean;
  minifyCssVariables?: boolean;
}

include Required

Array of glob patterns for web component .ts files to process.

exclude

Glob patterns for files to exclude from processing.

default: ["**/*.d.ts"]

forceProduction

Forces the plugin to run in production mode regardless of the current environment.

In production mode, all minification options default to true.

loadPostcssConfig

Automatically load a local PostCSS config file and apply its plugins.

postcssPlugins

Provide custom PostCSS plugins directly.

import autoprefixer from "autoprefixer";

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

iife

Wraps the generated component bundle in an IIFE.

default: false

minifyJS

Minifies the component JS output using aggressive minification.

default: true in production mode

minifyCSS

Minifies embedded CSS output.

default: true in production mode

minifyHTML

Minifies embedded HTML output.

default: true in production mode

minifyCssClasses

Minifies generated CSS class names.

default: true in production mode

minifyCssVariables

Minifies generated CSS variable names.

default: true in production mode

Example

import { defineConfig } from "@staticbolt/core";
import { wcpStaticBoltPlugin } from "@staticbolt/wcp-staticbolt-plugin";
import autoprefixer from "autoprefixer";

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