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

package/dist/utils/string.d.ts

@@ -1,5 +1,3 @@
 export declare function replaceKeys(str: string, map: {
     [key: string]: string;
 }): string;
-export declare function removeLeadingSlash(fromPath: string): string;
-export declare function removeLeadingDot(fromPath: string): string;

package/dist/utils/string.js

@@ -1,9 +1,3 @@
 export function replaceKeys(str, map) {
     return Object.keys(map).reduce((res, key) => res.replace(key, map[key]), str);
 }
-export function removeLeadingSlash(fromPath) {
-    return fromPath.replace(/^\/+/, '');
-}
-export function removeLeadingDot(fromPath) {
-    return fromPath.indexOf('.') === 0 ? fromPath.slice(1) : fromPath;
-}

package/dist/utils/window.d.ts

@@ -0,0 +1 @@
+export declare function isInsideWindowIframe(): boolean;

package/dist/utils/window.js

@@ -0,0 +1,8 @@
+export function isInsideWindowIframe() {
+    try {
+        return window.self !== window.parent;
+    }
+    catch (e) {
+        return true;
+    }
+}

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "react-cosmos-core",
-  "version": "6.0.0-alpha.9",
+  "version": "6.0.0-beta.2",
   "description": "React Cosmos Core",
   "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos-core",
   "license": "MIT",
   "type": "module",
-  "main": "./dist/index.js",
   "sideEffects": false,
+  "main": "./dist/index.js",
   "dependencies": {
+    "js-base64": "^3.7.5",
     "lodash-es": "^4.17.21",
     "react-is": "^18.2.0"
   },
-  "gitHead": "b155b223f904f5cc29e2f13ac79ab7c4b302ed2b"
+  "gitHead": "f3e3893b0439132e083228f312c62e4379f39762"
 }

package/dist/fixture/FixtureContext.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { FixtureState, SetFixtureState } from '../fixtureState/types.js';
-export type FixtureContextValue = {
-    fixtureState: FixtureState;
-    setFixtureState: SetFixtureState;
-};
-export declare const FixtureContext: import("react").Context<FixtureContextValue>;

package/dist/fixture/FixtureContext.js

@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-export const FixtureContext = createContext({
-    fixtureState: {},
-    setFixtureState: () => { },
-});

package/dist/fixture/Viewport.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-type Props = {
-    children: React.ReactNode;
-    width: number;
-    height: number;
-};
-export declare const Viewport: React.FC<Props>;
-export {};

package/dist/fixture/Viewport.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import { FixtureContext } from './FixtureContext.js';
-// This awkward declaration is required because of the cosmosCapture static
-// property, which makes TS generate a declaration for Viewport that doesn't
-// conform to React's component interface. Without this explicit type TS would
-// allow clients to pass any props to Viewport.
-export const Viewport = function Viewport({ children, width, height, }) {
-    const { setFixtureState } = React.useContext(FixtureContext);
-    React.useEffect(() => {
-        setFixtureState(fixtureState => ({
-            ...fixtureState,
-            viewport: { width, height },
-        }));
-    }, [setFixtureState, width, height]);
-    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
-    return React.createElement(React.Fragment, null, children);
-};
-// @ts-ignore
-Viewport.cosmosCapture = false;

package/dist/fixture/useSelect/index.d.ts

@@ -1,2 +0,0 @@
-import { SetSelectValue, UseSelectArgs } from './shared.js';
-export declare function useSelect<Option extends string>(selectName: string, args: UseSelectArgs<Option>): [Option, SetSelectValue<Option>];

package/dist/fixture/useSelect/index.js

@@ -1,11 +0,0 @@
-import { useCreateFixtureState } from './useCreateFixtureState.js';
-import { useCurrentValue } from './useCurrentValue.js';
-import { useSetValue } from './useSetValue.js';
-export function useSelect(selectName, args) {
-    if (!args || !args.options || !args.options.length)
-        throw new Error('No options provided to useSelect');
-    useCreateFixtureState(selectName, args);
-    const currentValue = useCurrentValue(selectName, args);
-    const setValue = useSetValue(selectName);
-    return [currentValue, setValue];
-}

package/dist/fixture/useSelect/shared.d.ts

@@ -1,6 +0,0 @@
-export type UseSelectArgs<Option extends string> = {
-    options: Option[];
-    defaultValue?: Option;
-};
-export type SetSelectValue<Option extends string> = (value: Option) => void;
-export declare function getDefaultSelectValue<Option extends string>({ options, defaultValue, }: UseSelectArgs<Option>): Option;

