react-cosmos-core 6.1.2-canary.db623aa.0 → 6.2.0

package/dist/fixtureState/createValues.d.ts

@@ -1,3 +1,4 @@
-import { FixtureStateValue, FixtureStateValues, ObjectData } from './types.js';
+import { ObjectData } from '../utils/data.js';
+import { FixtureStateValue, FixtureStateValues } from './types.js';
 export declare function createValues(obj: ObjectData): FixtureStateValues;
 export declare function createValue(data: unknown): FixtureStateValue;

package/dist/fixtureState/createValues.js

@@ -1,5 +1,5 @@
 import { isElement } from 'react-is';
-import { isArray, isObject, isPrimitiveData } from './shared.js';
+import { isArray, isObject, isPrimitiveData, } from '../utils/data.js';
 export function createValues(obj) {
     const values = {};
     Object.keys(obj).forEach(key => {
@@ -32,8 +32,20 @@ export function createValue(data) {
     };
 }
 function stringifyUnserializableData(data) {
+    if (typeof data === 'function') {
+        return stringifyFunction(data);
+    }
     // NOTE: We used to use the react-element-to-jsx-string package but it added
     // bloat and complicated ESM support. We might go back to something similar
     // in the future. Or expose a plugin API for custom stringifiers.
     return isElement(data) ? '<React.Element />' : String(data);
 }
+const emptyFnRegex = /^\(\) => \{.+\}$/s;
+function stringifyFunction(data) {
+    // This clears space from empty function bodies. It originates as a fix for
+    // Vitest tests that needed to create deterministic fixture state values, but
+    // it cleans up how stringified functions look in the Cosmos UI as well.
+    // Potential improvement: Remove all extra indentation from function bodies
+    // to match the root-level function header indentation.
+    return String(data).replace(emptyFnRegex, '() => {}');
+}

package/dist/fixtureState/extendWithValues.d.ts

@@ -1,3 +1,4 @@
-import { FixtureStateValue, FixtureStateValues, ObjectData } from './types.js';
+import { ObjectData } from '../utils/data.js';
+import { FixtureStateValue, FixtureStateValues } from './types.js';
 export declare function extendWithValues(obj: ObjectData, values: FixtureStateValues): ObjectData;
 export declare function extendWithValue(data: unknown, value: FixtureStateValue): unknown;

package/dist/fixtureState/extendWithValues.js

@@ -1,4 +1,4 @@
-import { isArray, isObject } from './shared.js';
+import { isArray, isObject } from '../utils/data.js';
 // Use fixture state for serializable values and fall back to base values
 export function extendWithValues(obj, values) {
     const extendedObj = {};

package/dist/fixtureState/types.d.ts

@@ -1,3 +1,4 @@
+import { PrimitiveData } from '../utils/data.js';
 import { StateUpdater } from '../utils/state.js';
 export type FixtureDecoratorId = string;
 export type FixtureElementId = {
@@ -8,9 +9,6 @@ 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 FixtureStatePrimitiveValue = {
     type: 'primitive';
     data: PrimitiveData;

package/dist/index.d.ts

@@ -30,13 +30,14 @@ export * from './userModules/getSortedDecoratorsForFixturePath.js';
 export * from './userModules/stringifyFixtureId.js';
 export * from './userModules/userModuleTypes.js';
 export * from './utils/array.js';
+export * from './utils/data.js';
 export * from './utils/keys.js';
 export * from './utils/queryString.js';
-export * from './utils/react/ClassStateMock.js';
-export * from './utils/react/DelayRender.js';
 export * from './utils/react/areNodesEqual.js';
+export * from './utils/react/DelayRender.js';
 export * from './utils/react/getComponentName.js';
 export * from './utils/react/isReactElement.js';
+export * from './utils/serializable.js';
 export * from './utils/state.js';
 export * from './utils/string.js';
 export * from './utils/tree.js';

package/dist/index.js

@@ -30,13 +30,14 @@ export * from './userModules/getSortedDecoratorsForFixturePath.js';
 export * from './userModules/stringifyFixtureId.js';
 export * from './userModules/userModuleTypes.js';
 export * from './utils/array.js';
+export * from './utils/data.js';
 export * from './utils/keys.js';
 export * from './utils/queryString.js';
-export * from './utils/react/ClassStateMock.js';
-export * from './utils/react/DelayRender.js';
 export * from './utils/react/areNodesEqual.js';
+export * from './utils/react/DelayRender.js';
 export * from './utils/react/getComponentName.js';
 export * from './utils/react/isReactElement.js';
+export * from './utils/serializable.js';
 export * from './utils/state.js';
 export * from './utils/string.js';
 export * from './utils/tree.js';

package/dist/renderer/rendererConnect.d.ts

@@ -58,6 +58,7 @@ export type FixtureLoadedResponse = {
     payload: {
         rendererId: RendererId;
         fixture: FixtureListItem;
+        fixtureOptions: {};
     };
 };
 export type FixtureStateChangeResponse = {

package/dist/userModules/isMultiFixture.js

@@ -2,5 +2,11 @@ import { isElement } from 'react-is';
 export function isMultiFixture(fixtureExport) {
     return (fixtureExport !== null &&
         typeof fixtureExport === 'object' &&
-        !isElement(fixtureExport));
+        !isElement(fixtureExport) &&
+        // With React Server Components, fixture exports of Client fixtures are
+        // wrapped in a Promise. The React ComponentType union does include
+        // PromiseLikeOfReactNode but for some reason it's impossible do type
+        // narrowing or use a type predicate function.
+        // @ts-ignore Sadly, we resort to the "cause I said so" type assertion
+        typeof fixtureExport.then !== 'function');
 }

package/dist/userModules/userModuleTypes.d.ts

@@ -1,10 +1,11 @@
-import { ComponentType, FunctionComponent, ReactNode } from 'react';
+import { ComponentType, ReactNode } from 'react';
 type FixtureMap<FixtureType> = {
     [fixtureName: string]: FixtureType;
 };
 type FixtureExport<FixtureType> = FixtureType | FixtureMap<FixtureType>;
 type FixtureModule<FixtureType> = {
     default: FixtureExport<FixtureType>;
+    options?: {};
 };
 type ModuleWrapper<ModuleType> = {
     module: ModuleType;
@@ -12,18 +13,19 @@ type ModuleWrapper<ModuleType> = {
 type LazyModuleWrapper<ModuleType> = {
     getModule: () => Promise<ModuleType>;
 };
-export type ReactFixture = ReactNode | FunctionComponent;
+export type ReactFixture = ReactNode | ComponentType;
 export type ReactFixtureMap = FixtureMap<ReactFixture>;
 export type ReactFixtureExport = FixtureExport<ReactFixture>;
 export type ReactFixtureModule = FixtureModule<ReactFixture>;
 export type ReactFixtureWrapper = ModuleWrapper<ReactFixtureModule>;
 export type LazyReactFixtureWrapper = LazyModuleWrapper<ReactFixtureModule>;
-export type ReactDecoratorProps = {
+export type DecoratorProps<T = {}> = {
     children: ReactNode;
+    options: T;
 };
-export type ReactDecorator = ComponentType<ReactDecoratorProps>;
+export type ReactDecorator<T = {}> = ComponentType<DecoratorProps<T>>;
 export type ReactDecoratorModule = {
-    default: ReactDecorator;
+    default: ReactDecorator<any> | ReactDecorator<any>[];
 };
 export type ReactDecoratorWrapper = ModuleWrapper<ReactDecoratorModule>;
 export type LazyReactDecoratorWrapper = LazyModuleWrapper<ReactDecoratorModule>;

package/dist/{fixtureState/shared.d.ts → utils/data.d.ts}

@@ -1,4 +1,6 @@
-import { ArrayData, ObjectData, PrimitiveData } from './types.js';
+export type PrimitiveData = string | number | boolean | null | undefined;
+export type ObjectData = Record<string, unknown>;
+export type ArrayData = unknown[];
 export declare function isString(value: unknown): value is string;
 export declare function isNumber(value: unknown): value is number;
 export declare function isBoolean(value: unknown): value is boolean;

package/dist/utils/serializable.d.ts

@@ -0,0 +1,4 @@
+export declare function pickSerializableValues(object: Record<string, unknown>): {
+    [k: string]: unknown;
+};
+export declare function isSerializable(data: unknown): boolean;

package/dist/utils/serializable.js

@@ -0,0 +1,11 @@
+import { isArray, isObject, isPrimitiveData } from './data.js';
+export function pickSerializableValues(object) {
+    return Object.fromEntries(Object.entries(object).filter(([k, v]) => isSerializable(v)));
+}
+export function isSerializable(data) {
+    if (isObject(data))
+        return Object.values(data).every(isSerializable);
+    if (isArray(data))
+        return data.every(isSerializable);
+    return isPrimitiveData(data);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cosmos-core",
-  "version": "6.1.2-canary.db623aa.0+db623aa",
+  "version": "6.2.0",
   "description": "React Cosmos Core",
   "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos-core",
   "license": "MIT",
@@ -10,7 +10,7 @@
   "dependencies": {
     "js-base64": "3.7.7",
     "lodash-es": "4.17.21",
-    "react-is": "18.2.0"
+    "react-is": "18.3.1"
   },
-  "gitHead": "db623aa4837dff16466b0cda1617fcda5d2f071d"
+  "gitHead": "965bf0e13230324699560be6eabb642c51c6d945"
 }

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

@@ -1,13 +0,0 @@
-import React from 'react';
-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;
-}
-export {};

package/dist/utils/react/ClassStateMock.js

@@ -1,72 +0,0 @@
-import { isEqual } from 'lodash-es';
-import React from 'react';
-// Compied from https://github.com/skidding/react-mock/blob/c33dfa1d6f0c9ce7b3eaba073618d61731a0e82e/packages/state/src/index.js
-export 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);
-        }
-    };
-}
-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;
-    }
-}