@crvouga/atlas 0.3.0 → 0.5.0

package/packages/visualizer/src/evidence/sources-panel.tsx

@@ -1,5 +1,6 @@
 import type { LayerHeader } from '@crvouga/atlas/reports/evidence-types';
-import { branchOf, contributes, sourceFacets, type SourceSelection } from '@crvouga/atlas/reports/evidence-view';
+import { ALL_SOURCES, branchOf, contributes, sourceFacets, sourceSelection, type SourceFacet, type SourceSelection } from '@crvouga/atlas/reports/evidence-view';
+import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
 import * as Dialog from '@radix-ui/react-dialog';
 import { useMemo } from 'react';
 
@@ -20,16 +21,23 @@ function counts(layer: LayerHeader) {
 }
 
 /** How many sources are switched off, for the button that opens the panel. */
-export function excludedCount(excluded: SourceSelection) {
-  return excluded.backends.length + excluded.branches.length + excluded.layers.length;
+export function excludedCount(excluded: Partial<SourceSelection>) {
+  const selection = sourceSelection(excluded);
+  return selection.backends.length + selection.branches.length + selection.versions.length + selection.environments.length + selection.layers.length;
+}
+
+function versionLabel(id: string) {
+  return id === 'unknown' ? 'Unknown version' : id.slice(0, 7);
 }
 
 /**
- * Where the combined report comes from. Every backend, branch and run contributes unless it is
- * switched off here, which is also how an earlier result is brought back into view.
+ * Where the combined report comes from. Every backend, environment, branch, version and layer
+ * contributes unless it is switched off here, which is also how an earlier result is brought back.
  */
 export function SourcesPanel() {
-  const { layers, backends, excluded, setExcluded, notices, retry } = useEvidence();
+  const evidence = useEvidence();
+  const { layers, backends, setExcluded, notices, retry } = evidence;
+  const excluded = sourceSelection(evidence.excluded);
   const open = useUiStore((s) => s.sourcesOpen);
   const setOpen = useUiStore((s) => s.setSourcesOpen);
   const now = useNow();
@@ -48,10 +56,10 @@ export function SourcesPanel() {
             </Dialog.Close>
           </div>
           <p className={styles.lead}>
-            {contributing} of {plural(layers.length, 'run', 'runs')} contribute. For each check the newest completed result is shown. Switch a source off to see what earlier runs recorded.
+            {contributing} of {plural(layers.length, 'layer', 'layers')} contribute. For each check and environment, the newest completed result is shown. A layer fills only the checks it ran, so the rest of the report stays in place. Switch a source off to see an earlier result.
           </p>
           {excludedCount(excluded) > 0 && (
-            <button type="button" className={styles.reset} onClick={() => setExcluded({ backends: [], branches: [], layers: [] })}>
+            <button type="button" className={styles.reset} onClick={() => setExcluded(ALL_SOURCES)}>
               Use every source
             </button>
           )}
@@ -71,42 +79,52 @@ export function SourcesPanel() {
                   <label className={styles.option}>
                     <input type="checkbox" checked={!excluded.backends.includes(backend.id)} onChange={() => setExcluded({ ...excluded, backends: toggled(excluded.backends, backend.id) })} />
                     <span className={styles.optionName}>{backend.label}</span>
-                    <span className={styles.optionMeta}>{backend.available ? plural(layerCount(backend.id), 'run', 'runs') : 'Unavailable'}</span>
+                    <span className={styles.optionMeta}>{backend.available ? plural(layerCount(backend.id), 'layer', 'layers') : 'Unavailable'}</span>
                   </label>
                 </li>
               ))}
             </ul>
           </section>
 
-          <section className={styles.group}>
-            <h3>Branches</h3>
-            {facets.branches.length === 0 && <p className={styles.empty}>No runs yet.</p>}
-            <ul>
-              {facets.branches.map((branch) => (
-                <li key={branch.id}>
-                  <label className={styles.option}>
-                    <input type="checkbox" checked={!excluded.branches.includes(branch.id)} onChange={() => setExcluded({ ...excluded, branches: toggled(excluded.branches, branch.id) })} />
-                    <span className={styles.optionName}>{branch.id}</span>
-                    <span className={styles.optionMeta}>
-                      {plural(branch.layers, 'run', 'runs')} · {ago(branch.latestAtMs, now)}
-                    </span>
-                  </label>
-                  {facets.branches.length > 1 && (
-                    <button type="button" className={styles.only} onClick={() => setExcluded({ ...excluded, branches: facets.branches.map((facet) => facet.id).filter((id) => id !== branch.id) })}>
-                      Only
-                    </button>
-                  )}
-                </li>
-              ))}
-            </ul>
-          </section>
+          <FacetGroup
+            title="Environments"
+            facets={facets.environments.filter((facet) => facets.environments.length > 1 || facet.id !== 'unspecified')}
+            excluded={excluded.environments}
+            label={(id) => environmentLabel(id === 'unspecified' ? null : id)}
+            empty={null}
+            now={now}
+            onToggle={(id) => setExcluded({ ...excluded, environments: toggled(excluded.environments, id) })}
+            onOnly={(id) => setExcluded({ ...excluded, environments: facets.environments.map((facet) => facet.id).filter((facet) => facet !== id) })}
+          />
+
+          <FacetGroup
+            title="Branches"
+            facets={facets.branches}
+            excluded={excluded.branches}
+            label={(id) => id}
+            empty="No layers yet."
+            now={now}
+            onToggle={(id) => setExcluded({ ...excluded, branches: toggled(excluded.branches, id) })}
+            onOnly={(id) => setExcluded({ ...excluded, branches: facets.branches.map((facet) => facet.id).filter((facet) => facet !== id) })}
+          />
+
+          <FacetGroup
+            title="Versions"
+            facets={facets.versions}
+            excluded={excluded.versions}
+            label={versionLabel}
+            empty={null}
+            now={now}
+            onToggle={(id) => setExcluded({ ...excluded, versions: toggled(excluded.versions, id) })}
+            onOnly={(id) => setExcluded({ ...excluded, versions: facets.versions.map((facet) => facet.id).filter((facet) => facet !== id) })}
+          />
 
           <section className={styles.group}>
-            <h3>Runs</h3>
+            <h3>Layers</h3>
             <ul>
-              <Bounded items={layers} size={40} more="Earlier runs">
+              <Bounded items={layers} size={40} more="Earlier layers">
                 {(layer) => {
-                  const off = excluded.backends.includes(layer.backend) || excluded.branches.includes(branchOf(layer));
+                  const off = !contributes(layer, { ...excluded, layers: [] });
                   return (
                     <li key={`${layer.backend}|${layer.id}`}>
                       <label className={styles.option} data-off={off || undefined}>
@@ -115,6 +133,7 @@ export function SourcesPanel() {
                           {layer.packageDir ?? layer.producer}
                           <span className={styles.run}>
                             {layer.live ? 'Running now' : <time title={exactTime(layer.recordedAtMs)}>{ago(layer.recordedAtMs, now)}</time>} · {branchOf(layer)}
+                            {layer.environment && <> · {environmentLabel(layer.environment)}</>}
                             {shortSha(layer.sha) && <> · <code>{shortSha(layer.sha)}</code></>}
                             {layer.freshness === 'modified' && ' · local changes'}
                           </span>
@@ -132,3 +151,38 @@ export function SourcesPanel() {
     </Dialog.Root>
   );
 }
+
+function FacetGroup({ title, facets, excluded, label, empty, now, onToggle, onOnly }: {
+  title: string;
+  facets: readonly SourceFacet[];
+  excluded: readonly string[];
+  label: (id: string) => string;
+  empty: string | null;
+  now: number;
+  onToggle: (id: string) => void;
+  onOnly: (id: string) => void;
+}) {
+  if (!facets.length && empty === null) return null;
+  return (
+    <section className={styles.group}>
+      <h3>{title}</h3>
+      {facets.length === 0 && <p className={styles.empty}>{empty}</p>}
+      <ul>
+        {facets.map((facet) => (
+          <li key={facet.id}>
+            <label className={styles.option}>
+              <input type="checkbox" checked={!excluded.includes(facet.id)} onChange={() => onToggle(facet.id)} />
+              <span className={styles.optionName} title={facet.id}>{label(facet.id)}</span>
+              <span className={styles.optionMeta}>
+                {plural(facet.layers, 'layer', 'layers')} · {ago(facet.latestAtMs, now)}
+              </span>
+            </label>
+            {facets.length > 1 && (
+              <button type="button" className={styles.only} onClick={() => onOnly(facet.id)}>Only</button>
+            )}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}

package/packages/visualizer/src/evidence/spec-page.tsx

@@ -1,16 +1,23 @@
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate, useParams, useSearch } from '@tanstack/react-router';
+import { lazy, Suspense } from 'react';
 
 import { keys, specKey, useAdapter } from '../data/queries';
 import { outlinePath, specFile, specKind } from '../spec-kind';
 import type { SelectCheck } from './check-detail';
-import { DocumentPage } from './document-page';
 import { useEvidence } from './evidence-context';
 import styles from './evidence.module.css';
-import { FeaturePage } from './feature-page';
-import { ModelPage } from './model-page';
 import { Overview } from './overview';
-import { RecordingPage } from './recording-page';
+
+// Each kind of spec has a page with a parser of its own (Gherkin, Quint, DMN); a page loads only the one it shows.
+const DocumentPage = lazy(() => import('./document-page').then((m) => ({ default: m.DocumentPage })));
+const FeaturePage = lazy(() => import('./feature-page').then((m) => ({ default: m.FeaturePage })));
+const ModelPage = lazy(() => import('./model-page').then((m) => ({ default: m.ModelPage })));
+const RecordingPage = lazy(() => import('./recording-page').then((m) => ({ default: m.RecordingPage })));
+
+function Loading({ children }: { children: React.ReactNode }) {
+  return <Suspense fallback={<article className={styles.page}><p className={styles.aside} role="status">Loading…</p></article>}>{children}</Suspense>;
+}
 
 /** One spec tab: its overview, one of its documents, or a recording opened from that document. */
 export function SpecPage() {
@@ -63,15 +70,17 @@ export function SpecPage() {
     const spec = `${evidence.titleOf(file)}: `;
     const label = slot ? (slot.title.startsWith(spec) ? slot.title.slice(spec.length) : slot.title) : 'Recorded test';
     return (
-      <RecordingPage
-        slot={slot}
-        layerId={search.layer}
-        label={label}
-        back={evidence.titleOf(file)}
-        moment={search.moment ?? null}
-        onMoment={(moment, replace) => void navigate({ search: (prev) => ({ ...prev, moment }), replace })}
-        onClose={() => select({ view: null })}
-      />
+      <Loading>
+        <RecordingPage
+          slot={slot}
+          layerId={search.layer}
+          label={label}
+          back={evidence.titleOf(file)}
+          moment={search.moment ?? null}
+          onMoment={(moment, replace) => void navigate({ search: (prev) => ({ ...prev, moment }), replace })}
+          onClose={() => select({ view: null })}
+        />
+      </Loading>
     );
   }
   if (text.isPending) return <article className={styles.page}><p className={styles.aside} role="status">Loading the {kind.one}…</p></article>;
@@ -86,7 +95,5 @@ export function SpecPage() {
     );
   }
   const page = { file, text: text.data, kind, entry, selection: { check: search.check, layer: search.layer }, select };
-  if (kind.id === 'gherkin') return <FeaturePage {...page} />;
-  if (kind.id === 'quint') return <ModelPage {...page} />;
-  return <DocumentPage {...page} />;
+  return <Loading>{kind.id === 'gherkin' ? <FeaturePage {...page} /> : kind.id === 'quint' ? <ModelPage {...page} /> : <DocumentPage {...page} />}</Loading>;
 }

package/packages/visualizer/src/find/Finder.tsx

@@ -9,7 +9,7 @@ import { StatusMark } from '../evidence/marks';
 import { useEvidence } from '../evidence/evidence-context';
 import { kindOfFile } from '../spec-kind';
 import { corpusFrom } from './corpus';
-import { setFinderOpen, setHelpOpen, toggleFinder, useFinderOpen, useHelpOpen, isHelpOpen } from './open';
+import { commandKey, setFinderOpen, setHelpOpen, toggleFinder, useFinderOpen, useHelpOpen, isHelpOpen } from './open';
 import { FIND_GROUPS, indexCorpus, notationOf, rankIndex, splitQuery, type FindDoc, type FindKind, type FindTarget, type Ranked } from './rank';
 import { applySemantic, createWorkerEmbedder, embeddingsAvailable, embedText, textHash, type Embedder } from './semantic';
 import styles from './Finder.module.css';
@@ -36,10 +36,6 @@ const SHORTCUTS: readonly { readonly keys: string; readonly does: string }[] = [
   { keys: 'Home  End', does: 'Start and end of a recording' }
 ];
 
-function commandKey() {
-  return typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent) ? '⌘K' : 'Ctrl+K';
-}
-
 function isTypingTarget(target: EventTarget | null) {
   if (!(target instanceof HTMLElement)) return false;
   const tag = target.tagName;
@@ -299,5 +295,3 @@ function Row({ hit }: { hit: Ranked }) {
     </>
   );
 }
-
-export { commandKey };

package/packages/visualizer/src/find/open.ts

@@ -49,3 +49,7 @@ export function useFinderOpen() {
 export function useHelpOpen() {
   return useSyncExternalStore(subscribeFinder, isHelpOpen, () => false);
 }
+
+export function commandKey() {
+  return typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent) ? '⌘K' : 'Ctrl+K';
+}

package/packages/visualizer/src/live/live-stream.ts

@@ -0,0 +1,204 @@
+import { AtlasChangeSchema, type AtlasChange } from '@crvouga/atlas/schema';
+import { useSyncExternalStore } from 'react';
+
+import { runtimeConfig, runtimeUrl } from '../runtime';
+
+/** What the server tells a viewer as it happens. */
+export type LiveEvent =
+  | { readonly type: 'open' }
+  | { readonly type: 'report'; readonly report: ReportAnnouncement }
+  | { readonly type: 'change'; readonly change: AtlasChange };
+
+/** One announcement that results arrived: enough to say who sent them without asking again. */
+export type ReportAnnouncement = {
+  readonly version: string;
+  readonly totalLayers: number;
+  readonly addedTotal: number;
+  readonly added: readonly {
+    readonly id: string;
+    readonly producer: string;
+    readonly environment?: string | null;
+    readonly branch?: string | null;
+    readonly counts?: Readonly<Record<string, number>>;
+  }[];
+};
+
+/** `connecting` before the first answer, `live` while the stream is open, `reconnecting` after it was lost. */
+export type LiveStatus = 'off' | 'connecting' | 'live' | 'reconnecting';
+
+type Listener = (event: LiveEvent) => void;
+
+/** The server sends a comment every 15 seconds; this long without a word means the connection is dead. */
+const SILENCE_MS = 45_000;
+const BACKOFF_MS = [1_000, 2_000, 5_000, 10_000, 30_000] as const;
+
+type Stream = {
+  readonly url: string;
+  readonly listeners: Set<Listener>;
+  source: EventSource | null;
+  status: LiveStatus;
+  attempts: number;
+  timer: ReturnType<typeof setTimeout> | null;
+  watchdog: ReturnType<typeof setTimeout> | null;
+};
+
+const streams = new Map<string, Stream>();
+const statusListeners = new Set<() => void>();
+
+function setStatus(stream: Stream, status: LiveStatus) {
+  if (stream.status === status) return;
+  stream.status = status;
+  for (const listener of statusListeners) listener();
+}
+
+function emit(stream: Stream, event: LiveEvent) {
+  for (const listener of [...stream.listeners]) {
+    try {
+      listener(event);
+    } catch {
+      // One listener's mistake must not stop the others hearing.
+    }
+  }
+}
+
+function parse(data: string): unknown {
+  try {
+    return JSON.parse(data) as unknown;
+  } catch {
+    return null;
+  }
+}
+
+function connect(stream: Stream) {
+  if (typeof EventSource === 'undefined') return;
+  stream.timer = null;
+  const source = new EventSource(stream.url);
+  stream.source = source;
+  const heard = () => {
+    if (stream.watchdog) clearTimeout(stream.watchdog);
+    stream.watchdog = setTimeout(() => lose(stream), SILENCE_MS);
+  };
+  source.addEventListener('open', () => {
+    heard();
+    stream.attempts = 0;
+    setStatus(stream, 'live');
+    // Anything may have happened while the stream was away, so a (re)connection reads everything again.
+    emit(stream, { type: 'open' });
+  });
+  source.addEventListener('hello', heard);
+  source.addEventListener('ping', heard);
+  source.addEventListener('report', (event) => {
+    heard();
+    const report = parse((event as MessageEvent<string>).data) as ReportAnnouncement | null;
+    if (report && typeof report.version === 'string') emit(stream, { type: 'report', report: { ...report, added: Array.isArray(report.added) ? report.added : [] } });
+  });
+  source.addEventListener('atlas:change', (event) => {
+    heard();
+    const change = AtlasChangeSchema.safeParse(parse((event as MessageEvent<string>).data));
+    if (change.success) emit(stream, { type: 'change', change: change.data });
+  });
+  // The server's heartbeat is a named `ping` event, so a quiet server is told apart from a dead connection.
+  source.addEventListener('error', () => {
+    setStatus(stream, stream.attempts === 0 && stream.status === 'connecting' ? 'connecting' : 'reconnecting');
+    // The browser retries a dropped stream by itself. A refused one (401, 503) it gives up on: retry that here, slowly.
+    if (source.readyState === EventSource.CLOSED) lose(stream);
+  });
+  heard();
+}
+
+function lose(stream: Stream) {
+  if (stream.watchdog) clearTimeout(stream.watchdog);
+  stream.watchdog = null;
+  stream.source?.close();
+  stream.source = null;
+  if (!stream.listeners.size) return;
+  setStatus(stream, 'reconnecting');
+  if (stream.timer) return;
+  const wait = BACKOFF_MS[Math.min(stream.attempts, BACKOFF_MS.length - 1)]!;
+  stream.attempts += 1;
+  stream.timer = setTimeout(() => connect(stream), wait);
+}
+
+function release(stream: Stream) {
+  if (stream.listeners.size) return;
+  if (stream.timer) clearTimeout(stream.timer);
+  if (stream.watchdog) clearTimeout(stream.watchdog);
+  stream.source?.close();
+  streams.delete(stream.url);
+  setStatus(stream, 'off');
+}
+
+/**
+ * Hear what the server at `url` announces. Everything in the page that listens to one address shares one
+ * connection, which is opened with the first listener and closed with the last.
+ */
+export function listenLive(url: string, listener: Listener): () => void {
+  let stream = streams.get(url);
+  if (!stream) {
+    stream = { url, listeners: new Set(), source: null, status: 'connecting', attempts: 0, timer: null, watchdog: null };
+    streams.set(url, stream);
+    stream.listeners.add(listener);
+    connect(stream);
+    for (const notify of statusListeners) notify();
+  } else {
+    stream.listeners.add(listener);
+  }
+  const mine = stream;
+  return () => {
+    mine.listeners.delete(listener);
+    release(mine);
+  };
+}
+
+/** Changes to specs and runs, in the form the data layer already understands. */
+export function listenChanges(url: string, onChange: (change: AtlasChange) => void): () => void {
+  return listenLive(url, (event) => {
+    if (event.type === 'change') onChange(event.change);
+    // A fresh connection may have missed changes while it was away.
+    if (event.type === 'open') onChange({ scope: 'runs', files: [], runIds: [] });
+  });
+}
+
+/** The address of this server's event stream, when the page has one. */
+export const eventsAddress = () => runtimeUrl(runtimeConfig()?.eventsUrl);
+
+function snapshot(): LiveStatus {
+  const url = eventsAddress();
+  return (url && streams.get(url)?.status) || (url ? 'connecting' : 'off');
+}
+
+function subscribeStatus(listener: () => void) {
+  statusListeners.add(listener);
+  return () => statusListeners.delete(listener);
+}
+
+/** Whether the report on screen is being kept up to date by the server. `off` for a static site. */
+export function useLiveStatus(): LiveStatus {
+  return useSyncExternalStore(subscribeStatus, snapshot, () => 'off');
+}
+
+/** Test seam: forget every stream. */
+export function resetLiveStreams() {
+  for (const stream of streams.values()) {
+    stream.listeners.clear();
+    release(stream);
+  }
+  streams.clear();
+}
+
+/**
+ * `act` at once, and then no more than once per `ms` however often it is called: a call made inside the wait
+ * runs when the wait ends. The last word is never lost.
+ */
+export function throttled(act: () => void, ms: number): (() => void) & { cancel: () => void } {
+  let last = -Infinity;
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  const call = () => {
+    if (timer) return;
+    const wait = last + ms - Date.now();
+    if (wait <= 0) { last = Date.now(); act(); return; }
+    timer = setTimeout(() => { timer = null; last = Date.now(); act(); }, wait);
+  };
+  call.cancel = () => { if (timer) clearTimeout(timer); timer = null; };
+  return call;
+}

package/packages/visualizer/src/runtime.ts

@@ -0,0 +1,19 @@
+/**
+ * The address book an Atlas server writes into the page it serves (`window.__ATLAS_CONFIG__`), so one build
+ * of the viewer works for every project and on every host. Under `atlas dev` the Vite dev server writes the
+ * same thing, so the viewer cannot tell the two apart: both are one host, with `/api` behind it.
+ */
+export type RuntimeConfig = {
+  readonly api?: string;
+  readonly reportsUrl?: string;
+  readonly dataUrl?: string;
+  readonly eventsUrl?: string;
+  readonly effective?: boolean;
+};
+
+export const runtimeConfig = (): RuntimeConfig | undefined => (globalThis as { __ATLAS_CONFIG__?: RuntimeConfig }).__ATLAS_CONFIG__;
+
+/** An address from the config, resolved against the page, as an absolute URL. */
+export function runtimeUrl(value: string | undefined): string | undefined {
+  return value ? new URL(value, window.location.href).href : undefined;
+}

package/packages/visualizer/src/state/ui-store.ts

@@ -11,7 +11,7 @@ type UiState = {
   issuesOpen: boolean;
   sourcesOpen: boolean;
   resultFilter: ResultFilter;
-  /** Backends, branches and layers left out of the combined report. */
+  /** Backends, branches, versions, environments and layers left out of the combined report. */
   excluded: SourceSelection;
   saveViewport: (chartId: string, viewport: Viewport) => void;
   setIssuesOpen: (open: boolean) => void;
@@ -38,7 +38,11 @@ export const useUiStore = create<UiState>()(
     {
       name: 'atlas-ui',
       storage: createJSONStorage(() => sessionStorage),
-      partialize: (s) => ({ viewports: s.viewports, excluded: s.excluded, resultFilter: s.resultFilter })
+      partialize: (s) => ({ viewports: s.viewports, excluded: s.excluded, resultFilter: s.resultFilter }),
+      merge: (persisted, current) => {
+        const saved = (persisted ?? {}) as Partial<UiState>;
+        return { ...current, ...saved, excluded: { ...ALL_SOURCES, ...saved.excluded } };
+      }
     }
   )
 );

package/packages/visualizer/vite/atlas-server-proxy.ts

@@ -0,0 +1,36 @@
+import type { Plugin, ProxyOptions } from 'vite';
+
+/** What the viewer is told about the server it is served with: the same words `atlas serve` writes into its page. */
+export const serverPageConfig = { api: './api', reportsUrl: './api/reports', dataUrl: './api/data/', eventsUrl: './api/events', effective: true } as const;
+
+/**
+ * Put the Atlas server behind the dev server. The browser talks to one host; `/api` goes to the server, so the
+ * page, its data and its event stream have one origin in development exactly as they do when deployed.
+ */
+export function atlasServerProxy(target: string): { readonly proxy: Record<string, ProxyOptions> } {
+  return {
+    proxy: {
+      '/api': {
+        target,
+        changeOrigin: false,
+        ws: false,
+        // The event stream stays open for hours: no timeout, and nothing may hold its bytes back.
+        timeout: 0,
+        proxyTimeout: 0,
+        configure: (proxy) => {
+          proxy.on('proxyRes', (response) => {
+            if (String(response.headers['content-type'] ?? '').startsWith('text/event-stream')) response.headers['cache-control'] = 'no-cache, no-transform';
+          });
+        }
+      }
+    }
+  };
+}
+
+/** Write the server's address book into the page the dev server serves. */
+export function atlasServerPage(): Plugin {
+  return {
+    name: 'atlas-server-page',
+    transformIndexHtml: () => [{ tag: 'script', children: `window.__ATLAS_CONFIG__=${JSON.stringify(serverPageConfig)}`, injectTo: 'head-prepend' }]
+  };
+}