A powerful Visual Studio Code extension designed to streamline the process of updating LXP spinoff themes with changes from the base LXP repository. This tool guides you through the entire migration process, from pulling updates to verifying theme variable changes, making spinoff maintenance efficient and reliable.
Primary Features
1. Guided Migration Workflow
The extension provides a step-by-step wizard for updating your spinoff theme:
Base Integration
Requires a git remote called base pointing to the base LXP repository (git@github.com:twentyfourg/2772-1-lxp-base-frontend.git)
Assists in merging updates from your chosen branch
Helps manage merge conflicts, particularly in theme-related files
Theme File Migration
Automatically identifies changed files in src/theme/Drive
Facilitates copying relevant updates to your spinoff theme
Maintains theme consistency while preserving spinoff-specific customizations
Quadrant View for Change Verification
The core of the migration process is the quadrant view, which shows:
The spinoff theme file with highlighted changes
Associated .vue components affected by the changes
Theme file diffs (theme.scss)
Variable definitions (variables.scss)
This comprehensive view allows you to:
Review all related files in one place
Verify variable values match between versions
Make real-time adjustments as needed
Mark files as complete once verified
Progress Tracking
Side panel showing all files requiring review
Progress indicators for completed verifications
Clear overview of remaining migration tasks
Bonus Feature: Variable Resolution
To assist in the migration process, the extension includes powerful variable resolution capabilities:
Inline display of resolved variable values
Go-to-definition for SCSS/CSS variables
Theme-aware variable tracking
Support for complex SCSS functions and interpolation
Installation
Open Visual Studio Code
Go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X)
Search for "LXP Migration Wizard"
Click Install
Usage
Setting Up
Ensure you have a git remote called base pointing to the base LXP repository:
git remote add base <base-lxp-repository-url>
Migration Workflow
Start Migration
Open the command palette (Ctrl+Shift+P or Cmd+Shift+P)
Select "Start LXP Migration Wizard"
Choose the branch to merge from base
Resolve Conflicts
The wizard will help you resolve conflicts
Automatic handling of conflicts in src/theme/Drive directory
Manual review required for spinoff-specific conflicts
Review Changes
Open the quadrant view for each modified file
Verify variable values and theme consistency
Make adjustments as needed
Mark files as complete when verified
Complete Migration
Verify all files have been reviewed
Commit your changes
Run any necessary tests
Requirements
Visual Studio Code version 1.60.0 or higher
Git remote called base pointing to base LXP repository
Proper LXP theme structure in your workspace
Extension Settings
lxpMigrationWizard.enabled: Enable/disable the extension
lxpMigrationWizard.spinoffThemeName: Set your custom spinoff theme name
