]*\bid="location-bar-toggle"[^>]*)>([\s\S]*?)<\/button>/);
const locationToggleAttributes = Object.fromEntries(
diff --git a/src/mapStackChips.test.mjs b/src/mapStackChips.test.mjs
index db6521d50..c2351b6b6 100644
--- a/src/mapStackChips.test.mjs
+++ b/src/mapStackChips.test.mjs
@@ -1,5 +1,5 @@
import { readShellSource } from './testSupport/readShellSource.mjs';
-import { expandApplicationHtml } from '../build/application-html.js';
+import { renderApplicationHtml } from './testSupport/applicationHtml.mjs';
import { readStylesheet } from './testSupport/readStylesheet.mjs';
// MAP STACK chip row — the dropdown's replacement control surface.
//
@@ -482,8 +482,8 @@ test('the keyboard focus ring survives on the ACTIVE chip', () => {
);
});
-test('the Visual Presets tray owns Map Source and the retired left panel is absent', () => {
- const html = expandApplicationHtml(
+test('the Visual Presets tray owns Map Source and the retired left panel is absent', async () => {
+ const html = await renderApplicationHtml(
readFileSync(new URL('../index.html', import.meta.url), 'utf8'),
);
const ui = readShellSource();
diff --git a/src/overlays/worldOverlay.test.mjs b/src/overlays/worldOverlay.test.mjs
index b2060420a..d2087bc37 100644
--- a/src/overlays/worldOverlay.test.mjs
+++ b/src/overlays/worldOverlay.test.mjs
@@ -1,5 +1,5 @@
import { createNamedMarkers } from '../layers/installations/namedMarkers.js';
-import { expandApplicationHtml } from '../../build/application-html.js';
+import { renderApplicationHtml } from '../testSupport/applicationHtml.mjs';
import { readStylesheet } from '../testSupport/readStylesheet.mjs';
import test from 'node:test';
import assert from 'node:assert/strict';
@@ -447,7 +447,7 @@ test('destroying before the first init leaves pre-init buffering intact', () =>
env.cleanup();
});
-test('lifecycle is idempotent and teardown removes listeners, observers, and DOM', () => {
+test('lifecycle is idempotent and teardown removes listeners, observers, and DOM', async () => {
const env = installMockEnvironment();
assert.equal(env.document.getElementById('world-overlay-detection-surface'), null);
initWorldOverlay(env.viewer);
@@ -465,7 +465,7 @@ test('lifecycle is idempotent and teardown removes listeners, observers, and DOM
assert.deepEqual(root.children, [canvas],
'the overlay root carries only the shared card canvas');
assert.doesNotMatch(
- expandApplicationHtml(readFileSync(new URL('../../index.html', import.meta.url), 'utf8')),
+ await renderApplicationHtml(readFileSync(new URL('../../index.html', import.meta.url), 'utf8')),
/world-overlay-detection-surface/,
'the surface is runtime host-owned, not static markup',
);
diff --git a/src/panelStackLayout.test.mjs b/src/panelStackLayout.test.mjs
index ecccd21a1..8e14c2266 100644
--- a/src/panelStackLayout.test.mjs
+++ b/src/panelStackLayout.test.mjs
@@ -1,5 +1,5 @@
import { readShellSource } from './testSupport/readShellSource.mjs';
-import { expandApplicationHtml } from '../build/application-html.js';
+import { renderApplicationHtml } from './testSupport/applicationHtml.mjs';
import { readStylesheet } from './testSupport/readStylesheet.mjs';
import assert from 'node:assert/strict';
import { readFileSync } from 'node:fs';
@@ -264,8 +264,8 @@ test('expanded left panels integrate their headers with the container shell', ()
);
});
-test('Map Source uses five compact tiles in the bottom Visual Presets tray', () => {
- const html = expandApplicationHtml(readFileSync(new URL('../index.html', import.meta.url), 'utf8'));
+test('Map Source uses five compact tiles in the bottom Visual Presets tray', async () => {
+ const html = await renderApplicationHtml(readFileSync(new URL('../index.html', import.meta.url), 'utf8'));
const css = readStylesheet(new URL('../style.css', import.meta.url));
assert.doesNotMatch(html, /id="stack-panel"/);
@@ -277,8 +277,8 @@ test('Map Source uses five compact tiles in the bottom Visual Presets tray', ()
);
});
-test('expanded right panels highlight the title divider without changing collapsed launchers', () => {
- const html = expandApplicationHtml(readFileSync(new URL('../index.html', import.meta.url), 'utf8'));
+test('expanded right panels highlight the title divider without changing collapsed launchers', async () => {
+ const html = await renderApplicationHtml(readFileSync(new URL('../index.html', import.meta.url), 'utf8'));
const css = readStylesheet(new URL('../style.css', import.meta.url));
assert.match(
diff --git a/src/radioMarkup.test.mjs b/src/radioMarkup.test.mjs
index 1774b1f43..0bf9a9e71 100644
--- a/src/radioMarkup.test.mjs
+++ b/src/radioMarkup.test.mjs
@@ -2,7 +2,7 @@ import { readRealtimeSource } from './testSupport/readRealtimeSource.mjs';
import { GEV_REALTIME_TOOLS } from '../server/providers/openai/tools.js';
import { realtimeInstructions } from '../server/providers/openai/instructions.js';
import { readShellSource } from './testSupport/readShellSource.mjs';
-import { expandApplicationHtml } from '../build/application-html.js';
+import { renderApplicationHtml } from './testSupport/applicationHtml.mjs';
import { readLayerSource } from './testSupport/readLayerSource.mjs';
import { readStylesheet } from './testSupport/readStylesheet.mjs';
import { readFileSync as readRadioSource } from 'node:fs';
@@ -14,7 +14,7 @@ import { createHash } from 'node:crypto';
import { readFileSync } from 'node:fs';
import test from 'node:test';
-const html = expandApplicationHtml(readFileSync(new URL('../index.html', import.meta.url), 'utf8'));
+const html = await renderApplicationHtml(readFileSync(new URL('../index.html', import.meta.url), 'utf8'));
const ui = readShellSource();
const radio = ['playback', 'interaction'].map(name =>
readFileSync(new URL(`./layers/radio/${name}.js`, import.meta.url), 'utf8')
diff --git a/src/reasonableDefaults.test.mjs b/src/reasonableDefaults.test.mjs
index 766079aa4..5484c52d2 100644
--- a/src/reasonableDefaults.test.mjs
+++ b/src/reasonableDefaults.test.mjs
@@ -1,5 +1,5 @@
import { readShellSource } from './testSupport/readShellSource.mjs';
-import { expandApplicationHtml } from '../build/application-html.js';
+import { renderApplicationHtml } from './testSupport/applicationHtml.mjs';
// src/reasonableDefaults.test.mjs
//
// What the console looks like the FIRST time it opens — before any share link,
@@ -46,7 +46,7 @@ import { ShareLinkManager } from './sharelink.js';
// Follow the UI wiring and its extracted preset definitions.
const uiSource = readShellSource()
+ '\n' + fs.readFileSync(new URL('./ui/visualPresets.js', import.meta.url), 'utf8');
-const indexHtml = expandApplicationHtml(fs.readFileSync(new URL('../index.html', import.meta.url), 'utf8'));
+const indexHtml = await renderApplicationHtml(fs.readFileSync(new URL('../index.html', import.meta.url), 'utf8'));
const shareSource = fs.readFileSync(new URL('./sharelink.js', import.meta.url), 'utf8');
/** Slice ui.js between two literal anchors, so a pin reads one method, not the file. */
diff --git a/src/standalone/application.js b/src/standalone/application.js
index c73daf374..42def3266 100644
--- a/src/standalone/application.js
+++ b/src/standalone/application.js
@@ -8,6 +8,7 @@ import { createStandaloneData } from './data.js';
import { createStandaloneTools } from './tools.js';
import { resolveLocale, applyDocumentLanguage } from '../i18n/locale.js';
import { applyDocumentTranslations, setLocale } from '../i18n/index.js';
+import { mountApplicationViews } from '../ui/views/index.js';
import { createGoogleTokenSource } from '../maps/googleTokens.js';
// The existing controls and layer catalog contain page-scoped state.
@@ -33,6 +34,8 @@ export function createStandaloneApplication({
const activeLocale = resolveLocale();
setLocale(activeLocale);
applyDocumentLanguage(document, activeLocale);
+ // Views render the page's markup; translation and wiring read it.
+ mountApplicationViews(document);
applyDocumentTranslations(document);
const loadingScreen = document.getElementById('loading-screen');
const loaderStatus = loadingScreen.querySelector('.loader-status');
diff --git a/src/streetLevelMarkup.test.mjs b/src/streetLevelMarkup.test.mjs
index 8d316c120..bc1716f14 100644
--- a/src/streetLevelMarkup.test.mjs
+++ b/src/streetLevelMarkup.test.mjs
@@ -3,13 +3,13 @@ import fs from 'node:fs';
import path from 'node:path';
import test from 'node:test';
import { fileURLToPath } from 'node:url';
-import { expandApplicationHtml } from '../build/application-html.js';
+import { renderApplicationHtml } from './testSupport/applicationHtml.mjs';
import { readStylesheet } from './testSupport/readStylesheet.mjs';
const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
const read = (file) => fs.readFileSync(path.join(ROOT, file), 'utf8');
-const html = expandApplicationHtml(read('index.html'));
+const html = await renderApplicationHtml(read('index.html'));
const css = readStylesheet(path.join(ROOT, 'style.css'));
const panelCss = read('src/ui/styles/street-level.css');
const panelChrome = read('src/ui/panelChrome.js');
diff --git a/src/testSupport/applicationHtml.mjs b/src/testSupport/applicationHtml.mjs
new file mode 100644
index 000000000..eb9429549
--- /dev/null
+++ b/src/testSupport/applicationHtml.mjs
@@ -0,0 +1,40 @@
+import { readFileSync } from 'node:fs';
+import { createPinia } from 'pinia';
+import { createSSRApp } from 'vue';
+import { renderToString } from 'vue/server-renderer';
+import { expandApplicationHtml } from '../../build/application-html.js';
+import { APPLICATION_VIEWS } from '../ui/views/index.js';
+
+const HOST = /
<\/div>/g;
+
+/**
+ * Expand application markup as the browser shows it once views are mounted:
+ * static templates inline, and each view rendered into its host. Markup tests
+ * read this instead of the raw template expansion.
+ * @param {string} html Document with `gev:template` markers.
+ * @returns {Promise
}
+ */
+export async function renderApplicationHtml(html) {
+ let output = expandApplicationHtml(html);
+ for (const [host, name] of [...output.matchAll(HOST)]) {
+ const view = APPLICATION_VIEWS[name];
+ if (!view) throw new Error(`Unknown application view: ${name}`);
+ const markup = (await renderToString(createSSRApp(view).use(createPinia())))
+ // Hydration markers and empty-attribute values are SSR detail; the
+ // DOM is the same as the template's.
+ .replace(/||/g, '')
+ .replace(/ ([\w:.-]+)=""/g, ' $1');
+ output = output.replace(
+ host,
+ `${markup}
`,
+ );
+ }
+ return output;
+}
+
+/** The standalone page's markup with every view rendered. */
+export function readApplicationHtml() {
+ return renderApplicationHtml(
+ readFileSync(new URL('../../index.html', import.meta.url), 'utf8'),
+ );
+}
diff --git a/src/testSupport/vueLoader.mjs b/src/testSupport/vueLoader.mjs
index 3a3bb3cd9..bb2111678 100644
--- a/src/testSupport/vueLoader.mjs
+++ b/src/testSupport/vueLoader.mjs
@@ -1,6 +1,7 @@
import { readFile } from 'node:fs/promises';
import { fileURLToPath } from 'node:url';
import { compileScript, compileTemplate, parse } from 'vue/compiler-sfc';
+import { VUE_COMPILER_OPTIONS } from '../../build/vueOptions.js';
/**
* Compile a single-file component to an ES module for Node's test runner.
@@ -11,7 +12,11 @@ export function compileVueModule(source, filename) {
if (errors.length) throw errors[0];
const id = filename;
if (descriptor.scriptSetup) {
- return compileScript(descriptor, { id, inlineTemplate: true }).content;
+ return compileScript(descriptor, {
+ id,
+ inlineTemplate: true,
+ templateOptions: { compilerOptions: VUE_COMPILER_OPTIONS },
+ }).content;
}
const script = descriptor.script
? compileScript(descriptor, { id, genDefaultAs: '__sfc__' }).content
@@ -22,6 +27,7 @@ export function compileVueModule(source, filename) {
source: descriptor.template.content,
filename,
id,
+ compilerOptions: VUE_COMPILER_OPTIONS,
});
if (compiled.errors.length) throw compiled.errors[0];
template = compiled.code;
diff --git a/src/tooling/applicationHtml.test.mjs b/src/tooling/applicationHtml.test.mjs
index 783c737a4..b895552b3 100644
--- a/src/tooling/applicationHtml.test.mjs
+++ b/src/tooling/applicationHtml.test.mjs
@@ -1,11 +1,17 @@
import test from 'node:test';
import assert from 'node:assert/strict';
import { readFileSync } from 'node:fs';
-import { expandApplicationHtml, APPLICATION_TEMPLATES } from '../../build/application-html.js';
+import {
+ expandApplicationHtml,
+ APPLICATION_TEMPLATES,
+} from '../../build/application-html.js';
+import { APPLICATION_VIEW_NAMES } from '../../build/applicationViews.js';
+import { APPLICATION_VIEWS } from '../ui/views/index.js';
+import { readApplicationHtml } from '../testSupport/applicationHtml.mjs';
-test('the standalone document expands every component once and preserves unique element ids', () => {
+test('the standalone document expands every component once and preserves unique element ids', async () => {
const source = readFileSync(new URL('../../index.html', import.meta.url), 'utf8');
- const html = expandApplicationHtml(source);
+ const html = await readApplicationHtml();
assert.equal([...source.matchAll(/gev:template /g)].length, APPLICATION_TEMPLATES.length);
assert.doesNotMatch(html, /gev:template/);
const ids = [...html.matchAll(/\sid="([^"]+)"/g)].map(match => match[1]);
@@ -15,8 +21,21 @@ test('the standalone document expands every component once and preserves unique
});
test('component selection includes only requested markup and refuses filesystem traversal', () => {
- const html = expandApplicationHtml('\n');
- assert.match(html, /id="first-run-launcher"/);
+ const html = expandApplicationHtml('\n');
+ assert.match(html, /id="loading-screen"/);
assert.doesNotMatch(html, /id="cesiumContainer"/);
assert.throws(() => expandApplicationHtml(''), /Unknown application template/);
});
+
+test('views expand to mount hosts, the loading screen stays static, and every view is registered', () => {
+ assert.deepEqual(Object.keys(APPLICATION_VIEWS).sort(), [...APPLICATION_VIEW_NAMES].sort());
+ for (const name of APPLICATION_VIEW_NAMES) {
+ assert.ok(APPLICATION_TEMPLATES.includes(name), name);
+ assert.equal(
+ expandApplicationHtml(`\n`),
+ `\n`,
+ );
+ }
+ // It paints before any script runs.
+ assert.ok(!APPLICATION_VIEW_NAMES.includes('hud-loading'));
+});
diff --git a/src/ui/applicationShell.js b/src/ui/applicationShell.js
index cbbd0a7bd..f0f9d4c7f 100644
--- a/src/ui/applicationShell.js
+++ b/src/ui/applicationShell.js
@@ -52,7 +52,7 @@ import {
} from '../i18n/index.js';
import { applyLocaleChoice, mountLocalePicker } from './localePicker.js';
import { PanelNavigation } from './panelNavigation.js';
-import { createUiRuntime } from './vueRuntime.js';
+import { applicationPinia, createUiRuntime } from './vueRuntime.js';
/**
* Central UI orchestrator for the God's Eye View application.
@@ -136,7 +136,7 @@ export class StyleManager extends ShellFacade {
this._mobileShell?.sharedCollapsed(panelId),
});
// Vue views share this runtime and its stores; dispose unmounts them.
- this._ui = createUiRuntime();
+ this._ui = createUiRuntime({ pinia: applicationPinia() });
this._feedback = new ShellFeedback({
readLayers: () => this._dataManager?.getAll?.() || [],
});
diff --git a/src/ui/localSdrMarkup.test.mjs b/src/ui/localSdrMarkup.test.mjs
index fa2f8a464..d4db24633 100644
--- a/src/ui/localSdrMarkup.test.mjs
+++ b/src/ui/localSdrMarkup.test.mjs
@@ -2,11 +2,11 @@ import test from 'node:test';
import assert from 'node:assert/strict';
import { readFileSync } from 'node:fs';
-import { expandApplicationHtml } from '../../build/application-html.js';
+import { renderApplicationHtml } from '../testSupport/applicationHtml.mjs';
import { createBrowserViteConfig } from '../../build/vite.js';
import { R820T_GAIN_STEPS_DB } from '../sdr/gain.js';
-const html = expandApplicationHtml(
+const html = await renderApplicationHtml(
readFileSync(new URL('../../index.html', import.meta.url), 'utf8'),
);
const css = readFileSync(
diff --git a/src/ui/styles/kit.css b/src/ui/styles/kit.css
index ef65c1215..2aa04e077 100644
--- a/src/ui/styles/kit.css
+++ b/src/ui/styles/kit.css
@@ -98,3 +98,9 @@
font: 600 9px/14px var(--font-mono);
text-align: center;
}
+
+/* Application view hosts (src/ui/views): the view's own elements lay out as
+ children of the page, as the static markup they replace did. */
+.gev-view {
+ display: contents;
+}
diff --git a/src/ui/views/index.js b/src/ui/views/index.js
new file mode 100644
index 000000000..80796503c
--- /dev/null
+++ b/src/ui/views/index.js
@@ -0,0 +1,27 @@
+import { createApp } from 'vue';
+import { applicationPinia } from '../vueRuntime.js';
+
+/**
+ * Application views by template name (build/applicationViews.js lists the
+ * same names). Each renders the markup its static template held.
+ */
+export const APPLICATION_VIEWS = Object.freeze({});
+
+const mounted = new WeakSet();
+
+/**
+ * Render every application view into its host. Views belong to the page, as
+ * their static markup did, so they are never unmounted. Call before anything
+ * reads or translates the page; repeated calls are harmless.
+ * @param {Document} [doc] Page document.
+ */
+export function mountApplicationViews(doc = globalThis.document) {
+ for (const host of doc?.querySelectorAll?.('[data-gev-view]') ?? []) {
+ if (mounted.has(host)) continue;
+ const name = host.getAttribute('data-gev-view');
+ const view = APPLICATION_VIEWS[name];
+ if (!view) throw new Error(`Unknown application view: ${name}`);
+ createApp(view).use(applicationPinia()).mount(host);
+ mounted.add(host);
+ }
+}
diff --git a/src/ui/vueRuntime.js b/src/ui/vueRuntime.js
index 1a6ea0091..eb3950d9b 100644
--- a/src/ui/vueRuntime.js
+++ b/src/ui/vueRuntime.js
@@ -1,13 +1,25 @@
import { createApp } from 'vue';
import { createPinia } from 'pinia';
+let pagePinia = null;
+
/**
- * Create the application's Vue runtime: one Pinia instance shared by every
- * view the shell mounts, and the mounts themselves for teardown.
+ * The page's Pinia instance, shared by the application views and the shell,
+ * so a view and a shell control read the same stores.
+ * @returns {import('pinia').Pinia}
+ */
+export function applicationPinia() {
+ pagePinia ??= createPinia();
+ return pagePinia;
+}
+
+/**
+ * Create a Vue runtime: one Pinia instance shared by every view it mounts,
+ * and the mounts themselves for teardown.
+ * @param {{pinia?: import('pinia').Pinia}} [options]
* @returns {{pinia: import('pinia').Pinia, mount: Function, destroy: Function}}
*/
-export function createUiRuntime() {
- const pinia = createPinia();
+export function createUiRuntime({ pinia = createPinia() } = {}) {
const apps = new Set();
return {
pinia,