alibaba/ice
alibaba/ice
1
0
Fork 0
mirror of https://github.com/alibaba/ice.git synced 2024-10-23 07:04:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: support suspence event (#6975)

Browse Source 
* feat: support suspence event

* feat: support suspense script id
This commit is contained in:
染陌同学 2024-08-30 10:23:38 +08:00 committed by GitHub
parent 61d7c95d30
commit 9c3d9c583e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/seven-mails-tickle.md Normal file
View File

@ -0,0 +1,5 @@
---
'@ice/runtime': patch
---
feat: support suspense event

1
examples/with-suspense-ssr/src/document.tsx
View File

@ -13,6 +13,7 @@ function Document() {
</head>
<body>
<Main />
<script dangerouslySetInnerHTML={{ __html: 'window.addEventListener(\'suspense\', (d) => console.log(\'suspence event=\', d))' }} />
<Scripts async />
</body>
</html>

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

@ -156,6 +156,7 @@ export function withSuspense(Component) {
<SuspenseContext.Provider value={suspenseState}>
<Component {...componentProps} />
<Data id={id} />
<script dangerouslySetInnerHTML={{ __html: `window.dispatchEvent(new CustomEvent('suspense', { detail: { id: '${id}' } }));` }} />
</SuspenseContext.Provider>
</React.Suspense>
);
@ -166,6 +167,6 @@ function Data(props) {
const data = useSuspenseData();
return (
<script dangerouslySetInnerHTML={{ __html: `!function(){window['${LOADER}'] = window['${LOADER}'] || {};window['${LOADER}']['${props.id}'] = ${JSON.stringify(data)}}();` }} />
<script id={props.id ? `suspenseScript:${props.id}` : ''} dangerouslySetInnerHTML={{ __html: `!function(){window['${LOADER}'] = window['${LOADER}'] || {};window['${LOADER}']['${props.id}'] = ${JSON.stringify(data)}}();` }} />
);
}