FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Compare commits

base: FatttSnake:v1.0.2
Branches Tags
FatttSnake:master FatttSnake:dev FatttSnake:release/1.1.0 FatttSnake:release/1.0.2 FatttSnake:release/1.0.1 FatttSnake:release/1.0.0
FatttSnake:v1.1.0 FatttSnake:v1.0.2 FatttSnake:v1.0.1 FatttSnake:v1.0.0
...
compare: FatttSnake:f111c838172b76176eceed33915409c3aa6de385
Branches Tags
FatttSnake:dev FatttSnake:master FatttSnake:release/1.1.0 FatttSnake:release/1.0.2 FatttSnake:release/1.0.1 FatttSnake:release/1.0.0
FatttSnake:v1.1.0 FatttSnake:v1.0.2 FatttSnake:v1.0.1 FatttSnake:v1.0.0

1 Commits
v1.0.2 ... f111c83817

Author SHA1 Message Date
FatttSnake
f111c83817 Fix(Preview): Fixed code pollution bug 
Methods and variables in base and main code are isolated to solve the problem of code pollution.
 2024-09-09 16:55:41 +08:00
7 changed files with 129 additions and 131 deletions
Expand all files Collapse all files

10
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "oxygen-ui", "name": "oxygen-ui",
"version": "1.0.0-SNAPSHOT", "version": "1.0.1-SNAPSHOT",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "oxygen-ui", "name": "oxygen-ui",
"version": "1.0.0-SNAPSHOT", "version": "1.0.1-SNAPSHOT",
"dependencies": { "dependencies": {
"@ant-design/icons": "^5.3.7", "@ant-design/icons": "^5.3.7",
"@dnd-kit/core": "^6.1.0", "@dnd-kit/core": "^6.1.0",
@@ -2153,9 +2153,9 @@
} }
}, },
"node_modules/acorn": { "node_modules/acorn": {
"version": "8.11.3", "version": "8.12.1",
"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.11.3.tgz", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
"integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
"dev": true, "dev": true,
"bin": { "bin": {
"acorn": "bin/acorn" "acorn": "bin/acorn"

2
package.json
View File

@@ -4,7 +4,7 @@
"type": "module", "type": "module",
"version": "1.0.1-SNAPSHOT", "version": "1.0.1-SNAPSHOT",
"description": "Oxygen Toolbox browser version", "description": "Oxygen Toolbox browser version",
"author": { "author": {
"name": "FatttSnake", "name": "FatttSnake",
"email": "fatttsnake@fatweb.top", "email": "fatttsnake@fatweb.top",
"url": "https://fatweb.top" "url": "https://fatweb.top"

2
src/components/Playground/Output/Preview/index.tsx
View File

@@ -32,7 +32,7 @@ const Preview = ({
Compiler.compile(files, importMap, entryPoint) Compiler.compile(files, importMap, entryPoint)
.then((result) => { .then((result) => {
setCompiledCode( setCompiledCode(
`${preExpansionCode}\n${result.outputFiles[0].text}\n${postExpansionCode}` `(()=>{${preExpansionCode}})();\n(()=>{${result.outputFiles[0].text}})();\n(()=>{${postExpansionCode}})();`
) )
setErrorMsg('') setErrorMsg('')
}) })

238
src/components/Playground/compiler.ts
View File

@@ -2,7 +2,7 @@ import esbuild, { Loader, OnLoadArgs, Plugin, PluginBuild } from 'esbuild-wasm'
import localforage from 'localforage' import localforage from 'localforage'
import axios from 'axios' import axios from 'axios'
import { IFiles, IImportMap } from '@/components/Playground/shared' 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 { class Compiler {
private init = false private init = false
@@ -73,151 +73,149 @@ class Compiler {
files: IFiles, files: IFiles,
importMap: IImportMap, importMap: IImportMap,
entryPoint: string entryPoint: string
): Plugin => { ): Plugin => ({
return { name: 'file-resolver-plugin',
name: 'file-resolver-plugin', setup: (build: PluginBuild) => {
setup: (build: PluginBuild) => { build.onResolve({ filter: /.*/ }, (args: esbuild.OnResolveArgs) => {
build.onResolve({ filter: /.*/ }, (args: esbuild.OnResolveArgs) => { if (entryPoint === args.path) {
if (entryPoint === args.path) { return {
return { namespace: 'OxygenToolbox',
namespace: 'OxygenToolbox', path: args.path
path: args.path
}
} }
if (args.path.startsWith('./') && files[args.path.substring(2)]) { }
return { if (args.path.startsWith('./') && files[args.path.substring(2)]) {
namespace: 'OxygenToolbox', return {
path: args.path.substring(2) namespace: 'OxygenToolbox',
} path: args.path.substring(2)
} }
if (args.path.startsWith('./') && files[`${args.path.substring(2)}.tsx`]) { }
return { if (args.path.startsWith('./') && files[`${args.path.substring(2)}.tsx`]) {
namespace: 'OxygenToolbox', return {
path: `${args.path.substring(2)}.tsx` namespace: 'OxygenToolbox',
} path: `${args.path.substring(2)}.tsx`
} }
if (args.path.startsWith('./') && files[`${args.path.substring(2)}.jsx`]) { }
return { if (args.path.startsWith('./') && files[`${args.path.substring(2)}.jsx`]) {
namespace: 'OxygenToolbox', return {
path: `${args.path.substring(2)}.jsx` namespace: 'OxygenToolbox',
} path: `${args.path.substring(2)}.jsx`
} }
if (args.path.startsWith('./') && files[`${args.path.substring(2)}.ts`]) { }
return { if (args.path.startsWith('./') && files[`${args.path.substring(2)}.ts`]) {
namespace: 'OxygenToolbox', return {
path: `${args.path.substring(2)}.ts` namespace: 'OxygenToolbox',
} path: `${args.path.substring(2)}.ts`
} }
if (args.path.startsWith('./') && files[`${args.path.substring(2)}.js`]) { }
return { if (args.path.startsWith('./') && files[`${args.path.substring(2)}.js`]) {
namespace: 'OxygenToolbox', return {
path: `${args.path.substring(2)}.js` 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 (/\.\/.*\.css/.test(args.path) && !args.resolveDir) {
throw Error(`Css '${args.path}' not found`)
}
if (/^https?:\/\/.*/.test(args.path)) {
return { return {
namespace: 'default', namespace: 'default',
path path: args.path
} }
}) }
build.onLoad({ filter: /.*\.css$/ }, (args: OnLoadArgs) => { if (
const contents = cssToJs(files[args.path]) args.path.includes('./') ||
args.path.includes('../') ||
args.path.startsWith('/')
) {
return { return {
loader: 'js', namespace: 'default',
contents path: new URL(args.path, args.resolveDir.substring(1)).href
} }
}) }
build.onLoad({ filter: /.*\.json$/ }, (args: OnLoadArgs) => { const path = importMap.imports[args.path]
const contents = jsonToJs(files[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 { return {
loader: 'js', loader: 'tsx',
contents contents: addReactImport(files[entryPoint].value)
} }
}) }
build.onLoad({ filter: /.*/ }, async (args: OnLoadArgs) => { if (files[args.path]) {
if (entryPoint === args.path) { const contents = addReactImport(files[args.path].value)
if (args.path.endsWith('.jsx')) {
return { return {
loader: 'tsx', loader: 'jsx',
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',
contents contents
} }
} }
if (args.path.endsWith('.ts')) {
const cached = await this.fileCache.getItem<esbuild.OnLoadResult>(args.path) return {
loader: 'ts',
if (cached) { contents
return cached }
} }
if (args.path.endsWith('.js')) {
const axiosResponse = await axios.get<string>(args.path) return {
const result: esbuild.OnLoadResult = { loader: 'js',
loader: 'jsx', contents
contents: axiosResponse.data, }
resolveDir: (axiosResponse.request as XMLHttpRequest).responseURL
} }
return {
loader: 'tsx',
contents
}
}
await this.fileCache.setItem(args.path, result) const cached = await this.fileCache.getItem<esbuild.OnLoadResult>(args.path)
return result if (cached) {
}) return cached
} }
const axiosResponse = await axios.get<string>(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() export default new Compiler()

2
src/pages/System/Tools/Execute.tsx
View File

@@ -27,7 +27,7 @@ const Execute = () => {
const output = result.outputFiles[0].text const output = result.outputFiles[0].text
setCompiledCode('') setCompiledCode('')
setTimeout(() => { setTimeout(() => {
setCompiledCode(`${output}\n${baseDist}`) setCompiledCode(`(() => {${output}})();\n(() => {${baseDist}})();`)
}, 100) }, 100)
}) })
.catch((reason) => { .catch((reason) => {

2
src/pages/Tools/Create.tsx
View File

@@ -145,7 +145,7 @@ const Create = () => {
.compile(files, importMap, template.entryPoint) .compile(files, importMap, template.entryPoint)
.then((result) => { .then((result) => {
const output = result.outputFiles[0].text const output = result.outputFiles[0].text
setCompiledCode(`${output}\n${baseDist}`) setCompiledCode(`(() => {${output}})();\n(() => {${baseDist}})();`)
}) })
.catch((reason) => { .catch((reason) => {
void message.error(`编译失败：${reason}`) void message.error(`编译失败：${reason}`)

4
src/pages/Tools/View.tsx
View File

@@ -34,7 +34,7 @@ const View = () => {
const output = result.outputFiles[0].text const output = result.outputFiles[0].text
setCompiledCode('') setCompiledCode('')
setTimeout(() => { setTimeout(() => {
setCompiledCode(`${output}\n${baseDist}`) setCompiledCode(`(() => {${output}})();\n(() => {${baseDist}})();`)
}, 100) }, 100)
}) })
.catch((reason) => { .catch((reason) => {
@@ -49,7 +49,7 @@ const View = () => {
const dist = base64ToStr(toolVo.dist.data!) const dist = base64ToStr(toolVo.dist.data!)
setCompiledCode('') setCompiledCode('')
setTimeout(() => { setTimeout(() => {
setCompiledCode(`${dist}\n${baseDist}`) setCompiledCode(`(() => {${dist}})();\n(() => {${baseDist}})();`)
}, 100) }, 100)
} catch (e) { } catch (e) {
void message.error('载入工具失败') void message.error('载入工具失败')