Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-cosmos-dom

Package Overview
Dependencies
Maintainers
1
Versions
256
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-cosmos-dom - npm Package Compare versions

Comparing version 6.0.0-canary.f4702e1.0 to 6.0.0-canary.f5c981a.0

dist/createWebSocketsUrl.d.ts

14

dist/DomFixtureLoader.d.ts

@@ -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"
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc