Skip to content

fix(sidebar): make sidebar interop work inside Razor Class Libraries + CLI install hardening - #30

Merged
Shewart merged 12 commits into
mainfrom
fix/sidebar-js-interop-rcl
Sep 26, 2026
Merged

Shewart merged 12 commits into
mainfrom
fix/sidebar-js-interop-rcl

Conversation

@Shewart

@Shewart Shewart commented Sep 26, 2026

Copy link
Copy Markdown
Contributor

Summary

SidebarProvider now uses the host-loaded shellui.js for its JavaScript calls instead of dynamically importing ./shellui-sidebar.js. The relative import resolved against the page URL, so it returned a 404 whenever the generated component was compiled into a consumer's own Razor Class Library, where the asset is served from _content/<Library>/. The error was swallowed by a try/catch, so mobile detection and the Ctrl/Cmd+B shortcut silently did nothing. This came up in a real consumer (FDMS.UI).

This PR also hardens init / add / update in the CLI and refreshes the docs.

Changes

Templates

  • shellui-js: adds ShellUI.initSidebar(handle, dotNetRef) / ShellUI.disposeSidebar(handle) (media-query mobile detection plus the Ctrl/Cmd+B shortcut, tracked per handle). The file now extends window.ShellUI with Object.assign instead of replacing it.
  • sidebar-provider: calls the global helpers with a per-instance handle, depends on shellui-js instead of sidebar-js, and logs interop failures instead of swallowing them.
  • sidebar: no longer depends on sidebar-js.
  • sidebar-js: kept as a hidden legacy entry, only for projects that still have the old generated provider.
  • copy-button: removed the import("./_content/ShellUI.Components/shellui.js") attempt and calls ShellUI.copyToClipboard directly.

CLI

  • add with dependencies: if a dependency fails, the parent is now marked failed instead of being installed on top of a missing dependency. NuGet packages are still collected for components whose files were skipped as already present.
  • Upgrading shellui.js: if the existing wwwroot/shellui.js predates the sidebar API, add rewrites it. If the file is marked customized, add stops and tells the user to update it by hand.
  • update:
    • Before rewriting a component that depends on shellui-js, it makes sure a compatible shellui.js is installed.
    • It now records the new version in shellui.json. Previously it passed skipConfig: true, so versions were never updated.
  • remove sidebar-js: refuses while the project's SidebarProvider still imports the legacy module.
  • init:
    • Fails loudly if shell or shellui-js can't be installed.
    • Both are now recorded in shellui.json.
    • shellui.json is written only after the Tailwind build succeeds, so a failed init can be re-run.
  • npm Tailwind path: runs npx @tailwindcss/cli (the Tailwind v4 package name) instead of npx tailwindcss.
  • Messages: all user-facing hints say shellui … instead of dotnet shellui …, because it's installed as a global tool.

Tests (98 passing)

  • RelativeJsModuleImportTests: fails if any template dynamically imports a relative ./ or ../ JS module (sidebar-js is exempt as the legacy entry).
  • SidebarInteropTests: checks that the provider uses the global helpers, that shellui.js exposes and cleans up the sidebar API, that sidebar-js is hidden and nothing depends on it, and that the NuGet package's SidebarProvider keeps its _content/ path.
  • sidebar-provider added to RazorTemplate_CodeBlockParses.

CI

  • The init smoke test checks that SidebarProvider.razor calls ShellUI.initSidebar and does not import shellui-sidebar.js, that shellui.js exposes initSidebar / disposeSidebar, and that a fresh sidebar install does not write wwwroot/shellui-sidebar.js.

