Update dependencies in your Odoo PWA project to latest compatible versions. ## What this command does: - Checks for outdated dependencies - Updates packages to latest versions - Tests the application after updates - Fixes breaking changes if needed - Updates lock files - Verifies everything still works ## Prerequisites: - Current directory is an Odoo PWA project - Git repository (recommended for easy rollback) - Latest npm installed --- ## Update Strategy ### Safe Update (Recommended) Updates to latest compatible versions within semver ranges. ```bash npm update ``` ### Major Update (Requires testing) Updates to latest versions including major releases. ```bash npm outdated # See what's outdated npm update # Update minor/patch npx npm-check-updates -u # Update majors npm install ``` --- ## Steps: ### 1. Check Current Status ```bash # See current versions npm list --depth=0 # See outdated packages npm outdated ``` ### 2. Create Backup ```bash # Commit current state git add . git commit -m "Pre-dependency update checkpoint" # Or backup package files cp package.json package.json.backup cp package-lock.json package-lock.json.backup ``` ### 3. Update Dependencies #### Minor/Patch Updates (Safe) ```bash npm update npm install ``` #### Major Updates (Test carefully) ```bash # Install npm-check-updates if needed npm install -g npm-check-updates # Preview updates ncu # Update package.json ncu -u # Install new versions npm install ``` ### 4. Framework-Specific Updates #### SvelteKit ```bash # Update Svelte + SvelteKit npm update @sveltejs/kit @sveltejs/adapter-static npm update svelte # Check for breaking changes # https://github.com/sveltejs/kit/blob/master/CHANGELOG.md ``` #### React ```bash # Update React npm update react react-dom # Update related packages npm update @types/react @types/react-dom ``` #### Vue ```bash # Update Vue npm update vue # Update related packages npm update @vitejs/plugin-vue ``` ### 5. Update Build Tools ```bash # Update Vite npm update vite # Update PWA plugin npm update vite-plugin-pwa @vite-pwa/sveltekit ``` ### 6. Test Everything #### Run Development Server ```bash npm run dev ``` Check: - ✅ Server starts without errors - ✅ App loads correctly - ✅ No console errors - ✅ All routes work #### Test Core Functionality - ✅ Odoo connection works - ✅ Data loads from cache - ✅ Sync works - ✅ CRUD operations work - ✅ Offline mode works #### Build for Production ```bash npm run build ``` Check: - ✅ Build completes without errors - ✅ No warnings about deprecations - ✅ Bundle size is reasonable #### Preview Production Build ```bash npm run preview ``` Test the same functionality in production mode. ### 7. Run Connection Test ```bash # If /test-connection command is available /test-connection ``` ### 8. Commit Changes ```bash git add package.json package-lock.json git commit -m "Update dependencies to latest versions" ``` --- ## Common Issues & Solutions ### Issue: Build fails after update **Solution:** ```bash # Revert updates git checkout package.json package-lock.json npm install # Try updating one package at a time npm update vite npm run build # Test npm update @sveltejs/kit npm run build # Test # Continue one by one ``` ### Issue: TypeScript errors **Solution:** ```bash # Update TypeScript npm update typescript # Update type definitions npm update @types/node # Regenerate tsconfig npx tsc --init ``` ### Issue: Import errors **Solution:** ```javascript // Old import might be: import { foo } from 'package'; // New import might be: import { foo } from 'package/foo'; // Check package's CHANGELOG for migration guide ``` ### Issue: Service Worker errors **Solution:** ```bash # Update PWA plugin npm update vite-plugin-pwa # Check configuration # vite.config.js VitePWA({ // Update config as needed }) ``` ### Issue: Peer dependency warnings **Solution:** ```bash # Install peer dependencies npm install # Or use --force (not recommended) npm install --force ``` --- ## Breaking Changes to Watch For ### Vite 5+ - May require Node 18+ - ESM-only packages - Updated config format ### SvelteKit 2+ - Svelte 5 syntax (runes) - Updated adapter config - New routing conventions ### React 19+ - New JSX transform - Updated hooks behavior - Server components ### Vue 3.4+ - New compiler optimizations - Updated Composition API - Better TypeScript support --- ## Update Checklist After updating, verify: ``` □ npm run dev works □ npm run build succeeds □ npm run preview works □ No console errors □ Odoo connection works □ Data syncs correctly □ CRUD operations work □ Offline mode works □ Service worker registered □ Tests pass (if any) □ No TypeScript errors □ No ESLint warnings □ Documentation updated ``` --- ## Selective Updates ### Update Only Production Dependencies ```bash npm update --prod ``` ### Update Specific Package ```bash npm update vite npm update @sveltejs/kit ``` ### Update to Specific Version ```bash npm install vite@5.0.0 npm install svelte@5.0.0 ``` ### Keep Package at Current Version ```json // package.json { "dependencies": { "some-package": "1.2.3" // No ^ or ~ = exact version } } ``` --- ## Best Practices ### 1. Update Regularly - Check weekly for security updates - Update monthly for feature updates - Test before deploying ### 2. Read Changelogs - Check CHANGELOG.md for breaking changes - Review migration guides - Test thoroughly ### 3. Update One Category at a Time ```bash # 1. Framework npm update svelte @sveltejs/kit # 2. Build tools npm update vite # 3. Dependencies npm update # All others ``` ### 4. Keep Lock Files - Commit `package-lock.json` - Ensure consistent installs - Track exact versions ### 5. Test in Staging - Deploy to staging first - Test all functionality - Then deploy to production --- ## Security Updates ### Check for Vulnerabilities ```bash npm audit ``` ### Fix Automatically ```bash npm audit fix ``` ### Fix with Breaking Changes ```bash npm audit fix --force ``` ### Review Details ```bash npm audit --json ``` --- ## Automated Updates (Optional) ### Using Dependabot (GitHub) Create `.github/dependabot.yml`: ```yaml version: 2 updates: - package-ecosystem: "npm" directory: "/" schedule: interval: "weekly" open-pull-requests-limit: 10 ``` ### Using Renovate Create `renovate.json`: ```json { "extends": ["config:base"], "schedule": ["before 10am on monday"] } ``` --- ## Rollback Plan ### If Something Breaks #### Quick Rollback ```bash git checkout package.json package-lock.json npm install ``` #### Restore from Backup ```bash cp package.json.backup package.json cp package-lock.json.backup package-lock.json npm install ``` #### Git Reset ```bash git reset --hard HEAD~1 npm install ``` --- ## After Update ### Update Documentation - Note any breaking changes - Update README if needed - Document new features used ### Notify Team - Share what was updated - Note any changes in behavior - Update staging/production ### Monitor Production - Watch error logs - Check performance metrics - Monitor user reports --- ## Example prompts to use this command: - `/update-deps` - Update all dependencies - User: "Update my dependencies" - User: "Check for package updates" - User: "My packages are outdated" ## Related Commands: - `/fix-sync` - If sync breaks after update - `/test-connection` - Verify Odoo still works - `/troubleshoot` - Fix issues after update - `/optimize` - Check for optimizations after update --- ## Quick Update Script Save as `update.sh`: ```bash #!/bin/bash echo "Backing up..." cp package.json package.json.backup cp package-lock.json package-lock.json.backup echo "Checking for updates..." npm outdated echo "Updating..." npm update echo "Installing..." npm install echo "Testing..." npm run build if [ $? -eq 0 ]; then echo "✅ Build successful!" echo "Run: npm run dev to test" else echo "❌ Build failed! Rolling back..." cp package.json.backup package.json cp package-lock.json.backup package-lock.json npm install fi ``` Usage: ```bash chmod +x update.sh ./update.sh ```