react-cosmos-core 6.0.0-alpha.0

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

@@ -0,0 +1,156 @@
+import { isEqual } from 'lodash-es';
+import { useContext, useEffect, useRef, } from 'react';
+import { FixtureContext } from '../../../../fixture/FixtureContext.js';
+import { createFixtureStateClassState, findFixtureStateClassState, getFixtureStateClassState, removeFixtureStateClassState, } from '../../../../fixtureState/classState.js';
+import { createValues } from '../../../../fixtureState/createValues.js';
+import { extendWithValues } from '../../../../fixtureState/extendWithValues.js';
+import { getComponentName } from '../../../../utils/react/getComponentName.js';
+import { findRelevantElementPaths } from '../shared/findRelevantElementPaths.js';
+import { decorateFixtureRefs } from './decorateFixtureRefs/index.js';
+import { replaceState, } from './shared.js';
+export function useFixtureState(fixture, decoratorId, elRefs) {
+    const elPaths = findRelevantElementPaths(fixture);
+    const { fixtureState, setFixtureState } = useContext(FixtureContext);
+    const lastFixtureState = useFixtureStateRef(fixtureState);
+    // Keep a copy of the previous fixture state to observe changes
+    const prevFixtureState = useRef(fixtureState);
+    // Remember initial state of child components to use as a default when
+    // resetting fixture state
+    const initialStates = useRef({});
+    // Ref handlers are reused because every time we pass a new ref handler to
+    // a React element it gets called in the next render loop, even when the
+    // associated element instance has been preserved. Having ref handlers fire
+    // on every render loop results in unwanted operations and race conditions.
+    const cachedRefHandlers = useRef({});
+    useEffect(() => {
+        return () => {
+            initialStates.current = {};
+            cachedRefHandlers.current = {};
+        };
+    }, []);
+    useEffect(() => {
+        // Remove fixture state for removed child elements (likely via HMR)
+        // FIXME: Also invalidate fixture state at this element path if the
+        // component type of the corresponding element changed
+        const fsProps = getFixtureStateClassState(fixtureState, decoratorId);
+        fsProps.forEach(({ elementId }) => {
+            const { elPath } = elementId;
+            if (elPaths.indexOf(elementId.elPath) === -1) {
+                setFixtureState(prevFs => ({
+                    ...prevFs,
+                    classState: removeFixtureStateClassState(fixtureState, elementId),
+                }));
+                if (elRefs.current[elPath]) {
+                    delete elRefs.current[elPath];
+                    delete initialStates.current[elPath];
+                    delete cachedRefHandlers.current[elPath];
+                }
+            }
+        });
+        elPaths.forEach(elPath => {
+            const elementId = { decoratorId, elPath };
+            // Component fixture state can be provided before the fixture mounts (eg.
+            // a previous snapshot of a fixture state or the current fixture state
+            // from another renderer)
+            const fsClassState = findFixtureStateClassState(fixtureState, elementId);
+            if (!fsClassState) {
+                if (initialStates.current[elPath]) {
+                    const { state } = initialStates.current[elPath];
+                    const elRef = elRefs.current[elPath];
+                    if (!isEqual(elRef.state, state)) {
+                        replaceState(elRef, state);
+                    }
+                    setFixtureState(prevFs => ({
+                        ...prevFs,
+                        classState: createFixtureStateClassState({
+                            fixtureState: prevFs,
+                            elementId,
+                            values: createValues(state),
+                            componentName: getComponentName(elRef.constructor),
+                        }),
+                    }));
+                }
+            }
+            else {
+                const elRef = elRefs.current[elPath];
+                // The el ref can be missing for three reasons:
+                //   1. Element type is stateless
+                //   2. Element type is a class, but doesn't have state. An instance exists
+                //      but has been discarded because of its lack of state.
+                //   3. Element instance unmounted and is about to remount. When this
+                //      happens, the new instance will be handled when its ref fires again.
+                if (!elRef) {
+                    return;
+                }
+                // The child's state can be out of sync with the fixture state for two
+                // reasons:
+                //   1. The child's state changed internally
+                //   2. The fixture state changed
+                // Here we're interested in the second scenario. In the first scenario
+                // we want to let the component state override the fixture state.
+                const prevFsClassState = findFixtureStateClassState(prevFixtureState.current, elementId);
+                if (prevFsClassState && !isEqual(prevFsClassState, fsClassState)) {
+                    return replaceState(elRef, extendWithValues(elRef.state, fsClassState.values));
+                }
+            }
+        });
+    }, [
+        decoratorId,
+        elPaths,
+        elRefs,
+        fixtureState,
+        fixtureState.classState,
+        setFixtureState,
+    ]);
+    // Update prev fixture state ref *after* running effects that reference it
+    useEffect(() => {
+        prevFixtureState.current = fixtureState;
+    });
+    return decorateFixtureRefs(fixture, handleRef, cachedRefHandlers.current);
+    function handleRef(elPath, elRef) {
+        if (!elRef) {
+            delete elRefs.current[elPath];
+            return;
+        }
+        // Only track instances with state
+        const { state } = elRef;
+        if (!state) {
+            return;
+        }
+        elRefs.current[elPath] = elRef;
+        setInitialState(initialStates.current, elPath, elRef);
+        const elementId = { decoratorId, elPath };
+        const fsClassState = findFixtureStateClassState(lastFixtureState.current, elementId);
+        if (!fsClassState) {
+            setFixtureState(prevFs => ({
+                ...prevFs,
+                classState: createFixtureStateClassState({
+                    fixtureState: prevFs,
+                    elementId,
+                    values: createValues(state),
+                    componentName: getComponentName(elRef.constructor),
+                }),
+            }));
+        }
+        else {
+            replaceState(elRef, extendWithValues(state, fsClassState.values));
+        }
+    }
+}
+// Make latest fixture state accessible in ref callback
+function useFixtureStateRef(fixtureState) {
+    const ref = useRef(fixtureState);
+    useEffect(() => {
+        ref.current = fixtureState;
+    });
+    return ref;
+}
+function setInitialState(initialStates, elPath, elRef) {
+    const found = initialStates[elPath];
+    const type = elRef.constructor;
+    // Keep the first state recevied for this type
+    const initialStateExists = found && found.type === type;
+    if (!initialStateExists && elRef.state) {
+        initialStates[elPath] = { type, state: elRef.state };
+    }
+}

