Merge f5005afad5 into d55e34bc56

* 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>

.changeset/lucky-weeks-nail.md

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

packages/runtime/src/Suspense.tsx

@@ -126,6 +126,11 @@ interface SuspenseProps {
   [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) {
   return (props: SuspenseProps) => {
     const { fallback, id, ...componentProps } = props;
@@ -153,10 +158,22 @@ export function withSuspense(Component) {
 
     return (
       <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}>
           <Component {...componentProps} />
+          <InlineScript
+            id={`suspense-parse-data-${id}`}
+            script={`(${DISPATCH_SUSPENSE_EVENT_STRING})('ice-suspense-parse-data','${id}');`}
+          />
           <Data id={id} />
         </SuspenseContext.Provider>
+        <InlineScript
+          id={`suspense-parse-end-${id}`}
+          script={`(${DISPATCH_SUSPENSE_EVENT_STRING})('ice-suspense-parse-end','${id}');`}
+        />
       </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
+    />
+  );
+}