package/dist/fixture/useSelect/shared.js

@@ -1,3 +0,0 @@
-export function getDefaultSelectValue({ options, defaultValue, }) {
-    return typeof defaultValue === 'string' ? defaultValue : options[0];
-}

package/dist/fixture/useSelect/useCreateFixtureState.d.ts

@@ -1,2 +0,0 @@
-import { UseSelectArgs } from './shared.js';
-export declare function useCreateFixtureState<Option extends string>(selectName: string, args: UseSelectArgs<Option>): void;

package/dist/fixture/useSelect/useCreateFixtureState.js

@@ -1,32 +0,0 @@
-import React, { useEffect } from 'react';
-import { findFixtureStateControl } from '../../fixtureState/controls.js';
-import { FixtureContext } from '../FixtureContext.js';
-import { getDefaultSelectValue } from './shared.js';
-export function useCreateFixtureState(selectName, args) {
-    const { setFixtureState } = React.useContext(FixtureContext);
-    const defaultValue = getDefaultSelectValue(args);
-    useEffect(() => {
-        // The fixture state for this select is (re)created in two situations:
-        // 1. Initially: No corresponding fixture state select is found
-        // 2: Default value change: Current value is reset to new default value
-        setFixtureState(prevFs => {
-            const fsControl = findFixtureStateControl(prevFs, selectName);
-            if (fsControl &&
-                fsControl.type === 'select' &&
-                fsControl.defaultValue === defaultValue)
-                return prevFs;
-            return {
-                ...prevFs,
-                controls: {
-                    ...prevFs.controls,
-                    [selectName]: {
-                        type: 'select',
-                        options: args.options,
-                        defaultValue,
-                        currentValue: defaultValue,
-                    },
-                },
-            };
-        });
-    }, [args.options, defaultValue, selectName, setFixtureState]);
-}

package/dist/fixture/useSelect/useCurrentValue.d.ts

@@ -1,2 +0,0 @@
-import { UseSelectArgs } from './shared.js';
-export declare function useCurrentValue<Option extends string>(selectName: string, args: UseSelectArgs<Option>): Option;

package/dist/fixture/useSelect/useCurrentValue.js

@@ -1,11 +0,0 @@
-import { useContext } from 'react';
-import { findFixtureStateControl } from '../../fixtureState/controls.js';
-import { FixtureContext } from '../FixtureContext.js';
-import { getDefaultSelectValue } from './shared.js';
-export function useCurrentValue(selectName, args) {
-    const { fixtureState } = useContext(FixtureContext);
-    const fsControl = findFixtureStateControl(fixtureState, selectName);
-    return fsControl && fsControl.type === 'select'
-        ? fsControl.currentValue
-        : getDefaultSelectValue(args);
-}

package/dist/fixture/useSelect/useSetValue.d.ts

@@ -1,2 +0,0 @@
-import { SetSelectValue } from './shared.js';
-export declare function useSetValue<Option extends string>(selectName: string): SetSelectValue<Option>;

package/dist/fixture/useSelect/useSetValue.js

@@ -1,25 +0,0 @@
-import { useCallback, useContext } from 'react';
-import { findFixtureStateControl } from '../../fixtureState/controls.js';
-import { FixtureContext } from '../FixtureContext.js';
-export function useSetValue(selectName) {
-    const { setFixtureState } = useContext(FixtureContext);
-    return useCallback(value => {
-        setFixtureState(prevFs => {
-            const fsControl = findFixtureStateControl(prevFs, selectName);
-            if (!fsControl || fsControl.type !== 'select') {
-                console.warn(`Invalid fixture state for select: ${selectName}`);
-                return prevFs;
-            }
-            return {
-                ...prevFs,
-                controls: {
-                    ...prevFs.controls,
-                    [selectName]: {
-                        ...fsControl,
-                        currentValue: value,
-                    },
-                },
-            };
-        });
-    }, [selectName, setFixtureState]);
-}

package/dist/fixture/useValue/index.d.ts

@@ -1,7 +0,0 @@
-import { FixtureStateData } from '../../fixtureState/types.js';
-import { SetValue } from './shared.js';
-type Opts<T extends FixtureStateData> = {
-    defaultValue: T;
-};
-export declare function useValue<T extends FixtureStateData>(inputName: string, { defaultValue }: Opts<T>): [T, SetValue<T>];
-export {};

package/dist/fixture/useValue/index.js

