react-cosmos-ui 6.0.0-alpha.0

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

@@ -0,0 +1,40 @@
+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 { 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;
+    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,
+        elementId,
+        values: initialValues,
+    }))), [elementId, initialValues, onFixtureStateChange]);
+    const handleValueChange = React.useCallback((newValues) => {
+        const changeFn = reset ? resetFixtureStateProps : updateFixtureStateProps;
+        onFixtureStateChange(createPropsFsUpdater(elementId, prevFs => changeFn({
+            fixtureState: prevFs,
+            elementId,
+            values: newValues,
+        })));
+    }, [elementId, reset, onFixtureStateChange]);
+    const strElementId = stringifyElementId(elementId);
+    const expansion = fixtureExpansion[strElementId] || {};
+    const setExpansion = useCallback((newExpansion) => onElementExpansionChange(elementId, newExpansion), [elementId, onElementExpansionChange]);
+    return (React.createElement(SidePanelContainer, null,
+        React.createElement(SidePanelHeader, null,
+            React.createElement(SidePanelTitle, { label: "Props", componentName: componentName }),
+            React.createElement(SidePanelActions, null,
+                React.createElement(IconButton32, { title: "Reset to initial values", icon: React.createElement(RotateCcwIcon, null), disabled: isEqual(values, initialValues), onClick: handleValuesReset }),
+                React.createElement(IconButton32, { title: "Reuse instances on prop changes", icon: React.createElement(CopyIcon, null), selected: !reset, disabled: false, onClick: handleResetToggle }),
+                React.createElement(ExpandCollapseValues, { values: values, expansion: expansion, setExpansion: setExpansion }))),
+        React.createElement(SidePanelBody, null,
+            React.createElement(ValueInputTree, { id: strElementId, values: values, expansion: expansion, setExpansion: setExpansion, onValueChange: handleValueChange }))));
+}

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

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

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

@@ -0,0 +1,13 @@
+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) {
+        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 }));
+    })));
+});

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

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

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

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

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

@@ -0,0 +1,2 @@
+declare const register: () => void;
+export { register };

package/dist/plugins/PropsPanel/index.js

@@ -0,0 +1,55 @@
+import React 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';
+const { namedPlug, register } = createPlugin({
+    name: 'propsPanel',
+});
+namedPlug('sidePanelRow', 'props', ({ pluginContext, slotProps }) => {
+    const { fixtureId, fixtureState, onFixtureStateChange } = slotProps;
+    const { fixtureExpansion, onElementExpansionChange } = useFixtureExpansion(pluginContext, fixtureId);
+    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
+// when none is available
+// 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;
+});
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();
+const DEFAULT_TREE_EXPANSION = {};
+function useFixtureExpansion(context, fixtureId) {
+    const { getMethodsOf } = context;
+    const storage = getMethodsOf('storage');
+    const propsExpansion = storage.getItem(PROPS_TREE_EXPANSION_STORAGE_KEY) ||
+        DEFAULT_TREE_EXPANSION;
+    const fixtureExpansion = getFixtureExpansion(propsExpansion, fixtureId);
+    const onElementExpansionChange = React.useCallback((elementId, treeExpansion) => {
+        storage.setItem(PROPS_TREE_EXPANSION_STORAGE_KEY, updateElementExpansion(propsExpansion, fixtureId, elementId, treeExpansion));
+    }, [storage, propsExpansion, fixtureId]);
+    return {
+        fixtureExpansion,
+        onElementExpansionChange,
+    };
+}
+function shouldShowBlankState(fixtureState) {
+    // Don't show blank state until props (empty or not) have been read
+    if (!fixtureState.props)
+        return false;
+    const hasProps = fixtureState.props.some(hasFsValues);
+    if (hasProps)
+        return false;
+    const hasClassState = fixtureState.classState && fixtureState.classState.some(hasFsValues);
+    if (hasClassState)
+        return false;
+    const hasControls = fixtureState.controls && Object.keys(fixtureState.controls).length > 0;
+    if (hasControls)
+        return false;
+    return true;
+}

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

@@ -0,0 +1 @@
+export declare const PROPS_TREE_EXPANSION_STORAGE_KEY = "propsTreeExpansion";

package/dist/plugins/PropsPanel/shared.js

@@ -0,0 +1 @@
+export const PROPS_TREE_EXPANSION_STORAGE_KEY = 'propsTreeExpansion';

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

@@ -0,0 +1,3 @@
+export type PropsPanelSpec = {
+    name: 'propsPanel';
+};

