Merge pull request #1342 from mathuo/feat/dockview-modules-package

feat: extract separable feature modules into a dockview-modules package

Author: mathuo

MIGRATION-v7.md

@@ -14,7 +14,18 @@ package.
 
 ## React users — action required (breaking)
 
-The React bindings moved from `dockview` to `dockview-react`.
+The React bindings moved from `dockview` to `dockview-react`. In v7 the
+`dockview` package is the vanilla JavaScript library (a re-export of
+`dockview-core`), so it no longer exports the React components.
+
+**Symptoms if you don't migrate** (the React names are simply gone — core names
+like `DockviewComponent` still resolve from `dockview`):
+
+- TypeScript: `error TS2305: Module '"dockview"' has no exported member 'DockviewReact'`
+- Runtime (JS): React throws *"Element type is invalid … got: undefined"* when
+  rendering `<DockviewReact />`, because the import resolves to `undefined`.
+
+The fix is to install and import from `dockview-react`:
 
 ```diff
 - npm install dockview
@@ -61,6 +72,25 @@ grep -rl "from 'dockview'" src | xargs sed -i '' "s/from 'dockview'/from 'dockvi
 `dockview-core` continues to be published and will keep working, but new code
 should depend on `dockview`.
 
+### `dockview-core` no longer bundles every feature (behaviour change)
+
+In v6, `dockview-core` shipped with all built-in features registered. In v7 a
+set of feature modules is no longer part of bare `dockview-core`:
+
+- **tab group chips** (chip rendering + the `onDid*TabGroup` events)
+- **context menus** (the built-in tab / chip right-click menus)
+- **advanced drag-and-drop** (`onWillDragPanel` / `onWillDragGroup` /
+  `onWillDrop` hooks, custom drag ghost / drop overlay)
+- **keyboard accessibility** (keyboard navigation / docking / live-region
+  announcements)
+
+These now live in the `dockview` package. **`dockview-core` is an internal
+package — use `dockview`** (or a framework package — `dockview-react` / `-vue` /
+`-angular`, which all consume `dockview`). Nothing throws if you stay on bare
+`dockview-core` — the affected features simply do nothing — so a one-time
+`console.warn` is emitted when a component is constructed on bare `dockview-core`
+steering you to `dockview`.
+
 ## Vue / Angular users
 
 No source changes required — keep installing `dockview-vue` / `dockview-angular`

__generated__/dockview-core-exports.txt

@@ -19,7 +19,7 @@
             "cache": true
         },
         "build:bundle": {
-            "dependsOn": ["build"],
+            "dependsOn": ["build", "^build:bundle"],
             "inputs": ["production", "^production"],
             "outputs": ["{projectRoot}/dist"],
             "cache": true

nx.json

@@ -16,8 +16,8 @@
     "packages/*"
   ],
   "scripts": {
-    "build": "nx run-many -t build --projects=dockview-core,dockview,dockview-vue,dockview-react,dockview-angular",
-    "build:bundle": "nx run-many -t build:bundle --projects=dockview-core,dockview,dockview-vue,dockview-react,dockview-angular",
+    "build": "nx run-many -t build --projects=dockview-core,dockview-modules,dockview,dockview-vue,dockview-react,dockview-angular",
+    "build:bundle": "nx run-many -t build:bundle --projects=dockview-core,dockview-modules,dockview,dockview-vue,dockview-react,dockview-angular",
     "clean": "nx run-many -t clean",
     "docs": "typedoc && node scripts/docs.mjs",
     "lint": "nx run-many -t lint",

package.json

@@ -19,6 +19,8 @@ const config: JestConfigWithTsJest = {
     moduleNameMapper: {
         '^dockview$': '<rootDir>/packages/dockview/src/index.ts',
         '^dockview-core$': '<rootDir>/packages/dockview-core/src/index.ts',
+        '^dockview-modules$':
+            '<rootDir>/packages/dockview-modules/src/index.ts',
     },
     modulePathIgnorePatterns: [
         '<rootDir>/packages/dockview-angular/src/__tests__/__mocks__',

packages/dockview-angular/jest.config.ts

@@ -1,7 +1,6 @@
 import { VoidContainer } from '../../../../dockview/components/titlebar/voidContainer';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { DockviewComponent } from '../../../../dockview/dockviewComponent';
-import { AdvancedDnDService } from '../../../../dockview/advancedDnDService';
 import { DockviewGroupPanel } from '../../../../dockview/dockviewGroupPanel';
 import { DockviewGroupPanelModel } from '../../../../dockview/dockviewGroupPanelModel';
 import {
@@ -616,10 +615,15 @@ describe('voidContainer', () => {
                 api: fakeApi as any,
                 options: { createGroupDragGhostComponent: factory },
                 doSetGroupActive: jest.fn(),
-                // The custom-ghost resolution now lives in AdvancedDnDService;
-                // delegate to the real service so this still exercises it.
-                buildGroupDragGhost: (g: any) =>
-                    new AdvancedDnDService(accessor).buildGroupDragGhost(g),
+                // The custom-ghost resolution lives in the AdvancedDnD module
+                // (covered by its own tests). Here we stub the host's ghost
+                // builder — exactly what DockviewComponent provides to
+                // VoidContainer — to verify VoidContainer drives the lifecycle.
+                buildGroupDragGhost: (g: any) => {
+                    const r = factory(g);
+                    r.init({ group: g, api: fakeApi });
+                    return { element: r.element, dispose: () => r.dispose() };
+                },
             });
             const group = fromPartial<DockviewGroupPanel>({
                 id: 'g1',