GitHub - NimbleLabs/vibe-coding-bundler: A Browser-based JavaScript Bundler. Compile React, TypeScript, and JSX at runtime using esbuild-wasm.

npm install vibe-coding-bundler

# Build the library first
npm run build

# Serve the examples directory
npx serve .

import { createBundler, initialize } from 'vibe-coding-bundler';

// Initialize esbuild-wasm (only needed once)
await initialize();

// Create a bundler instance
const bundler = createBundler({
  // Optional: fetcher for external URLs
  fetcher: async (url) => {
    const response = await fetch(url);
    return { contents: await response.text() };
  },
});

// Bundle your code
const result = await bundler.bundle(
  '/src/index.ts',
  {
    '/src/index.ts': `
      import { useState } from 'react';
      export function App() {
        const [count, setCount] = useState(0);
        return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
      }
    `,
  },
  {
    imports: {
      react: 'https://esm.sh/react@18',
      'react/': 'https://esm.sh/react@18/',
    },
  },
  {
    format: 'esm',
    minify: true,
    sourcemap: 'inline',
  }
);

console.log(result.outputFiles); // { 'index.js': '...' }

# Bundle a file
npx vibe-bundler bundle src/index.ts -o dist

# Watch mode
npx vibe-bundler watch src/index.ts -o dist

# With import map
npx vibe-bundler bundle src/index.ts --import-map import-map.json

# Minify and generate sourcemaps
npx vibe-bundler bundle src/index.ts -m --sourcemap

const importMap = {
  imports: {
    // Exact matches
    react: 'https://esm.sh/react@18',
    'react-dom': 'https://esm.sh/react-dom@18',

    // Prefix matches (note the trailing slash)
    'lodash/': 'https://esm.sh/lodash-es/',

    // Scoped packages
    '@scope/pkg': 'https://esm.sh/@scope/pkg',
  },
};

const importMap = {
  imports: {
    lodash: 'https://esm.sh/lodash@4',
  },
  scopes: {
    '/legacy/': {
      // Files in /legacy/ use lodash v3
      lodash: 'https://esm.sh/lodash@3',
    },
  },
};

const importMap = {
  imports: {
    react: 'https://esm.sh/react@18',
    'react-dom': 'https://esm.sh/react-dom@18',
    'react-dom/client': 'https://esm.sh/react-dom@18/client',
  },
};

const importMap = {
  imports: {
    lodash: 'https://unpkg.com/lodash-es@4/lodash.js',
  },
};

const importMap = {
  imports: {
    preact: 'https://cdn.skypack.dev/preact',
  },
};

const bundler = createBundler({
  fetcher: async (url) => {
    // Add custom headers, caching, etc.
    const response = await fetch(url, {
      headers: { 'X-Custom-Header': 'value' },
    });

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }

    const contents = await response.text();

    return {
      contents,
      // Optional: specify the loader
      loader: 'js',
      // Optional: base URL for relative imports in this module
      resolveDir: url.substring(0, url.lastIndexOf('/') + 1),
    };
  },
  cache: {
    maxSize: 100, // Max cached modules
    ttl: 60000, // Cache TTL in ms
  },
});

const myPlugin = {
  name: 'my-plugin',
  setup(build) {
    // Custom resolution
    build.onResolve({ filter: /^virtual:/ }, (args) => ({
      path: args.path,
      namespace: 'virtual',
    }));

    // Custom loading
    build.onLoad({ filter: /.*/, namespace: 'virtual' }, (args) => ({
      contents: `export default "Hello from ${args.path}"`,
      loader: 'js',
    }));
  },
};

const bundler = createBundler({
  plugins: [myPlugin],
});

import {
  createVirtualModulePlugin,
  createAliasPlugin,
  createExternalPlugin,
} from 'vibe-coding-bundler';

// Virtual modules
const virtualPlugin = createVirtualModulePlugin({
  'virtual:config': 'export default { debug: true };',
});

// Aliases
const aliasPlugin = createAliasPlugin({
  '@/utils': '/src/utils',
  lodash: 'lodash-es',
});

// Externals
const externalPlugin = createExternalPlugin(['fs', 'path', /^node:/]);

interface InitOptions {
  wasmURL?: string; // URL to esbuild.wasm (uses CDN by default)
}

interface BundlerOptions {
  plugins?: Plugin[];
  fetcher?: (url: string) => Promise<FetchResult>;
  cache?: { maxSize?: number; ttl?: number };
  baseURL?: string; // Base URL for import map resolution
}

interface BuildOptions {
  format?: 'esm' | 'iife' | 'cjs';
  platform?: 'browser' | 'node' | 'neutral';
  minify?: boolean;
  sourcemap?: boolean | 'inline' | 'external';
  splitting?: boolean;
  target?: string | string[];
  external?: string[];
  define?: Record<string, string>;
  jsxFactory?: string;
  jsxFragment?: string;
  jsx?: 'transform' | 'preserve' | 'automatic';
  jsxImportSource?: string;
}

interface BundleResult {
  outputFiles: Record<string, string>;
  metafile?: Metafile;
  warnings: PluginMessage[];
  errors: PluginMessage[];
}

export default {
  entry: ['src/index.ts'],
  outdir: 'dist',
  importMap: {
    imports: {
      react: 'https://esm.sh/react@18',
    },
  },
  buildOptions: {
    format: 'esm',
    minify: true,
    sourcemap: true,
  },
};

export default {
  entry: ['src/index.ts'],
  outdir: 'dist',
  importMap: './import-map.json',
};