react-cosmos-core 6.0.0-alpha.13 → 6.0.0-alpha.16

package/dist/index.d.ts

@@ -26,6 +26,7 @@ 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/ClassStateMock.js';
 export * from './utils/react/getComponentName.js';
 export * from './utils/react/isReactElement.js';
 export * from './utils/string.js';

package/dist/index.js

@@ -26,6 +26,7 @@ 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/ClassStateMock.js';
 export * from './utils/react/getComponentName.js';
 export * from './utils/react/isReactElement.js';
 export * from './utils/string.js';

package/dist/renderer/DecoratedFixture.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FixtureState, SetFixtureState } from '../fixtureState/types.js';
 import { ReactDecorator, ReactDecoratorModule, ReactFixture } from './userModuleTypes.js';
 type Props = {

package/dist/renderer/FixtureConnect.d.ts

@@ -10,7 +10,8 @@ type Props = {
     initialFixtureId?: FixtureId;
     selectedFixtureId?: null | FixtureId;
     renderMessage?: (msg: string) => ReactElement;
+    renderNoFixtureSelected?: boolean;
     onErrorReset?: () => unknown;
 };
-export declare function FixtureConnect({ rendererId, rendererConnect, moduleWrappers, systemDecorators, initialFixtureId, selectedFixtureId, onErrorReset, renderMessage, }: Props): JSX.Element;
+export declare function FixtureConnect({ rendererId, rendererConnect, moduleWrappers, systemDecorators, initialFixtureId, selectedFixtureId, onErrorReset, renderMessage, renderNoFixtureSelected, }: Props): JSX.Element | null;
 export {};

package/dist/renderer/FixtureConnect.js

@@ -5,12 +5,14 @@ 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, }) {
+export function FixtureConnect({ rendererId, rendererConnect, moduleWrappers, systemDecorators, initialFixtureId, selectedFixtureId, onErrorReset, renderMessage = defaultRenderMessage, renderNoFixtureSelected = true, }) {
     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.');
+        return renderNoFixtureSelected
+            ? renderMessage('No fixture selected.')
+            : null;
     }
     const { fixtureId, fixtureState, renderKey } = selectedFixture;
     if (!moduleWrappers.fixtures[fixtureId.path]) {

package/dist/renderer/FixtureLoader.js

@@ -10,7 +10,7 @@ export function FixtureLoader({ fixtureWrapper, decorators, systemDecorators, fi
     const fixtureExport = fixtureModule.default;
     const fixture = getFixture(fixtureExport, fixtureId.name);
     if (typeof fixture === 'undefined') {
-        return renderMessage(`Invalid fixture ID: ${JSON.stringify(fixtureId)}`);
+        return renderMessage(`Invalid fixture name: ${fixtureId.name}`);
     }
     return (React.createElement(DecoratedFixture, { fixture: fixture, systemDecorators: systemDecorators, userDecoratorModules: decoratorModules, fixtureState: fixtureState, setFixtureState: setFixtureState, renderKey: renderKey, onErrorReset: onErrorReset }));
 }

package/dist/renderer/LazyFixtureLoader.js

@@ -14,7 +14,7 @@ export function LazyFixtureLoader({ rendererId, rendererConnect, fixtureWrapper,
     const fixtureExport = fixtureModule.default;
     const fixture = getFixture(fixtureExport, fixtureId.name);
     if (typeof fixture === 'undefined') {
-        return renderMessage(`Invalid fixture ID: ${JSON.stringify(fixtureId)}`);
+        return renderMessage(`Invalid fixture name: ${fixtureId.name}`);
     }
     return (React.createElement(React.Fragment, null,
         React.createElement(DecoratedFixture, { fixture: fixture, systemDecorators: systemDecorators, userDecoratorModules: decoratorModules, fixtureState: fixtureState, setFixtureState: setFixtureState, renderKey: renderKey, onErrorReset: onErrorReset }),

package/dist/renderer/getDecoratedFixtureElement/index.d.ts

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

package/dist/utils/react/ClassStateMock.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type Props = {
+    children: React.ClassicElement<unknown>;
+    state?: {};
+};
+export declare class ClassStateMock extends React.Component<Props> {
+    static cosmosCapture: boolean;
+    childRef: React.Component | null;
+    render(): React.CElement<unknown, React.Component<{}, {}, any>>;
+    componentDidUpdate(prevProps: Props): void;
+    handleRef: (childRef: React.Component | null) => void;
+}

package/dist/utils/react/ClassStateMock.js

@@ -0,0 +1,73 @@
+import { isEqual } from 'lodash-es';
+import React from 'react';
+// Compied from https://github.com/skidding/react-mock/blob/c33dfa1d6f0c9ce7b3eaba073618d61731a0e82e/packages/state/src/index.js
+class ClassStateMock extends React.Component {
+    static cosmosCapture = false;
+    childRef = null;
+    render() {
+        const { children } = this.props;
+        if (Array.isArray(children)) {
+            throw new Error('ClassStateMock only accepts a single child element');
+        }
+        return React.cloneElement(children, { ref: this.handleRef });
+    }
+    componentDidUpdate(prevProps) {
+        const { childRef } = this;
+        const { state } = this.props;
+        if (!childRef) {
+            throw new Error('childRef missing in ClassStateMock.componentDidUpdate');
+        }
+        if (state && !isEqual(state, prevProps.state)) {
+            replaceState(childRef, state);
+        }
+    }
+    handleRef = (childRef) => {
+        const prevRef = this.props.children.ref;
+        this.childRef = childRef;
+        if (!childRef) {
+            if (prevRef)
+                manuallyCallRef(prevRef, childRef);
+            // Nothing else to do on the unmount branch (when refs are set to NULL)
+            return;
+        }
+        if (this.props.state) {
+            // Wait until state has been set to call prev ref. This will give the
+            // impression that the mocked state is the initial state.
+            replaceState(childRef, this.props.state, () => {
+                manuallyCallRef(prevRef, childRef);
+            });
+        }
+        else {
+            manuallyCallRef(prevRef, childRef);
+        }
+    };
+}
+export { ClassStateMock };
+function replaceState(childRef, state, cb) {
+    // We need to unset existing state keys because React doesn't provide a
+    // replaceState method (anymore)
+    // https://reactjs.org/docs/react-component.html#setstate
+    const nextState = resetOriginalKeys(childRef.state, state);
+    if (!isEqual(nextState, childRef.state)) {
+        childRef.setState(nextState, cb);
+    }
+}
+function resetOriginalKeys(original, current) {
+    const { keys } = Object;
+    return keys(original).reduce((result, key) => keys(result).indexOf(key) === -1
+        ? { ...result, [key]: undefined }
+        : result, current);
+}
+function manuallyCallRef(ref, elRef) {
+    if (typeof ref === 'string') {
+        throw new Error('StateMock does not support string refs');
+    }
+    // https://reactjs.org/docs/refs-and-the-dom.html#creating-refs
+    if (typeof ref === 'function') {
+        ref(elRef);
+    }
+    else if (ref && typeof ref === 'object') {
+        // @ts-ignore
+        ref.current = elRef;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cosmos-core",
-  "version": "6.0.0-alpha.13",
+  "version": "6.0.0-alpha.16",
   "description": "React Cosmos Core",
   "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos-core",
   "license": "MIT",
@@ -11,5 +11,5 @@
     "lodash-es": "^4.17.21",
     "react-is": "^18.2.0"
   },
-  "gitHead": "cf95e67ce942f6a242f023ecebe45d6916d5b753"
+  "gitHead": "2a4ec3107303a4a47e09d63e557cee5f8cceb972"
 }