SSR

Author: xPaw

build.mjs

@@ -1,20 +1,15 @@
 import * as esbuild from 'esbuild';
 import * as vuePlugin from 'esbuild-plugin-vue3';
-import * as fs from 'fs/promises';
-import * as path from 'path';
 import htmlPlugin from '@chialab/esbuild-plugin-html';
+import { exec } from 'child_process';
+import fs from 'fs/promises';
 
 const isDev = process.argv.includes('--dev');
 
-// Minify and copy api.json
-const interfaces = JSON.parse(await fs.readFile(path.resolve('api.json')));
-
-await fs.writeFile(path.resolve('public', 'api.json'), JSON.stringify(interfaces));
-
 // Esbuild
 /** @type {esbuild.BuildOptions} */
 const esbuildOptions = {
-	entryPoints: ['src/index.html'],
+	entryPoints: ['src/index.html', 'src/ssr.ts'],
 	minify: true,
 	bundle: true,
 	sourcemap: false,
@@ -56,4 +51,24 @@ if (isDev) {
 
 	await context.rebuild();
 	await context.dispose();
+
+	console.log('Running SSR...');
+	exec('node public/ssr.js', async (error, stdout, stderr) => {
+		if (error) {
+			console.error(`SSR Error: ${error}`);
+			return;
+		}
+
+		const ssrHtml = stdout.trim();
+
+		const indexPath = 'public/index.html';
+
+		let indexHtml = await fs.readFile(indexPath, 'utf8');
+		indexHtml = indexHtml.replace('<div id="app"></div>', `<div id="app">${ssrHtml}</div>`);
+
+		await fs.writeFile(indexPath, indexHtml);
+		await fs.unlink("public/ssr.js");
+
+		console.log('SSR HTML injected successfully');
+	});
 }

src/App.ts

@@ -2,9 +2,10 @@ import type { SidebarGroupData, ApiServices, ApiInterface, ApiMethod, ApiMethodP
 
 import { ref, defineComponent, markRaw } from 'vue'
 import Fuse, { type FuseResultMatch, type FuseSortFunctionArg, type IFuseOptions } from 'fuse.js'
-import { getInterfaces } from './interfaces';
 import ApiParameter from './ApiParameter.vue';
 
+import interfacesJson from '../api.json';
+
 interface FuseSearchType {
 	interface: string
 	method: string
@@ -19,6 +20,48 @@ export default defineComponent({
 		ApiParameter,
 	},
 	data() {
+		// @ts-ignore
+		const interfaces = interfacesJson as ApiServices;
+
+		const groupsMap = new Map<string, number>();
+		const groupsData = new Map<number, SidebarGroupData>([
+			// Order of apps here defines the order in the sidebar
+			[0, { name: 'Steam', icon: 'steam.jpg', open: true, methods: {} }],
+			[730, { name: 'Counter-Strike 2', icon: 'cs2.jpg', open: true, methods: {} }],
+			[570, { name: 'Dota 2', icon: 'dota.jpg', open: true, methods: {} }],
+			[1422450, { name: 'Deadlock', icon: 'deadlock.jpg', open: true, methods: {} }],
+			[440, { name: 'Team Fortress 2', icon: 'tf.jpg', open: true, methods: {} }],
+			[620, { name: 'Portal 2', icon: 'portal2.jpg', open: true, methods: {} }],
+			[1046930, { name: 'Dota Underlords', icon: 'underlords.jpg', open: true, methods: {} }],
+			[583950, { name: 'Artifact Classic', icon: 'artifact.jpg', open: true, methods: {} }],
+			[1269260, { name: 'Artifact Foundry', icon: 'artifact.jpg', open: true, methods: {} }],
+
+			// Beta apps
+			[247040, { name: 'Dota 2 Experimental', icon: 'dota.jpg', open: false, methods: {} }],
+			[2305270, { name: 'Dota 2 Staging', icon: 'dota.jpg', open: false, methods: {} }],
+		]);
+
+		for (const interfaceName in interfaces) {
+			const interfaceAppid = interfaceName.match(/_(?<appid>[0-9]+)$/);
+
+			if (interfaceAppid) {
+				const appid = parseInt(interfaceAppid.groups!.appid, 10);
+
+				groupsMap.set(interfaceName, appid);
+
+				let group = groupsData.get(appid);
+
+				if (!group) {
+					groupsData.set(appid, {
+						name: `App ${appid}`,
+						icon: 'steam.jpg',
+						open: false,
+						methods: {}
+					});
+				}
+			}
+		}
+
 		return {
 			userData: {
 				webapi_key: '',
@@ -36,25 +79,10 @@ export default defineComponent({
 			accessTokenVisible: false,
 			currentFilter: '',
 			currentInterface: '',
-			interfaces: {} as ApiServices,
 			fuzzy: new Object as Fuse<FuseSearchType>,
-			groupsMap: new Map<string, number>(),
-			groupsData: new Map<number, SidebarGroupData>([
-				// Order of apps here defines the order in the sidebar
-				[0, { name: 'Steam', icon: 'steam.jpg', open: true, methods: {} }],
-				[730, { name: 'Counter-Strike 2', icon: 'cs2.jpg', open: true, methods: {} }],
-				[570, { name: 'Dota 2', icon: 'dota.jpg', open: true, methods: {} }],
-				[1422450, { name: 'Deadlock', icon: 'deadlock.jpg', open: true, methods: {} }],
-				[440, { name: 'Team Fortress 2', icon: 'tf.jpg', open: true, methods: {} }],
-				[620, { name: 'Portal 2', icon: 'portal2.jpg', open: true, methods: {} }],
-				[1046930, { name: 'Dota Underlords', icon: 'underlords.jpg', open: true, methods: {} }],
-				[583950, { name: 'Artifact Classic', icon: 'artifact.jpg', open: true, methods: {} }],
-				[1269260, { name: 'Artifact Foundry', icon: 'artifact.jpg', open: true, methods: {} }],
-
-				// Beta apps
-				[247040, { name: 'Dota 2 Experimental', icon: 'dota.jpg', open: false, methods: {} }],
-				[2305270, { name: 'Dota 2 Staging', icon: 'dota.jpg', open: false, methods: {} }],
-			]),
+			interfaces,
+			groupsMap,
+			groupsData,
 		}
 	},
 	setup() {
@@ -151,99 +179,74 @@ export default defineComponent({
 		}
 	},
 	mounted(): void {
-		getInterfaces().then((interfaces) => {
-			const flattenedMethods: FuseSearchType[] = [];
+		const flattenedMethods: FuseSearchType[] = [];
 
-			try {
-				this.userData.format = localStorage.getItem('format') || 'json';
-				this.userData.steamid = localStorage.getItem('steamid') || '';
-				this.userData.webapi_key = localStorage.getItem('webapi_key') || '';
-				this.userData.access_token = localStorage.getItem('access_token') || '';
+		try {
+			this.userData.format = localStorage.getItem('format') || 'json';
+			this.userData.steamid = localStorage.getItem('steamid') || '';
+			this.userData.webapi_key = localStorage.getItem('webapi_key') || '';
+			this.userData.access_token = localStorage.getItem('access_token') || '';
 
-				const favoriteStrings = JSON.parse(localStorage.getItem('favorites') || '[]');
+			const favoriteStrings = JSON.parse(localStorage.getItem('favorites') || '[]');
 
-				for (const favorite of favoriteStrings) {
-					const [favoriteInterface, favoriteMethod] = favorite.split('/', 2);
+			for (const favorite of favoriteStrings) {
+				const [favoriteInterface, favoriteMethod] = favorite.split('/', 2);
 
-					if (Object.hasOwn(interfaces, favoriteInterface) &&
-						Object.hasOwn(interfaces[favoriteInterface], favoriteMethod)) {
-						interfaces[favoriteInterface][favoriteMethod].isFavorite = true;
+				if (Object.hasOwn(this.interfaces, favoriteInterface) &&
+					Object.hasOwn(this.interfaces[favoriteInterface], favoriteMethod)) {
+					this.interfaces[favoriteInterface][favoriteMethod].isFavorite = true;
 
-						this.userData.favorites.add(favorite);
-					}
+					this.userData.favorites.add(favorite);
 				}
 			}
-			catch (e) {
-				console.error(e);
-			}
+		}
+		catch (e) {
+			console.error(e);
+		}
 
-			for (const interfaceName in interfaces) {
-				for (const methodName in interfaces[interfaceName]) {
-					const method = interfaces[interfaceName][methodName];
+		for (const interfaceName in this.interfaces) {
+			for (const methodName in this.interfaces[interfaceName]) {
+				const method = this.interfaces[interfaceName][methodName];
 
-					for (const parameter of method.parameters) {
-						parameter._value = '';
+				for (const parameter of method.parameters) {
+					parameter._value = '';
 
-						if (parameter.type === 'bool') {
-							parameter.manuallyToggled = false;
-						}
+					if (parameter.type === 'bool') {
+						parameter.manuallyToggled = false;
 					}
-
-					flattenedMethods.push({
-						interface: interfaceName,
-						method: methodName,
-					} as FuseSearchType);
 				}
 
-				const interfaceAppid = interfaceName.match(/_(?<appid>[0-9]+)$/);
-
-				if (interfaceAppid) {
-					const appid = parseInt(interfaceAppid.groups!.appid, 10);
-
-					this.groupsMap.set(interfaceName, appid);
-
-					let group = this.groupsData.get(appid);
-
-					if (!group) {
-						this.groupsData.set(appid, {
-							name: `App ${appid}`,
-							icon: 'steam.jpg',
-							open: false,
-							methods: {}
-						});
-					}
-				}
+				flattenedMethods.push({
+					interface: interfaceName,
+					method: methodName,
+				} as FuseSearchType);
 			}
+		}
 
-			this.interfaces = interfaces;
+		this.setInterface();
 
+		window.addEventListener('hashchange', () => {
 			this.setInterface();
+		}, false);
+
+		const fuseOptions: IFuseOptions<FuseSearchType> = {
+			shouldSort: true,
+			useExtendedSearch: true,
+			includeMatches: true,
+			minMatchCharLength: 3,
+			threshold: 0.3,
+			keys: [{
+				name: 'interface',
+				weight: 0.3
+			}, {
+				name: 'method',
+				weight: 0.7
+			}]
+		};
+		const fuse = new Fuse<FuseSearchType>(flattenedMethods, fuseOptions);
+		this.fuzzy = markRaw(fuse);
 
-			window.addEventListener('hashchange', () => {
-				this.setInterface();
-			}, false);
-
-			const fuseOptions: IFuseOptions<FuseSearchType> = {
-				shouldSort: true,
-				useExtendedSearch: true,
-				includeMatches: true,
-				minMatchCharLength: 3,
-				threshold: 0.3,
-				keys: [{
-					name: 'interface',
-					weight: 0.3
-				}, {
-					name: 'method',
-					weight: 0.7
-				}]
-			};
-			const fuse = new Fuse<FuseSearchType>(flattenedMethods, fuseOptions);
-			this.fuzzy = markRaw(fuse);
-
-			this.bindGlobalKeybind();
-
-			document.getElementById('loading')!.remove();
-		});
+		this.bindGlobalKeybind();
 	},
 	computed: {
 		sidebarInterfaces(): Map<number, SidebarGroupData> {

src/index.html

@@ -9,7 +9,6 @@
 
 	<title>Steam Web API Documentation and Tester</title>
 
-	<link rel="preload" href="api.json" as="fetch">
 	<script src="documentation.js" defer></script>
 	<link rel="stylesheet" href="style.css">
 	<link rel="shortcut icon" href="/favicon.ico">
@@ -23,32 +22,6 @@
 	<link rel="canonical" href="https://steamapi.xpaw.me/">
 </head>
 <body>
-	<div id="loading">
-		<div class="py-2 no-select header">
-			<div class="container">
-				<div class="row">
-					<div class="col-lg-3">
-						<input type="search" class="search-input form-control me-sm-2" placeholder="Search methods… (type / to focus)">
-					</div>
-					<div class="col-lg-9">
-						<h1><a href="#" class="title">Steam Web API Documentation</a></h1>
-						with &hearts; by <a href="https://xpaw.me">xPaw</a>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="container">
-			<div class="row text-center">
-				<div class="col-lg-12">
-					<div class="my-5">
-						<div class="fs-1">Loading…</div>
-						You need to have a modern browser with javascript enabled.
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-
 	<div id="app"></div>
 </body>
 </html>

src/index.ts

@@ -1,8 +1,8 @@
-import { createApp } from 'vue'
+import { createSSRApp } from 'vue'
 import App from './App.vue';
 
 if ('serviceWorker' in navigator && !('DEV_MODE' in window)) {
 	navigator.serviceWorker.register('serviceworker.js', { scope: './' });
 }
 
-createApp(App).mount('#app');
+createSSRApp(App).mount('#app');

src/interfaces.ts

@@ -35,14 +35,3 @@ export interface ApiMethodParameter {
 	optional: boolean
 	extra?: ApiMethodParameter[]
 }
-
-export async function getInterfaces() {
-	const apiFetch = await fetch('api.json', {
-		method: 'GET',
-		credentials: 'include',
-		mode: 'no-cors',
-	});
-	const interfaces: ApiServices = await apiFetch.json();
-
-	return interfaces;
-}

src/ssr.ts

@@ -0,0 +1,9 @@
+import { createSSRApp } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import App from './App.vue';
+
+const app = createSSRApp(App);
+
+renderToString(app).then((html) => {
+	console.log(html)
+})

src/style.css

@@ -1,9 +1,5 @@
 @import "bootstrap/dist/css/bootstrap.css";
 
-#loading + #app {
-	display: none;
-}
-
 a {
 	color: #1f8bff;
 	text-decoration: none;