diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 75ff529cc..c4f24a2c0 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -25,7 +25,7 @@ jobs: - run: yarn - run: npm run build - - run: npm run pack + - run: npm run build:bundle - run: npm run test:cov - name: SonarCloud Scan uses: sonarsource/sonarqube-scan-action@v5 diff --git a/CLAUDE.md b/CLAUDE.md index b05c5845b..d16b58ec2 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -9,93 +9,108 @@ Dockview is a zero-dependency layout manager supporting tabs, groups, grids and ## Development Commands ### Build -- `npm run build` - Build core packages (dockview-core, dockview, dockview-vue, dockview-react) -- `npm run clean` - Clean all packages + +- `npm run build` - Build core packages (dockview-core, dockview, dockview-vue, dockview-react) +- `npm run clean` - Clean all packages ### Testing -- `npm test` - Run Jest tests across all packages -- `npm run test:cov` - Run tests with coverage reporting + +- `npm test` - Run Jest tests across all packages +- `npm run test:cov` - Run tests with coverage reporting ### Linting -- `npm run lint` - Run ESLint on TypeScript/JavaScript source files across packages -- `npm run lint:fix` - Run ESLint with automatic fixing of fixable issues + +- `npm run lint` - Run ESLint on TypeScript/JavaScript source files across packages +- `npm run lint:fix` - Run ESLint with automatic fixing of fixable issues ### Documentation -- `npm run docs` - Generate documentation using custom script + +- `npm run docs` - Generate documentation using custom script ### Package Management -- `npm run version` - Version packages using Lerna -- `npm run package` - Package build artifacts -- `npm run package-docs` - Package documentation + +- `npm run version` - Version packages using Lerna +- `npm run build:bundle` - Package build artifacts +- `npm run generate-docs` - Package documentation ## Architecture ### Monorepo Structure -- **packages/dockview-core** - Core layout engine (TypeScript, framework-agnostic) -- **packages/dockview** - React bindings and components -- **packages/dockview-vue** - Vue bindings and components -- **packages/dockview-angular** - Angular bindings and components -- **packages/dockview-react** - Additional React utilities -- **packages/docs** - Documentation website (Docusaurus) + +- **packages/dockview-core** - Core layout engine (TypeScript, framework-agnostic) +- **packages/dockview** - React bindings and components +- **packages/dockview-vue** - Vue bindings and components +- **packages/dockview-angular** - Angular bindings and components +- **packages/dockview-react** - Additional React utilities +- **packages/docs** - Documentation website (Docusaurus) ### Key Components #### Core Architecture (dockview-core) -- **DockviewComponent** - Main container managing panels and groups -- **DockviewGroupPanel** - Container for related panels with tabs -- **DockviewPanel** - Individual content panels -- **Gridview/Splitview/Paneview** - Different layout strategies -- **API Layer** - Programmatic interfaces for each component type + +- **DockviewComponent** - Main container managing panels and groups +- **DockviewGroupPanel** - Container for related panels with tabs +- **DockviewPanel** - Individual content panels +- **Gridview/Splitview/Paneview** - Different layout strategies +- **API Layer** - Programmatic interfaces for each component type #### Framework Integration -- Framework-specific packages provide thin wrappers around core components -- React package uses HOCs and hooks for component lifecycle management -- Vue package provides Vue 3 composition API integration -- All frameworks share the same core serialization/deserialization logic + +- Framework-specific packages provide thin wrappers around core components +- React package uses HOCs and hooks for component lifecycle management +- Vue package provides Vue 3 composition API integration +- All frameworks share the same core serialization/deserialization logic #### Key Features -- Drag and drop with customizable drop zones -- Floating groups and popout windows -- Serialization/deserialization for state persistence -- Theming system with CSS custom properties -- Comprehensive API for programmatic control + +- Drag and drop with customizable drop zones +- Floating groups and popout windows +- Serialization/deserialization for state persistence +- Theming system with CSS custom properties +- Comprehensive API for programmatic control ### Testing Strategy -- Jest with ts-jest preset for TypeScript support -- Testing Library for React component testing -- Coverage reporting with SonarCloud integration -- Each package has its own jest.config.ts extending root configuration + +- Jest with ts-jest preset for TypeScript support +- Testing Library for React component testing +- Coverage reporting with SonarCloud integration +- Each package has its own jest.config.ts extending root configuration ### Build System -- Lerna for monorepo management -- Rollup for package bundling -- TypeScript for type checking and compilation -- Gulp for additional build tasks (SCSS processing) + +- Lerna for monorepo management +- Rollup for package bundling +- TypeScript for type checking and compilation +- Gulp for additional build tasks (SCSS processing) ### Code Quality -- ESLint configuration extends recommended TypeScript rules -- Linting targets source files in packages/*/src/** (excludes tests, docs, node_modules) -- Configuration centralized in .eslintrc.js with ignore patterns -- Current rules focus on TypeScript best practices while allowing some flexibility -- Most linting issues require manual fixes (type specifications, unused variables, null assertions) + +- ESLint configuration extends recommended TypeScript rules +- Linting targets source files in packages/\*/src/\*\* (excludes tests, docs, node_modules) +- Configuration centralized in .eslintrc.js with ignore patterns +- Current rules focus on TypeScript best practices while allowing some flexibility +- Most linting issues require manual fixes (type specifications, unused variables, null assertions) ## Development Notes ### Working with Packages -- Use Lerna commands for cross-package operations -- Each package can be built independently -- Core package must be built before framework packages -- Use workspaces for dependency management + +- Use Lerna commands for cross-package operations +- Each package can be built independently +- Core package must be built before framework packages +- Use workspaces for dependency management ### Adding New Features -- Start with core package implementation -- Add corresponding API methods in api/ directory -- Create framework-specific wrappers as needed -- Update TypeDoc documentation -- Add tests in __tests__ directories -- Run `npm run lint` to check code quality before committing + +- Start with core package implementation +- Add corresponding API methods in api/ directory +- Create framework-specific wrappers as needed +- Update TypeDoc documentation +- Add tests in **tests** directories +- Run `npm run lint` to check code quality before committing ### State Management -- Components use internal state with event-driven updates -- Serialization provides snapshot-based state persistence -- APIs provide reactive interfaces with event subscriptions + +- Components use internal state with event-driven updates +- Serialization provides snapshot-based state persistence +- APIs provide reactive interfaces with event subscriptions diff --git a/package.json b/package.json index b07e4fa96..8d713a096 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ ], "scripts": { "build": "lerna run build --scope '{dockview-core,dockview,dockview-vue,dockview-react}'", - "pack": "lerna run pack --scope '{dockview-core,dockview,dockview-vue,dockview-react}'", + "build:bundle": "lerna run build:bundle --scope '{dockview-core,dockview,dockview-vue,dockview-react}'", "clean": "lerna run clean", "docs": "node scripts/docs.mjs", "lint": "eslint 'packages/*/src/**/*.{ts,tsx,js,jsx}'", diff --git a/packages/dockview-angular/package.json b/packages/dockview-angular/package.json index 5eef76ac7..fd873c482 100644 --- a/packages/dockview-angular/package.json +++ b/packages/dockview-angular/package.json @@ -41,13 +41,13 @@ "README.md" ], "scripts": { - "prepare": "rollup -c", + "build:bundle": "rollup -c", "build:cjs": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.json --verbose --extendedDiagnostics", "build:css": "gulp sass", "build:esm": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.esm.json --verbose --extendedDiagnostics", "build": "npm run build:cjs && npm run build:esm && npm run build:css", "clean": "rimraf dist/ .build/ .rollup.cache/", - "prepublishOnly": "npm run rebuild && npm run test", + "prepublishOnly": "npm run rebuild && npm run build:bundle && 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" diff --git a/packages/dockview-core/package.json b/packages/dockview-core/package.json index eef2e3da8..b28a4e2b7 100644 --- a/packages/dockview-core/package.json +++ b/packages/dockview-core/package.json @@ -41,13 +41,13 @@ "README.md" ], "scripts": { - "prepare": "rollup -c", + "build:bundle": "rollup -c", "build:cjs": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.json --verbose --extendedDiagnostics", "build:css": "gulp sass", "build:esm": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.esm.json --verbose --extendedDiagnostics", "build": "npm run build:cjs && npm run build:esm && npm run build:css", "clean": "rimraf dist/ .build/ .rollup.cache/", - "prepublishOnly": "npm run rebuild && npm run test", + "prepublishOnly": "npm run rebuild && npm run build:bundle && npm run test", "rebuild": "npm run clean && npm run build", "test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-core", "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-core --coverage" diff --git a/packages/dockview-react/package.json b/packages/dockview-react/package.json index 470708d56..4c7b9a41c 100644 --- a/packages/dockview-react/package.json +++ b/packages/dockview-react/package.json @@ -41,13 +41,13 @@ "README.md" ], "scripts": { - "prepare": "rollup -c", + "build:bundle": "rollup -c", "build:cjs": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.json --verbose --extendedDiagnostics", "build:css": "node scripts/copy-css.js", "build:esm": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.esm.json --verbose --extendedDiagnostics", "build": "npm run build:cjs && npm run build:esm && npm run build:css", "clean": "rimraf dist/ .build/ .rollup.cache/", - "prepublishOnly": "npm run rebuild && npm run test", + "prepublishOnly": "npm run rebuild && npm run build:bundle && npm run test", "rebuild": "npm run clean && npm run build", "test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-react", "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-react --coverage" diff --git a/packages/dockview-vue/package.json b/packages/dockview-vue/package.json index 6ba83f567..821c45408 100644 --- a/packages/dockview-vue/package.json +++ b/packages/dockview-vue/package.json @@ -46,7 +46,7 @@ "build:css": "node scripts/copy-css.js", "build": "npm run build:js && npm run build:types && npm run build:css", "clean": "rimraf dist/ .build/ .rollup.cache/", - "prepublishOnly": "npm run rebuild && npm run test", + "prepublishOnly": "npm run rebuild && npm run build:bundle && npm run test", "rebuild": "npm run clean && npm run build", "test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-vue", "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-vue --coverage" diff --git a/packages/dockview/package.json b/packages/dockview/package.json index 055e4affd..9de86cae4 100644 --- a/packages/dockview/package.json +++ b/packages/dockview/package.json @@ -41,13 +41,13 @@ "README.md" ], "scripts": { - "prepare": "rollup -c", + "build:bundle": "rollup -c", "build:cjs": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.json --verbose --extendedDiagnostics", "build:css": "node scripts/copy-css.js", "build:esm": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.esm.json --verbose --extendedDiagnostics", "build": "npm run build:cjs && npm run build:esm && npm run build:css", "clean": "rimraf dist/ .build/ .rollup.cache/", - "prepublishOnly": "npm run rebuild && npm run test", + "prepublishOnly": "npm run rebuild && npm run build:bundle && 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"