@@ -1,9 +0,0 @@
-import { useCreateFixtureState } from './useCreateFixtureState.js';
-import { useCurrentValue } from './useCurrentValue.js';
-import { useSetValue } from './useSetValue.js';
-export function useValue(inputName, { defaultValue }) {
-    useCreateFixtureState(inputName, defaultValue);
-    const currentValue = useCurrentValue(inputName, defaultValue);
-    const setValue = useSetValue(inputName, defaultValue);
-    return [currentValue, setValue];
-}

package/dist/fixture/useValue/shared.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { FixtureStateData } from '../../fixtureState/types.js';
-export type SetValue<T extends FixtureStateData> = React.Dispatch<React.SetStateAction<T>>;

package/dist/fixture/useValue/useCreateFixtureState.d.ts

@@ -1,2 +0,0 @@
-import { FixtureStateData } from '../../fixtureState/types.js';
-export declare function useCreateFixtureState(inputName: string, defaultValue: FixtureStateData): void;

package/dist/fixture/useValue/useCreateFixtureState.js

@@ -1,35 +0,0 @@
-import { isEqual } from 'lodash-es';
-import React from 'react';
-import { findFixtureStateControl } from '../../fixtureState/controls.js';
-import { createValue } from '../../fixtureState/createValues.js';
-import { extendWithValue } from '../../fixtureState/extendWithValues.js';
-import { FixtureContext } from '../FixtureContext.js';
-export function useCreateFixtureState(inputName, defaultValue) {
-    const { setFixtureState } = React.useContext(FixtureContext);
-    React.useEffect(() => {
-        // The fixture state for this value is (re)created in two situations:
-        // 1. Initially: No corresponding fixture state value is found
-        // 2: Default value change: Current value is reset to new default value
-        setFixtureState(prevFs => {
-            const fsControl = findFixtureStateControl(prevFs, inputName);
-            if (fsControl &&
-                fsControl.type === 'standard' &&
-                fsValueExtendsBaseValue(fsControl.defaultValue, defaultValue))
-                return prevFs;
-            return {
-                ...prevFs,
-                controls: {
-                    ...prevFs.controls,
-                    [inputName]: {
-                        type: 'standard',
-                        defaultValue: createValue(defaultValue),
-                        currentValue: createValue(defaultValue),
-                    },
-                },
-            };
-        });
-    }, [setFixtureState, inputName, defaultValue]);
-}
-function fsValueExtendsBaseValue(fsValue, baseValue) {
-    return isEqual(baseValue, extendWithValue(baseValue, fsValue));
-}

package/dist/fixture/useValue/useCurrentValue.d.ts

@@ -1,2 +0,0 @@
-import { FixtureStateData } from '../../fixtureState/types.js';
-export declare function useCurrentValue<T extends FixtureStateData>(inputName: string, defaultValue: T): T;

package/dist/fixture/useValue/useCurrentValue.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { findFixtureStateControl } from '../../fixtureState/controls.js';
-import { extendWithValue } from '../../fixtureState/extendWithValues.js';
-import { FixtureContext } from '../FixtureContext.js';
-export function useCurrentValue(inputName, defaultValue) {
-    const { fixtureState } = React.useContext(FixtureContext);
-    const fsControl = findFixtureStateControl(fixtureState, inputName);
-    return fsControl && fsControl.type === 'standard'
-        ? // Types of fixture state values cannot be guaranteed at read time, which
-            // means that tampering with the fixture state can cause runtime errors
-            extendWithValue(defaultValue, fsControl.currentValue)
-        : defaultValue;
-}

package/dist/fixture/useValue/useSetValue.d.ts

@@ -1,3 +0,0 @@
-import { FixtureStateData } from '../../fixtureState/types.js';
-import { SetValue } from './shared.js';
-export declare function useSetValue<T extends FixtureStateData>(inputName: string, defaultValue: T): SetValue<T>;

package/dist/fixture/useValue/useSetValue.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import { findFixtureStateControl } from '../../fixtureState/controls.js';
-import { createValue } from '../../fixtureState/createValues.js';
-import { extendWithValue } from '../../fixtureState/extendWithValues.js';
-import { FixtureContext } from '../FixtureContext.js';
-export function useSetValue(inputName, defaultValue) {
-    const { setFixtureState } = React.useContext(FixtureContext);
-    return React.useCallback(stateChange => {
-        setFixtureState(prevFs => {
-            const currentValue = typeof stateChange === 'function'
-                ? stateChange(
-                // Types of fixture state values cannot be guaranteed at read
-                // time, which means that tampering with the fixture state can
-                // cause runtime errors
-                getCurrentValueFromFixtureState(prevFs, inputName, defaultValue))
-                : stateChange;
-            return {
-                ...prevFs,
-                controls: {
-                    ...prevFs.controls,
-                    [inputName]: {
-                        type: 'standard',
-                        defaultValue: createValue(defaultValue),
-                        currentValue: createValue(currentValue),
-                    },
-                },
-            };
-        });
-    }, [setFixtureState, defaultValue, inputName]);
-}
-function getCurrentValueFromFixtureState(fixtureState, inputName, defaultValue) {
-    const fsControl = findFixtureStateControl(fixtureState, inputName);
-    return fsControl && fsControl.type === 'standard'
-        ? extendWithValue(defaultValue, fsControl.currentValue)
-        : defaultValue;
-}

package/dist/playground/playgroundUrl.d.ts

@@ -1,13 +0,0 @@
-import { FixtureId } from '../fixture/types.js';
-export type PlaygroundUrlParams = {
-    fixtureId?: FixtureId;
-};
-export type RendererUrlParams = {
-    _fixtureId?: FixtureId;
-};
-export declare function stringifyPlaygroundUrlQuery(urlParams: PlaygroundUrlParams): string;
-export declare function parsePlaygroundUrlQuery(query: string): PlaygroundUrlParams;
-export declare function stringifyRendererUrlQuery(urlParams: RendererUrlParams): string;
-export declare function parseRendererUrlQuery(query: string): RendererUrlParams;
-export declare function parseUrlQuery<T extends {}>(query: string): T;
-export declare function stringifyUrlQuery(params: {}): string;

package/dist/playground/playgroundUrl.js

@@ -1,36 +0,0 @@
-export function stringifyPlaygroundUrlQuery(urlParams) {
-    const encodedUrlParams = {};
-    if (urlParams.fixtureId) {
-        encodedUrlParams.fixtureId = JSON.stringify(urlParams.fixtureId);
-    }
-    return stringifyUrlQuery(encodedUrlParams);
-}
-export function parsePlaygroundUrlQuery(query) {
-    const encodedUrlParams = parseUrlQuery(query);
-    const decoded = {};
-    if (encodedUrlParams.fixtureId) {
-        decoded.fixtureId = JSON.parse(encodedUrlParams.fixtureId);
-    }
-    return decoded;
-}
-export function stringifyRendererUrlQuery(urlParams) {
-    const encodedUrlParams = {};
-    if (urlParams._fixtureId) {
-        encodedUrlParams._fixtureId = JSON.stringify(urlParams._fixtureId);
-    }
-    return stringifyUrlQuery(encodedUrlParams);
-}
-export function parseRendererUrlQuery(query) {
-    const encodedUrlParams = parseUrlQuery(query);
-    const decoded = {};
-    if (encodedUrlParams._fixtureId) {
-        decoded._fixtureId = JSON.parse(encodedUrlParams._fixtureId);
-    }
-    return decoded;
-}
-export function parseUrlQuery(query) {
-    return Object.fromEntries(new URLSearchParams(query));
-}
-export function stringifyUrlQuery(params) {
-    return new URLSearchParams(params).toString();
-}

package/dist/renderer/FixtureLoader/FixtureCapture/classState/decorateFixtureRefs/index.d.ts

@@ -1,5 +0,0 @@
-import { Component, ReactNode } from 'react';
-import { CachedRefHandlers } from '../shared.js';
-type SpyRef = (elPath: string, elRef: null | Component) => unknown;
-export declare function decorateFixtureRefs(fixture: ReactNode, spyRef: SpyRef, cachedRefHandlers: CachedRefHandlers): ReactNode;
-export {};

package/dist/renderer/FixtureLoader/FixtureCapture/classState/decorateFixtureRefs/index.js

@@ -1,46 +0,0 @@
-import { cloneElement, } from 'react';
-import { findRelevantElementPaths } from '../../shared/findRelevantElementPaths.js';
-import { setElementAtPath } from '../../shared/nodeTree/index.js';
-import { isRefSupported } from './isRefSupported.js';
-export function decorateFixtureRefs(fixture, spyRef, cachedRefHandlers) {
-    const elPaths = findRelevantElementPaths(fixture);
-    return elPaths.reduce((decoratedFixture, elPath) => {
-        return setElementAtPath(decoratedFixture, elPath, element => {
-            if (!isRefSupported(element.type)) {
-                return element;
-            }
-            return cloneElement(element, {
-                ref: getDecoratedRef(element.ref, spyRef, elPath, cachedRefHandlers),
-            });
-        });
-    }, fixture);
-}
-function getDecoratedRef(origRef, spyRef, elPath, cachedRefHandlers) {
-    const found = cachedRefHandlers[elPath];
-    if (found && found.origRef === origRef) {
-        return found.handler;
-    }
-    const handler = decorateRefWithSpy(origRef, spyRef, elPath);
-    cachedRefHandlers[elPath] = { origRef, handler };
-    return handler;
-}
-function decorateRefWithSpy(origRef, spyRef, elPath) {
-    return (elRef) => {
-        if (origRef) {
-            callOriginalRef(origRef, elRef);
-        }
-        spyRef(elPath, elRef);
-    };
-}
-function callOriginalRef(ref, elRef) {
-    if (typeof ref === 'string') {
-        console.warn('[decorateFixtureRefs] String refs are not supported');
-        return;
-    }
-    if (typeof ref === 'function') {
-        ref(elRef);
-        return;
-    }
-    const refObj = ref;
-    refObj.current = elRef;
-}

