diff --git a/package-lock.json b/package-lock.json index ace8864..20541b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "oxygen-ui", - "version": "1.0.0-SNAPSHOT", + "version": "1.0.1-SNAPSHOT", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "oxygen-ui", - "version": "1.0.0-SNAPSHOT", + "version": "1.0.1-SNAPSHOT", "dependencies": { "@ant-design/icons": "^5.3.7", "@dnd-kit/core": "^6.1.0", @@ -2153,9 +2153,9 @@ } }, "node_modules/acorn": { - "version": "8.11.3", - "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.11.3.tgz", - "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", + "version": "8.12.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", + "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==", "dev": true, "bin": { "acorn": "bin/acorn" diff --git a/package.json b/package.json index 1676b36..5750c5a 100644 --- a/package.json +++ b/package.json @@ -2,9 +2,9 @@ "name": "oxygen-ui", "private": true, "type": "module", - "version": "1.0.0-SNAPSHOT", + "version": "1.0.1-SNAPSHOT", "description": "Oxygen Toolbox browser version", - "author": { + "author": { "name": "FatttSnake", "email": "fatttsnake@fatweb.top", "url": "https://fatweb.top" diff --git a/src/components/Playground/Output/Preview/index.tsx b/src/components/Playground/Output/Preview/index.tsx index f9882e5..ea0145e 100644 --- a/src/components/Playground/Output/Preview/index.tsx +++ b/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/components/Playground/compiler.ts b/src/components/Playground/compiler.ts index e7939f7..3502f8c 100644 --- a/src/components/Playground/compiler.ts +++ b/src/components/Playground/compiler.ts @@ -2,7 +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, jsonToJs, addReactImport } from '@/components/Playground/files' +import { addReactImport, cssToJs, jsonToJs } from '@/components/Playground/files' class Compiler { private init = false @@ -73,151 +73,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/pages/System/Tools/Execute.tsx b/src/pages/System/Tools/Execute.tsx index 11f88f1..3e76474 100644 --- a/src/pages/System/Tools/Execute.tsx +++ b/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/pages/Tools/Create.tsx b/src/pages/Tools/Create.tsx index 5fa73b1..450b5ba 100644 --- a/src/pages/Tools/Create.tsx +++ b/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/pages/Tools/View.tsx b/src/pages/Tools/View.tsx index 327394f..03a9995 100644 --- a/src/pages/Tools/View.tsx +++ b/src/pages/Tools/View.tsx @@ -34,7 +34,7 @@ const View = () => { const output = result.outputFiles[0].text setCompiledCode('') setTimeout(() => { - setCompiledCode(`${output}\n${baseDist}`) + setCompiledCode(`(() => {${output}})();\n(() => {${baseDist}})();`) }, 100) }) .catch((reason) => { @@ -49,7 +49,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('载入工具失败')