@lark-apaas/client-toolkit 1.2.70-alpha.20260909115935 → 1.2.70-beta.0

package/lib/components/AppContainer/PageHoc.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
-export declare function PageHoc(props: {
+import React, { type ReactNode } from 'react';
+/** 仅开发态生成首屏封面，截图失败不影响页面。 */
+export declare function PageHoc({ children }: {
     children: ReactNode;
 }): React.JSX.Element;

package/lib/components/AppContainer/PageHoc.js

@@ -1,36 +1,41 @@
 import { Fragment, jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
-import { snapdom } from "@zumer/snapdom";
-import { submitPostMessage } from "../../utils/postMessage.js";
 import { clearNetworkIdle, networkIdleCallback } from "network-idle";
+import { submitPostMessage } from "../../utils/postMessage.js";
 import { normalizeBasePath } from "../../utils/utils.js";
-function PageHoc(props) {
-    const { children } = props;
+function PageHoc({ children }) {
     useEffect(()=>{
-        if ('production' !== process.env.NODE_ENV) {
-            const basePath = normalizeBasePath(process.env.CLIENT_BASE_PATH);
-            const id = networkIdleCallback(()=>{
-                const width = document.body.scrollWidth;
-                const height = document.body.scrollHeight;
-                snapdom(document.body, {
+        if ('development' !== process.env.NODE_ENV) return;
+        let cancelled = false;
+        const basePath = normalizeBasePath(process.env.CLIENT_BASE_PATH);
+        const id = networkIdleCallback(()=>{
+            if (cancelled) return;
+            (async ()=>{
+                const { snapdom } = await import("@zumer/snapdom");
+                if (cancelled) return;
+                const result = await snapdom(document.body, {
                     format: 'png',
-                    width,
-                    height,
-                    fallbackURL: ({ src })=>`${basePath}/dev/snapdom-proxy?url=${encodeURIComponent(src)}`,
+                    width: document.body.scrollWidth,
+                    height: document.body.scrollHeight,
+                    fallbackURL: ({ src = '' })=>`${basePath}/dev/snapdom-proxy?url=${encodeURIComponent(src)}`,
                     exclude: [
                         '#lucide-react-svg'
                     ],
                     backgroundColor: '#ffffff'
-                }).then(async (res)=>{
-                    const imgEle = await res.toPng();
-                    submitPostMessage({
-                        type: 'PageScreenshot',
-                        data: imgEle.src
-                    });
-                }).catch(()=>{});
-            }, 2000);
-            return ()=>clearNetworkIdle(id);
-        }
+                });
+                if (cancelled) return;
+                const image = await result.toPng();
+                if (cancelled) return;
+                submitPostMessage({
+                    type: 'PageScreenshot',
+                    data: image.src
+                });
+            })().catch(()=>{});
+        }, 2000);
+        return ()=>{
+            cancelled = true;
+            clearNetworkIdle(id);
+        };
     }, []);
     return /*#__PURE__*/ jsx(Fragment, {
         children: children

package/lib/components/AppContainer/__test__/PageHoc.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/AppContainer/__test__/PageHoc.test.js

@@ -0,0 +1,141 @@
+import { jsx } from "react/jsx-runtime";
+import { StrictMode, act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { PageHoc } from "../PageHoc.js";
+import { snapdom } from "@zumer/snapdom";
+import { clearNetworkIdle, networkIdleCallback } from "network-idle";
+import { submitPostMessage } from "../../../utils/postMessage.js";
+vi.mock('@zumer/snapdom', ()=>({
+        snapdom: vi.fn()
+    }));
+vi.mock('network-idle', ()=>({
+        networkIdleCallback: vi.fn(),
+        clearNetworkIdle: vi.fn()
+    }));
+vi.mock('../../../utils/postMessage', ()=>({
+        submitPostMessage: vi.fn()
+    }));
+function Page() {
+    return /*#__PURE__*/ jsx(PageHoc, {
+        children: /*#__PURE__*/ jsx("div", {
+            children: "Application"
+        })
+    });
+}
+let root;
+let container;
+const png = 'data:image/png;base64,c2NyZWVuc2hvdA==';
+async function mount(strict = false) {
+    await act(async ()=>{
+        root.render(strict ? /*#__PURE__*/ jsx(StrictMode, {
+            children: /*#__PURE__*/ jsx(Page, {})
+        }) : /*#__PURE__*/ jsx(Page, {}));
+    });
+    await act(async ()=>{
+        await vi.dynamicImportSettled();
+    });
+}
+async function idle() {
+    await act(async ()=>{
+        await vi.advanceTimersByTimeAsync(2000);
+        await vi.dynamicImportSettled();
+    });
+}
+beforeEach(()=>{
+    vi.useFakeTimers();
+    vi.clearAllMocks();
+    vi.stubEnv('NODE_ENV', 'development');
+    vi.stubEnv('CLIENT_BASE_PATH', '/app/test/');
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    vi.mocked(networkIdleCallback).mockImplementation((callback, delay)=>window.setTimeout(callback, delay));
+    vi.mocked(clearNetworkIdle).mockImplementation((id)=>window.clearTimeout(id));
+    vi.mocked(snapdom).mockResolvedValue({
+        toPng: vi.fn().mockResolvedValue({
+            src: png
+        })
+    });
+});
+afterEach(async ()=>{
+    await act(async ()=>root.unmount());
+    container.remove();
+    vi.useRealTimers();
+    vi.unstubAllEnvs();
+});
+describe('development page screenshot', ()=>{
+    it('captures after idle and reports the PNG with the base-path image fallback', async ()=>{
+        await mount();
+        expect(snapdom).not.toHaveBeenCalled();
+        expect(networkIdleCallback).toHaveBeenCalledWith(expect.any(Function), 2000);
+        await idle();
+        expect(snapdom).toHaveBeenCalledWith(document.body, expect.objectContaining({
+            format: 'png',
+            backgroundColor: '#ffffff',
+            exclude: [
+                '#lucide-react-svg'
+            ]
+        }));
+        const options = vi.mocked(snapdom).mock.calls[0][1];
+        const fallback = options?.fallbackURL;
+        expect(fallback({
+            src: 'https://example.com/image.png?a=1&b=2'
+        })).toBe('/app/test/dev/snapdom-proxy?url=https%3A%2F%2Fexample.com%2Fimage.png%3Fa%3D1%26b%3D2');
+        expect(submitPostMessage).toHaveBeenCalledWith({
+            type: 'PageScreenshot',
+            data: png
+        });
+    });
+    it.each([
+        'production',
+        'test',
+        'staging',
+        '',
+        void 0
+    ])('does not schedule or capture when NODE_ENV is %s', async (env)=>{
+        vi.stubEnv('NODE_ENV', env);
+        await mount();
+        await idle();
+        expect(networkIdleCallback).not.toHaveBeenCalled();
+        expect(snapdom).not.toHaveBeenCalled();
+        expect(submitPostMessage).not.toHaveBeenCalled();
+    });
+    it('only schedules one active capture under StrictMode', async ()=>{
+        await mount(true);
+        await idle();
+        expect(snapdom).toHaveBeenCalledTimes(1);
+        expect(submitPostMessage).toHaveBeenCalledTimes(1);
+    });
+    it('clears the idle callback on unmount', async ()=>{
+        await mount();
+        await act(async ()=>root.render(null));
+        await idle();
+        expect(clearNetworkIdle).toHaveBeenCalledTimes(1);
+        expect(snapdom).not.toHaveBeenCalled();
+    });
+    it('discards a PNG that finishes after unmount', async ()=>{
+        let finish;
+        const pending = new Promise((resolve)=>{
+            finish = resolve;
+        });
+        vi.mocked(snapdom).mockResolvedValue({
+            toPng: ()=>pending
+        });
+        await mount();
+        await idle();
+        await act(async ()=>root.render(null));
+        await act(async ()=>finish({
+                src: png
+            }));
+        expect(submitPostMessage).not.toHaveBeenCalled();
+    });
+    it('keeps the application mounted when capture fails', async ()=>{
+        vi.mocked(snapdom).mockRejectedValue(new Error('image unavailable'));
+        await mount();
+        await idle();
+        expect(container.textContent).toBe('Application');
+        expect(submitPostMessage).not.toHaveBeenCalled();
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.2.70-alpha.20260909115935",
+  "version": "1.2.70-beta.0",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [