[Feature][PerformanceAPI] add LazyBundleEntry and ReloadBundleEntry demo

remove useless tti demo

Author: partholon

examples/performance-api/lynx.config.mjs

@@ -11,18 +11,19 @@ import { pluginTypeCheck } from "@rsbuild/plugin-type-check";
 export default defineConfig({
   source: {
     entry: {
-      fcp_entry: "./src/fcp_entry/index.tsx",
-      tti_entry: "./src/tti_entry/index.tsx",
-      actual_fmp_entry: "./src/actual_fmp_entry/index.tsx",
+      metric_fcp_entry: "./src/fcp_entry/index.tsx",
+      metric_actual_fmp_entry: "./src/actual_fmp_entry/index.tsx",
       pipeline_entry: "./src/pipeline_entry/index.tsx",
       load_bundle_entry: "./src/load_bundle_entry/index.tsx",
-      InitLynxviewEntry: "./src/init_lynxview_entry/index.tsx",
-      InitBackgroundRuntimeEntry: "./src/init_background_runtime_entry/index.tsx",
-      InitContainerEntry: "./src/init_container_entry/index.tsx",
-      CreateCustomPerformanceMetric: "./src/create_custom_performance_metric/index.tsx",
-      PerformanceObserverObserve: "./src/performance_observer_observe/index.tsx",
-      PerformanceObserverDisconnect: "./src/performance_observer_disconnect/index.tsx",
-      SimpleObseve: "./src/simple_observe/index.tsx",
+      init_lynxview_entry: "./src/init_lynxview_entry/index.tsx",
+      init_background_runtime_entry: "./src/init_background_runtime_entry/index.tsx",
+      init_container_entry: "./src/init_container_entry/index.tsx",
+      create_custom_performance_metric: "./src/create_custom_performance_metric/index.tsx",
+      performance_observer_observe: "./src/performance_observer_observe/index.tsx",
+      performance_observer_disconnect: "./src/performance_observer_disconnect/index.tsx",
+      simple_observe: "./src/simple_observe/index.tsx",
+      reload_bundle_entry: "./src/reload_bundle_entry/index.tsx",
+      lazy_bundle_entry: "./src/lazy_bundle_entry/index.tsx",
     },
   },
   plugins: [

examples/performance-api/src/common/utils.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useMemo, useRef } from "@lynx-js/react";
+import type { PerformanceCallback, PerformanceObserver } from "@lynx-js/types";
+
+export function useLynxPerformanceObserver(eventTypes: string[], callback: PerformanceCallback): void {
+  "background only";
+
+  const previousArgsRef = useRef<[string[], PerformanceObserver]>();
+
+  useMemo(() => {
+    if (previousArgsRef.current) {
+      const [_, observer] = previousArgsRef.current;
+      observer.disconnect();
+    }
+    const newObserver = lynx.performance.createObserver(callback);
+    newObserver.observe(eventTypes);
+    previousArgsRef.current = [eventTypes, newObserver];
+  }, [eventTypes, callback]);
+
+  useEffect(() => {
+    return () => {
+      if (previousArgsRef.current) {
+        const [_, observer] = previousArgsRef.current;
+        observer.disconnect();
+      }
+    };
+  }, []);
+}

examples/performance-api/src/lazy_bundle_entry/MyLazyComponent.tsx

@@ -0,0 +1,9 @@
+import "./index.scss";
+
+export default function MyLazyComponent() {
+  return (
+    <view style={{ flexDirection: "column" }} className="container">
+      <text>Hello, This is a RL3 Lazy Component!</text>
+    </view>
+  );
+}

examples/performance-api/src/tti_entry/index.scss renamed to examples/performance-api/src/lazy_bundle_entry/index.scss

@@ -7,11 +7,10 @@
 }
 
 .title {
-  font-size: 58rpx;
-  font-weight: 500;
-  padding: 10rpx;
-  color: #0095ff;
-  color: linear-gradient(120deg, #0095ff 30%, #42d392);
+  text-shadow: 0 2rpx 4rpx rgba(0, 149, 255, 0.3);
+  font-weight: 700;
+  border-bottom: 4rpx solid #0095ff;
+  padding-bottom: 10rpx;
 }
 
 .content {

examples/performance-api/src/lazy_bundle_entry/index.tsx

@@ -0,0 +1,44 @@
+import { lazy, root, Suspense, useCallback, useState } from "@lynx-js/react";
+import type { PerformanceEntry } from "@lynx-js/types";
+import { useLynxPerformanceObserver } from "../common/utils.jsx";
+import "./index.scss";
+
+const MyLazyComponent = lazy(() => import("./MyLazyComponent.jsx"));
+
+export default function LazyBundleEntryExample(this: any) {
+  const [lazyBundleEntry, setLazyBundleEntry] = useState<string>("");
+
+  // 1. Create a performance observer callback.
+  let callback = useCallback((entry: PerformanceEntry) => {
+    console.log(entry.entryType, entry.name);
+    if (entry.entryType == "resource" && entry.name == "lazyBundle") {
+      // 3. Received "resource.lazyBundle" event.
+      setLazyBundleEntry(JSON.stringify(entry, null, 4));
+    }
+  }, []);
+  // 2. Register to listen to the "resource" event.
+  useLynxPerformanceObserver(["pipeline", "resource"], callback);
+
+  return (
+    <view className="container">
+      <text className="title">Hello LazyBundleEntry~</text>
+
+      <view style={{ flexDirection: "column" }}>
+        <text className="entry">{lazyBundleEntry}</text>
+      </view>
+
+      <view style={{ flexDirection: "column" }}>
+        <text>Hello, This is main page!</text>
+        <Suspense fallback={<text>Loading...</text>}>
+          <MyLazyComponent />
+        </Suspense>
+      </view>
+    </view>
+  );
+}
+
+root.render(<LazyBundleEntryExample />);
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept();
+}

examples/performance-api/src/reload_bundle_entry/index.scss

@@ -0,0 +1,23 @@
+.container {
+  display: flex;
+  padding-top: 150rpx;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+}
+
+.title {
+  text-shadow: 0 2rpx 4rpx rgba(0, 149, 255, 0.3);
+  font-weight: 700;
+  border-bottom: 4rpx solid #0095ff;
+  padding-bottom: 10rpx;
+}
+
+.content {
+  margin: 10px;
+}
+
+.entry {
+  margin: 15px;
+  background-color: gainsboro;
+}

examples/performance-api/src/reload_bundle_entry/index.tsx

@@ -0,0 +1,49 @@
+import { root, useCallback, useEffect, useState } from "@lynx-js/react";
+import type { PerformanceEntry } from "@lynx-js/types";
+import { useLynxPerformanceObserver } from "../common/utils.jsx";
+import "./index.scss";
+
+let has_reload = false;
+export default function ReloadBundleEntryExample(this: any) {
+  const [reloadBundleEntry, setReloadBundleEntry] = useState<string>("111");
+
+  // 1. Create a performance observer callback.
+  let callback = useCallback((entry: PerformanceEntry) => {
+    let entryId = entry.entryType + entry.name;
+    console.log(entryId);
+    if (
+      entry.entryType == "pipeline"
+      && (entry.name == "reloadBundleFromNative" || entry.name == "reloadBundleFromBts")
+    ) {
+      // 3. Received "pipeline.reloadBundleFromBts" event.
+      setReloadBundleEntry(JSON.stringify(entry, null, 4));
+    }
+  }, []);
+  // 2. Register to listen to the "pipeline" event.
+  useLynxPerformanceObserver(["pipeline"], callback);
+
+  useEffect(() => {
+    if (!has_reload) {
+      setTimeout(() => {
+        has_reload = true;
+        // 3. reload from bts
+        lynx.reload({ "test": "123" }, () => {});
+      }, 2000);
+    } else {
+      has_reload = true;
+    }
+  }, []);
+
+  return (
+    <view className="container">
+      <text className="title">Hello ReloadBundleEntry~</text>
+      <text className="entry">{reloadBundleEntry}</text>
+    </view>
+  );
+}
+
+root.render(<ReloadBundleEntryExample />);
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept();
+}