How to embed file to singlefile ?

[seepine]

• bun v1.3.12

import wasmPath from './pglite.wasm' with { type: 'file',  embed: 'true' }
import dataPath from './pglite.data' with {  type: 'file',  embed: 'true' }


export async function createPGlite(dataDir: string, options?: PGliteOptions): Promise<PGlite> {
  // Read the embedded files
  const [wasmBuffer, dataBuffer] = await Promise.all([
    Bun.file(wasmPath).arrayBuffer(),
    Bun.file(dataPath).arrayBuffer(),
  ])
  // Compile the WASM module
  const wasmModule = await WebAssembly.compile(wasmBuffer)
  // Create a Blob for the fs bundle
  const fsBundle = new Blob([dataBuffer])
  // Create PGlite instance with pre-loaded modules
  const db = await PGlite.create(dataDir, {
    ...options,
    wasmModule,
    fsBundle,
  })
  return db
}

And build.ts

const args = process.argv.slice(2)
const isJs = args.find((arg) => arg.startsWith('--js') || arg.startsWith('-j')) !== undefined

await build({
  entrypoints: ['src/index.ts'],
  target: 'bun',
  minify: true,
  sourcemap: 'linked',
  outdir: 'dist',
  compile: isJs ? false : { outfile: 'app' },
  define: {
    'process.env.NODE_ENV': JSON.stringify('production'),
  },
})

When singlefile, it just 1.7MB, but build js, it can bundle ext file

$ bun run src/build.ts
dist/app 1.70 MB
dist/index.js.map 5.00 MB

$ bun run src/build.ts -j
dist/index.js 1.70 MB
dist/index.js.map 5.00 MB
dist/pglite-834ka1w2.wasm 8.45 MB
dist/pglite-0xccq9tf.data 4.71 MB

[chrisjcthomas]

To embed assets into a single binary compiled with bun build --compile, you should use the standard with { type: "file" } import attribute.

In your code, you have:

import wasmPath from './pglite.wasm' with { type: 'file',  embed: 'true' }

In Bun, the embed: "true" attribute is only used for the sqlite loader (e.g. with { type: "sqlite", embed: "true" }). For general files like .wasm or .data, embed: "true" is not supported and will cause configuration or compilation issues.

To fix this, update your imports to only use type: "file":

import wasmPath from './pglite.wasm' with { type: 'file' }
import dataPath from './pglite.data' with { type: 'file' }

export async function createPGlite(dataDir: string, options?: PGliteOptions): Promise<PGlite> {
  // Read the embedded files using Bun.file()
  const [wasmBuffer, dataBuffer] = await Promise.all([
    Bun.file(wasmPath).arrayBuffer(),
    Bun.file(dataPath).arrayBuffer()
  ]);
  // ...
}

When you compile using bun build --compile ./index.ts --outfile app, Bun will automatically read these files at build-time, embed them in the executable, and map wasmPath/dataPath to internal $bunfs/... paths at runtime which are correctly resolved by Bun.file().

[truffle-dev]

Embedding general files (.wasm, .data, anything) into a --compile single-file executable is fully supported; it's one of the main points of --compile. with { type: "file" } is all you need. The embed: "true" attribute isn't required and doesn't cause any problem here: I tested both forms on 1.3.12 (your version) and both compile and run identically, so it's a harmless no-op for the file loader rather than something that breaks the build.

The detail that matters is that embedding only happens under --compile. In a plain bun build --outdir ... a type: "file" import copies the asset next to the output; with --compile the bytes are baked into the binary and the import resolves to a virtual path at runtime.

Minimal repro on 1.3.12:

// app.ts
import wasmPath from "./blob.wasm" with { type: "file" };
const bytes = await Bun.file(wasmPath).arrayBuffer();
console.log(wasmPath, bytes.byteLength);
console.log("embeddedFiles:", Bun.embeddedFiles.length);

bun build ./app.ts --compile --outfile app

Copy the produced app to a directory that does not contain blob.wasm, then run it:

/$bunfs/root/blob-xxxx.wasm 32
embeddedFiles: 1

The path prints as /$bunfs/root/... and the bytes still read even though the source file isn't there; that's the proof they're coming from inside the binary. Bun.embeddedFiles is non-empty in the compiled binary and empty under bun run, which is a quick way to confirm embedding actually happened.

So your createPGlite code is already correct: Bun.file(wasmPath).arrayBuffer() on a type: "file" import is exactly the right pattern for both .wasm and .data. You can drop the embed: "true" (harmless either way), and just make sure the final artifact is built with --compile. If it's still not embedding, the usual cause is building with --outdir / no --compile, where the files land beside the executable instead of inside it.

[seepine]

sorry, I made a mistake. The new version of pglite requires importing more wasm, it can work properly now.

import { PGlite, type PGliteOptions } from '@electric-sql/pglite'

// @ts-ignore
import wasmPath from 'node_modules/@electric-sql/pglite/dist/pglite.wasm' with {
  type: 'file',
  embed: 'true',
}

// @ts-ignore
import initdbWasmPath from 'node_modules/@electric-sql/pglite/dist/initdb.wasm' with {
  type: 'file',
  embed: 'true',
}

// @ts-ignore
import dataPath from 'node_modules/@electric-sql/pglite/dist/pglite.data' with {
  type: 'file',
  embed: 'true',
}

export async function createPGlite(dataDir: string, options?: PGliteOptions): Promise<PGlite> {
  // Read the embedded files
  const [wasmBuffer, initdbBuffer, dataBuffer] = await Promise.all([
    Bun.file(wasmPath).arrayBuffer(),
    Bun.file(initdbWasmPath).arrayBuffer(),
    Bun.file(dataPath).arrayBuffer(),
  ])
  // Create PGlite instance with pre-loaded modules
  const db = await PGlite.create(dataDir, {
    ...options,
    pgliteWasmModule: await WebAssembly.compile(wasmBuffer), // not `wasmModule`
    initdbWasmModule: await WebAssembly.compile(initdbBuffer),
    fsBundle: new Blob([dataBuffer]),
  })
  return db
}