AST removal

src/lib/post-rendering.tsx

@@ -7,11 +7,10 @@ import {
   summaryContent,
   ViewBlock,
 } from "../types/post-blocks";
-import { PostASTMap, WirePostViewModel } from "../types/wire-models";
+import { WirePostViewModel } from "../types/wire-models";
 import { compile } from "html-to-text";
 import { DateTime } from "luxon";
 import React, { createElement, Fragment, JSX } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
 import rehypeExternalLinks from "rehype-external-links";
 import rehypeRaw from "rehype-raw";
 import rehypeReact from "rehype-react";
@@ -28,10 +27,8 @@ import { chooseAgeRuleset } from "./sanitize";
 import { MAX_GFM_LINES, RenderingOptions } from "./shared-types";
 import {
   cleanUpFootnotes,
-  compileHastAST,
   convertMentions,
   copyImgAltToTitle,
-  parseHastAST,
 } from "./unified-processors";
 import _ from "lodash";
 import type { Root as HASTRoot } from "hast";
@@ -75,16 +72,9 @@ const markdownRenderStack = (
   }
 
   return stack
-    .use(
-      remarkRehype as Plugin<
-        [{ allowDangerousHtml: boolean }],
-        MDASTRoot,
-        HASTRoot
-      >,
-      {
-        allowDangerousHtml: true,
-      }
-    )
+    .use(remarkRehype, {
+      allowDangerousHtml: true,
+    })
     .use(copyImgAltToTitle)
     .use(() => cleanUpFootnotes)
     .use(rehypeRaw)
@@ -101,13 +91,12 @@ const ERROR_BOX_NODE = (
     </p>
   </InfoBox>
 );
-const ERROR_BOX_HTML = renderToStaticMarkup(ERROR_BOX_NODE);
 
-async function renderMarkdownAst(
+async function renderMarkdownToReact(
   blocks: MarkdownViewBlock[],
   publishDate: Date,
-  options: Pick<RenderingOptions, "hasCohostPlus" | "renderingContext">
-): Promise<string> {
+  options: RenderingOptions
+): Promise<JSX.Element> {
   const src = blocks.map((block) => block.markdown.content).join("\n\n");
   let lineLength = 0;
 
@@ -128,61 +117,35 @@ async function renderMarkdownAst(
     );
   }
 
-  return markdownRenderStack(publishDate, lineLength, options)
-    .use(() => convertMentions)
-    .use(parseEmoji, { cohostPlus: options.hasCohostPlus })
-    .use(compileHastAST)
-    .process(src)
-    .then((result) => result.value.toString())
-    .catch((e) => {
-      // re-run the renderer with our static error box. we only get errors
-      // when a user has an invalid style tag that fails parsing. our error
-      // box is Known Good so this is not a concern for us.
-      return renderMarkdownAst(
-        [
-          {
-            type: "markdown",
-            markdown: {
-              content: ERROR_BOX_HTML,
-            },
-          },
-        ],
-        publishDate,
-        options
-      );
-    });
-}
-
-export function renderReactFromAst(
-  astString: string,
-  options: Omit<RenderingOptions, "hasCohostPlus">
-) {
-  let stack = unified().use(parseHastAST);
-
   const externalRel = ["nofollow"];
   if (options.externalLinksInNewTab) {
     externalRel.push("noopener");
   }
 
   try {
-    return (
-      stack
-        .use(rehypeExternalLinks, {
-          rel: externalRel,
-          target: options.externalLinksInNewTab ? "_blank" : "_self",
-        })
-        // @ts-expect-error rehype-react types are broken
-        .use(rehypeReact, {
-          createElement,
-          Fragment,
-          components: {
-            Mention,
-            CustomEmoji,
-          },
-        })
-        .processSync(astString).result
-    );
+    const result = await markdownRenderStack(publishDate, lineLength, options)
+      .use(() => convertMentions)
+      .use(parseEmoji, { cohostPlus: options.hasCohostPlus })
+      .use(rehypeExternalLinks, {
+        rel: externalRel,
+        target: options.externalLinksInNewTab ? "_blank" : "_self",
+      })
+      // @ts-expect-error rehype-react types are broken
+      .use(rehypeReact, {
+        createElement,
+        Fragment,
+        components: {
+          Mention,
+          CustomEmoji,
+        },
+      })
+      .process(src);
+
+    return result.result;
   } catch (e) {
+    // re-run the renderer with our static error box. we only get errors
+    // when a user has an invalid style tag that fails parsing. our error
+    // box is Known Good so this is not a concern for us.
     return ERROR_BOX_NODE;
   }
 }
@@ -275,11 +238,20 @@ export function renderPostSummary(
   return summary;
 }
 
