|
|
@ -11,7 +11,10 @@ const escape = require('escape-html')
|
|
|
|
export async function renderPage(
|
|
|
|
export async function renderPage(
|
|
|
|
config: SiteConfig,
|
|
|
|
config: SiteConfig,
|
|
|
|
page: string, // foo.md
|
|
|
|
page: string, // foo.md
|
|
|
|
result: BuildResult
|
|
|
|
result: BuildResult,
|
|
|
|
|
|
|
|
indexChunk: OutputChunk,
|
|
|
|
|
|
|
|
pageToHashMap: Record<string, string>,
|
|
|
|
|
|
|
|
hashMapStirng: string
|
|
|
|
) {
|
|
|
|
) {
|
|
|
|
const { createApp } = require(path.join(
|
|
|
|
const { createApp } = require(path.join(
|
|
|
|
config.tempDir,
|
|
|
|
config.tempDir,
|
|
|
@ -23,27 +26,30 @@ export async function renderPage(
|
|
|
|
router.go(routePath)
|
|
|
|
router.go(routePath)
|
|
|
|
const content = await renderToString(app)
|
|
|
|
const content = await renderToString(app)
|
|
|
|
|
|
|
|
|
|
|
|
const pageJsFileName = page.replace(/\//g, '_') + '.js'
|
|
|
|
const pageName = page.replace(/\//g, '_')
|
|
|
|
|
|
|
|
// server build doesn't need hash
|
|
|
|
|
|
|
|
const pageServerJsFileName = pageName + '.js'
|
|
|
|
|
|
|
|
// for any initial page load, we only need the lean version of the page js
|
|
|
|
|
|
|
|
// since the static content is already on the page!
|
|
|
|
|
|
|
|
const pageHash = pageToHashMap[pageName]
|
|
|
|
|
|
|
|
const pageClientJsFileName = pageName + `.` + pageHash + '.lean.js'
|
|
|
|
|
|
|
|
|
|
|
|
// resolve page data so we can render head tags
|
|
|
|
// resolve page data so we can render head tags
|
|
|
|
const { __pageData } = require(path.join(
|
|
|
|
const { __pageData } = require(path.join(
|
|
|
|
config.tempDir,
|
|
|
|
config.tempDir,
|
|
|
|
ASSETS_DIR,
|
|
|
|
ASSETS_DIR,
|
|
|
|
pageJsFileName
|
|
|
|
pageServerJsFileName
|
|
|
|
))
|
|
|
|
))
|
|
|
|
const pageData = JSON.parse(__pageData)
|
|
|
|
const pageData = JSON.parse(__pageData)
|
|
|
|
|
|
|
|
|
|
|
|
const assetPath = `${config.site.base}${ASSETS_DIR}`
|
|
|
|
const assetPath = `${config.site.base}${ASSETS_DIR}`
|
|
|
|
|
|
|
|
|
|
|
|
const preloadLinks = [
|
|
|
|
const preloadLinks = [
|
|
|
|
// resolve imports for index.js + page.md.js and inject script tags for
|
|
|
|
// resolve imports for index.js + page.md.js and inject script tags for
|
|
|
|
// them as well so we fetch everything as early as possible without having
|
|
|
|
// them as well so we fetch everything as early as possible without having
|
|
|
|
// to wait for entry chunks to parse
|
|
|
|
// to wait for entry chunks to parse
|
|
|
|
...resolvePageImports(config, page, result),
|
|
|
|
...resolvePageImports(config, page, result, indexChunk),
|
|
|
|
// for any initial page load, we only need the lean version of the page js
|
|
|
|
pageClientJsFileName,
|
|
|
|
// since the static content is already on the page!
|
|
|
|
indexChunk.fileName
|
|
|
|
pageJsFileName.replace(/\.js$/, '.lean.js'),
|
|
|
|
|
|
|
|
'index.js'
|
|
|
|
|
|
|
|
]
|
|
|
|
]
|
|
|
|
.map((file) => {
|
|
|
|
.map((file) => {
|
|
|
|
return `<link rel="modulepreload" href="${assetPath}${file}">`
|
|
|
|
return `<link rel="modulepreload" href="${assetPath}${file}">`
|
|
|
@ -64,7 +70,10 @@ export async function renderPage(
|
|
|
|
</head>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<body>
|
|
|
|
<div id="app">${content}</div>
|
|
|
|
<div id="app">${content}</div>
|
|
|
|
<script type="module" async src="${assetPath}index.js"></script>
|
|
|
|
<script>__VP_HASH_MAP__ = JSON.parse(${hashMapStirng})</script>
|
|
|
|
|
|
|
|
<script type="module" async src="${assetPath}${
|
|
|
|
|
|
|
|
indexChunk.fileName
|
|
|
|
|
|
|
|
}"></script>
|
|
|
|
</body>
|
|
|
|
</body>
|
|
|
|
</html>`.trim()
|
|
|
|
</html>`.trim()
|
|
|
|
const htmlFileName = path.join(config.outDir, page.replace(/\.md$/, '.html'))
|
|
|
|
const htmlFileName = path.join(config.outDir, page.replace(/\.md$/, '.html'))
|
|
|
@ -75,13 +84,12 @@ export async function renderPage(
|
|
|
|
function resolvePageImports(
|
|
|
|
function resolvePageImports(
|
|
|
|
config: SiteConfig,
|
|
|
|
config: SiteConfig,
|
|
|
|
page: string,
|
|
|
|
page: string,
|
|
|
|
result: BuildResult
|
|
|
|
result: BuildResult,
|
|
|
|
|
|
|
|
indexChunk: OutputChunk
|
|
|
|
) {
|
|
|
|
) {
|
|
|
|
// find the page's js chunk and inject script tags for its imports so that
|
|
|
|
// find the page's js chunk and inject script tags for its imports so that
|
|
|
|
// they are start fetching as early as possible
|
|
|
|
// they are start fetching as early as possible
|
|
|
|
const indexChunk = result.assets.find(
|
|
|
|
|
|
|
|
(chunk) => chunk.type === 'chunk' && chunk.fileName === `index.js`
|
|
|
|
|
|
|
|
) as OutputChunk
|
|
|
|
|
|
|
|
const srcPath = path.join(config.root, page)
|
|
|
|
const srcPath = path.join(config.root, page)
|
|
|
|
const pageChunk = result.assets.find(
|
|
|
|
const pageChunk = result.assets.find(
|
|
|
|
(chunk) => chunk.type === 'chunk' && chunk.facadeModuleId === srcPath
|
|
|
|
(chunk) => chunk.type === 'chunk' && chunk.facadeModuleId === srcPath
|
|
|
|