import assert from 'node:assert/strict'; import process from 'node:process'; import { fileURLToPath } from 'node:url'; import tailwind from '@tailwindcss/vite'; import vue from '@vitejs/plugin-vue'; import { createInertiaApp } from '@inertiajs/vue3'; import { createServer } from 'vite'; import { createSSRApp, h } from 'vue'; import { renderToString } from 'vue/server-renderer'; const serve = process.argv.includes('--serve'); const server = await createServer({ configFile: false, cacheDir: 'node_modules/.vite/welcome-fixture', plugins: [vue(), ...(serve ? [tailwind()] : [])], resolve: { alias: { '@': fileURLToPath(new URL('../../resources/js', import.meta.url)), }, }, server: serve ? { host: '127.0.0.1', port: 4192, strictPort: true, hmr: false } : { middlewareMode: true, hmr: false, watch: null }, appType: 'custom', }); const user = { id: 8, name: 'Alex Morgan', email: 'alex@example.test', }; function makePage(url) { const parsedUrl = new URL(url, 'http://localhost'); const isWelcome = parsedUrl.pathname === '/'; const isAuthenticated = isWelcome && parsedUrl.searchParams.get('auth') === '1'; return { component: isWelcome ? 'Welcome' : 'Destination', url, version: null, clearHistory: false, encryptHistory: false, props: { name: 'KanbanGit', errors: {}, auth: { user: isAuthenticated ? user : null, }, }, }; } if (serve) { server.middlewares.use(async (request, response) => { const page = makePage(request.url); response.setHeader('Vary', 'X-Inertia'); if (request.headers['x-inertia']) { response.setHeader('X-Inertia', 'true'); response.setHeader('Content-Type', 'application/json'); response.end(JSON.stringify(page)); return; } const escaped = JSON.stringify(page) .replaceAll('&', '&') .replaceAll('"', '"') .replaceAll('<', '<'); response.setHeader('Content-Type', 'text/html'); response.end( await server.transformIndexHtml( request.url, '
', ), ); }); await server.listen(); console.log('Welcome fixture ready at http://127.0.0.1:4192/'); } else { try { const { createAppearance } = await server.ssrLoadModule( '/resources/js/composables/useAppearance.ts', ); const { createLocalization } = await server.ssrLoadModule( '/resources/js/lib/localization.ts', ); const { en } = await server.ssrLoadModule( '/resources/js/locales/en.ts', ); const { default: Welcome } = await server.ssrLoadModule( '/resources/js/pages/Welcome.vue', ); const render = async (url, localization = createLocalization()) => { const response = await createInertiaApp({ page: makePage(url), resolve: () => Welcome, render: renderToString, setup: ({ App, props, plugin }) => createSSRApp({ render: () => h(App, props) }) .use(plugin) .use(localization) .use(createAppearance('light')), }); return response.body; }; const guest = await render('/'); assert.match(guest, /Plan the work\. Keep Git context close\./); assert.match(guest, /Configurable workflows/); assert.match(guest, /Structured ticket context/); assert.match(guest, /Repository-aware delivery/); assert.equal((guest.match(/href="\/login"/g) ?? []).length, 2); assert.doesNotMatch(guest, /href="\/dashboard"/); assert.doesNotMatch(guest, /Laravel|Laracasts|Deploy now/); const authenticated = await render('/?auth=1'); assert.equal( (authenticated.match(/href="\/dashboard"/g) ?? []).length, 2, ); assert.doesNotMatch(authenticated, /href="\/login"/); const german = { ...en, 'welcome.title': 'Arbeit planen. Git-Kontext behalten.', 'welcome.action.signIn': 'Bei KanbanGit anmelden', }; const localized = await render( '/', createLocalization({ locale: 'de' }, { de: german }), ); assert.match(localized, /Arbeit planen\. Git-Kontext behalten\./); assert.match(localized, /Bei KanbanGit anmelden/); assert.doesNotMatch( localized, /Plan the work\. Keep Git context close\./, ); console.log('Welcome behavior checks passed.'); } finally { await server.close(); } }