react-cosmos-core 6.0.0-alpha.9 → 6.0.0-beta.2

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

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

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/createFixtureTree/index.d.ts

@@ -1,4 +1,4 @@
-import { FixtureList } from '../../fixture/types.js';
+import { FixtureList } from '../../userModules/fixtureTypes.js';
 import { FixtureTreeNode } from '../types.js';
 export declare function createFixtureTree({ fixtures, fixturesDir, fixtureFileSuffix, }: {
     fixtures: FixtureList;

package/dist/fixtureTree/flattenFixtureTree.d.ts

@@ -1,4 +1,4 @@
-import { FixtureId } from '../fixture/types.js';
+import { FixtureId } from '../userModules/fixtureTypes.js';
 import { FixtureTreeNode } from './types.js';
 export type FlatFixtureTreeItem = {
     fileName: string;

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

@@ -1,30 +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/controls.js';
+export * from './fixtureState/createValues.js';
+export * from './fixtureState/extendWithValues.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 './message/serverMessage.js';
+export * from './message/socketMessage.js';
+export * from './playground/playgroundParams.js';
+export * from './playground/playgroundQueryString.js';
+export * from './playground/registerPlaygroundShortcuts.js';
+export * from './plugin/cosmosPluginConfig.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 './renderer/rendererConnect.js';
+export * from './renderer/rendererQueryString.js';
+export * from './renderer/rendererUrl.js';
+export * from './server/serverTypes.js';
+export * from './userModules/fixtureTypes.js';
+export * from './userModules/getFixtureFromExport.js';
+export * from './userModules/getFixtureList.js';
+export * from './userModules/getSortedDecoratorsForFixturePath.js';
+export * from './userModules/stringifyFixtureId.js';
+export * from './userModules/userModuleTypes.js';
 export * from './utils/array.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/getComponentName.js';
 export * from './utils/react/isReactElement.js';
@@ -32,3 +36,4 @@ export * from './utils/string.js';
 export * from './utils/tree.js';
 export * from './utils/types.js';
 export * from './utils/uuid.js';
+export * from './utils/window.js';

package/dist/index.js

@@ -1,30 +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/controls.js';
+export * from './fixtureState/createValues.js';
+export * from './fixtureState/extendWithValues.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 './message/serverMessage.js';
+export * from './message/socketMessage.js';
+export * from './playground/playgroundParams.js';
+export * from './playground/playgroundQueryString.js';
+export * from './playground/registerPlaygroundShortcuts.js';
+export * from './plugin/cosmosPluginConfig.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 './renderer/rendererConnect.js';
+export * from './renderer/rendererQueryString.js';
+export * from './renderer/rendererUrl.js';
+export * from './server/serverTypes.js';
+export * from './userModules/fixtureTypes.js';
+export * from './userModules/getFixtureFromExport.js';
+export * from './userModules/getFixtureList.js';
+export * from './userModules/getSortedDecoratorsForFixturePath.js';
+export * from './userModules/stringifyFixtureId.js';
+export * from './userModules/userModuleTypes.js';
 export * from './utils/array.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/getComponentName.js';
 export * from './utils/react/isReactElement.js';
@@ -32,3 +36,4 @@ export * from './utils/string.js';
 export * from './utils/tree.js';
 export * from './utils/types.js';
 export * from './utils/uuid.js';
+export * from './utils/window.js';

package/dist/playground/playgroundParams.d.ts

@@ -0,0 +1,4 @@
+import { FixtureId } from '../userModules/fixtureTypes.js';
+export type PlaygroundParams = {
+    fixtureId?: FixtureId;
+};

package/dist/playground/playgroundQueryString.d.ts

@@ -0,0 +1,3 @@
+import { PlaygroundParams } from './playgroundParams.js';
+export declare function buildPlaygroundQueryString(params: PlaygroundParams): string;
+export declare function parsePlaygroundQueryString(query: string): PlaygroundParams;

package/dist/playground/playgroundQueryString.js

@@ -0,0 +1,21 @@
+import { buildQueryString, parseQueryString } from '../utils/queryString.js';
+export function buildPlaygroundQueryString(params) {
+    return buildQueryString(encodePlaygroundSearchParams(params));
+}
+export function parsePlaygroundQueryString(query) {
+    return decodePlaygroundSearchParams(parseQueryString(query));
+}
+function encodePlaygroundSearchParams(params) {
+    const stringParams = {};
+    if (params.fixtureId) {
+        stringParams.fixtureId = JSON.stringify(params.fixtureId);
+    }
+    return stringParams;
+}
+function decodePlaygroundSearchParams(stringParams) {
+    const params = {};
+    if (stringParams.fixtureId) {
+        params.fixtureId = JSON.parse(stringParams.fixtureId);
+    }
+    return params;
+}

package/dist/{server → plugin}/cosmosPluginConfig.d.ts

@@ -1,15 +1,13 @@
 export type RawCosmosPluginConfig = {
     name: string;
     ui?: string;
-    devServer?: string;
-    export?: string;
+    server?: string;
 };
 export type CosmosPluginConfig = {
     name: string;
     rootDir: string;
     ui?: string;
-    devServer?: string;
-    export?: string;
+    server?: string;
 };
 export type UiCosmosPluginConfig = CosmosPluginConfig & {
     ui: string;

package/dist/renderer/rendererConfig.d.ts

@@ -1,3 +1,4 @@
 export type RendererConfig = {
     playgroundUrl: string;
+    rendererUrl?: null | string;
 };

package/dist/renderer/{types.d.ts → rendererConnect.d.ts}

@@ -1,9 +1,15 @@
 import { FixtureState } from '../fixtureState/types.js';
-import { FixtureId, FixtureList } from '../fixture/types.js';
+import { FixtureId, FixtureList } from '../userModules/fixtureTypes.js';
 export type RendererId = string;
 export type PingRenderersRequest = {
     type: 'pingRenderers';
 };
+export type ReloadRendererRequest = {
+    type: 'reloadRenderer';
+    payload: {
+        rendererId: RendererId;
+    };
+};
 export type SelectFixtureRequest = {
     type: 'selectFixture';
     payload: {
@@ -26,13 +32,12 @@ export type SetFixtureStateRequest = {
         fixtureState: FixtureState;
     };
 };
-export type RendererRequest = PingRenderersRequest | SelectFixtureRequest | UnselectFixtureRequest | SetFixtureStateRequest;
+export type RendererRequest = PingRenderersRequest | ReloadRendererRequest | SelectFixtureRequest | UnselectFixtureRequest | SetFixtureStateRequest;
 export type RendererReadyResponse = {
     type: 'rendererReady';
     payload: {
         rendererId: RendererId;
-        fixtures: FixtureList;
-        initialFixtureId?: FixtureId;
+        selectedFixtureId?: FixtureId | null;
     };
 };
 export type RendererErrorResponse = {
@@ -65,5 +70,5 @@ export type PlaygroundCommandResponse = {
 export type RendererResponse = RendererReadyResponse | RendererErrorResponse | FixtureListUpdateResponse | FixtureStateChangeResponse | PlaygroundCommandResponse;
 export type RendererConnect<Request = RendererRequest, Response = RendererResponse> = {
     postMessage: (msg: Response) => unknown;
-    onMessage(handler: (msg: Request) => unknown): () => unknown;
+    onMessage(handler: (msg: Request) => unknown): () => void;
 };

package/dist/renderer/rendererQueryString.d.ts

@@ -0,0 +1,12 @@
+import { FixtureId } from '../userModules/fixtureTypes.js';
+type RendererParams = {
+    fixtureId?: FixtureId;
+    locked?: boolean;
+};
+export type RendererSearchParams = {
+    fixtureId?: string;
+    locked?: string;
+};
+export declare function buildRendererQueryString(params: RendererParams): string;
+export declare function parseRendererQueryString(query: string): RendererParams;
+export {};

package/dist/renderer/rendererQueryString.js

@@ -0,0 +1,27 @@
+import { buildQueryString, parseQueryString } from '../utils/queryString.js';
+export function buildRendererQueryString(params) {
+    return buildQueryString(encodeRendererSearchParams(params));
+}
+export function parseRendererQueryString(query) {
+    return decodeRendererSearchParams(parseQueryString(query));
+}
+function encodeRendererSearchParams(params) {
+    const stringParams = {};
+    if (params.fixtureId) {
+        stringParams.fixtureId = JSON.stringify(params.fixtureId);
+    }
+    if (params.locked) {
+        stringParams.locked = 'true';
+    }
+    return stringParams;
+}
+function decodeRendererSearchParams(stringParams) {
+    const params = {};
+    if (stringParams.fixtureId) {
+        params.fixtureId = JSON.parse(stringParams.fixtureId);
+    }
+    if (stringParams.locked) {
+        params.locked = stringParams.locked === 'true';
+    }
+    return params;
+}

package/dist/renderer/rendererUrl.d.ts

@@ -0,0 +1,9 @@
+import { CosmosCommand } from '../server/serverTypes.js';
+import { FixtureId } from '../userModules/fixtureTypes.js';
+export declare function createRendererUrl(rendererUrl: string, fixtureId?: FixtureId, locked?: boolean): string;
+export declare function pickRendererUrl(rendererUrl: undefined | null | string | {
+    dev: string;
+    export: string;
+}, command: CosmosCommand): null | string;
+export declare function encodeRendererUrlFixture(fixtureId: FixtureId): string;
+export declare function decodeRendererUrlFixture(fixture: string): FixtureId;

package/dist/renderer/rendererUrl.js

@@ -0,0 +1,42 @@
+import { Base64 } from 'js-base64';
+import { buildRendererQueryString } from './rendererQueryString.js';
+export function createRendererUrl(rendererUrl, fixtureId, locked) {
+    if (hasFixtureVar(rendererUrl)) {
+        if (!fixtureId)
+            return replaceFixtureVar(rendererUrl, 'index');
+        return (replaceFixtureVar(rendererUrl, encodeRendererUrlFixture(fixtureId)) +
+            buildRendererQueryString({ locked }));
+    }
+    else {
+        if (!fixtureId)
+            return rendererUrl;
+        const baseUrl = hostOnlyUrl(rendererUrl) ? rendererUrl + '/' : rendererUrl;
+        return baseUrl + buildRendererQueryString({ fixtureId, locked });
+    }
+}
+export function pickRendererUrl(rendererUrl, command) {
+    return rendererUrl && typeof rendererUrl === 'object'
+        ? rendererUrl[command]
+        : rendererUrl ?? null;
+}
+export function encodeRendererUrlFixture(fixtureId) {
+    return Base64.encode(JSON.stringify(fixtureId));
+}
+export function decodeRendererUrlFixture(fixture) {
+    return JSON.parse(Base64.decode(fixture));
+}
+function hasFixtureVar(rendererUrl) {
+    return rendererUrl.includes('<fixture>');
+}
+function replaceFixtureVar(rendererUrl, fixture) {
+    return rendererUrl.replace(/<fixture>/g, fixture);
+}
+function hostOnlyUrl(url) {
+    try {
+        const { protocol, pathname } = new URL(url);
+        return (protocol === 'http:' || protocol === 'https:') && pathname === '/';
+    }
+    catch (err) {
+        return false;
+    }
+}

package/dist/server/serverTypes.d.ts

@@ -0,0 +1 @@
+export type CosmosCommand = 'dev' | 'export';

package/dist/userModules/getFixtureFromExport.d.ts

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

package/dist/{renderer/FixtureLoader/fixtureHelpers.js → userModules/getFixtureFromExport.js}

@@ -1,9 +1,10 @@
-import { isMultiFixture } from '../isMultiFixture.js';
-export function getFixture(fixtureExport, fixtureName) {
+import { isMultiFixture } from './isMultiFixture.js';
+export function getFixtureFromExport(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/userModules/getFixtureList.d.ts

@@ -0,0 +1,7 @@
+import { FixtureList, FixtureListItem } from './fixtureTypes.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/userModules/getFixtureList.js

@@ -0,0 +1,24 @@
+import { isMultiFixture } from './isMultiFixture.js';
+export function getFixtureListFromWrappers(wrappers) {
+    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]: getFixtureItemFromExport(exports[fixturePath]),
+        };
+    }, {});
+}
+export function getFixtureItemFromExport(fixtureExport) {
+    return isMultiFixture(fixtureExport)
+        ? { type: 'multi', fixtureNames: Object.keys(fixtureExport) }
+        : { type: 'single' };
+}

package/dist/userModules/getSortedDecoratorsForFixturePath.d.ts

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

package/dist/{renderer → userModules}/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;

package/dist/userModules/stringifyFixtureId.d.ts

@@ -0,0 +1,2 @@
+import { FixtureId } from './fixtureTypes.js';
+export declare function stringifyFixtureId(fixtureId: FixtureId): string;

package/dist/userModules/stringifyFixtureId.js

@@ -0,0 +1,4 @@
+export function stringifyFixtureId(fixtureId) {
+    const { path, name } = fixtureId;
+    return name ? `${path}-${name}` : path;
+}

package/dist/userModules/userModuleTypes.d.ts

@@ -0,0 +1,44 @@
+import { ComponentType, FunctionComponent, ReactNode } from 'react';
+type FixtureMap<FixtureType> = {
+    [fixtureName: string]: FixtureType;
+};
+type FixtureExport<FixtureType> = FixtureType | FixtureMap<FixtureType>;
+type FixtureModule<FixtureType> = {
+    default: FixtureExport<FixtureType>;
+};
+type ModuleWrapper<ModuleType> = {
+    module: ModuleType;
+};
+type LazyModuleWrapper<ModuleType> = {
+    getModule: () => Promise<ModuleType>;
+};
+export type ReactFixture = ReactNode | FunctionComponent;
+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 = {
+    children: ReactNode;
+};
+export type ReactDecorator = ComponentType<ReactDecoratorProps>;
+export type ReactDecoratorModule = {
+    default: ReactDecorator;
+};
+export type ReactDecoratorWrapper = ModuleWrapper<ReactDecoratorModule>;
+export type LazyReactDecoratorWrapper = LazyModuleWrapper<ReactDecoratorModule>;
+export type ByPath<T> = Record<string, T>;
+export type UserModuleWrappers = {
+    lazy: true;
+    fixtures: ByPath<LazyReactFixtureWrapper>;
+    decorators: ByPath<LazyReactDecoratorWrapper>;
+} | {
+    lazy: false;
+    fixtures: ByPath<ReactFixtureWrapper>;
+    decorators: ByPath<ReactDecoratorWrapper>;
+};
+export type FixtureModules = {
+    fixtureModule: ReactFixtureModule;
+    decoratorModules: ReactDecoratorModule[];
+};
+export {};

package/dist/userModules/userModuleTypes.js

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

package/dist/utils/queryString.d.ts

@@ -0,0 +1,2 @@
+export declare function parseQueryString<T extends {}>(query: string): T;
+export declare function buildQueryString(searchParams: {}): string;

package/dist/utils/queryString.js

@@ -0,0 +1,7 @@
+export function parseQueryString(query) {
+    return Object.fromEntries(new URLSearchParams(query));
+}
+export function buildQueryString(searchParams) {
+    const queryString = new URLSearchParams(searchParams).toString();
+    return queryString && `?${queryString}`;
+}

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

@@ -0,0 +1,13 @@
+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

@@ -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/dist/utils/react/DelayRender.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    children: React.ReactNode;
+    delay: number;
+};
+export declare function DelayRender({ children, delay }: Props): JSX.Element;
+export {};

package/dist/utils/react/DelayRender.js

@@ -0,0 +1,10 @@
+'use client';
+import React from 'react';
+export function DelayRender({ children, delay }) {
+    const [render, setRender] = React.useState(false);
+    React.useEffect(() => {
+        const timeoutId = setTimeout(() => setRender(true), delay);
+        return () => clearTimeout(timeoutId);
+    }, [delay]);
+    return React.createElement(React.Fragment, null, render && children);
+}