package/dist/plugins/PropsPanel/spec.js

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

package/dist/plugins/RemoteRenderer/RemoteButton/copyToClipboard.d.ts

@@ -0,0 +1 @@
+export declare function copyToClipboard(text: string): Promise<void>;

package/dist/plugins/RemoteRenderer/RemoteButton/copyToClipboard.js

@@ -0,0 +1,24 @@
+export async function copyToClipboard(text) {
+    const { permissions, clipboard } = navigator;
+    let permissionDenied = false;
+    try {
+        // @ts-ignore Sorry, TS, MDN begs to differ https://developer.mozilla.org/en-US/docs/Web/API/Permissions/query#Parameters
+        const { state } = await permissions.query({ name: 'clipboard-write' });
+        permissionDenied = state !== 'granted' && state !== 'prompt';
+    }
+    catch (err) {
+        // Some browsers (eg. Firefox 66) don't support the 'clipboard'
+        // PermissionDescriptor but support clipboard.writeText. So unless
+        // permission is explicitly denied, we try to copy to clipboard even if the
+        // permission check failed.
+    }
+    if (permissionDenied) {
+        throw new Error('Permission denied to write to clipboard');
+    }
+    try {
+        await clipboard.writeText(text);
+    }
+    catch (err) {
+        throw new Error('Failed to write to clipboard');
+    }
+}

package/dist/plugins/RemoteRenderer/RemoteButton/index.d.ts

@@ -0,0 +1,8 @@
+import { NotificationItem } from '../../Notifications/spec.js';
+type Props = {
+    devServerOn: boolean;
+    webRendererUrl: null | string;
+    pushNotification: (notification: NotificationItem) => unknown;
+};
+export declare function RemoteButton({ devServerOn, webRendererUrl, pushNotification, }: Props): JSX.Element | null;
+export {};

package/dist/plugins/RemoteRenderer/RemoteButton/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { IconButton32 } from '../../../components/buttons/index.js';
+import { CastIcon } from '../../../components/icons/index.js';
+import { copyToClipboard } from './copyToClipboard.js';
+export function RemoteButton({ devServerOn, webRendererUrl, pushNotification, }) {
+    if (!devServerOn || !webRendererUrl) {
+        return null;
+    }
+    return (React.createElement(IconButton32, { icon: React.createElement(CastIcon, null), title: "Copy remote renderer URL", onClick: () => copyRendererUrlToClipboard(webRendererUrl) }));
+    async function copyRendererUrlToClipboard(url) {
+        const fullUrl = getFullUrl(url);
+        try {
+            await copyToClipboard(fullUrl);
+            pushNotification({
+                id: 'renderer-url-copy',
+                type: 'success',
+                title: `Renderer URL copied to clipboard`,
+                info: 'Paste the renderer URL in the address bar of another browser.',
+            });
+        }
+        catch (err) {
+            pushNotification({
+                id: 'renderer-url-copy',
+                type: 'error',
+                title: `Failed to copy renderer URL to clipboard`,
+                info: 'Make sure your browser supports clipboard operations.',
+            });
+        }
+    }
+}
+function getFullUrl(rendererUrl) {
+    // Renderer URL can be absolute or relative, depending on whether the renderer
+    // is running on the same host/port as the playground
+    if (rendererUrl.startsWith('http'))
+        return rendererUrl;
+    return `${location.origin}${rendererUrl}`;
+}

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

@@ -0,0 +1,2 @@
+declare const register: () => void;
+export { register };

package/dist/plugins/RemoteRenderer/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { createPlugin } from 'react-plugin';
+import { RemoteButton } from './RemoteButton/index.js';
+const { onLoad, on, namedPlug, register } = createPlugin({
+    name: 'remoteRenderer',
+});
+on('messageHandler', {
+    rendererResponse: (context, msg) => {
+        const rendererCore = context.getMethodsOf('rendererCore');
+        rendererCore.receiveResponse(msg);
+    },
+});
+on('rendererCore', {
+    request: (context, msg) => {
+        postRendererRequest(context, msg);
+    },
+});
+onLoad(context => {
+    // Discover remote renderers by asking all to announce themselves
+    postRendererRequest(context, {
+        type: 'pingRenderers',
+    });
+});
+namedPlug('globalAction', 'remoteRenderer', ({ pluginContext }) => {
+    const { getMethodsOf } = pluginContext;
+    const core = getMethodsOf('core');
+    const notifications = getMethodsOf('notifications');
+    return (React.createElement(RemoteButton, { devServerOn: core.isDevServerOn(), webRendererUrl: core.getWebRendererUrl(), pushNotification: notifications.pushTimedNotification }));
+});
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();
+function postRendererRequest(context, msg) {
+    const msgHandler = context.getMethodsOf('messageHandler');
+    msgHandler.postRendererRequest(msg);
+}

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