package/dist/renderer/FixtureLoader/FixtureCapture/classState/useReadClassState.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 useReadClassState(fixture: ReactNode, decoratorId: FixtureDecoratorId, elRefs: MutableRefObject<ElRefs>): void;

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

@@ -0,0 +1,60 @@
+import { isEqual } from 'lodash-es';
+import { useContext, useEffect, useRef, } from 'react';
+import { FixtureContext } from '../../../../fixture/FixtureContext.js';
+import { findFixtureStateClassState, updateFixtureStateClassState, } from '../../../../fixtureState/classState.js';
+import { createValues } from '../../../../fixtureState/createValues.js';
+import { extendWithValues } from '../../../../fixtureState/extendWithValues.js';
+import { findRelevantElementPaths } from '../shared/findRelevantElementPaths.js';
+// How often to check the state of the loaded component and update the fixture
+// state if it changed
+const REFRESH_INTERVAL = 200;
+export function useReadClassState(fixture, decoratorId, elRefs) {
+    const elPaths = findRelevantElementPaths(fixture);
+    const { fixtureState, setFixtureState } = useContext(FixtureContext);
+    const timeoutId = useRef(null);
+    useEffect(() => {
+        // The check should run even if no element paths are found at mount, because
+        // the fixture can change during the lifecycle of a FixtureCapture instance
+        // and the updated fixture might contain elements of stateful components
+        scheduleStateCheck();
+        return () => {
+            if (timeoutId.current) {
+                clearTimeout(timeoutId.current);
+            }
+        };
+    });
+    function scheduleStateCheck() {
+        // Is there a better way to listen to component state changes?
+        timeoutId.current = window.setTimeout(checkState, REFRESH_INTERVAL);
+    }
+    function checkState() {
+        let fixtureStateChangeScheduled = false;
+        Object.keys(elRefs.current).map(async (elPath) => {
+            if (elPaths.indexOf(elPath) === -1) {
+                throw new Error(`[FixtureCapture] Child ref exists for missing element path "${elPath}"`);
+            }
+            const { state } = elRefs.current[elPath];
+            const elementId = { decoratorId, elPath };
+            const fsClassState = findFixtureStateClassState(fixtureState, elementId);
+            if (fsClassState &&
+                state &&
+                !doesFixtureStateMatchClassState(fsClassState, state)) {
+                fixtureStateChangeScheduled = true;
+                setFixtureState(prevFs => ({
+                    ...prevFs,
+                    classState: updateFixtureStateClassState({
+                        fixtureState: prevFs,
+                        elementId,
+                        values: createValues(state),
+                    }),
+                }));
+            }
+        });
+        if (!fixtureStateChangeScheduled) {
+            scheduleStateCheck();
+        }
+    }
+}
+function doesFixtureStateMatchClassState(fsClassState, state) {
+    return isEqual(state, extendWithValues(state, fsClassState.values));
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { FixtureDecoratorId } from '../../../fixtureState/types.js';
+export type Props = {
+    children: React.ReactNode;
+    decoratorId: FixtureDecoratorId;
+};
+export declare function FixtureCapture({ children, decoratorId }: Props): JSX.Element;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { useClassStateCapture } from './classState/index.js';
+import { usePropsCapture } from './props/index.js';
+export function FixtureCapture({ children, decoratorId }) {
+    let fixture = usePropsCapture(children, decoratorId);
+    fixture = useClassStateCapture(fixture, decoratorId);
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
+    return React.createElement(React.Fragment, null, fixture);
+}

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

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

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

@@ -0,0 +1,77 @@
+import { useContext, useEffect, useRef } from 'react';
+import { FixtureContext } from '../../../../fixture/FixtureContext.js';
+import { createValues } from '../../../../fixtureState/createValues.js';
+import { createFixtureStateProps, findFixtureStateProps, getFixtureStateProps, removeFixtureStateProps, updateFixtureStateProps, } from '../../../../fixtureState/props.js';
+import { areNodesEqual } from '../../../../utils/react/areNodesEqual.js';
+import { getComponentName } from '../../../../utils/react/getComponentName.js';
+import { findRelevantElementPaths } from '../shared/findRelevantElementPaths.js';
+import { getElementAtPath, getExpectedElementAtPath, } from '../shared/nodeTree/index.js';
+import { useFixtureProps } from './useFixtureProps.js';
+export function usePropsCapture(fixture, decoratorId) {
+    const { fixtureState, setFixtureState } = useContext(FixtureContext);
+    const prevFixtureRef = useRef(fixture);
+    const elPaths = findRelevantElementPaths(fixture);
+    useEffect(() => {
+        // Create empty fixture state
+        if (!fixtureState.props && elPaths.length === 0) {
+            // Make sure not to override any (currently pending) fixture state props
+            setFixtureState(prevFs => ({ ...prevFs, props: prevFs.props || [] }));
+            return;
+        }
+        // Remove fixture state for removed child elements (likely via HMR)
+        // FIXME: Also invalidate fixture state at this element path if the
+        // component type of the corresponding element changed
+        const fsProps = getFixtureStateProps(fixtureState, decoratorId);
+        fsProps.forEach(({ elementId }) => {
+            if (elPaths.indexOf(elementId.elPath) === -1) {
+                setFixtureState(prevFs => ({
+                    ...prevFs,
+                    props: removeFixtureStateProps(fixtureState, elementId),
+                }));
+            }
+        });
+        elPaths.forEach(elPath => {
+            const childEl = getExpectedElementAtPath(fixture, elPath);
+            const elementId = { decoratorId, elPath };
+            // Component fixture state can be provided before the fixture mounts (eg.
+            // a previous snapshot of a fixture state or the current fixture state
+            // from another renderer)
+            if (!findFixtureStateProps(fixtureState, elementId)) {
+                const componentName = getComponentName(childEl.type);
+                setFixtureState(prevFs => ({
+                    ...prevFs,
+                    props: createFixtureStateProps({
+                        fixtureState: prevFs,
+                        elementId,
+                        values: createValues(childEl.props),
+                        componentName,
+                    }),
+                }));
+            }
+            else {
+                const prevChildEl = getElementAtPath(prevFixtureRef.current, elPath);
+                if (!areNodesEqual(prevChildEl, childEl, false)) {
+                    setFixtureState(prevFs => ({
+                        ...prevFs,
+                        props: updateFixtureStateProps({
+                            fixtureState,
+                            elementId,
+                            values: createValues(childEl.props),
+                        }),
+                    }));
+                }
+            }
+        });
+    }, [
+        fixture,
+        decoratorId,
+        elPaths,
+        fixtureState,
+        fixtureState.props,
+        setFixtureState,
+    ]);
+    useEffect(() => {
+        prevFixtureRef.current = fixture;
+    });
+    return useFixtureProps(fixture, fixtureState, decoratorId);
+}

package/dist/renderer/FixtureLoader/FixtureCapture/props/useFixtureProps.d.ts

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

package/dist/renderer/FixtureLoader/FixtureCapture/props/useFixtureProps.js

@@ -0,0 +1,70 @@
+import { isEqual, mapValues } from 'lodash-es';
+import React from 'react';
+import { extendWithValues } from '../../../../fixtureState/extendWithValues.js';
+import { DEFAULT_RENDER_KEY, findFixtureStateProps, } from '../../../../fixtureState/props.js';
+import { getComponentName } from '../../../../utils/react/getComponentName.js';
+import { findRelevantElementPaths } from '../shared/findRelevantElementPaths.js';
+import { getChildrenPath, setElementAtPath } from '../shared/nodeTree/index.js';
+export function useFixtureProps(fixture, fixtureState, decoratorId) {
+    const propCache = React.useMemo(() => ({}), 
+    // React.useMemo is used as a cache invalidated by decoratorId
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [decoratorId]);
+    const elPaths = findRelevantElementPaths(fixture);
+    return elPaths.reduce((extendedFixture, elPath) => {
+        const elementId = { decoratorId, elPath };
+        const fsProps = findFixtureStateProps(fixtureState, elementId);
+        return setElementAtPath(extendedFixture, elPath, element => {
+            if (!fsProps || componentTypeChanged(fsProps.componentName)) {
+                return {
+                    ...element,
+                    key: getElRenderKey(elPath, DEFAULT_RENDER_KEY),
+                };
+            }
+            // Prevent overriding child elements with outdated "children" prop values
+            // stored in fixture state
+            // See https://github.com/react-cosmos/react-cosmos/pull/920 for context
+            const originalProps = element.props;
+            const extendedProps = extendWithValues(originalProps, fsProps.values);
+            // Preserve identity between renders for indentical non-primitive props
+            const cachedProps = mapValues(extendedProps, (value, propName) => {
+                const key = getPropCacheKey(elPath, propName);
+                if (!propCache.hasOwnProperty(key))
+                    propCache[key] = originalProps[propName];
+                if (isEqual(propCache[key], value))
+                    return propCache[key];
+                propCache[key] = value;
+                return value;
+            });
+            // HACK alert: Editing React Element by hand
+            // This is blasphemy, but there are two reasons why React.cloneElement
+            // isn't ideal:
+            //   1. Props need to overridden (not merged)
+            //   2. element.key has to be set to control whether the prev instance
+            //      should be reused or not
+            // To be revised in case this approach causes trouble in the future.
+            // Useful links:
+            //   - https://reactjs.org/docs/react-api.html#cloneelement
+            //   - https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L293-L362
+            return {
+                ...element,
+                props: hasChildElPaths(elPaths, elPath)
+                    ? { ...cachedProps, children: originalProps.children }
+                    : cachedProps,
+                key: getElRenderKey(elPath, fsProps.renderKey),
+            };
+            function componentTypeChanged(componentName) {
+                return componentName !== getComponentName(element.type);
+            }
+        });
+    }, fixture);
+}
+function getPropCacheKey(elPath, propName) {
+    return elPath ? `${elPath}-${propName}` : propName;
+}
+function getElRenderKey(elPath, renderKey) {
+    return `${elPath}-${renderKey}`;
+}
+function hasChildElPaths(elPaths, elPath) {
+    return elPaths.some(p => p.indexOf(getChildrenPath(elPath)) === 0);
+}

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function findRelevantElementPaths(node: React.ReactNode): string[];

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

@@ -0,0 +1,23 @@
+import { findElementPaths, getExpectedElementAtPath, } from './nodeTree/index.js';
+export function findRelevantElementPaths(node) {
+    const elPaths = findElementPaths(node);
+    return elPaths.filter(elPath => {
+        const { type } = getExpectedElementAtPath(node, elPath);
+        // Ignore symbol types, like StrictMode
+        // https://github.com/react-cosmos/react-cosmos/issues/1249
+        if (typeof type === 'symbol')
+            return false;
+        if (typeof type === 'string')
+            return isInterestingTag(type);
+        const classType = type;
+        return classType.cosmosCapture !== false && isInterestingClass(classType);
+    });
+}
+function isInterestingTag(tagName) {
+    // TODO: Make this customizable
+    return tagName !== 'div' && tagName !== 'span';
+}
+function isInterestingClass(type) {
+    // TODO: Make this customizable
+    return type.name !== 'StyledComponent';
+}

package/dist/renderer/FixtureLoader/FixtureCapture/shared/nodeTree/findElementPaths.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function findElementPaths(node: React.ReactNode, curPath?: string): string[];

package/dist/renderer/FixtureLoader/FixtureCapture/shared/nodeTree/findElementPaths.js

@@ -0,0 +1,22 @@
+import { flatten } from 'lodash-es';
+import { Fragment } from 'react';
+import { isReactElement } from '../../../../../utils/react/isReactElement.js';
+import { getChildrenPath } from './shared.js';
+export function findElementPaths(node, curPath = '') {
+    if (Array.isArray(node)) {
+        return flatten(node.map((child, idx) => findElementPaths(child, `${curPath}[${idx}]`)));
+    }
+    if (!isReactElement(node)) {
+        // At this point the node can be null, boolean, string, number, Portal, etc.
+        // https://github.com/facebook/flow/blob/172d28f542f49bbc1e765131c9dfb9e31780f3a2/lib/react.js#L13-L20
+        return [];
+    }
+    const { children } = node.props;
+    const childElPaths = 
+    // Props of elements returned by render functions can't be read here
+    typeof children !== 'function'
+        ? findElementPaths(children, getChildrenPath(curPath))
+        : [];
+    // Ignore Fragment elements, but include their children
+    return node.type === Fragment ? childElPaths : [curPath, ...childElPaths];
+}

package/dist/renderer/FixtureLoader/FixtureCapture/shared/nodeTree/getElementAtPath.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement, ReactNode } from 'react';
+export declare function getElementAtPath(node: ReactNode, elPath: string): null | ReactElement;
+export declare function getExpectedElementAtPath(node: ReactNode, elPath: string): ReactElement;

