Skip to content

Commit

Permalink
remove injectPreloadAssets() (#262, #419, #420, #510)
Browse files Browse the repository at this point in the history
  • Loading branch information
brillout committed Nov 22, 2022
1 parent b150400 commit fb86b16
Show file tree
Hide file tree
Showing 13 changed files with 162 additions and 258 deletions.
46 changes: 0 additions & 46 deletions examples/custom-preload/renderer/_default.page.server.jsx

This file was deleted.

59 changes: 59 additions & 0 deletions examples/custom-preload/renderer/_default.page.server.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
export { render }
export { passToClient }

import React from 'react'
import { renderToString } from 'react-dom/server'
import { escapeInject, dangerouslySkipEscape, type PreloadFilterEntry } from '../../../vite-plugin-ssr/node'
// @ts-ignore
import { PageLayout } from './PageLayout'

// See https://vite-plugin-ssr.com/data-fetching
const passToClient = ['pageProps']

async function render(pageContext: any) {
const { Page, pageProps } = pageContext
const { preloadStrategy } = pageContext.exports
const pageHtml = renderToString(
<PageLayout>
<Page {...pageProps} />
</PageLayout>
)

const documentHtml = escapeInject`<!DOCTYPE html>
<html>
<body>
<div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>
</body>
</html>`

return {
documentHtml,
preloadFilter(assets: PreloadFilterEntry[]) {
return assets.map((asset) => {
if (!asset.isPreload) {
return asset
}

let dontInject = false

if (preloadStrategy === 'DISABLED') {
dontInject = true
}

if (preloadStrategy === 'ONLY_FONT' && asset.isPreload && asset.assetType !== 'font') {
dontInject = true
}

if (dontInject) {
return {
...asset,
inject: false
}
}

// Default vite-plugin-ssr's preloading behavior
return asset
})
}
}
}
32 changes: 10 additions & 22 deletions test/preload/dev.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import path from 'path'

beforeAll(async () => {
await devApp()
})
}, 10 * 1000)

