@bem-react/di: Improve DX [RFC]

[yarastqt]

Можно немного ослабить связь между view и di убрав напрямую обращение в useComponentRegistry(id) из @bem-react/di, т.к. у нас все сущности хранятся в реестре, а реестр хранится рядом с компонентом, то можно делать как-то так:

App/registry/index.ts

import { FC } from 'react'
import { createRegistry, createDepsHook } from '@bem-react/di'

type AppDeps = {
  Button: FC<any>
  Input: FC<any>
}

// Тут просто заменил конструктор на фабрику, внутри можно генерировать id,
// т.к. по факту этот id больше нигде не используется, если нужно будет
// переопределить какой-то компонент в эксперименте, можно сделать форк реестра.
export const registry = createRegistry<AppDeps>()
// Хелпер, который внутри себя вызывает useComponentRegistry.
export const useDeps = createDepsHook<AppDeps>(registry.id)

// Можно сделать альтертативный вариант, возвращать тапл:
export const [registry, useDeps] = createRegistry<AppDeps>()

App/registry/desktop.tsx

import { registry as emptyRegistry } from './index'

// Метод fork копирует полностью реестр, по аналогии с merge,
// но в качестве аргумента принимает хэшсет с компонентами.
export const registry = emptyRegistry.fork({
  Button: () => <button>login</button>,
  Input: () => <input placeholder="email" />,
})

// Либо альтертативный вариант:
export const registry = emptyRegistry
  .fork()
  .fill({
    Button: () => <button>login</button>,
    Input: () => <input placeholder="email" />,
  })

App.tsx

import { useDeps } from './registry/index'

export const App = () => {
  // Тут мы ничего не знаем про реализацию DI,
  // просто берем зависимости из своего реестра,
  // к тому же имеем сразу вывод типов.
  const { Button, Input } = useDeps()
  
  return (
    <>
      <Button />
      <Input />
    </>
  )
}

[email protected]

import { withRegistry } from '@bem-react/di'
import { registry } from './App/registry/desktop'
import { App as AppCommon } from './App'

export const App = withRegistry(registry)(App)

TODO

• Подумать как использовать с компонентами на классах

[yarastqt]

Так же метод fork позволит не пересоздавать руками заново реестр с переопределениями и не указывать для него нужный интерфейс.

[belozer]

> `export const useDeps = createDepsHook<AppDeps>(registry.id)`

мне кажется, что это равносильно

> export const useDeps = () => useComponentRegistry<AppDeps>(registry.id)

[yarastqt]

Ну... да :) можно вообще это все инкапсулировать внутри фабрики для создания реестра