@revealui/core 0.0.1-pre.0

package/dist/core/api/ssr.ts

@@ -0,0 +1,63 @@
+import { VercelRequest, VercelResponse } from "@vercel/node"
+import { renderPage } from "../renderer/page"
+
+export default async function handler(
+  req: VercelRequest,
+  res: VercelResponse
+): Promise<void> {
+  const { url } = req
+  console.log("Request to url:", url)
+
+  if (!url) {
+    throw new Error("req.url is undefined")
+  }
+
+  const pageContextInit = { urlOriginal: url }
+  const pageContext = await renderPage(pageContextInit)
+  const { httpResponse } = pageContext
+  console.log("httpResponse", !!httpResponse)
+
+  if (!httpResponse) {
+    res.status(200).end()
+    return
+  }
+
+  const { body, statusCode, headers } = httpResponse
+  res.status(statusCode)
+
+  // Explicitly typing 'name' and 'value' to avoid TypeScript warnings
+  headers.forEach(([name, value]: [string, string | number | string[]]) => {
+    res.setHeader(name, value)
+  })
+
+  res.end(body)
+}
+
+// import {VercelRequest, VercelResponse} from '@vercel/node'
+// import { renderPage } from 'vike/server'
+
+// /**
+//  * @param {import('@vercel/node').VercelRequest} req
+//  * @param {import('@vercel/node').VercelResponse} res
+//  */
+// export default async function handler(req: VercelRequest, res: VercelResponse) {
+//   const { url } = req
+//   console.log('Request to url:', url)
+//   if (url === undefined) throw new Error('req.url is undefined')
+
+//   const pageContextInit = { urlOriginal: url }
+//   const pageContext = await renderPage(pageContextInit)
+//   const { httpResponse } = pageContext
+//   console.log('httpResponse', !!httpResponse)
+
+//   if (!httpResponse) {
+//     res.statusCode = 200
+//     res.end()
+//     return
+//   }
+
+//   const { body, statusCode, headers } = httpResponse
+//   res.statusCode = statusCode
+//   headers.forEach(([name, value]) => res.setHeader(name, value))
+//   res.end(body)
+// }

package/dist/core/assets/extractAssetsQuery.ts

@@ -0,0 +1,29 @@
+import { assert } from "../gaurds/assertions/assert";
+import { getFileExtension } from "../processing/getters/getFileExtension";
+
+export { extractAssetsAddQuery, extractAssetsRemoveQuery };
+
+// We import from node/utils.ts insead of node/plugin/utils.ts because this file is loaded by the server runtime
+
+const query = "extractAssets";
+
+function extractAssetsAddQuery(id: string): string {
+  const fileExtension = getFileExtension(id);
+  if (!fileExtension || id.includes("virtual:reveal:")) {
+    return `${id}?${query}`;
+  } else {
+    if (!id.includes("?")) {
+      return `${id}?${query}&lang.${fileExtension}`;
+    } else {
+      return id.replace("?", `?${query}&`);
+    }
+  }
+}
+
+function extractAssetsRemoveQuery(id: string): string {
+  if (!id.includes("?")) return id;
+  const suffix = `?${query}`;
+  // Only supports 'virtual:reveal:' IDs
+  assert(id.endsWith(query));
+  return id.slice(0, -1 * suffix.length);
+}

package/dist/core/assets/index.ts