describe('preload tags', () => {
it('Page 1', async () => {
Expand All @@ -31,22 +31,18 @@ describe('preload tags', () => {
expect(body).toMatchInlineSnapshot(
`
"<!DOCTYPE html>
<html>
<head><link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/renderer/PageLayout.css?direct\\">
</head>
<html><head><link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/renderer/PageLayout.css?direct\\"></head>
<body>
<div id=\\"page-view\\"><div style=\\"display:flex;max-width:900px;margin:auto\\"><div style=\\"padding:20px;padding-top:20px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;line-height:1.8em\\"><div style=\\"margin-top:20px;margin-bottom:10px\\"><a href=\\"/\\"><img src=\\"/renderer/logo.svg\\" height=\\"64\\" width=\\"64\\"/></a></div><a class=\\"navitem\\" href=\\"/\\">Preload Default</a><a class=\\"navitem\\" href=\\"/preload-disabled\\">Preload Disabled</a><a class=\\"navitem\\" href=\\"/preload-font-only\\">Preload Only Font</a></div><div style=\\"padding:20px;padding-bottom:50px;border-left:2px solid #eee;min-height:100vh\\"><h1>Default</h1><p>This page showcases the default preloading strategy: in production, both the image and the font are preloaded.</p></div></div></div>
<script id=\\"vite-plugin-ssr_pageContext\\" type=\\"application/json\\">{\\"pageContext\\":{\\"_pageId\\":\\"/pages/index\\",\\"pageProps\\":\\"!undefined\\"}}</script><script type=\\"module\\" async>
<script type=\\"module\\" async>
import RefreshRuntime from \\"/@react-refresh\\"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
import(\\"/@vite/client\\");
import(\\"/@fs/$ROOT/vite-plugin-ssr/client/entry.ts\\");
</script><link rel=\\"modulepreload\\" href=\\"/@fs/$ROOT/vite-plugin-ssr/client/entry.ts\\" as=\\"script\\" type=\\"text/javascript\\"></body>
</script><link rel=\\"modulepreload\\" href=\\"/@fs/$ROOT/vite-plugin-ssr/client/entry.ts\\" as=\\"script\\" type=\\"text/javascript\\"><script id=\\"vite-plugin-ssr_pageContext\\" type=\\"application/json\\">{\\"pageContext\\":{\\"_pageId\\":\\"/pages/index\\",\\"pageProps\\":\\"!undefined\\"}}</script></body>
</html>"
`
)
Expand Down Expand Up @@ -74,22 +70,18 @@ describe('preload tags', () => {
expect(body).toMatchInlineSnapshot(
`
"<!DOCTYPE html>
<html>
<head><link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/renderer/PageLayout.css?direct\\">
</head>
<html><head><link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/renderer/PageLayout.css?direct\\"></head>
<body>
<div id=\\"page-view\\"><div style=\\"display:flex;max-width:900px;margin:auto\\"><div style=\\"padding:20px;padding-top:20px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;line-height:1.8em\\"><div style=\\"margin-top:20px;margin-bottom:10px\\"><a href=\\"/\\"><img src=\\"/renderer/logo.svg\\" height=\\"64\\" width=\\"64\\"/></a></div><a class=\\"navitem\\" href=\\"/\\">Preload Default</a><a class=\\"navitem\\" href=\\"/preload-disabled\\">Preload Disabled</a><a class=\\"navitem\\" href=\\"/preload-font-only\\">Preload Only Font</a></div><div style=\\"padding:20px;padding-bottom:50px;border-left:2px solid #eee;min-height:100vh\\"><h1>Disabled</h1><p>This page showcases completely disabled preloading: the image nor the font are preloaded.</p></div></div></div>
<script id=\\"vite-plugin-ssr_pageContext\\" type=\\"application/json\\">{\\"pageContext\\":{\\"_pageId\\":\\"/pages/preload-disabled\\",\\"pageProps\\":\\"!undefined\\"}}</script><script type=\\"module\\" async>
<script type=\\"module\\" async>
import RefreshRuntime from \\"/@react-refresh\\"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
import(\\"/@vite/client\\");
import(\\"/@fs/$ROOT/vite-plugin-ssr/client/entry.ts\\");
</script><link rel=\\"modulepreload\\" href=\\"/@fs/$ROOT/vite-plugin-ssr/client/entry.ts\\" as=\\"script\\" type=\\"text/javascript\\"></body>
</script><link rel=\\"modulepreload\\" href=\\"/@fs/$ROOT/vite-plugin-ssr/client/entry.ts\\" as=\\"script\\" type=\\"text/javascript\\"><script id=\\"vite-plugin-ssr_pageContext\\" type=\\"application/json\\">{\\"pageContext\\":{\\"_pageId\\":\\"/pages/preload-disabled\\",\\"pageProps\\":\\"!undefined\\"}}</script></body>
</html>"
`
)
Expand Down Expand Up @@ -117,22 +109,18 @@ describe('preload tags', () => {
expect(body).toMatchInlineSnapshot(
`
"<!DOCTYPE html>
<html>
<head><link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/renderer/PageLayout.css?direct\\">
</head>
<html><head><link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/renderer/PageLayout.css?direct\\"></head>
<body>
<div id=\\"page-view\\"><div style=\\"display:flex;max-width:900px;margin:auto\\"><div style=\\"padding:20px;padding-top:20px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;line-height:1.8em\\"><div style=\\"margin-top:20px;margin-bottom:10px\\"><a href=\\"/\\"><img src=\\"/renderer/logo.svg\\" height=\\"64\\" width=\\"64\\"/></a></div><a class=\\"navitem\\" href=\\"/\\">Preload Default</a><a class=\\"navitem\\" href=\\"/preload-disabled\\">Preload Disabled</a><a class=\\"navitem\\" href=\\"/preload-font-only\\">Preload Only Font</a></div><div style=\\"padding:20px;padding-bottom:50px;border-left:2px solid #eee;min-height:100vh\\"><h1>Font Only</h1><p>This page showcases a custom strategy of only preloading the font (i.e. the image isn&#x27;t preloaded).</p></div></div></div>
<script id=\\"vite-plugin-ssr_pageContext\\" type=\\"application/json\\">{\\"pageContext\\":{\\"_pageId\\":\\"/pages/preload-font-only\\",\\"pageProps\\":\\"!undefined\\"}}</script><script type=\\"module\\" async>
<script type=\\"module\\" async>
import RefreshRuntime from \\"/@react-refresh\\"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
import(\\"/@vite/client\\");
import(\\"/@fs/$ROOT/vite-plugin-ssr/client/entry.ts\\");
</script><link rel=\\"modulepreload\\" href=\\"/@fs/$ROOT/vite-plugin-ssr/client/entry.ts\\" as=\\"script\\" type=\\"text/javascript\\"></body>
</script><link rel=\\"modulepreload\\" href=\\"/@fs/$ROOT/vite-plugin-ssr/client/entry.ts\\" as=\\"script\\" type=\\"text/javascript\\"><script id=\\"vite-plugin-ssr_pageContext\\" type=\\"application/json\\">{\\"pageContext\\":{\\"_pageId\\":\\"/pages/preload-font-only\\",\\"pageProps\\":\\"!undefined\\"}}</script></body>
</html>"
`
)
Expand Down
24 changes: 6 additions & 18 deletions test/preload/prod.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -67,14 +67,10 @@ describe('preload tags', () => {
expect(body).toMatchInlineSnapshot(
`
"<!DOCTYPE html>
<html>
<head><link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/assets/_default.page.client.$HASH.css\\"><link rel=\\"preload\\" href=\\"/assets/Sono-Light.$HASH.ttf\\" as=\\"font\\" type=\\"font/ttf\\" crossorigin>
</head>
<html><head><link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/assets/_default.page.client.$HASH.css\\"><link rel=\\"preload\\" href=\\"/assets/Sono-Light.$HASH.ttf\\" as=\\"font\\" type=\\"font/ttf\\" crossorigin></head>
<body>
<div id=\\"page-view\\"><div style=\\"display:flex;max-width:900px;margin:auto\\"><div style=\\"padding:20px;padding-top:20px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;line-height:1.8em\\"><div style=\\"margin-top:20px;margin-bottom:10px\\"><a href=\\"/\\"><img src=\\"/assets/logo.$HASH.svg\\" height=\\"64\\" width=\\"64\\"/></a></div><a class=\\"navitem\\" href=\\"/\\">Preload Default</a><a class=\\"navitem\\" href=\\"/preload-disabled\\">Preload Disabled</a><a class=\\"navitem\\" href=\\"/preload-font-only\\">Preload Only Font</a></div><div style=\\"padding:20px;padding-bottom:50px;border-left:2px solid #eee;min-height:100vh\\"><h1>Default</h1><p>This page showcases the default preloading strategy: in production, both the image and the font are preloaded.</p></div></div></div>
<link rel=\\"preload\\" href=\\"/assets/logo.$HASH.svg\\" as=\\"image\\" type=\\"image/svg+xml\\"><script id=\\"vite-plugin-ssr_pageContext\\" type=\\"application/json\\">{\\"pageContext\\":{\\"_pageId\\":\\"/pages/index\\",\\"pageProps\\":\\"!undefined\\"}}</script><script type=\\"module\\" src=\\"/assets/entry-server-routing.$HASH.js\\" async></script><link rel=\\"modulepreload\\" href=\\"/assets/entry-server-routing.$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/pages/index.page.$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/chunk-$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/renderer/_default.page.client.$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/chunk-$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"></body>
<link rel=\\"preload\\" href=\\"/assets/logo.$HASH.svg\\" as=\\"image\\" type=\\"image/svg+xml\\"><script type=\\"module\\" src=\\"/assets/entry-server-routing.$HASH.js\\" async></script><link rel=\\"modulepreload\\" href=\\"/assets/entry-server-routing.$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/pages/index.page.$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/chunk-$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/renderer/_default.page.client.$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/chunk-$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><script id=\\"vite-plugin-ssr_pageContext\\" type=\\"application/json\\">{\\"pageContext\\":{\\"_pageId\\":\\"/pages/index\\",\\"pageProps\\":\\"!undefined\\"}}</script></body>
</html>"
`
)
Expand Down Expand Up @@ -138,14 +134,10 @@ describe('preload tags', () => {
expect(body).toMatchInlineSnapshot(
`
"<!DOCTYPE html>
<html>
<head><link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/assets/_default.page.client.$HASH.css\\">
</head>
<html><head><link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/assets/_default.page.client.$HASH.css\\"></head>
<body>
<div id=\\"page-view\\"><div style=\\"display:flex;max-width:900px;margin:auto\\"><div style=\\"padding:20px;padding-top:20px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;line-height:1.8em\\"><div style=\\"margin-top:20px;margin-bottom:10px\\"><a href=\\"/\\"><img src=\\"/assets/logo.$HASH.svg\\" height=\\"64\\" width=\\"64\\"/></a></div><a class=\\"navitem\\" href=\\"/\\">Preload Default</a><a class=\\"navitem\\" href=\\"/preload-disabled\\">Preload Disabled</a><a class=\\"navitem\\" href=\\"/preload-font-only\\">Preload Only Font</a></div><div style=\\"padding:20px;padding-bottom:50px;border-left:2px solid #eee;min-height:100vh\\"><h1>Disabled</h1><p>This page showcases completely disabled preloading: the image nor the font are preloaded.</p></div></div></div>
<link rel=\\"modulepreload\\" href=\\"/assets/pages/preload-disabled.page.$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/chunk-$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/renderer/_default.page.client.$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/chunk-$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\">
<script id=\\"vite-plugin-ssr_pageContext\\" type=\\"application/json\\">{\\"pageContext\\":{\\"_pageId\\":\\"/pages/preload-disabled\\",\\"pageProps\\":\\"!undefined\\"}}</script><script type=\\"module\\" src=\\"/assets/entry-server-routing.$HASH.js\\" async></script><link rel=\\"modulepreload\\" href=\\"/assets/entry-server-routing.$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"></body>
<script type=\\"module\\" src=\\"/assets/entry-server-routing.$HASH.js\\" async></script><link rel=\\"modulepreload\\" href=\\"/assets/entry-server-routing.$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/pages/preload-disabled.page.$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/chunk-$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/renderer/_default.page.client.$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/chunk-$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><script id=\\"vite-plugin-ssr_pageContext\\" type=\\"application/json\\">{\\"pageContext\\":{\\"_pageId\\":\\"/pages/preload-disabled\\",\\"pageProps\\":\\"!undefined\\"}}</script></body>
</html>"
`
)
Expand Down Expand Up @@ -209,14 +201,10 @@ describe('preload tags', () => {
expect(body).toMatchInlineSnapshot(
`
"<!DOCTYPE html>
<html>
<head><link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/assets/_default.page.client.$HASH.css\\">
<link rel=\\"preload\\" href=\\"/assets/Sono-Light.$HASH.ttf\\" as=\\"font\\" type=\\"font/ttf\\" crossorigin>
</head>
<html><head><link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/assets/_default.page.client.$HASH.css\\"><link rel=\\"preload\\" href=\\"/assets/Sono-Light.$HASH.ttf\\" as=\\"font\\" type=\\"font/ttf\\" crossorigin></head>
<body>
<div id=\\"page-view\\"><div style=\\"display:flex;max-width:900px;margin:auto\\"><div style=\\"padding:20px;padding-top:20px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;line-height:1.8em\\"><div style=\\"margin-top:20px;margin-bottom:10px\\"><a href=\\"/\\"><img src=\\"/assets/logo.$HASH.svg\\" height=\\"64\\" width=\\"64\\"/></a></div><a class=\\"navitem\\" href=\\"/\\">Preload Default</a><a class=\\"navitem\\" href=\\"/preload-disabled\\">Preload Disabled</a><a class=\\"navitem\\" href=\\"/preload-font-only\\">Preload Only Font</a></div><div style=\\"padding:20px;padding-bottom:50px;border-left:2px solid #eee;min-height:100vh\\"><h1>Font Only</h1><p>This page showcases a custom strategy of only preloading the font (i.e. the image isn&#x27;t preloaded).</p></div></div></div>
<link rel=\\"modulepreload\\" href=\\"/assets/pages/preload-font-only.page.$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/chunk-$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/renderer/_default.page.client.$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/chunk-$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\">
<script id=\\"vite-plugin-ssr_pageContext\\" type=\\"application/json\\">{\\"pageContext\\":{\\"_pageId\\":\\"/pages/preload-font-only\\",\\"pageProps\\":\\"!undefined\\"}}</script><script type=\\"module\\" src=\\"/assets/entry-server-routing.$HASH.js\\" async></script><link rel=\\"modulepreload\\" href=\\"/assets/entry-server-routing.$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"></body>
<script type=\\"module\\" src=\\"/assets/entry-server-routing.$HASH.js\\" async></script><link rel=\\"modulepreload\\" href=\\"/assets/entry-server-routing.$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/pages/preload-font-only.page.$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/chunk-$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/renderer/_default.page.client.$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><link rel=\\"modulepreload\\" href=\\"/assets/chunk-$HASH.js\\" as=\\"script\\" type=\\"text/javascript\\"><script id=\\"vite-plugin-ssr_pageContext\\" type=\\"application/json\\">{\\"pageContext\\":{\\"_pageId\\":\\"/pages/preload-font-only\\",\\"pageProps\\":\\"!undefined\\"}}</script></body>
</html>"
`
)
Expand Down

0 comments on commit fb86b16

Please sign in to comment.