package/dist/renderer/FixtureLoader/FixtureCapture/shared/nodeTree/getElementAtPath.js

@@ -0,0 +1,26 @@
+import { get } from 'lodash-es';
+import { isReactElement } from '../../../../../utils/react/isReactElement.js';
+import { isRootPath } from './shared.js';
+// Why be silent about trying to fetch a node that isn't an element?
+// Because users of this utility only care about elements. Whether the child
+// node was removed or replaced by a different type of node (eg. string,
+// array of elements, etc.) is irrelevant.
+// NICETOHAVE: Assert child path validity
+export function getElementAtPath(node, elPath) {
+    if (!isReactElement(node) && !Array.isArray(node)) {
+        return null;
+    }
+    const rootNode = node;
+    const childNode = isRootPath(elPath) ? rootNode : get(rootNode, elPath);
+    if (!isReactElement(childNode)) {
+        return null;
+    }
+    return childNode;
+}
+export function getExpectedElementAtPath(node, elPath) {
+    const el = getElementAtPath(node, elPath);
+    if (!el) {
+        throw new Error(`Element not found at path: ${elPath}`);
+    }
+    return el;
+}

package/dist/renderer/FixtureLoader/FixtureCapture/shared/nodeTree/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Utility for extending React Elements from a tree of React Nodes.
+ *
+ * The root Node is the `children` prop of a parent Element. Besides the Node
+ * type, children can also be a function.
+ * https://reactjs.org/docs/jsx-in-depth.html#functions-as-children
+ */
+export { findElementPaths } from './findElementPaths.js';
+export { getElementAtPath, getExpectedElementAtPath, } from './getElementAtPath.js';
+export { setElementAtPath } from './setElementAtPath.js';
+export { getChildrenPath } from './shared.js';

