escapeInject workaround

vikejs · Dec 27, 2023 · a5d8959 · a5d8959
1 parent 77b2c10
commit a5d8959
Showing 1 changed file with 66 additions and 29 deletions.
diff --git a/packages/vike-angular/renderer/onRenderHtml.tsx b/packages/vike-angular/renderer/onRenderHtml.tsx
@@ -11,42 +11,79 @@ checkVikeVersion()
 
 const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRenderHtmlAsync> => {
   const lang = pageContext.config.lang || 'en'
+  const Page = pageContext.Page
+
+  //TODO: remove this if possible
+  // Angular needs the whole HTML in string form to render, because it injects things to head
+  // Angular outputs sanitized HTML
+  // If there is no Page, we need to use escapeInject instead
+  function getDocumentHtml(escape: false): string
+  function getDocumentHtml(escape: true): ReturnType<typeof escapeInject>
+  function getDocumentHtml(escape = true) {
+    const { favicon, description } = pageContext.config
+    const faviconTag = !favicon
+      ? ''
+      : escape
+        ? escapeInject`<link rel="icon" href="${favicon}" />`
+        : `<link rel="icon" href="${favicon}" />`
+    const descriptionTag = !description
+      ? ''
+      : escape
+        ? escapeInject`<meta name="description" content="${description}" />`
+        : `<meta name="description" content="${description}" />`
 
-  const { favicon, description } = pageContext.config
-  const faviconTag = !favicon ? '' : `<link rel="icon" href="${favicon}" />`
-  const descriptionTag = !description ? '' : `<meta name="description" content="${description}" />`
-
-  const title = getTitle(pageContext)
-  const titleTag = !title ? '' : `<title>${title}</title>`
-
-  let documentHtml = `<!DOCTYPE html>
-    <html lang='${lang}'>
-      <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1">
-        ${faviconTag}
-        ${titleTag}
-        ${descriptionTag}
-      </head>
-      <body>
-        <app-root></app-root>
-      </body>
-      <!-- built with https://github.com/vikejs/vike-angular -->
-    </html>`
+    const title = getTitle(pageContext)
+    const titleTag = !title ? '' : escape ? escapeInject`<title>${title}</title>` : `<title>${title}</title>`
 
+    return escape
+      ? escapeInject`<!DOCTYPE html>
+      <html lang='${lang}'>
+        <head>
+          <meta charset="UTF-8" />
+          <meta name="viewport" content="width=device-width,initial-scale=1">
+          ${faviconTag}
+          ${titleTag}
+          ${descriptionTag}
+        </head>
+        <body>
+          <app-root></app-root>
+        </body>
+        <!-- built with https://github.com/vikejs/vike-angular -->
+      </html>`
+      : `<!DOCTYPE html>
+      <html lang='${lang}'>
+        <head>
+          <meta charset="UTF-8" />
+          <meta name="viewport" content="width=device-width,initial-scale=1">
+          ${faviconTag}
+          ${titleTag}
+          ${descriptionTag}
+        </head>
+        <body>
+          <app-root></app-root>
+        </body>
+        <!-- built with https://github.com/vikejs/vike-angular -->
+      </html>`
+  }
+
+  let documentHtml: string | ReturnType<typeof escapeInject>
   const Layout = pageContext.config.Layout ?? undefined
-  const Page = pageContext.Page
   if (Page) {
-    documentHtml = await renderToString({
-      page: Page,
-      layout: Layout,
-      providers: [{ provide: PageContext, useValue: pageContext }],
-      document: documentHtml
-    })
+    // Angular needs the whole html, because it injects things to head
+    documentHtml = escapeInject`${dangerouslySkipEscape(
+      await renderToString({
+        page: Page,
+        layout: Layout,
+        providers: [{ provide: PageContext, useValue: pageContext }],
+        document: getDocumentHtml(false)
+      })
+    )}`
+  } else {
+    documentHtml = getDocumentHtml(true)
   }
 
   return {
-    documentHtml: escapeInject`${dangerouslySkipEscape(documentHtml)}`,
+    documentHtml,
     pageContext: {}
   }
 }