react-cosmos-renderer
Advanced tools
Comparing version 6.1.2-canary.0d0e717.0 to 6.1.2-canary.15db638.0
@@ -0,4 +1,4 @@ | ||
export * from './fixture/ClassStateMock.js'; | ||
export * from './fixture/FixtureCapture/FixtureCapture.js'; | ||
export * from './fixture/FixtureContext.js'; | ||
export * from './fixture/Viewport.js'; | ||
export * from './fixture/useFixtureInput/useFixtureInput.js'; | ||
@@ -9,2 +9,3 @@ export * from './fixture/useFixtureInput/useValue.js'; | ||
export * from './fixture/useFixtureState.js'; | ||
export * from './fixture/Viewport.js'; | ||
export * from './fixtureLoaders/ClientFixtureLoader.js'; | ||
@@ -11,0 +12,0 @@ export * from './rendererConnect/RendererContext.js'; |
@@ -0,4 +1,4 @@ | ||
export * from './fixture/ClassStateMock.js'; | ||
export * from './fixture/FixtureCapture/FixtureCapture.js'; | ||
export * from './fixture/FixtureContext.js'; | ||
export * from './fixture/Viewport.js'; | ||
export * from './fixture/useFixtureInput/useFixtureInput.js'; | ||
@@ -9,2 +9,3 @@ export * from './fixture/useFixtureInput/useValue.js'; | ||
export * from './fixture/useFixtureState.js'; | ||
export * from './fixture/Viewport.js'; | ||
export * from './fixtureLoaders/ClientFixtureLoader.js'; | ||
@@ -11,0 +12,0 @@ export * from './rendererConnect/RendererContext.js'; |
export declare function getChildrenPath(elPath: string): string; | ||
export declare function isRootPath(elPath: string): boolean; | ||
export declare function isRootPath(elPath: string): elPath is ""; |
import React from 'react'; | ||
import { isElement } from 'react-is'; | ||
export function createFixtureNode(fixture) { | ||
// Warning: In a React Server Components setup this function is called on the | ||
// server. When a fixture module uses the 'use client' directive, the fixture | ||
// arg received here will be a function wrapper regardless of the fixture | ||
// module contents. In this scenario, the fixture module will be automatically | ||
// rendered on the client side, where React expects a component default export. | ||
// export will be a Promise wrapper (imbued with magical properties methinks). | ||
// This results in the following limitation: In a React Server Components | ||
// setup, Client fixtures have to export a single function component. They | ||
// can't be multi fixtures and they can't export React elements directly. | ||
return isFunctionFixture(fixture) ? (React.createElement(FixtureElement, { Component: fixture })) : (fixture); | ||
return isNodeFixture(fixture) ? (fixture) : (React.createElement(FixtureElement, { Component: fixture })); | ||
} | ||
function isFunctionFixture(fixture) { | ||
return typeof fixture === 'function'; | ||
function isNodeFixture(fixture) { | ||
// If you're curious what the exact type of ReactNode is: | ||
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/6fc4839a810335dee15374e6bc82dbbc2bbdff58/types/react/index.d.ts#L478-L489 | ||
return (fixture === undefined || | ||
fixture === null || | ||
typeof fixture === 'string' || | ||
typeof fixture === 'number' || | ||
typeof fixture === 'boolean' || | ||
Array.isArray(fixture) || | ||
// If you're curious what isElement checks: | ||
// https://github.com/facebook/react/blob/1b0132c05acabae5aebd32c2cadddfb16bda70bc/packages/react-is/src/ReactIs.js#L108-L114 | ||
isElement(fixture)); | ||
} | ||
@@ -16,0 +25,0 @@ function FixtureElement({ Component }) { |
@@ -5,6 +5,7 @@ import React from 'react'; | ||
fixture: ReactFixture; | ||
fixtureOptions: {}; | ||
userDecoratorModules: ReactDecoratorModule[]; | ||
globalDecorators?: ReactDecorator[]; | ||
}; | ||
export declare function DecoratedFixture({ fixture, userDecoratorModules, globalDecorators, }: Props): React.ReactElement<any, string | React.JSXElementConstructor<any>>; | ||
export declare function DecoratedFixture({ fixture, fixtureOptions, userDecoratorModules, globalDecorators, }: Props): React.ReactElement<any, string | React.JSXElementConstructor<any>>; | ||
export {}; |
@@ -5,3 +5,3 @@ import React, { useMemo } from 'react'; | ||
import { decorateFixture } from './decorateFixture.js'; | ||
export function DecoratedFixture({ fixture, userDecoratorModules, globalDecorators = [], }) { | ||
export function DecoratedFixture({ fixture, fixtureOptions, userDecoratorModules, globalDecorators = [], }) { | ||
return useMemo(() => { | ||
@@ -12,4 +12,4 @@ const decorators = [ | ||
]; | ||
return decorateFixture(React.createElement(FixtureCapture, { decoratorId: "root" }, createFixtureNode(fixture)), decorators); | ||
}, [fixture, globalDecorators, userDecoratorModules]); | ||
return decorateFixture(React.createElement(FixtureCapture, { decoratorId: "root" }, createFixtureNode(fixture)), fixtureOptions, decorators); | ||
}, [fixture, fixtureOptions, globalDecorators, userDecoratorModules]); | ||
} |
import React from 'react'; | ||
import { ReactDecorator } from 'react-cosmos-core'; | ||
export declare function decorateFixture(fixtureNode: React.ReactNode, decorators: ReactDecorator[]): React.ReactElement; | ||
export declare function decorateFixture(fixtureNode: React.ReactNode, fixtureOptions: {}, decorators: ReactDecorator[]): React.ReactElement; |
import React from 'react'; | ||
export function decorateFixture(fixtureNode, decorators) { | ||
return (React.createElement(React.Fragment, null, [...decorators].reverse().reduce((prevElement, Decorator) => (React.createElement(Decorator, null, prevElement)), fixtureNode))); | ||
export function decorateFixture(fixtureNode, fixtureOptions, decorators) { | ||
return (React.createElement(React.Fragment, null, [...decorators].reverse().reduce((prevElement, Decorator) => (React.createElement(Decorator, { options: fixtureOptions }, prevElement)), fixtureNode))); | ||
} |
@@ -1,2 +0,1 @@ | ||
/// <reference types="react/experimental" /> | ||
import React from 'react'; | ||
@@ -14,3 +13,3 @@ import { FixtureId, FixtureState, ReactDecorator, ReactDecoratorModule, ReactFixtureModule } from 'react-cosmos-core'; | ||
}; | ||
export declare function FixtureModule({ fixtureModule, decoratorModules, globalDecorators, fixtureId, initialFixtureState, renderKey, lazy, renderMessage, }: Props): string | number | boolean | Iterable<React.ReactNode> | React.PromiseLikeOfReactNode | React.JSX.Element | null | undefined; | ||
export declare function FixtureModule({ fixtureModule, decoratorModules, globalDecorators, fixtureId, initialFixtureState, renderKey, lazy, renderMessage, }: Props): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<React.AwaitedReactNode> | React.JSX.Element | null | undefined; | ||
export {}; |
import React from 'react'; | ||
import { getFixtureFromExport, getFixtureItemFromExport, stringifyFixtureId, } from 'react-cosmos-core'; | ||
import { getFixtureFromExport, getFixtureItemFromExport, pickSerializableValues, stringifyFixtureId, } from 'react-cosmos-core'; | ||
import { DecoratedFixture } from './DecoratedFixture.js'; | ||
@@ -9,7 +9,9 @@ import { FixtureProvider } from './FixtureProvider.js'; | ||
const fixture = getFixtureFromExport(fixtureModule.default, fixtureId.name); | ||
const { options = {} } = fixtureModule; | ||
const serializableOptions = React.useMemo(() => pickSerializableValues(options), [options]); | ||
if (typeof fixture === 'undefined') { | ||
return renderMessage(`Invalid fixture name: ${fixtureId.name}`); | ||
} | ||
return (React.createElement(FixtureProvider, { key: fixtureKey, fixtureId: fixtureId, initialFixtureState: initialFixtureState, fixtureItem: fixtureItem, lazy: lazy }, | ||
React.createElement(DecoratedFixture, { fixture: fixture, userDecoratorModules: decoratorModules, globalDecorators: globalDecorators }))); | ||
return (React.createElement(FixtureProvider, { key: fixtureKey, fixtureId: fixtureId, initialFixtureState: initialFixtureState, fixtureItem: fixtureItem, fixtureOptions: serializableOptions, lazy: lazy }, | ||
React.createElement(DecoratedFixture, { fixture: fixture, fixtureOptions: options, userDecoratorModules: decoratorModules, globalDecorators: globalDecorators }))); | ||
} |
@@ -8,2 +8,3 @@ import React from 'react'; | ||
fixtureItem: FixtureListItem; | ||
fixtureOptions: {}; | ||
lazy: boolean; | ||
@@ -10,0 +11,0 @@ }; |
@@ -28,5 +28,6 @@ 'use client'; | ||
fixture: props.fixtureItem, | ||
fixtureOptions: props.fixtureOptions, | ||
}, | ||
}); | ||
}, [props.fixtureItem, rendererConnect, rendererId]); | ||
}, [props.fixtureItem, props.fixtureOptions, rendererConnect, rendererId]); | ||
React.useEffect(() => { | ||
@@ -33,0 +34,0 @@ if (!isEqual(state.fixtureState, state.syncedFixtureState)) { |
@@ -1,2 +0,7 @@ | ||
import { RendererConnect } from 'react-cosmos-core'; | ||
import { RendererConnect, RendererResponse } from 'react-cosmos-core'; | ||
declare global { | ||
interface Window { | ||
cosmosRendererResponse?: (msg: RendererResponse) => void; | ||
} | ||
} | ||
export declare function createWebSocketsConnect(url: string): RendererConnect; |
@@ -20,2 +20,6 @@ import { rendererSocketMessage, } from 'react-cosmos-core'; | ||
} | ||
// Allow headless browsers to capture renderer responses | ||
if (window.cosmosRendererResponse) { | ||
window.cosmosRendererResponse(rendererResponse); | ||
} | ||
}, | ||
@@ -22,0 +26,0 @@ onMessage(onMessage) { |
{ | ||
"name": "react-cosmos-renderer", | ||
"version": "6.1.2-canary.0d0e717.0+0d0e717", | ||
"version": "6.1.2-canary.15db638.0+15db638", | ||
"description": "React Cosmos Renderer", | ||
@@ -15,6 +15,6 @@ "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos-renderer", | ||
"lodash-es": "4.17.21", | ||
"react-cosmos-core": "6.1.2-canary.0d0e717.0+0d0e717", | ||
"react-is": "18.2.0" | ||
"react-cosmos-core": "6.1.2-canary.15db638.0+15db638", | ||
"react-is": "18.3.1" | ||
}, | ||
"gitHead": "0d0e717b5045febfbaf2bc8e9c840094859d49a4" | ||
"gitHead": "15db6389056d322dd3df5012262cfd620867e49b" | ||
} |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
76682
112
1637
+ Addedreact-is@18.3.1(transitive)
- Removedreact-is@18.2.0(transitive)
Updatedreact-is@18.3.1