react-cosmos-ui 6.0.0-beta.7 → 6.0.0-beta.9

package/dist/playground.js

@@ -13,14 +13,14 @@ window.ReactDom = ReactDom;
 window.StyledComponents = styled;
 export default async function mount({ playgroundConfig, pluginConfigs, }) {
     const { loadPlugins, Slot } = ReactPlugin;
-    const config = { ...DEFAULT_PLUGIN_CONFIG, ...playgroundConfig };
-    loadPlugins({ config });
     // We can make plugin loading unblocking if react-plugin exports the
     // reloadPlugins method.
     await Promise.all(pluginConfigs.map(async (pluginConfig) => {
         if (pluginConfig.ui)
             await loadPluginScript(pluginConfig.ui);
     }));
+    const config = { ...DEFAULT_PLUGIN_CONFIG, ...playgroundConfig };
+    loadPlugins({ config });
     const root = ReactDom.createRoot(document.getElementById('root'));
     root.render(React.createElement(React.Fragment, null,
         React.createElement(GlobalStyle, null),

package/dist/pluginMocks.d.ts

@@ -0,0 +1 @@
+export * from './testHelpers/pluginMocks.js';

package/dist/pluginMocks.js

@@ -0,0 +1 @@
+export * from './testHelpers/pluginMocks.js';

package/dist/plugins/ClassStatePanel/ClassStatePanel/ComponentClassState.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import { FixtureState, FixtureStateClassState, StateUpdater } from 'react-cosmos-core';
+import { ClassStateFixtureStateItem } from 'react-cosmos-core';
 import { FixtureExpansion, OnElementExpansionChange } from '../../../components/ValueInputTree/index.js';
+import { SetClassStateFixtureState } from '../shared.js';
 type Props = {
-    fsClassState: FixtureStateClassState;
+    classStateFsItem: ClassStateFixtureStateItem;
     fixtureExpansion: FixtureExpansion;
-    onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
+    onFixtureStateChange: SetClassStateFixtureState;
     onElementExpansionChange: OnElementExpansionChange;
 };
-export declare function ComponentClassState({ fsClassState, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }: Props): React.JSX.Element;
+export declare function ComponentClassState({ classStateFsItem, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }: Props): React.JSX.Element;
 export {};

package/dist/plugins/ClassStatePanel/ClassStatePanel/ComponentClassState.js

@@ -1,23 +1,23 @@
 import { isEqual } from 'lodash-es';
 import React, { useCallback } from 'react';
-import { updateFixtureStateClassState, } from 'react-cosmos-core';
+import { updateClassStateFixtureStateItem, } from 'react-cosmos-core';
 import { SidePanelActions, SidePanelBody, SidePanelContainer, SidePanelHeader, SidePanelTitle, } from '../../../components/SidePanel.js';
 import { ExpandCollapseValues } from '../../../components/ValueInputTree/ExpandCollapseValues.js';
 import { ValueInputTree, stringifyElementId, } from '../../../components/ValueInputTree/index.js';
 import { IconButton32 } from '../../../components/buttons/index.js';
 import { RotateCcwIcon } from '../../../components/icons/index.js';
-import { createClassStateFsUpdater } from './shared.js';
-export function ComponentClassState({ fsClassState, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }) {
-    const { componentName, elementId, values } = fsClassState;
+import { classStateFsItemUpdater } from './shared.js';
+export function ComponentClassState({ classStateFsItem, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }) {
+    const { componentName, elementId, values } = classStateFsItem;
     const [initialValues] = React.useState(() => values);
-    const handleValuesReset = React.useCallback(() => onFixtureStateChange(createClassStateFsUpdater(elementId, prevFs => updateFixtureStateClassState({
-        fixtureState: prevFs,
+    const handleValuesReset = React.useCallback(() => onFixtureStateChange(classStateFsItemUpdater(elementId, prevFs => updateClassStateFixtureStateItem({
+        classStateFs: prevFs,
         elementId,
         values: initialValues,
     }))), [elementId, initialValues, onFixtureStateChange]);
     const handleValueChange = React.useCallback((newValues) => {
-        onFixtureStateChange(createClassStateFsUpdater(elementId, prevFs => updateFixtureStateClassState({
-            fixtureState: prevFs,
+        onFixtureStateChange(classStateFsItemUpdater(elementId, prevFs => updateClassStateFixtureStateItem({
+            classStateFs: prevFs,
             elementId,
             values: newValues,
         })));

package/dist/plugins/ClassStatePanel/ClassStatePanel/index.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
-import { FixtureState, StateUpdater } from 'react-cosmos-core';
+import { ClassStateFixtureState } from 'react-cosmos-core';
 import { FixtureExpansion, OnElementExpansionChange } from '../../../components/ValueInputTree/index.js';
+import { SetClassStateFixtureState } from '../shared.js';
 type Props = {
-    fixtureState: FixtureState;
+    fixtureState: ClassStateFixtureState | undefined;
     fixtureExpansion: FixtureExpansion;
-    onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
+    onFixtureStateChange: SetClassStateFixtureState;
     onElementExpansionChange: OnElementExpansionChange;
 };
 export declare const ClassStatePanel: React.NamedExoticComponent<Props>;

package/dist/plugins/ClassStatePanel/ClassStatePanel/index.js

@@ -2,12 +2,12 @@ import React from 'react';
 import { hasFsValues, sortFsValueGroups, stringifyElementId, } from '../../../components/ValueInputTree/index.js';
 import { ComponentClassState } from './ComponentClassState.js';
 export const ClassStatePanel = React.memo(function ClassStatePanel({ fixtureState, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }) {
-    if (!fixtureState.classState) {
+    if (!fixtureState) {
         return null;
     }
-    const classStateWithValues = fixtureState.classState.filter(hasFsValues);
-    return (React.createElement(React.Fragment, null, sortFsValueGroups(classStateWithValues).map(fsClassState => {
-        const strElementId = stringifyElementId(fsClassState.elementId);
-        return (React.createElement(ComponentClassState, { key: strElementId, fsClassState: fsClassState, fixtureExpansion: fixtureExpansion, onFixtureStateChange: onFixtureStateChange, onElementExpansionChange: onElementExpansionChange }));
+    const classStateWithValues = fixtureState.filter(hasFsValues);
+    return (React.createElement(React.Fragment, null, sortFsValueGroups(classStateWithValues).map(fsItem => {
+        const strElementId = stringifyElementId(fsItem.elementId);
+        return (React.createElement(ComponentClassState, { key: strElementId, classStateFsItem: fsItem, fixtureExpansion: fixtureExpansion, onFixtureStateChange: onFixtureStateChange, onElementExpansionChange: onElementExpansionChange }));
     })));
 });

package/dist/plugins/ClassStatePanel/ClassStatePanel/shared.d.ts

@@ -1,2 +1,2 @@
-import { FixtureElementId, FixtureState, FixtureStateClassState, StateUpdater } from 'react-cosmos-core';
-export declare function createClassStateFsUpdater(elementId: FixtureElementId, cb: (prevFs: FixtureState) => FixtureStateClassState[]): StateUpdater<FixtureState>;
+import { ClassStateFixtureState, FixtureElementId, FixtureStateUpdater } from 'react-cosmos-core';
+export declare function classStateFsItemUpdater(elementId: FixtureElementId, cb: FixtureStateUpdater<ClassStateFixtureState>): FixtureStateUpdater<ClassStateFixtureState>;

package/dist/plugins/ClassStatePanel/ClassStatePanel/shared.js

@@ -1,16 +1,13 @@
-import { findFixtureStateClassState, } from 'react-cosmos-core';
+import { findClassStateFixtureStateItem, } from 'react-cosmos-core';
 import { stringifyElementId } from '../../../components/ValueInputTree/index.js';
-export function createClassStateFsUpdater(elementId, cb) {
+export function classStateFsItemUpdater(elementId, cb) {
     return prevFs => {
-        const fsClassState = findFixtureStateClassState(prevFs, elementId);
-        if (!fsClassState) {
+        const fsItem = findClassStateFixtureStateItem(prevFs, elementId);
+        if (!fsItem) {
             const elId = stringifyElementId(elementId);
             console.warn(`Trying to update missing element with ID: ${elId}`);
-            return prevFs;
+            return prevFs ?? [];
         }
-        return {
-            ...prevFs,
-            classState: cb(prevFs),
-        };
+        return cb(prevFs);
     };
 }

package/dist/plugins/ClassStatePanel/index.js

@@ -1,14 +1,16 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { createPlugin } from 'react-plugin';
 import { getFixtureExpansion, updateElementExpansion, } from '../../components/ValueInputTree/index.js';
 import { ClassStatePanel } from './ClassStatePanel/index.js';
-import { CLASS_STATE_TREE_EXPANSION_STORAGE_KEY } from './shared.js';
+import { CLASS_STATE_TREE_EXPANSION_STORAGE_KEY, } from './shared.js';
 const { namedPlug, register } = createPlugin({
     name: 'classStatePanel',
 });
 namedPlug('sidePanelRow', 'classState', ({ pluginContext, slotProps }) => {
-    const { fixtureId, fixtureState, onFixtureStateChange } = slotProps;
+    const { fixtureId, getFixtureState, setFixtureState } = slotProps;
     const { fixtureExpansion, onElementExpansionChange } = useFixtureExpansion(pluginContext, fixtureId);
+    const fixtureState = getFixtureState('classState');
+    const onFixtureStateChange = useCallback(update => setFixtureState('classState', update), [setFixtureState]);
     return (React.createElement(ClassStatePanel, { fixtureState: fixtureState, fixtureExpansion: fixtureExpansion, onFixtureStateChange: onFixtureStateChange, onElementExpansionChange: onElementExpansionChange }));
 });
 export { register };

package/dist/plugins/ClassStatePanel/shared.d.ts

@@ -1 +1,3 @@
+import { ClassStateFixtureState, FixtureStateUpdater } from 'react-cosmos-core';
+export type SetClassStateFixtureState = (updater: FixtureStateUpdater<ClassStateFixtureState>) => void;
 export declare const CLASS_STATE_TREE_EXPANSION_STORAGE_KEY = "classStateTreeExpansion";

package/dist/plugins/ControlPanel/ControlPanel.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
-import { FixtureState, StateUpdater } from 'react-cosmos-core';
+import { ControlsFixtureState } from 'react-cosmos-core';
+import { SetControlsFixtureState } from './shared.js';
 type Props = {
-    fixtureState: FixtureState;
+    fixtureState: ControlsFixtureState | undefined;
     controlActionOrder: string[];
-    onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
+    onFixtureStateChange: SetControlsFixtureState;
 };
 export declare function ControlPanel({ fixtureState, controlActionOrder, onFixtureStateChange, }: Props): React.JSX.Element | null;
 export {};

package/dist/plugins/ControlPanel/ControlPanel.js

@@ -7,7 +7,7 @@ import { ControlActionSlot } from '../../slots/ControlActionSlot.js';
 import { ControlSlot } from '../../slots/ControlSlot.js';
 export function ControlPanel({ fixtureState, controlActionOrder, onFixtureStateChange, }) {
     const handleControlsReset = React.useCallback(() => onFixtureStateChange(resetControls), [onFixtureStateChange]);
-    const controls = fixtureState.controls || {};
+    const controls = fixtureState ?? {};
     if (Object.keys(controls).length === 0)
         return null;
     return (React.createElement(SidePanelContainer, null,
@@ -26,11 +26,11 @@ function areControlsUnchanged(controls) {
     return Object.keys(controls).every(controlName => isEqual(controls[controlName].currentValue, controls[controlName].defaultValue));
 }
 function resetControls(fixtureState) {
-    const controls = fixtureState.controls ? { ...fixtureState.controls } : {};
+    const controls = fixtureState ? { ...fixtureState } : {};
     Object.keys(controls).forEach(controlName => {
         controls[controlName] = resetControl(controls[controlName]);
     });
-    return { ...fixtureState, controls };
+    return controls;
 }
 function resetControl(control) {
     return { ...control, currentValue: control.defaultValue };

package/dist/plugins/ControlPanel/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { createPlugin } from 'react-plugin';
 import { ControlPanel } from './ControlPanel.js';
 const { namedPlug, register } = createPlugin({
@@ -9,7 +9,9 @@ const { namedPlug, register } = createPlugin({
 });
 namedPlug('sidePanelRow', 'values', ({ pluginContext, slotProps }) => {
     const { controlActionOrder } = pluginContext.getConfig();
-    const { fixtureState, onFixtureStateChange } = slotProps;
+    const { getFixtureState, setFixtureState } = slotProps;
+    const fixtureState = getFixtureState('controls');
+    const onFixtureStateChange = useCallback(update => setFixtureState('controls', update), [setFixtureState]);
     return (React.createElement(ControlPanel, { fixtureState: fixtureState, controlActionOrder: controlActionOrder, onFixtureStateChange: onFixtureStateChange }));
 });
 export { register };

package/dist/plugins/ControlPanel/shared.d.ts

@@ -0,0 +1,2 @@
+import { ControlsFixtureState, FixtureStateUpdater } from 'react-cosmos-core';
+export type SetControlsFixtureState = (updater: FixtureStateUpdater<ControlsFixtureState>) => void;

package/dist/plugins/ControlPanel/shared.js

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

package/dist/plugins/ControlSelect/SelectValueInput.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { FixtureStateSelectControl } from 'react-cosmos-core';
+import { SelectControlFixtureState } from 'react-cosmos-core';
 type Props = {
     name: string;
-    control: FixtureStateSelectControl;
-    onChange: (name: string, select: FixtureStateSelectControl) => unknown;
+    control: SelectControlFixtureState;
+    onChange: (name: string, select: SelectControlFixtureState) => unknown;
 };
 export declare function SelectValueInput({ name, control, onChange }: Props): React.JSX.Element;
 export {};

package/dist/plugins/ControlSelect/index.js

@@ -7,12 +7,9 @@ const { plug, register } = createPlugin({
 plug('control-select', ({ slotProps }) => {
     const { controlName, control, onFixtureStateChange } = slotProps;
     const handleChange = useCallback((selectName, updatedControl) => {
-        onFixtureStateChange(fixtureState => ({
-            ...fixtureState,
-            controls: {
-                ...fixtureState.controls,
-                [selectName]: updatedControl,
-            },
+        onFixtureStateChange(prevFs => ({
+            ...prevFs,
+            [selectName]: updatedControl,
         }));
     }, [onFixtureStateChange]);
     return (React.createElement(SelectValueInput, { key: controlName, name: controlName, control: control, onChange: handleChange }));

package/dist/plugins/PropsPanel/PropsPanel/ComponentProps.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import { FixtureState, FixtureStateProps, StateUpdater } from 'react-cosmos-core';
+import { PropsFixtureStateItem } from 'react-cosmos-core';
 import { FixtureExpansion, OnElementExpansionChange } from '../../../components/ValueInputTree/index.js';
+import { SetPropsFixtureState } from '../shared.js';
 type Props = {
-    fsProps: FixtureStateProps;
+    propsFsItem: PropsFixtureStateItem;
     fixtureExpansion: FixtureExpansion;
-    onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
+    onFixtureStateChange: SetPropsFixtureState;
     onElementExpansionChange: OnElementExpansionChange;
 };
-export declare function ComponentProps({ fsProps, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }: Props): React.JSX.Element;
+export declare function ComponentProps({ propsFsItem, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }: Props): React.JSX.Element;
 export {};

package/dist/plugins/PropsPanel/PropsPanel/ComponentProps.js

@@ -1,26 +1,28 @@
 import { isEqual } from 'lodash-es';
 import React, { useCallback } from 'react';
-import { resetFixtureStateProps, updateFixtureStateProps, } from 'react-cosmos-core';
-import { IconButton32 } from '../../../components/buttons/index.js';
-import { CopyIcon, RotateCcwIcon } from '../../../components/icons/index.js';
+import { resetPropsFixtureStateItem, updatePropsFixtureStateItem, } from 'react-cosmos-core';
 import { SidePanelActions, SidePanelBody, SidePanelContainer, SidePanelHeader, SidePanelTitle, } from '../../../components/SidePanel.js';
 import { ExpandCollapseValues } from '../../../components/ValueInputTree/ExpandCollapseValues.js';
-import { stringifyElementId, ValueInputTree, } from '../../../components/ValueInputTree/index.js';
-import { createPropsFsUpdater } from './shared.js';
-export function ComponentProps({ fsProps, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }) {
-    const { componentName, elementId, values } = fsProps;
+import { ValueInputTree, stringifyElementId, } from '../../../components/ValueInputTree/index.js';
+import { IconButton32 } from '../../../components/buttons/index.js';
+import { CopyIcon, RotateCcwIcon } from '../../../components/icons/index.js';
+import { propsFsItemUpdater } from './shared.js';
+export function ComponentProps({ propsFsItem, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }) {
+    const { componentName, elementId, values } = propsFsItem;
     const [reset, setReset] = React.useState(true);
     const handleResetToggle = React.useCallback(() => setReset(!reset), [reset]);
     const [initialValues] = React.useState(() => values);
-    const handleValuesReset = React.useCallback(() => onFixtureStateChange(createPropsFsUpdater(elementId, prevFs => resetFixtureStateProps({
-        fixtureState: prevFs,
+    const handleValuesReset = React.useCallback(() => onFixtureStateChange(propsFsItemUpdater(elementId, prevFs => resetPropsFixtureStateItem({
+        propsFs: prevFs,
         elementId,
         values: initialValues,
     }))), [elementId, initialValues, onFixtureStateChange]);
     const handleValueChange = React.useCallback((newValues) => {
-        const changeFn = reset ? resetFixtureStateProps : updateFixtureStateProps;
-        onFixtureStateChange(createPropsFsUpdater(elementId, prevFs => changeFn({
-            fixtureState: prevFs,
+        const changeFn = reset
+            ? resetPropsFixtureStateItem
+            : updatePropsFixtureStateItem;
+        onFixtureStateChange(propsFsItemUpdater(elementId, prevFs => changeFn({
+            propsFs: prevFs,
             elementId,
             values: newValues,
         })));

package/dist/plugins/PropsPanel/PropsPanel/index.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
-import { FixtureState, StateUpdater } from 'react-cosmos-core';
+import { PropsFixtureState } from 'react-cosmos-core';
 import { FixtureExpansion, OnElementExpansionChange } from '../../../components/ValueInputTree/index.js';
+import { SetPropsFixtureState } from '../shared.js';
 type Props = {
-    fixtureState: FixtureState;
+    fixtureState: PropsFixtureState | undefined;
     fixtureExpansion: FixtureExpansion;
-    onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
+    onFixtureStateChange: SetPropsFixtureState;
     onElementExpansionChange: OnElementExpansionChange;
 };
 export declare const PropsPanel: React.NamedExoticComponent<Props>;

package/dist/plugins/PropsPanel/PropsPanel/index.js

@@ -2,12 +2,12 @@ import React from 'react';
 import { hasFsValues, sortFsValueGroups, stringifyElementId, } from '../../../components/ValueInputTree/index.js';
 import { ComponentProps } from './ComponentProps.js';
 export const PropsPanel = React.memo(function PropsPanel({ fixtureState, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }) {
-    if (!fixtureState.props) {
+    if (!fixtureState) {
         return null;
     }
-    const propsWithValues = fixtureState.props.filter(hasFsValues);
-    return (React.createElement(React.Fragment, null, sortFsValueGroups(propsWithValues).map(fsProps => {
-        const strElementId = stringifyElementId(fsProps.elementId);
-        return (React.createElement(ComponentProps, { key: strElementId, fsProps: fsProps, fixtureExpansion: fixtureExpansion, onFixtureStateChange: onFixtureStateChange, onElementExpansionChange: onElementExpansionChange }));
+    const propsWithValues = fixtureState.filter(hasFsValues);
+    return (React.createElement(React.Fragment, null, sortFsValueGroups(propsWithValues).map(fsItem => {
+        const strElementId = stringifyElementId(fsItem.elementId);
+        return (React.createElement(ComponentProps, { key: strElementId, propsFsItem: fsItem, fixtureExpansion: fixtureExpansion, onFixtureStateChange: onFixtureStateChange, onElementExpansionChange: onElementExpansionChange }));
     })));
 });

package/dist/plugins/PropsPanel/PropsPanel/shared.d.ts

@@ -1,2 +1,2 @@
-import { FixtureElementId, FixtureState, FixtureStateProps, StateUpdater } from 'react-cosmos-core';
-export declare function createPropsFsUpdater(elementId: FixtureElementId, cb: (prevFs: FixtureState) => FixtureStateProps[]): StateUpdater<FixtureState>;
+import { FixtureElementId, FixtureStateUpdater, PropsFixtureState } from 'react-cosmos-core';
+export declare function propsFsItemUpdater(elementId: FixtureElementId, cb: FixtureStateUpdater<PropsFixtureState>): FixtureStateUpdater<PropsFixtureState>;

package/dist/plugins/PropsPanel/PropsPanel/shared.js

@@ -1,16 +1,13 @@
-import { findFixtureStateProps, } from 'react-cosmos-core';
+import { findPropsFixtureStateItem, } from 'react-cosmos-core';
 import { stringifyElementId } from '../../../components/ValueInputTree/index.js';
-export function createPropsFsUpdater(elementId, cb) {
+export function propsFsItemUpdater(elementId, cb) {
     return prevFs => {
-        const fsProps = findFixtureStateProps(prevFs, elementId);
-        if (!fsProps) {
+        const fsItem = findPropsFixtureStateItem(prevFs, elementId);
+        if (!fsItem) {
             const elId = stringifyElementId(elementId);
             console.warn(`Trying to update missing element with ID: ${elId}`);
-            return prevFs;
+            return prevFs ?? [];
         }
-        return {
-            ...prevFs,
-            props: cb(prevFs),
-        };
+        return cb(prevFs);
     };
 }

package/dist/plugins/PropsPanel/index.js

@@ -1,15 +1,17 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { createPlugin } from 'react-plugin';
 import { getFixtureExpansion, hasFsValues, updateElementExpansion, } from '../../components/ValueInputTree/index.js';
 import { BlankState } from './BlankState.js';
 import { PropsPanel } from './PropsPanel/index.js';
-import { PROPS_TREE_EXPANSION_STORAGE_KEY } from './shared.js';
+import { PROPS_TREE_EXPANSION_STORAGE_KEY, } from './shared.js';
 const { namedPlug, register } = createPlugin({
     name: 'propsPanel',
 });
 namedPlug('sidePanelRow', 'props', ({ pluginContext, slotProps }) => {
-    const { fixtureId, fixtureState, onFixtureStateChange } = slotProps;
+    const { fixtureId, getFixtureState, setFixtureState } = slotProps;
     const { fixtureExpansion, onElementExpansionChange } = useFixtureExpansion(pluginContext, fixtureId);
+    const fixtureState = getFixtureState('props');
+    const onFixtureStateChange = useCallback(change => setFixtureState('props', change), [setFixtureState]);
     return (React.createElement(PropsPanel, { fixtureState: fixtureState, fixtureExpansion: fixtureExpansion, onFixtureStateChange: onFixtureStateChange, onElementExpansionChange: onElementExpansionChange }));
 });
 // WARNING: This plug has to be aware of all control types and only show up
@@ -17,8 +19,8 @@ namedPlug('sidePanelRow', 'props', ({ pluginContext, slotProps }) => {
 // TODO: Replace this with a more generic blank state (controls in general not
 // just props)
 namedPlug('sidePanelRow', 'blankState', ({ slotProps }) => {
-    const { fixtureState } = slotProps;
-    return shouldShowBlankState(fixtureState) ? React.createElement(BlankState, null) : null;
+    const { getFixtureState } = slotProps;
+    return shouldShowBlankState(getFixtureState) ? React.createElement(BlankState, null) : null;
 });
 export { register };
 if (process.env.NODE_ENV !== 'test')
@@ -38,14 +40,17 @@ function useFixtureExpansion(context, fixtureId) {
         onElementExpansionChange,
     };
 }
-function shouldShowBlankState(fixtureState) {
-    const hasProps = fixtureState.props && fixtureState.props.some(hasFsValues);
+function shouldShowBlankState(getFixtureState) {
+    const props = getFixtureState('props');
+    const hasProps = props && props.some(hasFsValues);
     if (hasProps)
         return false;
-    const hasClassState = fixtureState.classState && fixtureState.classState.some(hasFsValues);
+    const classState = getFixtureState('classState');
+    const hasClassState = classState && classState.some(hasFsValues);
     if (hasClassState)
         return false;
-    const hasControls = fixtureState.controls && Object.keys(fixtureState.controls).length > 0;
+    const controls = getFixtureState('controls');
+    const hasControls = controls && Object.keys(controls).length > 0;
     if (hasControls)
         return false;
     return true;

package/dist/plugins/PropsPanel/shared.d.ts

@@ -1 +1,3 @@
+import { FixtureStateUpdater, PropsFixtureState } from 'react-cosmos-core';
+export type SetPropsFixtureState = (updater: FixtureStateUpdater<PropsFixtureState>) => void;
 export declare const PROPS_TREE_EXPANSION_STORAGE_KEY = "propsTreeExpansion";

package/dist/plugins/RendererCore/index.js

@@ -1,3 +1,4 @@
+import { fixtureStateByName } from 'react-cosmos-core';
 import { createPlugin } from 'react-plugin';
 import { onRouterFixtureReselect } from './onRouterFixtureReselect.js';
 import { onRouterFixtureSelect } from './onRouterFixtureSelect.js';
@@ -5,6 +6,7 @@ import { onRouterFixtureUnselect } from './onRouterFixtureUnselect.js';
 import { receiveResponse } from './receiveResponse/index.js';
 import { reloadRenderer } from './reloadRenderer.js';
 import { setFixtureState } from './setFixtureState.js';
+import { setGlobalFixtureState } from './setGlobalFixtureState.js';
 const { on, register, onLoad } = createPlugin({
     name: 'rendererCore',
     defaultConfig: {
@@ -16,18 +18,21 @@ const { on, register, onLoad } = createPlugin({
         primaryRendererId: null,
         fixtures: {},
         fixtureState: {},
+        globalFixtureState: {},
     },
     methods: {
         getRendererUrl,
         getConnectedRendererIds,
         getPrimaryRendererId,
         getFixtures,
-        getFixtureState,
         isRendererConnected,
         reloadRenderer,
-        setFixtureState,
         selectPrimaryRenderer,
         receiveResponse,
+        getAllFixtureState,
+        getFixtureState,
+        setFixtureState,
+        setGlobalFixtureState,
     },
 });
 onLoad(({ getConfig, setState }) => {
@@ -54,9 +59,12 @@ function getPrimaryRendererId({ getState }) {
 function getFixtures({ getState }) {
     return getState().fixtures;
 }
-function getFixtureState({ getState }) {
+function getAllFixtureState({ getState }) {
     return getState().fixtureState;
 }
+function getFixtureState({ getState }, name) {
+    return fixtureStateByName(getState().fixtureState, name);
+}
 function isRendererConnected({ getState }) {
     return getState().connectedRendererIds.length > 0;
 }

package/dist/plugins/RendererCore/onRouterFixtureReselect.js

@@ -1,7 +1,7 @@
 import { postSelectFixtureRequest } from './shared/postRequest.js';
 export function onRouterFixtureReselect(context, fixtureId) {
-    const { connectedRendererIds } = context.getState();
+    const { connectedRendererIds, globalFixtureState } = context.getState();
     connectedRendererIds.forEach(rendererId => {
-        postSelectFixtureRequest(context, rendererId, fixtureId, {});
+        postSelectFixtureRequest(context, rendererId, fixtureId, globalFixtureState);
     });
 }

package/dist/plugins/RendererCore/onRouterFixtureSelect.js

@@ -1,9 +1,9 @@
 import { postSelectFixtureRequest } from './shared/postRequest.js';
 export function onRouterFixtureSelect(context, fixtureId) {
     context.setState(prevState => ({ ...prevState, fixtureState: {} }), () => {
-        const { connectedRendererIds } = context.getState();
+        const { connectedRendererIds, globalFixtureState } = context.getState();
         connectedRendererIds.forEach(rendererId => {
-            postSelectFixtureRequest(context, rendererId, fixtureId, {});
+            postSelectFixtureRequest(context, rendererId, fixtureId, globalFixtureState);
         });
     });
 }

package/dist/plugins/RendererCore/receiveResponse/rendererReady.js

@@ -1,8 +1,8 @@
 import { isEqual } from 'lodash-es';
-import { postSelectFixtureRequest } from '../shared/postRequest.js';
+import { postSelectFixtureRequest, postSetFixtureStateRequest, } from '../shared/postRequest.js';
 export function receiveRendererReadyResponse(context, { payload }) {
     const { rendererId } = payload;
-    const { connectedRendererIds: prevRendererIds } = context.getState();
+    const { connectedRendererIds: prevRendererIds, globalFixtureState } = context.getState();
     context.setState(stateUpdater, afterStateChanged);
     function stateUpdater(prevState) {
         // The first announced renderer becomes the primary one
@@ -12,7 +12,7 @@ export function receiveRendererReadyResponse(context, { payload }) {
             ...prevState,
             connectedRendererIds: addToSet(connectedRendererIds, rendererId),
             primaryRendererId,
-            fixtureState: rendererId === primaryRendererId ? {} : fixtureState,
+            fixtureState: rendererId === primaryRendererId ? globalFixtureState : fixtureState,
         };
     }
     function afterStateChanged() {
@@ -23,6 +23,11 @@ export function receiveRendererReadyResponse(context, { payload }) {
             const { fixtureState } = context.getState();
             postSelectFixtureRequest(context, rendererId, routerFixtureId, fixtureState);
         }
+        else if (rendererFixtureId) {
+            if (Object.keys(globalFixtureState).length > 0) {
+                postSetFixtureStateRequest(context, rendererId, rendererFixtureId, globalFixtureState);
+            }
+        }
         // Notify about connected renderers that weren't connected before
         if (!prevRendererIds.includes(rendererId)) {
             notifyRendererConnection(context, rendererId);

package/dist/plugins/RendererCore/setFixtureState.d.ts

@@ -1,3 +1,3 @@
-import { FixtureState, StateUpdater } from 'react-cosmos-core';
+import { FixtureStateChange } from 'react-cosmos-core';
 import { RendererCoreContext } from './shared/index.js';
-export declare function setFixtureState(context: RendererCoreContext, stateUpdater: StateUpdater<FixtureState>): void;
+export declare function setFixtureState(context: RendererCoreContext, name: string, change: FixtureStateChange<unknown>): void;

package/dist/plugins/RendererCore/setFixtureState.js

@@ -1,18 +1,19 @@
+import { updateFixtureState, } from 'react-cosmos-core';
 import { postSetFixtureStateRequest } from './shared/postRequest.js';
 import { getSelectedFixtureId } from './shared/router.js';
-export function setFixtureState(context, stateUpdater) {
+export function setFixtureState(context, name, change) {
     const fixtureId = getSelectedFixtureId(context);
     if (!fixtureId) {
         console.warn('[Renderer] Trying to set fixture state with no fixture selected');
         return;
     }
-    context.setState(change, () => {
+    context.setState(stateUpdater, () => {
         postRendererRequest(fixtureId);
     });
-    function change(prevState) {
+    function stateUpdater(prevState) {
         return {
             ...prevState,
-            fixtureState: stateUpdater(prevState.fixtureState),
+            fixtureState: updateFixtureState(prevState.fixtureState, name, change),
         };
     }
     function postRendererRequest(selectedFixtureId) {

package/dist/plugins/RendererCore/setGlobalFixtureState.d.ts

@@ -0,0 +1,2 @@
+import { RendererCoreContext } from './shared/index.js';
+export declare function setGlobalFixtureState(context: RendererCoreContext, name: string, state: unknown): void;

package/dist/plugins/RendererCore/setGlobalFixtureState.js

@@ -0,0 +1,15 @@
+import { setFixtureState } from './setFixtureState.js';
+import { getSelectedFixtureId } from './shared/router.js';
+export function setGlobalFixtureState(context, name, state) {
+    context.setState(prevState => ({
+        ...prevState,
+        globalFixtureState: {
+            ...prevState.globalFixtureState,
+            [name]: state,
+        },
+    }));
+    const fixtureId = getSelectedFixtureId(context);
+    if (fixtureId) {
+        setFixtureState(context, name, state);
+    }
+}

package/dist/plugins/RendererCore/shared/postRequest.d.ts

@@ -1,5 +1,5 @@
 import { FixtureId, FixtureState, RendererId } from 'react-cosmos-core';
-import { RendererCoreContext } from '../shared/index.js';
+import { RendererCoreContext } from './index.js';
 export declare function postReloadRendererRequest(context: RendererCoreContext, rendererId: RendererId): void;
 export declare function postSelectFixtureRequest(context: RendererCoreContext, rendererId: RendererId, fixtureId: FixtureId, fixtureState: FixtureState): void;
 export declare function postUnselectFixtureRequest(context: RendererCoreContext, rendererId: RendererId): void;