@@ -0,0 +1,173 @@
+export { injectHtmlTagsToStream, injectHtmlTagsToString }
+export type { PageContextInjectAssets, PageContextPromise }
+
+import { PageConfigRuntime } from "../../types/interfaces/page.js"
+import { assertPageContextProvidedByUser } from "../gaurds/assertions/assertPageContextProvidedByUser.js"
+import {
+  getHtmlTags,
+  HtmlTag,
+  PreloadFilter,
+} from "../processing/getters/getHtmlTags.js"
+import { PageAsset } from "../processing/getters/getPageAssets.js"
+import { getViteDevScript } from "../processing/getters/getViteDevScript.js"
+import { PageContextSerialization } from "../processing/serializers/serializePageContextClientSide.js"
+import { HtmlPart } from "../renderer/stream/html.js"
+import { StreamFromReactStreamingPackage } from "../renderer/stream/react-streaming.js"
+import { assert, isCallable, isPromise } from "../utils/index.js"
+import {
+  createHtmlHeadIfMissing,
+  injectHtmlTags,
+  injectHtmlTagsUsingStream,
+  joinHtmlTags,
+} from "./injectHtmlTags.js"
+
+type PageContextInjectAssets = {
+  urlPathname: string
+  __getPageAssets: () => Promise<PageAsset[]>
+  pageId: string
+  _isHtmlOnly: boolean
+  _pageContextPromise: PageContextPromise
+  _renderHook: {
+    hookFilePath: string
+    hookName: "onRenderHtml"
+  }
+  _baseServer: string
+  _pageConfigs: PageConfigRuntime[]
+  is404: null | boolean
+} & PageContextSerialization
+
+async function injectHtmlTagsToString(
+  htmlParts: HtmlPart[],
+  pageContext: PageContextInjectAssets & { _isStream: false },
+  injectFilter: PreloadFilter
+): Promise<string> {
+  const pageAssets = await pageContext.__getPageAssets()
+  const viteDevScript = await getViteDevScript()
+  const htmlTags = getHtmlTags(
+    pageContext,
+    null,
+    injectFilter,
+    pageAssets,
+    viteDevScript,
+    false
+  )
+  let htmlString = htmlPartsToString(htmlParts, pageAssets)
+  htmlString = injectToHtmlBegin(htmlString, htmlTags)
+  htmlString = injectToHtmlEnd(htmlString, htmlTags)
+  assert(
+    htmlTags.filter((snippet) => snippet.position === "HTML_STREAM").length ===
+      0
+  )
+  return htmlString
+}
+
+function injectHtmlTagsToStream(
+  pageContext: PageContextInjectAssets & { _isStream: true },
+  streamFromReactStreamingPackage: null | StreamFromReactStreamingPackage,
+  injectFilter: PreloadFilter
+) {
+  let htmlTags: HtmlTag[] | undefined
+
+  return {
+    injectAtStreamBegin,
+    injectAtStreamAfterFirstChunk,
+    injectAtStreamEnd,
+  }
+
+  async function injectAtStreamBegin(
+    htmlPartsBegin: HtmlPart[]
+  ): Promise<string> {
+    const pageAssets = await pageContext.__getPageAssets()
+    const viteDevScript = await getViteDevScript()
+    htmlTags = getHtmlTags(
+      pageContext,
+      streamFromReactStreamingPackage,
+      injectFilter,
+      pageAssets,
+      viteDevScript,
+      true
+    )
+
+    let htmlBegin = htmlPartsToString(htmlPartsBegin, pageAssets)
+    htmlBegin = injectToHtmlBegin(htmlBegin, htmlTags)
+    if (streamFromReactStreamingPackage) {
+      injectHtmlTagsUsingStream(htmlTags, streamFromReactStreamingPackage)
+    }
+
+    return htmlBegin
+  }
+
+  // Is it worth it? Should we remove this? https://github.com/revealjs/reveal/pull/1740#issuecomment-2230540892
+  function injectAtStreamAfterFirstChunk(): null | string {
+    // React has its own stream injection mechanism, see injectHtmlTagsUsingStream()
+    if (streamFromReactStreamingPackage) return null
+    assert(htmlTags)
+    const tags = htmlTags.filter((h) => h.position === "HTML_STREAM")
+    if (tags.length === 0) return null
+    const htmlFragment = joinHtmlTags(tags)
+    return htmlFragment
+  }
+
+  async function injectAtStreamEnd(htmlPartsEnd: HtmlPart[]): Promise<string> {
+    assert(htmlTags)
+    await resolvePageContextPromise(pageContext)
+    const pageAssets = await pageContext.__getPageAssets()
+    let htmlEnd = htmlPartsToString(htmlPartsEnd, pageAssets)
+    htmlEnd = injectToHtmlEnd(htmlEnd, htmlTags)
+    return htmlEnd
+  }
+}
+
+function injectToHtmlBegin(htmlBegin: string, htmlTags: HtmlTag[]): string {
+  // Ensure existence of `<head>`
+  htmlBegin = createHtmlHeadIfMissing(htmlBegin)
+  htmlBegin = injectHtmlTags(htmlBegin, htmlTags, "HTML_BEGIN")
+  return htmlBegin
+}
+
+function injectToHtmlEnd(htmlEnd: string, htmlTags: HtmlTag[]): string {
+  htmlEnd = injectHtmlTags(htmlEnd, htmlTags, "HTML_END")
+  return htmlEnd
+}
+
+// https://reveal.dev/streaming#initial-data-after-stream-end
+type PageContextPromise =
+  | null
+  | Promise<unknown>
+  | (() => void | Promise<unknown>)
+async function resolvePageContextPromise(pageContext: {
+  _pageContextPromise: PageContextPromise
+  _renderHook: {
+    hookFilePath: string
+    hookName: "onRenderHtml"
+  }
+}) {
+  const pageContextPromise = pageContext._pageContextPromise
+  if (!pageContextPromise) {
+    return
+  }
+  let pageContextProvidedByUser: unknown
+  if (isCallable(pageContextPromise)) {
+    pageContextProvidedByUser = await pageContextPromise()
+  } else if (isPromise(pageContextPromise)) {
+    pageContextProvidedByUser = await pageContextPromise
+  } else {
+    assert(false)
+  }
+  assertPageContextProvidedByUser(
+    pageContextProvidedByUser,
+    pageContext._renderHook
+  )
+  Object.assign(pageContext, pageContextProvidedByUser)
+}
+
+function htmlPartsToString(
+  htmlParts: HtmlPart[],
+  pageAssets: PageAsset[]
+): string {
+  let htmlString = ""
+  htmlParts.forEach((p) => {
+    htmlString += typeof p === "string" ? p : p(pageAssets)
+  })
+  return htmlString
+}

