mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-04 10:24:02 +00:00
Sameh Khamis
6802c9c8b0
The scene chrome, cockpit, Display controls, command dock, layer panels, Context rail, welcome card and Provider Settings move verbatim into src/ui/views and mount into their hosts before the page is translated and wired. Each view renders the same elements, attributes and text as its template; Vue keeps whitespace between elements as one space, and no view markup sits under a white-space: pre rule. Template asset URLs stay literal, view files are left out of Prettier so the markup is not reflowed, and the Node component loader moves to build/ and is exported as build/register-vue for host test runners. Hosts that do not initialize Core's locale pass localePicker: false instead of editing the markup.
42 lines
1.6 KiB
JavaScript
42 lines
1.6 KiB
JavaScript
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 class="gev-view" data-gev-view="([^"]+)"><\/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<string>}
|
|
*/
|
|
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, empty-attribute values and escaped apostrophes
|
|
// are SSR detail; the DOM is the same as the template's.
|
|
.replace(/<!--\[-->|<!--\]-->|<!---->/g, '')
|
|
.replace(/ ([\w:.-]+)=""/g, ' $1')
|
|
.replaceAll(''', "'");
|
|
output = output.replace(
|
|
host,
|
|
() => `<div class="gev-view" data-gev-view="${name}">${markup}</div>`,
|
|
);
|
|
}
|
|
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'),
|
|
);
|
|
}
|