fallback.ts

// @ts-nocheck
export default ({ error: { message: error }, render: Render }) => (
  <div>
    <h3>Error: {error}</h3>
    <Render error />
  </div>
);

helpers.ts

// @ts-nocheck
import noop from 'lodash/noop';
import { Component } from 'react';

export class Boundary extends Component {
  constructor(props) {
    super(props);

    this.state = { error: null };
  }

  static async = Promise;

  static render = noop;

  static use = noop;

  static getDerivedStateFromError(error) {
    return { error };
  }
}

hooks.ts

// @ts-nocheck
import { useCallback, useState } from 'react';

export const helpers = {
  increment: (value) => value + 1,
};

export default ({ network, props }) => {
  const [value, update] = useState(0);
  const increment = useCallback(() => update(helpers.increment), []);
  const fetch = useCallback(
    async () => network.fetch().then(update),
    [network]
  );

  return { fetch, increment, value, ...props };
};

index.ts

// @ts-nocheck
import styled from 'styled-components';
import { Suspense, lazy, useMemo, useCallback } from 'react';

import 'macros/controller/macro';

import { Boundary } from './helpers';
import Fallback from './fallback';

export const displayName = 'Lab';

export class Core extends Boundary {
  static displayName = `${displayName} → 🧠`;

  render() {
    const {
      props: { children, ...props },
      state: { error },
    } = this;

    return error ? (
      <Fallback error={error} render={Core.render} {...props} />
    ) : (
      children
    );
  }
}

export const inject = () => [
  import(/* webpackChunkName: "components/lab/hooks" */ './hooks'),
  import(/* webpackChunkName: "components/lab/network" */ './network'),
  import(/* webpackChunkName: "components/lab/statics" */ './statics'),
  import(/* webpackChunkName: "components/lab/style" */ './style'),
];

export const enhance = ([
  { default: use },
  network,
  statics,
  { default: style },
]) => {
  const render = styled(Object.assign(Raw, statics))`
    ${style}
  `;

  Object.assign(Core, { network, render, use });

  return { default: render };
};

export const load = () => Promise.all(inject()).then(enhance);

export const Render = lazy(load);

export const Raw = (props) => {
  const { className, error, fetch, increment, value } = Core.use({
    network: Core.network,
    props,
  });
  const status = useMemo(() => (error ? 'is not' : 'is'), [error]);

  return (
    <div className={className}>
      <p>This {status} the lab.</p>
      <pre>{JSON.stringify(value)}</pre>
      <button disabled={error} onClick={increment}>
        Increment
      </button>
      <button disabled={error} onClick={fetch}>
        Fetch {fetch.pending && 'ing...'}
      </button>
    </div>
  );
};

export const Enhanced = (props) => (
  <Core>
    <Suspense fallback={<p>Loading lab...</p>}>
      <Render {...props} />
    </Suspense>
  </Core>
);

export default Object.assign(Enhanced, { displayName });

network.ts

// @ts-nocheck
import random from 'lodash/random';

export const fetch = () => {
  const duration = random(1000, 3000);
  const sleep = (resolve) => window.setTimeout(resolve, duration, duration);

  return new Promise(sleep);
};

statics.ts

import { string } from 'prop-types';

export const defaultProps = {};

export const displayName = 'Lab → 💅';

export const propTypes = {
  className: string.isRequired,
};

style.ts

import { css } from 'styled-components';

export const error = css`
  &,
  button {
    cursor: not-allowed;
    text-decoration: line-through;
    user-select: none;
  }
`;

export default css`
  background-color: #${() => (0x1000000 + Math.random() * 0xffffff).toString(16).substring(1, 7)};
  ${(props) => props.error && error};
`;