package/dist/core/assets/inferHtmlTags.ts

@@ -0,0 +1,61 @@
+import { PageAsset } from "../processing/getters/getPageAssets"
+import { assert } from "../utils"
+
+export { inferAssetTag, inferEarlyHintLink, inferPreloadTag, scriptAttrs }
+
+// We can't use `defer` here. With `defer`, the entry script won't start before `</body>` has been parsed, preventing progressive hydration during SSR streaming, see https://github.com/revealjs/reveal/pull/1271
+const scriptAttrs = 'type="module" async'
+
+function inferPreloadTag(pageAsset: PageAsset): string {
+  const { src, assetType, mediaType } = pageAsset
+  const rel = getRel(pageAsset)
+  const attributes = [
+    `rel="${rel}"`,
+    `href="${src}"`,
+    !assetType ? null : `query="${assetType}"`,
+    !mediaType ? null : `type="${mediaType}"`,
+    // `crossorigin` is needed for fonts, see https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#cors-enabled_fetches
+    !isCrossOrigin(pageAsset) ? null : "crossorigin",
+  ]
+    .filter(Boolean)
+    .join(" ")
+  return `<link ${attributes}>`
+}
+
+function inferAssetTag(pageAsset: PageAsset): string {
+  const { src, assetType, mediaType } = pageAsset
+  if (assetType === "script") {
+    assert(mediaType === "text/javascript")
+    return `<script src="${src}" ${scriptAttrs}></script>`
+  }
+  if (assetType === "style") {
+    // WARNING: if changing following line, then also update https://github.com/revealjs/reveal/blob/fae90a15d88e5e87ca9fcbb54cf2dc8773d2f229/reveal/client/shared/removeFoucBuster.ts#L29
+    return `<link rel="stylesheet" type="text/css" href="${src}">`
+  }
+  assert(false, `Invalid asset type: ${JSON.stringify(pageAsset)}`)
+}
+
+// We ignore crossorigin, it seems like Early Hints doesn't have a "crossorigin" property: https://github.com/revealjs/reveal/issues/618#issuecomment-1415752222
+function inferEarlyHintLink(pageAsset: PageAsset): string {
+  const { src, assetType } = pageAsset
+  const rel = getRel(pageAsset)
+  return [`<${src}>`, `rel=${rel}`, !assetType ? null : `query=${assetType}`]
+    .filter(Boolean)
+    .join("; ")
+}
+
+function getRel({ assetType }: PageAsset): string {
+  if (assetType === "script") {
+    // Vite transpiles all browser-side JavaScript to ESM
+    return "modulepreload"
+  }
+  return "preload"
+}
+
+function isCrossOrigin({ src, assetType }: PageAsset): boolean {
+  return (
+    assetType === "font" ||
+    src.startsWith("http://") ||
+    src.startsWith("https://")
+  )
+}