-export async function generatePostAst(
+export type PostRenderResult = {
+  spans: Array<{
+    startIndex: number;
+    endIndex: number;
+    rendered: JSX.Element;
+  }>;
+  readMoreIndex: number | null;
+};
+
+export async function renderPostBlocks(
   viewBlocks: ViewBlock[],
   publishDate: Date,
-  options: Pick<RenderingOptions, "hasCohostPlus" | "renderingContext">
-): Promise<PostASTMap> {
+  options: RenderingOptions
+): Promise<PostRenderResult> {
   // identify markdown spans
   const spans: {
     startIndex: number;
@@ -290,9 +262,8 @@ export async function generatePostAst(
 
   for (let i = 0; i < viewBlocks.length; i++) {
     const block = viewBlocks[i];
-    const isMarkdownBlock = isMarkdownViewBlock(block);
 
-    if (isMarkdownBlock) {
+    if (isMarkdownViewBlock(block)) {
       if (
         currentSpanStartIndex !== null &&
         block.markdown.content === "---" &&
@@ -336,17 +307,16 @@ export async function generatePostAst(
     });
   }
 
-  // render each span and return AST map
+  // render each span and return rendered React elements
   return {
     spans: await Promise.all(
       spans.map(async (span) => ({
         startIndex: span.startIndex,
         endIndex: span.endIndex,
-        ast: await renderMarkdownAst(
-          viewBlocks.slice(
-            span.startIndex,
-            span.endIndex
-          ) as MarkdownViewBlock[],
+        rendered: await renderMarkdownToReact(
+          viewBlocks
+            .slice(span.startIndex, span.endIndex)
+            .filter(isMarkdownViewBlock),
           publishDate,
           options
         ),
@@ -358,10 +328,7 @@ export async function generatePostAst(
 
 // interim rendering method for until we get the rest of the inline attachments
 // changes done.  render a sequence of markdown spans all joined together.
-export function renderReactFromSpans(
-  spans: PostASTMap["spans"],
-  options: Omit<RenderingOptions, "hasCohostPlus">
-) {
+export function renderReactFromSpans(spans: PostRenderResult["spans"]) {
   const rendered: JSX.Element[] = [];
 
   for (let i = 0; i < spans.length; i++) {
@@ -375,7 +342,7 @@ export function renderReactFromSpans(
 
     rendered.push(
       <React.Fragment key={`span-${spans[i].startIndex}`}>
-        {renderReactFromAst(spans[i].ast, options)}
+        {spans[i].rendered}
       </React.Fragment>
     );
   }

src/lib/unified-processors.ts

@@ -1,7 +1,6 @@
 import type { Element, Root, Text } from "hast";
 import _ from "lodash";
 import { Plugin } from "unified";
-import type { Compiler, Parser } from "unified";
 import { is } from "unist-util-is";
 import { CONTINUE, SKIP, visit } from "unist-util-visit";
 import { EXIT, visitParents } from "unist-util-visit-parents";
@@ -159,20 +158,3 @@ export const copyImgAltToTitle: Plugin<[], Root> = () => (hast: Root) => {
     }
   });
 };
-
-export const compileHastAST: Plugin = function () {
-  const compiler: Compiler<Root, string> = (node: Root) => {
-    return JSON.stringify(node);
-  };
-
-  Object.assign(this, { Compiler: compiler });
-};
-
-export const parseHastAST: Plugin = function () {
-  const parser: Parser<Root> = (astString: string) => {
-    const ast = JSON.parse(astString) as Root;
-    return ast;
-  };
-
-  Object.assign(this, { Parser: parser });
-};

src/types/wire-models.ts

@@ -103,23 +103,6 @@ export const LimitedVisibilityReason = z.enum([
 ]);
 export type LimitedVisibilityReason = z.infer<typeof LimitedVisibilityReason>;
 
-// rationale for building the post AST this way: originally, the entire post
-// shared one AST; this doesn't suffice when attachments can move around.  the
-// natural way to break the AST down then is per-block, but an inline HTML tag
-// can span multiple blocks, so we need to build spans of contiguous markdown
-// blocks as a unit or else HTML's tag auto-insertion rules kick in.
-export const PostASTMap = z.object({
-  spans: z.array(
-    z.object({
-      startIndex: z.number(),
-      endIndex: z.number(),
-      ast: z.string(),
-    })
-  ),
-  readMoreIndex: z.number().nullable(),
-});
-export type PostASTMap = z.infer<typeof PostASTMap>;
-
 // double declaration required due to a typescript limitation with recursive types
 // see: https://github.com/colinhacks/zod#recursive-types
 type WirePostViewModelInternal = WirePostContentCommon & {
@@ -141,7 +124,6 @@ type WirePostViewModelInternal = WirePostContentCommon & {
   canShare: boolean;
   canPublish: boolean;
   limitedVisibilityReason: LimitedVisibilityReason;
-  astMap: PostASTMap;
 
   responseToAskId: AskId | null;
 };
@@ -165,7 +147,6 @@ export const WirePostViewModel: z.ZodType<WirePostViewModelInternal> = z.lazy(
       canShare: z.boolean(),
       canPublish: z.boolean(),
       limitedVisibilityReason: LimitedVisibilityReason,
-      astMap: PostASTMap,
       responseToAskId: AskId.nullable(),
     })
 );