feat(react,vue): add RowDetail portal/teleport host context propagation

[ghiscoding]

vibe coded with copilot using Claude Sonnet 4.6

Summary

Adds opt-in RowDetailPortalHost (React) and RowDetailTeleportHost (Vue) companion components that keep row detail panels inside the framework's component tree, giving them full access to providers that were previously unreachable.

Problem

Both plugins previously rendered each row detail in an isolated root outside the main app tree:

• React — createRoot() was called per row, breaking useContext, Redux, Zustand, etc., and producing a dev-mode console warning on every render (documented in the source code).
• Vue — createApp() was called per row, isolating it from provide/inject, Pinia, and Vue Router. The DOM was also moved manually via a temp div, which was a workaround for the same problem.

Solution

React — RowDetailPortalHost

A companion React component that uses ReactDOM.createPortal to render each open row detail into its slickgrid container div, while keeping the component inside the app's React tree.

import { ReactRowDetailView, RowDetailPortalHost } from '@slickgrid-universal/react-row-detail-plugin';

const rowDetailPlugin = new ReactRowDetailView(eventPubSubService);

return (
  <>
    <SlickgridReact ... externalResources={[rowDetailPlugin]} />
    <RowDetailPortalHost plugin={rowDetailPlugin} />
  </>
);

Vue — RowDetailTeleportHost

A companion Vue component that uses the built-in <Teleport> directive to render each open row detail into its slickgrid container element, while keeping it inside the Vue component tree.

<SlickgridVue ... :external-resources="[rowDetailPlugin]" />
<RowDetailTeleportHost :plugin="rowDetailPlugin" />

How it works

The plugin exposes a registerPortalHost() / registerTeleportHost() method. The host component calls it on mount with a state setter, and the plugin pushes entry updates (add/update/remove) to that setter. When the host is not present, the plugin falls back to the previous isolated createRoot/createApp behavior — fully backward compatible.

Changes

File	Change
react-row-detail-plugin/src/reactRowDetailView.ts	Added PortalEntry interface, registerPortalHost(), _updatePortalEntry(), _removePortalEntry(); portal-mode branches in renderViewModel, renderPreloadView, disposeViewComponent, disposeAllViewComponents
react-row-detail-plugin/src/RowDetailPortalHost.tsx	New component
react-row-detail-plugin/tsconfig.json	Added "jsx": "react-jsx"
react-row-detail-plugin/src/index.ts	Export RowDetailPortalHost
vue-row-detail-plugin/src/vueRowDetailView.ts	Added TeleportEntry interface, registerTeleportHost(), _updateTeleportEntry(), _removeTeleportEntry(); teleport-mode branches in render/dispose methods
vue-row-detail-plugin/src/RowDetailTeleportHost.ts	New component
vue-row-detail-plugin/src/index.ts	Export RowDetailTeleportHost

Breaking Changes

None. Both plugins are fully backward compatible — the host component is opt-in.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.0%. Comparing base (9dcc1ff) to head (a510e74).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2602   +/-   ##
=======================================
  Coverage   100.0%   100.0%           
=======================================
  Files         199      199           
  Lines       25168    25170    +2     
  Branches     8908     8909    +1     
=======================================
+ Hits        25168    25170    +2     

Flag	Coverage Δ
angular	100.0% <ø> (ø)
universal	100.0% <100.0%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[pkg-pr-new]

angular-slickgrid

npm i https://pkg.pr.new/angular-slickgrid@2602

aurelia-slickgrid

npm i https://pkg.pr.new/aurelia-slickgrid@2602

slickgrid-react

npm i https://pkg.pr.new/slickgrid-react@2602

slickgrid-vue

npm i https://pkg.pr.new/slickgrid-vue@2602

@slickgrid-universal/angular-row-detail-plugin

npm i https://pkg.pr.new/@slickgrid-universal/angular-row-detail-plugin@2602

@slickgrid-universal/aurelia-row-detail-plugin

npm i https://pkg.pr.new/@slickgrid-universal/aurelia-row-detail-plugin@2602

@slickgrid-universal/react-row-detail-plugin

npm i https://pkg.pr.new/@slickgrid-universal/react-row-detail-plugin@2602

@slickgrid-universal/vue-row-detail-plugin

npm i https://pkg.pr.new/@slickgrid-universal/vue-row-detail-plugin@2602

@slickgrid-universal/binding

npm i https://pkg.pr.new/@slickgrid-universal/binding@2602

@slickgrid-universal/common

npm i https://pkg.pr.new/@slickgrid-universal/common@2602

@slickgrid-universal/composite-editor-component

npm i https://pkg.pr.new/@slickgrid-universal/composite-editor-component@2602

@slickgrid-universal/custom-footer-component

npm i https://pkg.pr.new/@slickgrid-universal/custom-footer-component@2602

@slickgrid-universal/custom-tooltip-plugin

npm i https://pkg.pr.new/@slickgrid-universal/custom-tooltip-plugin@2602

@slickgrid-universal/empty-warning-component

npm i https://pkg.pr.new/@slickgrid-universal/empty-warning-component@2602

@slickgrid-universal/event-pub-sub

npm i https://pkg.pr.new/@slickgrid-universal/event-pub-sub@2602

@slickgrid-universal/excel-export

npm i https://pkg.pr.new/@slickgrid-universal/excel-export@2602

@slickgrid-universal/graphql

npm i https://pkg.pr.new/@slickgrid-universal/graphql@2602

@slickgrid-universal/odata

npm i https://pkg.pr.new/@slickgrid-universal/odata@2602

@slickgrid-universal/pagination-component

npm i https://pkg.pr.new/@slickgrid-universal/pagination-component@2602

@slickgrid-universal/pdf-export

npm i https://pkg.pr.new/@slickgrid-universal/pdf-export@2602

@slickgrid-universal/row-detail-view-plugin

npm i https://pkg.pr.new/@slickgrid-universal/row-detail-view-plugin@2602

@slickgrid-universal/rxjs-observable

npm i https://pkg.pr.new/@slickgrid-universal/rxjs-observable@2602

@slickgrid-universal/sql

npm i https://pkg.pr.new/@slickgrid-universal/sql@2602

@slickgrid-universal/text-export

npm i https://pkg.pr.new/@slickgrid-universal/text-export@2602

@slickgrid-universal/utils

npm i https://pkg.pr.new/@slickgrid-universal/utils@2602

@slickgrid-universal/vanilla-bundle

npm i https://pkg.pr.new/@slickgrid-universal/vanilla-bundle@2602

@slickgrid-universal/vanilla-force-bundle

npm i https://pkg.pr.new/@slickgrid-universal/vanilla-force-bundle@2602

commit: a510e74