CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-fuse-box

A comprehensive JavaScript and TypeScript bundler with fast bundling, hot module replacement, and development server capabilities

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

plugins.mddocs/

Plugin System

FuseBox provides an extensive plugin system with 15+ built-in plugins for handling different file types, transformations, and framework integrations. All plugins follow a consistent API pattern and can be combined for complex build workflows.

Plugin Architecture

All plugins follow the same function signature pattern:

type Plugin = (ctx: Context) => void;

Most plugins support flexible option patterns for maximum configurability:

// Usage patterns:
plugin()                    // Default options
plugin(RegExp | string)     // File matcher only
plugin(options)             // Options object only
plugin(matcher, options)    // Both matcher and options

CSS Processing Plugins

CSS Plugin

Processes CSS files with URL resolution and stylesheet injection.

function pluginCSS(
  matcher?: ICSSPluginProps | RegExp | string, 
  options?: ICSSPluginProps
): (ctx: Context) => void;

interface ICSSPluginProps {
  asText?: boolean;
  stylesheet?: IStyleSheetProps;
}

interface IStyleSheetProps {
  inject?: boolean;
  outFile?: string;
  macros?: { [key: string]: string };
  paths?: Array<string>;
  autoMacros?: boolean;
  breakDependantsCache?: boolean;
}

Less Plugin

Integrates Less preprocessor for .less files.

function pluginLess(
  matcher?: ILessPluginProps | RegExp | string,
  options?: ILessPluginProps
): (ctx: Context) => void;

interface ILessPluginProps {
  asText?: boolean;
  stylesheet?: IStyleSheetProps;
  options?: {
    paths?: Array<string>;
    compress?: boolean;
    strictMath?: boolean;
  };
}

Sass Plugin

Integrates Sass/SCSS preprocessor for .sass and .scss files.

function pluginSass(
  matcher?: ISassPluginProps | RegExp | string,
  options?: ISassPluginProps
): (ctx: Context) => void;

interface ISassPluginProps {
  asText?: boolean;
  stylesheet?: IStyleSheetProps;
  options?: {
    includePaths?: Array<string>;
    outputStyle?: "expanded" | "compressed";
    sourceMap?: boolean;
  };
}

Stylus Plugin

Integrates Stylus preprocessor for .styl files.

function pluginStylus(
  matcher?: IStylusPluginProps | RegExp | string,
  options?: IStylusPluginProps
): (ctx: Context) => void;

interface IStylusPluginProps {
  asText?: boolean;
  stylesheet?: IStyleSheetProps;
  options?: {
    paths?: Array<string>;
    compress?: boolean;
  };
}

PostCSS Plugin

Integrates PostCSS transformation pipeline.

function pluginPostCSS(
  matcher?: IPostCSSPluginProps | RegExp | string,
  options?: IPostCSSPluginProps
): (ctx: Context) => void;

interface IPostCSSPluginProps {
  asText?: boolean;
  stylesheet?: IStyleSheetProps;
  plugins?: Array<any>;
  options?: any;
}

File Processing Plugins

JSON Plugin

Handles JSON file imports with optional default export wrapping.

function pluginJSON(
  matcher?: IJSONPluginProps | RegExp | string,
  options?: IJSONPluginProps
): (ctx: Context) => void;

interface IJSONPluginProps {
  path?: string;
  useDefault?: boolean;
}

Raw Plugin

Imports file contents as strings for text processing.

function pluginRaw(
  matcher?: IPluginRawProps | RegExp | string,
  options?: IPluginRawProps
): (ctx: Context) => void;

interface IPluginRawProps {
  useDefault?: boolean;
}

Replace Plugin

Performs text/code replacement in modules using regex patterns.

function pluginReplace(
  matcher?: IPluginReplaceProps | RegExp | string,
  options?: IPluginReplaceProps
): (ctx: Context) => void;

interface IPluginReplaceProps {
  [key: string]: any;
}

Link Plugin

Handles file symlinking and referencing for asset management.

function pluginLink(options?: IPluginLinkOptions): (ctx: Context) => void;

interface IPluginLinkOptions {
  useDefault?: boolean;
  resources?: Array<string>;
}

Framework Support Plugins

Angular Plugin

Provides Angular framework support with component and template processing.

function pluginAngular(
  matcher?: IAngularPluginProps | RegExp | string,
  options?: IAngularPluginProps
): (ctx: Context) => void;

interface IAngularPluginProps {
  template?: boolean;
  stylesheet?: boolean;
}

Consolidate Plugin

Template engine consolidation for multiple template formats.

