docs/canons/slm-design/examples/react/factory.md

title, description

title	description
Создание фабрики	Пример создания фабрики business-модуля в React-проекте

Создание фабрики

Раздел показывает, как оформить фабрику business-модуля в React-проекте: описать публичный API, зависимости и функцию, возвращающую runtime API.

Структура business-модуля

Фабрика лежит в корне business-модуля. Типы публичного API и зависимостей размещаются в types/.

business/customer/
├── customer.factory.ts
├── hooks/
├── types/
│   ├── customer.type.ts
│   ├── customer-api.type.ts
│   └── customer-factory.type.ts
├── ui/
└── index.ts

Тип публичного API

Публичный API описывает runtime-возможности, которые модуль отдаёт потребителям: хуки, компоненты и сценарные методы.

// business/customer/types/customer-api.type.ts
import type { ReactNode } from 'react'
import type { Customer } from './customer.type'

export type CustomerCardProps = {
  customer: Customer
}

export type CustomerApi = {
  useCustomer: () => Customer | null
  CustomerCard: (props: CustomerCardProps) => ReactNode
}

// business/customer/types/customer-factory.type.ts
import type { CustomerApi } from './customer-api.type'

export type CustomerFactory = () => CustomerApi

Фабрика без зависимостей

Если модулю не нужны другие домены в runtime, фабрика создаётся без аргументов.

// business/customer/customer.factory.ts
import { useCustomer } from './hooks/use-customer.hook'
import { CustomerCard } from './ui/customer-card'
import type { CustomerFactory } from './types/customer-factory.type'

export const customerFactory: CustomerFactory = () => {
  return {
    useCustomer,
    CustomerCard,
  }
}

// business/customer/index.ts
export { customerFactory } from './customer.factory'

export type { Customer } from './types/customer.type'
export type { CustomerApi } from './types/customer-api.type'
export type { CustomerFactory } from './types/customer-factory.type'

Фабрика с зависимостями

Если модулю нужен другой домен в runtime, зависимость передаётся аргументом фабрики. Тип зависимости описывает только нужную часть API.

// business/order/types/order-deps.type.ts
import type { CustomerApi } from '@/business/customer'

export type OrderDeps = {
  customer: Pick<CustomerApi, 'useCustomer'>
}

// business/order/types/order-factory.type.ts
import type { OrderApi } from './order-api.type'
import type { OrderDeps } from './order-deps.type'

export type OrderFactory = (deps: OrderDeps) => OrderApi

// business/order/order.factory.ts
import { createUseOrder } from './hooks/use-order.hook'
import { OrderCard } from './ui/order-card'
import type { OrderFactory } from './types/order-factory.type'

export const orderFactory: OrderFactory = (deps) => {
  const useOrder = createUseOrder(deps)

  return {
    useOrder,
    OrderCard,
  }
}