New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-cosmos-renderer

Package Overview
Dependencies
Maintainers
1
Versions
189
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-cosmos-renderer - npm Package Compare versions

Comparing version 6.0.0-canary.b87d3fe.0 to 6.0.0-canary.c00ca07.0

dist/fixture/FixtureCapture/classState/useFixtureClassState.d.ts
dist/fixture/FixtureCapture/classState/useFixtureClassState.js
dist/fixture/useFixtureState.d.ts
dist/fixture/useFixtureState.js
dist/fixtureLoaders/SelectedFixture.d.ts
dist/fixtureLoaders/SelectedFixture.js
dist/rendererConnect/StatefulRendererProvider.d.ts
dist/rendererConnect/StatefulRendererProvider.js

2

dist/client.d.ts
export * from './fixture/FixtureCapture/FixtureCapture.js';
export * from './fixture/FixtureContext.js';
export * from './fixture/Viewport.js';
export * from './fixture/useFixtureState.js';
export * from './fixture/useSelect/index.js';

@@ -9,1 +10,2 @@ export * from './fixture/useValue/index.js';

export * from './rendererConnect/RendererProvider.js';
export * from './rendererConnect/StatefulRendererProvider.js';

2

dist/client.js
export * from './fixture/FixtureCapture/FixtureCapture.js';
export * from './fixture/FixtureContext.js';
export * from './fixture/Viewport.js';
export * from './fixture/useFixtureState.js';
export * from './fixture/useSelect/index.js';

@@ -9,1 +10,2 @@ export * from './fixture/useValue/index.js';

export * from './rendererConnect/RendererProvider.js';
export * from './rendererConnect/StatefulRendererProvider.js';

4

dist/fixture/FixtureCapture/classState/index.js
import React from 'react';
import { useFixtureState } from './useFixtureState.js';
import { useFixtureClassState } from './useFixtureClassState.js';
import { useReadClassState } from './useReadClassState.js';

@@ -12,3 +12,3 @@ export function useClassStateCapture(fixture, decoratorId) {

useReadClassState(fixture, decoratorId, elRefs);
return useFixtureState(fixture, decoratorId, elRefs);
return useFixtureClassState(fixture, decoratorId, elRefs);
}

25

dist/fixture/FixtureCapture/classState/useReadClassState.js
import { isEqual } from 'lodash-es';
import { useContext, useEffect, useRef, } from 'react';
import { createValues, extendWithValues, findFixtureStateClassState, updateFixtureStateClassState, } from 'react-cosmos-core';
import { FixtureContext } from '../../FixtureContext.js';
import { useEffect, useRef } from 'react';
import { createValues, extendWithValues, findClassStateFixtureStateItem, updateClassStateFixtureStateItem, } from 'react-cosmos-core';
import { useFixtureState } from '../../useFixtureState.js';
import { findRelevantElementPaths } from '../shared/findRelevantElementPaths.js';

@@ -11,3 +11,3 @@ // How often to check the state of the loaded component and update the fixture

const elPaths = findRelevantElementPaths(fixture);
const { fixtureState, setFixtureState } = useContext(FixtureContext);
const [classStateFs, setClassStateFs] = useFixtureState('classState');
const timeoutId = useRef(null);

@@ -37,14 +37,9 @@ useEffect(() => {

const elementId = { decoratorId, elPath };
const fsClassState = findFixtureStateClassState(fixtureState, elementId);
if (fsClassState &&
state &&
!doesFixtureStateMatchClassState(fsClassState, state)) {
const fsItem = findClassStateFixtureStateItem(classStateFs, elementId);
if (fsItem && state && !doesFixtureStateMatchClassState(fsItem, state)) {
fixtureStateChangeScheduled = true;
setFixtureState(prevFs => ({
...prevFs,
classState: updateFixtureStateClassState({
fixtureState: prevFs,
elementId,
values: createValues(state),
}),
setClassStateFs(prevFs => updateClassStateFixtureStateItem({
classStateFs: prevFs,
elementId,
values: createValues(state),
}));

@@ -51,0 +46,0 @@ }

2

dist/fixture/FixtureCapture/FixtureCapture.d.ts

@@ -7,3 +7,3 @@ import React from 'react';

};
export declare function FixtureCapture({ children, decoratorId }: Props): JSX.Element;
export declare function FixtureCapture({ children, decoratorId }: Props): React.ReactNode;
export {};

4

dist/fixture/FixtureCapture/FixtureCapture.js

@@ -9,3 +9,2 @@ // In a React Server Components setup this is a Client entry point for fixtures.

'use client';
import React from 'react';
import { useClassStateCapture } from './classState/index.js';

@@ -16,4 +15,3 @@ import { usePropsCapture } from './props/index.js';

fixture = useClassStateCapture(fixture, decoratorId);
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
return React.createElement(React.Fragment, null, fixture);
return fixture;
}

58

dist/fixture/FixtureCapture/props/index.js

@@ -1,4 +0,4 @@

import { useContext, useEffect, useRef } from 'react';
import { areNodesEqual, createFixtureStateProps, createValues, findFixtureStateProps, getComponentName, getFixtureStateProps, removeFixtureStateProps, updateFixtureStateProps, } from 'react-cosmos-core';
import { FixtureContext } from '../../FixtureContext.js';
import { useEffect, useRef } from 'react';
import { areNodesEqual, createPropsFixtureStateItem, createValues, filterPropsFixtureState, findPropsFixtureStateItem, getComponentName, removePropsFixtureStateItem, updatePropsFixtureStateItem, } from 'react-cosmos-core';
import { useFixtureState } from '../../useFixtureState.js';
import { findRelevantElementPaths } from '../shared/findRelevantElementPaths.js';

@@ -8,3 +8,3 @@ import { getElementAtPath, getExpectedElementAtPath, } from '../shared/nodeTree/index.js';

export function usePropsCapture(fixture, decoratorId) {
const { fixtureState, setFixtureState } = useContext(FixtureContext);
const [propsFs, setPropsFs] = useFixtureState('props');
const prevFixtureRef = useRef(fixture);

@@ -14,5 +14,5 @@ const elPaths = findRelevantElementPaths(fixture);

// Create empty fixture state
if (!fixtureState.props && elPaths.length === 0) {
if (!propsFs && elPaths.length === 0) {
// Make sure not to override any (currently pending) fixture state props
setFixtureState(prevFs => ({ ...prevFs, props: prevFs.props || [] }));
setPropsFs(prevFs => prevFs ?? []);
return;

@@ -23,9 +23,6 @@ }

// component type of the corresponding element changed
const fsProps = getFixtureStateProps(fixtureState, decoratorId);
fsProps.forEach(({ elementId }) => {
const decoratorFs = filterPropsFixtureState(propsFs, decoratorId);
decoratorFs.forEach(({ elementId }) => {
if (elPaths.indexOf(elementId.elPath) === -1) {
setFixtureState(prevFs => ({
...prevFs,
props: removeFixtureStateProps(fixtureState, elementId),
}));
setPropsFs(prevFs => removePropsFixtureStateItem(prevFs, elementId));
}

@@ -39,12 +36,9 @@ });

// from another renderer)
if (!findFixtureStateProps(fixtureState, elementId)) {
if (!findPropsFixtureStateItem(propsFs, elementId)) {
const componentName = getComponentName(childEl.type);
setFixtureState(prevFs => ({
...prevFs,
props: createFixtureStateProps({
fixtureState: prevFs,
elementId,
values: createValues(childEl.props),
componentName,
}),
setPropsFs(prevFs => createPropsFixtureStateItem({
propsFs: prevFs,
elementId,
values: createValues(childEl.props),
componentName,
}));

@@ -55,9 +49,6 @@ }

if (!areNodesEqual(prevChildEl, childEl, false)) {
setFixtureState(prevFs => ({
...prevFs,
props: updateFixtureStateProps({
fixtureState,
elementId,
values: createValues(childEl.props),
}),
setPropsFs(prevFs => updatePropsFixtureStateItem({
propsFs: prevFs,
elementId,
values: createValues(childEl.props),
}));

@@ -67,14 +58,7 @@ }

});
}, [
fixture,
decoratorId,
elPaths,
fixtureState,
fixtureState.props,
setFixtureState,
]);
}, [decoratorId, elPaths, fixture, propsFs, setPropsFs]);
useEffect(() => {
prevFixtureRef.current = fixture;
});
return useFixtureProps(fixture, fixtureState, decoratorId);
return useFixtureProps(fixture, propsFs, decoratorId);
}

4

dist/fixture/FixtureCapture/props/useFixtureProps.d.ts
import React from 'react';
import { FixtureDecoratorId, FixtureState } from 'react-cosmos-core';
export declare function useFixtureProps(fixture: React.ReactNode, fixtureState: FixtureState, decoratorId: FixtureDecoratorId): React.ReactNode;
import { FixtureDecoratorId, PropsFixtureState } from 'react-cosmos-core';
export declare function useFixtureProps(fixture: React.ReactNode, propsFs: PropsFixtureState | undefined, decoratorId: FixtureDecoratorId): React.ReactNode;

12

dist/fixture/FixtureCapture/props/useFixtureProps.js
import { isEqual, mapValues } from 'lodash-es';
import React from 'react';
import { DEFAULT_RENDER_KEY, extendWithValues, findFixtureStateProps, getComponentName, } from 'react-cosmos-core';
import { DEFAULT_RENDER_KEY, extendWithValues, findPropsFixtureStateItem, getComponentName, } from 'react-cosmos-core';
import { findRelevantElementPaths } from '../shared/findRelevantElementPaths.js';
import { getChildrenPath, setElementAtPath } from '../shared/nodeTree/index.js';
export function useFixtureProps(fixture, fixtureState, decoratorId) {
export function useFixtureProps(fixture, propsFs, decoratorId) {
const propCache = React.useMemo(() => ({}),

@@ -14,5 +14,5 @@ // React.useMemo is used as a cache invalidated by decoratorId

const elementId = { decoratorId, elPath };
const fsProps = findFixtureStateProps(fixtureState, elementId);
const fsItem = findPropsFixtureStateItem(propsFs, elementId);
return setElementAtPath(extendedFixture, elPath, element => {
if (!fsProps || componentTypeChanged(fsProps.componentName)) {
if (!fsItem || componentTypeChanged(fsItem.componentName)) {
return {

@@ -27,3 +27,3 @@ ...element,

const originalProps = element.props;
const extendedProps = extendWithValues(originalProps, fsProps.values);
const extendedProps = extendWithValues(originalProps, fsItem.values);
// Preserve identity between renders for indentical non-primitive props

@@ -54,3 +54,3 @@ const cachedProps = mapValues(extendedProps, (value, propName) => {

: cachedProps,
key: getElRenderKey(elPath, fsProps.renderKey),
key: getElRenderKey(elPath, fsItem.renderKey),
};

@@ -57,0 +57,0 @@ function componentTypeChanged(componentName) {

28

dist/fixture/useSelect/useCreateFixtureState.js

@@ -1,7 +0,6 @@

import React, { useEffect } from 'react';
import { findFixtureStateControl } from 'react-cosmos-core';
import { FixtureContext } from '../FixtureContext.js';
import { useEffect } from 'react';
import { useFixtureState } from '../useFixtureState.js';
import { getDefaultSelectValue } from './shared.js';
export function useCreateFixtureState(selectName, args) {
const { setFixtureState } = React.useContext(FixtureContext);
const [, setFixtureState] = useFixtureState('controls');
const defaultValue = getDefaultSelectValue(args);

@@ -13,17 +12,14 @@ useEffect(() => {

setFixtureState(prevFs => {
const fsControl = findFixtureStateControl(prevFs, selectName);
if (fsControl &&
fsControl.type === 'select' &&
fsControl.defaultValue === defaultValue)
const controlFs = prevFs && prevFs[selectName];
if (controlFs &&
controlFs.type === 'select' &&
controlFs.defaultValue === defaultValue)
return prevFs;
return {
...prevFs,
controls: {
...prevFs.controls,
[selectName]: {
type: 'select',
options: args.options,
defaultValue,
currentValue: defaultValue,
},
[selectName]: {
type: 'select',
options: args.options,
defaultValue,
currentValue: defaultValue,
},

@@ -30,0 +26,0 @@ };

12

dist/fixture/useSelect/useCurrentValue.js

@@ -1,11 +0,9 @@

import { useContext } from 'react';
import { findFixtureStateControl } from 'react-cosmos-core';
import { FixtureContext } from '../FixtureContext.js';
import { useFixtureState } from '../useFixtureState.js';
import { getDefaultSelectValue } from './shared.js';
export function useCurrentValue(selectName, args) {
const { fixtureState } = useContext(FixtureContext);
const fsControl = findFixtureStateControl(fixtureState, selectName);
return fsControl && fsControl.type === 'select'
? fsControl.currentValue
const [fixtureState] = useFixtureState('controls');
const controlFs = fixtureState && fixtureState[selectName];
return controlFs && controlFs.type === 'select'
? controlFs.currentValue
: getDefaultSelectValue(args);
}

22

dist/fixture/useSelect/useSetValue.js

@@ -1,21 +0,17 @@

import { useCallback, useContext } from 'react';
import { findFixtureStateControl } from 'react-cosmos-core';
import { FixtureContext } from '../FixtureContext.js';
import { useCallback } from 'react';
import { useFixtureState } from '../useFixtureState.js';
export function useSetValue(selectName) {
const { setFixtureState } = useContext(FixtureContext);
const [, setFixtureState] = useFixtureState('controls');
return useCallback(value => {
setFixtureState(prevFs => {
const fsControl = findFixtureStateControl(prevFs, selectName);
if (!fsControl || fsControl.type !== 'select') {
const controlFs = prevFs && prevFs[selectName];
if (!controlFs || controlFs.type !== 'select') {
console.warn(`Invalid fixture state for select: ${selectName}`);
return prevFs;
return prevFs ?? {};
}
return {
...prevFs,
controls: {
...prevFs.controls,
[selectName]: {
...fsControl,
currentValue: value,
},
[selectName]: {
...controlFs,
currentValue: value,
},

@@ -22,0 +18,0 @@ };

25

dist/fixture/useValue/useCreateFixtureState.js
import { isEqual } from 'lodash-es';
import React from 'react';
import { createValue, extendWithValue, findFixtureStateControl, } from 'react-cosmos-core';
import { FixtureContext } from '../FixtureContext.js';
import { createValue, extendWithValue, } from 'react-cosmos-core';
import { useFixtureState } from '../useFixtureState.js';
export function useCreateFixtureState(inputName, defaultValue) {
const { setFixtureState } = React.useContext(FixtureContext);
const [, setFixtureState] = useFixtureState('controls');
React.useEffect(() => {

@@ -12,16 +12,13 @@ // The fixture state for this value is (re)created in two situations:

setFixtureState(prevFs => {
const fsControl = findFixtureStateControl(prevFs, inputName);
if (fsControl &&
fsControl.type === 'standard' &&
fsValueExtendsBaseValue(fsControl.defaultValue, defaultValue))
const controlFs = prevFs && prevFs[inputName];
if (controlFs &&
controlFs.type === 'standard' &&
fsValueExtendsBaseValue(controlFs.defaultValue, defaultValue))
return prevFs;
return {
...prevFs,
controls: {
...prevFs.controls,
[inputName]: {
type: 'standard',
defaultValue: createValue(defaultValue),
currentValue: createValue(defaultValue),
},
[inputName]: {
type: 'standard',
defaultValue: createValue(defaultValue),
currentValue: createValue(defaultValue),
},

@@ -28,0 +25,0 @@ };

13

dist/fixture/useValue/useCurrentValue.js

@@ -1,12 +0,11 @@

import React from 'react';
import { extendWithValue, findFixtureStateControl, } from 'react-cosmos-core';
import { FixtureContext } from '../FixtureContext.js';
import { extendWithValue, } from 'react-cosmos-core';
import { useFixtureState } from '../useFixtureState.js';
export function useCurrentValue(inputName, defaultValue) {
const { fixtureState } = React.useContext(FixtureContext);
const fsControl = findFixtureStateControl(fixtureState, inputName);
return fsControl && fsControl.type === 'standard'
const [fixtureState] = useFixtureState('controls');
const controlFs = fixtureState && fixtureState[inputName];
return controlFs && controlFs.type === 'standard'
? // Types of fixture state values cannot be guaranteed at read time, which
// means that tampering with the fixture state can cause runtime errors
extendWithValue(defaultValue, fsControl.currentValue)
extendWithValue(defaultValue, controlFs.currentValue)
: defaultValue;
}

23

dist/fixture/useValue/useSetValue.js
import React from 'react';
import { createValue, extendWithValue, findFixtureStateControl, } from 'react-cosmos-core';
import { FixtureContext } from '../FixtureContext.js';
import { createValue, extendWithValue, } from 'react-cosmos-core';
import { useFixtureState } from '../useFixtureState.js';
export function useSetValue(inputName, defaultValue) {
const { setFixtureState } = React.useContext(FixtureContext);
const [, setFixtureState] = useFixtureState('controls');
return React.useCallback(stateChange => {

@@ -17,9 +17,6 @@ setFixtureState(prevFs => {

...prevFs,
controls: {
...prevFs.controls,
[inputName]: {
type: 'standard',
defaultValue: createValue(defaultValue),
currentValue: createValue(currentValue),
},
[inputName]: {
type: 'standard',
defaultValue: createValue(defaultValue),
currentValue: createValue(currentValue),
},

@@ -31,6 +28,6 @@ };

function getCurrentValueFromFixtureState(fixtureState, inputName, defaultValue) {
const fsControl = findFixtureStateControl(fixtureState, inputName);
return fsControl && fsControl.type === 'standard'
? extendWithValue(defaultValue, fsControl.currentValue)
const controlFs = fixtureState && fixtureState[inputName];
return controlFs && controlFs.type === 'standard'
? extendWithValue(defaultValue, controlFs.currentValue)
: defaultValue;
}

2

dist/fixture/Viewport.d.ts

@@ -7,3 +7,3 @@ import React from 'react';

};
export declare function Viewport({ children, width, height }: Props): JSX.Element;
export declare function Viewport({ children, width, height }: Props): React.ReactNode;
export declare namespace Viewport {

@@ -10,0 +10,0 @@ var cosmosCapture: boolean;

14

dist/fixture/Viewport.js
'use client';
import React from 'react';
import { FixtureContext } from './FixtureContext.js';
import { useFixtureState } from './useFixtureState.js';
export function Viewport({ children, width, height }) {
const { setFixtureState } = React.useContext(FixtureContext);
const [, setViewport] = useFixtureState('viewport');
React.useEffect(() => {
setFixtureState(fixtureState => ({
...fixtureState,
viewport: { width, height },
}));
}, [setFixtureState, width, height]);
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
return React.createElement(React.Fragment, null, children);
setViewport({ width, height });
}, [setViewport, width, height]);
return children;
}
Viewport.cosmosCapture = false;

6

dist/fixtureLoaders/ClientFixtureLoader.d.ts

@@ -1,2 +0,2 @@

import { ReactElement } from 'react';
import React from 'react';
import { ReactDecorator, UserModuleWrappers } from 'react-cosmos-core';

@@ -6,5 +6,5 @@ type Props = {

globalDecorators?: ReactDecorator[];
renderMessage?: (msg: string) => ReactElement;
renderMessage?: (msg: string) => React.ReactNode;
};
export declare function ClientFixtureLoader({ moduleWrappers, globalDecorators, renderMessage, }: Props): JSX.Element;
export declare function ClientFixtureLoader({ moduleWrappers, globalDecorators, renderMessage, }: Props): React.JSX.Element;
export {};

10

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 }));
} }));
}

3

dist/fixtureLoaders/defaultRenderMessage.d.ts

@@ -1,2 +0,1 @@

/// <reference types="react" />
export declare function defaultRenderMessage(msg: string): JSX.Element;
export declare function defaultRenderMessage(msg: string): string;

3

dist/fixtureLoaders/defaultRenderMessage.js

@@ -1,4 +0,3 @@

import React from 'react';
export function defaultRenderMessage(msg) {
return React.createElement(React.Fragment, null, msg);
return msg;
}

10

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;
renderMessage: (msg: string) => React.ReactElement;
renderFixture: (selection: FixtureSelection) => React.ReactElement;
selectedFixture: SelectedFixture | null;
renderMessage: (msg: string) => React.ReactNode;
renderFixture: (selected: SelectedFixture) => React.ReactNode;
};
export declare function FixtureLoaderConnect({ moduleWrappers, fixtureSelection, renderMessage, renderFixture, }: Props): JSX.Element;
export declare function FixtureLoaderConnect({ moduleWrappers, selectedFixture, renderMessage, renderFixture, }: Props): React.JSX.Element;
export {};

8

dist/fixtureLoaders/FixtureLoaderConnect.js
import React from 'react';
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) {
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());
}

2

dist/fixtureLoaders/RendererSync.d.ts

@@ -7,3 +7,3 @@ import React from 'react';

};
export declare function RendererSync({ children, fixtures }: Props): JSX.Element;
export declare function RendererSync({ children, fixtures }: Props): React.ReactNode;
export {};

18

dist/fixtureLoaders/RendererSync.js

@@ -5,3 +5,4 @@ 'use client';

export function RendererSync({ children, fixtures }) {
const { params: { fixtureId: selectedFixtureId }, rendererId, rendererConnect, reloadRenderer, lazyItems, } = React.useContext(RendererContext);
const { rendererId, rendererConnect, locked, selectedFixture, selectFixture, unselectFixture, reloadRenderer, lazyItems, } = React.useContext(RendererContext);
const selectedFixtureId = selectedFixture?.fixtureId;
const readyRef = React.useRef(false);

@@ -51,3 +52,16 @@ React.useEffect(() => {

}), [fixtures, reloadRenderer, rendererConnect, rendererId, selectedFixtureId]);
return React.createElement(React.Fragment, null, children);
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 children;
}

9

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

22

dist/fixtureLoaders/ServerFixtureLoader.js

@@ -0,1 +1,3 @@

// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65220
/// <reference types="react/experimental" />
import React, { Suspense } from 'react';

@@ -5,17 +7,9 @@ import { FixtureModule } from '../fixtureModule/FixtureModule.js';

import { FixtureLoaderConnect } from './FixtureLoaderConnect.js';
import { ServerFixtureChangeListener } from './ServerFixtureChangeListener.js';
import { defaultRenderMessage } from './defaultRenderMessage.js';
export function ServerFixtureLoader({ params, moduleWrappers, globalDecorators, renderMessage = defaultRenderMessage, }) {
const { fixtureId = null, key = 0 } = params;
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 })) }))) }));
}

5

dist/fixtureModule/FixtureModule.d.ts

@@ -0,1 +1,2 @@

/// <reference types="react/experimental" />
import React from 'react';

@@ -11,5 +12,5 @@ import { FixtureId, FixtureState, ReactDecorator, ReactDecoratorModule, ReactFixtureModule } from 'react-cosmos-core';

lazy: boolean;
renderMessage: (msg: string) => React.ReactElement;
renderMessage: (msg: string) => React.ReactNode;
};
export declare function FixtureModule({ fixtureModule, decoratorModules, globalDecorators, fixtureId, initialFixtureState, renderKey, lazy, renderMessage, }: Props): JSX.Element;
export declare function FixtureModule({ fixtureModule, decoratorModules, globalDecorators, fixtureId, initialFixtureState, renderKey, lazy, renderMessage, }: Props): string | number | boolean | Iterable<React.ReactNode> | React.PromiseLikeOfReactNode | React.JSX.Element | null | undefined;
export {};

5

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 })));
}

2

dist/fixtureModule/FixtureProvider.d.ts

@@ -10,3 +10,3 @@ import React from 'react';

};
export declare function FixtureProvider(props: Props): JSX.Element;
export declare function FixtureProvider(props: Props): React.JSX.Element;
export {};

1

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';

1

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';

11

dist/rendererConnect/RendererContext.d.ts
import React from 'react';
import { FixtureList, RendererConnect, RendererParams } 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;
params: RendererParams;
setParams(nextParams: RendererParams): 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>;

6

dist/rendererConnect/RendererContext.js

@@ -8,4 +8,6 @@ import React from 'react';

},
params: {},
setParams: () => { },
locked: false,
selectedFixture: null,
selectFixture: () => { },
unselectFixture: () => { },
reloadRenderer: () => { },

@@ -12,0 +14,0 @@ lazyItems: {},

14

dist/rendererConnect/RendererProvider.d.ts
import React from 'react';
import { RendererConnect, RendererParams } 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;
params: RendererParams;
setParams(nextParams: RendererParams): 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 declare function RendererProvider(props: Props): React.JSX.Element;
export {};

12

dist/rendererConnect/RendererProvider.js

@@ -10,4 +10,6 @@ 'use client';

rendererConnect: props.rendererConnect,
params: props.params,
setParams: props.setParams,
locked: props.locked,
selectedFixture: props.selectedFixture,
selectFixture: props.selectFixture,
unselectFixture: props.unselectFixture,
reloadRenderer: props.reloadRenderer,

@@ -19,9 +21,11 @@ lazyItems,

lazyItems,
props.params,
props.locked,
props.reloadRenderer,
props.rendererConnect,
props.rendererId,
props.setParams,
props.selectFixture,
props.selectedFixture,
props.unselectFixture,
]);
return (React.createElement(RendererContext.Provider, { value: value }, props.children));
}

10

package.json
{
"name": "react-cosmos-renderer",
"version": "6.0.0-canary.b87d3fe.0+b87d3fe",
"version": "6.0.0-canary.c00ca07.0+c00ca07",
"description": "React Cosmos Renderer",

@@ -14,7 +14,7 @@ "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos-renderer",

"dependencies": {
"lodash-es": "^4.17.21",
"react-cosmos-core": "6.0.0-canary.b87d3fe.0+b87d3fe",
"react-is": "^18.2.0"
"lodash-es": "4.17.21",
"react-cosmos-core": "6.0.0-canary.c00ca07.0+c00ca07",
"react-is": "18.2.0"
},
"gitHead": "b87d3fe06a56c8e3c4c87e731e31092df67d52c0"
"gitHead": "c00ca07a5b6a2cad4a218d8aae72fa4c2310cc1e"
}
dist/fixture/FixtureCapture/classState/useFixtureState.d.ts
dist/fixture/FixtureCapture/classState/useFixtureState.js
dist/fixtureLoaders/ServerFixtureChangeListener.d.ts
dist/fixtureLoaders/ServerFixtureChangeListener.js
dist/fixtureLoaders/useFixtureSelection.d.ts
dist/fixtureLoaders/useFixtureSelection.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc