|
| 1 | +const pendingBatches = new Map() |
| 2 | +const activeBatches = new Map() |
| 3 | + |
| 4 | +class SolidObjectsBatchRefreshElement extends HTMLElement { |
| 5 | + connectedCallback() { |
| 6 | + if (this.dataset.started === "true") return |
| 7 | + |
| 8 | + this.dataset.started = "true" |
| 9 | + this.enqueue() |
| 10 | + } |
| 11 | + |
| 12 | + // Several observables changing in one commit produce several notifications |
| 13 | + // for the same batch and revision. Merging them in a microtask turns those |
| 14 | + // into a single request. |
| 15 | + enqueue() { |
| 16 | + const batch = this.dataset.batch |
| 17 | + const revision = this.dataset.revision |
| 18 | + const source = this.dataset.source |
| 19 | + const scope = this.closest("[id]")?.id |
| 20 | + if (!batch || !revision || !source || !scope) return this.remove() |
| 21 | + |
| 22 | + // Two actor scopes may reuse a batch name on one page. Keying by scope |
| 23 | + // keeps their requests from merging or cancelling each other. |
| 24 | + const group = `${scope}:${batch}` |
| 25 | + const key = `${group}:${revision}` |
| 26 | + const pending = pendingBatches.get(key) |
| 27 | + if (pending) { |
| 28 | + pending.sources.add(source) |
| 29 | + this.remove() |
| 30 | + return |
| 31 | + } |
| 32 | + |
| 33 | + const merged = { sources: new Set([ source ]) } |
| 34 | + pendingBatches.set(key, merged) |
| 35 | + queueMicrotask(() => { |
| 36 | + pendingBatches.delete(key) |
| 37 | + requestBatch(group, batch, merged.sources) |
| 38 | + }) |
| 39 | + this.remove() |
| 40 | + } |
| 41 | +} |
| 42 | + |
| 43 | +async function requestBatch(group, batch, sources) { |
| 44 | + const previous = activeBatches.get(group) |
| 45 | + previous?.abort() |
| 46 | + |
| 47 | + const controller = new AbortController() |
| 48 | + activeBatches.set(group, controller) |
| 49 | + |
| 50 | + try { |
| 51 | + const url = mergedUrl(sources) |
| 52 | + if (!url) return |
| 53 | + |
| 54 | + const response = await fetch(url, { |
| 55 | + credentials: "same-origin", |
| 56 | + headers: { Accept: "application/json" }, |
| 57 | + redirect: "error", |
| 58 | + signal: controller.signal |
| 59 | + }) |
| 60 | + if (!response.ok) return dispatchBatchError(batch, `http_${response.status}`) |
| 61 | + |
| 62 | + const body = await response.json() |
| 63 | + if (!Array.isArray(body?.frames)) { |
| 64 | + return dispatchBatchError(batch, "invalid_response") |
| 65 | + } |
| 66 | + |
| 67 | + body.frames.forEach(applyFrame) |
| 68 | + } catch (error) { |
| 69 | + if (error.name !== "AbortError") dispatchBatchError(batch, "request_failed") |
| 70 | + } finally { |
| 71 | + if (activeBatches.get(group) === controller) activeBatches.delete(group) |
| 72 | + } |
| 73 | +} |
| 74 | + |
| 75 | +// Every notification for one batch and revision carries the same endpoint and |
| 76 | +// differs only by which components changed, so the union of their tokens is the |
| 77 | +// complete set to render. |
| 78 | +function mergedUrl(sources) { |
| 79 | + const urls = [ ...sources ].map((source) => new URL(source, window.location.href)) |
| 80 | + const first = urls[0] |
| 81 | + if (!first || first.origin !== window.location.origin) return |
| 82 | + |
| 83 | + const tokens = new Set() |
| 84 | + urls.forEach((url) => { |
| 85 | + url.searchParams.getAll("tokens[]").forEach((token) => tokens.add(token)) |
| 86 | + }) |
| 87 | + first.searchParams.delete("tokens[]") |
| 88 | + tokens.forEach((token) => first.searchParams.append("tokens[]", token)) |
| 89 | + return first |
| 90 | +} |
| 91 | + |
| 92 | +function applyFrame(frame) { |
| 93 | + const target = document.getElementById(frame?.target) |
| 94 | + if (!target || !frame.html) return |
| 95 | + if (!newerRevision(frame.revision, target.dataset.solidObjectsRevision)) return |
| 96 | + |
| 97 | + const parsed = new DOMParser().parseFromString(frame.html, "text/html") |
| 98 | + const replacement = parsed.getElementById(frame.target) |
| 99 | + if (!replacement) return |
| 100 | + |
| 101 | + const stream = document.createElement("turbo-stream") |
| 102 | + stream.setAttribute("action", "replace") |
| 103 | + if (frame.refresh_method === "morph") stream.setAttribute("method", "morph") |
| 104 | + stream.setAttribute("target", frame.target) |
| 105 | + |
| 106 | + const template = document.createElement("template") |
| 107 | + template.content.append(document.importNode(replacement, true)) |
| 108 | + stream.append(template) |
| 109 | + document.documentElement.append(stream) |
| 110 | +} |
| 111 | + |
| 112 | +function newerRevision(candidate, current) { |
| 113 | + const candidateRevision = parseRevision(candidate) |
| 114 | + const currentRevision = parseRevision(current) |
| 115 | + if (!candidateRevision || !currentRevision) return false |
| 116 | + |
| 117 | + return candidateRevision[0] > currentRevision[0] || |
| 118 | + (candidateRevision[0] === currentRevision[0] && |
| 119 | + candidateRevision[1] > currentRevision[1]) |
| 120 | +} |
| 121 | + |
| 122 | +function parseRevision(revision) { |
| 123 | + if (!revision) return |
| 124 | + |
| 125 | + const values = String(revision).split(":").map(Number) |
| 126 | + if ( |
| 127 | + values.length !== 2 || |
| 128 | + values.some((value) => !Number.isSafeInteger(value) || value < 0) |
| 129 | + ) return |
| 130 | + |
| 131 | + return values |
| 132 | +} |
| 133 | + |
| 134 | +function dispatchBatchError(batch, reason) { |
| 135 | + document.dispatchEvent( |
| 136 | + new CustomEvent("solid-objects:batch-refresh-error", { |
| 137 | + bubbles: true, |
| 138 | + detail: { batch, reason } |
| 139 | + }) |
| 140 | + ) |
| 141 | +} |
| 142 | + |
| 143 | +if (!customElements.get("solid-objects-batch-refresh")) { |
| 144 | + customElements.define( |
| 145 | + "solid-objects-batch-refresh", |
| 146 | + SolidObjectsBatchRefreshElement |
| 147 | + ) |
| 148 | +} |
0 commit comments