https://github.com/kat-tax/syn
The Bundler for Browsers
https://github.com/kat-tax/syn
browser-bundler bundler cloudflare-workers deno esbuild esbuild-wasm wasm
Last synced: about 2 months ago
JSON representation
The Bundler for Browsers
- Host: GitHub
- URL: https://github.com/kat-tax/syn
- Owner: kat-tax
- License: mit
- Created: 2023-12-18T10:24:36.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-01-28T22:48:59.000Z (over 2 years ago)
- Last Synced: 2025-07-25T08:47:30.068Z (11 months ago)
- Topics: browser-bundler, bundler, cloudflare-workers, deno, esbuild, esbuild-wasm, wasm
- Language: TypeScript
- Homepage: https://syn.ult.dev
- Size: 33.2 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SYN
> The Web Bundler for Web Environments
Definition:
```ts
/**
* 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,
config?: BuildOptions,
importMap?: Record,
): Promise {
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:
```ts
// Import bundler
import {bundle} from 'syn-bundler';
// Create a Virtual File System
const files: Map = 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);
```