tarojs-plugin-chucker 1.0.0

package/dist/runtime/hooks/useVirtual.d.ts

@@ -0,0 +1,71 @@
+/**
+ * useVirtualList — Taro React Hook
+ *
+ * Provides the same high-performance chunk-based virtualization as
+ * the native virtualListBehavior, but as a React hook for Taro projects.
+ *
+ * Usage:
+ *   import { useVirtualList } from 'miniprogram-virtual-list/taro';
+ *
+ *   function MyPage() {
+ *     const [items, setItems] = useState(generateItems(0, 1000));
+ *     const { vlChunks, vlVisible, vlStyles, vlActiveIndex, vlScrollTo, vlScrollToItem } = useVirtualList({
+ *       items,
+ *       itemHeight: 80,
+ *       chunkSize: 10,
+ *       overScan: 1,
+ *       columns: 1
+ *     });
+ *
+ *     return (
+ *       <View>
+ *         <Button onClick={() => vlScrollToItem('item-500')}>Scroll to #500</Button>
+ *         <Text>Active Chunk: {vlActiveIndex}</Text>
+ *         {vlChunks.map((chunk, ci) => (
+ *           <View key={ci} id={`vl-chunk-${ci}`} className="vl-chunk" style={vlStyles[ci]}>
+ *             {vlVisible[ci] && chunk.map((item) => (
+ *               <MyItem key={item.id} item={item} index={item.__vlIdx} />
+ *             ))}
+ *           </View>
+ *         ))}
+ *       </View>
+ *     );
+ *   }
+ */
+export interface UseVirtualListOptions<T> {
+    items: T[];
+    /** Estimated height (px) of a single item — used for initial placeholder sizing */
+    itemHeight?: number;
+    /** Number of items per chunk. If not configured, auto-scales based on dataset length */
+    chunkSize?: number;
+    /** Number of extra chunks to render above and below the viewport bounds */
+    overScan?: number;
+    /** Number of layout columns (1 for list, >1 for grid) */
+    columns?: number;
+    /** Disable virtualization (e.g., when UI is minimized) to avoid unnecessary processing */
+    disabled?: boolean;
+}
+export interface VirtualListResult<T> {
+    /** Chunked item arrays, each item augmented with `__vlIdx` (absolute index) */
+    vlChunks: Array<T & {
+        __vlIdx: number;
+    }>[];
+    /** Per-chunk visibility flags */
+    vlVisible: boolean[];
+    /** Per-chunk inline style strings (height placeholders) */
+    vlStyles: string[];
+    /** Index of the first visible chunk currently in viewport */
+    vlActiveIndex: number;
+    /** Array of all currently visible chunk indices */
+    vlVisibleIndices: number[];
+    /** Scroll programmatically to target item index */
+    vlScrollTo: (index: number, options?: {
+        duration?: number;
+    }) => number;
+    /** Scroll programmatically to target item object reference or ID key */
+    vlScrollToItem: (target: any, options?: {
+        duration?: number;
+        keyProperty?: string;
+    }) => number;
+}
+export declare function useVirtualList<T>(options: UseVirtualListOptions<T>): VirtualListResult<T>;

package/dist/runtime/hooks/useVirtual.js

