react-cosmos-renderer - npm Package Compare versions

Comparing version 6.0.0-canary.468110c.0 to 6.0.0-canary.54d4d96.0

dist/client.d.ts

@@ -9,1 +9,2 @@ export * from './fixture/FixtureCapture/FixtureCapture.js';
 export * from './rendererConnect/RendererProvider.js';
+export * from './rendererConnect/StatefulRendererProvider.js';

dist/client.js

@@ -9,1 +9,2 @@ export * from './fixture/FixtureCapture/FixtureCapture.js';
 export * from './rendererConnect/RendererProvider.js';
+export * from './rendererConnect/StatefulRendererProvider.js';

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, lazyItems, } = 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);
@@ -52,3 +52,16 @@ React.useEffect(() => {
     }), [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, key = 0 } = decodeRendererSearchParams(searchParams);
-    const fixtureSelection = fixtureId && {
-        fixtureId,
-        initialFixtureState: {},
-        renderKey: key,
-    };
-    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/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 { FixtureList, 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: React.Dispatch<React.SetStateAction<FixtureList>>;
+    setLazyItems(nextItems: FixtureList): void;
 };
 export declare const RendererContext: React.Context<RendererContextValue>;

dist/rendererConnect/RendererContext.js

@@ -8,4 +8,6 @@ import React from 'react';
     },
-    searchParams: {},
-    setSearchParams: () => { },
+    locked: false,
+    selectedFixture: null,
+    selectFixture: () => { },
+    unselectFixture: () => { },
     reloadRenderer: () => { },
@@ -12,0 +14,0 @@ lazyItems: {},

dist/rendererConnect/RendererProvider.d.ts

 import React from 'react';
-import { RendererConnect, RendererSearchParams } from 'react-cosmos-core';
-export type Props = {
+import { FixtureId, FixtureState, RendererConnect } from 'react-cosmos-core';
+import { SelectedFixture } from '../fixtureLoaders/SelectedFixture.js';
+type Props = {
     children: React.ReactNode;
     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;
 };
 export declare function RendererProvider(props: Props): JSX.Element;
+export {};

dist/rendererConnect/RendererProvider.js

@@ -10,4 +10,6 @@ 'use client';
             rendererConnect: props.rendererConnect,
-            searchParams: props.searchParams,
-            setSearchParams: props.setSearchParams,
+            locked: props.locked,
+            selectedFixture: props.selectedFixture,
+            selectFixture: props.selectFixture,
+            unselectFixture: props.unselectFixture,
             reloadRenderer: props.reloadRenderer,
@@ -19,9 +21,11 @@ lazyItems,
         lazyItems,
+        props.locked,
         props.reloadRenderer,
         props.rendererConnect,
         props.rendererId,
-        props.searchParams,
-        props.setSearchParams,
+        props.selectFixture,
+        props.selectedFixture,
+        props.unselectFixture,
     ]);
     return (React.createElement(RendererContext.Provider, { value: value }, props.children));
 }

package.json

 {
   "name": "react-cosmos-renderer",
-  "version": "6.0.0-canary.468110c.0+468110c",
+  "version": "6.0.0-canary.54d4d96.0+54d4d96",
   "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.468110c.0+468110c",
+    "react-cosmos-core": "6.0.0-canary.54d4d96.0+54d4d96",
     "react-is": "^18.2.0"
   },
-  "gitHead": "468110c1f59ef6c3b3c7ccad777330cc003991f9"
+  "gitHead": "54d4d9647224c3809846066661046acd755059a7"
 }

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

Worsened metrics

Total package byte prevSize

70866

decreased by-0.26%

Lines of code

1518

decreased by-0.78%

Dependency changes

• Updatedreact-cosmos-core@6.0.0-canary.54d4d96.0+54d4d96