root
/
ice
mirror of https://github.com/alibaba/ice.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

feat(runtime): add suspense event dispatch in Suspense component (#7122) 

* feat(runtime): add suspense event dispatch in Suspense component

* chore(runtime): add changeset

* fix(runtime): Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fix(runtime): optimize Suspense component script rendering

* fix(runtime): move dispatchSuspenseEvent function outside of withSuspense in Suspense.tsx

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Mixiu 2025-07-22 15:47:58 +08:00 committed by GitHub
parent b2d93c6ffe
commit d55e34bc56
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 39 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/lucky-weeks-nail.md Normal file
View File

@ -0,0 +1,5 @@
---
'@ice/runtime': patch
---
feat: add suspense event dispatch in Suspense component

34
packages/runtime/src/Suspense.tsx
View File

@ -126,6 +126,11 @@ interface SuspenseProps {
[key: string]: any; [key: string]: any;
} }
function dispatchSuspenseEvent(event: string, id: string) {
window.dispatchEvent(new CustomEvent(event, { detail: { id } }));
}
const DISPATCH_SUSPENSE_EVENT_STRING = dispatchSuspenseEvent.toString();
export function withSuspense(Component) { export function withSuspense(Component) {
return (props: SuspenseProps) => { return (props: SuspenseProps) => {
const { fallback, id, ...componentProps } = props; const { fallback, id, ...componentProps } = props;
@ -153,10 +158,22 @@ export function withSuspense(Component) {
return ( return (
<React.Suspense fallback={fallback || null}> <React.Suspense fallback={fallback || null}>
<InlineScript
id={`suspense-parse-start-${id}`}
script={`(${DISPATCH_SUSPENSE_EVENT_STRING})('ice-suspense-parse-start','${id}');`}
/>
<SuspenseContext.Provider value={suspenseState}> <SuspenseContext.Provider value={suspenseState}>
<Component {...componentProps} /> <Component {...componentProps} />
<InlineScript
id={`suspense-parse-data-${id}`}
script={`(${DISPATCH_SUSPENSE_EVENT_STRING})('ice-suspense-parse-data','${id}');`}
/>
<Data id={id} /> <Data id={id} />
</SuspenseContext.Provider> </SuspenseContext.Provider>
<InlineScript
id={`suspense-parse-end-${id}`}
script={`(${DISPATCH_SUSPENSE_EVENT_STRING})('ice-suspense-parse-end','${id}');`}
/>
</React.Suspense> </React.Suspense>
); );
}; };
@ -174,3 +191,20 @@ function Data(props) {
/> />
); );
} }
interface InlineScriptProps {
id: string;
script: string;
}
function InlineScript(props: InlineScriptProps) {
return (
<script
id={props.id}
dangerouslySetInnerHTML={{
__html: props.script,
}}
suppressHydrationWarning
/>
);
}