react-cosmos-ui - npm Package Compare versions

Comparing version 6.0.0-canary.a552ff02.9 to 6.0.0-canary.a7a7dfc.0

dist/components/ValueInputTree/ValueInput/StringValueInput.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useFocus } from '../../../hooks/useFocus.js';
@@ -8,5 +8,19 @@ import { blue, grey248, grey8 } from '../../../style/colors.js';
     const { focused, onFocus, onBlur } = useFocus();
-    const onInputChange = React.useCallback((e) => onChange(e.currentTarget.value), [onChange]);
+    // The data state is duplicated locally to solve the jumping cursor bug
+    // that occurs in controlled React inputs that don't immediately re-render
+    // with the new input value on change (because they await for the parent to
+    // propagate the changed value back down).
+    // https://github.com/facebook/react/issues/955
+    // https://github.com/react-cosmos/react-cosmos/issues/1372
+    const [localData, setLocalData] = useState(data);
+    useEffect(() => {
+        if (!focused)
+            setLocalData(data);
+    }, [data, focused]);
+    const onInputChange = React.useCallback((e) => {
+        setLocalData(e.currentTarget.value);
+        onChange(e.currentTarget.value);
+    }, [onChange]);
     // Mirror textarea behavior and add an extra row after user adds a new line
-    const mirrorText = focused ? data.replace(/\n$/, `\n `) : data;
+    const mirrorText = focused ? localData.replace(/\n$/, `\n `) : localData;
     return (React.createElement(React.Fragment, null,
@@ -17,4 +31,4 @@ React.createElement(Label, { title: name, htmlFor: id }, name),
                 React.createElement(TextContainer, null,
-                    React.createElement(TextMirror, { minWidth: 64, focused: focused }, data.length > 0 || focused ? mirrorText : React.createElement("em", null, "empty")),
-                    React.createElement(TextField, { rows: 1, id: id, value: data, focused: focused, color: grey248, onChange: onInputChange, onFocus: onFocus, onBlur: onBlur }))))));
+                    React.createElement(TextMirror, { minWidth: 64, focused: focused }, localData.length > 0 || focused ? mirrorText : React.createElement("em", null, "empty")),
+                    React.createElement(TextField, { rows: 1, id: id, value: localData, focused: focused, color: grey248, onChange: onInputChange, onFocus: onFocus, onBlur: onBlur }))))));
 }

dist/index.d.ts

@@ -6,3 +6,2 @@ export * from './components/buttons/index.js';
 export * from './plugins/ClassStatePanel/spec.js';
-export * from './plugins/ContentOverlay/spec.js';
 export * from './plugins/ControlPanel/spec.js';
@@ -9,0 +8,0 @@ export * from './plugins/ControlSelect/spec.js';

dist/index.js

@@ -6,3 +6,2 @@ export * from './components/buttons/index.js';
 export * from './plugins/ClassStatePanel/spec.js';
-export * from './plugins/ContentOverlay/spec.js';
 export * from './plugins/ControlPanel/spec.js';
@@ -9,0 +8,0 @@ export * from './plugins/ControlSelect/spec.js';

dist/playground.js

@@ -31,7 +31,18 @@ import React from 'react';
     console.log(`[Cosmos] Loading plugin script at ${scriptPath}`);
-    // Handle both absolute (dev server) and relative paths (static export)
+    // Paths are absolute with the dev server, and relative with static
+    // exports. Why aren't they always relative? Because in dev mode
+    // the plugins could be loaded from folders outside the project rootDir,
+    // for example when using a monorepo. In that case relative paths would
+    // have to contain "../" segments, which are not allowed in URLs, and
+    // for this reason we pass full paths when using the dev server.
     const normalizedPath = scriptPath.startsWith('/')
         ? scriptPath
         : `/${scriptPath}`;
-    await import(/* webpackIgnore: true */ `./_plugin${normalizedPath}`);
+    try {
+        await import(/* webpackIgnore: true */ `./_plugin${normalizedPath}`);
+    }
+    catch (err) {
+        console.log(`[Cosmos] Failed to load plugin script ${scriptPath}`);
+        console.log(err);
+    }
 }

dist/plugins/FixtureSearch/FixtureSearchHeader.d.ts

 type Props = {
-    validFixtureSelected: boolean;
+    fixtureSelected: boolean;
     onOpen: () => unknown;
     onCloseNav: () => unknown;
 };
-export declare function FixtureSearchHeader({ validFixtureSelected, onOpen, onCloseNav, }: Props): JSX.Element;
+export declare function FixtureSearchHeader({ fixtureSelected, onOpen, onCloseNav, }: Props): JSX.Element;
 export {};

dist/plugins/FixtureSearch/FixtureSearchHeader.js

@@ -7,3 +7,3 @@ import React from 'react';
 import { blue, grey160, grey32, white10 } from '../../style/colors.js';
-export function FixtureSearchHeader({ validFixtureSelected, onOpen, onCloseNav, }) {
+export function FixtureSearchHeader({ fixtureSelected, onOpen, onCloseNav, }) {
     return (React.createElement(Container, null,
@@ -17,3 +17,3 @@ React.createElement(SearchButton, { onClick: onOpen },
         React.createElement(NavButtonContainer, null,
-            React.createElement(IconButton32, { icon: React.createElement(ChevronLeftIcon, null), title: "Hide fixture list", disabled: !validFixtureSelected, selected: false, onClick: onCloseNav }))));
+            React.createElement(IconButton32, { icon: React.createElement(ChevronLeftIcon, null), title: "Hide fixture list", disabled: !fixtureSelected, selected: false, onClick: onCloseNav }))));
 }
@@ -20,0 +20,0 @@ const Container = styled.div `

dist/plugins/FixtureSearch/index.js

@@ -21,2 +21,3 @@ import React from 'react';
     const { getMethodsOf } = pluginContext;
+    const router = getMethodsOf('router');
     const rendererCore = getMethodsOf('rendererCore');
@@ -30,3 +31,3 @@ const fixtures = rendererCore.getFixtures();
     }
-    return (React.createElement(FixtureSearchHeader, { validFixtureSelected: rendererCore.isValidFixtureSelected(), onOpen: onOpen, onCloseNav: onCloseNav }));
+    return (React.createElement(FixtureSearchHeader, { fixtureSelected: router.getSelectedFixtureId() !== null, onOpen: onOpen, onCloseNav: onCloseNav }));
 });
@@ -33,0 +34,0 @@ namedPlug('global', 'fixtureSearch', ({ pluginContext }) => {

dist/plugins/FixtureTree/FixtureTree/FixtureButton.d.ts

@@ -5,3 +5,3 @@ import { RefObject } from 'react';
     name: string;
-    fixtureId: FixtureId;
+    fixturePath: string;
     indentLevel: number;
@@ -12,3 +12,3 @@ selected: boolean;
 };
-export declare function FixtureButton({ name, fixtureId, indentLevel, selected, selectedRef, onSelect, }: Props): JSX.Element;
+export declare function FixtureButton({ name, fixturePath, indentLevel, selected, selectedRef, onSelect, }: Props): JSX.Element;
 export {};

dist/plugins/FixtureTree/FixtureTree/FixtureButton.js

@@ -6,4 +6,4 @@ import React from 'react';
 import { FixtureTreeItem } from './FixtureTreeItem.js';
-export function FixtureButton({ name, fixtureId, indentLevel, selected, selectedRef, onSelect, }) {
-    return (React.createElement(FixtureLink, { fixtureId: fixtureId, onSelect: onSelect },
+export function FixtureButton({ name, fixturePath, indentLevel, selected, selectedRef, onSelect, }) {
+    return (React.createElement(FixtureLink, { fixtureId: { path: fixturePath }, onSelect: onSelect },
         React.createElement(FixtureTreeItem, { ref: selected ? selectedRef : undefined, indentLevel: indentLevel, selected: selected },
@@ -10,0 +10,0 @@ React.createElement(Name, null, name))));

dist/plugins/FixtureTree/FixtureTree/FixtureTree.js

@@ -1,6 +0,5 @@
-import { isEqual } from 'lodash-es';
 import React from 'react';
 import styled from 'styled-components';
 import { TreeView } from '../../../components/TreeView.js';
-import { nodeContainsFixtureId, recordContainsFixtureId, } from '../../../shared/fixtureTree.js';
+import { fixtureTreeNodeContainsFixtureId } from '../../../shared/fixtureTree.js';
 import { grey32 } from '../../../style/colors.js';
@@ -15,9 +14,8 @@ import { FixtureButton } from './FixtureButton.js';
                 if (data.type === 'fixture') {
-                    const selected = isEqual(selectedFixtureId, data.fixtureId);
-                    return (React.createElement(FixtureButton, { name: name, fixtureId: data.fixtureId, indentLevel: parents.length, selected: selected, selectedRef: selectedRef, onSelect: onSelect }));
+                    const selected = selectedFixtureId?.path === data.path;
+                    return (React.createElement(FixtureButton, { name: name, fixturePath: data.path, indentLevel: parents.length, selected: selected, selectedRef: selectedRef, onSelect: onSelect }));
                 }
                 if (data.type === 'multiFixture') {
-                    const selected = selectedFixtureId !== null &&
-                        recordContainsFixtureId(data.fixtureIds, selectedFixtureId);
-                    return (React.createElement(MultiFixtureButton, { name: name, fixtureIds: data.fixtureIds, indentLevel: parents.length, selected: selected, selectedFixtureId: selectedFixtureId, selectedRef: selectedRef, onSelect: onSelect }));
+                    const selected = selectedFixtureId?.path === data.path;
+                    return (React.createElement(MultiFixtureButton, { name: name, fixturePath: data.path, fixtureNames: data.names, indentLevel: parents.length, selected: selected, selectedFixtureId: selectedFixtureId, selectedRef: selectedRef, onSelect: onSelect }));
                 }
@@ -28,3 +26,3 @@ if (!children)
                     selectedFixtureId !== null &&
-                    nodeContainsFixtureId(node, selectedFixtureId);
+                    fixtureTreeNodeContainsFixtureId(node, selectedFixtureId);
                 return (React.createElement(FixtureDir, { name: name, indentLevel: parents.length, expanded: expanded, selected: selected, onToggle: onToggle }));
@@ -31,0 +29,0 @@ } })));

dist/plugins/FixtureTree/FixtureTree/MultiFixtureButton.d.ts

@@ -5,3 +5,4 @@ import { RefObject } from 'react';
     name: string;
-    fixtureIds: Record<string, FixtureId>;
+    fixturePath: string;
+    fixtureNames: string[];
     indentLevel: number;
@@ -13,3 +14,3 @@ selected: boolean;
 };
-export declare function MultiFixtureButton({ name, fixtureIds, indentLevel, selected, selectedFixtureId, selectedRef, onSelect, }: Props): JSX.Element | null;
+export declare function MultiFixtureButton({ name, fixturePath, fixtureNames, indentLevel, selected, selectedFixtureId, selectedRef, onSelect, }: Props): JSX.Element;
 export {};

dist/plugins/FixtureTree/FixtureTree/MultiFixtureButton.js

@@ -1,2 +0,1 @@
-import { isEqual } from 'lodash-es';
 import React from 'react';
@@ -8,9 +7,5 @@ import styled from 'styled-components';
 import { MultiFixtureChildButton } from './MultiFixtureChildButton.js';
-export function MultiFixtureButton({ name, fixtureIds, indentLevel, selected, selectedFixtureId, selectedRef, onSelect, }) {
-    const fixtureNames = Object.keys(fixtureIds);
-    const firstFixtureId = fixtureIds[fixtureNames[0]];
-    if (!firstFixtureId)
-        return null;
+export function MultiFixtureButton({ name, fixturePath, fixtureNames, indentLevel, selected, selectedFixtureId, selectedRef, onSelect, }) {
     if (!selected)
-        return (React.createElement(FixtureLink, { fixtureId: firstFixtureId, onSelect: onSelect },
+        return (React.createElement(FixtureLink, { fixtureId: { path: fixturePath }, onSelect: onSelect },
             React.createElement(FixtureTreeItem, { indentLevel: indentLevel, selected: false },
@@ -23,5 +18,10 @@ React.createElement(Name, null, name),
             React.createElement(Count, null, fixtureNames.length)),
-        fixtureNames.map(fixtureName => {
-            const fixtureId = fixtureIds[fixtureName];
-            const childSelected = isEqual(fixtureId, selectedFixtureId);
+        fixtureNames.map((fixtureName, index) => {
+            const fixtureId = { path: fixturePath, name: fixtureName };
+            // Select first child when only the path of a multi fixture is selected
+            const childSelected = selectedFixtureId !== null &&
+                selectedFixtureId.path === fixturePath &&
+                (selectedFixtureId.name === undefined
+                    ? index === 0
+                    : fixtureName === selectedFixtureId.name);
             return (React.createElement(MultiFixtureChildButton, { key: fixtureName, name: fixtureName, fixtureId: fixtureId, indentLevel: indentLevel + 1, selected: childSelected, selectedRef: selectedRef, onSelect: onSelect }));
@@ -28,0 +28,0 @@ }),

dist/plugins/FixtureTree/FixtureTreeContainer.d.ts

@@ -7,3 +7,2 @@ import { FixtureId, FixtureList } from 'react-cosmos-core';
     selectedFixtureId: null | FixtureId;
-    rendererConnected: boolean;
     fixtures: FixtureList;
@@ -14,3 +13,3 @@ expansion: TreeExpansion;
 };
-export declare function FixtureTreeContainer({ fixturesDir, fixtureFileSuffix, selectedFixtureId, rendererConnected, fixtures, expansion, selectFixture, setExpansion, }: Props): JSX.Element;
+export declare function FixtureTreeContainer({ fixturesDir, fixtureFileSuffix, selectedFixtureId, fixtures, expansion, selectFixture, setExpansion, }: Props): JSX.Element;
 export {};

dist/plugins/FixtureTree/FixtureTreeContainer.js

@@ -9,7 +9,5 @@ import React, { useMemo } from 'react';
 import { useScrollToSelected } from './useScrollToSelected.js';
-export function FixtureTreeContainer({ fixturesDir, fixtureFileSuffix, selectedFixtureId, rendererConnected, fixtures, expansion, selectFixture, setExpansion, }) {
+export function FixtureTreeContainer({ fixturesDir, fixtureFileSuffix, selectedFixtureId, fixtures, expansion, selectFixture, setExpansion, }) {
     const rootNode = useMemo(() => createFixtureTree({ fixtures, fixturesDir, fixtureFileSuffix }), [fixtures, fixturesDir, fixtureFileSuffix]);
     const { containerRef, selectedRef } = useScrollToSelected(selectedFixtureId);
-    if (!rendererConnected)
-        return React.createElement(TreeContainer, null);
     if (Object.keys(fixtures).length === 0) {
@@ -16,0 +14,0 @@ return (React.createElement(TreeContainer, null,

dist/plugins/FixtureTree/index.js

@@ -21,3 +21,3 @@ import React, { useCallback } from 'react';
     const setExpansionMemo = useCallback((newExpansion) => setTreeExpansion(storage, newExpansion), [storage]);
-    return (React.createElement(FixtureTreeContainer, { fixturesDir: fixturesDir, fixtureFileSuffix: fixtureFileSuffix, selectedFixtureId: router.getSelectedFixtureId(), rendererConnected: rendererCore.isRendererConnected(), fixtures: rendererCore.getFixtures(), expansion: expansion, selectFixture: router.selectFixture, setExpansion: setExpansionMemo }));
+    return (React.createElement(FixtureTreeContainer, { fixturesDir: fixturesDir, fixtureFileSuffix: fixtureFileSuffix, selectedFixtureId: router.getSelectedFixtureId(), fixtures: rendererCore.getFixtures(), expansion: expansion, selectFixture: router.selectFixture, setExpansion: setExpansionMemo }));
 });
@@ -24,0 +24,0 @@ export { register };

dist/plugins/FixtureTree/revealFixture.js

 import { createFixtureTree, } from 'react-cosmos-core';
-import { nodeContainsFixtureId } from '../../shared/fixtureTree.js';
+import { fixtureTreeNodeContainsFixtureId } from '../../shared/fixtureTree.js';
 import { getTreeExpansion, setTreeExpansion, } from './shared.js';
@@ -35,3 +35,3 @@ export function revealFixture(context, fixtureId) {
         if (childNode.data.type !== 'fileDir') {
-            if (nodeContainsFixtureId(childNode, fixtureId))
+            if (fixtureTreeNodeContainsFixtureId(childNode, fixtureId))
                 return parents;
@@ -38,0 +38,0 @@ }

dist/plugins/FullScreenButton/index.js

 import React from 'react';
+import { stringifyRendererUrlQuery } from 'react-cosmos-core';
 import { createPlugin } from 'react-plugin';
-import { stringifyRendererUrlQuery } from 'react-cosmos-core';
 import { FullScreenButton } from './FullScreenButton.js';
@@ -5,0 +5,0 @@ const { namedPlug, register } = createPlugin({

dist/plugins/pluginEntry.d.ts

 import './BuildNotifications/index.js';
 import './ClassStatePanel/index.js';
-import './ContentOverlay/index.js';
 import './ControlPanel/index.js';
@@ -5,0 +4,0 @@ import './ControlSelect/index.js';

dist/plugins/pluginEntry.js

 import { enablePlugin } from 'react-plugin';
 import './BuildNotifications/index.js';
 import './ClassStatePanel/index.js';
-import './ContentOverlay/index.js';
 import './ControlPanel/index.js';
@@ -6,0 +5,0 @@ import './ControlSelect/index.js';

dist/plugins/RendererCore/index.js

 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({
+const { on, register, onLoad } = createPlugin({
     name: 'rendererCore',
+    defaultConfig: {
+        fixtures: {},
+    },
     initialState: {
@@ -20,3 +22,2 @@ connectedRendererIds: [],
         isRendererConnected,
-        isValidFixtureSelected,
         setFixtureState,
@@ -27,2 +28,6 @@ selectPrimaryRenderer,
 });
+onLoad(({ getConfig, setState }) => {
+    const { fixtures } = getConfig();
+    setState(prevState => ({ ...prevState, fixtures }));
+});
 on('router', { fixtureChange: onRouterFixtureChange });
@@ -29,0 +34,0 @@ export { register };

dist/plugins/RendererCore/receiveResponse/index.js

@@ -0,1 +1,2 @@
+import { receiveFixtureListItemUpdateResponse } from './fixtureListItemUpdate.js';
 import { receiveFixtureListUpdateResponse } from './fixtureListUpdate.js';
@@ -13,2 +14,4 @@ import { receiveFixtureStateChangeResponse } from './fixtureStateChange.js';
             return receiveFixtureListUpdateResponse(context, rendererResponse);
+        case 'fixtureListItemUpdate':
+            return receiveFixtureListItemUpdateResponse(context, rendererResponse);
         case 'fixtureStateChange':
@@ -15,0 +18,0 @@ return receiveFixtureStateChangeResponse(context, rendererResponse);

dist/plugins/RendererCore/spec.d.ts

 import { FixtureList, FixtureState, MessageType, RendererId, StateUpdater } from 'react-cosmos-core';
 export type RendererCoreSpec = {
     name: 'rendererCore';
+    config: {
+        fixtures: FixtureList;
+    };
     state: {
@@ -16,3 +19,2 @@ connectedRendererIds: RendererId[];
         isRendererConnected(): boolean;
-        isValidFixtureSelected(): boolean;
         setFixtureState(stateUpdater: StateUpdater<FixtureState>): void;
@@ -19,0 +21,0 @@ selectPrimaryRenderer(primaryRendererId: RendererId): void;

dist/plugins/RendererPreview/checkRendererStatus.js

@@ -11,3 +11,3 @@ export function checkRendererStatus(context, rendererUrl) {
     let unmounted = false;
-    fetch(rendererUrl, { credentials: 'include' })
+    fetch(rendererUrl, { credentials: 'same-origin' })
         .then(({ status }) => {
@@ -14,0 +14,0 @@ if (!unmounted) {

dist/plugins/RendererPreview/index.js

@@ -36,3 +36,3 @@ import React from 'react';
     }
-    return (React.createElement(RendererPreview, { rendererUrl: getRendererUrl(pluginContext), onIframeRef: handleIframeRef }));
+    return (React.createElement(RendererPreview, { rendererUrl: getRendererUrl(pluginContext), urlStatus: pluginContext.getState().urlStatus, runtimeStatus: pluginContext.getState().runtimeStatus, onIframeRef: handleIframeRef }));
 });
@@ -39,0 +39,0 @@ export { register };

dist/plugins/RendererPreview/RendererPreview.d.ts

 import React from 'react';
+import { RuntimeStatus, UrlStatus } from './spec.js';
 export type OnIframeRef = (elRef: null | HTMLIFrameElement) => void;
 type Props = {
     rendererUrl: null | string;
+    urlStatus: UrlStatus;
+    runtimeStatus: RuntimeStatus;
     onIframeRef: OnIframeRef;
@@ -6,0 +9,0 @@ };

dist/plugins/RendererPreview/RendererPreview.js

 import React from 'react';
 import { Slot } from 'react-plugin';
 import styled from 'styled-components';
-export const RendererPreview = React.memo(function RendererPreview({ rendererUrl, onIframeRef, }) {
+import { rendererBg } from '../../style/vars.js';
+import { RendererOverlay } from './RendererOverlay/RendererOverlay.js';
+import { WaitingForRenderer } from './RendererOverlay/WaitingForRenderer.js';
+export const RendererPreview = React.memo(function RendererPreview({ rendererUrl, urlStatus, runtimeStatus, onIframeRef, }) {
     if (!rendererUrl) {
-        return null;
+        // This code path is used when Cosmos is in React Native mode
+        return (React.createElement(Container, null, runtimeStatus === 'pending' && React.createElement(WaitingForRenderer, null)));
     }
     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: rendererUrl, frameBorder: 0, allow: "clipboard-write *" }),
+            React.createElement(RendererOverlay, { rendererPreviewUrlStatus: urlStatus, rendererPreviewRuntimeStatus: runtimeStatus }))));
 });
 const Container = styled.div `
+  position: relative;
   width: 100%;
   height: 100%;
   background-color: #fff;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23f1f1f1' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  background-image: ${rendererBg};
 `;
@@ -18,0 +24,0 @@ const Iframe = styled.iframe `

dist/plugins/RendererPreview/shared.d.ts

 import { PluginContext } from 'react-plugin';
-import { RendererPreviewSpec } from './spec.js';
-export type UrlStatus = 'unknown' | 'ok' | 'error';
-export type RuntimeStatus = 'pending' | 'connected' | 'error';
+import { RendererPreviewSpec, RuntimeStatus, UrlStatus } from './spec.js';
 export type State = {
@@ -6,0 +4,0 @@ urlStatus: UrlStatus;

dist/plugins/ResponsivePreview/index.js

@@ -13,9 +13,8 @@ import React from 'react';
 plug('rendererPreviewOuter', ({ children, pluginContext }) => {
-    const { getConfig, getMethodsOf } = pluginContext;
+    const { getConfig } = pluginContext;
     const { devices } = getConfig();
-    const rendererCore = getMethodsOf('rendererCore');
     const { enabled, viewport, scaled } = getViewportState(pluginContext);
     const onViewportChange = useViewportChange(pluginContext);
     const onScaledChange = useScaledChange(pluginContext);
-    return (React.createElement(ResponsivePreview, { devices: devices, enabled: enabled, viewport: viewport, scaled: scaled, validFixtureSelected: rendererCore.isValidFixtureSelected(), setViewport: onViewportChange, setScaled: onScaledChange }, children));
+    return (React.createElement(ResponsivePreview, { devices: devices, enabled: enabled, viewport: viewport, scaled: scaled, setViewport: onViewportChange, setScaled: onScaledChange }, children));
 });
@@ -22,0 +21,0 @@ namedPlug('rendererAction', 'responsivePreview', ({ pluginContext }) => {

dist/plugins/ResponsivePreview/ResponsivePreview/ResponsivePreview.d.ts

@@ -9,7 +9,6 @@ import { Dispatch, ReactNode, SetStateAction } from 'react';
     scaled: boolean;
-    validFixtureSelected: boolean;
     setViewport: Dispatch<SetStateAction<ResponsiveViewport>>;
     setScaled: (scaled: boolean) => unknown;
 };
-export declare function ResponsivePreview({ children, devices, enabled, viewport, scaled, validFixtureSelected, setViewport, setScaled, }: Props): JSX.Element;
+export declare function ResponsivePreview({ children, devices, enabled, viewport, scaled, setViewport, setScaled, }: Props): JSX.Element;
 export {};

dist/plugins/ResponsivePreview/ResponsivePreview/ResponsivePreview.js

@@ -8,3 +8,3 @@ import { isEqual } from 'lodash-es';
 import { getStyles, getViewportScaleFactor, responsivePreviewBorderWidth, responsivePreviewPadding, stretchStyle, } from './style.js';
-export function ResponsivePreview({ children, devices, enabled, viewport, scaled, validFixtureSelected, setViewport, setScaled, }) {
+export function ResponsivePreview({ children, devices, enabled, viewport, scaled, setViewport, setScaled, }) {
     const [container, setContainer] = useState(null);
@@ -57,3 +57,3 @@ const onWidthChange = useCallback((width) => setViewport(prevViewport => ({ ...prevViewport, width })), [setViewport]);
     // component instances are preserved and the transition is seamless.
-    if (!validFixtureSelected || !enabled || !container) {
+    if (!enabled || !container) {
         return (React.createElement(Container, null,
@@ -60,0 +60,0 @@ React.createElement("div", { key: "preview", ref: handleContainerRef, style: stretchStyle },

dist/plugins/Root/GlobalHeader.d.ts

@@ -1,9 +0,6 @@
-import { FixtureId } from 'react-cosmos-core';
 type Props = {
-    selectedFixtureId: FixtureId | null;
     rendererConnected: boolean;
-    validFixtureSelected: boolean;
     globalActionOrder: string[];
 };
-export declare function GlobalHeader({ selectedFixtureId, rendererConnected, validFixtureSelected, globalActionOrder, }: Props): JSX.Element;
+export declare function GlobalHeader({ rendererConnected, globalActionOrder }: Props): JSX.Element;
 export {};

dist/plugins/Root/GlobalHeader.js

 import React from 'react';
 import { ArraySlot } from 'react-plugin';
 import styled from 'styled-components';
-import { grey176, grey32, white10 } from '../../style/colors.js';
-export function GlobalHeader({ selectedFixtureId, rendererConnected, validFixtureSelected, globalActionOrder, }) {
-    function getMessage() {
-        if (!rendererConnected) {
-            return React.createElement(Message, null, "Waiting for renderer...");
-        }
-        if (!selectedFixtureId) {
-            return React.createElement(Message, null, "No fixture selected");
-        }
-        if (!validFixtureSelected) {
-            return React.createElement(Message, null, "Fixture not found");
-        }
-        return null;
-    }
+import { grey32, white10 } from '../../style/colors.js';
+export function GlobalHeader({ rendererConnected, globalActionOrder }) {
     return (React.createElement(Container, null,
         React.createElement(Left, null),
-        getMessage(),
         React.createElement(Right, null, rendererConnected && (React.createElement(ArraySlot, { name: "globalAction", plugOrder: globalActionOrder })))));
@@ -52,9 +39,1 @@ }
 `;
-const Message = styled.div `
-  padding: 4px;
-  color: ${grey176};
-  line-height: 24px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-`;

dist/plugins/Root/index.js

 import React from 'react';
 import { createFixtureTree, flattenFixtureTree } from 'react-cosmos-core';
 import { createPlugin } from 'react-plugin';
+import { useWelcomeDismiss } from './HomeOverlay/welcomeDismiss.js';
 import { isNavOpen, openNav } from './navOpen.js';
@@ -44,10 +45,10 @@ import { getNavWidthApi } from './navWidth.js';
     const onTogglePanel = useOpenPanel(pluginContext);
+    const welcomeDismiss = useWelcomeDismiss(pluginContext);
     const { storageCacheReady } = getState();
-    if (!storageCacheReady) {
-        return (React.createElement(Root, { storageCacheReady: false, fixtureItems: [], selectedFixtureId: null, rendererConnected: false, validFixtureSelected: false, fixtureState: {}, navOpen: false, panelOpen: false, navWidth: 0, panelWidth: 0, sidePanelRowOrder: [], globalActionOrder: [], globalOrder: [], navRowOrder: [], fixtureActionOrder: [], rendererActionOrder: [], onToggleNav: () => { }, onTogglePanel: () => { }, onFixtureSelect: () => { }, onFixtureClose: () => { }, onFixtureStateChange: () => { }, setNavWidth: () => { }, setPanelWidth: () => { } }));
-    }
+    if (!storageCacheReady)
+        return null;
     const { navWidth, setNavWidth } = getNavWidthApi(pluginContext);
     const { panelWidth, setPanelWidth } = getPanelWidthApi(pluginContext);
     const { sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, } = getConfig();
-    return (React.createElement(Root, { storageCacheReady: true, fixtureItems: fixtureItems, selectedFixtureId: router.getSelectedFixtureId(), rendererConnected: rendererCore.isRendererConnected(), validFixtureSelected: rendererCore.isValidFixtureSelected(), fixtureState: rendererCore.getFixtureState(), navOpen: isNavOpen(pluginContext), panelOpen: isPanelOpen(pluginContext), navWidth: navWidth, panelWidth: panelWidth, sidePanelRowOrder: sidePanelRowOrder, globalActionOrder: globalActionOrder, globalOrder: globalOrder, navRowOrder: navRowOrder, fixtureActionOrder: fixtureActionOrder, rendererActionOrder: rendererActionOrder, onToggleNav: onToggleNav, onTogglePanel: onTogglePanel, onFixtureSelect: router.selectFixture, onFixtureClose: router.unselectFixture, onFixtureStateChange: rendererCore.setFixtureState, setNavWidth: setNavWidth, setPanelWidth: setPanelWidth }));
+    return (React.createElement(Root, { fixtureItems: fixtureItems, selectedFixtureId: router.getSelectedFixtureId(), rendererConnected: rendererCore.isRendererConnected(), fixtureState: rendererCore.getFixtureState(), navOpen: isNavOpen(pluginContext), panelOpen: isPanelOpen(pluginContext), navWidth: navWidth, panelWidth: panelWidth, sidePanelRowOrder: sidePanelRowOrder, globalActionOrder: globalActionOrder, globalOrder: globalOrder, navRowOrder: navRowOrder, fixtureActionOrder: fixtureActionOrder, rendererActionOrder: rendererActionOrder, onToggleNav: onToggleNav, onTogglePanel: onTogglePanel, onFixtureSelect: router.selectFixture, onFixtureClose: router.unselectFixture, onFixtureStateChange: rendererCore.setFixtureState, setNavWidth: setNavWidth, setPanelWidth: setPanelWidth, welcomeDismissed: welcomeDismiss.isWelcomeDismissed(), onDismissWelcome: welcomeDismiss.onDismissWelcome, onShowWelcome: welcomeDismiss.onShowWelcome }));
 });
@@ -54,0 +55,0 @@ export { register };

dist/plugins/Root/panelOpen.js

 export const PANEL_OPEN_STORAGE_KEY = 'sidePanelOpen';
 const PANEL_OPEN_DEFAULT = true;
 export function isPanelOpen(context) {
-    const { getMethodsOf } = context;
-    const rendererCore = getMethodsOf('rendererCore');
-    if (!rendererCore.isValidFixtureSelected()) {
-        return false;
-    }
     const storage = context.getMethodsOf('storage');
@@ -10,0 +5,0 @@ const open = storage.getItem(PANEL_OPEN_STORAGE_KEY);

dist/plugins/Root/RendererHeader.js

@@ -27,3 +27,8 @@ import { isEqual } from 'lodash-es';
 function findFixtureItemById(fixtureItems, fixtureId) {
-    return fixtureItems.find(fixtureItem => isEqual(fixtureItem.fixtureId, fixtureId));
+    if (fixtureId.name) {
+        return fixtureItems.find(fixtureItem => isEqual(fixtureItem.fixtureId, fixtureId));
+    }
+    // When a multi fixture is selected by path only, the first of its named
+    // fixtures will be selected.
+    return fixtureItems.find(fixtureItem => fixtureItem.fixtureId.path === fixtureId.path);
 }
@@ -30,0 +35,0 @@ function getFixtureName({ name, fileName }) {

dist/plugins/Root/Root.d.ts

 import { FixtureId, FixtureState, FlatFixtureTreeItem, StateUpdater } from 'react-cosmos-core';
 type Props = {
-    storageCacheReady: boolean;
     fixtureItems: FlatFixtureTreeItem[];
     selectedFixtureId: FixtureId | null;
     rendererConnected: boolean;
-    validFixtureSelected: boolean;
     fixtureState: FixtureState;
@@ -26,4 +24,7 @@ navOpen: boolean;
     setPanelWidth: (width: number) => unknown;
+    welcomeDismissed: boolean;
+    onDismissWelcome: () => unknown;
+    onShowWelcome: () => unknown;
 };
-export declare function Root({ storageCacheReady, fixtureItems, selectedFixtureId, rendererConnected, validFixtureSelected, fixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onFixtureSelect, onFixtureClose, onFixtureStateChange, setNavWidth, setPanelWidth, }: Props): JSX.Element;
+export declare function Root({ fixtureItems, selectedFixtureId, rendererConnected, fixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onFixtureSelect, onFixtureClose, onFixtureStateChange, setNavWidth, setPanelWidth, welcomeDismissed, onDismissWelcome, onShowWelcome, }: Props): JSX.Element;
 export {};

dist/plugins/Root/Root.js

@@ -8,5 +8,6 @@ import React from 'react';
 import { GlobalHeader } from './GlobalHeader.js';
+import { HomeOverlay } from './HomeOverlay/HomeOverlay.js';
 import { RendererHeader } from './RendererHeader.js';
 import { SidePanel } from './SidePanel.js';
-export function Root({ storageCacheReady, fixtureItems, selectedFixtureId, rendererConnected, validFixtureSelected, fixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onFixtureSelect, onFixtureClose, onFixtureStateChange, setNavWidth, setPanelWidth, }) {
+export function Root({ fixtureItems, selectedFixtureId, rendererConnected, fixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onFixtureSelect, onFixtureClose, onFixtureStateChange, setNavWidth, setPanelWidth, welcomeDismissed, onDismissWelcome, onShowWelcome, }) {
     const navDrag = useDrag({
@@ -21,6 +22,3 @@ value: navWidth,
     });
-    if (!storageCacheReady) {
-        return React.createElement(Container, null);
-    }
-    const showNav = rendererConnected && (navOpen || !validFixtureSelected);
+    const showNav = navOpen || !selectedFixtureId;
     const dragging = navDrag.dragging || panelDrag.dragging;
@@ -30,17 +28,18 @@ // z-indexes are set here on purpose to show the layer hierarchy at a glance
         showNav && (React.createElement(Draggable, { style: { width: navWidth, zIndex: 2 } },
-            React.createElement(Nav, null, rendererConnected && (React.createElement(NavRowSlot, { slotProps: { onCloseNav: onToggleNav }, plugOrder: navRowOrder }))),
+            React.createElement(Nav, null,
+                React.createElement(NavRowSlot, { slotProps: { onCloseNav: onToggleNav }, plugOrder: navRowOrder })),
             navDrag.dragging && React.createElement(DragOverlay, null),
             React.createElement(NavDragHandle, { ref: navDrag.dragElRef }))),
         React.createElement(MainContainer, { key: "main", style: { zIndex: 1 } },
-            !validFixtureSelected && (React.createElement(GlobalHeader, { selectedFixtureId: selectedFixtureId, rendererConnected: rendererConnected, validFixtureSelected: validFixtureSelected, globalActionOrder: globalActionOrder })),
+            !selectedFixtureId && (React.createElement(GlobalHeader, { rendererConnected: rendererConnected, globalActionOrder: globalActionOrder })),
             React.createElement(RendererContainer, { key: "rendererContainer" },
-                selectedFixtureId && validFixtureSelected && (React.createElement(RendererHeader, { fixtureItems: fixtureItems, fixtureId: selectedFixtureId, navOpen: navOpen, panelOpen: panelOpen, fixtureActionOrder: fixtureActionOrder, rendererActionOrder: rendererActionOrder, onOpenNav: onToggleNav, onTogglePanel: onTogglePanel, onFixtureSelect: onFixtureSelect, onClose: onFixtureClose })),
+                selectedFixtureId && (React.createElement(RendererHeader, { fixtureItems: fixtureItems, fixtureId: selectedFixtureId, navOpen: navOpen, panelOpen: panelOpen, fixtureActionOrder: fixtureActionOrder, rendererActionOrder: rendererActionOrder, onOpenNav: onToggleNav, onTogglePanel: onTogglePanel, onFixtureSelect: onFixtureSelect, onClose: onFixtureClose })),
                 React.createElement(RendererBody, { key: "rendererBody" },
                     React.createElement(Slot, { name: "rendererPreview" }),
                     dragging && React.createElement(DragOverlay, null),
-                    panelOpen && selectedFixtureId && (React.createElement(ControlPanelContainer, { style: { width: panelWidth, zIndex: 3 } },
+                    selectedFixtureId && panelOpen && (React.createElement(ControlPanelContainer, { style: { width: panelWidth, zIndex: 3 } },
                         React.createElement(SidePanel, { fixtureId: selectedFixtureId, fixtureState: fixtureState, sidePanelRowOrder: sidePanelRowOrder, onFixtureStateChange: onFixtureStateChange }),
                         panelDrag.dragging && React.createElement(DragOverlay, null),
                         React.createElement(PanelDragHandle, { ref: panelDrag.dragElRef })))),
-                React.createElement(Slot, { name: "contentOverlay" }))),
+                !selectedFixtureId && (React.createElement(HomeOverlay, { welcomeDismissed: welcomeDismissed, onDismissWelcome: onDismissWelcome, onShowWelcome: onShowWelcome })))),
         React.createElement("div", { style: { zIndex: 4 } },
@@ -47,0 +46,0 @@ React.createElement(ArraySlot, { name: "global", plugOrder: globalOrder }))));

dist/shared/fixtureTree.d.ts

 import { FixtureId, FixtureTreeNode } from 'react-cosmos-core';
-export declare function recordContainsFixtureId(fixtureIds: Record<string, FixtureId>, fixtureId: FixtureId): boolean;
-export declare function nodeContainsFixtureId({ data, children }: FixtureTreeNode, fixtureId: FixtureId): boolean;
+export declare function fixtureTreeNodeContainsFixtureId({ data, children }: FixtureTreeNode, fixtureId: FixtureId): boolean;

dist/shared/fixtureTree.js

@@ -1,12 +0,7 @@
-import { isEqual } from 'lodash-es';
-export function recordContainsFixtureId(fixtureIds, fixtureId) {
-    return Object.keys(fixtureIds).some(fixtureName => isEqual(fixtureIds[fixtureName], fixtureId));
-}
-export function nodeContainsFixtureId({ data, children }, fixtureId) {
-    if (data.type === 'fixture')
-        return isEqual(data.fixtureId, fixtureId);
-    if (data.type === 'multiFixture')
-        return recordContainsFixtureId(data.fixtureIds, fixtureId);
+export function fixtureTreeNodeContainsFixtureId({ data, children }, fixtureId) {
+    if (data.type === 'fixture' || data.type === 'multiFixture') {
+        return data.path === fixtureId.path;
+    }
     return (children !== undefined &&
-        Object.keys(children).some(childName => nodeContainsFixtureId(children[childName], fixtureId)));
+        Object.keys(children).some(childName => fixtureTreeNodeContainsFixtureId(children[childName], fixtureId)));
 }

dist/style/vars.d.ts

 export declare const fontFamily = "-apple-system, BlinkMacSystemFont, Ubuntu, 'Helvetica Neue', Helvetica, sans-serif";
 export declare const quick = 0.32;
+export declare const rendererBg = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23f1f1f1' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")";

dist/style/vars.js

 export const fontFamily = `-apple-system, BlinkMacSystemFont, Ubuntu, 'Helvetica Neue', Helvetica, sans-serif`;
 export const quick = 0.32;
+export const rendererBg = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23f1f1f1' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`;

dist/testHelpers/pluginMocks.d.ts

@@ -41,3 +41,2 @@ /// <reference types="jest" />
     isRendererConnected(): boolean;
-    isValidFixtureSelected(): boolean;
     setFixtureState(stateUpdater: import("react-cosmos-core").StateUpdater<import("react-cosmos-core").FixtureState>): void;
@@ -86,3 +85,2 @@ selectPrimaryRenderer(primaryRendererId: string): void;
     isRendererConnected: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => boolean);
-    isValidFixtureSelected: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => boolean);
     setFixtureState: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>, stateUpdater: import("react-cosmos-core").StateUpdater<import("react-cosmos-core").FixtureState>) => void);
@@ -89,0 +87,0 @@ selectPrimaryRenderer: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>, primaryRendererId: string) => void);

dist/testHelpers/pluginMocks.js

@@ -78,3 +78,2 @@ import { getPluginContext, } from 'react-plugin';
         isRendererConnected: jest.fn(),
-        isValidFixtureSelected: jest.fn(),
         setFixtureState: jest.fn(),
@@ -81,0 +80,0 @@ selectPrimaryRenderer: jest.fn(),

package.json

 {
   "name": "react-cosmos-ui",
-  "version": "6.0.0-canary.a552ff02.9+5304dfbb",
+  "version": "6.0.0-canary.a7a7dfc.0+a7a7dfc",
   "description": "React Cosmos UI",
@@ -13,5 +13,8 @@ "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos-ui",
   ],
+  "scripts": {
+    "playground": "cosmos"
+  },
   "dependencies": {
     "lodash-es": "^4.17.21",
-    "react-cosmos-core": "^6.0.0-canary.a552ff02.9+5304dfbb"
+    "react-cosmos-core": "6.0.0-canary.a7a7dfc.0+a7a7dfc"
   },
@@ -22,5 +25,5 @@ "devDependencies": {
     "react-plugin": "^3.0.0-alpha.4",
-    "styled-components": "^5.3.6"
+    "styled-components": "^5.3.8"
   },
-  "gitHead": "5304dfbb885b206f595a76f2fca0baab7cc20b78"
+  "gitHead": "a7a7dfc3b5e4f396f4bd5fa5f0fc418ecd341e56"
 }

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2910750

increased by0.05%

Lines of code

10384

increased by0.05%

Number of low supply chain risk alerts

27

decreased by-3.57%

Dependency changes

• - Removedjs-base64@3.7.7(transitive)

• - Removedreact-cosmos-core@6.2.0(transitive)

• - Removedreact-is@18.3.1(transitive)

• Updatedreact-cosmos-core@6.0.0-canary.a7a7dfc.0+a7a7dfc