@storybook/instrumenter 7.0.0-alpha.21 → 7.0.0-alpha.25

package/dist/cjs/instrumenter.js

@@ -29,13 +29,13 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 
 const EVENTS = {
-  CALL: 'instrumenter/call',
-  SYNC: 'instrumenter/sync',
-  START: 'instrumenter/start',
-  BACK: 'instrumenter/back',
-  GOTO: 'instrumenter/goto',
-  NEXT: 'instrumenter/next',
-  END: 'instrumenter/end'
+  CALL: 'storybook/instrumenter/call',
+  SYNC: 'storybook/instrumenter/sync',
+  START: 'storybook/instrumenter/start',
+  BACK: 'storybook/instrumenter/back',
+  GOTO: 'storybook/instrumenter/goto',
+  NEXT: 'storybook/instrumenter/next',
+  END: 'storybook/instrumenter/end'
 };
 exports.EVENTS = EVENTS;
 const debuggerDisabled = ((_global$FEATURES = _global.default.FEATURES) === null || _global$FEATURES === void 0 ? void 0 : _global$FEATURES.interactionsDebugger) !== true;
@@ -80,7 +80,7 @@ const getInitialState = () => ({
   shadowCalls: [],
   callRefsByResult: new Map(),
   chainedCallIds: new Set(),
-  parentId: undefined,
+  ancestors: [],
   playUntil: undefined,
   resolvers: {},
   syncTimeout: undefined
@@ -109,7 +109,7 @@ class Instrumenter {
     this.state = void 0;
     this.channel = _addons.addons.getChannel(); // Restore state from the parent window in case the iframe was reloaded.
 
-    this.state = _global.default.window.parent.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__ || {}; // When called from `start`, isDebugging will be true
+    this.state = _global.default.window.parent.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__ || {}; // When called from `start`, isDebugging will be true.
 
     const resetState = ({
       storyId,
@@ -123,9 +123,8 @@ class Instrumenter {
         playUntil: isDebugging ? state.playUntil : undefined,
         isPlaying,
         isDebugging
-      })); // Don't sync while debugging, as it'll cause flicker.
-
-      if (!isDebugging) this.sync(storyId);
+      }));
+      this.sync(storyId);
     }; // A forceRemount might be triggered for debugging (on `start`), or elsewhere in Storybook.
 
 
