Edit Cache Invalidation

Name

Also known as (comma separated)

Brief definition Process of marking cached data as outdated.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "entryKey", "type": "text", "label": "Cache entry", "default": "user:42:profile" }, { "id": "trigger", "type": "select", "label": "Invalidation trigger", "default": "write", "options": [ "write", "ttl-expiry", "manual" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#E8A020", "presets": [ "#E8A020", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#241430" ] }, { "id": "showTimestamp", "type": "toggle", "label": "Show timestamp", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"civ civ--{{trigger}}\">\n <div class=\"civ__entry\"><span class=\"civ__before\">{{entryKey}}</span><span class=\"civ__strike\" style=\"background:{{accent}};\">invalidated</span></div>\n <p class=\"civ__reason civ__reason--write\">Reason: a write to this key happened{{#if showTimestamp}} at 14:02:11{{/if}}</p>\n <p class=\"civ__reason civ__reason--ttl-expiry\">Reason: TTL expired{{#if showTimestamp}} at 14:02:11{{/if}}</p>\n <p class=\"civ__reason civ__reason--manual\">Reason: manual purge requested{{#if showTimestamp}} at 14:02:11{{/if}}</p>\n</div>\n<style>\n.civ { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.civ__entry { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 8px; background: #ffffff; border: 1px solid #24143018; margin-bottom: 10px; }\n.civ__before { flex: 1; font: 11px ui-monospace, monospace; text-decoration: line-through; color: #24143080; }\n.civ__strike { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #241430; }\n.civ__reason { display: none; margin: 0; font-size: 11px; color: #24143099; }\n.civ--write .civ__reason--write, .civ--ttl-expiry .civ__reason--ttl-expiry, .civ--manual .civ__reason--manual { display: block; }\n</style>", "tailwind": "<div class=\"civtw civtw--{{trigger}} font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border\">\n <div class=\"flex items-center gap-2.5 p-3 rounded-lg bg-white border border-[#24143018] mb-2.5\">\n <span class=\"flex-1 font-mono text-[11px] line-through text-[#24143080]\">{{entryKey}}</span>\n <span class=\"text-[10px] font-bold py-1 px-2.5 rounded-full\" style=\"background:{{accent}};\">invalidated</span>\n </div>\n <p class=\"civtw__reason civtw__reason--write hidden m-0 text-[11px] text-[#24143099]\">Reason: a write to this key happened{{#if showTimestamp}} at 14:02:11{{/if}}</p>\n <p class=\"civtw__reason civtw__reason--ttl-expiry hidden m-0 text-[11px] text-[#24143099]\">Reason: TTL expired{{#if showTimestamp}} at 14:02:11{{/if}}</p>\n <p class=\"civtw__reason civtw__reason--manual hidden m-0 text-[11px] text-[#24143099]\">Reason: manual purge requested{{#if showTimestamp}} at 14:02:11{{/if}}</p>\n</div>\n<style>\n.civtw--write .civtw__reason--write, .civtw--ttl-expiry .civtw__reason--ttl-expiry, .civtw--manual .civtw__reason--manual { display: block; }\n</style>", "react": "export function CacheInvalidation({\n entryKey = \"{{entryKey}}\",\n trigger = \"{{trigger}}\",\n accent = \"{{accent}}\",\n showTimestamp = {{showTimestamp}},\n}) {\n const reasons = {\n write: \"a write to this key happened\",\n \"ttl-expiry\": \"TTL expired\",\n manual: \"manual purge requested\",\n };\n return (\n <div style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 10, padding: 12, borderRadius: 8, background: \"#ffffff\", border: \"1px solid #24143018\", marginBottom: 10 }}>\n <span style={{ flex: 1, fontFamily: \"ui-monospace, monospace\", fontSize: 11, textDecoration: \"line-through\", color: \"#24143080\" }}>{entryKey}</span>\n <span style={{ fontSize: 10, fontWeight: 700, padding: \"3px 9px\", borderRadius: 999, color: \"#241430\", background: accent }}>invalidated</span>\n </div>\n <p style={{ margin: 0, fontSize: 11, color: \"#24143099\" }}>Reason: {reasons[trigger]}{showTimestamp && \" at 14:02:11\"}</p>\n </div>\n );\n}" }