feat: support suspence event (#6975)

* feat: support suspence event * feat: support suspense script id
alibaba · Aug 30, 2024 · 9c3d9c5 · 9c3d9c5
1 parent 61d7c95
commit 9c3d9c5
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/.changeset/seven-mails-tickle.md b/.changeset/seven-mails-tickle.md
@@ -0,0 +1,5 @@
+---
+'@ice/runtime': patch
+---
+
+feat: support suspense event
diff --git a/examples/with-suspense-ssr/src/document.tsx b/examples/with-suspense-ssr/src/document.tsx
@@ -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>

diff --git a/packages/runtime/src/Suspense.tsx b/packages/runtime/src/Suspense.tsx
@@ -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)}}();` }} />
   );
 }