react-zebra-print monorepo

pnpm workspace that hosts two reusable packages and a demo app that consumes them as if they were external dependencies.

Packages and apps

• packages/zebra-web-bridge – TypeScript SDK that wraps the local Zebra BrowserPrint service. It exposes getLocalDevices (with timeout handling, data normalization, and typed errors) and will be the entry point for future methods (getDefaultDevice, send, etc.). Tested with Vitest.
• packages/react-zebra-print – React library built on top of the bridge and exposing the useZebraPrinters hook. Produces ESM/CJS bundles plus .d.ts declarations; depends on the bridge via workspace:*.
• apps/demo – Vite app that installs react-zebra-print as a dependency and showcases the hook.

Development workflow

Recommended mode (real package build)

pnpm run dev:watch

Runs vite build --watch in the library and pnpm --filter demo dev in parallel. The demo therefore consumes the exact output that would ship to npm, including the .d.ts files generated by vite-plugin-dts.

Fast mode (temporary alias)

You can map react-zebra-print to the source code in apps/demo/vite.config.ts when you need ultra-fast iterations:

resolve: {
  alias: {
    'react-zebra-print': fileURLToPath(new URL('../../packages/react-zebra-print/src', import.meta.url)),
  },
}

Remove the alias before publishing or validating: this shortcut can duplicate React and hides issues that might appear in the real build.

Key commands

pnpm install                     # install dependencies
pnpm run dev:watch               # watch build + demo
pnpm run dev                     # alias, same behavior
pnpm run build                   # build the react-zebra-print package
pnpm --filter zebra-web-bridge test
pnpm --filter react-zebra-print test

The scripts run from the workspace root thanks to pnpm filters.

Publishing

1. Make sure both packages compile and emit types:

   pnpm --filter zebra-web-bridge build   # add a build script if needed
   pnpm --filter react-zebra-print build

2. Run the test suites (pnpm --filter ... test).
3. Publish each package from the root or per directory (pnpm publish --filter react-zebra-print --access public, etc.).
4. Confirm that packages/react-zebra-print/dist/ contains index.mjs, index.cjs, and index.d.ts; and that packages/zebra-web-bridge exposes the expected entry points (currently src/index.ts).

Notes

• tsconfig.base.json defines the strict mode that every package inherits.
• Both packages include tests; the demo app acts only as a manual consumer.
• The bridge normalizes the BrowserPrint payload (currently { deviceList: [...] }) while remaining compatible with the legacy type-keyed format.