react-cosmos-core 6.0.0-alpha.0

package/dist/fixtureState/types.d.ts

@@ -0,0 +1,59 @@
+import { StateUpdater } from '../utils/types.js';
+export type FixtureDecoratorId = string;
+export type FixtureElementId = {
+    decoratorId: string;
+    elPath: string;
+};
+export type FixtureStateUnserializableValue = {
+    type: 'unserializable';
+    stringifiedData: string;
+};
+export type PrimitiveData = string | number | boolean | null | undefined;
+export type ObjectData = Record<string, unknown>;
+export type ArrayData = unknown[];
+export type FixtureStateData = PrimitiveData | ObjectData | ArrayData;
+export type FixtureStatePrimitiveValue = {
+    type: 'primitive';
+    data: PrimitiveData;
+};
+export type FixtureStateObjectValue = {
+    type: 'object';
+    values: FixtureStateValues;
+};
+export type FixtureStateArrayValue = {
+    type: 'array';
+    values: FixtureStateValue[];
+};
+export type FixtureStateValue = FixtureStateUnserializableValue | FixtureStatePrimitiveValue | FixtureStateObjectValue | FixtureStateArrayValue;
+export type FixtureStateValues = Record<string, FixtureStateValue>;
+export type FixtureRenderKey = number;
+export type FixtureStateProps = {
+    elementId: FixtureElementId;
+    values: FixtureStateValues;
+    renderKey: FixtureRenderKey;
+    componentName: string;
+};
+export type FixtureStateClassState = {
+    elementId: FixtureElementId;
+    values: FixtureStateValues;
+    componentName: string;
+};
+export type FixtureStateStandardControl = {
+    type: 'standard';
+    defaultValue: FixtureStateValue;
+    currentValue: FixtureStateValue;
+};
+export type FixtureStateSelectControl = {
+    type: 'select';
+    options: string[];
+    defaultValue: string;
+    currentValue: string;
+};
+export type FixtureStateControl = FixtureStateStandardControl | FixtureStateSelectControl;
+export type FixtureStateControls = Record<string, FixtureStateControl>;
+export type FixtureState = {
+    props?: FixtureStateProps[];
+    classState?: FixtureStateClassState[];
+    controls?: FixtureStateControls;
+} & Record<string, unknown>;
+export type SetFixtureState = (update: StateUpdater<FixtureState>) => unknown;

package/dist/fixtureState/types.js

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

package/dist/fixtureTree/createFixtureTree/collapseFixtureDirs.d.ts

@@ -0,0 +1,2 @@
+import { FixtureTreeNode } from '../types.js';
+export declare function collapseFixtureDirs(treeNode: FixtureTreeNode, fixturesDir: string): FixtureTreeNode;

package/dist/fixtureTree/createFixtureTree/collapseFixtureDirs.js

@@ -0,0 +1,33 @@
+import { omit } from 'lodash-es';
+export function collapseFixtureDirs(treeNode, fixturesDir) {
+    const { data, children } = treeNode;
+    if (data.type !== 'fileDir' || !children)
+        return treeNode;
+    const collapsableDirNode = children[fixturesDir];
+    if (collapsableDirNode && collapsableDirNode.data.type === 'fileDir') {
+        const otherChildren = omit(children, fixturesDir);
+        const innerChildren = collapsableDirNode.children;
+        // Make sure children of the collapsed dir don't overlap with children of
+        // the parent dir
+        const collapsable = innerChildren &&
+            Object.keys(otherChildren).every(childName => !innerChildren[childName]);
+        if (collapsable)
+            return {
+                data: { type: 'fileDir' },
+                children: {
+                    ...collapseChildrenFixtureDirs(otherChildren, fixturesDir),
+                    ...innerChildren,
+                },
+            };
+    }
+    return {
+        ...treeNode,
+        children: collapseChildrenFixtureDirs(children, fixturesDir),
+    };
+}
+function collapseChildrenFixtureDirs(children, fixturesDir) {
+    return Object.keys(children).reduce((newChildren, childName) => ({
+        ...newChildren,
+        [childName]: collapseFixtureDirs(children[childName], fixturesDir),
+    }), {});
+}