@@ -0,0 +1,3 @@
+import { PluginContext } from 'react-plugin';
+import { RemoteRendererSpec } from './spec.js';
+export type RemoteRendererContext = PluginContext<RemoteRendererSpec>;

package/dist/plugins/RemoteRenderer/shared.js

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

package/dist/plugins/RemoteRenderer/spec.d.ts

@@ -0,0 +1,3 @@
+export type RemoteRendererSpec = {
+    name: 'remoteRenderer';
+};

package/dist/plugins/RemoteRenderer/spec.js

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

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

@@ -0,0 +1,2 @@
+declare const register: () => void;
+export { register };

package/dist/plugins/RendererCore/index.js

@@ -0,0 +1,47 @@
+import { createPlugin } from 'react-plugin';
+import { isValidFixtureSelected } from './isValidFixtureSelected.js';
+import { onRouterFixtureChange } from './onRouterFixtureChange.js';
+import { receiveResponse } from './receiveResponse/index.js';
+import { setFixtureState } from './setFixtureState.js';
+const { on, register } = createPlugin({
+    name: 'rendererCore',
+    initialState: {
+        connectedRendererIds: [],
+        primaryRendererId: null,
+        fixtures: {},
+        fixtureState: {},
+    },
+    methods: {
+        getConnectedRendererIds,
+        getPrimaryRendererId,
+        getFixtures,
+        getFixtureState,
+        isRendererConnected,
+        isValidFixtureSelected,
+        setFixtureState,
+        selectPrimaryRenderer,
+        receiveResponse,
+    },
+});
+on('router', { fixtureChange: onRouterFixtureChange });
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();
+function getConnectedRendererIds({ getState }) {
+    return getState().connectedRendererIds;
+}
+function getPrimaryRendererId({ getState }) {
+    return getState().primaryRendererId;
+}
+function getFixtures({ getState }) {
+    return getState().fixtures;
+}
+function getFixtureState({ getState }) {
+    return getState().fixtureState;
+}
+function isRendererConnected({ getState }) {
+    return getState().connectedRendererIds.length > 0;
+}
+function selectPrimaryRenderer({ setState }, primaryRendererId) {
+    setState(prevState => ({ ...prevState, primaryRendererId }));
+}

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

@@ -0,0 +1,2 @@
+import { RendererCoreContext } from './shared/index.js';
+export declare function isValidFixtureSelected(context: RendererCoreContext): boolean;

package/dist/plugins/RendererCore/isValidFixtureSelected.js

@@ -0,0 +1,16 @@
+import { getSelectedFixtureId } from './shared/router.js';
+export function isValidFixtureSelected(context) {
+    const fixtureId = getSelectedFixtureId(context);
+    if (fixtureId === null) {
+        return false;
+    }
+    const { fixtures } = context.getState();
+    if (!fixtures.hasOwnProperty(fixtureId.path)) {
+        return false;
+    }
+    const fixtureItem = fixtures[fixtureId.path];
+    return fixtureItem.type === 'multi'
+        ? fixtureId.name !== undefined &&
+            fixtureItem.fixtureNames.indexOf(fixtureId.name) !== -1
+        : fixtureId.name === undefined;
+}

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

@@ -0,0 +1,3 @@
+import { FixtureId } from 'react-cosmos-core';
+import { RendererCoreContext } from './shared/index.js';
+export declare function onRouterFixtureChange(context: RendererCoreContext, fixtureId: null | FixtureId): void;

package/dist/plugins/RendererCore/onRouterFixtureChange.js

@@ -0,0 +1,18 @@
+import { postSelectFixtureRequest, postUnselectFixtureRequest, } from './shared/postRequest.js';
+export function onRouterFixtureChange(context, fixtureId) {
+    if (fixtureId === null) {
+        return context.setState(emptyFixtureState, () => {
+            getConnectedRendererIds(context).forEach(rendererId => postUnselectFixtureRequest(context, rendererId));
+        });
+    }
+    // Clear fixture state between fixtures
+    context.setState(emptyFixtureState, () => {
+        getConnectedRendererIds(context).forEach(rendererId => postSelectFixtureRequest(context, rendererId, fixtureId, {}));
+    });
+}
+function getConnectedRendererIds(context) {
+    return context.getState().connectedRendererIds;
+}
+function emptyFixtureState(prevState) {
+    return { ...prevState, fixtureState: {} };
+}

