feat(output): rework output workflow

src/features/editor/components/output/log-item.tsx

@@ -11,11 +11,7 @@ import React from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { CONSOLE_AVAILABLE_HANDLERS } from '@/features/editor/config/constants';
-import type {
-  consoleOutput,
-  Loggable,
-  SystemError,
-} from '@/features/editor/types';
+import type { Log, Loggable, SystemError } from '@/features/editor/types';
 import { cn } from '@/lib/utils';
 
 import { FormatOutput } from './format-output';
@@ -56,7 +52,10 @@ const Container: React.FC<ContainerProps> = ({
   ...props
 }) => {
   return (
-    <div className={cn(containerVariants({ variant, className }))} {...props}>
+    <div
+      className={cn('py-0.5', containerVariants({ variant, className }))}
+      {...props}
+    >
       {children}
     </div>
   );
@@ -115,7 +114,7 @@ const Value: React.FC<ValueProps> = ({ variant, value, repeats, duration }) => {
 };
 
 interface Props {
-  type: consoleOutput['type'];
+  type: Log['type'];
   value: Loggable | SystemError;
   repeats: number;
   duration: number;
@@ -131,14 +130,12 @@ export const LogItem: React.FC<Props> = ({
 }) => {
   const isDetailsString = typeof details === 'string';
 
-  const consoleAvailableHandlersAsString: readonly consoleOutput['type'][] = [
-    ...CONSOLE_AVAILABLE_HANDLERS,
-    'systemError',
-  ];
+  const consoleAvailableHandlersAsString: readonly Log['type'][] =
+    CONSOLE_AVAILABLE_HANDLERS;
   const isVariantTypeSupported =
     !!consoleAvailableHandlersAsString.includes(type);
 
-  const variantType: consoleOutput['type'] | 'default' = isVariantTypeSupported
+  const variantType: Log['type'] | 'default' = isVariantTypeSupported
     ? type
     : 'default';
 

src/features/editor/components/output/logs-list.tsx

@@ -7,7 +7,7 @@ import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 
 import { useLogsStore } from '../../stores/editor';
-import { LogRenderer } from './log-renderer';
+import { LogItem } from './log-item';
 
 const EmptyListView = () => (
   <div className="flex h-full flex-1 items-center justify-center gap-1">
@@ -23,6 +23,7 @@ const EmptyListFirstTimeView = () => (
   </div>
 );
 
+// eslint-disable-next-line max-lines-per-function
 export const LogsList = () => {
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   const { logs, isFirstTime } = useLogsStore();
@@ -68,7 +69,16 @@ export const LogsList = () => {
         data={logs}
         atBottomStateChange={setAtBottom}
         itemContent={(index, log) => {
-          return <LogRenderer key={index} log={log} />;
+          return (
+            <LogItem
+              key={index}
+              type={log.type}
+              value={log.value}
+              repeats={log.repeats}
+              duration={log.duration}
+              details={log.detail}
+            />
+          );
         }}
         followOutput={'auto'}
       />

src/features/editor/lib/linked-log.ts

@@ -1,27 +1,29 @@
 import DeepEqual from 'deep-equal';
 
-import type { log } from '../types';
+import type { Log } from '../types';
+import { addLogDecorators } from '../utils/log-decorator';
 
 class LogNode {
   public next: LogNode | null = null;
-  public value: log;
+  public value: Log;
 
-  constructor(data: log) {
+  constructor(data: Log) {
     this.value = data;
   }
 }
 
 interface ILinkedLogs {
-  append(data: log): void;
+  append(data: Log): void;
   clearFirst(): void;
-  getAllLogsInArray(): log[];
+  getAllLogsInArray(): Log[];
 }
 
 class LinkedLogs implements ILinkedLogs {
   private head: LogNode | null = null;
 
-  append(data: log) {
-    const node = new LogNode(data);
+  append(data: Log) {
+    const decoratedData = addLogDecorators(data);
+    const node = new LogNode(decoratedData);
 
     if (!this.head) {
       this.head = node;
@@ -33,11 +35,11 @@ class LinkedLogs implements ILinkedLogs {
       const lastNode = getLast(this.head);
 
       if (
-        lastNode.value.type === data.type &&
-        DeepEqual(lastNode.value.value, data.value)
+        lastNode.value.type === decoratedData.type &&
+        DeepEqual(lastNode.value.value, decoratedData.value)
       ) {
         lastNode.value.repeats += 1;
-        lastNode.value.duration = data.duration;
+        lastNode.value.duration = decoratedData.duration;
       } else {
         lastNode.next = node;
       }
@@ -48,8 +50,8 @@ class LinkedLogs implements ILinkedLogs {
     this.head = null;
   }
 
-  getAllLogsInArray(): log[] {
-    const array: log[] = [];
+  getAllLogsInArray(): Log[] {
+    const array: Log[] = [];
     let currentNode: LogNode | null = this.head;
 
     while (currentNode) {

src/features/editor/stores/editor/logs-store.ts

@@ -1,17 +1,17 @@
 import { create } from 'zustand';
 
-import type { log } from '@/features/editor/types';
+import type { Log } from '@/features/editor/types';
 import { createSelectors } from '@/lib/utils';
 
 import LinkedLogs from '../../lib/linked-log';
 
 const logsList = new LinkedLogs();
 
 interface LogsState {
-  logs: log[];
+  logs: Log[];
   isFirstTime: boolean;
   alert: boolean;
-  appendLogs: (logs: log) => void;
+  appendLogs: (logs: Log) => void;
   clearLogs: () => void;
   clearAlert: () => void;
 }
@@ -20,7 +20,7 @@ const _useLogsStore = create<LogsState>((set) => ({
   logs: [],
   isFirstTime: true,
   alert: false,
-  appendLogs: (log: log) => {
+  appendLogs: (log: Log) => {
     logsList.append(log);
     set({
       logs: logsList.getAllLogsInArray(),
@@ -39,5 +39,5 @@ const _useLogsStore = create<LogsState>((set) => ({
 
 export const useLogsStore = createSelectors(_useLogsStore);
 
-export const appendLogs = (log: log) =>
+export const appendLogs = (log: Log) =>
   _useLogsStore.getState().appendLogs(log);

src/features/editor/types/index.ts

@@ -14,48 +14,30 @@ export type Loggable =
   | { error: string; stack: string }
   | (Record<string, Loggable> | undefined)[]
   | Loggable[]
-  | Error;
+  | Error
+  | baseErrorObj;
 
 export type baseErrorObj = {
   message: string;
   name: string;
   stack?: string;
   lineNumber?: string;
 };
+export type SystemError = string | SyntaxError | Error | baseErrorObj;
 
-export type SystemError =
-  | string
-  | SyntaxError
-  | Error
-  | {
-      message: string;
-      name: string;
-      stack: string;
-    };
-
-type baseLog = {
+export type Log = {
+  internalError?: boolean;
+  type: consoleAvailableHandlers;
   duration: number;
   repeats: number;
-};
-
-type baseConsoleOutput = {
-  type: consoleAvailableHandlers;
   value: Loggable;
+  detail?: string;
 };
 
-export type consoleOutput = baseConsoleOutput | consoleOutputSystemError;
-type consoleOutputSystemError = {
-  type: 'systemError';
-  value: SystemError;
-};
-
-export type log = consoleOutput & baseLog;
-export type logWithoutSystemError = baseConsoleOutput & baseLog;
-
 export type remoteControlerOutsideWorker =
   | {
       command: 'log';
-      data: Pick<logWithoutSystemError, 'type' | 'value' | 'duration'>;
+      data: Pick<Log, 'type' | 'value' | 'duration'>;
     }
   | {
       command: 'error';

src/features/editor/utils/engine/controller.ts

@@ -1,5 +1,5 @@
 import type {
-  logWithoutSystemError,
+  Log,
   remoteControlerInsideWorker,
   remoteControlerOutsideWorker,
   SystemError,
@@ -41,6 +41,7 @@ export function runJs(code: string) {
 
   DEBUG = debugMode ? DebugLog : DebugLogVoid;
 
+  // eslint-disable-next-line max-lines-per-function
   return new Promise((resolve, reject) => {
     const worker = new Worker(
       new URL('./execution-manager.ts', import.meta.url),
@@ -52,17 +53,17 @@ export function runJs(code: string) {
 
     const logError = (message: SystemError, duration: number = 0) => {
       appendLogs({
-        type: 'systemError',
+        internalError: true,
+        type: 'error',
         value: message,
         duration: duration,
         repeats: 1,
       });
     };
 
-    const logger = (
-      log: Pick<logWithoutSystemError, 'type' | 'value' | 'duration'>,
-    ) => {
+    const logger = (log: Pick<Log, 'type' | 'value' | 'duration'>) => {
       appendLogs({
+        internalError: false,
         type: log.type,
         value: log.value,
         duration: log.duration,
@@ -72,7 +73,10 @@ export function runJs(code: string) {
 
     timeoutIdRef = setTimeout(() => {
       stopJs();
-      logError('Process terminated to avoid infinite loop');
+      logError({
+        name: 'InternalError',
+        message: 'timeout',
+      });
 
       const executionTime = Date.now() - startTime;
       reject(new Error(`Execution timed out after ${executionTime}ms`));