package/dist/renderer/FixtureLoader/FixtureCapture/shared/nodeTree/index.js

@@ -0,0 +1,11 @@
+/**
+ * Utility for extending React Elements from a tree of React Nodes.
+ *
+ * The root Node is the `children` prop of a parent Element. Besides the Node
+ * type, children can also be a function.
+ * https://reactjs.org/docs/jsx-in-depth.html#functions-as-children
+ */
+export { findElementPaths } from './findElementPaths.js';
+export { getElementAtPath, getExpectedElementAtPath, } from './getElementAtPath.js';
+export { setElementAtPath } from './setElementAtPath.js';
+export { getChildrenPath } from './shared.js';

package/dist/renderer/FixtureLoader/FixtureCapture/shared/nodeTree/setElementAtPath.d.ts

@@ -0,0 +1,2 @@
+import { ReactElement, ReactNode } from 'react';
+export declare function setElementAtPath(node: ReactNode, elPath: string, updater: (el: ReactElement) => ReactElement): ReactNode;

package/dist/renderer/FixtureLoader/FixtureCapture/shared/nodeTree/setElementAtPath.js

@@ -0,0 +1,35 @@
+import { set } from 'lodash-es';
+import { isReactElement } from '../../../../../utils/react/isReactElement.js';
+import { getExpectedElementAtPath } from './getElementAtPath.js';
+import { isRootPath } from './shared.js';
+export function setElementAtPath(node, elPath, updater) {
+    const childEl = getExpectedElementAtPath(node, elPath);
+    const newEl = updater(childEl);
+    if (isRootPath(elPath)) {
+        return newEl;
+    }
+    // If the root is a non-Array non-Element Node we should be at the root path
+    // and returned already
+    const clonedRoot = cloneNode(node);
+    // _.set also accepts arrays
+    // https://github.com/lodash/lodash/blob/6018350ac10d5ce6a5b7db625140b82aeab804df/isObject.js#L15-L16
+    return set(clonedRoot, elPath, newEl);
+}
+function cloneNode(value) {
+    return Array.isArray(value)
+        ? value.map(n => cloneNodeItem(n))
+        : cloneNodeItem(value);
+}
+function cloneNodeItem(value) {
+    return isReactElement(value) ? cloneReactElement(value) : value;
+}
+function cloneReactElement(value) {
+    const { children, ...otherProps } = value.props;
+    return {
+        ...value,
+        props: {
+            ...otherProps,
+            children: cloneNode(children),
+        },
+    };
+}

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