package/dist/plugins/RendererCore/receiveResponse/fixtureListUpdate.d.ts

@@ -0,0 +1,3 @@
+import { FixtureListUpdateResponse } from 'react-cosmos-core';
+import { RendererCoreContext } from '../shared/index.js';
+export declare function receiveFixtureListUpdateResponse(context: RendererCoreContext, { payload }: FixtureListUpdateResponse): void;

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

@@ -0,0 +1,11 @@
+export function receiveFixtureListUpdateResponse(context, { payload }) {
+    const { rendererId, fixtures } = payload;
+    const { primaryRendererId } = context.getState();
+    // Discard updates from secondary renderers
+    if (rendererId === primaryRendererId) {
+        context.setState(prevState => ({
+            ...prevState,
+            fixtures,
+        }));
+    }
+}

package/dist/plugins/RendererCore/receiveResponse/fixtureStateChange.d.ts

@@ -0,0 +1,3 @@
+import { FixtureStateChangeResponse } from 'react-cosmos-core';
+import { RendererCoreContext } from '../shared/index.js';
+export declare function receiveFixtureStateChangeResponse(context: RendererCoreContext, { payload }: FixtureStateChangeResponse): void;

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

@@ -0,0 +1,30 @@
+import { isEqual } from 'lodash-es';
+import { postSetFixtureStateRequest } from '../shared/postRequest.js';
+import { getSelectedFixtureId } from '../shared/router.js';
+export function receiveFixtureStateChangeResponse(context, { payload }) {
+    const { rendererId, fixtureId, fixtureState } = payload;
+    const selectedFixtureId = getSelectedFixtureId(context);
+    const { primaryRendererId, fixtureState: prevFixtureState } = context.getState();
+    if (!isEqual(fixtureId, selectedFixtureId)) {
+        console.warn('[Renderer] fixtureStateChange response ignored ' +
+            `because it doesn't match the selected fixture`);
+        return;
+    }
+    // Discard updates from secondary renderers
+    if (rendererId !== primaryRendererId) {
+        return;
+    }
+    if (isEqual(fixtureState, prevFixtureState)) {
+        return;
+    }
+    context.setState(prevState => ({ ...prevState, fixtureState }), afterStateChanged);
+    function afterStateChanged() {
+        // Sync secondary renderers with changed primary renderer fixture state
+        const { connectedRendererIds } = context.getState();
+        connectedRendererIds.forEach(curRendererId => {
+            if (curRendererId !== rendererId) {
+                postSetFixtureStateRequest(context, curRendererId, fixtureId, fixtureState);
+            }
+        });
+    }
+}

package/dist/plugins/RendererCore/receiveResponse/index.d.ts

@@ -0,0 +1,3 @@
+import { MessageType } from 'react-cosmos-core';
+import { RendererCoreContext } from '../shared/index.js';
+export declare function receiveResponse(context: RendererCoreContext, msg: MessageType): void;

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

@@ -0,0 +1,20 @@
+import { receiveFixtureListUpdateResponse } from './fixtureListUpdate.js';
+import { receiveFixtureStateChangeResponse } from './fixtureStateChange.js';
+import { receivePlaygroundCommandResponse } from './playgroundCommand.js';
+import { receiveRendererReadyResponse } from './rendererReady.js';
+export function receiveResponse(context, msg) {
+    context.emit('response', msg);
+    const rendererResponse = msg;
+    switch (rendererResponse.type) {
+        case 'rendererReady':
+            return receiveRendererReadyResponse(context, rendererResponse);
+        case 'fixtureListUpdate':
+            return receiveFixtureListUpdateResponse(context, rendererResponse);
+        case 'fixtureStateChange':
+            return receiveFixtureStateChangeResponse(context, rendererResponse);
+        case 'playgroundCommand':
+            return receivePlaygroundCommandResponse(context, rendererResponse);
+        default:
+        // No need to handle every message. Maybe some plugin cares about it.
+    }
+}

package/dist/plugins/RendererCore/receiveResponse/playgroundCommand.d.ts

@@ -0,0 +1,3 @@
+import { PlaygroundCommandResponse } from 'react-cosmos-core';
+import { RendererCoreContext } from '../shared/index.js';
+export declare function receivePlaygroundCommandResponse(context: RendererCoreContext, { payload }: PlaygroundCommandResponse): void;

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

