@kirchdev/duxt 0.5.1-dev-main.48-5d5fca9 → 0.6.1-dev-main.51-119d6cc

package/app/components/DuxtOpenApiClient.vue

@@ -608,20 +608,27 @@ async function copySample() {
 
 /* ------------------------------------------------------------------- send */
 
-interface Result {
-  status: number;
-  statusText: string;
-  duration: number;
-  headers: [string, string][];
-  body: string;
-}
-
-/** How long the send button shows its spinner, however fast the answer is. */
-const MINIMUM_WAIT = 300;
-
-const sending = ref(false);
-const result = ref<Result>();
-const failure = ref<string>();
+const requestState = useDuxtRequest({
+  settled: (outcome, duration, status) =>
+    report(
+      outcome,
+      duration,
+      status === undefined ? undefined : duxtStatusClass(status)
+    )
+});
+const { sending, result, cancel } = requestState;
+const failure = computed(() => {
+  switch (requestState.failure.value) {
+    case 'cancelled':
+      return t('duxt.openapi.client.cancelled');
+    case 'timeout':
+      return t('duxt.openapi.client.timeout');
+    case 'blocked':
+      return t('duxt.openapi.client.blocked');
+    default:
+      return undefined;
+  }
+});
 
 /**
  * The request that just settled, described entirely by the DOCUMENT.
@@ -654,64 +661,11 @@ function report(
 }
 
 async function send() {
-  sending.value = true;
-  // THE PREVIOUS ANSWER STAYS UNTIL THIS ONE ARRIVES. Clearing it here emptied
-  // the panel the moment the button was pressed, so the page collapsed by the
-  // height of a response and grew back a moment later — under the cursor that
-  // had just clicked. It is dimmed and marked busy instead, and replaced when
-  // there is something to replace it with.
-
-  const started = performance.now();
-
-  try {
-    const response = await fetch(request.value.url, {
-      method: request.value.method,
-      headers: request.value.headers,
-      body: request.value.body
-    });
-
-    const text = await response.text();
-    const duration = Math.round(performance.now() - started);
-
-    failure.value = undefined;
-    result.value = {
-      status: response.status,
-      statusText: response.statusText,
-      duration,
-      headers: [...response.headers.entries()],
-      body: pretty(text)
-    };
-
-    report('response', duration, duxtStatusClass(response.status));
-  } catch (error) {
-    // `fetch` rejects with a bare TypeError for a CORS refusal, a DNS failure
-    // and an offline browser alike — the browser deliberately tells the page
-    // nothing more — so the message says what the possibilities are rather than
-    // pretending to know which one happened.
-    result.value = undefined;
-    failure.value =
-      error instanceof Error && error.name !== 'TypeError'
-        ? error.message
-        : t('duxt.openapi.client.blocked');
-
-    // No status and no class: nothing came back to have one. The message is not
-    // reported either — for a CORS refusal it is this component's own guess.
-    report('failed', Math.round(performance.now() - started));
-  } finally {
-    // A FLOOR UNDER THE WAIT. The demo endpoint answers in a few milliseconds,
-    // so the spinner appeared and vanished inside one frame — which reads as
-    // the button having flickered rather than as a request having been made.
-    // Held long enough to be seen, and the button stays disabled for it, so the
-    // same request cannot be fired twice while the first is in flight.
-    const elapsed = performance.now() - started;
-    if (elapsed < MINIMUM_WAIT) {
-      await new Promise((resolve) =>
-        setTimeout(resolve, MINIMUM_WAIT - elapsed)
-      );
-    }
-
-    sending.value = false;
-  }
+  await requestState.send(request.value.url, {
+    method: request.value.method,
+    headers: request.value.headers,
+    body: request.value.body
+  });
 }
 
 /**
@@ -803,13 +757,6 @@ function gridColumns(element: HTMLElement): number {
 }
 
 /** A JSON body, indented; anything else exactly as it arrived. */
-function pretty(text: string): string {
-  try {
-    return JSON.stringify(JSON.parse(text), null, 2);
-  } catch {
-    return text;
-  }
-}
 </script>
 
 <template>
@@ -1235,6 +1182,15 @@ function pretty(text: string): string {
             {{ $t('duxt.openapi.client.send') }}
           </UiButton>
 
+          <UiButton
+            v-if="sending"
+            type="button"
+            variant="outline"
+            class="w-full"
+            @click="cancel"
+          >
+            {{ $t('duxt.openapi.client.cancel') }}
+          </UiButton>
           <p class="text-xs text-muted-foreground">
             {{ $t('duxt.openapi.client.direct') }}
           </p>
@@ -1288,6 +1244,13 @@ function pretty(text: string): string {
                   language="json"
                 />
 
+                <p
+                  v-if="result.truncated"
+                  role="status"
+                  class="text-sm text-muted-foreground"
+                >
+                  {{ $t('duxt.openapi.client.truncated') }}
+                </p>
                 <details v-if="result.headers.length" class="mt-2">
                   <summary class="cursor-pointer text-xs text-muted-foreground">
                     {{ $t('duxt.openapi.headers') }}

package/app/components/DuxtSearch.vue

@@ -33,6 +33,7 @@ const results = ref<DuxtSearchHit[]>([]);
  * results already on screen makes the previews jump while the reader types.
  */
 const matched = ref('');
+const searching = ref(false);
 
 /** True while the list shows near-misses rather than actual matches. */
 const approximate = ref(false);
@@ -48,11 +49,12 @@ let run = 0;
 // dependency in a layer a consumer installs.
 watch(query, (term) => {
   clearTimeout(pending);
+  const current = ++run;
+  searching.value = Boolean(term.trim());
   pending = setTimeout(async () => {
-    const current = ++run;
-
     const settle = (hits: DuxtSearchHit[], fuzzy: boolean) => {
       if (current !== run) return false;
+      searching.value = false;
       results.value = hits;
       approximate.value = fuzzy;
       matched.value = term;
@@ -79,6 +81,10 @@ watch(query, (term) => {
     }
   }, 120);
 });
+onBeforeUnmount(() => {
+  clearTimeout(pending);
+  run++;
+});
 
 const duxt = useDuxtConfig();
 const { recent, load } = useRecentPages(duxt.search?.recentPages);
@@ -271,7 +277,7 @@ const searchHint = computed(() => hint('search'));
          rather than an `<input>`, is in `DuxtSearchInput`. -->
     <DuxtSearchInput ref="filter" v-model="query" />
 
-    <UiCommandList class="max-h-[60vh]">
+    <UiCommandList :aria-busy="searching" class="max-h-[60vh]">
       <!-- An empty box is a dead end. Without a term the dialog offers the
            sections as entry points and, once there is any history, the pages
            this reader came from — which is what they are most likely after. -->

package/app/components/DuxtVersion.vue

@@ -66,11 +66,8 @@ function caption(version: DuxtLink) {
  * The pages this one would become in each version, checked where they may not
  * exist.
  *
- * Only inside a per-version CHANGELOG, and only below its overview: a release
- * page carries a release slug, and an older version's changelog has no page
- * for a release cut after it. Those are looked up in the target's own
- * collection; any other page keeps its place exactly as `versionPath` puts it,
- * because every other per-version tree is the same tree at another ref.
+ * Editions may remove ordinary pages and generated endpoints too. A missing
+ * target lands at that edition's root instead of a URL nobody serves.
  *
  * Nothing is read after the first `await` but plain values captured before it —
  * the rule `tests/async-data-context.test.ts` holds.
@@ -80,7 +77,7 @@ const { data: missing } = useAsyncData(
   async () => {
     const sources = duxt.resolvedSources ?? [];
     const own = source.value;
-    if (own?.generated?.type !== 'changelog' || path.value === own.prefix) {
+    if (!own || path.value === own.prefix) {
       return [];
     }
 
@@ -93,7 +90,10 @@ const { data: missing } = useAsyncData(
         version.to ?? '/'
       );
       const owner = sourceForPath(target, sources);
-      if (!owner || owner.generated?.type !== 'changelog') continue;
+      if (!owner) {
+        gone.push(target);
+        continue;
+      }
 
       const hit = await queryCollection(owner.collection as DuxtCollectionArg)
         .path(target)

package/app/components/content/Mermaid.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { renderDuxtMermaid } from '../../utils/mermaid-render';
 /**
  * A mermaid diagram, from ```mermaid or from `::mermaid`.
  *
@@ -13,58 +14,71 @@
  */
 const props = defineProps<{ code?: string }>();
 
-const container = useTemplateRef<HTMLElement>('container');
+const authored = useTemplateRef<HTMLElement>('authored');
 const colorMode = useColorMode();
-const slots = useSlots();
 const source = ref('');
 const failed = ref(false);
-
-let mermaid: typeof import('mermaid').default | undefined;
-let counter = 0;
+const svg = ref('');
+const id = `duxt-mermaid-${useId().replace(/[^A-Za-z0-9_-]/g, '_')}`;
+let revision = 0;
+let mounted = false;
 
 async function render() {
-  if (!import.meta.client || !container.value) return;
-
+  if (!import.meta.client || !mounted) return;
+  const current = ++revision;
   const text = source.value.trim();
-  if (!text) return;
+  if (!text) {
+    svg.value = '';
+    return;
+  }
 
   try {
-    mermaid ??= (await import('mermaid')).default;
-
-    mermaid.initialize({
-      startOnLoad: false,
-      securityLevel: 'strict',
-      theme: colorMode.value === 'dark' ? 'dark' : 'default'
-    });
-
-    const { svg } = await mermaid.render(`duxt-mermaid-${counter++}`, text);
-    container.value.innerHTML = svg;
+    const rendered = await renderDuxtMermaid(
+      `${id}-${current}`,
+      text,
+      colorMode.value === 'dark',
+      () => mounted && current === revision
+    );
+    if (current !== revision || !mounted) return;
+    svg.value = rendered;
     failed.value = false;
   } catch {
+    if (current !== revision || !mounted) return;
     // A diagram that does not parse must not take the page with it. The source
     // stays on screen, which is more useful than an empty box.
+    svg.value = '';
     failed.value = true;
   }
 }
 
 onMounted(() => {
-  source.value =
-    props.code ??
-    container.value?.textContent?.trim() ??
-    (typeof slots.default?.()[0]?.children === 'string'
-      ? (slots.default()[0]!.children as string)
-      : '');
-
+  mounted = true;
+  source.value = props.code ?? authored.value?.textContent?.trim() ?? '';
   void render();
 });
-
+onUpdated(() => {
+  const next = props.code ?? authored.value?.textContent?.trim() ?? '';
+  if (next !== source.value) {
+    source.value = next;
+    void render();
+  }
+});
 watch(() => colorMode.value, render);
+onBeforeUnmount(() => {
+  mounted = false;
+  revision++;
+});
 </script>
 
 <template>
   <div class="my-6 flex justify-center overflow-x-auto rounded-lg border p-4">
-    <div ref="container" :class="{ 'text-sm whitespace-pre': failed }">
+    <div
+      ref="authored"
+      :hidden="Boolean(svg)"
+      :class="{ 'text-sm whitespace-pre': failed }"
+    >
       <slot>{{ code }}</slot>
     </div>
+    <div v-if="svg" v-html="svg" />
   </div>
 </template>

package/app/composables/useDuxtRequest.ts

@@ -0,0 +1,167 @@
+import { onScopeDispose, ref } from 'vue';
+
+export interface DuxtRequestResult {
+  status: number;
+  statusText: string;
+  duration: number;
+  headers: [string, string][];
+  body: string;
+  truncated: boolean;
+}
+
+export type DuxtRequestFailure = 'cancelled' | 'timeout' | 'blocked';
+
+/** A direct, ephemeral browser request with a bounded response preview. */
+export function useDuxtRequest({
+  timeout = 30_000,
+  maxBytes = 1024 * 1024,
+  minimumWait = 300,
+  settled
+}: {
+  timeout?: number;
+  maxBytes?: number;
+  minimumWait?: number;
+  settled?: (
+    outcome: 'response' | 'failed',
+    duration: number,
+    status?: number
+  ) => void;
+} = {}) {
+  const sending = ref(false);
+  const result = ref<DuxtRequestResult>();
+  const failure = ref<DuxtRequestFailure>();
+  let active: AbortController | undefined;
+  let disposed = false;
+
+  const cancel = () =>
+    active?.abort(new DOMException('Cancelled', 'AbortError'));
+  onScopeDispose(() => {
+    disposed = true;
+    cancel();
+  });
+
+  async function send(url: string, init: RequestInit) {
+    if (sending.value || disposed) return;
+    const controller = new AbortController();
+    active = controller;
+    sending.value = true;
+    const started = performance.now();
+    const timer = setTimeout(
+      () => controller.abort(new DOMException('Timed out', 'TimeoutError')),
+      timeout
+    );
+    try {
+      const response = await fetch(url, { ...init, signal: controller.signal });
+      const preview = await readPreview(response, maxBytes, controller.signal);
+      const duration = Math.round(performance.now() - started);
+      if (disposed) return;
+      result.value = {
+        status: response.status,
+        statusText: response.statusText,
+        duration,
+        headers: [...response.headers.entries()],
+        ...preview,
+        body: preview.truncated
+          ? preview.body
+          : formatPreview(preview.body, maxBytes)
+      };
+      failure.value = undefined;
+      settled?.('response', duration, response.status);
+    } catch {
+      if (disposed) return;
+      result.value = undefined;
+      failure.value = controller.signal.aborted
+        ? controller.signal.reason?.name === 'TimeoutError'
+          ? 'timeout'
+          : 'cancelled'
+        : 'blocked';
+      settled?.('failed', Math.round(performance.now() - started));
+    } finally {
+      clearTimeout(timer);
+      const remaining = minimumWait - (performance.now() - started);
+      if (!disposed && remaining > 0)
+        await new Promise((resolve) => setTimeout(resolve, remaining));
+      if (active === controller) {
+        active = undefined;
+        sending.value = false;
+      }
+    }
+  }
+  return { sending, result, failure, send, cancel };
+}
+
+function formatPreview(text: string, maxBytes: number): string {
+  // Indenting nested JSON can expand a few KiB into tens of MiB. Bound both
+  // formatting work and its output, not just the incoming response stream.
+  if (text.length > 64 * 1024) return text;
+  let depth = 0;
+  let quoted = false;
+  let escaped = false;
+  for (const character of text) {
+    if (escaped) {
+      escaped = false;
+      continue;
+    }
+    if (quoted && character === '\\') {
+      escaped = true;
+      continue;
+    }
+    if (character === '"') {
+      quoted = !quoted;
+      continue;
+    }
+    if (quoted) continue;
+    if (character === '{' || character === '[') {
+      if (++depth > 32) return text;
+    } else if (character === '}' || character === ']') depth--;
+  }
+  try {
+    const formatted = JSON.stringify(JSON.parse(text), null, 2);
+    return new TextEncoder().encode(formatted).byteLength <= maxBytes
+      ? formatted
+      : text;
+  } catch {
+    return text;
+  }
+}
+
+async function readPreview(
+  response: Response,
+  maxBytes: number,
+  signal: AbortSignal
+) {
+  if (!response.body) return { body: '', truncated: false };
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  const parts: string[] = [];
+  let bytes = 0;
+  // Also cancels a stalled body after the headers have arrived.
+  const abort = () => {
+    void reader.cancel().catch(() => {});
+  };
+  signal.addEventListener('abort', abort, { once: true });
+  if (signal.aborted) abort();
+  try {
+    while (true) {
+      signal.throwIfAborted();
+      const chunk = await reader.read();
+      signal.throwIfAborted();
+      if (chunk.done) break;
+      const remaining = maxBytes - bytes;
+      parts.push(
+        decoder.decode(chunk.value.subarray(0, remaining), { stream: true })
+      );
+      bytes += chunk.value.byteLength;
+      if (bytes > maxBytes) {
+        await reader.cancel();
+        parts.push(decoder.decode());
+        return { body: parts.join(''), truncated: true };
+      }
+    }
+    parts.push(decoder.decode());
+    return { body: parts.join(''), truncated: false };
+  } finally {
+    signal.removeEventListener('abort', abort);
+    reader.releaseLock();
+  }
+}

package/app/composables/useDuxtVersion.ts

@@ -108,11 +108,9 @@ export function useDuxtVersion() {
   /**
    * Whether the same page is MISSING from the preferred version.
    *
-   * Only a changelog release page can be: every version publishes its own
-   * changelog, and a branch's may carry a release the default version has not
-   * shipped. Swapping the prefix alone then pointed the banner's link and the
-   * canonical at a page that does not exist. Every other per-version tree is the
-   * same tree at another ref, so nothing else is looked up.
+   * Any edition may rename or remove a page, including an API endpoint. Resolve
+   * existence before rendering the banner and canonical, rather than creating
+   * a link to a guessed target that the preferred version never published.
    *
    * `useAsyncData`, so the server waits for it and the canonical in the
    * prerendered HTML is already right. Keyed per path, so the banner and the
@@ -123,13 +121,7 @@ export function useDuxtVersion() {
     async () => {
       const own = current.value;
       const target = preferred.value;
-      if (
-        !own ||
-        !target ||
-        own === target ||
-        own.generated?.type !== 'changelog' ||
-        path.value === own.prefix
-      ) {
+      if (!own || !target || own === target || path.value === own.prefix) {
         return false;
       }
 

package/app/utils/mermaid-render.ts

@@ -0,0 +1,31 @@
+let queue: Promise<unknown> = Promise.resolve();
+
+/** Mermaid owns global configuration: initialise and render as one operation. */
+export function renderDuxtMermaid(
+  id: string,
+  source: string,
+  dark: boolean,
+  current: () => boolean = () => true
+): Promise<string> {
+  const render = queue
+    .catch(() => {})
+    .then(async () => {
+      if (!current()) return '';
+      const mermaid = (await import('mermaid')).default;
+      if (!current()) return '';
+      mermaid.initialize({
+        startOnLoad: false,
+        securityLevel: 'strict',
+        suppressErrorRendering: true,
+        theme: dark ? 'dark' : 'default'
+      });
+      try {
+        return (await mermaid.render(id, source)).svg;
+      } finally {
+        // A parser failure can leave Mermaid's temporary render container behind.
+        document.getElementById(`d${id}`)?.remove();
+      }
+    });
+  queue = render;
+  return render;
+}