Registry / devops / rollup-plugin-pb2zig

rollup-plugin-pb2zig

library0.15.2jsnpmunverified

Rollup/Vite plugin that compiles Pixel Bender (PBK) kernels into WebAssembly via Zig, enabling GPU-like image processing in the browser. Version 0.15.2 targets Zig 0.14.x; major/minor versions align with Zig compiler versions. Key differentiators: integrates with Rollup/Vite build pipeline, optionally supports multithreaded WebAssembly workers for non-blocking UI. Requires separate Zig compiler installation. Active development with frequent updates tracking Zig releases.

devops

npm install rollup-plugin-pb2zig

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-PB2Z

rollup-plugin-pb2zig

devopsjavascriptv0.15.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

rollup-plugin-pb2zig

✓ import Pb2Zig from 'rollup-plugin-pb2zig'

✗ const Pb2Zig = require('rollup-plugin-pb2zig')

Default export; use ESM import syntax for Rollup/Vite configs. CommonJS may not work due to ESM nature.

createImageData

✓ import { createImageData } from './filter.pbk'

✗ import createImageData from './filter.pbk'

Virtual module exports named function; default import not available. Path must be a .pbk file.

createOutput

✓ import { createOutput } from './filter.pbk'

✗ import { createImageData } from './filter.pbk'

Multithreaded mode renames exported function; use createOutput when multithreaded: true.

Sets up Vite with Pb2Zig plugin and applies a Pixel Bender filter to a canvas using named export from .pbk file.

// vite.config.js import { defineConfig } from 'vite'; import Pb2Zig from 'rollup-plugin-pb2zig'; export default defineConfig({ plugins: [Pb2Zig()], }); // App.jsx import { createImageData } from './crystallize.pbk'; export function App() { function applyFilter() { const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d', { willReadFrequently: true }); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const result = createImageData(canvas.width, canvas.height, imageData, { size: 25 }); ctx.putImageData(result, 0, 0); } return ( <div> <canvas id="canvas" width="400" height="300"></canvas> <button onClick={applyFilter}>Apply Filter</button> </div> ); }

Debug

Known issues

gotchaZig compiler must be installed separately and in PATH

fix

Install Zig following https://ziglang.org/learn/getting-started/ or use ZVM.

affects: all

breakingMajor/minor version tied to Zig compiler version; incompatible with other Zig versions

fix

Use version matching your Zig compiler (e.g., rollup-plugin-pb2zig 0.15.x for Zig 0.15.x).

affects: >=0.15.0

gotchaMultithreaded mode renames exported function to createOutput; single-thread uses createImageData

fix

When multithreaded: true in plugin options, import { createOutput } instead of createImageData.

affects: all

gotchaMust import from .pbk file directly; virtual module resolves at build time

fix

Ensure .pbk files exist in project and are imported as relative paths (e.g., './filter.pbk').

affects: all

deprecatedRequires WebAssembly support in browser; no fallback for older browsers

fix

Check browser compatibility for WebAssembly; polyfills not available.

affects: all

Errors

Common errors & fixes

Error: Cannot find module 'zigar'

Missing dependency in node_modules

fix

npm install --save-dev zigar

TypeError: createImageData is not a function

Wrong import name for multithreaded mode

fix

Use import { createOutput } from './filter.pbk' when plugin has multithreaded: true

Error: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type

Vite dev server not serving .wasm correctly

fix

Ensure Vite config includes necessary MIME type handling or use built version.

Upgrade

Version history

0.15.2latest on npm

Audit

Dependencies

zigarrequiredcompiles Zig to WebAssembly

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/chung-leong/pb2zig ↗

packagerollup-plugin-pb2zig ↗

homepagehttps://github.com/chung-leong/pb2zig#readme ↗