Migrate Starter to Shiki Version 3 from Version 1

[theDeal]

Description:

We currently rely on Shiki version 1 for syntax highlighting in our Next.js starter project. With the release of Shiki version 3—which brings improvements in performance, theme handling, and API consistency—it’s time to upgrade our integration.

Migration Goals:

• Upgrade Dependency: Update the project’s package.json to reference Shiki v3.
• API Updates: Refactor our codebase to accommodate breaking changes and new API patterns introduced in v3.
• Automated Migration: Utilize the automated migration approach as described in the Shiki blog post to streamline changes. (See [Automated Migration Guide](https://shiki.matsu.io/blog/v2#automated-migration) for details.)
• Testing: Ensure that both server-side rendering and static builds in Next.js continue to display syntax-highlighted code correctly after migration.
• Documentation: Update our project documentation to reflect the changes in configuration and usage with Shiki v3.

Tasks:

1. Update Package Dependency:

   • Change the Shiki dependency from version 1 to version 3 in package.json.
   • Run a fresh install to update node modules.

2. Run Automated Migration Script:

   • Follow the instructions from the [Automated Migration Guide](https://shiki.matsu.io/blog/v2#automated-migration) to automatically update configuration and code references.
   • Validate that the migration script covers all required changes from the v1 API.

3. Code Refactoring:

   • Review the migration output for any manual adjustments needed.
   • Update any custom integrations or overrides to work with the new API.

4. Testing:

   • Execute the existing test suite to ensure nothing breaks.
   • Manually verify syntax highlighting in both development and production builds.
   • Check for any visual discrepancies or performance regressions.

5. Documentation:

   • Update README and any related docs with the new installation and usage instructions for Shiki v3.
   • Add notes on migration steps for future reference.

Additional Context:

The automated migration instructions from the Shiki team provide a clear path for updating from earlier versions. This migration is critical to take advantage of the latest features and maintain compatibility with modern Next.js setups.

Let’s prioritize this update to ensure our starter project remains up to date and fully leverages the improvements in Shiki v3.