package/dist/fixtureTree/createFixtureTree/collapseIndexes.d.ts

@@ -0,0 +1,2 @@
+import { FixtureTreeNode } from '../types.js';
+export declare function collapseIndexes(treeNode: FixtureTreeNode): FixtureTreeNode;

package/dist/fixtureTree/createFixtureTree/collapseIndexes.js

@@ -0,0 +1,15 @@
+export function collapseIndexes(treeNode) {
+    const { data, children } = treeNode;
+    if (data.type !== 'fileDir' || !children)
+        return treeNode;
+    const indexChild = Object.keys(children).length === 1 && children.index;
+    if (indexChild && indexChild.data.type !== 'fileDir')
+        return children.index;
+    return {
+        ...treeNode,
+        children: Object.keys(children).reduce((newChildren, childName) => ({
+            ...newChildren,
+            [childName]: collapseIndexes(children[childName]),
+        }), {}),
+    };
+}

package/dist/fixtureTree/createFixtureTree/collapseNamedIndexes.d.ts

@@ -0,0 +1,2 @@
+import { FixtureTreeNode } from '../types.js';
+export declare function collapseNamedIndexes(treeNode: FixtureTreeNode): FixtureTreeNode;

package/dist/fixtureTree/createFixtureTree/collapseNamedIndexes.js

@@ -0,0 +1,30 @@
+export function collapseNamedIndexes(treeNode) {
+    const { data, children } = treeNode;
+    if (data.type !== 'fileDir' || !children)
+        return treeNode;
+    return {
+        ...treeNode,
+        children: Object.keys(children).reduce((newChildren, childName) => {
+            const childNode = children[childName];
+            const next = () => ({
+                ...newChildren,
+                [childName]: collapseNamedIndexes(childNode),
+            });
+            const grandchildren = childNode.children;
+            if (childNode.data.type !== 'fileDir' || !grandchildren)
+                return next();
+            const grandchildNames = Object.keys(grandchildren);
+            if (grandchildNames.length !== 1)
+                return next();
+            const [firstGrandchildName] = grandchildNames;
+            const firstGrandchildNode = grandchildren[firstGrandchildName];
+            if (firstGrandchildNode.data.type !== 'fileDir' &&
+                noCaseEqual(childName, firstGrandchildName))
+                return { ...newChildren, [firstGrandchildName]: firstGrandchildNode };
+            return next();
+        }, {}),
+    };
+}
+function noCaseEqual(a, b) {
+    return a.toUpperCase() === b.toUpperCase();
+}

package/dist/fixtureTree/createFixtureTree/collapseOuterDirs.d.ts

@@ -0,0 +1,2 @@
+import { FixtureTreeNode } from '../types.js';
+export declare function collapseOuterDirs(treeNode: FixtureTreeNode): FixtureTreeNode;

package/dist/fixtureTree/createFixtureTree/collapseOuterDirs.js

@@ -0,0 +1,13 @@
+export function collapseOuterDirs(treeNode) {
+    const { children } = treeNode;
+    if (!children)
+        return treeNode;
+    const childNames = Object.keys(children);
+    const containsSingleChild = Object.keys(children).length === 1;
+    if (containsSingleChild) {
+        const singleChildNode = children[childNames[0]];
+        if (singleChildNode.data.type === 'fileDir')
+            return collapseOuterDirs(singleChildNode);
+    }
+    return treeNode;
+}

package/dist/fixtureTree/createFixtureTree/createRawFixtureTree.d.ts

@@ -0,0 +1,3 @@
+import { FixtureList } from '../../fixture/types.js';
+import { FixtureTreeNode } from '../types.js';
+export declare function createRawFixtureTree(fixtures: FixtureList): FixtureTreeNode;

