fix: runtime should compat with old browsers (alibaba#6478)

* fix: runtime should compat with old browsers * fix: optimize code * fix: lint * chore: optimize code * chore: optimize code
HomyeeKing · Sep 11, 2023 · e4b17fc · e4b17fc
1 parent c2b85fc
commit e4b17fc
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/.changeset/twenty-rules-attend.md b/.changeset/twenty-rules-attend.md
@@ -0,0 +1,5 @@
+---
+'@ice/runtime': patch
+---
+
+fix: runtime should compatible with old browsers
diff --git a/packages/runtime/src/Document.tsx b/packages/runtime/src/Document.tsx
@@ -187,7 +187,7 @@ export const Data: DataType = (props: DataProps) => {
     // Should merge global context when there are multiple <Data />.
     <ScriptElement
       suppressHydrationWarning={documentOnly}
-      dangerouslySetInnerHTML={{ __html: `window.__ICE_APP_CONTEXT__=Object.assign(${JSON.stringify(windowContext)}, window.__ICE_APP_CONTEXT__ || {});` }}
+      dangerouslySetInnerHTML={{ __html: `!(function () {var a = window.__ICE_APP_CONTEXT__ || {};var b = ${JSON.stringify(windowContext)};for (var k in a) {b[k] = a[k]}window.__ICE_APP_CONTEXT__=b;})();` }}
     />
   );
 };

diff --git a/packages/runtime/src/Suspense.tsx b/packages/runtime/src/Suspense.tsx
@@ -28,9 +28,18 @@ const SuspenseContext = React.createContext<SuspenseState | undefined>(undefined
 
 const getHydrateData = (id: string) => {
   let data = null;
-  const hasHydrateData = isClient && window[LOADER] && window[LOADER].has(id);
-  if (hasHydrateData) {
-    data = window[LOADER].get(id);
+  const loaderData = isClient && window[LOADER];
+  let hasHydrateData: boolean;
+  if (loaderData) {
+    // Compatible with the old version which use Map to store data.
+    if (loaderData.has) {
+      hasHydrateData = loaderData.has(id);
+      data = window[LOADER].get(id);
+    } else {
+      hasHydrateData = Object.prototype.hasOwnProperty.call(loaderData, id);
+      // If hasHydrateData is false, data will be undefined.
+      data = window[LOADER][id];
+    }
   }
   return {
     hasHydrateData,
@@ -157,6 +166,6 @@ function Data(props) {
   const data = useSuspenseData();
 
   return (
-    <script dangerouslySetInnerHTML={{ __html: `if (!window.${LOADER}) { window.${LOADER} = new Map();} window.${LOADER}.set('${props.id}', ${JSON.stringify(data)})` }} />
+    <script dangerouslySetInnerHTML={{ __html: `!function(){window['${LOADER}'] = window['${LOADER}'] || {};window['${LOADER}']['${props.id}'] = ${JSON.stringify(data)}}();` }} />
   );
 }