Docs

  • README files (root, CLI, Components, Templates) and docs/* rewritten against the current registry: 73 direct CLI targets, 173 registry entries, and a CLI command list that matches the tool.
  • RELEASE_NOTES.md: adds an "Unreleased / current source" section above the historical v0.3.0-rc.1 notes.
  • The safelist regeneration hint in SafelistDriftTests now includes the .targets output path.

Backward compatibility

  • Existing projects that already have wwwroot/shellui-sidebar.js and the old provider keep working, because sidebar-js stays in the registry.
  • Running shellui update sidebar-provider moves a project to the new interop and upgrades shellui.js if needed.
  • The ShellUI.Components NuGet package is unchanged. Its SidebarProvider still imports its own asset through _content/ShellUI.Components/.

Test plan

  • dotnet build ShellUI.slnx -c Release
  • dotnet test ShellUI.slnx -c Release (98/98)
  • CI init smoke job (new sidebar assertions)
  • Manual check: shellui add dashboard-02 in a Razor Class Library consumed by a Blazor Server host. The sidebar should collapse at widths under 768px and toggle with Ctrl+B.

Follow-ups (separate PR, before v0.3.0-rc.2)

  • 22 templates expose ClassName while the NuGet package components expose Class. Class="…" falls through to the unmatched attributes and can drop the base styling (the Skeleton report).
  • shellui add exits with code 0 even when components fail.
  • release.yml uses the whole of RELEASE_NOTES.md as the release body; it needs to use only the section for the tag being released.
  • update prints "Updated" and counts skipped components as successfully updated.

Shewatipa Tseisi added 12 commits September 24, 2026 14:25
…ng redundant try-catch block

Streamlined the clipboard copy functionality in the CopyButtonTemplate by eliminating the nested try-catch structure. The code now directly invokes the `copyToClipboard` method, improving readability and maintainability.
…d ShellUI JS integration

- Introduced a constant for the ShellUI JS sidebar API marker to facilitate checks during component installation.
- Updated `InstallComponentForInitAsync` to return a boolean indicating success or failure, improving error handling.
- Added `EnsureShellUiJs` method to ensure the ShellUI JS component is installed correctly, including updates to the configuration file when necessary.
- Enhanced existing installation logic to handle cases where components already exist, providing feedback on updates and installations.
- Improved overall readability and maintainability of the component installation process.
… imports

- Introduced `RelativeJsModuleImportTests` to ensure templates do not dynamically import relative JS modules, which can lead to 404 errors when compiled into Razor Class Libraries.
- Added `SidebarInteropTests` to verify that the sidebar provider uses global lifecycle interop and that the sidebar JS is retained only as a hidden legacy alias.
- Updated `TemplateCompileTests` to include the `sidebar-provider` component, ensuring comprehensive coverage of Razor template parsing.
…ent removal logic

- Changed CLI command references from 'dotnet shellui' to 'shellui' for consistency.
- Added a warning when attempting to remove 'sidebar-js' if it is still referenced by the SidebarProvider.
- Improved error handling for uninitialized ShellUI state during component operations.
…mmand references and enhance initialization logic

- Changed CLI command references from 'dotnet shellui' to 'shellui' for consistency across the application.
- Improved error messages for uninitialized ShellUI state to provide clearer guidance.
- Enhanced the initialization process by ensuring configuration is prepared and saved correctly, improving overall user experience during setup.
…cumentation clarity

- Modified the 'update' command description to better reflect its functionality, emphasizing the rewriting of installed components from current CLI templates.
- Revised the README to clarify the purpose of the ShellUI CLI, including versioning details and installation instructions, ensuring users have a clear understanding of the tool's capabilities and usage.
…nstructions

- Revised the README to provide a clearer overview of the `ShellUI.Components` library, emphasizing its .NET 10 compatibility and Tailwind CSS integration.
- Streamlined installation instructions for published packages, clarifying versioning details and current-source workflows.
- Enhanced the documentation to reflect the latest features and installation paths, ensuring users have accurate guidance for utilizing the library.
…ities

- Updated ShellUI JavaScript utilities to improve global interactivity and sidebar integration.
- Refined the sidebar interop logic, including mobile detection and keyboard shortcuts, to enhance user experience.
- Adjusted dependencies in SidebarProviderTemplate to reflect the new ShellUI JS integration.
- Deprecated the legacy sidebar-js module, clarifying its purpose in the updated context.
…tructions

- Revised the README to enhance clarity on the ShellUI component library, emphasizing the CLI-first approach and options for referencing components.
- Updated installation instructions to reflect the latest versioning and packaging details, ensuring users have accurate guidance for setup.
- Improved the status section to provide a clearer overview of current capabilities and compatibility with .NET 10 and Tailwind CSS.
- Revised the VERSIONING_STRATEGY.md to reflect the current version `0.4.0-alpha.1`, clarifying the unified versioning approach and publication boundaries.
- Enhanced the ARCHITECTURE.md to describe the current source tree, including the CLI and component structure, and updated the architecture graph for better clarity.
- Updated CLI_INSTALLATION.md to provide accurate installation instructions for the current source and published packages, including versioning details.
- Streamlined CLI_SYNTAX.md to align with the latest command structure and options available in the current source.
- Adjusted COMPONENT_DEPENDENCIES.md to reflect the authoritative source for component dependencies and their installation behavior.
- Revised COMPONENT_ROADMAP.md to outline the current inventory and goals for future component development.
…d bundle size

- Updated CI workflow to enhance validation for ShellUI initialization, ensuring that the correct JavaScript files are referenced and that the sidebar integration is properly handled.
- Revised size guard comments for clarity and adjusted the bundle size threshold to prevent runaway outputs.
- Added checks to confirm the presence of necessary functions in the global ShellUI JavaScript and to ensure legacy sidebar JS is not included in fresh installs.
- Modified the safelist drift test to include an additional target file in the regeneration command, ensuring accurate instructions for updating the safelist.
- This change enhances the clarity of the error message when the safelist is out of date, providing users with the correct command to regenerate the safelist.
@Shewart
Shewart merged commit ed11b8e into main Sep 26, 2026
1 check passed
@Shewart
Shewart deleted the fix/sidebar-js-interop-rcl branch September 26, 2026 12:13
@Shewart Shewart mentioned this pull request Sep 26, 2026
8 tasks
Shewart added a commit that referenced this pull request Sep 26, 2026
## Summary

This prepares `v0.3.0-rc.2`: it sets the version, writes the release
notes, and updates the docs. It also adds the three new charts to the
CLI and fixes chart tooltips. After merge, tag the merged commit on
`main` as `v0.3.0-rc.2` to publish.

## Release changes

- **Version:** `Directory.Build.props` goes from `0.4.0-alpha.1` to
`0.3.0-rc.2`. v0.3.0 ships from `main` first, and 0.4 starts after it.
- **Release notes:** the "Unreleased" section becomes `# ShellUI
v0.3.0-rc.2`. It covers the move to .NET 10 (a breaking change),
Tailwind 4.3.2, the new components, and the fixes from #29, #30 and the
`Class` parameter PR.
- **`release.yml`:** fails before building or publishing when the CLI or
Components version doesn't match the tag.
- **Docs (16 files):** install commands pin `--version 0.3.0-rc.2`, and
`0.3.0-rc.1` is named as the last release for .NET 9. Docs that only
restated the current version now point to `Directory.Build.props`.
Component counts are updated to 76 direct targets and 176 registry
entries.

## Charts

- **New CLI targets:** `donut-chart`, `radar-chart` and `radial-chart`.
Before this, they existed only in the NuGet package.
- **The CLI `chart-variants` template had drifted from the package in
#26.** CLI-installed charts had broken tooltips: empty rows for pie,
donut and radial. They also used the reverted `oklch` palette and lacked
the animation and legend options. The template now matches the package,
and `Chart` gains `ShowToolbar` and `ShowLegend`.
- **Radar tooltips never appeared** because of the shared tooltip mode.
RadarChart now uses per-point tooltips.
- **Tooltip x-axis labels:** they were dropped for bar and radar charts
because an empty categories list stopped the lookup. Fixed in the
package, the template and the demo.
- **Tests:** new drift check between `chart-variants` and the package,
and sync and dependency coverage for the new charts.

## Test plan

- [x] Clean Release build of `ShellUI.slnx`: no warnings or errors
- [x] `dotnet test`: 107/107 passing
- [x] Demo app build: no warnings or errors
- [x] Fresh Blazor app: `shellui add donut-chart radar-chart
radial-chart pie-chart bar-chart` exits with 0, builds with no warnings,
and all five tooltips show label and value on hover
- [x] Version check: tag `v0.3.0-rc.2` passes and a mismatched tag fails
- [x] `scripts/extract-release-notes.sh 0.3.0-rc.2` extracts the section
- [ ] CI
- [ ] After merge: `pwsh ./prepare-release.ps1 -Version 0.3.0 -Suffix
rc.2 -DryRun` on `main`

## After merge

1. `git checkout main && git pull --ff-only`
2. `pwsh ./prepare-release.ps1 -Version 0.3.0 -Suffix rc.2 -DryRun`
3. `git tag v0.3.0-rc.2 && git push origin v0.3.0-rc.2`
4. Test the published packages in FDMS and a fresh app, then prepare
`v0.3.0`.
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.

1 participant