Add Theme Customiser URL to Watch Output

[zacariec]

Add Theme Customizer URL to Watch Output

Overview

Currently, when running the watch command, developers need to manually navigate to the theme customizer. We should automatically output the theme customizer URL alongside the preview URL to improve developer experience.

Motivation

• Developers frequently need to access both the preview and customizer URLs during development
• Manual URL construction is error-prone and time-consuming
• Consistent with modern dev tooling expectations where all relevant URLs are provided

Technical Details

Current Output

[framework] Preview URL: https://store-name.myshopify.com?preview_theme_id=123456789

Proposed Output

[framework] Preview URL: https://store-name.myshopify.com?preview_theme_id=123456789
[framework] Customizer URL: https://store-name.myshopify.com/admin/themes/123456789/editor

Implementation Notes

• URL construction should use existing store and theme ID from framework config
• Consider color-coding URLs for better visibility (using chalk/colorette)
• Maintain consistent logging format with other Framework output
• Handle cases where theme ID might not be available

Acceptance Criteria

• Watch command outputs both preview and customizer URLs
• URLs are correctly constructed using store and theme ID from config
• Output maintains consistent styling with existing logs
• URLs are clearly labeled and distinguishable
• Error handling for missing/invalid configuration
• Documentation updated to reflect new output

Implementation Steps

1. Update watch command to construct customizer URL
2. Add new log output after existing preview URL
3. Add error handling for edge cases
4. Update relevant documentation
5. Add tests for URL construction

Related Components

• Watch command implementation
• Logger utility
• Configuration parser

Type of Change

• ✨ New feature (non-breaking change which adds functionality)
• 📝 Documentation update

Estimated Complexity

Low - This is a straightforward enhancement to existing logging functionality.

Labels

• enhancement
• developer-experience
• watch-command