tree 18361873a51cd6217f10650f122b88fabd44ac07
parent d4eea221b455e06fe7f897d1e04a8833015e893c
author philip.zeyliger <philip.zeyliger@gmail.com> 1750046077 +0000
committer Autoformatter <bot@sketch.dev> 1750134438 +0000

webui: implement Mermaid code splitting with lazy loading

Split Mermaid library into separate bundle with content-based hashing for
optimal caching and reduced bundle size in main application components.

Implementation Changes:

1. Lazy Loading Infrastructure (sketch-timeline-message.ts):
   - Replace direct mermaid import with type-only import
   - Add loadMermaid() function with Promise-based dynamic loading
   - Implement __MERMAID_HASH__ constant injection pattern
   - Add global window.mermaid type declarations
   - Create mermaid loading promise with singleton pattern

2. Bundle Splitting (esbuild.go):
   - Add createStandaloneMermaidBundle() function
   - Generate content-based hash from mermaid package.json
   - Create mermaid-standalone-{hash}.js as IIFE format bundle
   - Implement esbuildBundleWithExternals() replacing esbuildBundleWithExternal()
   - Add --external:mermaid to all TypeScript bundle builds
   - Inject __MERMAID_HASH__ constant at build time

3. Async Rendering (sketch-timeline-message.ts):
   - Update renderMermaidDiagrams() to async/await pattern
   - Load mermaid library only when diagrams are present
   - Initialize mermaid configuration after dynamic loading
   - Maintain fallback to code blocks on loading errors
   - Preserve all existing mermaid functionality and configuration

Technical Details:
- Uses content-based hashing for optimal browser caching
- Mermaid loaded on-demand only when diagrams are present
- Singleton loading pattern prevents duplicate network requests
- Maintains existing mermaid initialization options
- Preserves error handling with code block fallbacks
- IIFE format enables direct window.mermaid assignment

Benefits:
- Reduces bundle size for components not using mermaid diagrams
- Enables browser caching of mermaid library across sessions
- Maintains existing functionality with lazy loading
- Improves initial page load performance
- Provides same user experience with deferred mermaid loading

This follows the same pattern established for Monaco editor bundling,
providing consistent lazy loading architecture for large dependencies.

Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s0f8a82fcd28add05k