package/dist/core/assets/injectHtmlTags.ts

@@ -0,0 +1,236 @@
+// Unit tests at ./injectHtmlTags.spec.ts
+
+export {
+  createHtmlHeadIfMissing,
+  injectHtmlTags,
+  injectHtmlTagsUsingStream,
+  joinHtmlTags,
+}
+
+// Only needed for unit tests
+export { injectAtClosingTag, injectAtOpeningTag }
+
+import { assert } from "../gaurds/assertions/assert/index.js"
+import { assertUsage } from "../gaurds/assertions/assertUsage/index.js"
+import type { HtmlTag } from "../processing/getters/getHtmlTags.js"
+import { StreamFromReactStreamingPackage } from "../renderer/stream/react-streaming.js"
+import { slice } from "../utils/array/slice.js"
+
+type Position = "HTML_BEGIN" | "HTML_END"
+function injectHtmlTags(
+  htmlString: string,
+  htmlTags: HtmlTag[],
+  position: Position
+): string {
+  const htmlFragment = joinHtmlTags(
+    htmlTags.filter((h) => h.position === position)
+  )
+  if (htmlFragment) {
+    htmlString = injectHtmlFragment(position, htmlFragment, htmlString)
+  }
+  return htmlString
+}
+
+// Is it worth it? Should we remove this? https://github.com/revealjs/reveal/pull/1740#issuecomment-2230540892
+function injectHtmlTagsUsingStream(
+  htmlTags: HtmlTag[],
+  streamFromReactStreamingPackage: StreamFromReactStreamingPackage
+): void {
+  const htmlFragment = joinHtmlTags(
+    htmlTags.filter((h) => h.position === "HTML_STREAM")
+  )
+  if (htmlFragment) {
+    assert(!streamFromReactStreamingPackage.hasStreamEnded())
+    streamFromReactStreamingPackage.injectToStream(htmlFragment, {
+      flush: true,
+    })
+  }
+}
+
+function joinHtmlTags(htmlTags: HtmlTag[]): string {
+  const htmlFragment = htmlTags.map((h) => resolveHtmlTag(h.htmlTag)).join("")
+  return htmlFragment
+}
+
+function injectHtmlFragment(
+  position: Position,
+  htmlFragment: string,
+  htmlString: string
+): string {
+  if (position === "HTML_BEGIN") {
+    {
+      const res = injectAtPaceholder(htmlFragment, htmlString, true)
+      if (res) return res
+    }
+    assert(tagOpeningExists("head", htmlString))
+    htmlString = injectAtOpeningTag("head", htmlString, htmlFragment)
+    return htmlString
+  }
+  if (position === "HTML_END") {
+    {
+      const res = injectAtPaceholder(htmlFragment, htmlString, false)
+      if (res) return res
+    }
+    if (tagClosingExists("body", htmlString)) {
+      return injectAtClosingTag("body", htmlString, htmlFragment)
+    }
+    if (tagClosingExists("html", htmlString)) {
+      return injectAtClosingTag("html", htmlString, htmlFragment)
+    }
+    return htmlString + "\n" + htmlFragment
+  }
+  assert(false)
+}
+
+function resolveHtmlTag(htmlTag: HtmlTag["htmlTag"]) {
+  return typeof htmlTag !== "string" ? htmlTag() : htmlTag
+}
+
+function injectAtOpeningTag(
+  tag: "head" | "html" | "!doctype",
+  htmlString: string,
+  htmlFragment: string
+): string {
+  const openingTag = getTagOpening(tag)
+  const matches = htmlString.match(openingTag)
+  assert(matches && matches.length >= 1)
+  const tagInstance = matches[0]
+  assert(tagInstance)
+  const htmlParts = htmlString.split(tagInstance)
+  assert(htmlParts.length >= 2)
+
+  // Insert `htmlFragment` after first `tagInstance`
+  const before = slice(htmlParts, 0, 1)[0]! + tagInstance
+  const after = slice(htmlParts, 1, 0).join(tagInstance)
+
+  htmlFragment = injectBreakLines(htmlFragment, before, after)
+
+  return before + htmlFragment + after
+}
+
+function injectAtClosingTag(
+  tag: "body" | "html",
+  htmlString: string,
+  htmlFragment: string
+): string {
+  const tagClosing = getTagClosing(tag)
+  const matches = htmlString.match(tagClosing)
+  assert(matches && matches.length >= 1)
+  const tagInstance = matches[0]
+  assert(tagInstance)
+  const htmlParts = htmlString.split(tagInstance)
+  assert(htmlParts.length >= 2)
+
+  // Insert `htmlFragment` before last `tagClosing`
+  const before = slice(htmlParts, 0, -1).join(tagInstance)
+  const after = tagInstance + slice(htmlParts, -1, 0)
+
+  htmlFragment = injectBreakLines(htmlFragment, before, after)
+
+  return before + htmlFragment + after
+}
+
+function injectBreakLines(htmlFragment: string, before: string, after: string) {
+  assert(htmlFragment.trim() === htmlFragment)
+
+  const currentLineBefore = before.split("\n").slice(-1)[0]!
+  let paddingParent: string = currentLineBefore.match(/\s*$/)![0]!
+  let isBlankLine = !!paddingParent
+  if (!paddingParent) {
+    paddingParent = currentLineBefore!.match(/^\s*/)![0]!
+  }
+  if (!paddingParent) return htmlFragment
+
+  const whitespaceExtra = paddingParent ? "  " : ""
+  const whitespace = `${paddingParent}${whitespaceExtra}`
+  const padding = `\n${whitespace}`
+
+  htmlFragment = htmlFragment.replace(
+    /<[^\/]/g,
+    (match) => `${padding}${match}`
+  )
+  if (isBlankLine) {
+    assert(htmlFragment.startsWith(padding), `htmlFragment: ${htmlFragment}`)
+    htmlFragment = whitespaceExtra + htmlFragment.slice(padding.length)
+  }
+
+  const currentLineAfter = after.split("\n")[0]!
+  if (currentLineAfter.trim().length > 0) {
+    htmlFragment += "\n" + paddingParent
+  }
+
+  return htmlFragment
+}
+
+function createHtmlHeadIfMissing(htmlString: string): string {
+  const assertion = () =>
+    assert(
+      tagOpeningExists("head", htmlString) &&
+        tagClosingExists("head", htmlString)
+    )
+
+  if (
+    tagOpeningExists("head", htmlString) &&
+    tagClosingExists("head", htmlString)
+  ) {
+    assertion()
+    return htmlString
+  }
+
+  const htmlFragment = "<head></head>"
+
+  if (tagOpeningExists("html", htmlString)) {
+    htmlString = injectAtOpeningTag("html", htmlString, htmlFragment)
+    assertion()
+    return htmlString
+  }
+
+  if (tagOpeningExists("!doctype", htmlString)) {
+    htmlString = injectAtOpeningTag("!doctype", htmlString, htmlFragment)
+    assertion()
+    return htmlString
+  }
+
+  htmlString = htmlFragment + "\n" + htmlString
+  assertion()
+  return htmlString
+}
+
+type Tag = "html" | "head" | "body" | "!doctype"
+// Pay attention to performance when searching for tags
+// Use the most effective way to test or match tag existence
+// Use tag existence checking with caution as it is costly operation
+function tagOpeningExists(tag: Tag, htmlString: string) {
+  const tagOpeningRE = getTagOpening(tag)
+  return tagOpeningRE.test(htmlString)
+}
+function tagClosingExists(tag: Tag, htmlString: string) {
+  const tagClosingRE = getTagClosing(tag)
+  return tagClosingRE.test(htmlString)
+}
+function getTagOpening(tag: Tag) {
+  const tagOpening = new RegExp(`<${tag}(>| [^>]*>)`, "i")
+  return tagOpening
+}
+function getTagClosing(tag: Tag) {
+  const tagClosing = new RegExp(`</${tag}>`, "i")
+  return tagClosing
+}
+
+function injectAtPaceholder(
+  htmlFragment: string,
+  htmlString: string,
+  isFirst: boolean
+): null | string {
+  const placeholder = isFirst
+    ? "__VITE_PLUGIN_SSR__ASSETS_FIRST__"
+    : "__VITE_PLUGIN__SSR_ASSETS_LAST__"
+  const parts = htmlString.split(placeholder)
+  if (parts.length === 1) return null
+  assertUsage(
+    parts.length === 2,
+    "You're inserting assets twice into your HTML",
+    { showStackTrace: true }
+  )
+  return [parts[0], htmlFragment, parts[1]].join("")
+}

