Add SSR'd app scripts to preview apps

This commit is contained in:
Andrew Kingston 2025-03-13 15:48:19 +00:00
parent 074a404fde
commit 97df714f6e
No known key found for this signature in database
2 changed files with 23 additions and 2 deletions

View File

@ -262,6 +262,21 @@ export const serveApp = async function (ctx: UserCtx<void, ServeAppResponse>) {
} }
} }
const getAppScriptHTML = (
app: App,
location: "Head" | "Body",
nonce: string
) => {
if (!app.scripts?.length) {
return ""
}
return app.scripts
.filter(script => script.location === location && script.html?.length)
.map(script => script.html)
.join("\n")
.replaceAll("<script", `<script nonce="${nonce}"`)
}
export const serveBuilderPreview = async function ( export const serveBuilderPreview = async function (
ctx: Ctx<void, ServeBuilderPreviewResponse> ctx: Ctx<void, ServeBuilderPreviewResponse>
) { ) {
@ -273,9 +288,12 @@ export const serveBuilderPreview = async function (
const templateLoc = join(__dirname, "templates") const templateLoc = join(__dirname, "templates")
const previewLoc = fs.existsSync(templateLoc) ? templateLoc : __dirname const previewLoc = fs.existsSync(templateLoc) ? templateLoc : __dirname
const previewHbs = loadHandlebarsFile(join(previewLoc, "preview.hbs")) const previewHbs = loadHandlebarsFile(join(previewLoc, "preview.hbs"))
const nonce = ctx.state.nonce || ""
ctx.body = await processString(previewHbs, { ctx.body = await processString(previewHbs, {
clientLibPath: objectStore.clientLibraryUrl(appId!, appInfo.version), clientLibPath: objectStore.clientLibraryUrl(appId!, appInfo.version),
nonce: ctx.state.nonce, nonce,
headAppScripts: getAppScriptHTML(appInfo, "Head", nonce),
bodyAppScripts: getAppScriptHTML(appInfo, "Body", nonce),
}) })
} else { } else {
// just return the app info for jest to assert on // just return the app info for jest to assert on

View File

@ -108,6 +108,9 @@
window.addEventListener("message", receiveMessage) window.addEventListener("message", receiveMessage)
window.parent.postMessage({ type: "ready" }) window.parent.postMessage({ type: "ready" })
</script> </script>
{{ headAppScripts }}
</head> </head>
<body></body> <body>
{{ bodyAppScripts }}
</body>
</html> </html>