@@ -180,6 +179,8 @@ class Instrumenter {
       playUntil
     }) => {
       if (!this.getState(storyId).isDebugging) {
+        // Move everything into shadowCalls (a "carbon copy") and mark them as "waiting", so we keep
+        // a record of the original calls which haven't yet been executed while stepping through.
         this.setState(storyId, ({
           calls
         }) => ({
@@ -197,9 +198,12 @@ class Instrumenter {
       }) => {
         var _shadowCalls$slice$fi;
 
+        if (playUntil || !log.length) return {
+          playUntil
+        };
         const firstRowIndex = shadowCalls.findIndex(call => call.id === log[0].callId);
         return {
-          playUntil: playUntil || ((_shadowCalls$slice$fi = shadowCalls.slice(0, firstRowIndex).filter(call => call.interceptable && !call.parentId).slice(-1)[0]) === null || _shadowCalls$slice$fi === void 0 ? void 0 : _shadowCalls$slice$fi.id)
+          playUntil: (_shadowCalls$slice$fi = shadowCalls.slice(0, firstRowIndex).filter(call => call.interceptable && !call.ancestors.length).slice(-1)[0]) === null || _shadowCalls$slice$fi === void 0 ? void 0 : _shadowCalls$slice$fi.id
         };
       }); // Force remount may trigger a page reload if the play function can't be aborted.
 
@@ -214,7 +218,7 @@ class Instrumenter {
     }) => {
       var _log;
 
-      const log = this.getLog(storyId).filter(call => !call.parentId);
+      const log = this.getLog(storyId).filter(call => !call.ancestors.length);
       const last = log.reduceRight((res, item, index) => {
         if (res >= 0 || item.status === _types.CallStates.WAITING) return res;
         return index;
@@ -352,7 +356,7 @@ class Instrumenter {
         acc.unshift({
           callId: call.id,
           status: call.status,
-          parentId: call.parentId
+          ancestors: call.ancestors
         });
         seen.add(call.id);
       }
@@ -415,12 +419,12 @@ class Instrumenter {
     const storyId = (args === null || args === void 0 ? void 0 : (_args$ = args[0]) === null || _args$ === void 0 ? void 0 : _args$.__storyId__) || ((_global$window$__STOR = _global.default.window.__STORYBOOK_PREVIEW__) === null || _global$window$__STOR === void 0 ? void 0 : (_global$window$__STOR2 = _global$window$__STOR.urlStore) === null || _global$window$__STOR2 === void 0 ? void 0 : (_global$window$__STOR3 = _global$window$__STOR2.selection) === null || _global$window$__STOR3 === void 0 ? void 0 : _global$window$__STOR3.storyId);
     const {
       cursor,
-      parentId
+      ancestors
     } = this.getState(storyId);
     this.setState(storyId, {
       cursor: cursor + 1
     });
-    const id = `${parentId || storyId} [${cursor}] ${method}`;
+    const id = `${ancestors.slice(-1)[0] || storyId} [${cursor}] ${method}`;
     const {
       path = [],
       intercept = false,
@@ -429,16 +433,16 @@ class Instrumenter {
     const interceptable = typeof intercept === 'function' ? intercept(method, path) : intercept;
     const call = {
       id,
-      parentId,
-      storyId,
       cursor,
+      storyId,
+      ancestors,
       path,
       method,
       args,
       interceptable,
       retain
     };
-    const interceptOrInvoke = interceptable && !parentId ? this.intercept : this.invoke;
+    const interceptOrInvoke = interceptable && !ancestors.length ? this.intercept : this.invoke;
     const result = interceptOrInvoke.call(this, fn, call, options);
     return this.instrument(result, Object.assign({}, options, {
       mutate: true,
@@ -640,10 +644,13 @@ class Instrumenter {
           }]])
         })); // Exceptions inside callbacks should bubble up to the parent call.
 
-        if (call.parentId) {
-          Object.defineProperty(e, 'callId', {
-            value: call.id
-          });
+        if (call.ancestors.length) {
+          if (!Object.prototype.hasOwnProperty.call(e, 'callId')) {
+            Object.defineProperty(e, 'callId', {
+              value: call.id
+            });
+          }
+
           throw e;
         } // We need to throw to break out of the play function, but we don't want to trigger a redbox
         // so we throw an ignoredException, which is caught and silently ignored by Storybook.
@@ -672,25 +679,26 @@ class Instrumenter {
         // We only want to wrap plain functions, not objects.
         if (typeof arg !== 'function' || Object.keys(arg).length) return arg;
         return (...args) => {
-          // Set the cursor and parentId for calls that happen inside the callback.
+          // Set the cursor and ancestors for calls that happen inside the callback.
           const {
             cursor,
-            parentId
+            ancestors
           } = this.getState(call.storyId);
           this.setState(call.storyId, {
             cursor: 0,
-            parentId: call.id
+            ancestors: [...ancestors, call.id]
           });
 
           const restore = () => this.setState(call.storyId, {
             cursor,
-            parentId
+            ancestors
           }); // Invoke the actual callback function.
 
 
-          const res = arg(...args); // Reset cursor and parentId to their original values before we entered the callback.
+          const res = arg(...args); // Reset cursor and ancestors to their original values before we entered the callback.
 
-          if (res instanceof Promise) res.then(restore, restore);else restore();
+          if (res instanceof Promise) return res.then(restore, restore);
+          restore();
           return res;
         };
       });
@@ -723,12 +731,10 @@ class Instrumenter {
     } catch (e) {
       return handleException(e);
     }
-  } // Sends the call info and log to the manager.
-  // Uses a 0ms debounce because this might get called many times in one tick.
+  } // Sends the call info to the manager and synchronizes the log.
 
 
   update(call) {
-    clearTimeout(this.getState(call.storyId).syncTimeout);
     this.channel.emit(EVENTS.CALL, call);
     this.setState(call.storyId, ({
       calls
@@ -742,49 +748,62 @@ class Instrumenter {
         // Calls are sorted to ensure parent calls always come before calls in their callback.
         calls: Object.values(callsById).sort((a, b) => a.id.localeCompare(b.id, undefined, {
           numeric: true
-        })),
-        syncTimeout: setTimeout(() => this.sync(call.storyId), 0)
+        }))
       };
     });
-  }
+    this.sync(call.storyId);
+  } // Builds a log of interceptable calls and control states and sends it to the manager.
+  // Uses a 0ms debounce because this might get called many times in one tick.
+
 
   sync(storyId) {
-    var _logItems$filter$find;
+    const synchronize = () => {
+      var _logItems$filter$find;
 
-    const {
-      isLocked,
-      isPlaying
-    } = this.getState(storyId);
-    const logItems = this.getLog(storyId);
-    const pausedAt = (_logItems$filter$find = logItems.filter(({
-      parentId
-    }) => !parentId).find(item => item.status === _types.CallStates.WAITING)) === null || _logItems$filter$find === void 0 ? void 0 : _logItems$filter$find.callId;
-    const hasActive = logItems.some(item => item.status === _types.CallStates.ACTIVE);
+      const {
+        isLocked,
+        isPlaying
+      } = this.getState(storyId);
+      const logItems = this.getLog(storyId);
+      const pausedAt = (_logItems$filter$find = logItems.filter(({
+        ancestors
+      }) => !ancestors.length).find(item => item.status === _types.CallStates.WAITING)) === null || _logItems$filter$find === void 0 ? void 0 : _logItems$filter$find.callId;
+      const hasActive = logItems.some(item => item.status === _types.CallStates.ACTIVE);
+
+      if (debuggerDisabled || isLocked || hasActive || logItems.length === 0) {
+        const payload = {
+          controlStates: controlsDisabled,
+          logItems
+        };
+        this.channel.emit(EVENTS.SYNC, payload);
+        return;
+      }
 
-    if (debuggerDisabled || isLocked || hasActive || logItems.length === 0) {
+      const hasPrevious = logItems.some(item => [_types.CallStates.DONE, _types.CallStates.ERROR].includes(item.status));
+      const controlStates = {
+        debugger: true,
+        start: hasPrevious,
+        back: hasPrevious,
+        goto: true,
+        next: isPlaying,
+        end: isPlaying
+      };
       const payload = {
-        controlStates: controlsDisabled,
-        logItems
+        controlStates,
+        logItems,
+        pausedAt
       };
       this.channel.emit(EVENTS.SYNC, payload);
-      return;
-    }
-
-    const hasPrevious = logItems.some(item => [_types.CallStates.DONE, _types.CallStates.ERROR].includes(item.status));
-    const controlStates = {
-      debugger: true,
-      start: hasPrevious,
-      back: hasPrevious,
-      goto: true,
-      next: isPlaying,
-      end: isPlaying
-    };
-    const payload = {
-      controlStates,
-      logItems,
-      pausedAt
     };
-    this.channel.emit(EVENTS.SYNC, payload);
+
+    this.setState(storyId, ({
+      syncTimeout
+    }) => {
+      clearTimeout(syncTimeout);
+      return {
+        syncTimeout: setTimeout(synchronize, 0)
+      };
+    });
   }
 
 }

