SWC Macro Sys

This crate is a macro system implementation for swc macro proposal, which is used for parsing and transforming the javascript code based on swc

Warning: This crate is not recommented to use now

Build & Setup

WASM binding

# Once: Add WASM target
rustup target add wasm32-unknown-unknown

# Build the WASM binding
(cd crates/swc_macro_wasm && wasm-pack build --release)

# Your wasm file will be in `crates/swc_macro_wasm/pkg/`

Node.js Examples

# Install Node.js dependencies for examples
(cd examples && npm install)

# Run the JSX transformation demo
(cd examples && npm run jsx-demo)
# OR
(cd examples && node --experimental-wasm-modules jsx-test-server.mjs)

Requirements:

• Node.js v20+ recommended for best WASM support
• Use --experimental-wasm-modules flag for WASM optimization to work

Examples

Tree-Shaking Demo

Test conditional compilation and tree-shaking with a webpack bundle:

# Build WASM module first
(cd crates/swc_macro_wasm && wasm-pack build --release)

# Run tree-shaking test on bundler output
node --experimental-wasm-modules test-tree-shaking.mjs

This demonstrates:

• Conditional compilation - Code blocks removed based on feature flags
• Bundle optimization - Minification and dead code elimination
• Multiple configurations - Tests different feature flag combinations
• Size analysis - Shows bundle size reduction for each configuration

Rust Transform Example

Check crates/swc_macro_condition_transform to see how this crate works to handle the macro annotations.

Run cargo run --example transform with the following input javascript code:

/* @common:if [condition="featureFlags.enableNewFeature"] */
export function newFeature() {
  return "New feature is enabled!";
}
/* @common:endif */

const buildTarget =
  /* @common:define-inline [value="build.target" default="development"] */ "development";

The expected output is:

const buildTarget = "production";

Node.js JSX Demo

The examples/jsx-test-server.mjs demonstrates:

• JSX Transformation: Using SWC to transform JSX syntax to React.createElement calls
• Macro Processing: Applying conditional compilation and variable substitution
• Component Rendering: Server-side rendering of React components to HTML

Features demonstrated:

• Complex nested conditional blocks (@common:if/@common:endif)
• Platform-specific code paths (mobile/desktop)
• Feature flag conditional compilation
• A/B testing variants
• User type-based feature access
• Inline variable substitution (@common:define-inline)

Run the demo to see how the macro system can optimize bundle size by eliminating unused code paths at build time.