react-cosmos-ui 6.0.0-alpha.20 → 6.0.0-alpha.21

package/dist/plugins/FullScreenButton/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { buildRendererQueryString } from 'react-cosmos-core';
+import { createRendererUrl } from 'react-cosmos-core';
 import { createPlugin } from 'react-plugin';
 import { FullScreenButton } from './FullScreenButton.js';
 const { namedPlug, register } = createPlugin({
@@ -10,15 +10,16 @@ namedPlug('rendererAction', 'fullScreen', ({ pluginContext, slotProps }) => {
     const { fixtureId } = slotProps;
     const core = getMethodsOf('core');
     const rendererCore = getMethodsOf('rendererCore');
-    const rendererUrl = rendererCore.getWebRendererUrl();
+    const rendererUrl = rendererCore.getRendererUrl();
     const onSelect = React.useCallback(() => {
-        const query = buildRendererQueryString({ fixtureId, locked: true });
-        const fixtureUrl = `${rendererUrl}${query}`;
-        // noopener is required to prevent reuse of sessionStorage from the
-        // Playground window, thus making sure the remote renderer will generate
-        // a different rendererId from the iframe renderer.
-        // https://stackoverflow.com/a/73821739
-        window.open(fixtureUrl, '_blank', 'noopener=true');
+        if (rendererUrl) {
+            const fixtureUrl = createRendererUrl(rendererUrl, fixtureId, true);
+            // noopener is required to prevent reuse of sessionStorage from the
+            // Playground window, thus making sure the remote renderer will generate
+            // a different rendererId from the iframe renderer.
+            // https://stackoverflow.com/a/73821739
+            window.open(fixtureUrl, '_blank', 'noopener=true');
+        }
     }, [fixtureId, rendererUrl]);
     React.useEffect(() => {
         return core.registerCommands({ goFullScreen: onSelect });

package/dist/plugins/PropsPanel/index.js

@@ -39,10 +39,7 @@ function useFixtureExpansion(context, fixtureId) {
     };
 }
 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);
+    const hasProps = fixtureState.props && fixtureState.props.some(hasFsValues);
     if (hasProps)
         return false;
     const hasClassState = fixtureState.classState && fixtureState.classState.some(hasFsValues);

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

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

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

@@ -1,12 +1,13 @@
 import React from 'react';
+import { createRendererUrl } from 'react-cosmos-core';
 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) {
+export function RemoteButton({ devServerOn, rendererUrl, pushNotification, }) {
+    if (!devServerOn || !rendererUrl) {
         return null;
     }
-    return (React.createElement(IconButton32, { icon: React.createElement(CastIcon, null), title: "Copy remote renderer URL", onClick: () => copyRendererUrlToClipboard(webRendererUrl) }));
+    return (React.createElement(IconButton32, { icon: React.createElement(CastIcon, null), title: "Copy remote renderer URL", onClick: () => copyRendererUrlToClipboard(createRendererUrl(rendererUrl)) }));
     async function copyRendererUrlToClipboard(url) {
         const fullUrl = getFullUrl(url);
         try {

package/dist/plugins/RemoteRenderer/index.js

@@ -26,7 +26,7 @@ namedPlug('globalAction', 'remoteRenderer', ({ pluginContext }) => {
     const core = getMethodsOf('core');
     const rendererCore = getMethodsOf('rendererCore');
     const notifications = getMethodsOf('notifications');
-    return (React.createElement(RemoteButton, { devServerOn: core.isDevServerOn(), webRendererUrl: rendererCore.getWebRendererUrl(), pushNotification: notifications.pushTimedNotification }));
+    return (React.createElement(RemoteButton, { devServerOn: core.isDevServerOn(), rendererUrl: rendererCore.getRendererUrl(), pushNotification: notifications.pushTimedNotification }));
 });
 export { register };
 if (process.env.NODE_ENV !== 'test')

package/dist/plugins/RendererCore/index.js

@@ -1,5 +1,7 @@
 import { createPlugin } from 'react-plugin';
-import { onRouterFixtureChange } from './onRouterFixtureChange.js';
+import { onRouterFixtureReselect } from './onRouterFixtureReselect.js';
+import { onRouterFixtureSelect } from './onRouterFixtureSelect.js';
+import { onRouterFixtureUnselect } from './onRouterFixtureUnselect.js';
 import { receiveResponse } from './receiveResponse/index.js';
 import { reloadRenderer } from './reloadRenderer.js';
 import { setFixtureState } from './setFixtureState.js';
@@ -7,7 +9,7 @@ const { on, register, onLoad } = createPlugin({
     name: 'rendererCore',
     defaultConfig: {
         fixtures: {},
-        webRendererUrl: null,
+        rendererUrl: null,
     },
     initialState: {
         connectedRendererIds: [],
@@ -16,7 +18,7 @@ const { on, register, onLoad } = createPlugin({
         fixtureState: {},
     },
     methods: {
-        getWebRendererUrl,
+        getRendererUrl,
         getConnectedRendererIds,
         getPrimaryRendererId,
         getFixtures,
@@ -32,12 +34,16 @@ onLoad(({ getConfig, setState }) => {
     const { fixtures } = getConfig();
     setState(prevState => ({ ...prevState, fixtures }));
 });
-on('router', { fixtureChange: onRouterFixtureChange });
+on('router', {
+    fixtureSelect: onRouterFixtureSelect,
+    fixtureReselect: onRouterFixtureReselect,
+    fixtureUnselect: onRouterFixtureUnselect,
+});
 export { register };
 if (process.env.NODE_ENV !== 'test')
     register();
-function getWebRendererUrl({ getConfig }) {
-    return getConfig().webRendererUrl;
+function getRendererUrl({ getConfig }) {
+    return getConfig().rendererUrl;
 }
 function getConnectedRendererIds({ getState }) {
     return getState().connectedRendererIds;

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

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

package/dist/plugins/RendererCore/onRouterFixtureReselect.js

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

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

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

package/dist/plugins/RendererCore/onRouterFixtureSelect.js

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

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

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

package/dist/plugins/RendererCore/onRouterFixtureUnselect.js

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

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

@@ -3,7 +3,7 @@ export type RendererCoreSpec = {
     name: 'rendererCore';
     config: {
         fixtures: FixtureList;
-        webRendererUrl: null | string;
+        rendererUrl: null | string;
     };
     state: {
         connectedRendererIds: RendererId[];
@@ -12,7 +12,7 @@ export type RendererCoreSpec = {
         fixtureState: FixtureState;
     };
     methods: {
-        getWebRendererUrl(): null | string;
+        getRendererUrl(): null | string;
         getConnectedRendererIds(): RendererId[];
         getPrimaryRendererId(): null | RendererId;
         getFixtures(): FixtureList;

package/dist/plugins/RendererPreview/RendererPreview.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { createRendererUrl } from 'react-cosmos-core';
 import { Slot } from 'react-plugin';
 import styled from 'styled-components';
 import { RemoteRendererOverlay } from './RendererOverlay/RemoteRendererOverlay.js';
@@ -11,7 +12,7 @@ export const RendererPreview = React.memo(function RendererPreview({ rendererUrl
     }
     return (React.createElement(Slot, { name: "rendererPreviewOuter" },
         React.createElement(Container, null,
-            React.createElement(Iframe, { "data-testid": "previewIframe", ref: onIframeRef, src: rendererUrl, frameBorder: 0, allow: "clipboard-write *" }),
+            React.createElement(Iframe, { "data-testid": "previewIframe", ref: onIframeRef, src: createRendererUrl(rendererUrl), frameBorder: 0, allow: "clipboard-write *" }),
             React.createElement(RendererOverlay, { runtimeStatus: runtimeStatus }))));
 });
 const Container = styled.div `

package/dist/plugins/RendererPreview/index.js

@@ -36,7 +36,7 @@ function getRuntimeStatus({ getState }) {
     return getState().runtimeStatus;
 }
 function getRendererUrl({ getMethodsOf }) {
-    return getMethodsOf('rendererCore').getWebRendererUrl();
+    return getMethodsOf('rendererCore').getRendererUrl();
 }
 function getRendererConnected({ getMethodsOf }) {
     return getMethodsOf('rendererCore').isRendererConnected();

package/dist/plugins/ResponsivePreview/index.js

@@ -22,7 +22,7 @@ namedPlug('rendererAction', 'responsivePreview', ({ pluginContext }) => {
     const rendererCore = getMethodsOf('rendererCore');
     const viewportState = getViewportState(pluginContext);
     const { enabled, viewport } = viewportState;
-    if (!rendererCore.getWebRendererUrl())
+    if (!rendererCore.getRendererUrl())
         return null;
     return (React.createElement(ToggleButton, { selected: enabled, onToggle: () => {
             if (enabled) {

package/dist/plugins/Router/index.js

@@ -20,7 +20,7 @@ onLoad(context => {
         const fixtureChanged = !isEqual(urlParams.fixtureId, fixtureId);
         setState({ urlParams }, () => {
             if (fixtureChanged) {
-                emitFixtureChangeEvent(context);
+                emitFixtureChangeEvent(context, true);
             }
         });
     });
@@ -41,16 +41,28 @@ function setUrlParams(context, nextUrlParams) {
     const { urlParams } = context.getState();
     const fixtureChanged = !isEqual(nextUrlParams.fixtureId, urlParams.fixtureId);
     const urlParamsEqual = isEqual(nextUrlParams, urlParams);
-    context.setState({ urlParams: nextUrlParams }, () => {
-        // Setting identical url params is considered a "reset" request
-        if (fixtureChanged || urlParamsEqual) {
-            emitFixtureChangeEvent(context);
-        }
-        if (!urlParamsEqual) {
+    if (urlParamsEqual) {
+        // Setting identical URL params can be considered a "reset" request, but
+        // this will only re-render the fixture if the renderer implements an
+        // auto-incrementing render key in its state
+        emitFixtureChangeEvent(context, false);
+    }
+    else {
+        context.setState({ urlParams: nextUrlParams }, () => {
             pushUrlParams(context.getState().urlParams);
-        }
-    });
+            emitFixtureChangeEvent(context, fixtureChanged);
+        });
+    }
 }
-function emitFixtureChangeEvent(context) {
-    context.emit('fixtureChange', getSelectedFixtureId(context));
+function emitFixtureChangeEvent(context, fixtureChanged) {
+    const fixtureId = getSelectedFixtureId(context);
+    if (!fixtureId) {
+        context.emit('fixtureUnselect');
+    }
+    else if (fixtureChanged) {
+        context.emit('fixtureSelect', fixtureId);
+    }
+    else {
+        context.emit('fixtureReselect', fixtureId);
+    }
 }

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

@@ -10,6 +10,8 @@ export type RouterSpec = {
         unselectFixture(): void;
     };
     events: {
-        fixtureChange(fixtureId: null | FixtureId): void;
+        fixtureSelect(fixtureId: FixtureId): void;
+        fixtureReselect(fixtureId: FixtureId): void;
+        fixtureUnselect(): void;
     };
 };

package/dist/testHelpers/pluginMocks.d.ts

@@ -32,7 +32,7 @@ export declare function getCoreMethods(): {
     isDevServerOn(): boolean;
 };
 export declare function getRendererCoreMethods(): {
-    getWebRendererUrl(): string | null;
+    getRendererUrl(): string | null;
     getConnectedRendererIds(): string[];
     getPrimaryRendererId(): string | null;
     getFixtures(): import("react-cosmos-core").FixtureList;
@@ -75,7 +75,7 @@ export declare function mockMessageHandler(methods?: MethodsOf<MessageHandlerSpe
     postRendererRequest: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<MessageHandlerSpec>, msg: import("react-cosmos-core").MessageType) => unknown);
 };
 export declare function mockRendererCore(methods?: MethodsOf<RendererCoreSpec>): {
-    getWebRendererUrl: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => string | null);
+    getRendererUrl: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => string | null);
     getConnectedRendererIds: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => string[]);
     getPrimaryRendererId: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => string | null);
     getFixtures: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => import("react-cosmos-core").FixtureList);
@@ -102,7 +102,9 @@ export declare function mockFixtureTree(methods?: MethodsOf<FixtureTreeSpec>): {
     }, fixtureId: import("react-cosmos-core").FixtureId) => unknown);
 };
 export declare function onRouter(events?: EventsOf<RouterSpec>): {
-    fixtureChange: jest.Mock<any, any, any> | import("ui-plugin/dist/types/PluginContextHandlers.js").PluginEventHandler<any, [fixtureId: import("react-cosmos-core").FixtureId | null]>;
+    fixtureSelect: jest.Mock<any, any, any> | import("ui-plugin/dist/types/PluginContextHandlers.js").PluginEventHandler<any, [fixtureId: import("react-cosmos-core").FixtureId]>;
+    fixtureReselect: jest.Mock<any, any, any> | import("ui-plugin/dist/types/PluginContextHandlers.js").PluginEventHandler<any, [fixtureId: import("react-cosmos-core").FixtureId]>;
+    fixtureUnselect: jest.Mock<any, any, any> | import("ui-plugin/dist/types/PluginContextHandlers.js").PluginEventHandler<any, []>;
 };
 export declare function onMessageHandler(events?: EventsOf<MessageHandlerSpec>): {
     serverMessage: jest.Mock<any, any, any> | import("ui-plugin/dist/types/PluginContextHandlers.js").PluginEventHandler<any, [msg: import("react-cosmos-core").MessageType]>;

package/dist/testHelpers/pluginMocks.js

@@ -69,7 +69,7 @@ export function mockMessageHandler(methods = {}) {
 }
 export function mockRendererCore(methods = {}) {
     const allMethods = {
-        getWebRendererUrl: jest.fn(),
+        getRendererUrl: jest.fn(),
         getConnectedRendererIds: jest.fn(),
         getPrimaryRendererId: jest.fn(),
         getFixtures: jest.fn(),
@@ -113,7 +113,9 @@ export function mockFixtureTree(methods = {}) {
 }
 export function onRouter(events = {}) {
     const allEvents = {
-        fixtureChange: jest.fn(),
+        fixtureSelect: jest.fn(),
+        fixtureReselect: jest.fn(),
+        fixtureUnselect: jest.fn(),
         ...events,
     };
     on('router', allEvents);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cosmos-ui",
-  "version": "6.0.0-alpha.20",
+  "version": "6.0.0-alpha.21",
   "description": "React Cosmos UI",
   "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos-ui",
   "license": "MIT",
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "lodash-es": "^4.17.21",
-    "react-cosmos-core": "6.0.0-alpha.20"
+    "react-cosmos-core": "6.0.0-alpha.21"
   },
   "devDependencies": {
     "fuzzaldrin-plus": "^0.6.0",
@@ -23,5 +23,5 @@
     "react-plugin": "^3.0.0-alpha.4",
     "styled-components": "^5.3.10"
   },
-  "gitHead": "31201ce4185919b054f42b8f15b3e87033af4e69"
+  "gitHead": "1b7472f75075853e5eaf9a427a4c3138818fbcd0"
 }

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

@@ -1,3 +0,0 @@
-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

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