Highlight Laravel Package

Technical Evaluation

Architecture Fit

• Diversification of Frontend Support: Addition of Svelte aligns with Laravel’s growing ecosystem of modern frontend frameworks (e.g., Inertia.js, Livewire with Svelte components). Reduces reliance on traditional Blade templating for syntax highlighting in hybrid stacks.
• Component-Based Highlighting: Svelte’s syntax (e.g., <script>, <style>, {#if} blocks) complements Laravel’s Blade + Inertia.js workflows, enabling seamless highlighting in SvelteKit or Svelte + Laravel API setups.
• Performance Neutral: Svelte parsing adds negligible overhead (TempestPHP’s CI benchmarks show <3% regression for mixed-language files).
• Theming Consistency: Svelte’s scoped styles and directives integrate with Laravel’s theming systems (e.g., Tailwind, Bootstrap) via CSS custom properties or utility classes.

Integration Feasibility

• Svelte-Specific Use Cases:
  • Component Documentation: Highlight Svelte snippets in Laravel Nova resources or custom admin panels (e.g., for Svelte-based UI extensions).
  • Frontend-Backend Sync: Embed highlighted Svelte components in API docs (e.g., using spatie/laravel-api-docs) to show frontend-backend interactions.
  • Inertia.js Integration: Highlight Svelte templates in Laravel + Inertia.js projects where Blade and Svelte coexist.
• Zero Configuration: Svelte support requires no additional setup beyond composer update tempest/highlight.
• Blade/Svelte Synergy:
  • Create @svelteHighlight directives for Svelte blocks in Blade templates:

    Blade::directive('svelteHighlight', function ($expression) {
        return "<?php echo \\Tempest\\Highlight\\Highlighter::parse($expression, 'svelte'); ?>";
    });
    

  • Use in templates:

    @svelteHighlight($svelteComponent)
    

Technical Risk

Key Questions

1. Svelte Adoption:
   • Is Svelte used in frontend components, Laravel Nova custom panels, or documentation? Prioritize highlighting where Svelte is critical.
2. Syntax Customization:
   • Need to highlight SvelteKit-specific syntax (e.g., +layout.svelte, +page.server.ts) or custom Svelte actions?
3. Toolchain Integration:
   • Will this replace VS Code’s built-in Svelte highlighting or supplement it (e.g., for static docs)?
4. Fallback for Invalid Svelte:
   • Plan for malformed templates (e.g., syntax errors in user-submitted snippets).
5. CI/CD Validation:
   • Add Svelte test cases to your PHPUnit/Spectral suite for regression testing.
6. Inertia.js Compatibility:
   • Test highlighting for Svelte components fetched via Inertia.js (e.g., partials, shared layouts).

Integration Approach

Stack Fit

• Laravel + Svelte Ecosystem:
  • Inertia.js: Highlight Svelte components in Laravel + Inertia.js apps (e.g., shared layouts, partials).
  • SvelteKit + Laravel API: Use for documenting Svelte frontend logic in Laravel API docs.
  • Laravel Nova Customization: Highlight Svelte-based Nova tool panels or custom UI extensions.
• Static Site Generators:
  • Laravel Octane + Vite: Serve pre-highlighted Svelte snippets in SPAs or documentation.
  • Markdown Parsers: Highlight Svelte code blocks in Markdown docs (e.g., spatie/laravel-markdown).
• Terminal/CLI:
  • Highlight Svelte templates in Tinker or Artisan commands (e.g., for debugging Svelte + Laravel interactions).

Migration Path

1. Pilot Phase:
   • Replace VS Code’s client-side highlighting in a single Svelte component doc page (e.g., a SvelteKit +page.svelte).
   • Compare rendering accuracy (e.g., directives, slots) vs. native tools.
2. Incremental Rollout:
   • Phase 1: Server-side highlighting for static Svelte docs (e.g., /docs/components/Button.svelte).
   • Phase 2: API endpoints for dynamic highlighting (e.g., user-uploaded Svelte snippets).
   • Phase 3: CLI integration (e.g., artisan svelte:highlight for component validation).
3. Fallback Handling:
   • Use middleware to detect Svelte parsing failures and serve syntax-highlighted plaintext with warnings.

Compatibility

Sequencing

1. Update Dependency:

   composer require tempest/highlight:^2.25.0
   

2. Blade Directive for Svelte:

   Blade::directive('svelteHighlight', function ($expression) {
       return "<?php echo \\Tempest\\Highlight\\Highlighter::parse($expression, 'svelte'); ?>";
   });
   

3. API Endpoint for Dynamic Highlighting:

   Route::post('/highlight/svelte', function (Request $request) {
       return response()->json([
           'html' => app(\Tempest\Highlight\Highlighter::class)
               ->parse($request->svelte, 'svelte')
       ]);
   });
   

4. Cache Layer for Performance:

   Cache::remember("svelte_{$component}", now()->addHours(1), fn() =>
       $highlighter->parse($component, 'svelte')
   );
   

5. CLI Command for Svelte Highlighting (optional):

   Artisan::command('svelte:highlight', function () {
       $svelte = file_get_contents('resources/js/components/Button.svelte');
       echo $this->highlighter->parse($svelte, 'svelte');
   });
   

Operational Impact

Maintenance

• Proactive:
  • Svelte/SvelteKit Updates: Monitor Svelte spec changes (e.g., new directives, actions) and test compatibility.
  • Dependency Updates: Pin tempest/highlight:^2.25.0 in composer.json to avoid unintended major updates.
• Reactive:
  • Svelte-Specific Fallbacks: Log and handle unsupported syntax (e.g., custom actions):

    try {
        $highlighted = $highlighter->parse($s