or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

build-automation.mdcore-bundling.mdindex.mdplugins.mdtransformation.md
tile.json

index.mddocs/

FuseBox

FuseBox is a comprehensive JavaScript and TypeScript bundler and build tool that provides fast bundling, hot module replacement, and development server capabilities. It offers an intuitive API for configuring builds targeting different environments (browser, Node.js), supports various file types and transformations out of the box, includes advanced features like code splitting, tree shaking, and source maps, and provides built-in development tools including a dev server with live reloading.

Package Information

  • Package Name: fuse-box
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install fuse-box

Core Imports

import { 
  fusebox, 
  sparky,
  testTransform,
  coreTransformerList,
  pluginCSS,
  pluginSass,
  pluginLess,
  pluginStylus,
  pluginPostCSS,
  pluginJSON,
  pluginRaw,
  pluginReplace,
  pluginLink,
  pluginAngular,
  pluginConsolidate,
  pluginWebWorker,
  pluginCustomTransform,
  pluginMinifyHtmlLiterals,
  pluginCSSInJSX
} from "fuse-box";

For CommonJS:

const { 
  fusebox, 
  sparky,
  testTransform,
  coreTransformerList,
  pluginCSS,
  pluginSass,
  pluginLess,
  pluginStylus,
  pluginPostCSS,
  pluginJSON,
  pluginRaw,
  pluginReplace,
  pluginLink,
  pluginAngular,
  pluginConsolidate,
  pluginWebWorker,
  pluginCustomTransform,
  pluginMinifyHtmlLiterals,
  pluginCSSInJSX
} = require("fuse-box");

Basic Usage

import { fusebox } from "fuse-box";

// Create a basic development configuration
const fuse = fusebox({
  target: "browser",
  entry: "src/index.ts",
  devServer: true
});

// Run development build with hot reload
fuse.runDev().then(result => {
  console.log("Development build completed");
});

// Run production build
fuse.runProd().then(result => {
  console.log("Production build completed");
});

Architecture

FuseBox is built around several key components:

  • Core Bundler: The fusebox() function that creates build configurations for development and production environments
  • Plugin System: Extensible architecture with 15+ built-in plugins for handling different file types (CSS, SASS, JSON, etc.)
  • Build System (Sparky): Task automation framework for custom build workflows and CI/CD integration
  • Transformer Pipeline: TypeScript/JavaScript code transformation system with support for modern language features
  • Development Tools: Integrated dev server, hot module replacement (HMR), and live reloading capabilities

Capabilities

Core Bundling

Main bundler functionality for creating development and production builds with extensive configuration options.

function fusebox(publicConfig: IPublicConfig): {
  runDev: (runProps?: IRunProps) => Promise<IRunResponse>;
  runProd: (runProps?: IRunProps) => Promise<IRunResponse>;
};

interface IPublicConfig {
  target?: ITarget;
  entry?: Array<string> | string;
  plugins?: Array<(ctx: Context) => void>;
  devServer?: IDevServerProps | boolean;
  webIndex?: IWebIndexConfig | boolean;
  cache?: ICacheProps | boolean;
  hmr?: IHMRProps | boolean;
  sourceMap?: boolean | ISourceMap;
  alias?: { [key: string]: string };
  compilerOptions?: ICompilerOptions;
  dependencies?: IDependencies;
  env?: { [key: string]: string };
  modules?: Array<string>;
  resources?: IResourceConfig;
  stylesheet?: IStyleSheetProps;
  threading?: IThreadingConfig;
  watcher?: IWatcherPublicConfig | boolean;
  webWorkers?: IWebWorkerConfig;
  electron?: IElectronOptions;
  logging?: IFuseLoggerProps;
  json?: IJSONPluginProps;
  link?: IPluginLinkOptions;
}

type ITarget = "browser" | "electron" | "server" | "web-worker";

interface IRunProps {
  buildTarget?: ITypescriptTarget;
  bundles?: IPublicOutputConfig;
  cleanCSS?: any;
  manifest?: IManifest | boolean;
  target?: ITarget;
  tsHelpersPath?: string;
  uglify?: any;
}

interface IRunResponse {
  bundleContext?: IBundleContext;
  bundles: Array<IBundleWriteResponse>;
  entries?: Array<IModule>;
  manifest: string;
  modules?: Array<IModule>;
  splitEntries?: ISplitEntries;
  onComplete: (fn: (props: IRunOnCompleteHandler) => void) => void;
  onWatch?: (fn: (bundles: Array<IBundleWriteResponse>) => void) => void;
}

Core Bundling

Plugin System

Comprehensive plugin architecture with built-in plugins for CSS processing, file transformation, framework support, and custom transforms.

