Skip to content

feat(preview): support loading the Preview library from npm - #4695

Open
jackiejou wants to merge 1 commit into
box:masterfrom
jackiejou:npm-content-preview
Open

feat(preview): support loading the Preview library from npm#4695
jackiejou wants to merge 1 commit into
box:masterfrom
jackiejou:npm-content-preview

Conversation

@jackiejou

@jackiejou jackiejou commented Jul 14, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds an opt-in path for loading the Preview library from the box-content-preview npm package instead of injecting CDN script/stylesheet tags, gated on the useNpmBoxContentPreview feature flag.

  • Flag off (default): behavior is unchanged; preview.js and preview.css are loaded from the CDN and global.Box.Preview is used.
  • Flag on: box-content-preview and its styles.css are loaded via dynamic import, and the named Preview export is used. Two option groups are forwarded to Preview.show() that the npm build cannot self-derive from a CDN script tag:
    • pdfjs: { workerSrc } from the new optional pdfjsWorkerSrc prop, so document viewers can boot the pdfjs worker the consumer bundled
    • location: { staticBaseURI, version, locale } derived from the existing staticHost/staticPath/previewLibraryVersion/language props, so viewers that build asset URLs from staticBaseURI keep working

Requires box-content-preview >= 3.62.0 (box/box-content-preview#1704), declared as an optional peer dependency; consumers on the CDN path do not need to install it. Consumers on the npm path must also bundle a pdfjs-dist worker matching the version pinned by their installed box-content-preview.

Details

  • A failed dynamic import (or a module missing the Preview export) surfaces through the standard error path: loading state ends, error state renders, and the host onError callback fires with the underlying cause.
  • The flag is evaluated at mount; changing it after mount has no effect.
  • box-content-preview@3.62.1 is added as a devDependency so Flow, jest, and the webpack builds resolve the real package. Two build-config accommodations exist only because this repo is itself the box-ui-elements peer that box-content-preview imports: a box-ui-elements/es -> src/ alias in the webpack/Storybook configs (the published es/ output does not exist in the working tree), and a babel-loader exclude for box-content-preview's pre-bundled dist (it ships modern syntax and needs no transpilation). Neither affects consumers.

Testing

  • New unit tests cover: flag off (CDN injection unchanged), flag on (dynamic import, no tag injection, show() option shapes including staticHost trailing-slash handling), pdfjs omitted when pdfjsWorkerSrc is absent, and both import-failure paths.
  • yarn flow check, eslint, and the full ContentPreview test suite (158 tests) pass. The production webpack build and Storybook build compile with the npm package resolved.

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants