react-cosmos-ui 6.0.0-alpha.9 → 6.0.0-beta.2

package/dist/plugins/FullScreenButton/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
+import { createRendererUrl } from 'react-cosmos-core';
 import { createPlugin } from 'react-plugin';
-import { stringifyRendererUrlQuery } from 'react-cosmos-core';
 import { FullScreenButton } from './FullScreenButton.js';
 const { namedPlug, register } = createPlugin({
     name: 'fullScreenButton',
@@ -9,11 +9,17 @@ namedPlug('rendererAction', 'fullScreen', ({ pluginContext, slotProps }) => {
     const { getMethodsOf } = pluginContext;
     const { fixtureId } = slotProps;
     const core = getMethodsOf('core');
-    const rendererUrl = core.getWebRendererUrl();
+    const rendererCore = getMethodsOf('rendererCore');
+    const rendererUrl = rendererCore.getRendererUrl();
     const onSelect = React.useCallback(() => {
-        const query = stringifyRendererUrlQuery({ _fixtureId: fixtureId });
-        const fixtureUrl = `${rendererUrl}?${query}`;
-        window.open(fixtureUrl, '_blank');
+        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/Notifications/Notifications.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NotificationItem } from './spec.js';
 type Props = {
     notifications: NotificationItem[];

package/dist/plugins/PluginList/PluginList.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type SimplePlugin = {
     name: string;
     enabled: boolean;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare function BlankState(): JSX.Element;
 export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const NoWrap: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/plugins/PropsPanel/BlankState.js

@@ -1,20 +1,22 @@
 import React from 'react';
+import { DelayRender } from 'react-cosmos-core';
 import styled from 'styled-components';
 import { SlidersIcon } from '../../components/icons/index.js';
 import { grey160, grey224, grey32, grey64 } from '../../style/colors.js';
 export function BlankState() {
-    return (React.createElement(Container, null,
-        React.createElement(IconContainer, null,
-            React.createElement(SlidersIcon, null)),
-        React.createElement(Title, null,
-            "No visible props in ",
-            React.createElement(NoWrap, null, "selected fixture")),
-        React.createElement(Description, null,
-            "Props of exported JSX ",
-            React.createElement(NoWrap, null, "elements from"),
-            " your fixtures",
-            ' ',
-            React.createElement(NoWrap, null, "will appear here."))));
+    return (React.createElement(DelayRender, { delay: 500 },
+        React.createElement(Container, null,
+            React.createElement(IconContainer, null,
+                React.createElement(SlidersIcon, null)),
+            React.createElement(Title, null,
+                "No visible props in ",
+                React.createElement(NoWrap, null, "selected fixture")),
+            React.createElement(Description, null,
+                "Props of exported JSX ",
+                React.createElement(NoWrap, null, "elements from"),
+                " your fixtures",
+                ' ',
+                React.createElement(NoWrap, null, "will appear here.")))));
 }
 const Container = styled.div `
   padding: 16px 24px;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FixtureState, FixtureStateProps, StateUpdater } from 'react-cosmos-core';
 import { FixtureExpansion, OnElementExpansionChange } from '../../../components/ValueInputTree/index.js';
 type Props = {

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

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 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 {
@@ -33,5 +34,5 @@ function getFullUrl(rendererUrl) {
     // is running on the same host/port as the playground
     if (rendererUrl.startsWith('http'))
         return rendererUrl;
-    return `${location.origin}${rendererUrl}`;
+    return new URL(rendererUrl, location.origin).toString();
 }

package/dist/plugins/RemoteRenderer/index.js

@@ -24,8 +24,9 @@ onLoad(context => {
 namedPlug('globalAction', 'remoteRenderer', ({ pluginContext }) => {
     const { getMethodsOf } = pluginContext;
     const core = getMethodsOf('core');
+    const rendererCore = getMethodsOf('rendererCore');
     const notifications = getMethodsOf('notifications');
-    return (React.createElement(RemoteButton, { devServerOn: core.isDevServerOn(), webRendererUrl: core.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,10 +1,16 @@
 import { createPlugin } from 'react-plugin';
-import { isValidFixtureSelected } from './isValidFixtureSelected.js';
-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';
-const { on, register } = createPlugin({
+const { on, register, onLoad } = createPlugin({
     name: 'rendererCore',
+    defaultConfig: {
+        fixtures: {},
+        rendererUrl: null,
+    },
     initialState: {
         connectedRendererIds: [],
         primaryRendererId: null,
@@ -12,21 +18,33 @@ const { on, register } = createPlugin({
         fixtureState: {},
     },
     methods: {
+        getRendererUrl,
         getConnectedRendererIds,
         getPrimaryRendererId,
         getFixtures,
         getFixtureState,
         isRendererConnected,
-        isValidFixtureSelected,
+        reloadRenderer,
         setFixtureState,
         selectPrimaryRenderer,
         receiveResponse,
     },
 });
-on('router', { fixtureChange: onRouterFixtureChange });
+onLoad(({ getConfig, setState }) => {
+    const { fixtures } = getConfig();
+    setState(prevState => ({ ...prevState, fixtures }));
+});
+on('router', {
+    fixtureSelect: onRouterFixtureSelect,
+    fixtureReselect: onRouterFixtureReselect,
+    fixtureUnselect: onRouterFixtureUnselect,
+});
 export { register };
 if (process.env.NODE_ENV !== 'test')
     register();
+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/receiveResponse/fixtureStateChange.js

@@ -5,15 +5,15 @@ export function receiveFixtureStateChangeResponse(context, { payload }) {
     const { rendererId, fixtureId, fixtureState } = payload;
     const selectedFixtureId = getSelectedFixtureId(context);
     const { primaryRendererId, fixtureState: prevFixtureState } = context.getState();
+    // Discard updates from secondary renderers
+    if (rendererId !== primaryRendererId) {
+        return;
+    }
     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;
     }

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

@@ -1,38 +1,32 @@
+import { isEqual } from 'lodash-es';
 import { postSelectFixtureRequest } from '../shared/postRequest.js';
-import { getSelectedFixtureId } from '../shared/router.js';
 export function receiveRendererReadyResponse(context, { payload }) {
-    const { rendererId, fixtures, initialFixtureId } = payload;
+    const { rendererId } = payload;
+    const { connectedRendererIds: prevRendererIds } = context.getState();
     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,
+            fixtureState: rendererId === primaryRendererId ? {} : 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);
+        const router = context.getMethodsOf('router');
+        const rendererFixtureId = payload.selectedFixtureId;
+        const routerFixtureId = router.getSelectedFixtureId();
+        if (routerFixtureId && !isEqual(routerFixtureId, rendererFixtureId)) {
+            const { fixtureState } = context.getState();
+            postSelectFixtureRequest(context, rendererId, routerFixtureId, fixtureState);
+        }
+        // Notify about connected renderers that weren't connected before
+        if (!prevRendererIds.includes(rendererId)) {
+            notifyRendererConnection(context, rendererId);
+        }
     }
 }
 function notifyRendererConnection({ getMethodsOf }, rendererId) {

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

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

package/dist/plugins/RendererCore/reloadRenderer.js

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

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

@@ -1,5 +1,6 @@
 import { FixtureId, FixtureState, RendererId } from 'react-cosmos-core';
 import { RendererCoreContext } from '../shared/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;
 export declare function postSetFixtureStateRequest(context: RendererCoreContext, rendererId: RendererId, fixtureId: FixtureId, fixtureState: FixtureState): void;

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

@@ -1,3 +1,11 @@
+export function postReloadRendererRequest(context, rendererId) {
+    postRendererRequest(context, {
+        type: 'reloadRenderer',
+        payload: {
+            rendererId,
+        },
+    });
+}
 export function postSelectFixtureRequest(context, rendererId, fixtureId, fixtureState) {
     postRendererRequest(context, {
         type: 'selectFixture',

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

@@ -1,6 +1,10 @@
 import { FixtureList, FixtureState, MessageType, RendererId, StateUpdater } from 'react-cosmos-core';
 export type RendererCoreSpec = {
     name: 'rendererCore';
+    config: {
+        fixtures: FixtureList;
+        rendererUrl: null | string;
+    };
     state: {
         connectedRendererIds: RendererId[];
         primaryRendererId: null | RendererId;
@@ -8,12 +12,13 @@ export type RendererCoreSpec = {
         fixtureState: FixtureState;
     };
     methods: {
+        getRendererUrl(): null | string;
         getConnectedRendererIds(): RendererId[];
         getPrimaryRendererId(): null | RendererId;
         getFixtures(): FixtureList;
         getFixtureState(): FixtureState;
         isRendererConnected(): boolean;
-        isValidFixtureSelected(): boolean;
+        reloadRenderer(): void;
         setFixtureState(stateUpdater: StateUpdater<FixtureState>): void;
         selectPrimaryRenderer(primaryRendererId: RendererId): void;
         receiveResponse(msg: MessageType): void;

package/dist/plugins/RendererPreview/RendererOverlay/RemoteRendererConnected.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function RemoteRendererConnected(): JSX.Element;

package/dist/plugins/RendererPreview/RendererOverlay/RemoteRendererConnected.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import styled from 'styled-components';
+import { CheckCircleIcon } from '../../../components/icons/index.js';
+import { grey144 } from '../../../style/colors.js';
+import { RendererOverlayContainer, RendererOverlayIconWrapper, RendererOverlayMessage, } from './rendererOverlayShared.js';
+export function RemoteRendererConnected() {
+    return (React.createElement(RendererOverlayContainer, null,
+        React.createElement(RendererOverlayIconWrapper, null,
+            React.createElement(IconContainer, null, React.createElement(CheckCircleIcon, { strokeWidth: 0.55 }))),
+        React.createElement(RendererOverlayMessage, null, "Remote renderer connected")));
+}
+const svgRingRatio = 26.667 / 32;
+const ringSize = 34;
+const iconSize = ringSize / svgRingRatio;
+const IconContainer = styled.span `
+  width: ${iconSize}px;
+  height: ${iconSize}px;
+  color: ${grey144};
+`;

package/dist/plugins/RendererPreview/RendererOverlay/RemoteRendererOverlay.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type Props = {
+    rendererConnected: boolean;
+};
+export declare function RemoteRendererOverlay({ rendererConnected }: Props): JSX.Element;
+export {};

package/dist/plugins/RendererPreview/RendererOverlay/RemoteRendererOverlay.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { RemoteRendererConnected } from './RemoteRendererConnected.js';
+import { WaitingForRenderer } from './WaitingForRenderer.js';
+export function RemoteRendererOverlay({ rendererConnected }) {
+    return rendererConnected ? (React.createElement(RemoteRendererConnected, null)) : (React.createElement(WaitingForRenderer, null));
+}

package/dist/plugins/RendererPreview/RendererOverlay/RendererOverlay.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { RuntimeStatus } from '../spec.js';
+type Props = {
+    runtimeStatus: RuntimeStatus;
+};
+export declare function RendererOverlay({ runtimeStatus }: Props): JSX.Element | null;
+export {};

package/dist/plugins/RendererPreview/RendererOverlay/RendererOverlay.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { WaitingForRenderer } from './WaitingForRenderer.js';
+export function RendererOverlay({ runtimeStatus }) {
+    if (runtimeStatus === 'pending') {
+        return React.createElement(WaitingForRenderer, null);
+    }
+    // No render overlay is shown in both "connected" and "error" states. In the
+    // latter case, the renderer will communicate the error using its own
+    // framework-specific UI.
+    return null;
+}

package/dist/plugins/RendererPreview/RendererOverlay/WaitingForRenderer.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function WaitingForRenderer(): JSX.Element;

package/dist/plugins/RendererPreview/RendererOverlay/WaitingForRenderer.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { DelayRender } from 'react-cosmos-core';
+import styled from 'styled-components';
+import { grey144 } from '../../../style/colors.js';
+import { RendererOverlayContainer, RendererOverlayIconWrapper, RendererOverlayMessage, } from './rendererOverlayShared.js';
+export function WaitingForRenderer() {
+    return (React.createElement(DelayRender, { delay: 500 },
+        React.createElement(RendererOverlayContainer, null,
+            React.createElement(RendererOverlayIconWrapper, null,
+                React.createElement(Loader, null)),
+            React.createElement(RendererOverlayMessage, null, "Waiting for renderer..."))));
+}
+// Copied from https://codepen.io/bernethe/pen/dorozd
+const Loader = styled.div `
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  position: relative;
+
+  :before,
+  :after {
+    content: '';
+    box-sizing: border-box;
+    border: 1px ${grey144} solid;
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0px;
+  }
+
+  :before {
+    transform: scale(1, 1);
+    opacity: 1;
+    animation: waveOuter 1.5s infinite linear;
+  }
+
+  :after {
+    transform: scale(0, 0);
+    opacity: 0;
+    animation: waveInner 1.5s infinite linear;
+  }
+
+  @keyframes waveOuter {
+    from {
+      -webkit-transform: scale(1, 1);
+      opacity: 1;
+    }
+    to {
+      -webkit-transform: scale(1.5, 1.5);
+      opacity: 0;
+    }
+  }
+
+  @keyframes waveInner {
+    from {
+      transform: scale(0.5, 0.5);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1, 1);
+      opacity: 1;
+    }
+  }
+`;

package/dist/plugins/RendererPreview/RendererOverlay/rendererOverlayShared.d.ts

@@ -0,0 +1,3 @@
+export declare const RendererOverlayContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RendererOverlayIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RendererOverlayMessage: import("styled-components").StyledComponent<"p", any, {}, never>;

package/dist/plugins/RendererPreview/RendererOverlay/rendererOverlayShared.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { createGreyColor, grey192 } from '../../../style/colors.js';
+export const RendererOverlayContainer = styled.div `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: ${createGreyColor(8, 0.9)};
+  border-radius: 3px;
+  height: 116px;
+  padding: 0 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+`;
+export const RendererOverlayIconWrapper = styled.div `
+  height: 76px;
+  display: flex;
+  align-items: center;
+`;
+export const RendererOverlayMessage = styled.p `
+  margin-bottom: 16px;
+  color: ${grey192};
+  text-transform: uppercase;
+  white-space: nowrap;
+`;

package/dist/plugins/RendererPreview/RendererPreview.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
+import { RuntimeStatus } from './spec.js';
 export type OnIframeRef = (elRef: null | HTMLIFrameElement) => void;
 type Props = {
     rendererUrl: null | string;
+    rendererConnected: boolean;
+    runtimeStatus: RuntimeStatus;
     onIframeRef: OnIframeRef;
 };
 export declare const RendererPreview: React.NamedExoticComponent<Props>;

package/dist/plugins/RendererPreview/RendererPreview.js

@@ -1,15 +1,22 @@
 import React from 'react';
+import { createRendererUrl } from 'react-cosmos-core';
 import { Slot } from 'react-plugin';
 import styled from 'styled-components';
-export const RendererPreview = React.memo(function RendererPreview({ rendererUrl, onIframeRef, }) {
+import { RemoteRendererOverlay } from './RendererOverlay/RemoteRendererOverlay.js';
+import { RendererOverlay } from './RendererOverlay/RendererOverlay.js';
+export const RendererPreview = React.memo(function RendererPreview({ rendererUrl, rendererConnected, runtimeStatus, onIframeRef, }) {
     if (!rendererUrl) {
-        return null;
+        // This code path is used when Cosmos is in React Native mode
+        return (React.createElement(Container, null,
+            React.createElement(RemoteRendererOverlay, { rendererConnected: rendererConnected })));
     }
     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 `
+  position: relative;
   width: 100%;
   height: 100%;
   background-color: #fff;

package/dist/plugins/RendererPreview/handleRendererRequests.js

@@ -34,7 +34,7 @@ export function createRendererRequestHandler() {
                                 id: notificationId,
                                 type: 'info',
                                 title: 'Renderer iframe location changed',
-                                info: `Reload or select another fixture to reset your preview.`,
+                                info: `Select a fixture to reset your preview.`,
                             });
                         }
                         else {
@@ -59,11 +59,12 @@ function iframeLocationChanged(iframeWindow, iframeSrc) {
         return false;
     try {
         const { href } = iframeWindow.location;
-        const locationWithoutHash = href.split('#')[0];
-        return (locationWithoutHash !== iframeSrc &&
-            // Some static servers strip .html extensions automatically
-            // https://github.com/zeit/serve-handler/tree/ce35fcd4e1c67356348f4735eed88fb084af9b43#cleanurls-booleanarray
-            locationWithoutHash !== iframeSrc.replace(/\.html$/, ''));
+        return (
+        // Don't register a location change when renderer searchParams change
+        !href.startsWith(
+        // Some static servers strip .html extensions automatically
+        // https://github.com/zeit/serve-handler/tree/ce35fcd4e1c67356348f4735eed88fb084af9b43#cleanurls-booleanarray
+        iframeSrc.replace(/\.html$/, '')));
     }
     catch (err) {
         // An exception is thrown when trying to access the location of a