package/dist/core/assets/mergeScriptTags.ts

@@ -0,0 +1,77 @@
+export { mergeScriptTags };
+
+import { assert } from "../gaurds/assertions/assert/index.js";
+import { scriptAttrs } from "./inferHtmlTags.js";
+
+const scriptRE = /(<script\b(?:\s[^>]*>|>))(.*?)<\/script>/gims;
+const srcRE = /\bsrc\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s'">]+))/im;
+const typeRE = /\btype\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s'">]+))/im;
+
+function mergeScriptTags(scriptTagsHtml: string): string {
+  let scriptTag = "";
+
+  const scripts = parseScripts(scriptTagsHtml);
+
+  // We need to merge module scripts to ensure execution order
+  {
+    const scriptsModule = scripts.filter(({ isModule }) => isModule);
+    if (scriptsModule.length === 1) {
+      scriptTag += scriptsModule[0]!.outerHtml;
+    } else {
+      const contents: string[] = [];
+      scriptsModule.forEach(({ src, innerHtml }) => {
+        const hasInnerHtml = !!innerHtml.trim();
+        if (src) {
+          assert(!hasInnerHtml);
+          contents.push(`import ${JSON.stringify(src)};`);
+        } else if (hasInnerHtml) {
+          innerHtml = innerHtml.split("\n").filter(Boolean).join("\n");
+          contents.push(innerHtml);
+        }
+      });
+      if (contents.length > 0) {
+        scriptTag += `<script ${scriptAttrs}>\n${contents.join("\n")}\n</script>`;
+      }
+    }
+  }
+
+  // We don't need to merge ES5 scripts
+  {
+    const scriptsES5 = scripts.filter(({ isModule }) => !isModule);
+    scriptsES5.forEach(({ outerHtml }) => {
+      scriptTag += outerHtml;
+    });
+  }
+
+  return scriptTag;
+}
+
+function parseScripts(htmlString: string) {
+  const scripts: {
+    isModule: boolean;
+    innerHtml: string;
+    outerHtml: string;
+    src: null | string;
+  }[] = [];
+  let match: RegExpExecArray | null;
+  while ((match = scriptRE.exec(htmlString))) {
+    const [outerHtml, openTag, innerHtml] = match;
+    assert(outerHtml && openTag && innerHtml !== undefined);
+
+    let isModule = false;
+    {
+      const typeMatch = openTag.match(typeRE);
+      const type = typeMatch && (typeMatch[1] || typeMatch[2] || typeMatch[3]);
+      isModule = type === "module";
+    }
+
+    let src: null | string = null;
+    {
+      const srcMatch = openTag.match(srcRE);
+      src = (srcMatch && (srcMatch[1] || srcMatch[2] || srcMatch[3])) || "";
+    }
+
+    scripts.push({ isModule, src, innerHtml, outerHtml });
+  }
+  return scripts;
+}

package/dist/core/assets/sanitizeJson.ts

@@ -0,0 +1,8 @@
+// Prevent XSS attacks, see https://github.com/revealjs/reveal/pull/181#issuecomment-952846026
+
+export { sanitizeJson }
+
+function sanitizeJson(unsafe: string): string {
+  const safe = unsafe.replace(/</g, "\\u003c")
+  return safe
+}