feat: implement withErrorBoundary()

README.md

@@ -66,8 +66,6 @@ const MyComponent = mock();
         - [`<ViewportScrollSensor>`](./docs/en/ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./docs/en/ViewportSensor.md#viewportobserversensor)
      - [`<WindowScrollSensor>`](./docs/en/WindowScrollSensor.md), [`withWindowScroll()`](./docs/en/WindowScrollSensor.md#withwindowscroll-hoc), and [`@withWindowScroll`](./docs/en/WindowScrollSensor.md#withwindowscroll-decorator)
      - [`<WindowSizeSensor>`](./docs/en/WindowSizeSensor.md), [`withWindowSize()`](./docs/en/WindowSizeSensor.md#withwindowsize-hoc), and [`@withWindowSize`](./docs/en/WindowSizeSensor.md#withwindowsize-decorator)
-     - `ActiveSensor`, `withActive()`, and `@withActive`
-     - `FocusSensor`, `withFocus()`, and `@withFocus`
   - [Context](./docs/en/Context.md)
      - [`<Provider>`](./docs/en/Provider.md#provider), [`<Consumer>`](./docs/en/Provider.md#consumer), [`withContext()`](./docs/en/Provider.md#withcontext-hoc), and [`@withContext`](./docs/en/Provider.md#withcontext-decorator)
      - [`<Theme>`](./docs/en/theme.md#theme), [`<Themed>`](./docs/en/theme.md#themed), [`withTheme()`](./docs/en/theme.md#withtheme-hoc), and [`@withTheme`](./docs/en/theme.md#withtheme-decorator)
@@ -81,7 +79,7 @@ const MyComponent = mock();
      - [`go()`](./docs/en/routing.md#go), `<Redirect>`, `<Link>`, [`<Sms>`](./docs/en/Sms.md), [`<Mailto>`](./docs/en/Mailto.md), and `<Tel>`
   - [Boundaries](./docs/en/Boundaries.md)
      - [`<BrowserOnly>`](./docs/en/BrowserOnly.md), [`<ServerOnly>`](./docs/en/ServerOnly.md), and [`<ElectronOnly>`](./docs/en/ElectronOnly.md)
-     - [`<ErrorBoundary>`](./docs/en/ErrorBoundary.md) and `withErrorBoundary()`
+     - [`<ErrorBoundary>`](./docs/en/ErrorBoundary.md) and [`withErrorBoundary()`](./docs/en/ErrorBoundary.md#witherrorboundary-hoc)
      - `<CacheBoundary>`
   - [UI](./docs/en/UI.md)
      - [`<Portal>`](./docs/en/Portal.md) and [`<Overlay>`](./docs/en/Overlay.md)

docs/en/ErrorBoundary.md

@@ -37,3 +37,22 @@ interface IErrorBoundaryState {
 
   - `renderError` — renderer called if error happened in error boundary's children.
   - `onError` — event called every time error detected.
+
+
+## `withErrorBoundary` HOC
+
+Wraps your component into an error boundary.
+
+```jsx
+import {withErrorBoundary} from 'libreact/lib/ErrorBoundary';
+
+const SafeComponent = withErrorBoundary(UnsafeComponent, {
+  renderError: () => <div>Error happened!</div>
+});
+```
+
+Signature
+
+```ts
+withErrorBoundary(Comp, boundaryProps: IErrorBoundaryProps)
+```

docs/en/README.md

@@ -48,7 +48,7 @@
      - [`go()`](./routing.md#go), `<Redirect>`, `<Link>`, [`<Sms>`](./Sms.md), [`<Mailto>`](./Mailto.md), and `<Tel>`
   - [Boundaries](./Boundaries.md)
      - [`<BrowserOnly>`](./BrowserOnly.md), [`<ServerOnly>`](./ServerOnly.md), and [`<ElectronOnly>`](./ElectronOnly.md)
-     - [`<ErrorBoundary>`](./ErrorBoundary.md) and `withErrorBoundary()`
+     - [`<ErrorBoundary>`](./ErrorBoundary.md) and [`withErrorBoundary()`](./ErrorBoundary.md#witherrorboundary-hoc)
      - `<CacheBoundary>`
   - [UI](./UI.md)
      - [`<Portal>`](./Portal.md) and [`<Overlay>`](./Overlay.md)

src/ErrorBoundary/__story__/story.tsx

@@ -2,7 +2,7 @@ import {Component, createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
 import {linkTo} from '@storybook/addon-links';
-import {ErrorBoundary} from '..';
+import {ErrorBoundary, withErrorBoundary} from '..';
 import ShowDocs from '../../../.storybook/ShowDocs'
 
 class BuggyCounter extends Component<any, any> {
@@ -29,6 +29,10 @@ class BuggyCounter extends Component<any, any> {
   }
 }
 
+const Hoc1 = withErrorBoundary(BuggyCounter, {
+  renderError: () => <div>Errror!</div>
+});
+
 storiesOf('Boundaries/ErrorBoundary', module)
   .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/ErrorBoundary.md')}))
   .add('Renders children', () =>
@@ -42,4 +46,5 @@ storiesOf('Boundaries/ErrorBoundary', module)
     <ErrorBoundary renderError={() => <div>Caught error!</div>}>
       <BuggyCounter />
     </ErrorBoundary>
-  );
+  )
+  .add('HOC', () => <Hoc1 />);

src/ErrorBoundary/index.ts

@@ -1,6 +1,5 @@
 import {Component} from 'react';
-import faccToHoc from '../util/faccToHoc';
-import {noop} from '../util';
+import {h, noop} from '../util';
 
 export interface IErrorBoundaryProps {
   children: any;
@@ -36,4 +35,8 @@ export class ErrorBoundary extends Component<any, any> {
   }
 }
 
-export const withErrorBoundary = faccToHoc(ErrorBoundary, 'error');
+export const withErrorBoundary = (Comp, boundaryProps) => (props) => {
+  return h(ErrorBoundary, boundaryProps,
+    h(Comp, props)
+  );
+};

src/util/faccToHoc.ts

@@ -20,7 +20,7 @@ const faccToHoc = (Facc, prop?: string, wrapper = noWrap) => {
     const Enhanced = (props) =>
       h(Facc, faccProps, (state) => wrapper(Comp, propName, props, state));
 
-    return addClassDecoratorSupport(Enhanced);
+    return isClassDecoratorMethodCall ? addClassDecoratorSupport(Enhanced) : Enhanced;
   };
 
   return hoc;