feat(JitViewer): add JitViewer component

[ArgoZhang]

Link issues

fixes #972

Summary By Copilot

Regression?

• Yes
• No

Risk

• High
• Medium
• Low

Verification

• Manual (required)
• Automated

Packaging changes reviewed?

• Yes
• No
• N/A

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• Merge the latest code from the main branch

Summary by Sourcery

Add a new JitViewer UI component and supporting assets for client-side JIT file preview.

New Features:

• Introduce a JitViewer Blazor component for previewing files with configurable height, toolbar visibility, and theme.
• Add a JavaScript module to initialize, update, and dispose the JitViewer instance with locale and theme handling.
• Include bundled JitViewer CSS and JS assets and wire them into the component’s static resources.

[sourcery-ai]

Reviewer's Guide

Adds a new BootstrapBlazor JitViewer component that wraps a JS-based JIT viewer library, wires it up via JS interop, and includes its styling and static assets.

Sequence diagram for JitViewer component JS interop lifecycle

sequenceDiagram
    participant DotNet as JitViewer
    participant JSInterop as JSRuntime
    participant JSModule as JitViewer_js
    participant JV as window_JitViewer_viewer

    Note over DotNet,JSModule: Initial render
    DotNet->>DotNet: InvokeInitAsync()
    DotNet->>JSInterop: InvokeVoidAsync(init, Id, Interop, GetOptions())
    JSInterop->>JSModule: init(id, invoke, options)
    JSModule->>JSModule: setOptions(options)
    JSModule->>JV: createViewer({ target: el, ...options })
    JV->>JV: mount()

    Note over JSModule,JV: Theme change from document
    JSModule->>JV: setTheme(e.theme)

    Note over DotNet,JSModule: Parameter change after first render
    DotNet->>DotNet: OnParametersSet() sets _invoke = true
    DotNet->>JSModule: OnAfterRenderAsync() calls update(id, GetOptions())
    JSModule->>JSModule: setOptions(options)
    JSModule->>JV: setTheme(options.theme)
    JSModule->>JV: setLocale(options.locale)
    JSModule->>JV: setFile(options.file, options.fileName)

    Note over DotNet,JSModule: Component disposal
    DotNet->>JSModule: dispose(id)
    JSModule->>JV: destroy()

Loading

File-Level Changes

Change	Details	Files
Introduce JitViewer Blazor component with configurable options and JS interop lifecycle handling.	Define JitViewer partial component class with parameters for file path, display name, height, toolbar visibility, and theme. Build a CSS class string using CssBuilder and support additional HTML attributes. Track parameter changes via OnParametersSet and trigger JS update calls from OnAfterRenderAsync. Initialize the underlying JS viewer on first render through InvokeInitAsync with a serialized options object including locale and theme.	src/components/BootstrapBlazor.JitViewer/Components/JitViewer.razor.cs src/components/BootstrapBlazor.JitViewer/Components/JitViewer.razor
Add JavaScript module that loads the JIT viewer library, manages options, and exposes init/update/dispose APIs for the Blazor component.	Dynamically load CSS and JS assets for the JIT viewer using shared utility helpers. Create and mount the JitViewer instance, storing it in a shared Data store keyed by the component id. Normalize locale and theme options, including auto-resolving theme from the current BootstrapBlazor theme. Handle theme change events to update the viewer, and implement update and dispose functions that sync file, locale, and theme changes and clean up the viewer.	src/components/BootstrapBlazor.JitViewer/Components/JitViewer.razor.js
Include styling and bundled library assets for the JitViewer package.	Import the bundled JIT viewer CSS and hide branding through an override rule in jit-viewer.css. Add project scaffolding and static asset placeholders for the JitViewer library JS and CSS bundles.	src/components/BootstrapBlazor.JitViewer/wwwroot/jit-viewer.css src/components/BootstrapBlazor.JitViewer/BootstrapBlazor.JitViewer.csproj src/components/BootstrapBlazor.JitViewer/wwwroot/lib/jit-viewer.min.css src/components/BootstrapBlazor.JitViewer/wwwroot/lib/jit-viewer.min.js

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#972	Implement a new JitViewer Blazor component that wraps the Jit Viewer SDK and exposes basic configuration parameters (file path, file name, height, toolbar visibility, theme, locale).	✅
#972	Wire up the necessary JavaScript interop and static assets (JS/CSS) so the JitViewer component initializes, updates, and disposes the underlying viewer correctly in the browser.	✅
#972	Add the JitViewer component project and assets into the solution so it can be built and used as part of the library (including Razor, .csproj, and wwwroot files).	✅

Possibly linked issues

• feat(JitViewer): add JitViewer component #972: The PR implements the requested JitViewer component, adding the Blazor wrapper, JS interop, and related assets.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• The options object sent from the C# component (File, FileName, Locale, Theme, etc.) uses PascalCase but the JS module expects camelCase properties (file, fileName, locale, theme), so either align the property names in GetOptions() or normalize them in JitViewer.razor.js to avoid runtime issues.
• In JitViewer.razor.js, the changed.bb.theme event handler registered in init is never removed in dispose, which can lead to memory leaks; consider storing and detaching the handler when disposing the viewer.
• The update function in JitViewer.razor.js compares data.options with the new options but never updates data.options after applying changes, so subsequent updates always compare against the original options; you may want to sync data.options to the latest options after updating the viewer.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The options object sent from the C# component (`File`, `FileName`, `Locale`, `Theme`, etc.) uses PascalCase but the JS module expects camelCase properties (`file`, `fileName`, `locale`, `theme`), so either align the property names in `GetOptions()` or normalize them in `JitViewer.razor.js` to avoid runtime issues.
- In `JitViewer.razor.js`, the `changed.bb.theme` event handler registered in `init` is never removed in `dispose`, which can lead to memory leaks; consider storing and detaching the handler when disposing the viewer.
- The `update` function in `JitViewer.razor.js` compares `data.options` with the new `options` but never updates `data.options` after applying changes, so subsequent updates always compare against the original options; you may want to sync `data.options` to the latest options after updating the viewer.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}