Skip to content

feat: Add Universal Editor cache-busting utilities#45

Open
skukla wants to merge 6 commits intodemo-system-stores:mainfrom
skukla:feature/ue-cache-busting
Open

feat: Add Universal Editor cache-busting utilities#45
skukla wants to merge 6 commits intodemo-system-stores:mainfrom
skukla:feature/ue-cache-busting

Conversation

@skukla
Copy link

@skukla skukla commented Sep 30, 2025

Summary

  • Adds global cache-busting utilities for Universal Editor (UE) support
  • Automatically applies cache-busting to all fragment loading
  • Provides reusable utilities for custom blocks
  • Includes comprehensive documentation

Changes

  • New: /scripts/utils.js - Global utilities (isUniversalEditor(), fetchWithCacheBusting())
  • Modified: /blocks/fragment/fragment.js - Uses cache-busting for all fragments
  • Modified: /scripts/aem.js - Exports utilities for block developers
  • New: /docs/cache-busting.md - Developer documentation
  • Fixed: /blocks/product-list-page/product-list-page.js - Trailing comma linting issue

Problem Solved

When authors edit fragments in Universal Editor and publish changes, they don't see updates immediately due to browser caching. This creates confusion during the authoring experience.

Solution

The utilities automatically detect UE context (.ue.da.live or localhost) and use cache: 'reload' to bypass HTTP cache. Production sites continue using normal browser caching for performance.

Test Plan

  • Tested fragment cache-busting in UE (automatic)
  • Tested custom block cache-busting with test block
  • Verified no impact on production caching
  • Documentation reviewed

skukla and others added 6 commits September 30, 2025 12:01
Extracted UE detection and cache-busting logic into reusable
utilities in scripts/utils.js:

- isUniversalEditor() - Detects UE or localhost context
- fetchWithCacheBusting() - Fetch wrapper with cache: reload in UE

Benefits:
- Centralized UE detection logic (single source of truth)
- Easy for any block to use via import from aem.js
- Explicit opt-in (blocks choose to use utility)
- Maintainable (one place to update)
- Well-documented with JSDoc

Updated fragment.js to use the new utility, removing
inline detection code.

Exported from aem.js for easy access:
import { fetchWithCacheBusting } from '../../scripts/aem.js';

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Comprehensive guide explaining:
- Problem: Fragment caching in UE preventing authors from seeing updates
- Solution: Utility functions for UE detection and cache-busting
- Automatic coverage via loadFragment()
- Developer usage examples for custom blocks
- Technical details and benefits

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Creates a minimal test block to demonstrate fetchWithCacheBusting()
utility usage for non-fragment blocks.

- blocks/test-cache-busting/test-cache-busting.js - Fetches JSON data
- test-data.json - Sample data file for testing

Test procedure:
1. Create document with test-cache-busting block in da.live
2. Edit test-data.json in da.live
3. Publish changes
4. Reload page in UE - verify updated content appears immediately

This demonstrates that the cache-busting utility works for ANY
block that fetches content, not just fragments.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Resolves ESLint comma-dangle error on line 152.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
The test data will be created as a sheet in da.live for easier editing.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants