react-cosmos-renderer - npm Package Compare versions

Comparing version 6.0.0-canary.660d495.0 to 6.0.0-canary.6ba9f2d.0

dist/client.d.ts

@@ -8,1 +8,3 @@ export * from './fixture/FixtureCapture/FixtureCapture.js';
 export * from './rendererConnect/RendererContext.js';
+export * from './rendererConnect/RendererProvider.js';
+export * from './rendererConnect/StatefulRendererProvider.js';

dist/client.js

@@ -8,1 +8,3 @@ export * from './fixture/FixtureCapture/FixtureCapture.js';
 export * from './rendererConnect/RendererContext.js';
+export * from './rendererConnect/RendererProvider.js';
+export * from './rendererConnect/StatefulRendererProvider.js';

dist/fixture/useSelect/useCreateFixtureState.js

@@ -31,3 +31,4 @@ import React, { useEffect } from 'react';
         });
-    }, [args.options, defaultValue, selectName, setFixtureState]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [String(args.options), defaultValue, selectName, setFixtureState]);
 }

dist/fixtureLoaders/ClientFixtureLoader.js

@@ -6,14 +6,14 @@ 'use client';
 import { StaticModuleLoader } from '../moduleLoaders/StaticModuleLoader.js';
+import { RendererContext } from '../rendererConnect/RendererContext.js';
 import { FixtureLoaderConnect } from './FixtureLoaderConnect.js';
 import { defaultRenderMessage } from './defaultRenderMessage.js';
-import { useFixtureSelection } from './useFixtureSelection.js';
 export function ClientFixtureLoader({ moduleWrappers, globalDecorators, renderMessage = defaultRenderMessage, }) {
-    const fixtureSelection = useFixtureSelection();
-    return (React.createElement(FixtureLoaderConnect, { moduleWrappers: moduleWrappers, fixtureSelection: fixtureSelection, renderMessage: renderMessage, renderFixture: selection => {
+    const { selectedFixture } = React.useContext(RendererContext);
+    return (React.createElement(FixtureLoaderConnect, { moduleWrappers: moduleWrappers, selectedFixture: selectedFixture, renderMessage: renderMessage, renderFixture: selected => {
             function renderModules(modules) {
-                return (React.createElement(FixtureModule, { ...modules, ...selection, globalDecorators: globalDecorators, lazy: moduleWrappers.lazy, renderMessage: renderMessage }));
+                return (React.createElement(FixtureModule, { ...modules, ...selected, globalDecorators: globalDecorators, lazy: moduleWrappers.lazy, renderMessage: renderMessage }));
             }
-            const { fixtureId } = selection;
+            const { fixtureId } = selected;
             return moduleWrappers.lazy ? (React.createElement(LazyModuleLoader, { fixtureWrapper: moduleWrappers.fixtures[fixtureId.path], decorators: moduleWrappers.decorators, fixturePath: fixtureId.path, renderModules: renderModules })) : (React.createElement(StaticModuleLoader, { fixtureWrapper: moduleWrappers.fixtures[fixtureId.path], decorators: moduleWrappers.decorators, fixturePath: fixtureId.path, renderModules: renderModules }));
         } }));
 }

dist/fixtureLoaders/FixtureLoaderConnect.d.ts

 import React from 'react';
 import { UserModuleWrappers } from 'react-cosmos-core';
-import { FixtureSelection } from './useFixtureSelection.js';
+import { SelectedFixture } from './SelectedFixture.js';
 type Props = {
     moduleWrappers: UserModuleWrappers;
-    fixtureSelection: FixtureSelection | null;
+    selectedFixture: SelectedFixture | null;
     renderMessage: (msg: string) => React.ReactElement;
-    renderFixture: (selection: FixtureSelection) => React.ReactElement;
+    renderFixture: (selected: SelectedFixture) => React.ReactElement;
 };
-export declare function FixtureLoaderConnect({ moduleWrappers, fixtureSelection, renderMessage, renderFixture, }: Props): JSX.Element;
+export declare function FixtureLoaderConnect({ moduleWrappers, selectedFixture, renderMessage, renderFixture, }: Props): JSX.Element;
 export {};

dist/fixtureLoaders/FixtureLoaderConnect.js

 import React from 'react';
-import { getFixtureListFromWrappers, isInsideWindowIframe, } from 'react-cosmos-core';
+import { DelayRender, getFixtureListFromWrappers, } from 'react-cosmos-core';
 import { RendererSync } from './RendererSync.js';
-export function FixtureLoaderConnect({ moduleWrappers, fixtureSelection, renderMessage, renderFixture, }) {
+export function FixtureLoaderConnect({ moduleWrappers, selectedFixture, renderMessage, renderFixture, }) {
     const fixtures = React.useMemo(() => getFixtureListFromWrappers(moduleWrappers), [moduleWrappers]);
     function renderInner() {
-        if (!fixtureSelection) {
-            return isInsideWindowIframe()
-                ? null
-                : renderMessage('No fixture selected.');
+        if (!selectedFixture) {
+            return (React.createElement(DelayRender, { delay: 500 }, renderMessage('No fixture selected.')));
         }
-        const { fixtureId } = fixtureSelection;
+        const { fixtureId } = selectedFixture;
         if (!fixtures[fixtureId.path]) {
             return renderMessage(`Fixture path not found: ${fixtureId.path}`);
         }
-        return renderFixture(fixtureSelection);
+        return renderFixture(selectedFixture);
     }
     return React.createElement(RendererSync, { fixtures: fixtures }, renderInner());
 }

dist/fixtureLoaders/RendererSync.js

@@ -5,4 +5,4 @@ 'use client';
 export function RendererSync({ children, fixtures }) {
-    const { searchParams, rendererId, rendererConnect, reloadRenderer } = React.useContext(RendererContext);
-    const { fixtureId: selectedFixtureId } = searchParams;
+    const { rendererId, rendererConnect, locked, selectedFixture, selectFixture, unselectFixture, reloadRenderer, lazyItems, } = React.useContext(RendererContext);
+    const selectedFixtureId = selectedFixture?.fixtureId;
     const readyRef = React.useRef(false);
@@ -26,6 +26,6 @@ React.useEffect(() => {
                 rendererId,
-                fixtures,
+                fixtures: { ...fixtures, ...lazyItems },
             },
         });
-    }, [fixtures, rendererConnect, rendererId]);
+    }, [fixtures, lazyItems, rendererConnect, rendererId]);
     React.useEffect(() => rendererConnect.onMessage(msg => {
@@ -53,3 +53,16 @@ if (msg.type === 'pingRenderers') {
     }), [fixtures, reloadRenderer, rendererConnect, rendererId, selectedFixtureId]);
+    React.useEffect(() => rendererConnect.onMessage(msg => {
+        if (!locked &&
+            msg.type === 'selectFixture' &&
+            msg.payload.rendererId === rendererId) {
+            const { fixtureId, fixtureState } = msg.payload;
+            selectFixture(fixtureId, fixtureState);
+        }
+        else if (!locked &&
+            msg.type === 'unselectFixture' &&
+            msg.payload.rendererId === rendererId) {
+            unselectFixture();
+        }
+    }), [locked, rendererConnect, rendererId, selectFixture, unselectFixture]);
     return React.createElement(React.Fragment, null, children);
 }

dist/fixtureLoaders/ServerFixtureLoader.d.ts

 import React from 'react';
-import { ReactDecorator, StringRendererSearchParams, UserModuleWrappers } from 'react-cosmos-core';
+import { ReactDecorator, UserModuleWrappers } from 'react-cosmos-core';
+import { SelectedFixture } from './SelectedFixture.js';
 type Props = {
-    searchParams: StringRendererSearchParams;
     moduleWrappers: UserModuleWrappers;
     globalDecorators?: ReactDecorator[];
     renderMessage?: (msg: string) => React.ReactElement;
+    selectedFixture: SelectedFixture | null;
 };
-export declare function ServerFixtureLoader({ searchParams, moduleWrappers, globalDecorators, renderMessage, }: Props): JSX.Element;
+export declare function ServerFixtureLoader({ moduleWrappers, globalDecorators, renderMessage, selectedFixture, }: Props): JSX.Element;
 export {};

dist/fixtureLoaders/ServerFixtureLoader.js

 import React, { Suspense } from 'react';
-import { decodeRendererSearchParams, } from 'react-cosmos-core';
 import { FixtureModule } from '../fixtureModule/FixtureModule.js';
 import { AsyncModuleLoader } from '../moduleLoaders/AsyncModuleLoader.js';
 import { FixtureLoaderConnect } from './FixtureLoaderConnect.js';
-import { ServerFixtureChangeListener } from './ServerFixtureChangeListener.js';
 import { defaultRenderMessage } from './defaultRenderMessage.js';
-export function ServerFixtureLoader({ searchParams, moduleWrappers, globalDecorators, renderMessage = defaultRenderMessage, }) {
-    const { fixtureId = null } = decodeRendererSearchParams(searchParams);
-    const fixtureSelection = fixtureId && {
-        fixtureId,
-        initialFixtureState: {},
-        renderKey: 0,
-    };
-    return (React.createElement(ServerFixtureChangeListener, null,
-        React.createElement(FixtureLoaderConnect, { moduleWrappers: moduleWrappers, fixtureSelection: fixtureSelection, renderMessage: renderMessage, renderFixture: selection => (
-            // The suspense boundary allows the rendererReady response to be sent
-            // before loading the fixture modules.
-            React.createElement(Suspense, null,
-                React.createElement(AsyncModuleLoader, { moduleWrappers: moduleWrappers, fixturePath: selection.fixtureId.path, renderModules: modules => (React.createElement(FixtureModule, { ...modules, ...selection, globalDecorators: globalDecorators, lazy: moduleWrappers.lazy, renderMessage: renderMessage })) }))) })));
+export function ServerFixtureLoader({ moduleWrappers, globalDecorators, renderMessage = defaultRenderMessage, selectedFixture, }) {
+    return (React.createElement(FixtureLoaderConnect, { moduleWrappers: moduleWrappers, selectedFixture: selectedFixture, renderMessage: renderMessage, renderFixture: selected => (
+        // The suspense boundary allows the rendererReady response to be sent
+        // before loading the fixture modules.
+        React.createElement(Suspense, null,
+            React.createElement(AsyncModuleLoader, { moduleWrappers: moduleWrappers, fixturePath: selected.fixtureId.path, renderModules: modules => (React.createElement(FixtureModule, { ...modules, ...selected, globalDecorators: globalDecorators, lazy: moduleWrappers.lazy, renderMessage: renderMessage })) }))) }));
 }

dist/fixtureModule/FixtureModule.js

 import React from 'react';
-import { getFixtureFromExport, getFixtureItemFromExport, } from 'react-cosmos-core';
+import { getFixtureFromExport, getFixtureItemFromExport, stringifyFixtureId, } from 'react-cosmos-core';
 import { DecoratedFixture } from './DecoratedFixture.js';
@@ -7,2 +7,3 @@ import { FixtureProvider } from './FixtureProvider.js';
     const fixtureItem = React.useMemo(() => getFixtureItemFromExport(fixtureModule.default), [fixtureModule.default]);
+    const fixtureKey = React.useMemo(() => `${stringifyFixtureId(fixtureId)}-${renderKey}`, [fixtureId, renderKey]);
     const fixture = getFixtureFromExport(fixtureModule.default, fixtureId.name);
@@ -12,4 +13,4 @@ if (typeof fixture === 'undefined') {
     }
-    return (React.createElement(FixtureProvider, { key: renderKey, fixtureId: fixtureId, initialFixtureState: initialFixtureState, fixtureItem: fixtureItem, lazy: lazy },
+    return (React.createElement(FixtureProvider, { key: fixtureKey, fixtureId: fixtureId, initialFixtureState: initialFixtureState, fixtureItem: fixtureItem, lazy: lazy },
         React.createElement(DecoratedFixture, { fixture: fixture, userDecoratorModules: decoratorModules, globalDecorators: globalDecorators })));
 }

dist/fixtureModule/FixtureProvider.js

@@ -11,3 +11,3 @@ 'use client';
     });
-    const { rendererId, rendererConnect } = React.useContext(RendererContext);
+    const { rendererId, rendererConnect, setLazyItems } = React.useContext(RendererContext);
     React.useEffect(() => {
@@ -17,19 +17,8 @@ // Only multi fixtures have extra info that isn't already available in the
         // are revealed after importing a fixture module).
-        if (props.lazy && props.fixtureItem.type === 'multi') {
-            rendererConnect.postMessage({
-                type: 'fixtureListItemUpdate',
-                payload: {
-                    rendererId,
-                    fixturePath: props.fixtureId.path,
-                    fixtureItem: props.fixtureItem,
-                },
-            });
+        if (props.lazy) {
+            setLazyItems(props.fixtureItem.type === 'multi'
+                ? { [props.fixtureId.path]: props.fixtureItem }
+                : noLazyItem);
         }
-    }, [
-        props.fixtureId.path,
-        props.fixtureItem,
-        props.lazy,
-        rendererConnect,
-        rendererId,
-    ]);
+    }, [props.fixtureId.path, props.fixtureItem, props.lazy, setLazyItems]);
     React.useEffect(() => {
@@ -77,1 +66,2 @@ if (!isEqual(state.fixtureState, state.syncedFixtureState)) {
 }
+const noLazyItem = {};

dist/index.d.ts

@@ -0,1 +1,2 @@
+export * from './fixtureLoaders/SelectedFixture.js';
 export * from './fixtureLoaders/ServerFixtureLoader.js';
@@ -2,0 +3,0 @@ export * from './fixtureModule/createFixtureNode.js';

dist/index.js

@@ -0,1 +1,2 @@
+export * from './fixtureLoaders/SelectedFixture.js';
 export * from './fixtureLoaders/ServerFixtureLoader.js';
@@ -2,0 +3,0 @@ export * from './fixtureModule/createFixtureNode.js';

dist/rendererConnect/RendererContext.d.ts

 import React from 'react';
-import { RendererConnect, RendererSearchParams } from 'react-cosmos-core';
+import { FixtureId, FixtureList, FixtureState, RendererConnect } from 'react-cosmos-core';
+import { SelectedFixture } from '../fixtureLoaders/SelectedFixture.js';
 export type RendererContextValue = {
     rendererId: string;
     rendererConnect: RendererConnect;
-    searchParams: RendererSearchParams;
-    setSearchParams(nextParams: RendererSearchParams): void;
+    locked: boolean;
+    selectedFixture: SelectedFixture | null;
+    selectFixture(fixtureId: FixtureId, initialFixtureState: FixtureState): void;
+    unselectFixture(): void;
     reloadRenderer(): void;
+    lazyItems: FixtureList;
+    setLazyItems(nextItems: FixtureList): void;
 };
 export declare const RendererContext: React.Context<RendererContextValue>;

dist/rendererConnect/RendererContext.js

@@ -8,5 +8,9 @@ import React from 'react';
     },
-    searchParams: {},
-    setSearchParams: () => { },
+    locked: false,
+    selectedFixture: null,
+    selectFixture: () => { },
+    unselectFixture: () => { },
     reloadRenderer: () => { },
+    lazyItems: {},
+    setLazyItems: () => { },
 });

package.json

 {
   "name": "react-cosmos-renderer",
-  "version": "6.0.0-canary.660d495.0+660d495",
+  "version": "6.0.0-canary.6ba9f2d.0+6ba9f2d",
   "description": "React Cosmos Renderer",
@@ -15,6 +15,6 @@ "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos-renderer",
     "lodash-es": "^4.17.21",
-    "react-cosmos-core": "6.0.0-canary.660d495.0+660d495",
+    "react-cosmos-core": "6.0.0-canary.6ba9f2d.0+6ba9f2d",
     "react-is": "^18.2.0"
   },
-  "gitHead": "660d49529dd6f84ecd5a7d093ac9358ec46d99f2"
+  "gitHead": "6ba9f2dfaa73c5c9f69a4e732a44f6dbcc918a70"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

70866

increased by2.04%

Number of package files

106

increased by1.92%

Lines of code

1518

increased by2.02%

Dependency changes

• Updatedreact-cosmos-core@6.0.0-canary.6ba9f2d.0+6ba9f2d