SYN

The Web Bundler for Web Environments

Definition:

/**
 * Bundle a React application
 * @param entry Path to the app entry point (e.g. /index.tsx)
 * @param files Virtual File System containing files needed to bundle the app
 * @param config ESBuild config https://esbuild.github.io/api/#bundle
 * @param importMap The import map used to determine external dependencies
 * @returns a string containing the bundled application code
 */
export async function bundle(
  entry: string,
  files: Map<string, string | Uint8Array>,
  config?: BuildOptions,
  importMap?: Record<string, string>,
): Promise<string> {

  const resolver = new Resolver(files);
  const compiler = new Compiler();

  return await compiler.compile(entry, {
    define: {'process.env.NODE_ENV': '"development"'},
    inject: ['import-react'],
    jsx: 'automatic',
    target: 'esnext',
    format: 'esm',
    jsxDev: true,
    ...config,
  }, [
    png({resolver}),
    svg({resolver}),
    css({resolver}),
    react({resolver, importMap}),
  ]);
}

Usage:

// Import bundler
import {bundle} from 'syn-bundler';

// Create a Virtual File System
const files: Map<string, string | Uint8Array> = new Map();

// Add code to VFS
for (const [name, component] of Object.entries(components)) {
  files.set(`/components/${name}`, component.code);
}

// Add assets to VFS
for (const [name, asset] of Object.entries(assets)) {
  const extension = asset.isVector ? 'svg' : 'png';
  const folder = asset.isVector ? 'vectors' : 'rasters';
  const path = `/assets/${folder}/${name}.${extension}`;
  files.set(path, asset.bytes);
}

// Add entrypoint to VFS
files.set('/index.tsx', mainComponent);

// Bundle VFS
const output = await bundle('/index.tsx', files);

// Print string output (or render in iframe)
console.log(output);