@@ -0,0 +1,2 @@
+export declare function getChildrenPath(elPath: string): string;
+export declare function isRootPath(elPath: string): boolean;

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

@@ -0,0 +1,6 @@
+export function getChildrenPath(elPath) {
+    return isRootPath(elPath) ? 'props.children' : `${elPath}.props.children`;
+}
+export function isRootPath(elPath) {
+    return elPath === '';
+}

package/dist/renderer/FixtureLoader/FixtureLoader.d.ts

@@ -0,0 +1,52 @@
+import React, { Component, ReactNode } from 'react';
+import { FixtureId } from '../../fixture/types.js';
+import { FixtureState, SetFixtureState } from '../../fixtureState/types.js';
+import { ReactDecorator, ReactDecorators, ReactFixtureWrappers } from '../reactTypes.js';
+import { RendererConnect, RendererRequest, RendererResponse, SelectFixtureRequest, SetFixtureStateRequest } from '../types.js';
+export type Props = {
+    rendererId: string;
+    rendererConnect: RendererConnect;
+    fixtures: ReactFixtureWrappers;
+    initialFixtureId?: FixtureId;
+    selectedFixtureId?: null | FixtureId;
+    systemDecorators: ReactDecorator[];
+    userDecorators: ReactDecorators;
+    renderMessage?: (args: {
+        msg: string;
+    }) => ReactNode;
+    onErrorReset?: () => unknown;
+};
+type SelectedFixture = {
+    fixtureId: FixtureId;
+    fixtureState: FixtureState;
+    syncedFixtureState: FixtureState;
+};
+type State = {
+    selectedFixture: null | SelectedFixture;
+    renderKey: number;
+};
+export declare class FixtureLoader extends Component<Props, State> {
+    state: State;
+    unsubscribe: null | (() => unknown);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: Props): void;
+    shouldComponentUpdate(prevProps: Props, prevState: State): boolean;
+    render(): string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
+    handleRequest: (msg: RendererRequest) => void;
+    handleSelectFixtureRequest({ payload }: SelectFixtureRequest): void;
+    handleUnselectFixtureRequest(): void;
+    handleSetFixtureStateRequest({ payload }: SetFixtureStateRequest): void;
+    postReadyState(): void;
+    postFixtureListUpdate(): void;
+    postFixtureStateChange: (fixtureId: FixtureId, fixtureState: FixtureState) => void;
+    setFixtureState: SetFixtureState;
+    getFixtureList(): {
+        [x: string]: import("../../fixture/types.js").FixtureListItem;
+    };
+    fireChangeCallback(): void;
+    updateSyncedFixtureState(syncedFixtureState: FixtureState): void;
+    postMessage(msg: RendererResponse): void;
+    renderMessage(msg: string): React.ReactNode;
+}
+export {};