From 887e8089c1eb887fd40440ba762d8e526b4a07da Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Sat, 26 Oct 2024 15:43:16 +0800 Subject: [PATCH] Fix(Preview): Fixed code pollution bug --- .../Playground/Output/Preview/index.tsx | 2 +- .../src/components/Playground/compiler.ts | 238 +++++++++--------- .../src/pages/System/Tools/Execute.tsx | 2 +- src/renderer/src/pages/Tools/Create.tsx | 2 +- src/renderer/src/pages/Tools/View.tsx | 4 +- 5 files changed, 123 insertions(+), 125 deletions(-) diff --git a/src/renderer/src/components/Playground/Output/Preview/index.tsx b/src/renderer/src/components/Playground/Output/Preview/index.tsx index f9882e5..ea0145e 100644 --- a/src/renderer/src/components/Playground/Output/Preview/index.tsx +++ b/src/renderer/src/components/Playground/Output/Preview/index.tsx @@ -32,7 +32,7 @@ const Preview = ({ Compiler.compile(files, importMap, entryPoint) .then((result) => { setCompiledCode( - `${preExpansionCode}\n${result.outputFiles[0].text}\n${postExpansionCode}` + `(()=>{${preExpansionCode}})();\n(()=>{${result.outputFiles[0].text}})();\n(()=>{${postExpansionCode}})();` ) setErrorMsg('') }) diff --git a/src/renderer/src/components/Playground/compiler.ts b/src/renderer/src/components/Playground/compiler.ts index bf27348..2334aa1 100644 --- a/src/renderer/src/components/Playground/compiler.ts +++ b/src/renderer/src/components/Playground/compiler.ts @@ -3,7 +3,7 @@ import localforage from 'localforage' import axios from 'axios' import esbuildWasmUrl from 'esbuild-wasm/esbuild.wasm?url' import { IFiles, IImportMap } from '@/components/Playground/shared' -import { cssToJs, jsonToJs, addReactImport } from '@/components/Playground/files' +import { addReactImport, cssToJs, jsonToJs } from '@/components/Playground/files' class Compiler { private init = false @@ -74,151 +74,149 @@ class Compiler { files: IFiles, importMap: IImportMap, entryPoint: string - ): Plugin => { - return { - name: 'file-resolver-plugin', - setup: (build: PluginBuild) => { - build.onResolve({ filter: /.*/ }, (args: esbuild.OnResolveArgs) => { - if (entryPoint === args.path) { - return { - namespace: 'OxygenToolbox', - path: args.path - } + ): Plugin => ({ + name: 'file-resolver-plugin', + setup: (build: PluginBuild) => { + build.onResolve({ filter: /.*/ }, (args: esbuild.OnResolveArgs) => { + if (entryPoint === args.path) { + return { + namespace: 'OxygenToolbox', + path: args.path } - if (args.path.startsWith('./') && files[args.path.substring(2)]) { - return { - namespace: 'OxygenToolbox', - path: args.path.substring(2) - } + } + if (args.path.startsWith('./') && files[args.path.substring(2)]) { + return { + namespace: 'OxygenToolbox', + path: args.path.substring(2) } - if (args.path.startsWith('./') && files[`${args.path.substring(2)}.tsx`]) { - return { - namespace: 'OxygenToolbox', - path: `${args.path.substring(2)}.tsx` - } + } + if (args.path.startsWith('./') && files[`${args.path.substring(2)}.tsx`]) { + return { + namespace: 'OxygenToolbox', + path: `${args.path.substring(2)}.tsx` } - if (args.path.startsWith('./') && files[`${args.path.substring(2)}.jsx`]) { - return { - namespace: 'OxygenToolbox', - path: `${args.path.substring(2)}.jsx` - } + } + if (args.path.startsWith('./') && files[`${args.path.substring(2)}.jsx`]) { + return { + namespace: 'OxygenToolbox', + path: `${args.path.substring(2)}.jsx` } - if (args.path.startsWith('./') && files[`${args.path.substring(2)}.ts`]) { - return { - namespace: 'OxygenToolbox', - path: `${args.path.substring(2)}.ts` - } + } + if (args.path.startsWith('./') && files[`${args.path.substring(2)}.ts`]) { + return { + namespace: 'OxygenToolbox', + path: `${args.path.substring(2)}.ts` } - if (args.path.startsWith('./') && files[`${args.path.substring(2)}.js`]) { - return { - namespace: 'OxygenToolbox', - path: `${args.path.substring(2)}.js` - } - } - if (/\.\/.*\.css/.test(args.path) && !args.resolveDir) { - throw Error(`Css '${args.path}' not found`) - } - - if (/^https?:\/\/.*/.test(args.path)) { - return { - namespace: 'default', - path: args.path - } - } - - if ( - args.path.includes('./') || - args.path.includes('../') || - args.path.startsWith('/') - ) { - return { - namespace: 'default', - path: new URL(args.path, args.resolveDir.substring(1)).href - } - } - - const path = importMap.imports[args.path] - - if (!path) { - throw Error(`Import '${args.path}' not found in Import Map`) + } + if (args.path.startsWith('./') && files[`${args.path.substring(2)}.js`]) { + return { + namespace: 'OxygenToolbox', + path: `${args.path.substring(2)}.js` } + } + if (/\.\/.*\.css/.test(args.path) && !args.resolveDir) { + throw Error(`Css '${args.path}' not found`) + } + if (/^https?:\/\/.*/.test(args.path)) { return { namespace: 'default', - path + path: args.path } - }) + } - build.onLoad({ filter: /.*\.css$/ }, (args: OnLoadArgs) => { - const contents = cssToJs(files[args.path]) + if ( + args.path.includes('./') || + args.path.includes('../') || + args.path.startsWith('/') + ) { return { - loader: 'js', - contents + namespace: 'default', + path: new URL(args.path, args.resolveDir.substring(1)).href } - }) + } - build.onLoad({ filter: /.*\.json$/ }, (args: OnLoadArgs) => { - const contents = jsonToJs(files[args.path]) + const path = importMap.imports[args.path] + + if (!path) { + throw Error(`Import '${args.path}' not found in Import Map`) + } + + return { + namespace: 'default', + path + } + }) + + build.onLoad({ filter: /.*\.css$/ }, (args: OnLoadArgs) => { + const contents = cssToJs(files[args.path]) + return { + loader: 'js', + contents + } + }) + + build.onLoad({ filter: /.*\.json$/ }, (args: OnLoadArgs) => { + const contents = jsonToJs(files[args.path]) + return { + loader: 'js', + contents + } + }) + + build.onLoad({ filter: /.*/ }, async (args: OnLoadArgs) => { + if (entryPoint === args.path) { return { - loader: 'js', - contents + loader: 'tsx', + contents: addReactImport(files[entryPoint].value) } - }) + } - build.onLoad({ filter: /.*/ }, async (args: OnLoadArgs) => { - if (entryPoint === args.path) { + if (files[args.path]) { + const contents = addReactImport(files[args.path].value) + if (args.path.endsWith('.jsx')) { return { - loader: 'tsx', - contents: addReactImport(files[entryPoint].value) - } - } - - if (files[args.path]) { - const contents = addReactImport(files[args.path].value) - if (args.path.endsWith('.jsx')) { - return { - loader: 'jsx', - contents - } - } - if (args.path.endsWith('.ts')) { - return { - loader: 'ts', - contents - } - } - if (args.path.endsWith('.js')) { - return { - loader: 'js', - contents - } - } - return { - loader: 'tsx', + loader: 'jsx', contents } } - - const cached = await this.fileCache.getItem(args.path) - - if (cached) { - return cached + if (args.path.endsWith('.ts')) { + return { + loader: 'ts', + contents + } } - - const axiosResponse = await axios.get(args.path) - const result: esbuild.OnLoadResult = { - loader: 'jsx', - contents: axiosResponse.data, - resolveDir: (axiosResponse.request as XMLHttpRequest).responseURL + if (args.path.endsWith('.js')) { + return { + loader: 'js', + contents + } } + return { + loader: 'tsx', + contents + } + } - await this.fileCache.setItem(args.path, result) + const cached = await this.fileCache.getItem(args.path) - return result - }) - } + if (cached) { + return cached + } + + const axiosResponse = await axios.get(args.path) + const result: esbuild.OnLoadResult = { + loader: 'jsx', + contents: axiosResponse.data, + resolveDir: (axiosResponse.request as XMLHttpRequest).responseURL + } + + await this.fileCache.setItem(args.path, result) + + return result + }) } - } + }) } export default new Compiler() diff --git a/src/renderer/src/pages/System/Tools/Execute.tsx b/src/renderer/src/pages/System/Tools/Execute.tsx index 11f88f1..3e76474 100644 --- a/src/renderer/src/pages/System/Tools/Execute.tsx +++ b/src/renderer/src/pages/System/Tools/Execute.tsx @@ -27,7 +27,7 @@ const Execute = () => { const output = result.outputFiles[0].text setCompiledCode('') setTimeout(() => { - setCompiledCode(`${output}\n${baseDist}`) + setCompiledCode(`(() => {${output}})();\n(() => {${baseDist}})();`) }, 100) }) .catch((reason) => { diff --git a/src/renderer/src/pages/Tools/Create.tsx b/src/renderer/src/pages/Tools/Create.tsx index 5fa73b1..450b5ba 100644 --- a/src/renderer/src/pages/Tools/Create.tsx +++ b/src/renderer/src/pages/Tools/Create.tsx @@ -145,7 +145,7 @@ const Create = () => { .compile(files, importMap, template.entryPoint) .then((result) => { const output = result.outputFiles[0].text - setCompiledCode(`${output}\n${baseDist}`) + setCompiledCode(`(() => {${output}})();\n(() => {${baseDist}})();`) }) .catch((reason) => { void message.error(`编译失败：${reason}`) diff --git a/src/renderer/src/pages/Tools/View.tsx b/src/renderer/src/pages/Tools/View.tsx index 0a805a1..8d1f212 100644 --- a/src/renderer/src/pages/Tools/View.tsx +++ b/src/renderer/src/pages/Tools/View.tsx @@ -39,7 +39,7 @@ const View = () => { const output = result.outputFiles[0].text setCompiledCode('') setTimeout(() => { - setCompiledCode(`${output}\n${baseDist}`) + setCompiledCode(`(() => {${output}})();\n(() => {${baseDist}})();`) }, 100) }) .catch((reason) => { @@ -54,7 +54,7 @@ const View = () => { const dist = base64ToStr(toolVo.dist.data!) setCompiledCode('') setTimeout(() => { - setCompiledCode(`${dist}\n${baseDist}`) + setCompiledCode(`(() => {${dist}})();\n(() => {${baseDist}})();`) }, 100) } catch (e) { void message.error('载入工具失败')