@storybook/instrumenter 6.4.0-alpha.35

package/dist/modern/instrumenter.js

@@ -0,0 +1,547 @@
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+
+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); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import "core-js/modules/es.array.reduce-right.js";
+import "core-js/modules/es.array.reduce.js";
+
+/* eslint-disable no-underscore-dangle */
+import { addons } from '@storybook/addons';
+import { FORCE_REMOUNT, IGNORED_EXCEPTION, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events';
+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'
+};
+
+const isObject = o => Object.prototype.toString.call(o) === '[object Object]';
+
+const isModule = o => Object.prototype.toString.call(o) === '[object Module]';
+
+const isInstrumentable = o => {
+  if (!isObject(o) && !isModule(o)) return false;
+  if (o.constructor === undefined) return true;
+  const proto = o.constructor.prototype;
+  if (!isObject(proto)) return false;
+  if (Object.prototype.hasOwnProperty.call(proto, 'isPrototypeOf') === false) return false;
+  return true;
+};
+
+const construct = obj => {
+  try {
+    return new obj.constructor();
+  } catch (e) {
+    return {};
+  }
+};
+
+const getInitialState = () => ({
+  isDebugging: false,
+  cursor: 0,
+  calls: [],
+  shadowCalls: [],
+  callRefsByResult: new Map(),
+  chainedCallIds: new Set(),
+  parentCallId: undefined,
+  playUntil: undefined,
+  resolvers: {},
+  syncTimeout: undefined,
+  forwardedException: undefined
+});
+
+export class Instrumenter {
+  constructor() {
+    this.channel = void 0;
+    this.state = void 0;
+    this.channel = addons.getChannel();
+    this.state = // Restore state from the parent window in case the iframe was reloaded.
+    global.window.parent.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__ || getInitialState(); // When called from `start`, isDebugging will be true
+
+    const resetState = ({
+      isDebugging = false
+    } = {}) => {
+      const {
+        calls,
+        shadowCalls,
+        callRefsByResult,
+        chainedCallIds,
+        playUntil
+      } = this.state;
+      const retainedCalls = (isDebugging ? shadowCalls : calls).filter(call => call.retain);
+      const retainedCallRefs = new Map(Array.from(callRefsByResult.entries()).filter(([, ref]) => ref.retain));
+      this.setState(Object.assign({}, getInitialState(), {
+        cursor: retainedCalls.length,
+        calls: retainedCalls,
+        callRefsByResult: retainedCallRefs,
+        shadowCalls: isDebugging ? shadowCalls : [],
+        chainedCallIds: isDebugging ? chainedCallIds : new Set(),
+        playUntil: isDebugging ? playUntil : undefined,
+        isDebugging
+      })); // Don't sync while debugging, as it'll cause flicker.
+
+      if (!isDebugging) this.channel.emit(EVENTS.SYNC, this.getLog());
+    }; // A forceRemount might be triggered for debugging (on `start`), or elsewhere in Storybook.
+
+
+    this.channel.on(FORCE_REMOUNT, resetState); // Start with a clean slate before playing, but also clean up when switching to a story that
+    // doesn't have a play function (in which case there is no 'playing' phase).
+    // Invocation of the play function is guaranteed to always be preceded by the 'rendering' phase.
+
+    this.channel.on(STORY_RENDER_PHASE_CHANGED, ({
+      storyId,
+      newPhase
+    }) => {
+      // TODO keep state per story
+      if (newPhase === 'loading') {
+        resetState({
+          isDebugging: this.state.isDebugging
+        });
+      }
+
+      if (newPhase === 'completed') {
+        this.setState({
+          isDebugging: false
+        }); // Rethrow any unhandled forwarded exception so it doesn't go unnoticed.
+
+        if (this.state.forwardedException) throw this.state.forwardedException;
+      }
+    });
+
+    const start = ({
+      storyId,
+      playUntil
+    }) => {
+      if (!this.state.isDebugging) {
+        this.setState(({
+          calls
+        }) => ({
+          calls: [],
+          shadowCalls: calls.map(call => Object.assign({}, call, {
+            state: CallStates.WAITING
+          })),
+          isDebugging: true
+        }));
+      }
+
+      const log = this.getLog();
+      const firstRowIndex = this.state.shadowCalls.findIndex(call => call.id === log[0].callId);
+      this.setState(({
+        shadowCalls
+      }) => {
+        var _shadowCalls$slice$fi;
+
+        return {
+          playUntil: playUntil || ((_shadowCalls$slice$fi = shadowCalls.slice(0, firstRowIndex).filter(call => call.interceptable).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.
+      // global.window.location.reload();
+
+      this.channel.emit(FORCE_REMOUNT, {
+        storyId,
+        isDebugging: true
+      });
+    };
+
+    const back = ({
+      storyId
+    }) => {
+      var _log, _log$slice$;
+
+      const {
+        isDebugging
+      } = this.state;
+      const log = this.getLog();
+      const next = log.findIndex(({
+        state
+      }) => state === CallStates.WAITING);
+      const playUntil = ((_log = log[next - 2]) === null || _log === void 0 ? void 0 : _log.callId) || (isDebugging ? null : (_log$slice$ = log.slice(-2)[0]) === null || _log$slice$ === void 0 ? void 0 : _log$slice$.callId);
+      start({
+        storyId,
+        playUntil
+      });
+    };
+
+    const goto = ({
+      storyId,
+      callId
+    }) => {
+      const {
+        calls,
+        shadowCalls,
+        resolvers
+      } = this.state;
+      const call = calls.find(({
+        id
+      }) => id === callId);
+      const shadowCall = shadowCalls.find(({
+        id
+      }) => id === callId);
+
+      if (!call && shadowCall) {
+        var _this$getLog$find;
+
+        const nextCallId = (_this$getLog$find = this.getLog().find(({
+          state
+        }) => state === CallStates.WAITING)) === null || _this$getLog$find === void 0 ? void 0 : _this$getLog$find.callId;
+        if (shadowCall.id !== nextCallId) this.setState({
+          playUntil: shadowCall.id
+        });
+        Object.values(resolvers).forEach(resolve => resolve());
+      } else {
+        start({
+          storyId,
+          playUntil: callId
+        });
+      }
+    };
+
+    const next = () => {
+      Object.values(this.state.resolvers).forEach(resolve => resolve());
+    };
+
+    const end = () => {
+      this.setState({
+        playUntil: undefined,
+        isDebugging: false
+      });
+      Object.values(this.state.resolvers).forEach(resolve => resolve());
+    };
+
+    this.channel.on(EVENTS.START, start);
+    this.channel.on(EVENTS.BACK, back);
+    this.channel.on(EVENTS.GOTO, goto);
+    this.channel.on(EVENTS.NEXT, next);
+    this.channel.on(EVENTS.END, end);
+  }
+
+  setState(update) {
+    this.state = Object.assign({}, this.state, typeof update === 'function' ? update(this.state) : update); // Track state on the parent window so we can reload the iframe without losing state.
+
+    global.window.parent.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__ = this.state;
+  }
+
+  getLog() {
+    const merged = [...this.state.shadowCalls];
+    this.state.calls.forEach((call, index) => {
+      merged[index] = call;
+    });
+    const seen = new Set();
+    return merged.reduceRight((acc, call) => {
+      call.args.forEach(arg => {
+        if (arg !== null && arg !== void 0 && arg.__callId__) {
+          seen.add(arg.__callId__);
+        }
+      });
+      call.path.forEach(node => {
+        if (node.__callId__) {
+          seen.add(node.__callId__);
+        }
+      });
+
+      if (call.interceptable && !seen.has(call.id) && !seen.has(call.parentId)) {
+        acc.unshift({
+          callId: call.id,
+          state: call.state
+        });
+        seen.add(call.id);
+
+        if (call.parentId) {
+          seen.add(call.parentId);
+        }
+      }
+
+      return acc;
+    }, []);
+  } // Traverses the object structure to recursively patch all function properties.
+  // Returns the original object, or a new object with the same constructor,
+  // depending on whether it should mutate.
+
+
+  instrument(obj, options = {}) {
+    if (!isInstrumentable(obj)) return obj;
+    const {
+      mutate = false,
+      path = []
+    } = options;
+    return Object.keys(obj).reduce((acc, key) => {
+      const value = obj[key]; // Nothing to patch, but might be instrumentable, so we recurse
+
+      if (typeof value !== 'function') {
+        acc[key] = this.instrument(value, Object.assign({}, options, {
+          path: path.concat(key)
+        }));
+        return acc;
+      } // Already patched, so we pass through unchanged
+
+
+      if (typeof value._original === 'function') {
+        acc[key] = value;
+        return acc;
+      } // Patch the function and mark it "patched" by adding a reference to the original function
+
+
+      acc[key] = this.patch(key, value, options);
+      acc[key]._original = value; // Deal with functions that also act like an object
+
+      if (Object.keys(value).length > 0) {
+        Object.assign(acc[key], this.instrument(Object.assign({}, value), Object.assign({}, options, {
+          path: path.concat(key)
+        })));
+      }
+
+      return acc;
+    }, mutate ? obj : construct(obj));
+  }
+
+  patch(method, fn, options) {
+    const patched = (...args) => this.track(method, fn, args, options);
+
+    Object.defineProperty(patched, 'name', {
+      value: method,
+      writable: false
+    });
+    return patched;
+  } // Monkey patch an object method to record calls.
+  // Returns a function that invokes the original function, records the invocation ("call") and
+  // returns the original result.
+
+
+  track(method, fn, args, _ref) {
+    let {
+      path = []
+    } = _ref,
+        options = _objectWithoutPropertiesLoose(_ref, ["path"]);
+
+    const index = this.state.cursor;
+    this.setState({
+      cursor: this.state.cursor + 1
+    });
+    const id = `${index}-${method}`;
+    const {
+      intercept = false,
+      retain = false
+    } = options;
+    const interceptable = typeof intercept === 'function' ? intercept(method, path) : intercept;
+    const call = {
+      id,
+      path,
+      method,
+      args,
+      interceptable,
+      retain
+    };
+    const result = (interceptable ? this.intercept : this.invoke).call(this, fn, call);
+    return this.instrument(result, Object.assign({}, options, {
+      mutate: true,
+      path: [{
+        __callId__: call.id
+      }]
+    }));
+  }
+
+  intercept(fn, call) {
+    // For a "jump to step" action, continue playing until we hit a call by that ID.
+    // For chained calls, we can only return a Promise for the last call in the chain.
+    const isChainedUpon = this.state.chainedCallIds.has(call.id);
+
+    if (!this.state.isDebugging || isChainedUpon || this.state.playUntil) {
+      if (this.state.playUntil === call.id) {
+        this.setState({
+          playUntil: undefined
+        });
+      }
+
+      return this.invoke(fn, call);
+    } // Instead of invoking the function, defer the function call until we continue playing.
+
+
+    return new Promise(resolve => {
+      this.setState(({
+        resolvers
+      }) => ({
+        resolvers: Object.assign({}, resolvers, {
+          [call.id]: resolve
+        })
+      }));
+    }).then(() => {
+      const _this$state$resolvers = this.state.resolvers,
+            _call$id = call.id,
+            resolvers = _objectWithoutPropertiesLoose(_this$state$resolvers, [_call$id].map(_toPropertyKey));
+
+      this.setState({
+        resolvers
+      });
+      return this.invoke(fn, call);
+    });
+  }
+
+  invoke(fn, call) {
+    const {
+      parentCallId,
+      callRefsByResult,
+      forwardedException
+    } = this.state;
+    const info = Object.assign({}, call, {
+      parentId: parentCallId,
+      // Map args that originate from a tracked function call to a call reference to enable nesting.
+      // These values are often not fully serializable anyway (e.g. HTML elements).
+      args: call.args.map(arg => {
+        if (callRefsByResult.has(arg)) {
+          return callRefsByResult.get(arg);
+        }
+
+        if (arg instanceof global.window.HTMLElement) {
+          const {
+            prefix,
+            localName,
+            id,
+            classList,
+            innerText
+          } = arg;
+          const classNames = Array.from(classList);
+          return {
+            __element__: {
+              prefix,
+              localName,
+              id,
+              classNames,
+              innerText
+            }
+          };
+        }
+
+        return arg;
+      })
+    }); // Mark any ancestor calls as "chained upon" so we won't attempt to defer it later.
+
+    call.path.forEach(ref => {
+      if (ref !== null && ref !== void 0 && ref.__callId__) {
+        this.setState(({
+          chainedCallIds
+        }) => ({
+          chainedCallIds: new Set(Array.from(chainedCallIds).concat(ref.__callId__))
+        }));
+      }
+    });
+
+    const handleException = e => {
+      if (e instanceof Error) {
+        const {
+          name,
+          message,
+          stack
+        } = e;
+        const exception = {
+          name,
+          message,
+          stack,
+          callId: call.id
+        };
+        this.sync(Object.assign({}, info, {
+          state: CallStates.ERROR,
+          exception
+        })); // Always track errors to their originating call.
+
+        this.setState(state => ({
+          callRefsByResult: new Map([...Array.from(state.callRefsByResult.entries()), [e, {
+            __callId__: call.id,
+            retain: call.retain
+          }]])
+        })); // 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.
+
+        if (call.interceptable) {
+          throw IGNORED_EXCEPTION;
+        } // Non-interceptable calls need their exceptions forwarded to the next interceptable call.
+        // In case no interceptable call picks it up, it'll get rethrown in the "completed" phase.
+
+
+        this.setState({
+          forwardedException: e
+        });
+        return e;
+      }
+
+      throw e;
+    };
+
+    try {
+      // An earlier, non-interceptable call might have forwarded an exception.
+      if (forwardedException) {
+        this.setState({
+          forwardedException: undefined
+        });
+        throw forwardedException;
+      }
+
+      const result = fn( // Wrap any callback functions to provide a way to access their "parent" call.
+      ...call.args.map(arg => {
+        if (typeof arg !== 'function' || Object.keys(arg).length) return arg;
+        return (...args) => {
+          const prev = this.state.parentCallId;
+          this.setState({
+            parentCallId: call.id
+          });
+          const res = arg(...args);
+          this.setState({
+            parentCallId: prev
+          });
+          return res;
+        };
+      })); // Track the result so we can trace later uses of it back to the originating call.
+      // Primitive results (undefined, null, boolean, string, number, BigInt) are ignored.
+
+      if (result && ['object', 'function', 'symbol'].includes(typeof result)) {
+        this.setState(state => ({
+          callRefsByResult: new Map([...Array.from(state.callRefsByResult.entries()), [result, {
+            __callId__: call.id,
+            retain: call.retain
+          }]])
+        }));
+      }
+
+      this.sync(Object.assign({}, info, {
+        state: result instanceof Promise ? CallStates.ACTIVE : CallStates.DONE
+      }));
+
+      if (result instanceof Promise) {
+        return result.then(value => {
+          this.sync(Object.assign({}, info, {
+            state: CallStates.DONE
+          }));
+          return value;
+        }, handleException);
+      }
+
+      return result;
+    } catch (e) {
+      return handleException(e);
+    }
+  }
+
+  sync(call) {
+    clearTimeout(this.state.syncTimeout);
+    this.channel.emit(EVENTS.CALL, call);
+    this.setState(({
+      calls
+    }) => ({
+      calls: calls.concat(call),
+      syncTimeout: setTimeout(() => this.channel.emit(EVENTS.SYNC, this.getLog()), 0)
+    }));
+  }
+
+}
+export const instrument = global.window.parent === global.window ? obj => obj // Don't do anything if not loaded in an iframe.
+: (obj, options = {}) => {
+  if (!global.window.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER__) global.window.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER__ = new Instrumenter();
+  const instrumenter = global.window.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER__;
+  return instrumenter.instrument(obj, options);
+};

package/dist/modern/types.js

@@ -0,0 +1,8 @@
+export let CallStates;
+
+(function (CallStates) {
+  CallStates["DONE"] = "done";
+  CallStates["ERROR"] = "error";
+  CallStates["ACTIVE"] = "active";
+  CallStates["WAITING"] = "waiting";
+})(CallStates || (CallStates = {}));

package/dist/ts3.4/index.d.ts

@@ -0,0 +1,2 @@
+export { EVENTS, instrument } from './instrumenter';
+export * from './types';

package/dist/ts3.4/instrumenter.d.ts

@@ -0,0 +1,53 @@
+import { Channel } from '@storybook/addons';
+import { Call, CallRef, LogItem } from './types';
+export declare const EVENTS: {
+    CALL: string;
+    SYNC: string;
+    START: string;
+    BACK: string;
+    GOTO: string;
+    NEXT: string;
+    END: string;
+};
+export interface Options {
+    intercept?: boolean | ((method: string, path: Array<string | CallRef>) => boolean);
+    retain?: boolean;
+    mutate?: boolean;
+    path?: Array<string | CallRef>;
+}
+export interface State {
+    isDebugging: boolean;
+    cursor: number;
+    calls: Call[];
+    shadowCalls: Call[];
+    callRefsByResult: Map<any, CallRef & {
+        retain: boolean;
+    }>;
+    chainedCallIds: Set<Call['id']>;
+    parentCallId?: Call['id'];
+    playUntil?: Call['id'];
+    resolvers: Record<Call['id'], Function>;
+    syncTimeout: ReturnType<typeof setTimeout>;
+    forwardedException?: Error;
+}
+export declare type PatchedObj<TObj> = {
+    [Property in keyof TObj]: TObj[Property] & {
+        _original: PatchedObj<TObj>;
+    };
+};
+export declare class Instrumenter {
+    channel: Channel;
+    state: State;
+    constructor();
+    setState(update: Partial<State> | ((state: State) => Partial<State>)): void;
+    getLog(): LogItem[];
+    instrument<TObj extends {
+        [x: string]: any;
+    }>(obj: TObj, options?: Options): PatchedObj<TObj>;
+    patch(method: string, fn: Function, options: Options): (...args: any[]) => PatchedObj<any>;
+    track(method: string, fn: Function, args: any[], { path, ...options }: Options): PatchedObj<any>;
+    intercept(fn: Function, call: Call): any;
+    invoke(fn: Function, call: Call): any;
+    sync(call: Call): void;
+}
+export declare const instrument: ((obj: any) => any) | (<TObj extends Record<string, any>>(obj: TObj, options?: Options) => PatchedObj<TObj>);

package/dist/ts3.4/types.d.ts

@@ -0,0 +1,37 @@
+export interface Call {
+    id: string;
+    path: Array<string | CallRef>;
+    method: string;
+    args: any[];
+    interceptable: boolean;
+    retain: boolean;
+    state?: CallStates.DONE | CallStates.ERROR | CallStates.ACTIVE | CallStates.WAITING;
+    exception?: {
+        callId: Call['id'];
+        message: Error['message'];
+        stack: Error['stack'];
+    };
+    parentId?: Call['id'];
+}
+export declare enum CallStates {
+    DONE = "done",
+    ERROR = "error",
+    ACTIVE = "active",
+    WAITING = "waiting"
+}
+export interface CallRef {
+    __callId__: Call['id'];
+}
+export interface ElementRef {
+    __element__: {
+        prefix?: string;
+        localName: string;
+        id?: string;
+        classNames?: string[];
+        innerText?: string;
+    };
+}
+export interface LogItem {
+    callId: Call['id'];
+    state: Call['state'];
+}

package/dist/ts3.9/index.d.ts

@@ -0,0 +1,2 @@
+export { EVENTS, instrument } from './instrumenter';
+export * from './types';