package/dist/fixtureTree/createFixtureTree/createRawFixtureTree.js

@@ -0,0 +1,66 @@
+import { get, set } from 'lodash-es';
+import { addTreeNodeChild } from '../../utils/tree.js';
+export function createRawFixtureTree(fixtures) {
+    const rootNode = {
+        data: { type: 'fileDir' },
+    };
+    Object.keys(fixtures).forEach(fixturePath => addFixturePathToTree(rootNode, fixturePath, fixtures[fixturePath]));
+    return rootNode;
+}
+function addFixturePathToTree(rootNode, fixturePath, fixtureItem) {
+    const { parents, fileName } = parseFixturePath(fixturePath);
+    if (fixtureItem.type == 'single') {
+        injectNode(rootNode, parents, fileName, {
+            data: {
+                type: 'fixture',
+                fixtureId: { path: fixturePath },
+            },
+        });
+    }
+    else if (fixtureItem.type == 'multi') {
+        injectNode(rootNode, parents, fileName, {
+            data: {
+                type: 'multiFixture',
+                fixtureIds: createFixtureIds(fixturePath, fixtureItem.fixtureNames),
+            },
+        });
+    }
+}
+function parseFixturePath(fixturePath) {
+    const parents = fixturePath.split('/');
+    const rawFixtureName = parents.pop();
+    if (!rawFixtureName)
+        throw new Error('Fixture name is empty');
+    return {
+        parents,
+        fileName: removeFixtureNameExtension(rawFixtureName),
+    };
+}
+function removeFixtureNameExtension(fixtureName) {
+    return fixtureName.replace(/\.(j|t)sx?$/, '');
+}
+function createFixtureIds(fixturePath, fixtureNames) {
+    return fixtureNames.reduce((fixtureIds, fixtureName) => ({
+        ...fixtureIds,
+        [fixtureName]: { path: fixturePath, name: fixtureName },
+    }), {});
+}
+function injectNode(rootNode, parents, childName, childNode) {
+    if (parents.length === 0)
+        return addTreeNodeChild(rootNode, childName, childNode);
+    let curParentDepth = 1;
+    let curParent;
+    do {
+        const curParents = parents.slice(0, curParentDepth);
+        const curPath = curParents.map(p => `children["${p}"]`).join('.');
+        curParent = get(rootNode, curPath);
+        if (!curParent) {
+            curParent = {
+                data: { type: 'fileDir' },
+            };
+            set(rootNode, curPath, curParent);
+        }
+        curParentDepth += 1;
+    } while (curParentDepth <= parents.length);
+    addTreeNodeChild(curParent, childName, childNode);
+}

package/dist/fixtureTree/createFixtureTree/hideFixtureSuffix.d.ts

@@ -0,0 +1,2 @@
+import { FixtureTreeNode } from '../types.js';
+export declare function hideFixtureSuffix(treeNode: FixtureTreeNode, suffix: string): FixtureTreeNode;

package/dist/fixtureTree/createFixtureTree/hideFixtureSuffix.js

@@ -0,0 +1,24 @@
+export function hideFixtureSuffix(treeNode, suffix) {
+    const { children } = treeNode;
+    if (!children)
+        return treeNode;
+    return {
+        ...treeNode,
+        children: Object.keys(children).reduce((newChildren, childName) => {
+            const childNode = children[childName];
+            if (childNode.data.type === 'fileDir')
+                return {
+                    ...newChildren,
+                    [childName]: hideFixtureSuffix(childNode, suffix),
+                };
+            const cleanFixtureName = removeFixtureNameSuffix(childName, suffix);
+            return {
+                ...newChildren,
+                [cleanFixtureName]: hideFixtureSuffix(childNode, suffix),
+            };
+        }, {}),
+    };
+}
+function removeFixtureNameSuffix(fixtureNameWithoutExtension, suffix) {
+    return fixtureNameWithoutExtension.replace(new RegExp(`\\.${suffix}$`), '');
+}

