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

Complete main UI #37

Merged
FatttSnake merged 192 commits from FatttSnake into dev 2024-02-23 16:31:17 +08:00
Conversation 0 Commits 192 Files Changed 215 +12 -43
3 changed files with 12 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a7df95a613 - Show all commits

39
src/components/Playground/Output/Preview/Render.tsx
View File

@@ -4,7 +4,6 @@ import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
interface RenderProps {
iframeKey: string
compiledCode: string
onError?: (errorMsg: string) => void
}
interface IMessage {
@@ -30,38 +29,19 @@ const getIframeUrl = (iframeRaw: string) => {
const iframeUrl = getIframeUrl(iframeRaw)
const Render = ({ iframeKey, compiledCode, onError }: RenderProps) => {
const Render = ({ iframeKey, compiledCode }: RenderProps) => {
const iframeRef = useRef<HTMLIFrameElement>(null)
const [loaded, setLoaded] = useState(false)
const handleMessage = ({ data }: { data: IMessage }) => {
const { type, msg } = data
switch (type) {
case 'LOADED':
setLoaded(true)
break
case 'ERROR':
onError?.(msg)
break
case 'DONE':
onError?.('')
}
}
useEffect(() => {
window.addEventListener('message', handleMessage)
return () => {
window.removeEventListener('message', handleMessage)
}
}, [])
useEffect(() => {
if (loaded) {
iframeRef.current?.contentWindow?.postMessage({
type: 'UPDATE',
data: { compiledCode }
} as IMessage)
iframeRef.current?.contentWindow?.postMessage(
{
type: 'UPDATE',
data: { compiledCode }
} as IMessage,
'*'
)
}
}, [compiledCode, loaded])
@@ -71,7 +51,8 @@ const Render = ({ iframeKey, compiledCode, onError }: RenderProps) => {
key={iframeKey}
ref={iframeRef}
src={iframeUrl}
sandbox="allow-popups-to-escape-sandbox allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation allow-modals allow-same-origin"
onLoad={() => setLoaded(true)}
sandbox="allow-downloads allow-forms allow-modals allow-scripts"
/>
)
}

9
src/components/Playground/Output/Preview/iframe.html
View File

@@ -8,14 +8,6 @@
</head>
<body>
<script>
window.addEventListener("error", (e) => {
window.parent.postMessage({ type: "ERROR", msg: e.message });
});
window.addEventListener("load", () => {
window.parent.postMessage({ type: "LOADED", msg: "" });
});
window.addEventListener("message", ({ data }) => {
if (data?.type === "UPDATE") {
// Record old styles that need to be removed
@@ -43,7 +35,6 @@
};
document.body.appendChild(script);
URL.revokeObjectURL(oldSrc);
window.parent.postMessage({ type: "DONE", msg: "" });
}
});
</script>

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

@@ -23,10 +23,6 @@ const Preview = ({
const [errorMsg, setErrorMsg] = useState('')
const [compiledCode, setCompiledCode] = useState('')
const handleOnError = (errorMsg: string) => {
setErrorMsg(errorMsg)
}
useEffect(() => {
if (!Object.keys(files).length || !importMap || !entryPoint.length) {
return
@@ -36,6 +32,7 @@ const Preview = ({
setCompiledCode(
`${preExpansionCode}\n${result.outputFiles[0].text}\n${postExpansionCode}`
)
setErrorMsg('')
})
.catch((e: Error) => {
setErrorMsg(`编译失败：${e.message}`)
@@ -44,7 +41,7 @@ const Preview = ({
return (
<div data-component={'playground-preview'}>
<Render iframeKey={iframeKey} compiledCode={compiledCode} onError={handleOnError} />
<Render iframeKey={iframeKey} compiledCode={compiledCode} />
{errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
</div>
)