@@ -0,0 +1,298 @@
+"use strict";
+/**
+ * useVirtualList — Taro React Hook
+ *
+ * Provides the same high-performance chunk-based virtualization as
+ * the native virtualListBehavior, but as a React hook for Taro projects.
+ *
+ * Usage:
+ *   import { useVirtualList } from 'miniprogram-virtual-list/taro';
+ *
+ *   function MyPage() {
+ *     const [items, setItems] = useState(generateItems(0, 1000));
+ *     const { vlChunks, vlVisible, vlStyles, vlActiveIndex, vlScrollTo, vlScrollToItem } = useVirtualList({
+ *       items,
+ *       itemHeight: 80,
+ *       chunkSize: 10,
+ *       overScan: 1,
+ *       columns: 1
+ *     });
+ *
+ *     return (
+ *       <View>
+ *         <Button onClick={() => vlScrollToItem('item-500')}>Scroll to #500</Button>
+ *         <Text>Active Chunk: {vlActiveIndex}</Text>
+ *         {vlChunks.map((chunk, ci) => (
+ *           <View key={ci} id={`vl-chunk-${ci}`} className="vl-chunk" style={vlStyles[ci]}>
+ *             {vlVisible[ci] && chunk.map((item) => (
+ *               <MyItem key={item.id} item={item} index={item.__vlIdx} />
+ *             ))}
+ *           </View>
+ *         ))}
+ *       </View>
+ *     );
+ *   }
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVirtualList = useVirtualList;
+const react_1 = require("react");
+function useVirtualList(options) {
+    const { items, itemHeight = 80, chunkSize, overScan = 1, columns = 1, disabled = false } = options;
+    const [vlChunks, setVlChunks] = (0, react_1.useState)([]);
+    const [vlVisible, setVlVisible] = (0, react_1.useState)([]);
+    const [vlStyles, setVlStyles] = (0, react_1.useState)([]);
+    const observerRef = (0, react_1.useRef)(null);
+    const visibleRef = (0, react_1.useRef)([]);
+    const stylesRef = (0, react_1.useRef)([]);
+    const chunksRef = (0, react_1.useRef)([]);
+    const prevItemsRef = (0, react_1.useRef)([]);
+    const prevChunkSizeRef = (0, react_1.useRef)(10);
+    const prevItemHeightRef = (0, react_1.useRef)(itemHeight);
+    const prevChunksCountRef = (0, react_1.useRef)(0);
+    const isAppendRef = (0, react_1.useRef)(false);
+    const isUnmountingRef = (0, react_1.useRef)(false);
+    const prevChunksLengthRef = (0, react_1.useRef)(0);
+    const disconnectAll = (0, react_1.useCallback)(() => {
+        if (observerRef.current) {
+            try {
+                observerRef.current.disconnect();
+            }
+            catch (_) {
+                /* noop */
+            }
+        }
+        observerRef.current = null;
+    }, []);
+    // Track unmount lifecycle specifically
+    (0, react_1.useEffect)(() => {
+        return () => {
+            isUnmountingRef.current = true;
+        };
+    }, []);
+    // Chunk the items whenever the input array or sizing changes
+    (0, react_1.useEffect)(() => {
+        if (disabled) {
+            setVlChunks([]);
+            setVlVisible([]);
+            setVlStyles([]);
+            chunksRef.current = [];
+            visibleRef.current = [];
+            stylesRef.current = [];
+            prevItemsRef.current = [];
+            return;
+        }
+        const prevItems = prevItemsRef.current;
+        prevItemsRef.current = items;
+        // Determine current chunkSize (property if configured, otherwise dynamically scaled)
+        let currentChunkSize = chunkSize;
+        if (!currentChunkSize) {
+            if (prevChunksCountRef.current > 0) {
+                currentChunkSize = prevChunkSizeRef.current || 10;
+            }
+            else {
+                currentChunkSize = Math.max(10, Math.min(100, Math.ceil(items.length / 300)));
+            }
+        }
+        const prevChunkSize = prevChunkSizeRef.current;
+        const prevItemHeight = prevItemHeightRef.current;
+        prevChunkSizeRef.current = currentChunkSize;
+        prevItemHeightRef.current = itemHeight;
+        // Check if it is an append operation (same start item, length >= old length, same sizing configuration)
+        const isAppend = prevItems.length > 0 &&
+            items.length >= prevItems.length &&
+            items[0] === prevItems[0] &&
+            currentChunkSize === prevChunkSize &&
+            itemHeight === prevItemHeight;
+        isAppendRef.current = isAppend;
+        let chunks = [];
+        if (isAppend) {
+            const oldChunks = vlChunks;
+            prevChunksCountRef.current = oldChunks.length;
+            // Shallow clone existing chunks to avoid mutation issues
+            chunks = oldChunks.map((c) => [...c]);
+            const oldItemsCount = prevItems.length;
+            const newRawItems = items.slice(oldItemsCount);
+            // Map only new items with absolute index
+            const mappedNew = newRawItems.map((item, idx) => {
+                const absoluteIdx = oldItemsCount + idx;
+                if (typeof item === "object" && item !== null) {
+                    return { ...item, __vlIdx: absoluteIdx };
+                }
+                return item;
+            });
+            let remainingNew = mappedNew;
+            if (chunks.length > 0) {
+                const lastChunkIndex = chunks.length - 1;
+                const lastChunk = chunks[lastChunkIndex];
+                if (lastChunk.length < currentChunkSize) {
+                    const slotsOpen = currentChunkSize - lastChunk.length;
+                    const itemsToFill = mappedNew.slice(0, slotsOpen);
+                    chunks[lastChunkIndex] = lastChunk.concat(itemsToFill);
+                    // If the last chunk is off-screen, recalculate height placeholder
+                    if (!visibleRef.current[lastChunkIndex]) {
+                        stylesRef.current[lastChunkIndex] =
+                            "height: " + Math.ceil(chunks[lastChunkIndex].length / columns) * itemHeight + "px;";
+                    }
+                    remainingNew = mappedNew.slice(slotsOpen);
+                }
+            }
+            const newChunks = [];
+            for (let i = 0; i < remainingNew.length; i += currentChunkSize) {
+                newChunks.push(remainingNew.slice(i, i + currentChunkSize));
+            }
+            newChunks.forEach((chunk) => {
+                chunks.push(chunk);
+                visibleRef.current.push(false);
+                stylesRef.current.push("height: " + Math.ceil(chunk.length / columns) * itemHeight + "px;");
+            });
+            chunksRef.current = chunks;
+            setVlChunks(chunks);
+            setVlVisible([...visibleRef.current]);
+            setVlStyles([...stylesRef.current]);
+        }
+        else {
+            prevChunksCountRef.current = 0;
+            const mapped = items.map((item, idx) => {
+                if (typeof item === "object" && item !== null) {
+                    return { ...item, __vlIdx: idx };
+                }
+                return item;
+            });
+            for (let i = 0; i < mapped.length; i += currentChunkSize) {
+                chunks.push(mapped.slice(i, i + currentChunkSize));
+            }
+            const visibleList = [];
+            const stylesList = [];
+            for (let i = 0; i < chunks.length; i++) {
+                const isFirst = i === 0;
+                visibleList.push(isFirst);
+                stylesList.push(isFirst
+                    ? "height: auto;"
+                    : "height: " + Math.ceil(chunks[i].length / columns) * itemHeight + "px;");
+            }
+            visibleRef.current = visibleList;
+            stylesRef.current = stylesList;
+            chunksRef.current = chunks;
+            setVlChunks(chunks);
+            setVlVisible(visibleList);
+            setVlStyles(stylesList);
+        }
+    }, [items, itemHeight, chunkSize, columns, disabled]);
+    (0, react_1.useEffect)(() => {
+        if (disabled || vlChunks.length === 0) {
+            disconnectAll();
+            prevChunksLengthRef.current = 0;
+            return;
+        }
+        // Only recreate observer when number of chunks changes to avoid lag
+        if (observerRef.current && vlChunks.length === prevChunksLengthRef.current) {
+            return;
+        }
+        prevChunksLengthRef.current = vlChunks.length;
+        disconnectAll();
+        const timer = setTimeout(() => {
+            var _a;
+            const runtimeTaro = require("@tarojs/taro");
+            const page = (_a = runtimeTaro.getCurrentInstance()) === null || _a === void 0 ? void 0 : _a.page;
+            if (!page)
+                return;
+            const currentChunkSize = prevChunkSizeRef.current || 10;
+            const buffer = overScan * Math.ceil(currentChunkSize / columns) * itemHeight;
+            observerRef.current = runtimeTaro.createIntersectionObserver(page, { observeAll: true });
+            observerRef.current
+                .relativeToViewport({ top: buffer, bottom: buffer })
+                .observe(".vl-chunk", (res) => {
+                const indexStr = res.id.replace("vl-chunk-", "");
+                const targetIndex = parseInt(indexStr, 10);
+                if (isNaN(targetIndex))
+                    return;
+                const isIn = res.intersectionRatio > 0;
+                const wasIn = visibleRef.current[targetIndex];
+                if (isIn && !wasIn) {
+                    visibleRef.current[targetIndex] = true;
+                    stylesRef.current[targetIndex] = "height: auto;";
+                    setVlVisible([...visibleRef.current]);
+                    setVlStyles([...stylesRef.current]);
+                }
+                else if (!isIn && wasIn) {
+                    const query = runtimeTaro.createSelectorQuery();
+                    query
+                        .select("#vl-chunk-" + targetIndex)
+                        .boundingClientRect((rect) => {
+                        if (rect) {
+                            const measuredHeight = rect.height || 0;
+                            visibleRef.current[targetIndex] = false;
+                            stylesRef.current[targetIndex] = "height: " + measuredHeight + "px;";
+                            setVlVisible([...visibleRef.current]);
+                            setVlStyles([...stylesRef.current]);
+                        }
+                    })
+                        .exec();
+                }
+            });
+        }, 100);
+        return () => {
+            clearTimeout(timer);
+            if (isUnmountingRef.current) {
+                disconnectAll();
+            }
+        };
+    }, [vlChunks.length, overScan, itemHeight, columns, disconnectAll, disabled]);
+    (0, react_1.useEffect)(() => {
+        return () => disconnectAll();
+    }, [disconnectAll]);
+    const vlScrollTo = (0, react_1.useCallback)((index, options) => {
+        if (index < 0 || index >= items.length)
+            return 0;
+        const currentChunkSize = prevChunkSizeRef.current || 10;
+        const chunkIndex = Math.floor(index / currentChunkSize);
+        let scrollTop = 0;
+        for (let i = 0; i < chunkIndex; i++) {
+            const style = stylesRef.current[i] || "";
+            const match = style.match(/height:\s*([\d.]+)/);
+            if (match) {
+                scrollTop += parseFloat(match[1]);
+            }
+            else {
+                const chunkLength = chunksRef.current[i] ? chunksRef.current[i].length : currentChunkSize;
+                scrollTop += Math.ceil(chunkLength / columns) * itemHeight;
+            }
+        }
+        scrollTop += Math.floor((index % currentChunkSize) / columns) * itemHeight;
+        const duration = options && typeof options.duration === "number" ? options.duration : 0;
+        const runtimeTaro = require("@tarojs/taro");
+        runtimeTaro.pageScrollTo({
+            scrollTop,
+            duration,
+        });
+        return scrollTop;
+    }, [items.length, itemHeight, columns]);
+    const vlScrollToItem = (0, react_1.useCallback)((target, options) => {
+        const keyProperty = (options === null || options === void 0 ? void 0 : options.keyProperty) || "id";
+        const index = items.findIndex((item) => {
+            if (typeof target === "object" && target !== null) {
+                return item === target;
+            }
+            return item && item[keyProperty] === target;
+        });
+        if (index !== -1) {
+            return vlScrollTo(index, options);
+        }
+        return 0;
+    }, [items, vlScrollTo]);
+    const vlVisibleIndices = vlVisible.map((v, i) => (v ? i : -1)).filter((i) => i !== -1);
+    const vlActiveIndex = vlVisibleIndices.length > 0 ? vlVisibleIndices[0] : -1;
+    // Filter chunks through Data Windowing before yielding to render tree
+    const renderedChunks = vlChunks.map((chunk, idx) => {
+        return vlVisible[idx] ? chunk : [];
+    });
+    return {
+        vlChunks: renderedChunks,
+        vlVisible,
+        vlStyles,
+        vlActiveIndex,
+        vlVisibleIndices,
+        vlScrollTo,
+        vlScrollToItem,
+    };
+}