package/dist/fixtureTree/createFixtureTree/index.d.ts

@@ -0,0 +1,7 @@
+import { FixtureList } from '../../fixture/types.js';
+import { FixtureTreeNode } from '../types.js';
+export declare function createFixtureTree({ fixtures, fixturesDir, fixtureFileSuffix, }: {
+    fixtures: FixtureList;
+    fixturesDir: string;
+    fixtureFileSuffix: string;
+}): FixtureTreeNode;

package/dist/fixtureTree/createFixtureTree/index.js

@@ -0,0 +1,16 @@
+import { sortTreeChildren } from '../../utils/tree.js';
+import { collapseFixtureDirs } from './collapseFixtureDirs.js';
+import { collapseIndexes } from './collapseIndexes.js';
+import { collapseNamedIndexes } from './collapseNamedIndexes.js';
+import { collapseOuterDirs } from './collapseOuterDirs.js';
+import { createRawFixtureTree } from './createRawFixtureTree.js';
+import { hideFixtureSuffix } from './hideFixtureSuffix.js';
+export function createFixtureTree({ fixtures, fixturesDir, fixtureFileSuffix, }) {
+    let tree = createRawFixtureTree(fixtures);
+    tree = collapseFixtureDirs(tree, fixturesDir);
+    tree = hideFixtureSuffix(tree, fixtureFileSuffix);
+    tree = collapseIndexes(tree);
+    tree = collapseNamedIndexes(tree);
+    tree = collapseOuterDirs(tree);
+    return sortTreeChildren(tree);
+}

package/dist/fixtureTree/flattenFixtureTree.d.ts

@@ -0,0 +1,10 @@
+import { FixtureId } from '../fixture/types.js';
+import { FixtureTreeNode } from './types.js';
+export type FlatFixtureTreeItem = {
+    fileName: string;
+    fixtureId: FixtureId;
+    name: string | null;
+    parents: string[];
+};
+export type FlatFixtureTree = FlatFixtureTreeItem[];
+export declare function flattenFixtureTree(treeNode: FixtureTreeNode, parents?: string[]): FlatFixtureTree;

package/dist/fixtureTree/flattenFixtureTree.js

@@ -0,0 +1,28 @@
+export function flattenFixtureTree(treeNode, parents = []) {
+    const { data, children } = treeNode;
+    if (data.type === 'fixture' || !children)
+        return [];
+    const flatFixtureTree = [];
+    if (children)
+        Object.keys(children).forEach(childName => {
+            const childNode = children[childName];
+            const { data: childData } = childNode;
+            if (childData.type === 'fileDir')
+                flatFixtureTree.push(...flattenFixtureTree(childNode, [...parents, childName]));
+            if (childData.type === 'multiFixture')
+                Object.keys(childData.fixtureIds).forEach(fixtureName => flatFixtureTree.push({
+                    fileName: childName,
+                    fixtureId: childData.fixtureIds[fixtureName],
+                    parents,
+                    name: fixtureName,
+                }));
+            if (childData.type === 'fixture')
+                flatFixtureTree.push({
+                    fileName: childName,
+                    fixtureId: childData.fixtureId,
+                    parents,
+                    name: null,
+                });
+        });
+    return flatFixtureTree;
+}

package/dist/fixtureTree/types.d.ts

@@ -0,0 +1,11 @@
+import { FixtureId } from '../fixture/types.js';
+import { TreeNode } from '../utils/tree.js';
+export type FixtureTreeNode = TreeNode<{
+    type: 'fileDir';
+} | {
+    type: 'fixture';
+    fixtureId: FixtureId;
+} | {
+    type: 'multiFixture';
+    fixtureIds: Record<string, FixtureId>;
+}>;

package/dist/fixtureTree/types.js

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

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+export * from './fixture/FixtureContext.js';
+export * from './fixture/types.js';
+export * from './fixture/useSelect/index.js';
+export * from './fixture/useValue/index.js';
+export * from './fixture/Viewport.js';
+export * from './fixtureState/classState.js';
+export * from './fixtureState/props.js';
+export * from './fixtureState/types.js';
+export * from './fixtureTree/createFixtureTree/index.js';
+export * from './fixtureTree/flattenFixtureTree.js';
+export * from './fixtureTree/types.js';
+export * from './playground/playgroundUrl.js';
+export * from './renderer/FixtureLoader/FixtureLoader.js';
+export * from './renderer/FixtureLoader/getDecoratedFixtureElement/index.js';
+export * from './renderer/FixtureLoader/postMessage.js';
+export * from './renderer/FixtureLoader/webSockets.js';
+export * from './renderer/getFixtureList.js';
+export * from './renderer/getSortedDecoratorsForFixturePath.js';
+export * from './renderer/reactTypes.js';
+export * from './renderer/registerPlaygroundShortcuts.js';
+export * from './renderer/rendererConfig.js';
+export * from './renderer/types.js';
+export * from './server/cosmosPluginConfig.js';
+export * from './server/serverMessage.js';
+export * from './server/socketMessage.js';
+export * from './utils/array.js';
+export * from './utils/keys.js';
+export * from './utils/react/areNodesEqual.js';
+export * from './utils/react/getComponentName.js';
+export * from './utils/react/isReactElement.js';
+export * from './utils/string.js';
+export * from './utils/tree.js';
+export * from './utils/types.js';
+export * from './utils/uuid.js';

package/dist/index.js

@@ -0,0 +1,34 @@
+export * from './fixture/FixtureContext.js';
+export * from './fixture/types.js';
+export * from './fixture/useSelect/index.js';
+export * from './fixture/useValue/index.js';
+export * from './fixture/Viewport.js';
+export * from './fixtureState/classState.js';
+export * from './fixtureState/props.js';
+export * from './fixtureState/types.js';
+export * from './fixtureTree/createFixtureTree/index.js';
+export * from './fixtureTree/flattenFixtureTree.js';
+export * from './fixtureTree/types.js';
+export * from './playground/playgroundUrl.js';
+export * from './renderer/FixtureLoader/FixtureLoader.js';
+export * from './renderer/FixtureLoader/getDecoratedFixtureElement/index.js';
+export * from './renderer/FixtureLoader/postMessage.js';
+export * from './renderer/FixtureLoader/webSockets.js';
+export * from './renderer/getFixtureList.js';
+export * from './renderer/getSortedDecoratorsForFixturePath.js';
+export * from './renderer/reactTypes.js';
+export * from './renderer/registerPlaygroundShortcuts.js';
+export * from './renderer/rendererConfig.js';
+export * from './renderer/types.js';
+export * from './server/cosmosPluginConfig.js';
+export * from './server/serverMessage.js';
+export * from './server/socketMessage.js';
+export * from './utils/array.js';
+export * from './utils/keys.js';
+export * from './utils/react/areNodesEqual.js';
+export * from './utils/react/getComponentName.js';
+export * from './utils/react/isReactElement.js';
+export * from './utils/string.js';
+export * from './utils/tree.js';
+export * from './utils/types.js';
+export * from './utils/uuid.js';

package/dist/playground/playgroundUrl.d.ts

@@ -0,0 +1,13 @@
+import { FixtureId } from '../fixture/types.js';
+export type PlaygroundUrlParams = {
+    fixtureId?: FixtureId;
+};
+export type RendererUrlParams = {
+    _fixtureId?: FixtureId;
+};
+export declare function stringifyPlaygroundUrlQuery(urlParams: PlaygroundUrlParams): string;
+export declare function parsePlaygroundUrlQuery(query: string): PlaygroundUrlParams;
+export declare function stringifyRendererUrlQuery(urlParams: RendererUrlParams): string;
+export declare function parseRendererUrlQuery(query: string): RendererUrlParams;
+export declare function parseUrlQuery<T extends {}>(query: string): T;
+export declare function stringifyUrlQuery(params: {}): string;

