重构内置 env.ts 实现 (#7124)

* refactor: add env for themis, delete PHA/Kraken, simplize WindVane

* chore: add changeset

.changeset/lucky-weeks-nail.md

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

.changeset/silver-foxes-run.md

@@ -0,0 +1,5 @@
+---
+'@ice/app': patch
+---
+
+refactor: add env for themis, delete PHA/Kraken, simplize WindVane

packages/ice/templates/core/env.ts.ejs

@@ -9,16 +9,14 @@ export const isByteDanceMicroApp = isClient && import.meta.target === 'bytedance
 export const isBaiduSmartProgram = isClient && import.meta.target === 'baidu-smartprogram';
 export const isKuaiShouMiniProgram = isClient && import.meta.target === 'kuaishou-miniprogram';
 export const isWeChatMiniProgram = isClient && import.meta.target === 'wechat-miniprogram';
-export const isKraken = isClient && import.meta.target === 'kraken';
 export const isQuickApp = false; // Now ice.js will not implement quick app target.
-export const isMiniApp = isAliMiniApp;// in universal-env, isMiniApp is equals to isAliMiniApp
+export const isMiniApp = isAliMiniApp; // in universal-env, isMiniApp is equals to isAliMiniApp
 
 // Following variables are runtime executed envs.
 // See also @uni/env.
-export const isPHA = isWeb && typeof pha === 'object';
 const ua = typeof navigator === 'object' ? navigator.userAgent || navigator.swuserAgent : '';
-const wvRegExp = /.+AliApp\((\w+)\/((?:\d+\.)+\d+)\).* .*(WindVane)(?:\/((?:\d+\.)+\d+))?.*/;
+export const isThemis = /Themis/.test(ua);
-export const isWindVane = wvRegExp.test(ua) && isWeb && typeof WindVane !== 'undefined' && typeof WindVane.call !== 'undefined';
+export const isWindVane = /WindVane/i.test(ua) && isWeb && typeof WindVane !== 'undefined' && typeof WindVane.call !== 'undefined';
 // WindVane.call is a function while page importing lib-windvane
 export const isFRM = isMiniApp && isWeb && typeof my !== 'undefined' && typeof my.isFRM !== 'undefined';
 
@@ -27,14 +25,13 @@ export default {
   isWeb,
   isNode,
   isWeex,
-  isKraken,
+  isThemis,
   isMiniApp,
   isByteDanceMicroApp,
   isBaiduSmartProgram,
   isKuaiShouMiniProgram,
   isWeChatMiniProgram,
   isQuickApp,
-  isPHA,
   isWindVane,
   isFRM,
 };

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
+    />
+  );
+}