🧠.ts

import { Suspense, createElement, forwardRef, lazy } from 'react';

import { css } from '@/tools/emotion';

export const enhance = ([{ default: render }, { default: style }]) => {
  const className = css({ name: render.hash }, style);
  const component = (props, ref) =>
    createElement(forwardRef(Object.assign(render, { displayName: '✨' })), {
      ...props,
      className,
      ref
    });

  return { default: forwardRef(Object.assign(component, { displayName: '💅' })) };
};

export const require = () => [import('./render'), import('./style')];

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

export const Lazy = lazy(load);

export const fallback = 'Loading...';

export const Core = (props, ref) => {
  const children = createElement(Lazy, { ...props, ref });

  return createElement(Suspense, { fallback }, children);
};

export default forwardRef(Core);