package/dist/renderer/FixtureLoader/FixtureCapture/classState/decorateFixtureRefs/isRefSupported.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-type ElementType = string | React.ComponentType;
-export declare function isRefSupported(elementType: ElementType): boolean;
-export {};

package/dist/renderer/FixtureLoader/FixtureCapture/classState/decorateFixtureRefs/isRefSupported.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import { ForwardRef } from 'react-is';
-export function isRefSupported(elementType) {
-    if (typeof elementType === 'string') {
-        return false;
-    }
-    const { $$typeof, prototype } = elementType;
-    return ($$typeof === ForwardRef ||
-        // Warning: Some functions don't have the .prototype property
-        (prototype &&
-            // ES6 Class
-            // Warning: This will return false is the component is extending a
-            // different copy of React than the one used by Cosmos. This is relevant
-            // when running Cosmos from an external location instead of node_modules.
-            (prototype instanceof React.Component ||
-                // React.createClass
-                prototype.getInitialState !== undefined) &&
-            true));
-}

package/dist/renderer/FixtureLoader/FixtureCapture/classState/index.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { FixtureDecoratorId } from '../../../../fixtureState/types.js';
-export declare function useClassStateCapture(fixture: React.ReactNode, decoratorId: FixtureDecoratorId): React.ReactNode;

package/dist/renderer/FixtureLoader/FixtureCapture/classState/index.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { useFixtureState } from './useFixtureState.js';
-import { useReadClassState } from './useReadClassState.js';
-export function useClassStateCapture(fixture, decoratorId) {
-    const elRefs = React.useRef({});
-    React.useEffect(() => {
-        return () => {
-            elRefs.current = {};
-        };
-    }, []);
-    useReadClassState(fixture, decoratorId, elRefs);
-    return useFixtureState(fixture, decoratorId, elRefs);
-}

package/dist/renderer/FixtureLoader/FixtureCapture/classState/shared.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-export type ElRefs = {
-    [elPath: string]: React.Component;
-};
-export type InitialStates = {
-    [elPath: string]: {
-        type: React.ComponentClass<any>;
-        state: {};
-    };
-};
-export type CachedRefHandler = {
-    origRef: null | React.Ref<any>;
-    handler: (elRef: null | React.Component) => unknown;
-};
-export type CachedRefHandlers = {
-    [elPath: string]: CachedRefHandler;
-};
-export declare function replaceState(elRef: React.Component, nextState: {}): void;

package/dist/renderer/FixtureLoader/FixtureCapture/classState/shared.js

@@ -1,14 +0,0 @@
-import { isEqual } from 'lodash-es';
-// We need to do this because React doesn't provide a replaceState method
-// (anymore) https://reactjs.org/docs/react-component.html#setstate
-export function replaceState(elRef, nextState) {
-    const fullState = resetOriginalKeys(elRef.state, nextState);
-    if (!isEqual(fullState, elRef.state)) {
-        elRef.setState(fullState);
-    }
-}
-function resetOriginalKeys(original, current) {
-    return Object.keys(original).reduce((result, key) => Object.keys(result).indexOf(key) === -1
-        ? { ...result, [key]: undefined }
-        : result, current);
-}

package/dist/renderer/FixtureLoader/FixtureCapture/classState/useFixtureState.d.ts

@@ -1,4 +0,0 @@
-import { MutableRefObject, ReactNode } from 'react';
-import { FixtureDecoratorId } from '../../../../fixtureState/types.js';
-import { ElRefs } from './shared.js';
-export declare function useFixtureState(fixture: ReactNode, decoratorId: FixtureDecoratorId, elRefs: MutableRefObject<ElRefs>): ReactNode;