function pluginConsolidate(
  matcher?: IConsolidatePluginProps | RegExp | string,
  options?: IConsolidatePluginProps
): (ctx: Context) => void;

interface IConsolidatePluginProps {
  engine?: string;
  options?: any;
}

Advanced Plugins

Web Worker Plugin

Processes Web Worker bundles for multi-threaded applications.

function pluginWebWorker(
  matcher?: IWebWorkerPluginProps | RegExp | string,
  options?: IWebWorkerPluginProps
): (ctx: Context) => void;

interface IWebWorkerPluginProps {
  target?: ITarget;
  bundles?: IPublicOutputConfig;
}

Custom Transform Plugin

Enables custom code transformation pipelines.

function pluginCustomTransform(
  matcher?: ICustomTransformProps | RegExp | string,
  options?: ICustomTransformProps
): (ctx: Context) => void;

interface ICustomTransformProps {
  transform: (code: string, filePath: string) => string | Promise<string>;
}

Minify HTML Literals Plugin

Minifies HTML template literals in JavaScript/TypeScript code.

function pluginMinifyHtmlLiterals(
  matcher?: IMinifyHtmlLiteralsProps | RegExp | string,
  options?: IMinifyHtmlLiteralsProps
): (ctx: Context) => void;

interface IMinifyHtmlLiteralsProps {
  options?: {
    removeAttributeQuotes?: boolean;
    caseSensitive?: boolean;
    minifyCSS?: boolean;
    minifyJS?: boolean;
  };
}

CSS-in-JSX Plugin

Handles CSS-in-JSX transformations for React-style components.

function pluginCSSInJSX(
  matcher?: ICSSInJSXProps | RegExp | string,
  options?: ICSSInJSXProps
): (ctx: Context) => void;

interface ICSSInJSXProps {
  stylesheet?: IStyleSheetProps;
}

Usage Examples

Basic Plugin Configuration

import { fusebox, pluginCSS, pluginSass, pluginJSON } from "fuse-box";

const fuse = fusebox({
  target: "browser",
  entry: "src/index.ts",
  plugins: [
    pluginCSS(),
    pluginSass(),
    pluginJSON()
  ]
});

Plugin with Custom Options

import { fusebox, pluginCSS, pluginReplace } from "fuse-box";

const fuse = fusebox({
  target: "browser",
  entry: "src/index.ts",
  plugins: [
    pluginCSS({
      asText: false,
      stylesheet: {
        inject: true,
        outFile: "dist/styles.css"
      }
    }),
    pluginReplace({
      "__VERSION__": "1.0.0",
      "__API_URL__": process.env.API_URL || "http://localhost:3000"
    })
  ]
});

Framework-Specific Setup

import { 
  fusebox, 
  pluginAngular, 
  pluginCSS, 
  pluginPostCSS 
} from "fuse-box";

const fuse = fusebox({
  target: "browser",
  entry: "src/main.ts",
  plugins: [
    pluginAngular({
      template: true,
      stylesheet: true
    }),
    pluginPostCSS({
      plugins: [
        require("autoprefixer"),
        require("cssnano")
      ]
    }),
    pluginCSS()
  ]
});

Advanced Asset Processing

import { 
  fusebox, 
  pluginRaw, 
  pluginLink, 
  pluginCustomTransform 
} from "fuse-box";

const fuse = fusebox({
  target: "browser",
  entry: "src/index.ts",
  plugins: [
    pluginRaw(/\.(txt|md)$/),
    pluginLink({
      resources: ["images/**", "fonts/**"]
    }),
    pluginCustomTransform(/\.special$/, {
      transform: (code, filePath) => {
        // Custom transformation logic
        return code.replace(/CUSTOM_MARKER/g, "PROCESSED");
      }
    })
  ]
});

Web Worker Integration

import { fusebox, pluginWebWorker } from "fuse-box";

const fuse = fusebox({
  target: "browser",
  entry: "src/index.ts",
  plugins: [
    pluginWebWorker(/worker\.ts$/, {
      target: "web-worker"
    })
  ]
});

Plugin Context

All plugins receive a Context object providing access to build state:

interface Context {
  config: IConfig;
  log: IFuseLogger;
  ict: IInterComponentCommunication;
  meta: { [key: string]: any };
  isWorking: boolean;
}

interface IInterComponentCommunication {
  on(event: string, handler: (props: any) => any): void;
  sync(event: string, props: any): void;
}

Common plugin events:

  • "module_init": Module initialization
  • "bundle_resolve_module": Module resolution
  • "bundle_complete": Bundle completion

docs

build-automation.md

core-bundling.md

index.md

plugins.md

transformation.md

tile.json