9d5db65746
Two-part solution for automatic CSS updates during development: 1. `bb watch-theme` — polls src/ui/*.css and tokens.edn every 500ms, rebuilds dist/theme.css and copies to dev targets on change. 2. `dev/css-live-reload.js` — browser-side script that polls /theme.css and hot-swaps the stylesheet without a full page reload (no FOUC). The watcher runs automatically in the hiccup tmux pane when using `bb dev-all`. It can also be run standalone with `bb watch-theme`. The live-reload script is included in all three dev targets (hiccup, replicant, squint) and copied by `bb build-theme`.
43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
// CSS Live Reload — polls /theme.css and hot-swaps the stylesheet on change.
|
|
// No full page reload needed. Included automatically in dev pages.
|
|
(function() {
|
|
'use strict';
|
|
var POLL_MS = 500;
|
|
var link = document.querySelector('link[rel="stylesheet"][href*="theme"]');
|
|
if (!link) return;
|
|
|
|
var prevHash = 0;
|
|
|
|
function djb2(str) {
|
|
var h = 5381;
|
|
for (var i = 0; i < str.length; i++) {
|
|
h = ((h << 5) + h + str.charCodeAt(i)) | 0;
|
|
}
|
|
return h;
|
|
}
|
|
|
|
function check() {
|
|
fetch('/theme.css', { cache: 'no-store' })
|
|
.then(function(r) { return r.text(); })
|
|
.then(function(css) {
|
|
var h = djb2(css);
|
|
if (prevHash && h !== prevHash) {
|
|
// Clone link and swap — avoids FOUC
|
|
var next = link.cloneNode();
|
|
next.href = '/theme.css?t=' + Date.now();
|
|
link.parentNode.insertBefore(next, link.nextSibling);
|
|
next.onload = function() {
|
|
link.parentNode.removeChild(link);
|
|
link = next;
|
|
};
|
|
console.log('[css-live-reload] theme.css updated');
|
|
}
|
|
prevHash = h;
|
|
})
|
|
.catch(function() { /* ignore network errors */ });
|
|
}
|
|
|
|
check();
|
|
setInterval(check, POLL_MS);
|
|
})();
|