feat: add "Log view"

src/components/InputEditor.tsx

@@ -13,7 +13,7 @@ import {
   useBorderColor,
   useMonacoThemeValue,
 } from '../utils'
-import { swcVersionAtom, type Config } from '../swc'
+import { swcVersionAtom, type Config, LogResult } from '../swc'
 import type { ParserResult, TransformationResult } from '../swc'
 
 const STORAGE_KEY = 'v1.code'
@@ -41,7 +41,7 @@ function getIssueReportUrl({
 }
 
 interface Props {
-  output: TransformationResult | ParserResult
+  output: TransformationResult | ParserResult | LogResult
 }
 
 export default function InputEditor({ output }: Props) {

src/components/OutputEditor.tsx

@@ -10,6 +10,8 @@ import {
   useMonacoThemeValue,
 } from '../utils'
 import type {
+  LogOutput,
+  LogResult,
   ParserResult,
   TransformationOutput,
   TransformationResult,
@@ -19,18 +21,24 @@ function isTransformedCode(value: unknown): value is TransformationOutput {
   return typeof (value as TransformationOutput).code === 'string'
 }
 
-function stringifyOutput(output: TransformationResult | ParserResult): string {
+function isLog(value: unknown): value is LogOutput[] {
+  return (value as LogOutput[]) instanceof Array
+}
+
+function stringifyOutput(output: TransformationResult | ParserResult | LogResult): string {
   if (output.err) {
     return output.val
   } else if (isTransformedCode(output.val)) {
     return output.val.code
+  } else if (isLog(output.val)) {
+    return output.val.map((log) => `[${log.type}]: ${log.content}`).join('\n')
   } else {
     return JSON.stringify(output.val, null, 2)
   }
 }
 
 interface Props {
-  output: TransformationResult | ParserResult
+  output: TransformationResult | ParserResult | LogResult
   viewMode: string
   onViewModeChange(viewMode: string): void
 }
@@ -65,7 +73,7 @@ export default function OutputEditor({
   }
 
   const outputContent = stringifyOutput(output)
-  const editorLanguage = output.err
+  const editorLanguage = output.err || viewMode === 'log'
     ? 'text'
     : viewMode === 'code'
     ? 'javascript'
@@ -88,6 +96,7 @@ export default function OutputEditor({
           >
             <option value="code">Compiled Code</option>
             <option value="ast">AST</option>
+            <option value="log">Logs</option>
           </Select>
         </Flex>
       </Flex>

src/components/Workspace.tsx

@@ -4,9 +4,9 @@ import useSWR from 'swr'
 import { Center, CircularProgress, useToast, VStack } from '@chakra-ui/react'
 import styled from '@emotion/styled'
 import { loader } from '@monaco-editor/react'
-import { Err } from 'ts-results'
+import { Err, Ok } from 'ts-results'
 import { codeAtom, fileNameAtom, swcConfigAtom } from '../state'
-import { loadSwc, parse, swcVersionAtom, transform } from '../swc'
+import { loadSwc, LogOutput, parse, swcVersionAtom, transform } from '../swc'
 import type { AST } from '../swc'
 
 import Configuration from './Configuration'
@@ -62,6 +62,31 @@ export default function Workspace() {
     switch (viewMode) {
       case 'ast':
         return parse({ code, config: swcConfig, swc })
+      case 'log':
+        const transformedCode = transform({ code, fileName, config: swcConfig, swc })
+        const result: LogOutput[] = []
+        console.log = ((log) => {
+          result.push({ type: 'LOG', content: log })
+        })
+        console.debug = ((log) => {
+          result.push({ type: 'DBG', content: log })
+        })
+        console.warn = ((log) => {
+          result.push({ type: 'WRN', content: log })
+        })
+        console.error = ((log) => {
+          result.push({ type: 'ERR', content: log })
+        })
+        if (transformedCode.ok) {
+          try {
+            eval(transformedCode.val.code)
+          } catch (error) {
+            console.error('Executed JavaScript Failed. Please see the following error messages.')
+            console.error(error)
+          }
+          return Ok(result)
+        }
+        return transformedCode
       case 'code':
       default:
         return transform({ code, fileName, config: swcConfig, swc })

src/swc.ts

@@ -269,6 +269,13 @@ export async function loadSwc(version: string): Promise<SwcModule> {
 
 export type TransformationResult = Result<TransformationOutput, string>
 
+export interface LogOutput {
+  type: 'LOG' | 'DBG' | 'WRN' | 'ERR',
+  content: string
+}
+
+export type LogResult = Result<LogOutput[], string>
+
 export function transform({
   code,
   config,