CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-swc--cli

This package provides a command-line interface for the SWC (Speedy Web Compiler) project, a super-fast TypeScript/JavaScript compiler and bundler written in Rust.

Pending
Overview
Eval results
Files

spack.mddocs/

SWC Bundler (spack)

Bundling functionality that uses SWC's high-performance bundler to create optimized JavaScript bundles from TypeScript and JavaScript sources.

Capabilities

Spack CLI Command

The SWC bundler command for creating optimized JavaScript bundles.

npx spack [options]

# Key Options:
--config [path]                    # Path to spack.config.js file
--mode <development|production|none> # Build mode
--target [browser|node]            # Target runtime environment
--context [path]                   # Base directory for resolving entry
--entry [list]                     # List of entry points
-o --output                        # Output path and file for assets
--output-path                      # Output directory as absolute path
--debug                           # Switch loaders to debug mode

Configuration File (spack.config.js):

module.exports = {
  entry: {
    main: "./src/index.ts",
  },
  output: {
    path: "./dist",
    name: "[name].js",
  },
  mode: "production",
  target: "browser",
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: {
          loader: "swc-loader",
          options: {
            jsc: {
              parser: {
                syntax: "typescript",
              },
            },
          },
        },
      },
    ],
  },
};

Usage Examples:

# Basic bundling with config file
npx spack --config spack.config.js

# Specify entry and output
npx spack --entry ./src/index.ts --output dist/bundle.js

# Development mode with browser target
npx spack --mode development --target browser

# Multiple entries
npx spack --entry ./src/main.ts,./src/worker.ts --output-path dist

Programmatic API

Direct access to spack bundling functionality through @swc/core.

/**
 * Parse spack CLI arguments into configuration options
 * @param args - Command-line arguments array
 * @returns Promise resolving to parsed CLI and bundle options
 */
function parseSpackArgs(args: string[]): Promise<{
  cliOptions: SpackCliOptions;
  spackOptions: BundleOptions;
}>;

interface SpackCliOptions {
  /** Enable debug mode for loaders */
  debug: boolean;
}

// BundleOptions is re-exported from @swc/core/spack
type BundleOptions = import("@swc/core/spack").BundleOptions;

Usage Example:

import { bundle } from "@swc/core";
import { parseSpackArgs } from "@swc/cli/spack";

// Parse CLI arguments
const { spackOptions, cliOptions } = await parseSpackArgs(process.argv);

// Perform bundling
const output = await bundle(spackOptions);

// Process output
for (const [name, result] of Object.entries(output)) {
  console.log(`Bundle ${name}: ${result.code.length} bytes`);
  if (result.map) {
    console.log(`Source map: ${result.map.length} bytes`);
  }
}

Bundle Configuration

Spack uses configuration files similar to webpack but optimized for SWC's bundling capabilities.

interface BundleOptions {
  /** Entry points for bundling */
  entry: string | string[] | Record<string, string>;
  /** Output configuration */
  output?: {
    /** Output directory path */
    path: string;
    /** Output filename pattern */
    name: string;
  };
  /** Build mode */
  mode?: "development" | "production" | "none";
  /** Target runtime environment */
  target?: "browser" | "node";
  /** Base directory for resolving entry points */
  context?: string;
  /** Module processing configuration */
  module?: {
    rules: Array<{
      test: RegExp;
      use: {
        loader: string;
        options?: any;
      };
    }>;
  };
}

Bundle Execution

The main bundling process that processes files and generates optimized output.

/**
 * Execute the bundling process
 * @returns Promise that resolves when bundling completes
 */
async function build(): Promise<void>;

/**
 * Check if an entry name is user-defined
 * @param name - Entry name to check
 * @returns True if entry is user-defined
 */
function isUserDefinedEntry(name: string): boolean;

Bundle Process:

  1. Parse spack configuration and CLI options
  2. Resolve entry points and dependencies
  3. Apply module transformations using SWC
  4. Generate optimized bundles with code splitting
  5. Write output files with optional source maps
  6. Report bundling performance metrics

Output Structure:

// Bundle output format
type BundleOutput = Record<string, {
  code: string;      // Generated JavaScript code
  map?: string;      // Optional source map
}>;

Performance Features

Spack leverages SWC's Rust-based architecture for high-performance bundling:

  • Fast Compilation: Native Rust performance for TypeScript/JavaScript transformation
  • Parallel Processing: Multi-threaded bundling for large codebases
  • Tree Shaking: Dead code elimination for smaller bundles
  • Code Splitting: Automatic chunk generation for optimal loading
  • Source Maps: Full source map support for debugging
  • Watch Mode: Fast incremental rebuilds (planned feature)

Integration Examples

# Package.json scripts
{
  "scripts": {
    "build": "spack --config spack.config.js",
    "build:dev": "spack --mode development --debug",
    "build:prod": "spack --mode production --target browser"
  }
}

# CI/CD integration
npx spack --mode production --output-path dist/

Types

// Re-exported from @swc/core/spack
type BundleOptions = import("@swc/core/spack").BundleOptions;
type CompileBundleOptions = import("@swc/core/spack").compileBundleOptions;

interface SpackCliOptions {
  debug: boolean;
}

Install with Tessl CLI

npx tessl i tessl/npm-swc--cli

docs

index.md

spack.md

swc-cli.md

swcx.md

tile.json