package/dist/runtime/index.d.ts

@@ -0,0 +1,9 @@
+import { chuckerStore } from "./store";
+import { Chucker } from "./components/Chucker";
+export interface ChuckerInitOptions {
+    maxLogs?: number;
+}
+export declare function initChucker(options?: ChuckerInitOptions): void;
+export { Chucker, chuckerStore };
+export type { ChuckerLog } from "./interceptor";
+export type { CustomLogInput, TrackingCompleteInput } from "./store";

package/dist/runtime/index.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chuckerStore = exports.Chucker = void 0;
+exports.initChucker = initChucker;
+const taro_1 = __importDefault(require("@tarojs/taro"));
+const interceptor_1 = require("./interceptor");
+const store_1 = require("./store");
+Object.defineProperty(exports, "chuckerStore", { enumerable: true, get: function () { return store_1.chuckerStore; } });
+const Chucker_1 = require("./components/Chucker");
+Object.defineProperty(exports, "Chucker", { enumerable: true, get: function () { return Chucker_1.Chucker; } });
+function initChucker(options) {
+    var _a;
+    const maxLogs = (_a = options === null || options === void 0 ? void 0 : options.maxLogs) !== null && _a !== void 0 ? _a : 100;
+    // Initialize state store
+    store_1.chuckerStore.init(maxLogs);
+    // Initialize API interceptors
+    (0, interceptor_1.initInterceptors)();
+    // Monkey-patch native Page and Component constructors if they exist (for injected WXML floating button triggers)
+    const globalObj = typeof globalThis !== "undefined"
+        ? globalThis
+        : typeof global !== "undefined"
+            ? global
+            : typeof window !== "undefined"
+                ? window
+                : {};
+    // @ts-ignore
+    if (typeof Page === "function") {
+        // @ts-ignore
+        const originalPage = Page;
+        // @ts-ignore
+        globalObj.Page = function (pageOpts) {
+            if (pageOpts) {
+                pageOpts.chuckerTap = function () {
+                    taro_1.default.navigateTo({ url: "/pages/chucker/index" });
+                };
+            }
+            return originalPage(pageOpts);
+        };
+    }
+    // @ts-ignore
+    if (typeof Component === "function") {
+        // @ts-ignore
+        const originalComponent = Component;
+        // @ts-ignore
+        globalObj.Component = function (compOpts) {
+            if (compOpts) {
+                if (!compOpts.methods) {
+                    compOpts.methods = {};
+                }
+                compOpts.methods.chuckerTap = function () {
+                    taro_1.default.navigateTo({ url: "/pages/chucker/index" });
+                };
+                compOpts.chuckerTap = function () {
+                    taro_1.default.navigateTo({ url: "/pages/chucker/index" });
+                };
+            }
+            return originalComponent(compOpts);
+        };
+    }
+    console.log("Taro Chucker Interceptors initialized");
+}

package/dist/runtime/interceptor.d.ts

@@ -0,0 +1,15 @@
+export interface ChuckerLog {
+    id: string;
+    type: "network" | "native" | (string & {});
+    method: string;
+    url: string;
+    requestHeaders?: Record<string, string>;
+    requestData?: any;
+    status?: string | number;
+    responseHeaders?: Record<string, string>;
+    responseData?: any;
+    error?: string;
+    startTime: number;
+    duration?: number;
+}
+export declare function initInterceptors(): void;