		@@ -1,11 +0,7 @@
		/// <reference types="react" />
		import { Omit } from '@shopify/useful-types';
		import { EffectManager } from './context';
		import { EffectKind } from './types';
		interface Props {
		kind?: EffectKind;
		manager?: EffectManager;
		perform(): any;
		}
		export default function Effect(props: Omit<Props, 'manager'>): JSX.Element \| null;
		export default function Effect({ kind, perform }: Props): null;
		export {};

dist/Effect.js

		"use strict";
		Object.defineProperty(exports, "__esModule", { value: true });
		var tslib_1 = require("tslib");
		var React = tslib_1.__importStar(require("react"));
		var context_1 = require("./context");
		var ConnectedEffect = /** @class */ (function (_super) {
		tslib_1.__extends(ConnectedEffect, _super);
		function ConnectedEffect() {
		return _super !== null && _super.apply(this, arguments) \|\| this;
		}
		ConnectedEffect.prototype.render = function () {
		this.perform();
		return this.props.children \|\| null;
		};
		ConnectedEffect.prototype.perform = function () {
		var _a = this.props, kind = _a.kind, manager = _a.manager, perform = _a.perform;
		if (manager == null \|\| (kind != null && !manager.shouldPerform(kind))) {
		return;
		}
		manager.add(perform(), kind);
		};
		return ConnectedEffect;
		}(React.PureComponent));
		function Effect(props) {
		if (typeof window !== 'undefined') {
		return null;
		}
		return (React.createElement(context_1.EffectContext.Consumer, null, function (manager) { return React.createElement(ConnectedEffect, tslib_1.__assign({ manager: manager }, props)); }));
		var hook_1 = require("./hook");
		function Effect(_a) {
		var kind = _a.kind, perform = _a.perform;
		hook_1.useServerEffect(perform, kind);
		return null;
		}
		exports.default = Effect;

dist/index.d.ts

		export { default as Effect } from './Effect';
		export { EffectManager } from './context';
		export { EffectKind } from './types';
		export { useServerEffect } from './hook';
		export { restrictToServer } from './utilities';

dist/index.js

		@@ -7,1 +7,5 @@ "use strict";
		exports.EffectManager = context_1.EffectManager;
		var hook_1 = require("./hook");
		exports.useServerEffect = hook_1.useServerEffect;
		var utilities_1 = require("./utilities");
		exports.restrictToServer = utilities_1.restrictToServer;

package.json

		{
		"name": "@shopify/react-effect",
		"version": "2.0.1",
		"version": "3.0.0-beta.1",
		"license": "MIT",
		@@ -5,0 +5,0 @@ "description": "A component and set of utilities for performing effects within a universal React app",

README.md

		@@ -16,11 +16,12 @@ # `@shopify/react-effect`

		### `<Effect />`
		### `useServerEffect()`

		This package is largely built around a component, `Effect`. To set up an action to be performed, use the `perform` prop:
		This package is largely built around a hook, `useServerEffect`. The only mandatory argument is a function, which is the "effect" you wish to perform during each pass of server rendering:

		```tsx
		import {Effect} from '@shopify/react-effect';
		import {useServerEffect} from '@shopify/react-effect';

		export default function MyComponent() {
		return <Effect perform={() => console.log('Doing something!')} />;
		useServerEffect(() => console.log('Doing something!'));
		return null;
		}
		@@ -31,8 +32,11 @@ ```

		This component accepts three additional optional properties:
		This hook also accepts a second, optional argument: the effect "kind". This should be an object that:

		- `kind`: a description of the effect. This kind, if provided, must have an `id` that is a unique symbol, and can optionally have `betweenEachPass` and `afterEachPass` functions that add additional logic to the `betweenEachPass` and `afterEachPass` options for `extract()`.
		- Must have an `id` that is a unique symbol
		- Optionally has `betweenEachPass` and/ or `afterEachPass` functions that add additional logic to the `betweenEachPass` and `afterEachPass` options for `extract()`

		This component also accepts children which are rendered as-is.
		### `<Effect />`

		This component is now deprecated in favour of `useServerEffect`. It will removed in the next major version of `@shopify/react-effect`.

		### `extract()`
		@@ -39,0 +43,0 @@

@shopify/react-effect - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics