equinor / equinor/fusion-framework
Consolidate React App Packages for Simplified Version Management
- Dominant language
- TypeScript
- Stars
- 10
- Forks
- 10
- Avg merge
- 19h 40m
- Merged PRs (30d)
- 150
Description
**As a** Fusion Framework developer
**I want** to install only one React package instead of managing multiple separate packages
**So that** I can simplify version management, reduce bundle size, and avoid dependency conflicts
## Technical Requirements
Currently, developers using the Fusion Framework React App need to install and manage multiple separate packages for different features:
- `@equinor/fusion-framework-react-app` (main package)
- `@equinor/fusion-framework-react-module-bookmark`
- `@equinor/fusion-framework-react-module-context`
- `@equinor/fusion-framework-react-module-feature-flag`
- `@equinor/fusion-framework-react-module-help-center`
- `@equinor/fusion-framework-react-module-http`
- `@equinor/fusion-framework-react-module-msal`
- `@equinor/fusion-framework-react-module-navigation`
- `@equinor/fusion-framework-react-module-settings`
- `@equinor/fusion-framework-react-module-widget`
- `@equinor/fusion-framework-react-ag-grid`
This creates several issues:
1. **Version Management Complexity**: Developers must ensure all packages are compatible versions
2. **Bundle Size Concerns**: Multiple packages can lead to larger bundle sizes if not properly tree-shaken
3. **Installation Overhead**: Multiple package installations and dependency resolution
4. **Maintenance Burden**: Keeping track of updates across multiple packages
## Proposed Solution
Consolidate all React-specific packages into a single `@equinor/fusion-framework-react-app` package with proper tree-shaking support. The package already exports submodules (as seen in `package.json` exports), but we need to:
1. **Move all React module implementations** into the react-app package
2. **Maintain individual exports** for tree-shaking compatibility
3. **Add CLI tooling** to detect and warn about manually installed packages
4. **Provide migration guidance** for existing projects
## Current Package Structure Analysis
Based on the current `packages/react/app/package.json`, the following submodules are already exported:
- `./apploader` - App loading functionality
- `./bookmark` - Bookmark management
- `./context` - Context management
- `./feature-flag` - Feature flag functionality
- `./framework` - Framework utilities
- `./help-center` - Help center integration
- `./http` - HTTP client utilities
- `./msal` - MSAL authentication
- `./navigation` - Navigation utilities
- `./settings` - Settings management
- `./widget` - Widget functionality
## Packages to Consolidate
### Currently Separate React Packages:
1. `@equinor/fusion-framework-react-module-bookmark` → Move to `./bookmark`
2. `@equinor/fusion-framework-react-module-context` → Move to `./context`
3. `@equinor/fusion-framework-react-module-feature-flag` → Move to `./feature-flag`
4. `@equinor/fusion-framework-react-module-help-center` → Move to `./help-center`
5. `@equinor/fusion-framework-react-module-http` → Move to `./http`
6. `@equinor/fusion-framework-react-module-msal` → Move to `./msal`
7. `@equinor/fusion-framework-react-module-navigation` → Move to `./navigation`
8. `@equinor/fusion-framework-react-module-settings` → Move to `./settings`
9. `@equinor/fusion-framework-react-module-widget` → Move to `./widget`
10. `@equinor/fusion-framework-react-ag-grid` → Move to `./ag-grid`
### Additional Packages to Consider:
- `@equinor/fusion-framework-react-components-bookmark` → Move to `./components/bookmark`
- `@equinor/fusion-framework-react-components-people-resolver` → Move to `./components/people-resolver`
## CLI Requirements
### Package Detection Logic
The CLI should dynamically detect redundant packages by:
1. Reading `@equinor/fusion-framework-react-app`'s package.json to get its dependencies
2. Comparing those with the app's locally installed packages
3. Finding packages that are both included in react-app AND locally installed
### CLI Commands Behavior
#### `fusion app check`
- Detect and warn about redundant packages
- Suggest running migration command
#### `fusion app dev`
- Ask user if they want to remove redundant packages in development
- Provide confirmation prompt before removal
#### `fusion app build`
- Fail build in CI if redundant packages detected
- Provide clear error message about which packages to remove
#### `fusion app migrate`
- Help developers remove redundant packages
- Update package.json automatically
- Provide summary of changes
## Benefits
### For End Users
1. **Simplified Installation**: Single package to install
2. **Automatic Version Compatibility**: No version conflicts between related packages
3. **Better Tree Shaking**: Bundlers can optimize unused code more effectively
4. **Reduced Bundle Size**: Eliminate duplicate dependencies
5. **Easier Maintenance**: Single package to update
### For Framework Maintainers
1. **Reduced Complexity**: Fewer packages to maintain
2. **Consistent Versioning**: Single version for all React functionality
3. **Better Testing**: All React functionality tested together
4. **Simplified Documentation**: Single package documentation
## Migration Strategy
### For Existing Projects
1. **Automatic Detection**: CLI will detect redundant packages
2. **Guided Migration**: `fusion app migrate` command will:
- Remove redundant packages from package.json
- Update import statements
- Provide migration summary
3. **Gradual Transition**: Individual packages will be deprecated but not removed immediately
4. **Backward Compatibility**: Existing imports will continue to work
### Import Changes
```typescript
// Before (multiple packages)
import { useBookmark } from '@equinor/fusion-framework-react-module-bookmark';
import { useFeatureFlag } from '@equinor/fusion-framework-react-module-feature-flag';
import { useSettings } from '@equinor/fusion-framework-react-module-settings';
// After (single package)
import { useBookmark } from '@equinor/fusion-framework-react-app/bookmark';
import { useFeatureFlag } from '@equinor/fusion-framework-react-app/feature-flag';
import { useSettings } from '@equinor/fusion-framework-react-app/settings';
```
## Success Criteria
1. **Reduced Package Count**: From ~10 packages to 1 package
2. **Simplified Installation**: Single `pnpm add @equinor/fusion-framework-react-app`
3. **Better Bundle Size**: Improved tree-shaking and reduced duplicates
4. **Developer Experience**: CLI warnings and migration tools
5. **CI Integration**: Automated detection of redundant packages
## Acceptance Criteria
- [ ] All React functionality consolidated into single package
- [ ] CLI detects redundant packages dynamically
- [ ] Development mode asks user to remove redundant packages
- [ ] CI builds fail if redundant packages detected
- [ ] Migration command helps remove redundant packages
- [ ] Backward compatibility maintained
- [ ] Tree-shaking works correctly
- [ ] Documentation updated
Contributor guide
Assessment
This issue has not been assessed yet.