From 9bb755fa205e6e489ae73c769f0b8ba0527500be Mon Sep 17 00:00:00 2001 From: mongolyy Date: Sun, 27 Mar 2022 18:10:53 +0900 Subject: [PATCH 1/2] add console vew --- src/components/InputEditor.tsx | 4 ++-- src/components/OutputEditor.tsx | 15 ++++++++++++--- src/components/Workspace.tsx | 28 ++++++++++++++++++++++++++-- src/swc.ts | 7 +++++++ 4 files changed, 47 insertions(+), 7 deletions(-) diff --git a/src/components/InputEditor.tsx b/src/components/InputEditor.tsx index c260d82..290ae3a 100644 --- a/src/components/InputEditor.tsx +++ b/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) { diff --git a/src/components/OutputEditor.tsx b/src/components/OutputEditor.tsx index bc956b4..d98c28b 100644 --- a/src/components/OutputEditor.tsx +++ b/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({ > + diff --git a/src/components/Workspace.tsx b/src/components/Workspace.tsx index ec071f4..6a96997 100644 --- a/src/components/Workspace.tsx +++ b/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,30 @@ 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) case 'code': default: return transform({ code, fileName, config: swcConfig, swc }) diff --git a/src/swc.ts b/src/swc.ts index 98ee2ab..1063d85 100644 --- a/src/swc.ts +++ b/src/swc.ts @@ -269,6 +269,13 @@ export async function loadSwc(version: string): Promise { export type TransformationResult = Result +export interface LogOutput { + type: 'LOG' | 'DBG' | 'WRN' | 'ERR', + content: string +} + +export type LogResult = Result + export function transform({ code, config, From fb0ce53326f26b26fd2302d3680c63ea135f26f1 Mon Sep 17 00:00:00 2001 From: mongolyy Date: Sun, 27 Mar 2022 18:19:46 +0900 Subject: [PATCH 2/2] refactor --- src/components/Workspace.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Workspace.tsx b/src/components/Workspace.tsx index 6a96997..2738a92 100644 --- a/src/components/Workspace.tsx +++ b/src/components/Workspace.tsx @@ -84,8 +84,9 @@ export default function Workspace() { console.error('Executed JavaScript Failed. Please see the following error messages.') console.error(error) } + return Ok(result) } - return Ok(result) + return transformedCode case 'code': default: return transform({ code, fileName, config: swcConfig, swc })