Logging with types - allows for coloured outputs.

packages/bbui/src/bbui.css

@@ -45,6 +45,11 @@
   --purple: #806fde;
   --purple-dark: #130080;
 
+  --error-bg: rgba(226, 109, 105, 0.3);
+  --warning-bg: rgba(255, 210, 106, 0.3);
+  --error-content: rgba(226, 109, 105, 0.6);
+  --warning-content: rgba(255, 210, 106, 0.6);
+
   --rounded-small: 4px;
   --rounded-medium: 8px;
   --rounded-large: 16px;

packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte

@@ -21,6 +21,7 @@
   $: highlightedLogs = expressionLogs.map(l => ({
     log: highlight(l.log.join(", ")),
     line: l.line,
+    type: l.type,
   }))
 
   const formatError = (err: any) => {
@@ -67,7 +68,7 @@
   <div class="header" class:success class:error>
     <div class="header-content">
       {#if error}
-        <Icon name="Alert" color="var(--spectrum-global-color-red-600)" />
+        <Icon name="Alert" color="var(--error-content)" />
         <div>Error</div>
         {#if evaluating}
           <div transition:fade|local={{ duration: 130 }}>
@@ -98,9 +99,24 @@
     {:else}
       <div class="output-lines">
         {#each highlightedLogs as logLine}
-          <div class="line">
-            <!-- eslint-disable-next-line svelte/no-at-html-tags-->
-            <span>{@html logLine.log}</span>
+          <div
+            class="line"
+            class:error-log={logLine.type === "error"}
+            class:warn-log={logLine.type === "warn"}
+          >
+            <div class="icon-log">
+              {#if logLine.type === "error"}
+                <Icon
+                  size="XS"
+                  name="CloseCircle"
+                  color="var(--error-content)"
+                />
+              {:else if logLine.type === "warn"}
+                <Icon size="XS" name="Alert" color="var(--warning-content)" />
+              {/if}
+              <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+              <span>{@html logLine.log}</span>
+            </div>
             {#if logLine.line}
               <span style="color: var(--blue)">:{logLine.line}</span>
             {/if}
@@ -149,10 +165,9 @@
     height: 100%;
     z-index: 1;
     position: absolute;
-    opacity: 10%;
   }
   .header.error::before {
-    background: var(--spectrum-global-color-red-400);
+    background: var(--error-bg);
   }
   .body {
     flex: 1 1 auto;
@@ -167,15 +182,20 @@
   }
   .output-lines {
     display: flex;
-    gap: var(--spacing-s);
     flex-direction: column;
+    gap: var(--spacing-xs);
   }
   .line {
     border-bottom: var(--border-light);
-    padding-bottom: var(--spacing-s);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: end;
+    padding: var(--spacing-s);
+  }
+  .icon-log {
+    display: flex;
+    gap: var(--spacing-s);
+    align-items: start;
   }
 </style>

packages/string-templates/src/helpers/javascript.ts

@@ -9,7 +9,7 @@ import { getJsHelperList } from "./list"
 import { iifeWrapper } from "../iife"
 import { JsTimeoutError, UserScriptError } from "../errors"
 import { cloneDeep } from "lodash/fp"
-import { Log } from "../types"
+import { Log, LogType } from "../types"
 
 // The method of executing JS scripts depends on the bundle being built.
 // This setter is used in the entrypoint (either index.js or index.mjs).
@@ -124,9 +124,7 @@ export function processJS(handlebars: string, context: any) {
     if (!isBackendService()) {
       // this counts the lines in the wrapped JS *before* the user's code, so that we can minus it
       const jsLineCount = frontendWrapJS(js).split(js)[0].split("\n").length
-      const buildLogResponse = (
-        type: "log" | "info" | "debug" | "warn" | "error" | "trace" | "table"
-      ) => {
+      const buildLogResponse = (type: LogType) => {
         return (...props: any[]) => {
           console[type](...props)
           props.forEach((prop, index) => {
@@ -144,6 +142,7 @@ export function processJS(handlebars: string, context: any) {
           logs.push({
             log: props,
             line: lineNumber ? parseInt(lineNumber) - jsLineCount : undefined,
+            type,
           })
         }
       }
@@ -153,8 +152,8 @@ export function processJS(handlebars: string, context: any) {
         debug: buildLogResponse("debug"),
         warn: buildLogResponse("warn"),
         error: buildLogResponse("error"),
-        // two below may need special cases
-        trace: buildLogResponse("trace"),
+        // table should be treated differently, but works the same
+        // as the rest of the logs for now
         table: buildLogResponse("table"),
       }
     }

packages/string-templates/src/index.ts

@@ -19,7 +19,7 @@ import manifest from "./manifest.json"
 import { Log, ProcessOptions } from "./types"
 import { UserScriptError } from "./errors"
 
-export type { Log } from "./types"
+export type { Log, LogType } from "./types"
 export { helpersToRemoveForJs, getJsHelperList } from "./helpers/list"
 export { FIND_ANY_HBS_REGEX } from "./utilities"
 export { setJSRunner, setOnErrorLog } from "./helpers/javascript"

packages/string-templates/src/types.ts

@@ -9,7 +9,10 @@ export interface ProcessOptions {
   disabledHelpers?: string[]
 }
 
+export type LogType = "log" | "info" | "debug" | "warn" | "error" | "table"
+
 export interface Log {
   log: any[]
   line?: number
+  type?: LogType
 }