Skip to content

Commit

Permalink
reproduce wrong early hints for HTML-only (#1574)
Browse files Browse the repository at this point in the history
  • Loading branch information
brillout committed Mar 28, 2024
1 parent e0596ba commit a982075
Show file tree
Hide file tree
Showing 6 changed files with 86 additions and 14 deletions.
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
import { testRun } from './.testRun'
testRun('npm run preview', true)
testRun('npm run prod', true)
22 changes: 11 additions & 11 deletions examples/render-modes/.testRun.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ export { testRun }
const HMR_SLEEP = 500

// TODO:v1/release: remove non-V1 design case
function testRun(cmd: 'npm run dev' | 'npm run preview', isV1Design?: true) {
function testRun(cmd: 'npm run dev' | 'npm run prod' | 'npm run preview', isV1Design?: true) {
run(cmd, { isFlaky: true })

const isPreview = cmd === 'npm run preview'
const isProd = cmd !== 'npm run dev'

const hash = /[a-zA-Z0-9_-]+/
const path = /[^\>]+/
Expand All @@ -31,7 +31,7 @@ function testRun(cmd: 'npm run dev' | 'npm run preview', isV1Design?: true) {
const html = await fetchHtml('/html-only')
expect(html).toContain('<h1>HTML-only</h1>')
expect(html).toContain('This page has zero browser-side JavaScript.')
if (isPreview) {
if (isProd) {
expect(html).not.toContain('<script')
expect(html).not.toContain('as="rel="modulepreload""')
expect(html).not.toContain('as="script"')
Expand Down Expand Up @@ -67,7 +67,7 @@ function testRun(cmd: 'npm run dev' | 'npm run preview', isV1Design?: true) {
await page.goto(getServerUrl() + '/html-only')
await testColor('orange')
})
if (!isPreview) {
if (!isProd) {
test('HTML-only - HMR', async () => {
{
const url = getServerUrl() + '/html-only'
Expand Down Expand Up @@ -127,7 +127,7 @@ function testRun(cmd: 'npm run dev' | 'npm run preview', isV1Design?: true) {
await clickCounter()

expect(await page.textContent('button')).toContain('Counter 1')
if (!isPreview) {
if (!isProd) {
{
expect(await page.textContent('h1')).toBe('SPA')
await sleep(HMR_SLEEP)
Expand Down Expand Up @@ -162,7 +162,7 @@ function testRun(cmd: 'npm run dev' | 'npm run preview', isV1Design?: true) {
{
const html = await fetchHtml('/html-js')
expect(html).toContain('This page is rendered to HTML and has only few lines of browser-side JavaScript.')
if (isPreview) {
if (isProd) {
const jsImport = isV1Design
? partRegex`<script src="/assets/entries/pages_html-js_client.${hash}.js" type="module" async></script>`
: partRegex`<script src="/assets/entries/pages_html-js_default.page.client.${hash}.js" type="module" async>`
Expand All @@ -178,7 +178,7 @@ function testRun(cmd: 'npm run dev' | 'npm run preview', isV1Design?: true) {
await page.goto(getServerUrl() + '/html-js')
await clickCounter()
})
if (!isPreview) {
if (!isProd) {
test('HTML + JS - HMR', async () => {
expect(await page.textContent('button')).toContain('Counter 1')
// JS auto-reload
Expand Down Expand Up @@ -229,7 +229,7 @@ function testRun(cmd: 'npm run dev' | 'npm run preview', isV1Design?: true) {
await clickCounter()
expect(await page.textContent('button')).toContain('Counter 1')

if (!isPreview) {
if (!isProd) {
expect(await page.textContent('button')).toContain('Counter 1')
{
expect(await page.textContent('h1')).toBe('SSR')
Expand Down Expand Up @@ -265,14 +265,14 @@ function testRun(cmd: 'npm run dev' | 'npm run preview', isV1Design?: true) {
{
const html = await fetchHtml('/')
expect(html.split('text/css').length).toBe(2)
if (!isPreview) {
if (!isProd) {
expect(html).toContain('<link rel="stylesheet" type="text/css" href="/renderer/PageLayout.css')
}
}
for (const page of ['html-only', 'html-js', 'spa', 'ssr']) {
const html = await fetchHtml(`/${page}`)
expect(html.split('text/css').length).toBe(3)
if (!isPreview) {
if (!isProd) {
expect(html).toContain('<link rel="stylesheet" type="text/css" href="/renderer/PageLayout.css')
expect(html).toContain(`<link rel="stylesheet" type="text/css" href="/pages/${page}/index.css`)
}
Expand Down Expand Up @@ -303,7 +303,7 @@ function testRun(cmd: 'npm run dev' | 'npm run preview', isV1Design?: true) {
})
}
function testClientRouting(html: string) {
if (isPreview) {
if (isProd) {
expect(html).toMatch(
partRegex`<script src="/assets/entries/entry-client-routing.${hash}.js" type="module" async>`
)
Expand Down
8 changes: 6 additions & 2 deletions examples/render-modes/package.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
{
"scripts": {
"dev": "vite",
"dev": "npm run server:dev",
"prod": "npm run build && npm run server:prod",
"build": "vite build",
"preview": "vite build && vite preview"
"server:dev": "node ./server",
"server:prod": "cross-env NODE_ENV=production node ./server"
},
"dependencies": {
"@vitejs/plugin-react": "^4.2.1",
"compression": "^1.7.4",
"express": "^4.18.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"vite": "^5.0.10",
Expand Down
54 changes: 54 additions & 0 deletions examples/render-modes/server/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
// This file isn't processed by Vite, see https://github.com/vikejs/vike/issues/562
// Consequently:
// - When changing this file, you needed to manually restart your server for your changes to take effect.
// - To use your environment variables defined in your .env files, you need to install dotenv, see https://vike.dev/env
// - To use your path aliases defined in your vite.config.js, you need to tell Node.js about them, see https://vike.dev/path-aliases

import express from 'express'
import compression from 'compression'
import { renderPage } from 'vike/server'
import { root } from './root.js'
const isProduction = process.env.NODE_ENV === 'production'

startServer()

async function startServer() {
const app = express()

app.use(compression())

if (isProduction) {
const sirv = (await import('sirv')).default
app.use(sirv(`${root}/dist/client`))
} else {
const vite = await import('vite')
const viteDevMiddleware = (
await vite.createServer({
root,
server: { middlewareMode: true }
})
).middlewares
app.use(viteDevMiddleware)
}

app.get('*', async (req, res, next) => {
const pageContextInit = {
urlOriginal: req.originalUrl
}
const pageContext = await renderPage(pageContextInit)
const { httpResponse } = pageContext
if (!httpResponse) {
return next()
} else {
const { statusCode, headers, earlyHints } = httpResponse
if (res.writeEarlyHints) res.writeEarlyHints({ link: earlyHints.map((e) => e.earlyHintLink) })
headers.forEach(([name, value]) => res.setHeader(name, value))
res.status(statusCode)
httpResponse.pipe(res)
}
})

const port = process.env.PORT || 3000
app.listen(port)
console.log(`Server running at http://localhost:${port}`)
}
8 changes: 8 additions & 0 deletions examples/render-modes/server/root.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export { root }

// https://stackoverflow.com/questions/46745014/alternative-for-dirname-in-node-when-using-the-experimental-modules-flag/50052194#50052194

import { dirname } from 'path'
import { fileURLToPath } from 'url'
const __dirname = dirname(fileURLToPath(import.meta.url))
const root = `${__dirname}/..`
6 changes: 6 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit a982075

Please sign in to comment.