feat: cross platform page system

Author: IMB11

apps/app-frontend/src/routes.js

@@ -4,6 +4,7 @@ import * as Pages from '@/pages'
 import * as Instance from '@/pages/instance'
 import * as Library from '@/pages/library'
 import * as Project from '@/pages/project'
+import { sharedRoutes } from '@modrinth/ui/pages'
 
 /**
  * Configures application routing. Add page to pages/index and then add to route table here.
@@ -170,6 +171,8 @@ export default new createRouter({
 				},
 			],
 		},
+		// Shared routes from @modrinth/ui
+		...sharedRoutes,
 	],
 	linkActiveClass: 'router-link-active',
 	linkExactActiveClass: 'router-link-exact-active',

apps/frontend/nuxt.config.ts

@@ -11,6 +11,12 @@ import Papa from 'papaparse'
 import { basename, relative, resolve } from 'pathe'
 import svgLoader from 'vite-svg-loader'
 
+import {
+	ServersOverviewPage,
+	createComponentResolver,
+	sharedRoutes,
+	toNuxtPages,
+} from '@modrinth/ui/pages'
 import type { GeneratedState } from './src/composables/generated'
 
 const STAGING_API_URL = 'https://staging-api.modrinth.com/v2/'
@@ -303,6 +309,17 @@ export default defineNuxtConfig({
 					children: [],
 				}),
 			)
+
+			// Shared routes
+			const uiPackagePath = resolve(__dirname, '../../packages/ui')
+			const componentResolver = createComponentResolver(uiPackagePath)
+
+			componentResolver.register(ServersOverviewPage, 'src/pages/servers/manage.vue')
+
+			const nuxtPages = toNuxtPages(sharedRoutes, (component) =>
+				componentResolver.resolve(component),
+			)
+			routes.push(...nuxtPages)
 		},
 		async 'vintl:extendOptions'(opts) {
 			opts.locales ??= []

apps/frontend/src/pages/servers/manage/index.vue renamed to apps/frontend/src/pages/servers/manage/index_old.vue

@@ -4,6 +4,17 @@
 	"private": true,
 	"main": "./index.ts",
 	"types": "./index.ts",
+	"exports": {
+		".": {
+			"types": "./index.ts",
+			"default": "./index.ts"
+		},
+		"./pages": {
+			"types": "./src/pages/index.ts",
+			"default": "./src/pages/index.ts"
+		},
+		"./src/*": "./src/*"
+	},
 	"scripts": {
 		"lint": "eslint . && prettier --check .",
 		"fix": "eslint . --fix && prettier --write .",

packages/ui/package.json

@@ -0,0 +1,15 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+export const ServersOverviewPage = () => import('./servers/manage.vue')
+export { createComponentResolver, toNuxtPages } from './route-helpers'
+
+export const sharedRoutes: RouteRecordRaw[] = [
+	{
+		path: '/servers/manage',
+		name: 'Servers - Modrinth',
+		component: ServersOverviewPage,
+		meta: {
+			breadcrumb: [{ name: 'Servers' }],
+		},
+	},
+]

packages/ui/src/pages/index.ts

@@ -0,0 +1,49 @@
+import { resolve } from 'pathe'
+import type { RouteRecordRaw } from 'vue-router'
+
+interface NuxtPage {
+	name?: string
+	path: string
+	file: string
+	children?: NuxtPage[]
+	meta?: Record<string, any>
+	props?: boolean | Record<string, any>
+}
+
+export function toNuxtPages(
+	routes: RouteRecordRaw[],
+	componentToFilePath: (component: any) => string,
+): NuxtPage[] {
+	return routes.map((route) => {
+		const nuxtPage: NuxtPage = {
+			name: route.name as string,
+			path: route.path,
+			file: componentToFilePath(route.component),
+			meta: route.meta,
+			props: route.props,
+		}
+
+		if (route.children) {
+			nuxtPage.children = toNuxtPages(route.children, componentToFilePath)
+		}
+
+		return nuxtPage
+	})
+}
+
+export function createComponentResolver(baseDir: string) {
+	const componentMap = new Map<any, string>()
+
+	return {
+		register(component: any, relativePath: string) {
+			componentMap.set(component, resolve(baseDir, relativePath))
+		},
+		resolve(component: any): string {
+			const path = componentMap.get(component)
+			if (!path) {
+				throw new Error(`Component not registered: ${component}`)
+			}
+			return path
+		},
+	}
+}

packages/ui/src/pages/route-helpers.ts

@@ -0,0 +1 @@
+<template>Hello world!</template>