// CSS Processing Plugins
function pluginCSS(options?: ICSSPluginProps): (ctx: Context) => void;
function pluginLess(options?: ILessPluginProps): (ctx: Context) => void;
function pluginSass(options?: ISassPluginProps): (ctx: Context) => void;
function pluginStylus(options?: IStylusPluginProps): (ctx: Context) => void;
function pluginPostCSS(options?: IPostCSSPluginProps): (ctx: Context) => void;

// File Processing Plugins
function pluginJSON(options?: IJSONPluginProps): (ctx: Context) => void;
function pluginRaw(options?: IPluginRawProps): (ctx: Context) => void;
function pluginReplace(options?: IPluginReplaceProps): (ctx: Context) => void;

// Framework Support Plugins
function pluginAngular(options?: IAngularPluginProps): (ctx: Context) => void;
function pluginConsolidate(options?: IConsolidatePluginProps): (ctx: Context) => void;

// Advanced Plugins
function pluginWebWorker(options?: IWebWorkerPluginProps): (ctx: Context) => void;
function pluginCustomTransform(options?: ICustomTransformProps): (ctx: Context) => void;
function pluginMinifyHtmlLiterals(options?: IMinifyHtmlLiteralsProps): (ctx: Context) => void;
function pluginLink(options?: IPluginLinkOptions): (ctx: Context) => void;
function pluginCSSInJSX(options?: ICSSInJSXProps): (ctx: Context) => void;

Plugin System

Build Automation (Sparky)

Task automation framework for creating custom build workflows, CI/CD integration, and development tools.

function sparky<T>(Ctx: new () => T): {
  task: (name: string | RegExp, fn: (ctx: T) => void) => void;
  exec: (name: string) => Promise<void>;
  src: (glob: string) => SparkyChain;
  rm: (folder: string) => void;
};

interface SparkyChain {
  dest(destination: string): SparkyChain;
  clean(path: string): SparkyChain;
  watch(glob?: string): SparkyChain;
  exec(): Promise<void>;
}

Build Automation

Code Transformation

TypeScript/JavaScript transformation system with support for modern language features, JSX, and custom transforms.

function initCommonTransform(props: {
  code: string;
  compilerOptions?: ICompilerOptions;
  jsx?: boolean;
  props?: ISerializableTransformationContext;
  transformers: Array<ITransformer>;
}): {
  code: string;
  requireStatementCollection: ITransformerRequireStatementCollection;
};

function testTransform(props: {
  code: string;
  compilerOptions?: ICompilerOptions;
  jsx?: boolean;
  props?: ISerializableTransformationContext;
  transformers: Array<ITransformer>;
}): {
  code: string;
  requireStatementCollection: ITransformerRequireStatementCollection;
};

const BASE_TRANSFORMERS: Array<ITransformer>;

interface ITransformer {
  commonVisitors?: (props: ITransformerCommon) => ITransformerVisitors;
}

Code Transformation

Core Types

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

interface IModule {
  absPath: string;
  contents: string;
  extension: string;
  captured?: boolean;
  isStylesheet?: boolean;
  read(): void;
  resolve(statement: string): Promise<{ module: IModule }>;
}

interface IBundleWriteResponse {
  absPath: string;
  contents: string;
  size: number;
  gzipSize?: number;
  relativePath: string;
}

interface IRunOnCompleteHandler {
  electron?: IServerProcess;
  server?: IServerProcess;
  onWatch?: (fn: () => void) => void;
}

interface ISourceMap {
  css?: boolean;
  project?: boolean;
  sourceRoot?: string;
  vendor?: boolean;
}

interface ICompilerOptions {
  target?: string;
  module?: string;
  lib?: string[];
  declaration?: boolean;
  outDir?: string;
  rootDir?: string;
  strict?: boolean;
  esModuleInterop?: boolean;
  skipLibCheck?: boolean;
  forceConsistentCasingInFileNames?: boolean;
}

interface IDependencies {
  ignore?: Array<string | RegExp>;
  importRefs?: Array<IImportRef>;
  include?: Array<string>;
  serverIgnoreExternals?: boolean;
}

interface IImportRef {
  bundle?: boolean;
  matching: RegExp | string;
  replacement: string;
}

interface IElectronOptions {
  nodeIntegration?: boolean;
}

interface IThreadingConfig {
  enabled?: boolean;
  minFileSize?: number;
  threadAmount?: number;
}

interface IWebWorkerConfig {
  config?: IPublicConfig;
  enabled?: boolean;
}

interface IFuseLoggerProps {
  enabled?: boolean;
  level?: "verbose" | "default" | "disabled";
}