Problem: the hexagonal refactor churns the backend tree for nine more phases; the UI delivery stack (web/ SPA, cmd/desktop Wails wrapper, compose/web image) must move to its own repo first so doc/layout rewrites land once on a backend-only tree. Change: - New repo git.hubris.network/dtoro/oikos-web (v0.33.0): web/, desktop/ (updateURL repointed to oikos-web releases), compose/, own CI (web + desktop jobs), own deploy script (CI-green gate, TOCTOU guard, version-tagged images, prune-to-3), own webhook receiver on :9798 + launchd unit, own compose project publishing the same 8091:80. - Cutover executed on mac-mini in order: oikos stack's web service stopped+removed, oikos-web project brought up on 8091; outer Caddy untouched (targets the published port) — serving + Authentik flow + /wails 404 quirk verified post-cutover. - Stripped from oikos: web/, cmd/desktop/, compose/web/, desktop CI workflow, ci.yml web job, Makefile ui/desktop/desktop-package/install targets, the compose web service, oikos-web from deploy.sh's fallback prune list; wails + go-keyring dropped from go.mod, vendor synced. - README / CONTRIBUTING / AGENTS.md / .agents dev+operations docs now point at the new repo; mbse + mascot design docs carry a path note. Risk: production SPA serving depends on the new pipeline now; rollback is versioned-image re-up of the old web service from a pre-split checkout (port 8091). Desktop builds installed before the split still check dtoro/oikos releases — one manual reinstall, noted in the oikos-web release notes. Verification: go vet, make test (race), make generate-check, golangci (no new findings; baseline down 400→365); post-cutover curls — localhost:8091 200, /wails/runtime.js 404, outer Caddy 302 Authentik.
103 lines
3.2 KiB
JavaScript
103 lines
3.2 KiB
JavaScript
import { afterTick, onDestroyEffect } from "svelte-toolbelt";
|
|
export class AnimationsComplete {
|
|
#opts;
|
|
#currentFrame = null;
|
|
#observer = null;
|
|
#runId = 0;
|
|
constructor(opts) {
|
|
this.#opts = opts;
|
|
onDestroyEffect(() => this.#cleanup());
|
|
}
|
|
#cleanup() {
|
|
if (this.#currentFrame !== null) {
|
|
window.cancelAnimationFrame(this.#currentFrame);
|
|
this.#currentFrame = null;
|
|
}
|
|
this.#observer?.disconnect();
|
|
this.#observer = null;
|
|
this.#runId++;
|
|
}
|
|
run(fn) {
|
|
this.#cleanup();
|
|
const node = this.#opts.ref.current;
|
|
if (!node)
|
|
return;
|
|
if (typeof node.getAnimations !== "function") {
|
|
this.#executeCallback(fn);
|
|
return;
|
|
}
|
|
const runId = this.#runId;
|
|
const executeIfCurrent = () => {
|
|
if (runId !== this.#runId)
|
|
return;
|
|
this.#executeCallback(fn);
|
|
};
|
|
const waitForAnimations = () => {
|
|
if (runId !== this.#runId)
|
|
return;
|
|
const animations = node.getAnimations();
|
|
if (animations.length === 0) {
|
|
executeIfCurrent();
|
|
return;
|
|
}
|
|
Promise.all(animations.map((animation) => animation.finished))
|
|
.then(() => {
|
|
executeIfCurrent();
|
|
})
|
|
.catch(() => {
|
|
if (runId !== this.#runId)
|
|
return;
|
|
const currentAnimations = node.getAnimations();
|
|
const hasRunningAnimations = currentAnimations.some((animation) => animation.pending || animation.playState !== "finished");
|
|
if (hasRunningAnimations) {
|
|
waitForAnimations();
|
|
return;
|
|
}
|
|
executeIfCurrent();
|
|
});
|
|
};
|
|
const requestWaitForAnimations = () => {
|
|
this.#currentFrame = window.requestAnimationFrame(() => {
|
|
this.#currentFrame = null;
|
|
waitForAnimations();
|
|
});
|
|
};
|
|
if (!this.#opts.afterTick.current) {
|
|
requestWaitForAnimations();
|
|
return;
|
|
}
|
|
this.#currentFrame = window.requestAnimationFrame(() => {
|
|
this.#currentFrame = null;
|
|
const startingStyleAttr = "data-starting-style";
|
|
if (!node.hasAttribute(startingStyleAttr)) {
|
|
requestWaitForAnimations();
|
|
return;
|
|
}
|
|
this.#observer = new MutationObserver(() => {
|
|
if (runId !== this.#runId)
|
|
return;
|
|
if (node.hasAttribute(startingStyleAttr))
|
|
return;
|
|
this.#observer?.disconnect();
|
|
this.#observer = null;
|
|
requestWaitForAnimations();
|
|
});
|
|
this.#observer.observe(node, {
|
|
attributes: true,
|
|
attributeFilter: [startingStyleAttr],
|
|
});
|
|
});
|
|
}
|
|
#executeCallback(fn) {
|
|
const execute = () => {
|
|
fn();
|
|
};
|
|
if (this.#opts.afterTick) {
|
|
afterTick(execute);
|
|
}
|
|
else {
|
|
execute();
|
|
}
|
|
}
|
|
}
|