Pad mutiple values

Author: pearmini

runtime/index.js

@@ -1,7 +1,7 @@
 import {transpileJavaScript} from "@observablehq/notebook-kit";
 import {Runtime} from "@observablehq/runtime";
 import {parse} from "acorn";
-import {group} from "d3-array";
+import {group, max} from "d3-array";
 import {dispatch as d3Dispatch} from "d3-dispatch";
 import * as stdlib from "./stdlib.js";
 import {OUTPUT_MARK, ERROR_MARK} from "./constant.js";
@@ -37,8 +37,34 @@ function debounce(fn, delay = 0) {
   };
 }
 
+function padStringWidth(string) {
+  const lines = string.split("\n");
+  const maxLength = max(lines, (line) => line.length);
+  return lines.map((line) => line.padEnd(maxLength)).join("\n");
+}
+
+function padStringHeight(string, height) {
+  const lines = string.split("\n");
+  const diff = height - lines.length;
+  return lines.join("\n") + "\n".repeat(diff);
+}
+
 function merge(...strings) {
-  return strings.join("\n");
+  const maxHeight = max(strings, (string) => string.split("\n").length);
+  const aligned = strings
+    .map((string) => padStringHeight(string, maxHeight))
+    .map((string) => padStringWidth(string))
+    .map((string) => string.split("\n"));
+  let output = "";
+  for (let i = 0; i < maxHeight; i++) {
+    for (let j = 0; j < aligned.length; j++) {
+      const line = aligned[j][i];
+      output += line;
+      output += j < aligned.length - 1 ? " " : "";
+    }
+    output += i < maxHeight - 1 ? "\n" : "";
+  }
+  return output;
 }
 
 function addPrefix(string, prefix) {
@@ -69,9 +95,13 @@ export function createRuntime(initialCode) {
         let error = false;
         for (let i = 0; i < values.length; i++) {
           const line = values[i];
+          const n = values[i].length;
           const formatted = line.map((v) => {
             if (isError(v)) error = true;
-            const inspector = v instanceof Inspector ? v : new Inspector(v);
+            // If there are multiple values, we don't want to quote the string values.
+            // such as echo("a =", 1) results in "a = 1" instead of "a = "1"".
+            const options = n === 1 ? {} : {quote: false};
+            const inspector = v instanceof Inspector ? v : new Inspector(v, options);
             return inspector.format();
           });
           const merged = merge(...formatted);

runtime/inspect.js

@@ -10,6 +10,7 @@ function isMultiline(value) {
 function inspector(value, {limit = 200, quote = "double", indent = null} = {}) {
   if (isMultiline(value)) return value;
   if (typeof value === "string" && !quote) return value;
+  if (!quote) quote = "double";
   const string = objectInspector(value, {indent, quoteStyle: quote});
   if (string.length > limit) return string.slice(0, limit) + "…";
   return string;

test/js/echo-multiple-values.js

@@ -0,0 +1,9 @@
+export const echoMultipleValues = `echo(1, 2, 3);
+
+echo(1, [1, 2, 3], 3);
+
+echo("a =", 1);
+
+echo("a =", [1, 2, 3]);
+
+echo(1, recho.inspect({key: [1, 2, 3]}, {indent: 2}), 2);`;

test/js/index-tests.js

@@ -8,3 +8,4 @@ export {syntaxError2} from "./syntax-error2.js";
 export {syntaxError3} from "./syntax-error3.js";
 export {syntaxError4} from "./syntax-error4.js";
 export {nonCallEcho} from "./non-call-echo.js";
+export {echoMultipleValues} from "./echo-multiple-values.js";

test/js/index.js

@@ -17,3 +17,4 @@ export {commentLink} from "./comment-link.js";
 export {syntaxError3} from "./syntax-error3.js";
 export {syntaxError4} from "./syntax-error4.js";
 export {nonCallEcho} from "./non-call-echo.js";
+export {echoMultipleValues} from "./echo-multiple-values.js";

test/output/echoMultipleValues.js

@@ -0,0 +1,16 @@
+//➜ 1 2 3
+echo(1, 2, 3);
+
+//➜ 1 [ 1, 2, 3 ] 3
+echo(1, [1, 2, 3], 3);
+
+//➜ a = 1
+echo("a =", 1);
+
+//➜ a = [ 1, 2, 3 ]
+echo("a =", [1, 2, 3]);
+
+//➜ 1 {                  2
+//➜     key: [ 1, 2, 3 ]  
+//➜   }                   
+echo(1, recho.inspect({key: [1, 2, 3]}, {indent: 2}), 2);

test/output/inspector.js

@@ -29,8 +29,8 @@ echo(new Date('2025-09-23T12:00:00Z'));
 
 //➜ Map (2) {
 //➜   1 => 2,
-//➜   3 => 4
-//➜ }
+//➜   3 => 4 
+//➜ }        
 echo(recho.inspect(new Map([[1, 2], [3, 4]]), {indent: 2}));
 
 //➜ [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, …