Move cell rendering to render.ts and flatten type

Author: wiltsecarpenter

src/javascript.ts

@@ -21,12 +21,13 @@ export interface ImportReference {
 }
 
 export interface Transpile {
-  // TODO: Create a better type for the transpiled result.
-  cell: Record<string, any>;
-  // TODO: Replace usages of js with cell and remove js here.
-  js: string;
-  files: FileReference[];
-  imports: ImportReference[];
+  id: string;
+  inputs?: string[];
+  outputs?: string[];
+  inline?: boolean;
+  body: string;
+  files?: FileReference[];
+  imports?: ImportReference[];
 }
 
 export interface TranspileOptions {
@@ -41,7 +42,7 @@ export function transpileJavaScript(input: string, {id, root, ...options}: Trans
       .filter((f) => f.type === "FileAttachment")
       .filter((f) => canReadSync(join(root, f.name)))
       .map((f) => ({name: f.name, mimeType: mime.getType(f.name)}));
-    const inputs = Array.from(new Set(node.references.map((r) => r.name)));
+    const inputs = Array.from(new Set<string>(node.references.map((r) => r.name)));
     const output = new Sourcemap(input);
     trim(output, input);
     if (node.expression && !inputs.includes("display")) {
@@ -51,28 +52,16 @@ export function transpileJavaScript(input: string, {id, root, ...options}: Trans
     }
     rewriteImports(output, node);
     rewriteFetches(output, node);
-    const cell = {
+    return {
       id: `${id}`,
       ...(inputs.length ? {inputs} : null),
       ...(options.inline ? {inline: true} : null),
       ...(node.declarations?.length ? {outputs: node.declarations.map(({name}) => name)} : null),
       ...(files.length ? {files} : null),
       body: `${node.async ? "async " : ""}(${inputs}) => {
 ${String(output)}${node.declarations?.length ? `\nreturn {${node.declarations.map(({name}) => name)}};` : ""}
-}`
-    };
-    return {
-      cell,
-      js: `define({id: ${id}${inputs.length ? `, inputs: ${JSON.stringify(inputs)}` : ""}${
-        options.inline ? `, inline: true` : ""
-      }${node.declarations?.length ? `, outputs: ${JSON.stringify(node.declarations.map(({name}) => name))}` : ""}${
-        files.length ? `, files: ${JSON.stringify(files)}` : ""
-      }, body: ${node.async ? "async " : ""}(${inputs}) => {
-${String(output)}${node.declarations?.length ? `\nreturn {${node.declarations.map(({name}) => name)}};` : ""}
-}});
-`,
-      files,
-      imports: node.imports
+}`,
+      ...(node.imports.length ? {imports: node.imports} : null)
     };
   } catch (error) {
     if (!(error instanceof SyntaxError)) throw error;
@@ -89,12 +78,8 @@ ${String(output)}${node.declarations?.length ? `\nreturn {${node.declarations.ma
     // whether we want to show the file name here.
     console.error(`${error.name}: ${message}`);
     return {
-      cell: {},
-      // TODO: Add error details to the response to improve code rendering.
-      js: `define({id: ${id}, body: () => { throw new SyntaxError(${JSON.stringify(error.message)}); }});
-`,
-      files: [],
-      imports: []
+      id: `${id}`,
+      body: `() => { throw new SyntaxError(${JSON.stringify(error.message)}); }`
     };
   }
 }

src/markdown.ts

@@ -20,19 +20,15 @@ export interface HtmlPiece {
   cellIds?: string[];
 }
 
-type TranspiledCell = Transpile["cell"];
-
-export interface CellPiece extends TranspiledCell {
+export interface CellPiece extends Transpile {
   type: "cell";
-  inline: boolean;
 }
 
 export type ParsePiece = HtmlPiece | CellPiece;
 
 export interface ParseResult {
   title: string | null;
   html: string;
-  js: string;
   data: {[key: string]: any} | null;
   files: FileReference[];
   imports: ImportReference[];
@@ -42,7 +38,7 @@ export interface ParseResult {
 
 interface RenderPiece {
   html: string;
-  code: (Transpile["cell"] & {inline: boolean})[];
+  code: Transpile[];
 }
 
 interface ParseContext {
@@ -86,10 +82,9 @@ function makeFenceRenderer(root: string, baseRenderer: RenderRule): RenderRule {
         root,
         sourceLine: context.startLine + context.currentLine
       });
-      extendPiece(context, {code: [{...transpile.cell, inline: false}]});
-      context.js += `\n${transpile.js}`;
-      context.files.push(...transpile.files);
-      context.imports.push(...transpile.imports);
+      extendPiece(context, {code: [transpile]});
+      if (transpile.files) context.files.push(...transpile.files);
+      if (transpile.imports) context.imports.push(...transpile.imports);
       result += `<div id="cell-${id}" class="observablehq observablehq--block"></div>\n`;
       count++;
     }
@@ -242,9 +237,8 @@ function makePlaceholderRenderer(root: string): RenderRule {
       inline: true,
       sourceLine: context.startLine + context.currentLine
     });
-    context.js += `\n${transpile.js}`;
-    extendPiece(context, {code: [{...transpile.cell, inline: true}]});
-    context.files.push(...transpile.files);
+    extendPiece(context, {code: [transpile]});
+    if (transpile.files) context.files.push(...transpile.files);
     return `<span id="cell-${id}"></span>`;
   };
 }
@@ -346,7 +340,6 @@ export function parseMarkdown(source: string, root: string): ParseResult {
   const html = md.renderer.render(tokens, md.options, context);
   return {
     html,
-    js: context.js,
     data: isEmpty(parts.data) ? null : parts.data,
     title: parts.data?.title ?? findTitle(tokens) ?? null,
     files: context.files,
@@ -383,7 +376,14 @@ function findTitle(tokens: ReturnType<MarkdownIt["parse"]>): string | undefined
 function diffReducer(patch: PatchItem<ParsePiece>) {
   // Remove body from remove updates, we just need the ids.
   if (patch.type === "remove") {
-    return {...patch, items: patch.items.map((item) => ({type: item.type, id: item.id, cellIds: item.cellIds}))};
+    return {
+      ...patch,
+      items: patch.items.map((item) => ({
+        type: item.type,
+        id: item.id,
+        ...("cellIds" in item ? {cellIds: item.cellIds} : null)
+      }))
+    };
   }
   return patch;
 }

src/render.ts

@@ -32,6 +32,14 @@ export function renderServerless(source: string, options: RenderOptions): Render
   };
 }
 
+export function renderDefineCell(cell) {
+  const {id, inline, inputs, outputs, files, body} = cell;
+  return `define({${Object.entries({id, inline, inputs, outputs, files})
+    .filter((arg) => arg[1] !== undefined)
+    .map((arg) => `${arg[0]}: ${JSON.stringify(arg[1])}`)
+    .join(", ")}, body: ${body}});\n`;
+}
+
 type RenderInternalOptions =
   | {preview?: false; hash?: never} // serverless
   | {preview: true; hash: string}; // preview
@@ -66,7 +74,9 @@ ${JSON.stringify(
 
 import {${preview ? "open, " : ""}define} from "/_observablehq/client.js";
 
-${preview ? `open({hash: ${JSON.stringify(hash)}});\n` : ""}${parseResult.js}
+${preview ? `open({hash: ${JSON.stringify(hash)}});\n` : ""}${parseResult.cells
+    .map((cell) => renderDefineCell(cell))
+    .join("")}
 </script>${
     parseResult.data
       ? `

test/javascript-test.ts

@@ -4,6 +4,7 @@ import {readFile, unlink, writeFile} from "node:fs/promises";
 import {basename, join, resolve} from "node:path";
 import {isNodeError} from "../src/error.js";
 import {transpileJavaScript} from "../src/javascript.js";
+import {renderDefineCell} from "../src/render.js";
 
 describe("transpileJavaScript(input)", () => {
   for (const name of readdirSync("./test/input")) {
@@ -16,22 +17,24 @@ describe("transpileJavaScript(input)", () => {
     (only ? it.only : skip ? it.skip : it)(`test/input/${name}`, async () => {
       const outfile = resolve("./test/output", `${basename(outname, ".js")}.js`);
       const diffile = resolve("./test/output", `${basename(outname, ".js")}-changed.js`);
-      const actual = await transpileJavaScript(await readFile(path, "utf8"), {id: 0, root: "test/input"});
+      const actual = renderDefineCell(
+        await transpileJavaScript(await readFile(path, "utf8"), {id: 0, root: "test/input"})
+      );
       let expected;
 
       try {
         expected = await readFile(outfile, "utf8");
       } catch (error) {
         if (isNodeError(error) && error.code === "ENOENT" && process.env.CI !== "true") {
           console.warn(`! generating ${outfile}`);
-          await writeFile(outfile, actual.js, "utf8");
+          await writeFile(outfile, actual, "utf8");
           return;
         } else {
           throw error;
         }
       }
 
-      const equal = expected === actual.js;
+      const equal = expected === actual;
 
       if (equal) {
         if (process.env.CI !== "true") {
@@ -46,7 +49,7 @@ describe("transpileJavaScript(input)", () => {
         }
       } else {
         console.warn(`! generating ${diffile}`);
-        await writeFile(diffile, actual.js, "utf8");
+        await writeFile(diffile, actual, "utf8");
       }
 
       assert.ok(equal, `${name} must match snapshot`);

test/markdown-test.ts

@@ -17,7 +17,7 @@ describe("parseMarkdown(input)", () => {
     (only ? it.only : skip ? it.skip : it)(`test/input/${name}`, async () => {
       const snapshot = parseMarkdown(await readFile(path, "utf8"), "test/input");
       let allequal = true;
-      for (const ext of ["html", "js", "json"]) {
+      for (const ext of ["html", "json"]) {
         const actual = ext === "json" ? jsonMeta(snapshot) : snapshot[ext];
         const outfile = resolve("./test/output", `${basename(outname, ".md")}.${ext}`);
         const diffile = resolve("./test/output", `${basename(outname, ".md")}-changed.${ext}`);
@@ -59,7 +59,7 @@ describe("parseMarkdown(input)", () => {
   }
 });
 
-function jsonMeta({html, js, ...rest}: ParseResult): string {
+function jsonMeta({html, ...rest}: ParseResult): string {
   return JSON.stringify(rest, null, 2);
 }
 

test/output/anonymous-class.js

@@ -1,4 +1,4 @@
-define({id: 0, inputs: ["display"], body: (display) => {
+define({id: "0", inputs: ["display"], body: (display) => {
 display((
 class {}
 ))

test/output/anonymous-function.js

@@ -1,4 +1,4 @@
-define({id: 0, inputs: ["display"], body: (display) => {
+define({id: "0", inputs: ["display"], body: (display) => {
 display((
 function() { return 42; }
 ))

test/output/async-arrow-function.js

@@ -1,4 +1,4 @@
-define({id: 0, outputs: ["addAsync"], body: () => {
+define({id: "0", outputs: ["addAsync"], body: () => {
 const addAsync = async (a, b) => (await a) + (await b);
 return {addAsync};
 }});

test/output/async-class.js

@@ -1,4 +1,4 @@
-define({id: 0, outputs: ["Foo"], body: () => {
+define({id: "0", outputs: ["Foo"], body: () => {
 class Foo {
   async addAsync(a, b) {
     return (await a) + (await b);

test/output/async-function.js

@@ -1,4 +1,4 @@
-define({id: 0, outputs: ["addAsync"], body: () => {
+define({id: "0", outputs: ["addAsync"], body: () => {
 async function addAsync(a, b) {
   return (await a) + (await b);
 }