react-cosmos-dom - npm Package Compare versions

Comparing version 6.0.0-canary.00f2473.0 to 6.0.0-canary.01bd836.0

dist/DomFixtureLoader.d.ts

@@ -1,9 +0,8 @@
-import { UserModuleWrappers } from 'react-cosmos-core';
+import React from 'react';
+import { RendererConfig, UserModuleWrappers } from 'react-cosmos-core';
 type Props = {
+    rendererConfig: RendererConfig;
     moduleWrappers: UserModuleWrappers;
-    playgroundUrl: string;
-    onErrorReset?: () => unknown;
 };
-export declare function DomFixtureLoader(props: Props): JSX.Element;
-export declare function renderDomMessage(msg: string): JSX.Element;
+export declare function DomFixtureLoader({ rendererConfig, moduleWrappers }: Props): React.JSX.Element;
 export {};

dist/DomFixtureLoader.js

@@ -1,30 +0,10 @@
-import React, { useEffect, useMemo } from 'react';
-import { FixtureConnect } 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';
-import { isInsideCosmosPreviewIframe } from './utils/isInsideCosmosPreviewIframe.js';
-export function DomFixtureLoader(props) {
-    const { moduleWrappers, playgroundUrl, onErrorReset } = props;
-    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(FixtureConnect, { rendererId: domRendererId, rendererConnect: domRendererConnect, moduleWrappers: moduleWrappers, systemDecorators: systemDecorators, selectedFixtureId: selectedFixtureId, renderMessage: renderDomMessage, renderNoFixtureSelected: !isInsideCosmosPreviewIframe(), onErrorReset: onErrorReset }));
+export function DomFixtureLoader({ rendererConfig, moduleWrappers }) {
+    return (React.createElement(DomRendererProvider, { rendererConfig: rendererConfig },
+        React.createElement(ClientFixtureLoader, { moduleWrappers: moduleWrappers, globalDecorators: globalDecorators, renderMessage: renderMessage })));
 }
-const systemDecorators = [ErrorCatch];
+const globalDecorators = [ErrorCatch];
 const containerStyle = {
@@ -42,4 +22,4 @@ position: 'absolute',
 };
-export function renderDomMessage(msg) {
+function renderMessage(msg) {
     return React.createElement("div", { style: containerStyle }, msg);
 }

dist/ErrorCatch.d.ts

@@ -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 {};

dist/ErrorCatch.js

 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.")));

dist/index.d.ts

@@ -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';

dist/index.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';

dist/mountDomRenderer.d.ts

 import { UserModuleWrappers } from 'react-cosmos-core';
-import { DomRendererConfig } from './types.js';
+import { DomRendererConfig } from './DomRendererConfig.js';
 type Args = {
     rendererConfig: DomRendererConfig;
     moduleWrappers: UserModuleWrappers;
-    onErrorReset?: () => unknown;
 };
-export declare function mountDomRenderer({ rendererConfig, moduleWrappers, onErrorReset, }: Args): void;
+export declare function mountDomRenderer({ rendererConfig, moduleWrappers }: Args): void;
 export {};

dist/mountDomRenderer.js

@@ -6,3 +6,3 @@ import React from 'react';
 let cachedRoot = null;
-export function mountDomRenderer({ rendererConfig, moduleWrappers, 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, { moduleWrappers: moduleWrappers, playgroundUrl: rendererConfig.playgroundUrl, onErrorReset: onErrorReset }));
+    cachedRoot.reactRoot.render(React.createElement(DomFixtureLoader, { rendererConfig: rendererConfig, moduleWrappers: moduleWrappers }));
 }

package.json

 {
   "name": "react-cosmos-dom",
-  "version": "6.0.0-canary.00f2473.0+00f2473",
+  "version": "6.0.0-canary.01bd836.0+01bd836",
   "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.00f2473.0+00f2473"
+    "lodash-es": "4.17.21",
+    "react-cosmos-core": "6.0.0-canary.01bd836.0+01bd836",
+    "react-cosmos-renderer": "6.0.0-canary.01bd836.0+01bd836"
   },
-  "gitHead": "00f24737ae15e5923c336c97b9838bec471c3bda"
+  "gitHead": "01bd836748e8156b0d563013e6119375c463404f"
 }

New alerts

License Policy Violation

License

This 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 risk

Package 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 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

License Policy Violation

License

This 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 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

12411

increased by4.25%

Number of package files

26

increased by18.18%

Lines of code

263

increased by9.13%

Worsened metrics

Dependency count

3

increased by50%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedreact-cosmos-renderer@6.0.0-canary.01bd836.0+01bd836

• Updatedlodash-es@4.17.21

• Updatedreact-cosmos-core@6.0.0-canary.01bd836.0+01bd836