react-cosmos-dom
Advanced tools
Comparing version 6.0.0-canary.f4702e1.0 to 6.0.0-canary.f5c981a.0
@@ -1,12 +0,8 @@ | ||
import { ReactDecorators, ReactFixtureWrappers } from 'react-cosmos-core'; | ||
import React from 'react'; | ||
import { RendererConfig, UserModuleWrappers } from 'react-cosmos-core'; | ||
type Props = { | ||
fixtures: ReactFixtureWrappers; | ||
decorators: ReactDecorators; | ||
playgroundUrl: string; | ||
onErrorReset?: () => unknown; | ||
rendererConfig: RendererConfig; | ||
moduleWrappers: UserModuleWrappers; | ||
}; | ||
export declare function DomFixtureLoader({ fixtures, decorators, playgroundUrl, onErrorReset, }: Props): JSX.Element; | ||
export declare function renderDomMessage({ msg }: { | ||
msg: string; | ||
}): JSX.Element; | ||
export declare function DomFixtureLoader({ rendererConfig, moduleWrappers }: Props): React.JSX.Element; | ||
export {}; |
@@ -1,27 +0,10 @@ | ||
import React, { useEffect, useMemo } from 'react'; | ||
import { FixtureLoader, } from 'react-cosmos-core'; | ||
import { createDomRendererConnect } from './domRendererConnect.js'; | ||
import { domRendererId } from './domRendererId.js'; | ||
import React from 'react'; | ||
import { ClientFixtureLoader } from 'react-cosmos-renderer/client'; | ||
import { DomRendererProvider } from './DomRendererProvider.js'; | ||
import { ErrorCatch } from './ErrorCatch.js'; | ||
import { selectedFixtureId } from './selectedFixtureId.js'; | ||
export function DomFixtureLoader({ fixtures, decorators, playgroundUrl, onErrorReset, }) { | ||
const domRendererConnect = useMemo(() => createDomRendererConnect(playgroundUrl), [playgroundUrl]); | ||
useEffect(() => { | ||
function handleGlobalError() { | ||
domRendererConnect.postMessage({ | ||
type: 'rendererError', | ||
payload: { rendererId: domRendererId }, | ||
}); | ||
} | ||
// Unhandled errors from async code will not be caught by the error event, but | ||
// the unhandledrejection event instead. | ||
window.addEventListener('error', handleGlobalError); | ||
window.addEventListener('unhandledrejection', handleGlobalError); | ||
return () => { | ||
window.removeEventListener('error', handleGlobalError); | ||
window.removeEventListener('unhandledrejection', handleGlobalError); | ||
}; | ||
}, [domRendererConnect]); | ||
return (React.createElement(FixtureLoader, { rendererId: domRendererId, rendererConnect: domRendererConnect, fixtures: fixtures, selectedFixtureId: selectedFixtureId, systemDecorators: [ErrorCatch], userDecorators: decorators, renderMessage: renderDomMessage, onErrorReset: onErrorReset })); | ||
export function DomFixtureLoader({ rendererConfig, moduleWrappers }) { | ||
return (React.createElement(DomRendererProvider, { rendererConfig: rendererConfig }, | ||
React.createElement(ClientFixtureLoader, { moduleWrappers: moduleWrappers, globalDecorators: globalDecorators, renderMessage: renderMessage }))); | ||
} | ||
const globalDecorators = [ErrorCatch]; | ||
const containerStyle = { | ||
@@ -39,4 +22,4 @@ position: 'absolute', | ||
}; | ||
export function renderDomMessage({ msg }) { | ||
function renderMessage(msg) { | ||
return React.createElement("div", { style: containerStyle }, msg); | ||
} |
@@ -1,7 +0,14 @@ | ||
import React, { Component } from 'react'; | ||
import { ReactDecoratorProps } from 'react-cosmos-core'; | ||
import React from 'react'; | ||
import { FixtureContextValue } from 'react-cosmos-renderer/client'; | ||
type Props = { | ||
children: React.ReactNode; | ||
}; | ||
type State = { | ||
error: null | string; | ||
}; | ||
export declare class ErrorCatch extends Component<ReactDecoratorProps, State> { | ||
export declare class ErrorCatch extends React.Component<Props, State> { | ||
context: FixtureContextValue; | ||
static contextType: React.Context<FixtureContextValue>; | ||
prevContext: FixtureContextValue | null; | ||
static prevContext: null; | ||
state: State; | ||
@@ -11,6 +18,7 @@ componentDidCatch(error: Error, info: { | ||
}): void; | ||
componentDidUpdate(prevProps: ReactDecoratorProps): void; | ||
render(): string | number | boolean | React.ReactFragment | JSX.Element | null | undefined; | ||
renderError(error: string): JSX.Element | null; | ||
componentDidMount(): void; | ||
componentDidUpdate(prevProps: Props): void; | ||
render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined; | ||
renderError(error: string): React.JSX.Element; | ||
} | ||
export {}; |
import { isEqual } from 'lodash-es'; | ||
import React, { Component } from 'react'; | ||
import React from 'react'; | ||
import { areNodesEqual } from 'react-cosmos-core'; | ||
export class ErrorCatch extends Component { | ||
import { FixtureContext, } from 'react-cosmos-renderer/client'; | ||
export class ErrorCatch extends React.Component { | ||
static contextType = FixtureContext; | ||
static prevContext = null; | ||
state = { | ||
@@ -13,2 +16,5 @@ error: null, | ||
} | ||
componentDidMount() { | ||
this.prevContext = this.context; | ||
} | ||
componentDidUpdate(prevProps) { | ||
@@ -21,6 +27,6 @@ // A change in fixture (children) or fixture state signifies that the | ||
(fixtureChanged(this.props.children, prevProps.children) || | ||
fixtureStateChanged(this.props.fixtureState, prevProps.fixtureState))) { | ||
fixtureStateChanged(this.context.fixtureState, this.prevContext?.fixtureState))) { | ||
this.setState({ error: null }); | ||
this.props.onErrorReset(); | ||
} | ||
this.prevContext = this.context; | ||
} | ||
@@ -33,14 +39,4 @@ render() { | ||
renderError(error) { | ||
// Don't render error details here in dev mode because react-error-overlay | ||
// takes care of it in a nicer way. We used to render both for a while but | ||
// it proved annoying. react-error-overlay has a slight delay and seeing | ||
// the same error reported twice feels clumsy. | ||
if (__DEV__) { | ||
return null; | ||
} | ||
// In static exports, however, where react-error-overlay is missing, | ||
// rendering plain error details is superior to showing a blank screen. | ||
return (React.createElement(React.Fragment, null, | ||
React.createElement("p", null, | ||
React.createElement("strong", null, "Ouch, something wrong!")), | ||
React.createElement("h1", null, "Ouch, something wrong!"), | ||
React.createElement("pre", null, error), | ||
@@ -47,0 +43,0 @@ React.createElement("p", null, "Check console for more info."))); |
@@ -1,4 +0,7 @@ | ||
export * from './domRendererConnect.js'; | ||
export * from './domRendererId.js'; | ||
export * from './DomFixtureLoader.js'; | ||
export * from './DomRendererConfig.js'; | ||
export * from './GlobalErrorHandler.js'; | ||
export * from './mountDomRenderer.js'; | ||
export * from './types.js'; | ||
export * from './reloadDomRenderer.js'; | ||
export * from './useDomRendererConnect.js'; | ||
export * from './useDomRendererId.js'; |
@@ -1,4 +0,7 @@ | ||
export * from './domRendererConnect.js'; | ||
export * from './domRendererId.js'; | ||
export * from './DomFixtureLoader.js'; | ||
export * from './DomRendererConfig.js'; | ||
export * from './GlobalErrorHandler.js'; | ||
export * from './mountDomRenderer.js'; | ||
export * from './types.js'; | ||
export * from './reloadDomRenderer.js'; | ||
export * from './useDomRendererConnect.js'; | ||
export * from './useDomRendererId.js'; |
@@ -1,10 +0,8 @@ | ||
import { ReactDecorators, ReactFixtureWrappers } from 'react-cosmos-core'; | ||
import { DomRendererConfig } from './types.js'; | ||
import { UserModuleWrappers } from 'react-cosmos-core'; | ||
import { DomRendererConfig } from './DomRendererConfig.js'; | ||
type Args = { | ||
rendererConfig: DomRendererConfig; | ||
fixtures: ReactFixtureWrappers; | ||
decorators: ReactDecorators; | ||
onErrorReset?: () => unknown; | ||
moduleWrappers: UserModuleWrappers; | ||
}; | ||
export declare function mountDomRenderer({ rendererConfig, fixtures, decorators, onErrorReset, }: Args): void; | ||
export declare function mountDomRenderer({ rendererConfig, moduleWrappers }: Args): void; | ||
export {}; |
@@ -6,3 +6,3 @@ import React from 'react'; | ||
let cachedRoot = null; | ||
export function mountDomRenderer({ rendererConfig, fixtures, decorators, onErrorReset, }) { | ||
export function mountDomRenderer({ rendererConfig, moduleWrappers }) { | ||
const domContainer = getDomContainer(rendererConfig.containerQuerySelector); | ||
@@ -13,3 +13,3 @@ if (!cachedRoot || cachedRoot.domContainer !== domContainer) { | ||
} | ||
cachedRoot.reactRoot.render(React.createElement(DomFixtureLoader, { fixtures: fixtures, decorators: decorators, playgroundUrl: rendererConfig.playgroundUrl, onErrorReset: onErrorReset })); | ||
cachedRoot.reactRoot.render(React.createElement(DomFixtureLoader, { rendererConfig: rendererConfig, moduleWrappers: moduleWrappers })); | ||
} |
{ | ||
"name": "react-cosmos-dom", | ||
"version": "6.0.0-canary.f4702e1.0+f4702e1", | ||
"version": "6.0.0-canary.f5c981a.0+f5c981a", | ||
"description": "React Cosmos DOM", | ||
@@ -10,6 +10,7 @@ "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos-dom", | ||
"dependencies": { | ||
"lodash-es": "^4.17.21", | ||
"react-cosmos-core": "^6.0.0-canary.f4702e1.0+f4702e1" | ||
"lodash-es": "4.17.21", | ||
"react-cosmos-core": "6.0.0-canary.f5c981a.0+f5c981a", | ||
"react-cosmos-renderer": "6.0.0-canary.f5c981a.0+f5c981a" | ||
}, | ||
"gitHead": "f4702e164485966e21a8b3ec4cac8377914ee3dc" | ||
"gitHead": "f5c981ab25d4b15c5ea7b9fb7e2834dc1d623f72" | ||
} |
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
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
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
12411
26
263
3
2
- Removedjs-base64@3.7.7(transitive)
- Removedreact-cosmos-core@6.2.0(transitive)
- Removedreact-is@18.3.1(transitive)
Updatedlodash-es@4.17.21