package/dist/esm/instrumenter.js

@@ -13,13 +13,13 @@ import { FORCE_REMOUNT, IGNORED_EXCEPTION, SET_CURRENT_STORY, STORY_RENDER_PHASE
 import global from 'global';
 import { CallStates } from './types';
 export const EVENTS = {
-  CALL: 'instrumenter/call',
-  SYNC: 'instrumenter/sync',
-  START: 'instrumenter/start',
-  BACK: 'instrumenter/back',
-  GOTO: 'instrumenter/goto',
-  NEXT: 'instrumenter/next',
-  END: 'instrumenter/end'
+  CALL: 'storybook/instrumenter/call',
+  SYNC: 'storybook/instrumenter/sync',
+  START: 'storybook/instrumenter/start',
+  BACK: 'storybook/instrumenter/back',
+  GOTO: 'storybook/instrumenter/goto',
+  NEXT: 'storybook/instrumenter/next',
+  END: 'storybook/instrumenter/end'
 };
 const debuggerDisabled = global.FEATURES?.interactionsDebugger !== true;
 const controlsDisabled = {
@@ -63,7 +63,7 @@ const getInitialState = () => ({
   shadowCalls: [],
   callRefsByResult: new Map(),
   chainedCallIds: new Set(),
-  parentId: undefined,
+  ancestors: [],
   playUntil: undefined,
   resolvers: {},
   syncTimeout: undefined
@@ -92,7 +92,7 @@ export class Instrumenter {
     this.state = void 0;
     this.channel = addons.getChannel(); // Restore state from the parent window in case the iframe was reloaded.
 
-    this.state = global.window.parent.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__ || {}; // When called from `start`, isDebugging will be true
+    this.state = global.window.parent.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__ || {}; // When called from `start`, isDebugging will be true.
 
     const resetState = ({
       storyId,
@@ -106,9 +106,8 @@ export class Instrumenter {
         playUntil: isDebugging ? state.playUntil : undefined,
         isPlaying,
         isDebugging
-      })); // Don't sync while debugging, as it'll cause flicker.
-
-      if (!isDebugging) this.sync(storyId);
+      }));
+      this.sync(storyId);
     }; // A forceRemount might be triggered for debugging (on `start`), or elsewhere in Storybook.
 
 
@@ -163,6 +162,8 @@ export class Instrumenter {
       playUntil
     }) => {
       if (!this.getState(storyId).isDebugging) {
+        // Move everything into shadowCalls (a "carbon copy") and mark them as "waiting", so we keep
+        // a record of the original calls which haven't yet been executed while stepping through.
         this.setState(storyId, ({
           calls
         }) => ({
@@ -178,9 +179,12 @@ export class Instrumenter {
       this.setState(storyId, ({
         shadowCalls
       }) => {
+        if (playUntil || !log.length) return {
+          playUntil
+        };
         const firstRowIndex = shadowCalls.findIndex(call => call.id === log[0].callId);
         return {
-          playUntil: playUntil || shadowCalls.slice(0, firstRowIndex).filter(call => call.interceptable && !call.parentId).slice(-1)[0]?.id
+          playUntil: shadowCalls.slice(0, firstRowIndex).filter(call => call.interceptable && !call.ancestors.length).slice(-1)[0]?.id
         };
       }); // Force remount may trigger a page reload if the play function can't be aborted.
 
@@ -193,7 +197,7 @@ export class Instrumenter {
     const back = ({
       storyId
     }) => {
-      const log = this.getLog(storyId).filter(call => !call.parentId);
+      const log = this.getLog(storyId).filter(call => !call.ancestors.length);
       const last = log.reduceRight((res, item, index) => {
         if (res >= 0 || item.status === CallStates.WAITING) return res;
         return index;
@@ -327,7 +331,7 @@ export class Instrumenter {
         acc.unshift({
           callId: call.id,
           status: call.status,
-          parentId: call.parentId
+          ancestors: call.ancestors
         });
         seen.add(call.id);
       }
@@ -388,12 +392,12 @@ export class Instrumenter {
     const storyId = args?.[0]?.__storyId__ || global.window.__STORYBOOK_PREVIEW__?.urlStore?.selection?.storyId;
     const {
       cursor,
-      parentId
+      ancestors
     } = this.getState(storyId);
     this.setState(storyId, {
       cursor: cursor + 1
     });
-    const id = `${parentId || storyId} [${cursor}] ${method}`;
+    const id = `${ancestors.slice(-1)[0] || storyId} [${cursor}] ${method}`;
     const {
       path = [],
       intercept = false,
@@ -402,16 +406,16 @@ export class Instrumenter {
     const interceptable = typeof intercept === 'function' ? intercept(method, path) : intercept;
     const call = {
       id,
-      parentId,
-      storyId,
       cursor,
+      storyId,
+      ancestors,
       path,
       method,
       args,
       interceptable,
       retain
     };
-    const interceptOrInvoke = interceptable && !parentId ? this.intercept : this.invoke;
+    const interceptOrInvoke = interceptable && !ancestors.length ? this.intercept : this.invoke;
     const result = interceptOrInvoke.call(this, fn, call, options);
     return this.instrument(result, Object.assign({}, options, {
       mutate: true,
@@ -611,10 +615,13 @@ export class Instrumenter {
           }]])
         })); // Exceptions inside callbacks should bubble up to the parent call.
 
-        if (call.parentId) {
-          Object.defineProperty(e, 'callId', {
-            value: call.id
-          });
+        if (call.ancestors.length) {
+          if (!Object.prototype.hasOwnProperty.call(e, 'callId')) {
+            Object.defineProperty(e, 'callId', {
+              value: call.id
+            });
+          }
+
           throw e;
         } // We need to throw to break out of the play function, but we don't want to trigger a redbox
         // so we throw an ignoredException, which is caught and silently ignored by Storybook.
@@ -642,25 +649,26 @@ export class Instrumenter {
         // We only want to wrap plain functions, not objects.
         if (typeof arg !== 'function' || Object.keys(arg).length) return arg;
         return (...args) => {
-          // Set the cursor and parentId for calls that happen inside the callback.
+          // Set the cursor and ancestors for calls that happen inside the callback.
           const {
             cursor,
-            parentId
+            ancestors
           } = this.getState(call.storyId);
           this.setState(call.storyId, {
             cursor: 0,
-            parentId: call.id
+            ancestors: [...ancestors, call.id]
           });
 
           const restore = () => this.setState(call.storyId, {
             cursor,
-            parentId
+            ancestors
           }); // Invoke the actual callback function.
 
 
-          const res = arg(...args); // Reset cursor and parentId to their original values before we entered the callback.
+          const res = arg(...args); // Reset cursor and ancestors to their original values before we entered the callback.
 
-          if (res instanceof Promise) res.then(restore, restore);else restore();
+          if (res instanceof Promise) return res.then(restore, restore);
+          restore();
           return res;
         };
       });
@@ -693,12 +701,10 @@ export class Instrumenter {
     } catch (e) {
       return handleException(e);
     }
-  } // Sends the call info and log to the manager.
-  // Uses a 0ms debounce because this might get called many times in one tick.
+  } // Sends the call info to the manager and synchronizes the log.
 
 
   update(call) {
-    clearTimeout(this.getState(call.storyId).syncTimeout);
     this.channel.emit(EVENTS.CALL, call);
     this.setState(call.storyId, ({
       calls
@@ -712,47 +718,60 @@ export class Instrumenter {
         // Calls are sorted to ensure parent calls always come before calls in their callback.
         calls: Object.values(callsById).sort((a, b) => a.id.localeCompare(b.id, undefined, {
           numeric: true
-        })),
-        syncTimeout: setTimeout(() => this.sync(call.storyId), 0)
+        }))
       };
     });
-  }
+    this.sync(call.storyId);
+  } // Builds a log of interceptable calls and control states and sends it to the manager.
+  // Uses a 0ms debounce because this might get called many times in one tick.
+
 
   sync(storyId) {
-    const {
-      isLocked,
-      isPlaying
-    } = this.getState(storyId);
-    const logItems = this.getLog(storyId);
-    const pausedAt = logItems.filter(({
-      parentId
-    }) => !parentId).find(item => item.status === CallStates.WAITING)?.callId;
-    const hasActive = logItems.some(item => item.status === CallStates.ACTIVE);
+    const synchronize = () => {
+      const {
+        isLocked,
+        isPlaying
+      } = this.getState(storyId);
+      const logItems = this.getLog(storyId);
+      const pausedAt = logItems.filter(({
+        ancestors
+      }) => !ancestors.length).find(item => item.status === CallStates.WAITING)?.callId;
+      const hasActive = logItems.some(item => item.status === CallStates.ACTIVE);
+
+      if (debuggerDisabled || isLocked || hasActive || logItems.length === 0) {
+        const payload = {
+          controlStates: controlsDisabled,
+          logItems
+        };
+        this.channel.emit(EVENTS.SYNC, payload);
+        return;
+      }
 
-    if (debuggerDisabled || isLocked || hasActive || logItems.length === 0) {
+      const hasPrevious = logItems.some(item => [CallStates.DONE, CallStates.ERROR].includes(item.status));
+      const controlStates = {
+        debugger: true,
+        start: hasPrevious,
+        back: hasPrevious,
+        goto: true,
+        next: isPlaying,
+        end: isPlaying
+      };
       const payload = {
-        controlStates: controlsDisabled,
-        logItems
+        controlStates,
+        logItems,
+        pausedAt
       };
       this.channel.emit(EVENTS.SYNC, payload);
-      return;
-    }
-
-    const hasPrevious = logItems.some(item => [CallStates.DONE, CallStates.ERROR].includes(item.status));
-    const controlStates = {
-      debugger: true,
-      start: hasPrevious,
-      back: hasPrevious,
-      goto: true,
-      next: isPlaying,
-      end: isPlaying
-    };
-    const payload = {
-      controlStates,
-      logItems,
-      pausedAt
     };
-    this.channel.emit(EVENTS.SYNC, payload);
+
+    this.setState(storyId, ({
+      syncTimeout
+    }) => {
+      clearTimeout(syncTimeout);
+      return {
+        syncTimeout: setTimeout(synchronize, 0)
+      };
+    });
   }
 
 }

package/dist/types/instrumenter.d.ts

@@ -34,7 +34,7 @@ export declare class Instrumenter {
     intercept(fn: Function, call: Call, options: Options): any;
     invoke(fn: Function, call: Call, options: Options): any;
     update(call: Call): void;
-    sync(storyId: StoryId): void;
+    sync(storyId: string): void;
 }
 /**
  * Instruments an object or module by traversing its properties, patching any functions (methods)

package/dist/types/types.d.ts

@@ -1,9 +1,9 @@
 import type { StoryId } from '@storybook/addons';
 export interface Call {
     id: string;
-    parentId?: Call['id'];
-    storyId: StoryId;
     cursor: number;
+    storyId: StoryId;
+    ancestors: Call['id'][];
     path: Array<string | CallRef>;
     method: string;
     args: any[];
@@ -46,7 +46,7 @@ export interface ControlStates {
 export interface LogItem {
     callId: Call['id'];
     status: Call['status'];
-    parentId?: Call['id'];
+    ancestors: Call['id'][];
 }
 export interface SyncPayload {
     controlStates: ControlStates;
@@ -65,7 +65,7 @@ export interface State {
         retain: boolean;
     }>;
     chainedCallIds: Set<Call['id']>;
-    parentId?: Call['id'];
+    ancestors: Call['id'][];
     playUntil?: Call['id'];
     resolvers: Record<Call['id'], Function>;
     syncTimeout: ReturnType<typeof setTimeout>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/instrumenter",
-  "version": "7.0.0-alpha.21",
+  "version": "7.0.0-alpha.25",
   "description": "",
   "keywords": [
     "storybook"
@@ -23,13 +23,6 @@
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    "<3.8": {
-      "*": [
-        "dist/ts3.4/*"
-      ]
-    }
-  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -41,9 +34,9 @@
     "prepare": "node ../../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.21",
-    "@storybook/client-logger": "7.0.0-alpha.21",
-    "@storybook/core-events": "7.0.0-alpha.21",
+    "@storybook/addons": "7.0.0-alpha.25",
+    "@storybook/client-logger": "7.0.0-alpha.25",
+    "@storybook/core-events": "7.0.0-alpha.25",
     "core-js": "^3.8.2",
     "global": "^4.4.0"
   },
@@ -53,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d8cdc5b21af68e69c6eefeaae0e1efadd06947ea"
+  "gitHead": "058af8bac4892d95fdfe755dedfd826cb4508fdc"
 }