@@ -0,0 +1,5 @@
+export function receivePlaygroundCommandResponse(context, { payload }) {
+    const { command } = payload;
+    const core = context.getMethodsOf('core');
+    core.runCommand(command);
+}

package/dist/plugins/RendererCore/receiveResponse/rendererReady.d.ts

@@ -0,0 +1,3 @@
+import { RendererReadyResponse } from 'react-cosmos-core';
+import { RendererCoreContext } from '../shared/index.js';
+export declare function receiveRendererReadyResponse(context: RendererCoreContext, { payload }: RendererReadyResponse): void;

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

@@ -0,0 +1,49 @@
+import { postSelectFixtureRequest } from '../shared/postRequest.js';
+import { getSelectedFixtureId } from '../shared/router.js';
+export function receiveRendererReadyResponse(context, { payload }) {
+    const { rendererId, fixtures, initialFixtureId } = payload;
+    context.setState(stateUpdater, afterStateChanged);
+    function stateUpdater(prevState) {
+        // The first announced renderer becomes the primary one
+        const primaryRendererId = prevState.primaryRendererId || rendererId;
+        const isPrimaryRenderer = rendererId === primaryRendererId;
+        const { connectedRendererIds, fixtureState } = prevState;
+        return {
+            ...prevState,
+            connectedRendererIds: addToSet(connectedRendererIds, rendererId),
+            primaryRendererId,
+            fixtures,
+            fixtureState: isPrimaryRenderer ? {} : fixtureState,
+        };
+    }
+    function afterStateChanged() {
+        if (initialFixtureId)
+            selectInitialFixture(context, initialFixtureId);
+        else
+            selectFixtureFromUrlParams(context, rendererId);
+        notifyRendererConnection(context, rendererId);
+    }
+}
+function selectInitialFixture({ getMethodsOf }, fixtureId) {
+    const router = getMethodsOf('router');
+    router.selectFixture(fixtureId);
+}
+function selectFixtureFromUrlParams(context, rendererId) {
+    const fixtureId = getSelectedFixtureId(context);
+    if (fixtureId) {
+        const { fixtureState } = context.getState();
+        postSelectFixtureRequest(context, rendererId, fixtureId, fixtureState);
+    }
+}
+function notifyRendererConnection({ getMethodsOf }, rendererId) {
+    const notifications = getMethodsOf('notifications');
+    notifications.pushTimedNotification({
+        id: `renderer-connect-${rendererId}`,
+        type: 'info',
+        title: 'Renderer connected',
+        info: 'Your fixtures are ready to use.',
+    });
+}
+function addToSet(set, item) {
+    return set.indexOf(item) === -1 ? [...set, item] : set;
+}

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

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

package/dist/plugins/RendererCore/setFixtureState.js

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

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

@@ -0,0 +1,4 @@
+import { PluginContext } from 'react-plugin';
+import { RendererCoreSpec } from '../spec.js';
+export type State = RendererCoreSpec['state'];
+export type RendererCoreContext = PluginContext<RendererCoreSpec>;

package/dist/plugins/RendererCore/shared/index.js

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

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

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

package/dist/plugins/RendererCore/shared/postRequest.js

@@ -0,0 +1,31 @@
+export function postSelectFixtureRequest(context, rendererId, fixtureId, fixtureState) {
+    postRendererRequest(context, {
+        type: 'selectFixture',
+        payload: {
+            rendererId,
+            fixtureId,
+            fixtureState,
+        },
+    });
+}
+export function postUnselectFixtureRequest(context, rendererId) {
+    postRendererRequest(context, {
+        type: 'unselectFixture',
+        payload: {
+            rendererId,
+        },
+    });
+}
+export function postSetFixtureStateRequest(context, rendererId, fixtureId, fixtureState) {
+    postRendererRequest(context, {
+        type: 'setFixtureState',
+        payload: {
+            rendererId,
+            fixtureId,
+            fixtureState,
+        },
+    });
+}
+function postRendererRequest({ emit }, msg) {
+    emit('request', msg);
+}

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

@@ -0,0 +1,2 @@
+import { RendererCoreContext } from '../shared/index.js';
+export declare function getSelectedFixtureId({ getMethodsOf }: RendererCoreContext): import("react-cosmos-core").FixtureId | null;

package/dist/plugins/RendererCore/shared/router.js

@@ -0,0 +1,3 @@
+export function getSelectedFixtureId({ getMethodsOf }) {
+    return getMethodsOf('router').getSelectedFixtureId();
+}