rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-02-02 14:35:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: build fixes

Browse Source
This commit is contained in:
mathuo 2023-02-27 17:01:36 +08:00
parent e2049edab7
commit a9b44d9641
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
37 changed files with 307 additions and 551 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -13,8 +13,8 @@
"test": "jest",
"lint": "eslint packages/**/src/** --ext .ts,.tsx,.js,.jsx",
"package": "node scripts/package.js",
"package-all": "lerna run docs --scope dockview && node scripts/package.js",
"build": "lerna run build --scope dockview",
"package-all": "lerna run docs --scope '{dockview-core,dockview}' && node scripts/package.js",
"build": "lerna run build --scope '{dockview-core,dockview}'",
"clean": "lerna run clean",
"bootstrap": "lerna bootstrap",
"test:cov": "jest --coverage",

14
packages/dockview-core/jest.config.js
View File

@ -6,22 +6,22 @@ console.log('loaded');
module.exports = {
...baseConfig,
roots: ['<rootDir>/packages/dockview'],
modulePaths: ['<rootDir>/packages/dockview/src'],
roots: ['<rootDir>/packages/dockview-core'],
modulePaths: ['<rootDir>/packages/dockview-core/src'],
displayName: { name, color: 'blue' },
rootDir: '../../',
collectCoverageFrom: [
'<rootDir>/packages/dockview/src/**/*.{js,jsx,ts,tsx}',
'<rootDir>/packages/dockview-core/src/**/*.{js,jsx,ts,tsx}',
],
setupFiles: [
'<rootDir>/packages/dockview/src/__tests__/__mocks__/resizeObserver.js',
'<rootDir>/packages/dockview-core/src/__tests__/__mocks__/resizeObserver.js',
],
coveragePathIgnorePatterns: ['/node_modules/'],
modulePathIgnorePatterns: [
'<rootDir>/packages/dockview/src/__tests__/__mocks__',
'<rootDir>/packages/dockview/src/__tests__/__test_utils__',
'<rootDir>/packages/dockview-core/src/__tests__/__mocks__',
'<rootDir>/packages/dockview-core/src/__tests__/__test_utils__',
],
coverageDirectory: '<rootDir>/packages/dockview/coverage/',
coverageDirectory: '<rootDir>/packages/dockview-core/coverage/',
testResultsProcessor: 'jest-sonar-reporter',
testEnvironment: 'jsdom',
};

9
packages/dockview-core/package.json
View File

@ -24,8 +24,8 @@
"docs": "typedoc",
"prepack": "npm run rebuild && npm run test",
"rebuild": "npm run clean && npm run build",
"test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview",
"test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview --coverage",
"test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-core",
"test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-core --coverage",
"dev-publish": "node ./scripts/publishExperimental.js"
},
"files": [
@ -57,13 +57,8 @@
"license": "MIT",
"devDependencies": {
"@rollup/plugin-typescript": "^11.0.0",
"@testing-library/react": "^13.4.0",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"cross-env": "^7.0.3",
"postcss": "^8.4.21",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rimraf": "^4.1.2",
"rollup": "^3.15.0",
"rollup-plugin-postcss": "^4.0.2",

70
packages/dockview-core/rollup.config.js
View File

@ -6,19 +6,13 @@ const { terser } = require('rollup-plugin-terser');
const postcss = require('rollup-plugin-postcss');
const { name, version, homepage, license } = require('./package.json');
const reactMain = join(__dirname, './scripts/rollupEntryTarget-react.ts');
const reactMainNoStyles = join(__dirname, './src/index.ts');
const main = join(__dirname, './scripts/rollupEntryTarget-core.ts');
const mainNoStyles = join(__dirname, './src/core.ts');
const main = join(__dirname, './scripts/rollupEntryTarget.ts');
const mainNoStyles = join(__dirname, './src/index.ts');
const outputDir = join(__dirname, 'dist');
function outputFile(format, isMinified, withStyles, isReact) {
function outputFile(format, isMinified, withStyles) {
let filename = join(outputDir, name);
if (isReact) {
filename += '.react';
}
if (format !== 'umd') {
filename += `.${format}`;
}
@ -33,13 +27,13 @@ function outputFile(format, isMinified, withStyles, isReact) {
}
function getInput(options) {
const { withStyles, isReact } = options;
const { withStyles } = options;
if (withStyles) {
return isReact ? reactMain : main;
return main;
}
return isReact ? reactMainNoStyles : mainNoStyles;
return mainNoStyles;
}
function createBundle(format, options) {
@ -84,58 +78,28 @@ function createBundle(format, options) {
output['name'] = name;
}
if (isReact) {
// TODO: should be conditional on whether user wants the React wrappers
external.push('react', 'react-dom');
if (format === 'umd') {
// TODO: should be conditional on whether user wants the React wrappers
output.globals['react'] = 'React';
output.globals['react-dom'] = 'ReactDOM';
}
}
return {
input,
output,
plugins,
external,
// manualChunks(id) {
// if (id.includes('src/react/')) {
// return 'react';
// }
// },
};
}
module.exports = [
// amd
createBundle('amd', {
withStyles: false,
isMinified: false,
isReact: true,
}),
createBundle('amd', { withStyles: true, isMinified: false, isReact: true }),
createBundle('amd', { withStyles: false, isMinified: true, isReact: true }),
createBundle('amd', { withStyles: true, isMinified: true, isReact: true }),
createBundle('amd', { withStyles: false, isMinified: false }),
createBundle('amd', { withStyles: true, isMinified: false }),
createBundle('amd', { withStyles: false, isMinified: true }),
createBundle('amd', { withStyles: true, isMinified: true }),
// umd
createBundle('umd', {
withStyles: false,
isMinified: false,
isReact: true,
}),
createBundle('umd', { withStyles: true, isMinified: false, isReact: true }),
createBundle('umd', { withStyles: false, isMinified: true, isReact: true }),
createBundle('umd', { withStyles: true, isMinified: true, isReact: true }),
createBundle('umd', { withStyles: false, isMinified: false }),
createBundle('umd', { withStyles: true, isMinified: false }),
createBundle('umd', { withStyles: false, isMinified: true }),
createBundle('umd', { withStyles: true, isMinified: true }),
// cjs
createBundle('cjs', { withStyles: true, isMinified: false, isReact: true }),
createBundle('cjs', { withStyles: true, isMinified: false }),
// esm
createBundle('esm', { withStyles: true, isMinified: false, isReact: true }),
createBundle('esm', { withStyles: true, isMinified: true, isReact: true }),
// core bundles (no-react)
createBundle('umd', {
withStyles: true,
isMinified: false,
isReact: false,
}),
createBundle('esm', { withStyles: true, isMinified: false }),
createBundle('esm', { withStyles: true, isMinified: true }),
];

2
packages/dockview-core/scripts/rollupEntryTarget-core.ts
View File

@ -1,2 +0,0 @@
import '../dist/styles/dockview.css';
export * from '../src/core';

0
packages/dockview-core/scripts/rollupEntryTarget-react.ts → packages/dockview-core/scripts/rollupEntryTarget.ts
View File

28
packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
View File

@ -6,7 +6,6 @@ import {
} from '../../groupview/types';
import { PanelUpdateEvent } from '../../panel/types';
import { Orientation } from '../../splitview/core/splitview';
import { ReactPanelDeserialzier } from '../../react/deserializer';
import { GroupPanel } from '../../groupview/groupviewPanel';
import { CompositeDisposable } from '../../lifecycle';
import {
@ -22,6 +21,7 @@ import {
DockviewPanelApi,
DockviewPanelApiImpl,
} from '../../api/dockviewPanelApi';
import { DefaultDockviewDeserialzier } from '../../dockview/deserializer';
class PanelContentPartTest implements IContentRenderer {
element: HTMLElement = document.createElement('div');
@ -512,7 +512,7 @@ describe('dockviewComponent', () => {
test('serialization', () => {
dockview.layout(1000, 1000);
dockview.deserializer = new ReactPanelDeserialzier(dockview);
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
dockview.fromJSON({
activeGroup: 'group-1',
grid: {
@ -1038,7 +1038,7 @@ describe('dockviewComponent', () => {
fromJSON: (panelData: GroupviewPanelState): IDockviewPanel => {
return new TestGroupPanel(
panelData.id,
panelData.title,
panelData.title || '',
dockview
);
},
@ -1427,7 +1427,7 @@ describe('dockviewComponent', () => {
default: PanelContentPartTest,
},
});
dockview.deserializer = new ReactPanelDeserialzier(dockview);
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
dockview.layout(500, 1000);
@ -1552,7 +1552,7 @@ describe('dockviewComponent', () => {
})
);
dockview.deserializer = new ReactPanelDeserialzier(dockview);
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
dockview.fromJSON({
activeGroup: 'group-1',
grid: {
@ -1686,7 +1686,7 @@ describe('dockviewComponent', () => {
default: PanelContentPartTest,
},
});
dockview.deserializer = new ReactPanelDeserialzier(dockview);
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
dockview.fromJSON({
activeGroup: 'group-1',
grid: {
@ -1778,7 +1778,7 @@ describe('dockviewComponent', () => {
test_tab_id: PanelTabPartTest,
},
});
dockview.deserializer = new ReactPanelDeserialzier(dockview);
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
dockview.fromJSON({
activeGroup: 'group-1',
grid: {
@ -1890,7 +1890,7 @@ describe('dockviewComponent', () => {
test_tab_id: PanelTabPartTest,
},
});
dockview.deserializer = new ReactPanelDeserialzier(dockview);
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
dockview.fromJSON({
activeGroup: 'group-1',
grid: {
@ -1980,7 +1980,7 @@ describe('dockviewComponent', () => {
},
orientation: Orientation.HORIZONTAL,
});
dockview.deserializer = new ReactPanelDeserialzier(dockview);
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
@ -2086,7 +2086,7 @@ describe('dockviewComponent', () => {
},
orientation: Orientation.HORIZONTAL,
});
dockview.deserializer = new ReactPanelDeserialzier(dockview);
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
@ -2227,7 +2227,7 @@ describe('dockviewComponent', () => {
},
orientation: Orientation.HORIZONTAL,
});
dockview.deserializer = new ReactPanelDeserialzier(dockview);
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
@ -2355,7 +2355,7 @@ describe('dockviewComponent', () => {
},
orientation: Orientation.HORIZONTAL,
});
dockview.deserializer = new ReactPanelDeserialzier(dockview);
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
expect(dockview.groups.length).toBe(0);
});
@ -2372,7 +2372,7 @@ describe('dockviewComponent', () => {
},
orientation: Orientation.HORIZONTAL,
});
dockview.deserializer = new ReactPanelDeserialzier(dockview);
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
expect(dockview.groups.length).toBe(0);
@ -2412,7 +2412,7 @@ describe('dockviewComponent', () => {
},
orientation: Orientation.HORIZONTAL,
});
dockview.deserializer = new ReactPanelDeserialzier(dockview);
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({
grid: {

3
packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts
View File

@ -1,4 +1,3 @@
import { GridviewPanelApiImpl } from '../../api/gridviewPanelApi';
import { GridviewComponent } from '../../gridview/gridviewComponent';
import { GridviewPanel } from '../../gridview/gridviewPanel';
import { CompositeDisposable } from '../../lifecycle';
@ -7,7 +6,7 @@ import { Orientation } from '../../splitview/core/splitview';
class TestGridview extends GridviewPanel {
constructor(id: string, componentName: string) {
super(id, componentName, new GridviewPanelApiImpl(id));
super(id, componentName);
this.api.initialize(this);

78
packages/dockview-core/src/core.ts
View File

@ -1,78 +0,0 @@
export * from './hostedContainer';
export * from './dnd/dataTransfer';
export * from './math';
export * from './dom';
export * from './events';
export * from './lifecycle';
export * from './panel/types';
export * from './panel/componentFactory';
export * from './splitview/core/splitview';
export * from './splitview/core/options';
export * from './paneview/paneview';
export * from './gridview/gridview';
export * from './groupview/groupview';
export * from './gridview/baseComponentGridview';
export * from './paneview/draggablePaneviewPanel';
export * from './groupview/panel/content';
export * from './groupview/tab';
export * from './groupview/dnd';
export * from './groupview/types';
export * from './groupview/groupviewPanel';
export * from './dockview/options';
export * from './dockview/dockviewPanel';
export * from './dockview/components/tab/defaultTab';
export * from './dockview/deserializer';
export * from './dockview/defaultGroupPanelView';
export * from './dockview/dockviewComponent';
export * from './gridview/gridviewComponent';
export * from './splitview/splitviewComponent';
export * from './paneview/paneviewComponent';
export { PaneviewComponentOptions } from './paneview/options';
export * from './gridview/gridviewPanel';
export * from './splitview/splitviewPanel';
export * from './paneview/paneviewPanel';
export * from './groupview/types';
export { Event } from './events';
export { IDisposable } from './lifecycle';
export {
Position,
positionToDirection,
directionToPosition,
} from './dnd/droptarget';
export {
FocusEvent,
PanelDimensionChangeEvent,
VisibilityEvent,
ActiveEvent,
PanelApi,
} from './api/panelApi';
export {
SizeEvent,
GridviewPanelApi,
GridConstraintChangeEvent,
} from './api/gridviewPanelApi';
export { TitleEvent, DockviewPanelApi } from './api/dockviewPanelApi';
export {
PanelSizeEvent,
PanelConstraintChangeEvent,
SplitviewPanelApi,
} from './api/splitviewPanelApi';
export { ExpansionEvent, PaneviewPanelApi } from './api/paneviewPanelApi';
export {
CommonApi,
SplitviewApi,
PaneviewApi,
GridviewApi,
DockviewApi,
} from './api/component.api';

2
packages/dockview-core/src/dockview/defaultGroupPanelView.ts
View File

@ -3,10 +3,10 @@ import {
GroupPanelPartInitParameters,
IContentRenderer,
ITabRenderer,
GroupPanelUpdateEvent,
} from '../groupview/types';
import { GroupPanel } from '../groupview/groupviewPanel';
import { IDisposable } from '../lifecycle';
import { GroupPanelUpdateEvent } from '../groupview/types';
export interface IGroupPanelView extends IDisposable {
readonly content: IContentRenderer;

73
packages/dockview-core/src/dockview/deserializer.ts
View File

@ -1,7 +1,76 @@
import { GroupviewPanelState } from '../groupview/types';
import { GroupviewPanelState, ITabRenderer } from '../groupview/types';
import { GroupPanel } from '../groupview/groupviewPanel';
import { IDockviewPanel } from './dockviewPanel';
import { DockviewPanel, IDockviewPanel } from './dockviewPanel';
import { DockviewComponent } from './dockviewComponent';
import { createComponent } from '../panel/componentFactory';
import { DefaultTab } from './components/tab/defaultTab';
import { DefaultGroupPanelView } from './defaultGroupPanelView';
import { DockviewApi } from '../api/component.api';
export interface IPanelDeserializer {
fromJSON(panelData: GroupviewPanelState, group: GroupPanel): IDockviewPanel;
}
export class DefaultDockviewDeserialzier implements IPanelDeserializer {
constructor(private readonly layout: DockviewComponent) {}
public fromJSON(
panelData: GroupviewPanelState,
group: GroupPanel
): IDockviewPanel {
const panelId = panelData.id;
const params = panelData.params;
const title = panelData.title;
const viewData = panelData.view;
let tab: ITabRenderer;
if (viewData.tab?.id) {
tab = createComponent(
viewData.tab.id,
viewData.tab.id,
this.layout.options.tabComponents,
this.layout.options.frameworkTabComponents,
this.layout.options.frameworkComponentFactory?.tab,
() => new DefaultTab()
);
} else if (this.layout.options.defaultTabComponent) {
tab = createComponent(
this.layout.options.defaultTabComponent,
this.layout.options.defaultTabComponent,
this.layout.options.tabComponents,
this.layout.options.frameworkTabComponents,
this.layout.options.frameworkComponentFactory?.tab,
() => new DefaultTab()
);
} else {
tab = new DefaultTab();
}
const view = new DefaultGroupPanelView({
content: createComponent(
viewData.content.id,
viewData.content.id,
this.layout.options.components,
this.layout.options.frameworkComponents,
this.layout.options.frameworkComponentFactory?.content
),
tab,
});
const panel = new DockviewPanel(
panelId,
this.layout,
new DockviewApi(this.layout),
group
);
panel.init({
view,
title,
params: params || {},
});
return panel;
}
}

2
packages/dockview-core/src/dockview/dockviewComponent.ts
View File

@ -6,7 +6,6 @@ import {
} from '../gridview/gridview';
import { directionToPosition, Droptarget, Position } from '../dnd/droptarget';
import { tail, sequenceEquals } from '../array';
import { GroupviewPanelState } from '../groupview/types';
import { DockviewPanel, IDockviewPanel } from './dockviewPanel';
import { CompositeDisposable } from '../lifecycle';
import { Event, Emitter } from '../events';
@ -15,6 +14,7 @@ import {
IContentRenderer,
ITabRenderer,
IWatermarkRenderer,
GroupviewPanelState,
} from '../groupview/types';
import { sequentialNumberGenerator } from '../math';
import { IPanelDeserializer } from './deserializer';

117
packages/dockview-core/src/dockview/validation.ts
View File

@ -1,117 +0,0 @@
import { SerializedGridObject } from '../gridview/gridview';
import { GroupPanelViewState } from '../groupview/groupview';
import { GroupviewPanelState } from '../groupview/types';
import { Orientation } from '../splitview/core/splitview';
import { SerializedDockview } from './dockviewComponent';
function validateGroupViewPanelState(value: GroupviewPanelState): void {
if (typeof value.id !== 'string') {
throw new Error('invalid layout');
}
if (typeof value.title !== 'string') {
throw new Error('invalid layout');
}
if (value.params !== undefined && typeof value.params !== 'object') {
throw new Error('invalid layout');
}
}
function validateGroupPanelViewState(value: GroupPanelViewState): void {
if (typeof value.id !== 'string') {
throw new Error('invalid layout');
}
if (value.locked !== undefined && typeof value.locked !== 'boolean') {
throw new Error('invalid layout');
}
if (value.hideHeader !== undefined && typeof value.locked !== 'boolean') {
throw new Error('invalid layout');
}
if (
value.activeView !== undefined &&
typeof value.activeView !== 'string'
) {
throw new Error('invalid layout');
}
if (!Array.isArray(value.views)) {
throw new Error('invalid layout');
}
for (const child of value.views) {
if (typeof child !== 'string') {
if (!Array.isArray(value.views)) {
throw new Error('invalid layout');
}
}
}
}
function validateSerializedGridObject(
value: SerializedGridObject<GroupPanelViewState>
): void {
if (value.size !== undefined && typeof value.size !== 'number') {
throw new Error('invalid layout');
}
if (value.visible !== undefined && typeof value.size !== 'boolean') {
throw new Error('invalid layout');
}
if (value.type !== 'branch' && value.type !== 'leaf') {
throw new Error('invalid layout');
}
if (Array.isArray(value.data)) {
for (const child of value.data) {
validateSerializedGridObject(child);
}
} else {
validateGroupPanelViewState(value.data);
}
}
export function validateSerializedDockview(data: SerializedDockview): void {
if (typeof data !== 'object') {
throw new Error('invalid layout');
}
const { grid, panels, options, activeGroup } = data;
if (typeof grid !== 'object') {
throw new Error('invalid layout');
}
if (typeof grid.height !== 'number') {
throw new Error('invalid layout');
}
if (typeof grid.width !== 'number') {
throw new Error('invalid layout');
}
if (
grid.orientation !== Orientation.HORIZONTAL &&
grid.orientation !== Orientation.VERTICAL
) {
throw new Error('invalid layout');
}
validateSerializedGridObject(grid.root);
if (
data.activeGroup !== undefined &&
typeof data.activeGroup !== 'string'
) {
throw new Error('invalid layout');
}
if (typeof data.panels !== 'object') {
throw new Error('invalid layout');
}
for (const value of Object.values(data.panels)) {
validateGroupViewPanelState(value);
}
}

2
packages/dockview-core/src/groupview/groupview.ts
View File

@ -14,7 +14,7 @@ import { IWatermarkRenderer } from './types';
import { GroupPanel } from './groupviewPanel';
import { DockviewDropTargets } from './dnd';
import { IDockviewPanel } from '../dockview/dockviewPanel';
import { IGroupControlRenderer } from '../core';
import { IGroupControlRenderer } from '../dockview/options';
export interface DndService {
canDisplayOverlay(

87
packages/dockview-core/src/index.ts
View File

@ -1,2 +1,85 @@
export * from './core';
// export * from './react'; // TODO: should be conditional on whether user wants the React wrappers
export * from './hostedContainer';
export * from './dnd/dataTransfer';
export { watchElementResize } from './dom';
/**
* Events, Emitters and Disposables are very common concepts that most codebases will contain.
* We export them with a 'Dockview' prefix here to prevent accidental use by others.
*/
export { Emitter as DockviewEmitter, Event as DockviewEvent } from './events';
export {
IDisposable as IDockviewDisposable,
MutableDisposable as DockviewMutableDisposable,
CompositeDisposable as DockviewCompositeDisposable,
} from './lifecycle';
export * from './panel/types';
export * from './panel/componentFactory';
export * from './splitview/core/splitview';
export * from './splitview/core/options';
export * from './paneview/paneview';
export * from './gridview/gridview';
export * from './groupview/groupview';
export * from './gridview/baseComponentGridview';
export * from './paneview/draggablePaneviewPanel';
export * from './groupview/panel/content';
export * from './groupview/tab';
export * from './groupview/dnd';
export * from './groupview/types';
export * from './groupview/groupviewPanel';
export * from './dockview/options';
export * from './dockview/dockviewPanel';
export * from './dockview/components/tab/defaultTab';
export * from './dockview/deserializer';
export * from './dockview/defaultGroupPanelView';
export * from './dockview/dockviewComponent';
export * from './gridview/gridviewComponent';
export * from './splitview/splitviewComponent';
export * from './paneview/paneviewComponent';
export { PaneviewComponentOptions } from './paneview/options';
export * from './gridview/gridviewPanel';
export * from './splitview/splitviewPanel';
export * from './paneview/paneviewPanel';
export * from './groupview/types';
export { Event } from './events';
export {
Position,
positionToDirection,
directionToPosition,
} from './dnd/droptarget';
export {
FocusEvent,
PanelDimensionChangeEvent,
VisibilityEvent,
ActiveEvent,
PanelApi,
} from './api/panelApi';
export {
SizeEvent,
GridviewPanelApi,
GridConstraintChangeEvent,
} from './api/gridviewPanelApi';
export { TitleEvent, DockviewPanelApi } from './api/dockviewPanelApi';
export {
PanelSizeEvent,
PanelConstraintChangeEvent,
SplitviewPanelApi,
} from './api/splitviewPanelApi';
export { ExpansionEvent, PaneviewPanelApi } from './api/paneviewPanelApi';
export {
CommonApi,
SplitviewApi,
PaneviewApi,
GridviewApi,
DockviewApi,
} from './api/component.api';

2
packages/dockview-core/src/paneview/draggablePaneviewPanel.ts
View File

@ -1,4 +1,4 @@
import { Paneview, PaneviewApi } from '../core';
import { PaneviewApi } from '../api/component.api';
import { DragHandler } from '../dnd/abstractDragHandler';
import {
getPaneData,

87
packages/dockview-core/test.html
View File

@ -1,87 +0,0 @@
<!-- <!DOCTYPE html> -->
<html>
<head>
<script src="https://unpkg.com/dockview@0.0.0-experimental-ff3f0b23-20230207/dist/dockview.js"></script>
<style>
body {
margin: 0;
}
#root {
height: 100vh;
width: 100vw;
background-color: grey;
}
#app {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="root">
<div class="dockview-theme-dark" id="app">
</div>
</div>
<script>
class CustomPanel {
element = document.createElement('div');
constructor(id, component) {
this.id = id;
this.component = component
}
updateParentGroup(group, isPanelVisible) {
//
}
init(parameters) {
//
}
layout(width, height) {
//
}
update(event) {
//
}
toJSON() {
return {}
}
focus() {
//
}
dispose() {
//
}
}
const root = document.getElementById("root");
const app = document.getElementById("app");
const dockviewComponent = new dockview.DockviewComponent(app, {
components: {
myCustomPanel: CustomPanel
}
});
const observer = new ResizeObserver((entires) => {
const firstEntry = entires[0];
const { width, height } = firstEntry.contentRect;
dockviewComponent.layout(width, height);
});
observer.observe(root);
dockviewComponent.addPanel({component: 'myCustomPanel', id:'1', title: 'Panel 1'});
dockviewComponent.addPanel({component: 'myCustomPanel', id:'2', title: 'Panel 2'});
</script>
</body>
</html>

1
packages/dockview/package.json
View File

@ -59,6 +59,7 @@
"dockview-core": "^1.6.0"
},
"devDependencies": {
"@rollup/plugin-node-resolve": "^15.0.1",
"@rollup/plugin-typescript": "^11.0.0",
"@testing-library/react": "^13.4.0",
"@types/react": "^18.0.28",

71
packages/dockview/rollup.config.js
View File

@ -4,21 +4,16 @@ const { join } = require('path');
const typescript = require('@rollup/plugin-typescript');
const { terser } = require('rollup-plugin-terser');
const postcss = require('rollup-plugin-postcss');
const nodeResolve = require('@rollup/plugin-node-resolve');
const { name, version, homepage, license } = require('./package.json');
const reactMain = join(__dirname, './scripts/rollupEntryTarget-react.ts');
const reactMainNoStyles = join(__dirname, './src/index.ts');
const main = join(__dirname, './scripts/rollupEntryTarget-core.ts');
const mainNoStyles = join(__dirname, './src/core.ts');
const main = join(__dirname, './scripts/rollupEntryTarget.ts');
const mainNoStyles = join(__dirname, './src/index.ts');
const outputDir = join(__dirname, 'dist');
function outputFile(format, isMinified, withStyles, isReact) {
function outputFile(format, isMinified, withStyles) {
let filename = join(outputDir, name);
if (isReact) {
filename += '.react';
}
if (format !== 'umd') {
filename += `.${format}`;
}
@ -33,19 +28,19 @@ function outputFile(format, isMinified, withStyles, isReact) {
}
function getInput(options) {
const { withStyles, isReact } = options;
const { withStyles } = options;
if (withStyles) {
return isReact ? reactMain : main;
return main;
}
return isReact ? reactMainNoStyles : mainNoStyles;
return mainNoStyles;
}
function createBundle(format, options) {
const { withStyles, isMinified, isReact } = options;
const { withStyles, isMinified } = options;
const input = getInput(options);
const file = outputFile(format, isMinified, withStyles, isReact);
const file = outputFile(format, isMinified, withStyles);
const external = [];
@ -64,6 +59,9 @@ function createBundle(format, options) {
};
const plugins = [
nodeResolve({
include: ['node_modules/dockview-core/**'],
}),
typescript({
tsconfig: 'tsconfig.esm.json',
incremental: false,
@ -84,58 +82,35 @@ function createBundle(format, options) {
output['name'] = name;
}
if (isReact) {
// TODO: should be conditional on whether user wants the React wrappers
external.push('react', 'react-dom');
if (format === 'umd') {
// TODO: should be conditional on whether user wants the React wrappers
output.globals['react'] = 'React';
output.globals['react-dom'] = 'ReactDOM';
}
}
return {
input,
output,
plugins,
external,
// manualChunks(id) {
// if (id.includes('src/react/')) {
// return 'react';
// }
// },
};
}
module.exports = [
// amd
createBundle('amd', {
withStyles: false,
isMinified: false,
isReact: true,
}),
createBundle('amd', { withStyles: true, isMinified: false, isReact: true }),
createBundle('amd', { withStyles: false, isMinified: true, isReact: true }),
createBundle('amd', { withStyles: true, isMinified: true, isReact: true }),
createBundle('amd', { withStyles: false, isMinified: false }),
createBundle('amd', { withStyles: true, isMinified: false }),
createBundle('amd', { withStyles: false, isMinified: true }),
createBundle('amd', { withStyles: true, isMinified: true }),
// umd
createBundle('umd', {
withStyles: false,
isMinified: false,
isReact: true,
}),
createBundle('umd', { withStyles: true, isMinified: false, isReact: true }),
createBundle('umd', { withStyles: false, isMinified: true, isReact: true }),
createBundle('umd', { withStyles: true, isMinified: true, isReact: true }),
createBundle('umd', { withStyles: false, isMinified: false }),
createBundle('umd', { withStyles: true, isMinified: false }),
createBundle('umd', { withStyles: false, isMinified: true }),
createBundle('umd', { withStyles: true, isMinified: true }),
// cjs
createBundle('cjs', { withStyles: true, isMinified: false, isReact: true }),
createBundle('cjs', { withStyles: true, isMinified: false }),
// esm
createBundle('esm', { withStyles: true, isMinified: false, isReact: true }),
createBundle('esm', { withStyles: true, isMinified: true, isReact: true }),
// core bundles (no-react)
createBundle('umd', {
withStyles: true,
isMinified: false,
isReact: false,
}),
createBundle('esm', { withStyles: true, isMinified: false }),
createBundle('esm', { withStyles: true, isMinified: true }),
];

1
packages/dockview/scripts/publishExperimental.js
View File

@ -49,6 +49,7 @@ function formatDate() {
}
package.version = `0.0.0-experimental-${result}-${formatDate()}`;
package.dependencies['dockview-core'] = package.version;
package.scripts = {};
fs.writeFileSync(

2
packages/dockview/scripts/rollupEntryTarget-core.ts
View File

@ -1,2 +0,0 @@
import '../dist/styles/dockview.css';
export * from '../src/core';

0
packages/dockview/scripts/rollupEntryTarget-react.ts → packages/dockview/scripts/rollupEntryTarget.ts
View File

6
packages/dockview/src/__tests__/react/dockview/dockview.spec.tsx
View File

@ -1,12 +1,12 @@
import * as React from 'react';
import { render } from '@testing-library/react';
import { DockviewApi } from '../../../api/component.api';
import { DockviewApi } from 'dockview-core';
import {
IDockviewPanelProps,
DockviewReact,
DockviewReadyEvent,
} from '../../../react/dockview/dockview';
import { PanelCollection } from '../../../react/types';
} from '../../../dockview/dockview';
import { PanelCollection } from '../../../types';
import { setMockRefElement } from '../../__test_utils__/utils';
describe('gridview react', () => {

8
packages/dockview/src/__tests__/react/dockview/groupControlsRenderer.spec.ts
View File

@ -1,9 +1,5 @@
import { Groupview } from '../../../groupview/groupview';
import {
GroupPanel,
GroupviewPanelApi,
} from '../../../groupview/groupviewPanel';
import { ReactGroupControlsRendererPart } from '../../../react/dockview/groupControlsRenderer';
import { GroupPanel, GroupviewPanelApi, Groupview } from 'dockview-core';
import { ReactGroupControlsRendererPart } from '../../../dockview/groupControlsRenderer';
describe('groupControlsRenderer', () => {
test('#1', () => {

4
packages/dockview/src/__tests__/react/dockview/reactHeaderPart.spec.ts
View File

@ -1,5 +1,5 @@
import { DEFAULT_TAB_IDENTIFIER } from '../../../dockview/components/tab/defaultTab';
import { ReactPanelHeaderPart } from '../../../react/dockview/reactHeaderPart';
import { DEFAULT_TAB_IDENTIFIER } from 'dockview-core';
import { ReactPanelHeaderPart } from '../../../dockview/reactHeaderPart';
describe('reactHeaderPart', () => {
test('that tab id is present in toJSON when not the default tab', () => {

7
packages/dockview/src/__tests__/react/gridview/gridview.spec.tsx
View File

@ -1,13 +1,12 @@
import * as React from 'react';
import { render } from '@testing-library/react';
import { GridviewApi } from '../../../api/component.api';
import { GridviewApi, Orientation } from 'dockview-core';
import {
IGridviewPanelProps,
GridviewReact,
GridviewReadyEvent,
} from '../../../react/gridview/gridview';
import { PanelCollection } from '../../../react/types';
import { Orientation } from '../../../splitview/core/splitview';
} from '../../../gridview/gridview';
import { PanelCollection } from '../../../types';
import { setMockRefElement } from '../../__test_utils__/utils';
describe('gridview react', () => {

6
packages/dockview/src/__tests__/react/paneview/paneview.spec.tsx
View File

@ -1,12 +1,12 @@
import * as React from 'react';
import { render } from '@testing-library/react';
import { PaneviewApi } from '../../../api/component.api';
import { PaneviewApi } from 'dockview-core';
import {
IPaneviewPanelProps,
PaneviewReact,
PaneviewReadyEvent,
} from '../../../react/paneview/paneview';
import { PanelCollection } from '../../../react/types';
} from '../../../paneview/paneview';
import { PanelCollection } from '../../../types';
import { setMockRefElement } from '../../__test_utils__/utils';
describe('gridview react', () => {

2
packages/dockview/src/__tests__/react/react.spec.tsx
View File

@ -1,4 +1,4 @@
import { ReactPart } from '../../react/react';
import { ReactPart } from '../../react';
import * as React from 'react';
import { render, screen, act } from '@testing-library/react';

7
packages/dockview/src/__tests__/react/splitview/splitview.spec.tsx
View File

@ -1,13 +1,12 @@
import * as React from 'react';
import { render } from '@testing-library/react';
import { SplitviewApi } from '../../../api/component.api';
import { SplitviewApi, Orientation } from 'dockview-core';
import {
ISplitviewPanelProps,
SplitviewReact,
SplitviewReadyEvent,
} from '../../../react/splitview/splitview';
import { PanelCollection } from '../../../react/types';
import { Orientation } from '../../../splitview/core/splitview';
} from '../../../splitview/splitview';
import { PanelCollection } from '../../../types';
import { setMockRefElement } from '../../__test_utils__/utils';
describe('splitview react', () => {

77
packages/dockview/src/deserializer.ts
View File

@ -1,77 +0,0 @@
import {
ITabRenderer,
GroupPanel,
DefaultGroupPanelView,
DefaultTab,
DockviewApi,
createComponent,
IPanelDeserializer,
DockviewPanel,
IDockviewPanel,
GroupviewPanelState,
DockviewComponent,
} from 'dockview-core';
export class ReactPanelDeserialzier implements IPanelDeserializer {
constructor(private readonly layout: DockviewComponent) {}
public fromJSON(
panelData: GroupviewPanelState,
group: GroupPanel
): IDockviewPanel {
const panelId = panelData.id;
const params = panelData.params;
const title = panelData.title;
const viewData = panelData.view;
let tab: ITabRenderer;
if (viewData.tab?.id) {
tab = createComponent(
viewData.tab.id,
viewData.tab.id,
this.layout.options.tabComponents,
this.layout.options.frameworkTabComponents,
this.layout.options.frameworkComponentFactory?.tab,
() => new DefaultTab()
);
} else if (this.layout.options.defaultTabComponent) {
tab = createComponent(
this.layout.options.defaultTabComponent,
this.layout.options.defaultTabComponent,
this.layout.options.tabComponents,
this.layout.options.frameworkTabComponents,
this.layout.options.frameworkComponentFactory?.tab,
() => new DefaultTab()
);
} else {
tab = new DefaultTab();
}
const view = new DefaultGroupPanelView({
content: createComponent(
viewData.content.id,
viewData.content.id,
this.layout.options.components,
this.layout.options.frameworkComponents,
this.layout.options.frameworkComponentFactory?.content
),
tab,
});
const panel = new DockviewPanel(
panelId,
this.layout,
new DockviewApi(this.layout),
group
);
panel.init({
view,
title,
params: params || {},
});
return panel;
}
}

4
packages/dockview/src/dockview/dockview.tsx
View File

@ -12,10 +12,10 @@ import {
watchElementResize,
GroupPanel,
DEFAULT_TAB_IDENTIFIER,
DefaultDockviewDeserialzier,
} from 'dockview-core';
import { ReactPanelContentPart } from './reactContentPart';
import { ReactPanelHeaderPart } from './reactHeaderPart';
import { ReactPanelDeserialzier } from '../deserializer';
import { ReactPortalStore, usePortalsLifecycle } from '../react';
import { IWatermarkPanelProps, ReactWatermarkPart } from './reactWatermarkPart';
@ -166,7 +166,7 @@ export const DockviewReact = React.forwardRef(
});
domRef.current?.appendChild(dockview.element);
dockview.deserializer = new ReactPanelDeserialzier(dockview);
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
const { clientWidth, clientHeight } = domRef.current!;
dockview.layout(clientWidth, clientHeight);

8
packages/dockview/src/dockview/groupControlsRenderer.ts
View File

@ -2,8 +2,8 @@ import * as React from 'react';
import { ReactPart, ReactPortalStore } from '../react';
import {
IDockviewPanel,
CompositeDisposable,
MutableDisposable,
DockviewCompositeDisposable,
DockviewMutableDisposable,
DockviewApi,
GroupPanel,
GroupviewPanelApi,
@ -19,7 +19,7 @@ export interface IDockviewGroupControlProps {
}
export class ReactGroupControlsRendererPart {
private mutableDisposable = new MutableDisposable();
private mutableDisposable = new DockviewMutableDisposable();
private _element: HTMLElement;
private _part?: ReactPart<IDockviewGroupControlProps>;
@ -52,7 +52,7 @@ export class ReactGroupControlsRendererPart {
containerApi: DockviewApi;
api: GroupviewPanelApi;
}): void {
this.mutableDisposable.value = new CompositeDisposable(
this.mutableDisposable.value = new DockviewCompositeDisposable(
this._group.model.onDidAddPanel(() => {
this.updatePanels();
}),

6
packages/dockview/src/dockview/reactContentPart.ts
View File

@ -2,7 +2,7 @@ import * as React from 'react';
import { ReactPart, ReactPortalStore } from '../react';
import { IDockviewPanelProps } from '../dockview/dockview';
import {
Emitter,
DockviewEmitter,
Event,
GroupPanel,
PanelUpdateEvent,
@ -16,10 +16,10 @@ export class ReactPanelContentPart implements IContentRenderer {
//
private _group: GroupPanel | undefined;
private readonly _onDidFocus = new Emitter<void>();
private readonly _onDidFocus = new DockviewEmitter<void>();
readonly onDidFocus: Event<void> = this._onDidFocus.event;
private readonly _onDidBlur = new Emitter<void>();
private readonly _onDidBlur = new DockviewEmitter<void>();
readonly onDidBlur: Event<void> = this._onDidBlur.event;
get element(): HTMLElement {

1
packages/dockview/src/dockview/reactHeaderPart.ts
View File

@ -1,5 +1,4 @@
import * as React from 'react';
import { ReactPart, ReactPortalStore } from '../react';
import { IGroupPanelBaseProps } from './dockview';
import {

20
packages/dockview/src/react.ts
View File

@ -1,13 +1,9 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
IFrameworkPart,
sequentialNumberGenerator,
IDisposable,
} from 'dockview-core';
import { IFrameworkPart, IDockviewDisposable } from 'dockview-core';
export interface ReactPortalStore {
addPortal: (portal: React.ReactPortal) => IDisposable;
addPortal: (portal: React.ReactPortal) => IDockviewDisposable;
}
interface IPanelWrapperProps {
@ -60,7 +56,10 @@ ReactComponentBridge.displayName = 'DockviewReactJsBridge';
* require a key property like any other React element rendered in an array
* to prevent excessive re-rendering
*/
const uniquePortalKeyGenerator = sequentialNumberGenerator();
const uniquePortalKeyGenerator = (() => {
let value = 1;
return { next: () => `dockview_react_portal_key_${(value++).toString()}` };
})();
export const ReactPartContext = React.createContext<{}>({});
@ -69,7 +68,10 @@ export class ReactPart<P extends object, C extends object = {}>
{
private _initialProps: Record<string, any> = {};
private componentInstance?: IPanelWrapperRef;
private ref?: { portal: React.ReactPortal; disposable: IDisposable };
private ref?: {
portal: React.ReactPortal;
disposable: IDockviewDisposable;
};
private disposed = false;
constructor(
@ -156,7 +158,7 @@ export class ReactPart<P extends object, C extends object = {}>
type PortalLifecycleHook = () => [
React.ReactPortal[],
(portal: React.ReactPortal) => IDisposable
(portal: React.ReactPortal) => IDockviewDisposable
];
/**

3
packages/dockview/tsconfig.json
View File

@ -6,6 +6,9 @@
"jsx": "react",
"rootDir": "src"
},
"references": [
{ "dockview-core": "../dockview-core" }
],
"include": ["src"],
"exclude": ["**/node_modules", "src/__tests__"]
}

34
yarn.lock
View File

@ -2409,6 +2409,18 @@
resolved "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz"
integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
"@rollup/plugin-node-resolve@^15.0.1":
version "15.0.1"
resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.0.1.tgz#72be449b8e06f6367168d5b3cd5e2802e0248971"
integrity sha512-ReY88T7JhJjeRVbfCyNj+NXAG3IIsVMsX9b5/9jC98dRP8/yxlZdz7mHZbHk5zHr24wZZICS5AcXsFZAXYUQEg==
dependencies:
"@rollup/pluginutils" "^5.0.1"
"@types/resolve" "1.20.2"
deepmerge "^4.2.2"
is-builtin-module "^3.2.0"
is-module "^1.0.0"
resolve "^1.22.1"
"@rollup/plugin-typescript@^11.0.0":
version "11.0.0"
resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-11.0.0.tgz#f136272d1df5209daca0cb6f171c574b1d505545"
@ -2926,6 +2938,11 @@
"@types/scheduler" "*"
csstype "^3.0.2"
"@types/resolve@1.20.2":
version "1.20.2"
resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.2.tgz#97d26e00cd4a0423b4af620abecf3e6f442b7975"
integrity sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==
"@types/retry@0.12.0":
version "0.12.0"
resolved "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz"
@ -4114,6 +4131,11 @@ buffer@^5.5.0:
base64-js "^1.3.1"
ieee754 "^1.1.13"
builtin-modules@^3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==
builtins@^1.0.3:
version "1.0.3"
resolved "https://registry.npmjs.org/builtins/-/builtins-1.0.3.tgz"
@ -7717,6 +7739,13 @@ is-buffer@^2.0.0:
resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz"
integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
is-builtin-module@^3.2.0:
version "3.2.1"
resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-3.2.1.tgz#f03271717d8654cfcaf07ab0463faa3571581169"
integrity sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==
dependencies:
builtin-modules "^3.3.0"
is-ci@2.0.0, is-ci@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@ -7844,6 +7873,11 @@ is-lambda@^1.0.1:
resolved "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz"
integrity sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==
is-module@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
integrity sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==
is-negated-glob@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/is-negated-glob/-/is-negated-glob-1.0.0.tgz"