react-cosmos-core 6.0.0-alpha.9 → 6.0.0-canary.0b048af.0

package/dist/fixtureTree/createFixtureTree/createRawFixtureTree.js

@@ -13,7 +13,7 @@ function addFixturePathToTree(rootNode, fixturePath, fixtureItem) {
         injectNode(rootNode, parents, fileName, {
             data: {
                 type: 'fixture',
-                fixtureId: { path: fixturePath },
+                path: fixturePath,
             },
         });
     }
@@ -21,7 +21,8 @@ function addFixturePathToTree(rootNode, fixturePath, fixtureItem) {
         injectNode(rootNode, parents, fileName, {
             data: {
                 type: 'multiFixture',
-                fixtureIds: createFixtureIds(fixturePath, fixtureItem.fixtureNames),
+                path: fixturePath,
+                names: fixtureItem.fixtureNames,
             },
         });
     }
@@ -39,12 +40,6 @@ function parseFixturePath(fixturePath) {
 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);

package/dist/fixtureTree/flattenFixtureTree.js

@@ -10,16 +10,16 @@ export function flattenFixtureTree(treeNode, parents = []) {
             if (childData.type === 'fileDir')
                 flatFixtureTree.push(...flattenFixtureTree(childNode, [...parents, childName]));
             if (childData.type === 'multiFixture')
-                Object.keys(childData.fixtureIds).forEach(fixtureName => flatFixtureTree.push({
+                childData.names.forEach(fixtureName => flatFixtureTree.push({
                     fileName: childName,
-                    fixtureId: childData.fixtureIds[fixtureName],
+                    fixtureId: { path: childData.path, name: fixtureName },
                     parents,
                     name: fixtureName,
                 }));
             if (childData.type === 'fixture')
                 flatFixtureTree.push({
                     fileName: childName,
-                    fixtureId: childData.fixtureId,
+                    fixtureId: { path: childData.path },
                     parents,
                     name: null,
                 });

package/dist/fixtureTree/types.d.ts

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

package/dist/index.d.ts

@@ -10,16 +10,16 @@ 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/createPostMessageConnect.js';
+export * from './renderer/createWebSocketsConnect.js';
+export * from './renderer/FixtureConnect.js';
+export * from './renderer/getDecoratedFixtureElement/index.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 './renderer/rendererConnectTypes.js';
+export * from './renderer/userModuleTypes.js';
 export * from './server/cosmosPluginConfig.js';
 export * from './server/serverMessage.js';
 export * from './server/socketMessage.js';

package/dist/index.js

@@ -10,16 +10,16 @@ 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/createPostMessageConnect.js';
+export * from './renderer/createWebSocketsConnect.js';
+export * from './renderer/FixtureConnect.js';
+export * from './renderer/getDecoratedFixtureElement/index.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 './renderer/rendererConnectTypes.js';
+export * from './renderer/userModuleTypes.js';
 export * from './server/cosmosPluginConfig.js';
 export * from './server/serverMessage.js';
 export * from './server/socketMessage.js';

package/dist/renderer/DecoratedFixture.d.ts

@@ -0,0 +1,13 @@
+import { FixtureState, SetFixtureState } from '../fixtureState/types.js';
+import { ReactDecorator, ReactDecoratorModule, ReactFixture } from './userModuleTypes.js';
+type Props = {
+    fixture: ReactFixture;
+    systemDecorators: ReactDecorator[];
+    userDecoratorModules: ReactDecoratorModule[];
+    fixtureState: FixtureState;
+    setFixtureState: SetFixtureState;
+    renderKey: number;
+    onErrorReset?: () => unknown;
+};
+export declare function DecoratedFixture({ fixture, systemDecorators, userDecoratorModules, fixtureState, setFixtureState, renderKey, onErrorReset, }: Props): JSX.Element;
+export {};

package/dist/renderer/DecoratedFixture.js

@@ -0,0 +1,33 @@
+import React, { useMemo } from 'react';
+import { FixtureContext } from '../fixture/FixtureContext.js';
+import { getDecoratedFixtureElement } from './getDecoratedFixtureElement/index.js';
+export function DecoratedFixture({ fixture, systemDecorators, userDecoratorModules, fixtureState, setFixtureState, renderKey, onErrorReset = noop, }) {
+    // Prevent unintentional renders https://reactjs.org/docs/context.html#caveats
+    const contextValue = useMemo(() => ({ fixtureState, setFixtureState }), [fixtureState, setFixtureState]);
+    const decoratedFixture = useMemo(() => {
+        const decorators = [
+            ...systemDecorators,
+            ...userDecoratorModules.map(m => m.default),
+        ];
+        return getDecoratedFixtureElement(fixture, decorators, {
+            fixtureState,
+            setFixtureState,
+            onErrorReset,
+        });
+    }, [
+        fixture,
+        fixtureState,
+        onErrorReset,
+        setFixtureState,
+        systemDecorators,
+        userDecoratorModules,
+    ]);
+    return (React.createElement(FixtureContext.Provider
+    // renderKey controls whether to reuse previous instances (and
+    // transition props) or rebuild render tree from scratch
+    , { 
+        // renderKey controls whether to reuse previous instances (and
+        // transition props) or rebuild render tree from scratch
+        key: renderKey, value: contextValue }, decoratedFixture));
+}
+function noop() { }

package/dist/renderer/{FixtureLoader/FixtureCapture → FixtureCapture}/classState/index.d.ts

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

package/dist/renderer/{FixtureLoader/FixtureCapture → FixtureCapture}/classState/useFixtureState.d.ts

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

package/dist/renderer/{FixtureLoader/FixtureCapture → FixtureCapture}/classState/useFixtureState.js

@@ -1,10 +1,10 @@
 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 { 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';

package/dist/renderer/{FixtureLoader/FixtureCapture → FixtureCapture}/classState/useReadClassState.d.ts

@@ -1,4 +1,4 @@
 import { MutableRefObject, ReactNode } from 'react';
-import { FixtureDecoratorId } from '../../../../fixtureState/types.js';
+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 → FixtureCapture}/classState/useReadClassState.js

@@ -1,9 +1,9 @@
 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 { 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

package/dist/renderer/{FixtureLoader/FixtureCapture → FixtureCapture}/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FixtureDecoratorId } from '../../../fixtureState/types.js';
+import { FixtureDecoratorId } from '../../fixtureState/types.js';
 export type Props = {
     children: React.ReactNode;
     decoratorId: FixtureDecoratorId;

package/dist/renderer/{FixtureLoader/FixtureCapture → FixtureCapture}/props/index.d.ts

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

package/dist/renderer/{FixtureLoader/FixtureCapture → FixtureCapture}/props/index.js

@@ -1,9 +1,9 @@
 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 { 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';

package/dist/renderer/{FixtureLoader/FixtureCapture → FixtureCapture}/props/useFixtureProps.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { FixtureDecoratorId, FixtureState } from '../../../../fixtureState/types.js';
+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 → FixtureCapture}/props/useFixtureProps.js

@@ -1,8 +1,8 @@
 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 { 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) {

package/dist/renderer/{FixtureLoader/FixtureCapture → FixtureCapture}/shared/nodeTree/findElementPaths.js

@@ -1,6 +1,6 @@
 import { flatten } from 'lodash-es';
 import { Fragment } from 'react';
-import { isReactElement } from '../../../../../utils/react/isReactElement.js';
+import { isReactElement } from '../../../../utils/react/isReactElement.js';
 import { getChildrenPath } from './shared.js';
 export function findElementPaths(node, curPath = '') {
     if (Array.isArray(node)) {

package/dist/renderer/{FixtureLoader/FixtureCapture → FixtureCapture}/shared/nodeTree/getElementAtPath.js

@@ -1,5 +1,5 @@
 import { get } from 'lodash-es';
-import { isReactElement } from '../../../../../utils/react/isReactElement.js';
+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

package/dist/renderer/{FixtureLoader/FixtureCapture → FixtureCapture}/shared/nodeTree/setElementAtPath.js

@@ -1,5 +1,5 @@
 import { set } from 'lodash-es';
-import { isReactElement } from '../../../../../utils/react/isReactElement.js';
+import { isReactElement } from '../../../../utils/react/isReactElement.js';
 import { getExpectedElementAtPath } from './getElementAtPath.js';
 import { isRootPath } from './shared.js';
 export function setElementAtPath(node, elPath, updater) {

package/dist/renderer/FixtureConnect.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement } from 'react';
+import { FixtureId } from '../fixture/types.js';
+import { RendererConnect } from './rendererConnectTypes.js';
+import { ReactDecorator, UserModuleWrappers } from './userModuleTypes.js';
+type Props = {
+    rendererId: string;
+    rendererConnect: RendererConnect;
+    moduleWrappers: UserModuleWrappers;
+    systemDecorators: ReactDecorator[];
+    initialFixtureId?: FixtureId;
+    selectedFixtureId?: null | FixtureId;
+    renderMessage?: (msg: string) => ReactElement;
+    onErrorReset?: () => unknown;
+};
+export declare function FixtureConnect({ rendererId, rendererConnect, moduleWrappers, systemDecorators, initialFixtureId, selectedFixtureId, onErrorReset, renderMessage, }: Props): JSX.Element;
+export {};

package/dist/renderer/FixtureConnect.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { FixtureLoader } from './FixtureLoader.js';
+import { FixtureStateChangeResponse } from './FixtureStateChangeResponse.js';
+import { LazyFixtureLoader } from './LazyFixtureLoader.js';
+import { useRendererRequest } from './useRendererRequest.js';
+import { useRendererResponse } from './useRendererResponse.js';
+import { useSelectedFixture } from './useSelectedFixture.js';
+export function FixtureConnect({ rendererId, rendererConnect, moduleWrappers, systemDecorators, initialFixtureId, selectedFixtureId, onErrorReset, renderMessage = defaultRenderMessage, }) {
+    const { selectedFixture, setSelectedFixture, setFixtureState } = useSelectedFixture(initialFixtureId, selectedFixtureId);
+    useRendererRequest(rendererId, rendererConnect, moduleWrappers, setSelectedFixture, onErrorReset);
+    useRendererResponse(rendererId, rendererConnect, moduleWrappers, initialFixtureId);
+    if (!selectedFixture) {
+        return renderMessage('No fixture selected.');
+    }
+    const { fixtureId, fixtureState, renderKey } = selectedFixture;
+    if (!moduleWrappers.fixtures[fixtureId.path]) {
+        return renderMessage(`Fixture path not found: ${fixtureId.path}`);
+    }
+    return (React.createElement(React.Fragment, null,
+        moduleWrappers.lazy ? (React.createElement(LazyFixtureLoader, { rendererId: rendererId, rendererConnect: rendererConnect, fixtureWrapper: moduleWrappers.fixtures[fixtureId.path], decorators: moduleWrappers.decorators, systemDecorators: systemDecorators, fixtureId: fixtureId, fixtureState: fixtureState, setFixtureState: setFixtureState, renderMessage: renderMessage, renderKey: renderKey, onErrorReset: onErrorReset })) : (React.createElement(FixtureLoader, { fixtureWrapper: moduleWrappers.fixtures[fixtureId.path], decorators: moduleWrappers.decorators, systemDecorators: systemDecorators, fixtureId: fixtureId, fixtureState: fixtureState, setFixtureState: setFixtureState, renderMessage: renderMessage, renderKey: renderKey, onErrorReset: onErrorReset })),
+        React.createElement(FixtureStateChangeResponse, { rendererId: rendererId, rendererConnect: rendererConnect, selectedFixture: selectedFixture, setSelectedFixture: setSelectedFixture })));
+}
+function defaultRenderMessage(msg) {
+    return React.createElement(React.Fragment, null, msg);
+}

package/dist/renderer/FixtureLoader.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { FixtureId } from '../fixture/types.js';
+import { FixtureState, SetFixtureState } from '../fixtureState/types.js';
+import { ByPath, ReactDecorator, ReactDecoratorWrapper, ReactFixtureWrapper } from './userModuleTypes.js';
+type Props = {
+    fixtureWrapper: ReactFixtureWrapper;
+    decorators: ByPath<ReactDecoratorWrapper>;
+    systemDecorators: ReactDecorator[];
+    fixtureId: FixtureId;
+    fixtureState: FixtureState;
+    setFixtureState: SetFixtureState;
+    renderMessage: (msg: string) => ReactElement;
+    renderKey: number;
+    onErrorReset?: () => unknown;
+};
+export declare function FixtureLoader({ fixtureWrapper, decorators, systemDecorators, fixtureId, fixtureState, setFixtureState, renderMessage, renderKey, onErrorReset, }: Props): JSX.Element;
+export {};

package/dist/renderer/FixtureLoader.js

@@ -0,0 +1,16 @@
+import React, { useMemo } from 'react';
+import { DecoratedFixture } from './DecoratedFixture.js';
+import { getFixture } from './getFixture.js';
+import { getSortedDecoratorsForFixturePath } from './getSortedDecoratorsForFixturePath.js';
+import { useFixtureModules } from './useFixtureModules.js';
+export function FixtureLoader({ fixtureWrapper, decorators, systemDecorators, fixtureId, fixtureState, setFixtureState, renderMessage, renderKey, onErrorReset, }) {
+    const decoratorWrappers = useMemo(() => getSortedDecoratorsForFixturePath(fixtureId.path, decorators), [decorators, fixtureId.path]);
+    const modules = useFixtureModules(fixtureId.path, fixtureWrapper, decoratorWrappers);
+    const { fixtureModule, decoratorModules } = modules;
+    const fixtureExport = fixtureModule.default;
+    const fixture = getFixture(fixtureExport, fixtureId.name);
+    if (typeof fixture === 'undefined') {
+        return renderMessage(`Invalid fixture ID: ${JSON.stringify(fixtureId)}`);
+    }
+    return (React.createElement(DecoratedFixture, { fixture: fixture, systemDecorators: systemDecorators, userDecoratorModules: decoratorModules, fixtureState: fixtureState, setFixtureState: setFixtureState, renderKey: renderKey, onErrorReset: onErrorReset }));
+}

package/dist/renderer/FixtureStateChangeResponse.d.ts

@@ -0,0 +1,11 @@
+import { Dispatch, SetStateAction } from 'react';
+import { RendererConnect } from './rendererConnectTypes.js';
+import { SelectedFixture } from './useSelectedFixture.js';
+type Props = {
+    rendererId: string;
+    rendererConnect: RendererConnect;
+    selectedFixture: SelectedFixture;
+    setSelectedFixture: Dispatch<SetStateAction<SelectedFixture | null>>;
+};
+export declare function FixtureStateChangeResponse({ rendererId, rendererConnect, selectedFixture, setSelectedFixture, }: Props): null;
+export {};

package/dist/renderer/FixtureStateChangeResponse.js

@@ -0,0 +1,34 @@
+import { isEqual } from 'lodash-es';
+import { useEffect } from 'react';
+export function FixtureStateChangeResponse({ rendererId, rendererConnect, selectedFixture, setSelectedFixture, }) {
+    const { fixtureId, fixtureState, syncedFixtureState } = selectedFixture;
+    useEffect(() => {
+        if (!isEqual(fixtureState, syncedFixtureState)) {
+            rendererConnect.postMessage({
+                type: 'fixtureStateChange',
+                payload: {
+                    rendererId,
+                    fixtureId,
+                    fixtureState,
+                },
+            });
+            setSelectedFixture(prev => {
+                // Ensure fixture state applies to currently selected fixture
+                if (prev && isEqual(prev.fixtureId, fixtureId)) {
+                    return { ...prev, syncedFixtureState: fixtureState };
+                }
+                else {
+                    return prev;
+                }
+            });
+        }
+    }, [
+        fixtureId,
+        fixtureState,
+        rendererConnect,
+        rendererId,
+        setSelectedFixture,
+        syncedFixtureState,
+    ]);
+    return null;
+}

package/dist/renderer/LazyFixtureListItemUpdate.d.ts

@@ -0,0 +1,10 @@
+import { RendererConnect } from './rendererConnectTypes.js';
+import { ReactFixtureModule } from './userModuleTypes.js';
+type Props = {
+    rendererId: string;
+    rendererConnect: RendererConnect;
+    fixturePath: string;
+    fixtureModule: ReactFixtureModule;
+};
+export declare function LazyFixtureListItemUpdate({ rendererId, rendererConnect, fixturePath, fixtureModule, }: Props): null;
+export {};

package/dist/renderer/LazyFixtureListItemUpdate.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { getFixtureItemFromExport } from './getFixtureList.js';
+export function LazyFixtureListItemUpdate({ rendererId, rendererConnect, fixturePath, fixtureModule, }) {
+    useEffect(() => {
+        rendererConnect.postMessage({
+            type: 'fixtureListItemUpdate',
+            payload: {
+                rendererId,
+                fixturePath,
+                fixtureItem: getFixtureItemFromExport(fixtureModule.default),
+            },
+        });
+    }, [fixtureModule.default, fixturePath, rendererConnect, rendererId]);
+    return null;
+}

package/dist/renderer/LazyFixtureLoader.d.ts

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react';
+import { FixtureId } from '../fixture/types.js';
+import { FixtureState, SetFixtureState } from '../fixtureState/types.js';
+import { RendererConnect } from './rendererConnectTypes.js';
+import { ByPath, LazyReactDecoratorWrapper, LazyReactFixtureWrapper, ReactDecorator } from './userModuleTypes.js';
+type Props = {
+    rendererId: string;
+    rendererConnect: RendererConnect;
+    fixtureWrapper: LazyReactFixtureWrapper;
+    decorators: ByPath<LazyReactDecoratorWrapper>;
+    systemDecorators: ReactDecorator[];
+    fixtureId: FixtureId;
+    fixtureState: FixtureState;
+    setFixtureState: SetFixtureState;
+    renderMessage: (msg: string) => ReactElement;
+    renderKey: number;
+    onErrorReset?: () => unknown;
+};
+export declare function LazyFixtureLoader({ rendererId, rendererConnect, fixtureWrapper, decorators, systemDecorators, fixtureId, fixtureState, setFixtureState, renderMessage, renderKey, onErrorReset, }: Props): JSX.Element | null;
+export {};

package/dist/renderer/LazyFixtureLoader.js

@@ -0,0 +1,22 @@
+import React, { useMemo } from 'react';
+import { DecoratedFixture } from './DecoratedFixture.js';
+import { getFixture } from './getFixture.js';
+import { getSortedDecoratorsForFixturePath } from './getSortedDecoratorsForFixturePath.js';
+import { LazyFixtureListItemUpdate } from './LazyFixtureListItemUpdate.js';
+import { useLazyFixtureModules } from './useLazyFixtureModules.js';
+export function LazyFixtureLoader({ rendererId, rendererConnect, fixtureWrapper, decorators, systemDecorators, fixtureId, fixtureState, setFixtureState, renderMessage, renderKey, onErrorReset, }) {
+    const decoratorWrappers = useMemo(() => getSortedDecoratorsForFixturePath(fixtureId.path, decorators), [decorators, fixtureId.path]);
+    const modules = useLazyFixtureModules(fixtureId.path, fixtureWrapper, decoratorWrappers);
+    if (!modules) {
+        return null;
+    }
+    const { fixtureModule, decoratorModules } = modules;
+    const fixtureExport = fixtureModule.default;
+    const fixture = getFixture(fixtureExport, fixtureId.name);
+    if (typeof fixture === 'undefined') {
+        return renderMessage(`Invalid fixture ID: ${JSON.stringify(fixtureId)}`);
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DecoratedFixture, { fixture: fixture, systemDecorators: systemDecorators, userDecoratorModules: decoratorModules, fixtureState: fixtureState, setFixtureState: setFixtureState, renderKey: renderKey, onErrorReset: onErrorReset }),
+        React.createElement(LazyFixtureListItemUpdate, { rendererId: rendererId, rendererConnect: rendererConnect, fixturePath: fixtureId.path, fixtureModule: fixtureModule })));
+}

package/dist/renderer/{FixtureLoader/postMessage.d.ts → createPostMessageConnect.d.ts}

@@ -1,2 +1,2 @@
-import { RendererConnect } from '../types.js';
+import { RendererConnect } from './rendererConnectTypes.js';
 export declare function createPostMessageConnect(): RendererConnect;

package/dist/renderer/{FixtureLoader/postMessage.js → createPostMessageConnect.js}

@@ -1,4 +1,4 @@
-import { registerPlaygroundShortcuts } from '../registerPlaygroundShortcuts.js';
+import { registerPlaygroundShortcuts } from './registerPlaygroundShortcuts.js';
 export function createPostMessageConnect() {
     function postMessage(msg) {
         parent.postMessage(msg, '*');

package/dist/renderer/{FixtureLoader/webSockets.d.ts → createWebSocketsConnect.d.ts}

@@ -1,2 +1,2 @@
-import { RendererConnect } from '../types.js';
+import { RendererConnect } from './rendererConnectTypes.js';
 export declare function createWebSocketsConnect(url: string): RendererConnect;

package/dist/renderer/{FixtureLoader/webSockets.js → createWebSocketsConnect.js}

@@ -1,4 +1,4 @@
-import { rendererSocketMessage, } from '../../server/socketMessage.js';
+import { rendererSocketMessage, } from '../server/socketMessage.js';
 export function createWebSocketsConnect(url) {
     let pendingMessages = [];
     const socket = new WebSocket(url);

package/dist/renderer/{FixtureLoader/getDecoratedFixtureElement → getDecoratedFixtureElement}/index.d.ts

@@ -1,2 +1,2 @@
-import { ReactDecorator, ReactDecoratorProps, ReactFixture } from '../../reactTypes.js';
+import { ReactDecorator, ReactDecoratorProps, ReactFixture } from '../userModuleTypes.js';
 export declare function getDecoratedFixtureElement(fixture: ReactFixture, decorators: ReactDecorator[], decoratorProps: Omit<ReactDecoratorProps, 'children'>): JSX.Element;

package/dist/renderer/{FixtureLoader/fixtureHelpers.d.ts → getFixture.d.ts}

@@ -1,2 +1,2 @@
-import { ReactFixture, ReactFixtureExport } from '../reactTypes.js';
+import { ReactFixture, ReactFixtureExport } from './userModuleTypes.js';
 export declare function getFixture(fixtureExport: ReactFixtureExport, fixtureName?: string): void | ReactFixture;

package/dist/renderer/{FixtureLoader/fixtureHelpers.js → getFixture.js}

@@ -1,9 +1,10 @@
-import { isMultiFixture } from '../isMultiFixture.js';
+import { isMultiFixture } from './isMultiFixture.js';
 export function getFixture(fixtureExport, fixtureName) {
     if (fixtureName === undefined) {
         if (isMultiFixture(fixtureExport)) {
             // Fixture name missing in multi fixture
-            return;
+            const fixtureNames = Object.keys(fixtureExport);
+            return fixtureExport[fixtureNames[0]];
         }
         return fixtureExport;
     }

package/dist/renderer/getFixtureList.d.ts

@@ -1,8 +1,7 @@
-import { FixtureListItem } from '../fixture/types.js';
-import { ReactFixtureExports, ReactFixtureWrappers } from './reactTypes.js';
-export declare function getFixtureListFromWrappers(wrappers: ReactFixtureWrappers): {
-    [x: string]: FixtureListItem;
-};
-export declare function getFixtureListFromExports(exports: ReactFixtureExports): {
+import { FixtureList, FixtureListItem } from '../fixture/types.js';
+import { ByPath, ReactFixtureExport, UserModuleWrappers } from './userModuleTypes.js';
+export declare function getFixtureListFromWrappers(wrappers: UserModuleWrappers): FixtureList;
+export declare function getFixtureListFromExports(exports: ByPath<ReactFixtureExport>): {
     [x: string]: FixtureListItem;
 };
+export declare function getFixtureItemFromExport(fixtureExport: ReactFixtureExport): FixtureListItem;

package/dist/renderer/getFixtureList.js

@@ -1,18 +1,23 @@
 import { isMultiFixture } from './isMultiFixture.js';
 export function getFixtureListFromWrappers(wrappers) {
-    return Object.keys(wrappers).reduce((acc, fixturePath) => {
-        return { ...acc, [fixturePath]: getItemFromWrapper(wrappers[fixturePath]) };
+    return Object.keys(wrappers.fixtures).reduce((acc, fixturePath) => {
+        return {
+            ...acc,
+            [fixturePath]: wrappers.lazy
+                ? { type: 'single' }
+                : getFixtureItemFromExport(wrappers.fixtures[fixturePath].module.default),
+        };
     }, {});
 }
 export function getFixtureListFromExports(exports) {
     return Object.keys(exports).reduce((acc, fixturePath) => {
-        return { ...acc, [fixturePath]: getItemFromExport(exports[fixturePath]) };
+        return {
+            ...acc,
+            [fixturePath]: getFixtureItemFromExport(exports[fixturePath]),
+        };
     }, {});
 }
-function getItemFromWrapper(wrapper) {
-    return getItemFromExport(wrapper.module.default);
-}
-function getItemFromExport(fixtureExport) {
+export function getFixtureItemFromExport(fixtureExport) {
     return isMultiFixture(fixtureExport)
         ? { type: 'multi', fixtureNames: Object.keys(fixtureExport) }
         : { type: 'single' };

package/dist/renderer/getSortedDecoratorsForFixturePath.d.ts

@@ -1,2 +1,2 @@
-import { ReactDecorator, ReactDecorators } from './reactTypes.js';
-export declare function getSortedDecoratorsForFixturePath(fixturePath: string, decoratorsByPath: ReactDecorators): ReactDecorator[];
+import { ByPath } from './userModuleTypes.js';
+export declare function getSortedDecoratorsForFixturePath<T>(fixturePath: string, decoratorsByPath: ByPath<T>): T[];

package/dist/renderer/isMultiFixture.d.ts

@@ -1,2 +1,2 @@
-import { ReactFixtureExport, ReactFixtureMap } from './reactTypes.js';
+import { ReactFixtureExport, ReactFixtureMap } from './userModuleTypes.js';
 export declare function isMultiFixture(fixtureExport: ReactFixtureExport): fixtureExport is ReactFixtureMap;