Разделить методы рендеринга React в отдельный пакет npm

Предполагается, что опубликованный пакет будет построен для ES5 традиционным способом, опционально с использованием экспорта и импорта ES6 (сборка ESM) для более эффективного использования в модульных средах.

Импорт и экспорт ES6 статичны. Их нельзя поменять местами, по крайней мере, без изменения модуля в инструменте сборки. В то время как динамический import() - это предложение, а не часть ES6. Это предотвратило бы эффективное встряхивание дерева, это привело бы к включению как web, так и native в комплект, даже если один из них не используется.

Чтобы сделать core независимым от рендерера, следует использовать некоторые вариации DI.

Один из способов - разрешить какую-то систему плагинов в core:

import { configureRenderer } from '@foo/core';
import * as renderers from '@foo/web';

configureRenderer(renderers);

Это может работать в некоторых случаях, но это не очень хорошо работает с компонентами, потому что это предотвращает раскачку дерева renderers и ограничивает использование core. В этом случае может работать native или web. This results inwebpackage bundled entirely, even if only small portion is used. The restriction tonativeor web, поскольку платформы являются взаимоисключающими, но это не так. В целом не удачное дизайнерское решение.

Лучше всего реализовать это наоборот. core не имеет зависимостей и содержит общие абстракции, в то время как web и native являются конкретными реализациями. Это может быть решено с помощью наследования ООП с компонентами класса, и есть много возможностей реализовать DI с функциональным подходом, тот, который подходит для этого случая, - визуализировать опору (отсюда и название):

// @foo/core
export class Home extends Component {
    ...
    render() {
        const {render, ...props} = this.props;
        return render(props);
    }
}

// @foo/web
import { Home as HomeWithoutRenderer } from '@foo/core';

const rendererHOC = (Comp, renderer) => props => <Comp render = {renderer} ...props />;

export const Home = rendererHOC(HomeWithoutRenderer, props => {
  // platform-specific view
});