@memlab/core 1.0.9 → 1.1.0

package/dist/lib/Config.d.ts

@@ -139,6 +139,7 @@ export declare class MemLabConfig {
     waitAfterOperation: number;
     waitAfterScrolling: number;
     waitAfterTyping: number;
+    waitForNetworkInDefaultScenario: number;
     stressTestRepeat: number;
     avoidLeakWithoutDetachedElements: boolean;
     hideBrowserLeak: boolean;

package/dist/lib/Config.js

@@ -192,6 +192,8 @@ class MemLabConfig {
         this.waitAfterScrolling = 5000;
         // extra delay after typing
         this.waitAfterTyping = 1000;
+        // page load checker: default wait for network idle in scenario test
+        this.waitForNetworkInDefaultScenario = 10000;
         // default repeat for stress testing
         this.stressTestRepeat = 5;
         // only show leaks with detached HTML elements

package/dist/lib/Types.d.ts

@@ -10,6 +10,7 @@
 import { ParsedArgs } from 'minimist';
 import type { LaunchOptions, Page } from 'puppeteer';
 import type { ErrorHandling, MemLabConfig } from './Config';
+/** @internal */
 export declare type AnyValue = any;
 /** @internal */
 export declare type RecordValue = string | number | boolean | null | RecordValue[] | {
@@ -141,23 +142,319 @@ export declare type QuickExperiment = {
     experiment: string;
     group: string;
 };
+/**
+ * The type for defining custom leak-filtering logic.
+ * * **Examples**:
+ * ```typescript
+ * const scenario = {
+ *
+ * };
+ *
+ * let map = Object.create(null);
+ * const beforeLeakFilter = (snapshot: IHeapSnapshot, _leakedNodeIds: HeapNodeIdSet): void => {
+ *   map = initializeMapUsingSnapshot(snapshot);
+ * };
+ *
+ * // duplicated string with size > 1KB as memory leak
+ * const leakFilter = (node: IHeapNode): boolean => {
+ *   if (node.type !== 'string' || node.retainedSize < 1000) {
+ *     return false;
+ *   }
+ *   const str = utils.getStringNodeValue(node);
+ *   return map[str] > 1;
+ * };
+ *
+ * export default {beforeLeakFilter, leakFilter};
+ * ```
+ */
 export interface ILeakFilter {
     beforeLeakFilter?: InitLeakFilterCallback;
     leakFilter: LeakFilterCallback;
 }
+/**
+ * Lifecycle function callback that is invoked initially once before calling any
+ * leak filter function.
+ *
+ * @param snaphost - heap snapshot see {@link IHeapSnapshot}
+ * @param leakedNodeIds - the set of leaked object (node) ids.
+ */
 export declare type InitLeakFilterCallback = (snapshot: IHeapSnapshot, leakedNodeIds: HeapNodeIdSet) => void;
+/**
+ * Callback that can be used to define a logic to filter the
+ * leaked objects. The callback is only called for every node
+ * allocated but not released from the target interaction
+ * in the heap snapshot.
+ *
+ * @param node - the node that is kept alive in the memory in the heap snapshot
+ * @param snapshot - the snapshot of target interaction
+ * @param leakedNodeIds - the set of leaked node ids
+ *
+ * @returns the value indicating whether the given node in the snapshot
+ * should be considered as leaked.
+ * * **Examples**:
+ * ```javascript
+ * // any node in the heap snapshot that is greater than 1MB
+ * function leakFilter(node, _snapshot, _leakedNodeIds) {
+ *  return node.retainedSize > 1000000;
+ * };
+ * ```
+ */
 export declare type LeakFilterCallback = (node: IHeapNode, snapshot: IHeapSnapshot, leakedNodeIds: HeapNodeIdSet) => boolean;
+/**
+ * The callback defines browser interactions which are
+ * used by memlab to interact with the web app under test.
+ */
 export declare type InteractionsCallback = (page: Page, args?: OperationArgs) => Promise<void>;
+/**
+ * Test scenario specifies how you want a E2E test to interact with a web browser.
+ * The test scenario can be saved as a `.js` file and passed to the `memlab
+ * run --scenario` command:
+ * ```javascript
+ * // save as test.js and use in terminal:
+ * // $ memlab run --scenario test.js
+ *
+ * module.exports = {
+ *   url: () => 'https://www.npmjs.com/',
+ *   action: async () => ... ,
+ *   back: async () => ... ,
+ * };
+ * ```
+ *
+ * The test scenario instance can also be passed to the
+ * [`run` API](../modules/api_src#run) exported by `@memlab/api`.
+ * ```typescript
+ * const {run} = require('@memlab/api');
+ *
+ * (async function () {
+ *   const scenario = {
+ *     url: () => 'https://www.facebook.com',
+ *     action: async () => ... ,
+ *     back: async () => ... ,
+ *   };
+ *   const leaks = await run({scenario});
+ * })();
+ * ```
+ */
 export interface IScenario {
+    /** @internal */
     name?: () => string;
+    /** @internal */
     app?: () => string;
+    /**
+     * If the page you are running memlab against requires authentication or
+     * specific cookie(s) to be set, you can pass them as
+     * a list of <name, value> pairs.
+     * @returns cookie list
+     * * **Examples**:
+     * ```typescript
+     * const scenario = {
+     *   url: () => 'https://www.facebook.com/',
+     *   cookies: () => [
+     *     {"name":"cm_j","value":"none"},
+     *     {"name":"datr","value":"yJvIY..."},
+     *     {"name":"c_user","value":"8917..."},
+     *     {"name":"xs","value":"95:9WQ..."},
+     *     // ...
+     *   ],
+     * };
+     * ```
+     */
     cookies?: () => Cookies;
+    /**
+     * String value of the initial url of the page.
+     *
+     * @returns the string value of the initial url
+     * * **Examples**:
+     * ```typescript
+     * const scenario = {
+     *   url: () => 'https://www.npmjs.com/',
+     * };
+     * ```
+     * If a test scenario only specifies the `url` callback (without the `action`
+     * callback), memlab will try to detect memory leaks from the initial page
+     * load. All objects allocated by the initial page load will be candidates
+     * for memory leak filtering.
+     */
     url: () => string;
+    /**
+     * `action` is the callback function that defines the interaction
+     * where you want to trigger memory leaks after the initial page load.
+     * All JS objects in browser allocated by the browser interactions triggered
+     * from the `action` callback will be candidates for memory leak filtering.
+     *
+     * * **Parameters**:
+     *   * page: `Page` | the puppeteer [`Page`](https://pptr.dev/api/puppeteer.page)
+     *     object, which provides APIs to interact with the web browser
+     *
+     * * **Examples**:
+     * ```typescript
+     * const scenario = {
+     *   url: () => 'https://www.npmjs.com/',
+     *   action: async (page) => {
+     *     await page.click('a[href="/link"]');
+     *   },
+     *   back: async (page) => {
+     *     await page.click('a[href="/back"]');
+     *   },
+     * }
+     * ```
+     * Note: always clean up external puppeteer references to JS objects
+     *       in the browser context.
+     * ```typescript
+     * const scenario = {
+     *   url: () => 'https://www.npmjs.com/',
+     *   action: async (page) => {
+     *     const elements = await page.$x("//button[contains(., 'Text in Button')]");
+     *     const [button] = elements;
+     *     if (button) {
+     *       await button.click();
+     *     }
+     *     // dispose external references to JS objects in browser context
+     *     await promise.all(elements.map(e => e.dispose()));
+     *   },
+     *   back: async (page) => ... ,
+     * }
+     ```
+     */
     action?: InteractionsCallback;
+    /**
+     * `back` is the callback function that specifies how memlab should
+     * back/revert the `action` callback. Think of it as an undo action.
+     *
+     * * **Examples**:
+     * ```typescript
+     * const scenario = {
+     *   url: () => 'https://www.npmjs.com/',
+     *   action: async (page) => {
+     *     await page.click('a[href="/link"]');
+     *   },
+     *   back: async (page) => {
+     *     await page.click('a[href="/back"]');
+     *   },
+     * }
+     * ```
+     * Check out [this page](/docs/how-memlab-works) on why
+     * memlab needs to undo/revert the `action` callback.
+     */
     back?: InteractionsCallback;
+    /**
+     * Specifies how many **extra** `action` and `back` actions performed by memlab.
+     * * **Examples**:
+     * ```typescript
+     * module.exports = {
+     *   url: () => ... ,
+     *   action: async (page) => ... ,
+     *   back: async (page) => ... ,
+     *   // browser interaction: two additional [ action -> back ]
+     *   // init-load -> action -> back -> action -> back -> action -> back
+     *   repeat: () => 2,
+     * };
+     * ```
+     */
     repeat?: () => number;
+    /**
+     * Optional callback function that checks if the web page is loaded
+     * after for initial page loading and subsequent browser interactions.
+     *
+     * If this callback is not provided, memlab by default
+     * considers a navigation to be finished when there are no network
+     * connections for at least 500ms.
+     *
+     * * **Parameters**:
+     *   * page: `Page` | the puppeteer [`Page`](https://pptr.dev/api/puppeteer.page)
+     *     object, which provides APIs to interact with the web browser
+     * * **Returns**: a boolean value, if it returns `true`, memlab will consider
+     *   the navigation completes, if it returns `false`, memlab will keep calling
+     *   this callback until it returns `true`. This is an async callback, you can
+     *   also `await` and returns `true` until some async logic is resolved.
+     * * **Examples**:
+     * ```typescript
+     * module.exports = {
+     *   url: () => ... ,
+     *   action: async (page) => ... ,
+     *   back: async (page) => ... ,
+     *   isPageLoaded: async (page) => {
+     *     await page.waitForNavigation({
+     *       // consider navigation to be finished when there are
+     *       // no more than 2 network connections for at least 500 ms.
+     *       waitUntil: 'networkidle2',
+     *       // Maximum navigation time in milliseconds
+     *       timeout: 5000,
+     *     });
+     *     return true;
+     *   },
+     * };
+     * ```
+     */
     isPageLoaded?: CheckPageLoadCallback;
+    /**
+     * Lifecycle function callback that is invoked initially once before
+     * the subsequent `leakFilter` function calls. This callback could
+     * be used to initialize some data stores or to do some one-off
+     * preprocessings.
+     *
+     * * **Parameters**:
+     *   * snapshot: `IHeapSnapshot` | the final heap snapshot taken after
+     *     all browser interactions are done.
+     *     Check out {@link IHeapSnapshot} for more APIs that queries the heap snapshot.
+     *   * leakedNodeIds: `Set<number>` | the set of ids of all JS heap objects
+     *     allocated by the `action` call but not released after the `back` call
+     *     in browser.
+     *
+     * * **Examples**:
+     * ```typescript
+     * module.exports = {
+     *   url: () => ... ,
+     *   action: async (page) => ... ,
+     *   back: async (page) => ... ,
+     *   beforeLeakFilter: (snapshot, leakedNodeIds) {
+     *     // initialize some data stores
+     *   },
+     * };
+     * ```
+     */
     beforeLeakFilter?: InitLeakFilterCallback;
+    /**
+     * This callback that defines how you want to filter out the
+     * leaked objects. The callback is called for every node (JS heap
+     * object in browser) allocated by the `action` callback, but not
+     * released after the `back` callback. Those objects could be caches
+     * that are retained in memory on purpose, or they are memory leaks.
+     *
+     * This optional callback allows you to define your own algorithm
+     * to cherry pick memory leaks for specific JS program under test.
+     *
+     * If this optional callback is not defined, memlab will use its
+     * built-in leak filter, which considers detached DOM elements
+     * and unmounted Fiber nodes (detached from React Fiber tree) as
+     * memory leaks.
+     *
+     * * **Parameters**:
+     *   * node: `IHeapNode` | one of the heap object allocated but not released.
+     *   * snapshot: `IHeapSnapshot` | the final heap snapshot taken after
+     *     all browser interactions are done.
+     *     Check out {@link IHeapSnapshot} for more APIs that queries the heap snapshot.
+     *   * leakedNodeIds: `Set<number>` | the set of ids of all JS heap objects
+     *     allocated by the `action` call but not released after the `back` call
+     *     in browser.
+     *
+     * * **Returns**: the boolean value indicating whether the given node in
+     *   the snapshot should be considered as leaked.
+     *
+     * * **Examples**:
+     * ```typescript
+     * module.exports = {
+     *   url: () => ... ,
+     *   action: async (page) => ... ,
+     *   back: async (page) => ... ,
+     *   leakFilter(node, snapshot, leakedNodeIds) {
+     *     // any unreleased node (JS heap object) with 1MB+
+     *     // retained size is considered a memory leak
+     *     return node.retainedSize > 1000000;
+     *   },
+     * };
+     * ```
+     */
     leakFilter?: LeakFilterCallback;
 }
 /** @internal */
@@ -245,7 +542,10 @@ export interface IDataBuilder {
     className: string;
     state: Record<string, AnyValue>;
 }
-/** @internal */
+/**
+ * Callback function to provide if the page is loaded.
+ * @param page - puppeteer's [Page](https://pptr.dev/api/puppeteer.page/) object.
+ */
 export declare type CheckPageLoadCallback = (page: Page) => Promise<boolean>;
 /** @internal */
 export interface IE2EScenarioVisitPlan {

package/dist/lib/Types.js

@@ -8,4 +8,5 @@
  * @emails oncall+ws_labs
  * @format
  */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memlab/core",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "license": "MIT",
   "description": "memlab core libraries",
   "author": "Liang Gong <lgong@fb.com>",
@@ -56,7 +56,6 @@
     "directory": "packages/core"
   },
   "scripts": {
-    "preinstall": "export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true",
     "build-pkg": "tsc",
     "test-pkg": "jest .",
     "clean-pkg": "rm -rf ./dist && rm -rf ./node_modules && rm -f ./tsconfig.tsbuildinfo"