From 8e880cc1ed88ab5e1ce8936f7d17a8fb3ee44859 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Fri, 12 Jan 2024 23:45:33 +0800 Subject: [PATCH] Optimize code --- .../Playground/Output/Transform/index.tsx | 5 ++--- src/components/Playground/compiler.ts | 15 ++++++------- src/components/Playground/files.ts | 7 ++++++ src/components/Playground/index.tsx | 2 +- src/components/Playground/utils.ts | 22 ------------------- 5 files changed, 17 insertions(+), 34 deletions(-) delete mode 100644 src/components/Playground/utils.ts diff --git a/src/components/Playground/Output/Transform/index.tsx b/src/components/Playground/Output/Transform/index.tsx index 122a3a0..a5eb75a 100644 --- a/src/components/Playground/Output/Transform/index.tsx +++ b/src/components/Playground/Output/Transform/index.tsx @@ -4,8 +4,7 @@ import { Loader } from 'esbuild-wasm' import '@/components/Playground/Output/Transform/transform.scss' import { useUpdatedEffect } from '@/util/hooks' import { IFile, ITheme } from '@/components/Playground/shared' -import { addReactImport } from '@/components/Playground/utils' -import { cssToJs, jsonToJs } from '@/components/Playground/files' +import { cssToJs, jsonToJs, addReactImport } from '@/components/Playground/files' import Compiler from '@/components/Playground/compiler' import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig' @@ -29,7 +28,7 @@ const Transform: React.FC = ({ file, theme }) => { setCompiledCode(value.code) setErrorMsg('') }) - .catch((e) => { + .catch((e: Error) => { setErrorMsg(`编译失败：${e.message}`) }) } diff --git a/src/components/Playground/compiler.ts b/src/components/Playground/compiler.ts index 97f4761..1862e24 100644 --- a/src/components/Playground/compiler.ts +++ b/src/components/Playground/compiler.ts @@ -2,8 +2,7 @@ import esbuild, { Loader, OnLoadArgs, Plugin, PluginBuild } from 'esbuild-wasm' import localforage from 'localforage' import axios from 'axios' import { IFiles, IImportMap } from '@/components/Playground/shared' -import { cssToJs, ENTRY_FILE_NAME, jsonToJs } from '@/components/Playground/files' -import { addReactImport } from '@/components/Playground/utils' +import { cssToJs, ENTRY_FILE_NAME, jsonToJs, addReactImport } from '@/components/Playground/files' class Compiler { private init = false @@ -71,7 +70,7 @@ class Compiler { return { name: 'file-resolver-plugin', setup: (build: PluginBuild) => { - build.onResolve({ filter: /.*/ }, async (args: esbuild.OnResolveArgs) => { + build.onResolve({ filter: /.*/ }, (args: esbuild.OnResolveArgs) => { if (args.path === ENTRY_FILE_NAME) { return { namespace: 'OxygenToolbox', @@ -142,7 +141,7 @@ class Compiler { } }) - build.onLoad({ filter: /.*\.css$/ }, async (args: OnLoadArgs) => { + build.onLoad({ filter: /.*\.css$/ }, (args: OnLoadArgs) => { const contents = cssToJs(files[args.path]) return { loader: 'js', @@ -150,7 +149,7 @@ class Compiler { } }) - build.onLoad({ filter: /.*\.json$/ }, async (args: OnLoadArgs) => { + build.onLoad({ filter: /.*\.json$/ }, (args: OnLoadArgs) => { const contents = jsonToJs(files[args.path]) return { loader: 'js', @@ -198,11 +197,11 @@ class Compiler { return cached } - const { data, request } = await axios.get(args.path) + const axiosResponse = await axios.get(args.path) const result: esbuild.OnLoadResult = { loader: 'jsx', - contents: data, - resolveDir: request.responseURL + contents: axiosResponse.data, + resolveDir: (axiosResponse.request as XMLHttpRequest).responseURL } await this.fileCache.setItem(args.path, result) diff --git a/src/components/Playground/files.ts b/src/components/Playground/files.ts index 695e0f0..e876732 100644 --- a/src/components/Playground/files.ts +++ b/src/components/Playground/files.ts @@ -90,6 +90,13 @@ export const cssToJs = (file: IFile) => { ` } +export const addReactImport = (code: string) => { + if (!/import\s+React/g.test(code)) { + return `import React from 'react';\n${code}` + } + return code +} + export const initFiles: IFiles = getFilesFromUrl() || { [ENTRY_FILE_NAME]: { name: ENTRY_FILE_NAME, diff --git a/src/components/Playground/index.tsx b/src/components/Playground/index.tsx index df2b8a9..c7d2fbb 100644 --- a/src/components/Playground/index.tsx +++ b/src/components/Playground/index.tsx @@ -18,7 +18,7 @@ const Playground: React.FC = ({ initFiles, initImportMap }) => const handleOnChangeFileContent = (content: string, fileName: string, files: IFiles) => { if (fileName === IMPORT_MAP_FILE_NAME) { - setImportMap(JSON.parse(content)) + setImportMap(JSON.parse(content) as IImportMap) } else { delete files[IMPORT_MAP_FILE_NAME] setFiles(files) diff --git a/src/components/Playground/utils.ts b/src/components/Playground/utils.ts deleted file mode 100644 index d1d9968..0000000 --- a/src/components/Playground/utils.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { ITheme } from '@/components/Playground/shared' - -const STORAGE_DARK_THEME = 'react-playground-prefer-dark' - -export const setPlaygroundTheme = (theme: ITheme) => { - localStorage.setItem(STORAGE_DARK_THEME, String(theme === 'vs-dark')) - document - .querySelectorAll('div[data-id="react-playground"]') - ?.forEach((item) => item.setAttribute('class', theme)) -} - -export const getPlaygroundTheme = (): ITheme => { - const isDarkTheme = JSON.parse(localStorage.getItem(STORAGE_DARK_THEME) || 'false') as ITheme - return isDarkTheme ? 'vs-dark' : 'light' -} - -export const addReactImport = (code: string) => { - if (!/import\s+React/g.test(code)) { - return `import React from 'react';\n${code}` - } - return code -}