package/dist/playground/playgroundUrl.js

@@ -0,0 +1,36 @@
+export function stringifyPlaygroundUrlQuery(urlParams) {
+    const encodedUrlParams = {};
+    if (urlParams.fixtureId) {
+        encodedUrlParams.fixtureId = JSON.stringify(urlParams.fixtureId);
+    }
+    return stringifyUrlQuery(encodedUrlParams);
+}
+export function parsePlaygroundUrlQuery(query) {
+    const encodedUrlParams = parseUrlQuery(query);
+    const decoded = {};
+    if (encodedUrlParams.fixtureId) {
+        decoded.fixtureId = JSON.parse(encodedUrlParams.fixtureId);
+    }
+    return decoded;
+}
+export function stringifyRendererUrlQuery(urlParams) {
+    const encodedUrlParams = {};
+    if (urlParams._fixtureId) {
+        encodedUrlParams._fixtureId = JSON.stringify(urlParams._fixtureId);
+    }
+    return stringifyUrlQuery(encodedUrlParams);
+}
+export function parseRendererUrlQuery(query) {
+    const encodedUrlParams = parseUrlQuery(query);
+    const decoded = {};
+    if (encodedUrlParams._fixtureId) {
+        decoded._fixtureId = JSON.parse(encodedUrlParams._fixtureId);
+    }
+    return decoded;
+}
+export function parseUrlQuery(query) {
+    return Object.fromEntries(new URLSearchParams(query));
+}
+export function stringifyUrlQuery(params) {
+    return new URLSearchParams(params).toString();
+}

package/dist/renderer/FixtureLoader/FixtureCapture/classState/decorateFixtureRefs/index.d.ts

@@ -0,0 +1,5 @@
+import { Component, ReactNode } from 'react';
+import { CachedRefHandlers } from '../shared.js';
+type SpyRef = (elPath: string, elRef: null | Component) => unknown;
+export declare function decorateFixtureRefs(fixture: ReactNode, spyRef: SpyRef, cachedRefHandlers: CachedRefHandlers): ReactNode;
+export {};

package/dist/renderer/FixtureLoader/FixtureCapture/classState/decorateFixtureRefs/index.js

@@ -0,0 +1,46 @@
+import { cloneElement, } from 'react';
+import { findRelevantElementPaths } from '../../shared/findRelevantElementPaths.js';
+import { setElementAtPath } from '../../shared/nodeTree/index.js';
+import { isRefSupported } from './isRefSupported.js';
+export function decorateFixtureRefs(fixture, spyRef, cachedRefHandlers) {
+    const elPaths = findRelevantElementPaths(fixture);
+    return elPaths.reduce((decoratedFixture, elPath) => {
+        return setElementAtPath(decoratedFixture, elPath, element => {
+            if (!isRefSupported(element.type)) {
+                return element;
+            }
+            return cloneElement(element, {
+                ref: getDecoratedRef(element.ref, spyRef, elPath, cachedRefHandlers),
+            });
+        });
+    }, fixture);
+}
+function getDecoratedRef(origRef, spyRef, elPath, cachedRefHandlers) {
+    const found = cachedRefHandlers[elPath];
+    if (found && found.origRef === origRef) {
+        return found.handler;
+    }
+    const handler = decorateRefWithSpy(origRef, spyRef, elPath);
+    cachedRefHandlers[elPath] = { origRef, handler };
+    return handler;
+}
+function decorateRefWithSpy(origRef, spyRef, elPath) {
+    return (elRef) => {
+        if (origRef) {
+            callOriginalRef(origRef, elRef);
+        }
+        spyRef(elPath, elRef);
+    };
+}
+function callOriginalRef(ref, elRef) {
+    if (typeof ref === 'string') {
+        console.warn('[decorateFixtureRefs] String refs are not supported');
+        return;
+    }
+    if (typeof ref === 'function') {
+        ref(elRef);
+        return;
+    }
+    const refObj = ref;
+    refObj.current = elRef;
+}

package/dist/renderer/FixtureLoader/FixtureCapture/classState/decorateFixtureRefs/isRefSupported.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+type ElementType = string | React.ComponentType;
+export declare function isRefSupported(elementType: ElementType): boolean;
+export {};

package/dist/renderer/FixtureLoader/FixtureCapture/classState/decorateFixtureRefs/isRefSupported.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ForwardRef } from 'react-is';
+export function isRefSupported(elementType) {
+    if (typeof elementType === 'string') {
+        return false;
+    }
+    const { $$typeof, prototype } = elementType;
+    return ($$typeof === ForwardRef ||
+        // Warning: Some functions don't have the .prototype property
+        (prototype &&
+            // ES6 Class
+            // Warning: This will return false is the component is extending a
+            // different copy of React than the one used by Cosmos. This is relevant
+            // when running Cosmos from an external location instead of node_modules.
+            (prototype instanceof React.Component ||
+                // React.createClass
+                prototype.getInitialState !== undefined) &&
+            true));
+}

package/dist/renderer/FixtureLoader/FixtureCapture/classState/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { FixtureDecoratorId } from '../../../../fixtureState/types.js';
+export declare function useClassStateCapture(fixture: React.ReactNode, decoratorId: FixtureDecoratorId): React.ReactNode;

package/dist/renderer/FixtureLoader/FixtureCapture/classState/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useFixtureState } from './useFixtureState.js';
+import { useReadClassState } from './useReadClassState.js';
+export function useClassStateCapture(fixture, decoratorId) {
+    const elRefs = React.useRef({});
+    React.useEffect(() => {
+        return () => {
+            elRefs.current = {};
+        };
+    }, []);
+    useReadClassState(fixture, decoratorId, elRefs);
+    return useFixtureState(fixture, decoratorId, elRefs);
+}

package/dist/renderer/FixtureLoader/FixtureCapture/classState/shared.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export type ElRefs = {
+    [elPath: string]: React.Component;
+};
+export type InitialStates = {
+    [elPath: string]: {
+        type: React.ComponentClass<any>;
+        state: {};
+    };
+};
+export type CachedRefHandler = {
+    origRef: null | React.Ref<any>;
+    handler: (elRef: null | React.Component) => unknown;
+};
+export type CachedRefHandlers = {
+    [elPath: string]: CachedRefHandler;
+};
+export declare function replaceState(elRef: React.Component, nextState: {}): void;

package/dist/renderer/FixtureLoader/FixtureCapture/classState/shared.js

@@ -0,0 +1,14 @@
+import { isEqual } from 'lodash-es';
+// We need to do this because React doesn't provide a replaceState method
+// (anymore) https://reactjs.org/docs/react-component.html#setstate
+export function replaceState(elRef, nextState) {
+    const fullState = resetOriginalKeys(elRef.state, nextState);
+    if (!isEqual(fullState, elRef.state)) {
+        elRef.setState(fullState);
+    }
+}
+function resetOriginalKeys(original, current) {
+    return Object.keys(original).reduce((result, key) => Object.keys(result).indexOf(key) === -1
+        ? { ...result, [key]: undefined }
+        : result, current);
+}

package/dist/renderer/FixtureLoader/FixtureCapture/classState/useFixtureState.d.ts

@@ -0,0 +1,4 @@
+import { MutableRefObject, ReactNode } from 'react';
+import { FixtureDecoratorId } from '../../../../fixtureState/types.js';
+import { ElRefs } from './shared.js';
+export declare function useFixtureState(fixture: ReactNode, decoratorId: FixtureDecoratorId, elRefs: MutableRefObject<ElRefs>): ReactNode;