Use content stable value for code id

Author: wiltsecarpenter

src/hash.ts

@@ -1,5 +1,5 @@
 import {createHash} from "node:crypto";
 
 export function computeHash(source: string): string {
-  return createHash("sha256").update(source).digest("base64");
+  return createHash("sha256").update(source).digest("hex");
 }

src/javascript.ts

@@ -13,7 +13,7 @@ import {Sourcemap} from "./sourcemap.js";
 
 export interface FileReference {
   name: string;
-  mimeType: string;
+  mimeType: string | null;
 }
 
 export interface ImportReference {
@@ -31,7 +31,7 @@ export interface Transpile {
 }
 
 export interface TranspileOptions {
-  id: number;
+  id: string;
   root: string;
 }
 
@@ -53,7 +53,7 @@ export function transpileJavaScript(input: string, {id, root, ...options}: Trans
     rewriteImports(output, node);
     rewriteFetches(output, node);
     return {
-      id: `${id}`,
+      id,
       ...(inputs.length ? {inputs} : null),
       ...(options.inline ? {inline: true} : null),
       ...(node.declarations?.length ? {outputs: node.declarations.map(({name}) => name)} : null),

src/markdown.ts

@@ -12,6 +12,7 @@ import mime from "mime";
 import {join} from "path";
 import {canReadSync} from "./files.js";
 import {transpileJavaScript, type FileReference, type ImportReference, type Transpile} from "./javascript.js";
+import {computeHash} from "./hash.js";
 
 export interface HtmlPiece {
   type: "html";
@@ -42,8 +43,6 @@ interface RenderPiece {
 }
 
 interface ParseContext {
-  id: number;
-  js: string;
   pieces: RenderPiece[];
   files: {name: string; mimeType: string | null}[];
   imports: ImportReference[];
@@ -69,14 +68,24 @@ function makeHtmlRenderer(root: string, baseRenderer: RenderRule): RenderRule {
   };
 }
 
+function uniqueCodeId(context: ParseContext, content: string): string {
+  const hash = String(computeHash(content));
+  let id = hash;
+  let count = 1;
+  while (context.pieces.some((piece) => piece.code.some((code) => code.id === id))) {
+    id = `${hash}-${count++}`;
+  }
+  return id;
+}
+
 function makeFenceRenderer(root: string, baseRenderer: RenderRule): RenderRule {
   return (tokens, idx, options, context: ParseContext, self) => {
     const token = tokens[idx];
     const [language, option] = token.info.split(" ");
     let result = "";
     let count = 0;
     if (language === "js" && option !== "no-run") {
-      const id = ++context.id;
+      const id = uniqueCodeId(context, token.content);
       const transpile = transpileJavaScript(token.content, {
         id,
         root,
@@ -163,12 +172,12 @@ function transformPlaceholderBlock(token) {
   const output: any[] = [];
   let i = 0;
   parsePlaceholder(input, (j, k) => {
-    output.push({...token, content: input.slice(i, j)});
-    output.push({type: "placeholder", content: input.slice(j + 2, k - 1)});
+    output.push({...token, level: i > 0 ? token.level + 1 : token.level, content: input.slice(i, j)});
+    output.push({type: "placeholder", level: token.level + 1, content: input.slice(j + 2, k - 1)});
     i = k;
   });
   if (i === 0) return [token];
-  else if (i < input.length) output.push({...token, content: input.slice(i)});
+  else if (i < input.length) output.push({...token, content: input.slice(i), nesting: -1});
   return output;
 }
 
@@ -229,7 +238,7 @@ const transformPlaceholderCore: RuleCore = (state) => {
 
 function makePlaceholderRenderer(root: string): RenderRule {
   return (tokens, idx, options, context: ParseContext) => {
-    const id = ++context.id;
+    const id = uniqueCodeId(context, tokens[idx].content);
     const token = tokens[idx];
     const transpile = transpileJavaScript(token.content, {
       id,
@@ -335,7 +344,7 @@ export function parseMarkdown(source: string, root: string): ParseResult {
   md.renderer.rules.fence = makeFenceRenderer(root, md.renderer.rules.fence!);
   md.renderer.rules.softbreak = makeSoftbreakRenderer(md.renderer.rules.softbreak!);
   md.renderer.render = renderIntoPieces(md.renderer);
-  const context: ParseContext = {id: 0, js: "", files: [], imports: [], pieces: [], startLine: 0, currentLine: 0};
+  const context: ParseContext = {files: [], imports: [], pieces: [], startLine: 0, currentLine: 0};
   const tokens = md.parse(parts.content, context);
   const html = md.renderer.render(tokens, md.options, context);
   return {

src/render.ts

@@ -74,9 +74,7 @@ ${JSON.stringify(
 
 import {${preview ? "open, " : ""}define} from "/_observablehq/client.js";
 
-${preview ? `open({hash: ${JSON.stringify(hash)}});\n` : ""}${parseResult.cells
-    .map((cell) => renderDefineCell(cell))
-    .join("")}
+${preview ? `open({hash: ${JSON.stringify(hash)}});\n` : ""}${parseResult.cells.map(renderDefineCell).join("")}
 </script>${
     parseResult.data
       ? `

test/hash-test.ts

@@ -3,7 +3,7 @@ import assert from "node:assert";
 
 describe("computeHash(content)", () => {
   it("returns the expected result", () => {
-    assert.deepStrictEqual(computeHash(""), "47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=");
-    assert.deepStrictEqual(computeHash("hello"), "LPJNul+wow4m6DsqxbninhsWHlwfp0JecwQzYpOLmCQ=");
+    assert.deepStrictEqual(computeHash(""), "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855");
+    assert.deepStrictEqual(computeHash("hello"), "2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824");
   });
 });

test/javascript-test.ts

@@ -18,7 +18,7 @@ describe("transpileJavaScript(input)", () => {
       const outfile = resolve("./test/output", `${basename(outname, ".js")}.js`);
       const diffile = resolve("./test/output", `${basename(outname, ".js")}-changed.js`);
       const actual = renderDefineCell(
-        await transpileJavaScript(await readFile(path, "utf8"), {id: 0, root: "test/input"})
+        await transpileJavaScript(await readFile(path, "utf8"), {id: "0", root: "test/input"})
       );
       let expected;
 

test/output/block-expression.html

@@ -1 +1 @@
-<div><span id="cell-1"></span></div>
+<div><span id="cell-6212702c7a0d68f00b8b23b5aecfca631a96c20d2cad78cd874611ac87cdbce1"></span></div>

test/output/block-expression.json

@@ -8,21 +8,15 @@
       "type": "html",
       "id": "",
       "cellIds": [
-        "1"
+        "6212702c7a0d68f00b8b23b5aecfca631a96c20d2cad78cd874611ac87cdbce1"
       ],
-      "html": "<div><span id=\"cell-1\"></span>"
-    },
-    {
-      "type": "html",
-      "id": "",
-      "cellIds": [],
-      "html": "</div>\n"
+      "html": "<div><span id=\"cell-6212702c7a0d68f00b8b23b5aecfca631a96c20d2cad78cd874611ac87cdbce1\"></span></div>\n"
     }
   ],
   "cells": [
     {
       "type": "cell",
-      "id": "1",
+      "id": "6212702c7a0d68f00b8b23b5aecfca631a96c20d2cad78cd874611ac87cdbce1",
       "inputs": [
         "display"
       ],

test/output/dollar-expression.html

@@ -1 +1 @@
-<p>$<span id="cell-1"></span></p>
+<p>$<span id="cell-6212702c7a0d68f00b8b23b5aecfca631a96c20d2cad78cd874611ac87cdbce1"></span></p>

test/output/dollar-expression.json

@@ -8,15 +8,15 @@
       "type": "html",
       "id": "",
       "cellIds": [
-        "1"
+        "6212702c7a0d68f00b8b23b5aecfca631a96c20d2cad78cd874611ac87cdbce1"
       ],
-      "html": "<p>$<span id=\"cell-1\"></span></p>\n"
+      "html": "<p>$<span id=\"cell-6212702c7a0d68f00b8b23b5aecfca631a96c20d2cad78cd874611ac87cdbce1\"></span></p>\n"
     }
   ],
   "cells": [
     {
       "type": "cell",
-      "id": "1",
+      "id": "6212702c7a0d68f00b8b23b5aecfca631a96c20d2cad78cd874611ac87cdbce1",
       "inputs": [
         "display"
       ],