Эмуляция реестра компонентов Vue: глобальная/локальная регистрация и разрешение имён

// Эмулируем реестр компонентов Vue: регистрация и поиск по имени

// Глобальный реестр (аналог app.component())
class ComponentRegistry {
  constructor() {
    this._global = new Map()
  }

  // Глобальная регистрация
  registerGlobal(name, definition) {
    // Нормализуем имя: поддерживаем PascalCase и kebab-case
    const normalized = this._normalize(name)
    this._global.set(normalized, definition)
    console.log(`  [global] Зарегистрирован: "${name}" (ключ: "${normalized}")`)
  }

  // Создать контекст компонента с локальными регистрациями
  createContext(localComponents = {}) {
    const registry = this
    const local = new Map(
      Object.entries(localComponents).map(([k, v]) => [registry._normalize(k), v])
    )

    return {
      resolve(name) {
        const key = registry._normalize(name)

        // Сначала ищем локально
        if (local.has(key)) {
          const comp = local.get(key)
          console.log(`  [resolve] "${name}" найден ЛОКАЛЬНО`)
          return comp
        }

        // Затем глобально
        if (registry._global.has(key)) {
          const comp = registry._global.get(key)
          console.log(`  [resolve] "${name}" найден ГЛОБАЛЬНО`)
          return comp
        }

        console.warn(`  [resolve] "${name}" НЕ НАЙДЕН!`)
        return null
      },

      listLocal() {
        return [...local.keys()]
      }
    }
  }

  // PascalCase -> kebab-case для унификации
  _normalize(name) {
    return name
      .replace(/([A-Z])/g, (_, c, i) => (i === 0 ? c.toLowerCase() : `-${c.toLowerCase()}`))
  }

  listGlobal() {
    return [...this._global.keys()]
  }
}

// Базовые компоненты (псевдо-определения)
const BaseButton = { name: 'BaseButton', template: '<button>...</button>' }
const BaseInput = { name: 'BaseInput', template: '<input>...' }
const BaseModal = { name: 'BaseModal', template: '<dialog>...</dialog>' }
const UserCard = { name: 'UserCard', template: '<div class="user-card">...</div>' }
const PaymentForm = { name: 'PaymentForm', template: '<form>...</form>' }

// === Настройка глобального реестра ===
console.log('=== Глобальная регистрация (app.component) ===')
const registry = new ComponentRegistry()

registry.registerGlobal('BaseButton', BaseButton)
registry.registerGlobal('BaseInput', BaseInput)
registry.registerGlobal('BaseModal', BaseModal)

console.log('Глобальные компоненты:', registry.listGlobal())

// === Локальная регистрация в компоненте ===
console.log('\n=== Локальная регистрация (<script setup> import) ===')

// Компонент UserProfile: импортирует UserCard локально
const userProfileContext = registry.createContext({
  UserCard,  // только здесь доступен UserCard
})

console.log('Локальные компоненты UserProfile:', userProfileContext.listLocal())

// === Разрешение компонентов ===
console.log('\n=== Разрешение компонентов ===')

// В UserProfile доступны: локальные + глобальные
userProfileContext.resolve('UserCard')   // локальный
userProfileContext.resolve('BaseButton') // глобальный
userProfileContext.resolve('base-input') // kebab-case тоже работает
userProfileContext.resolve('PaymentForm') // не зарегистрирован -> предупреждение

// Компонент без локальных регистраций — только глобальные
console.log('\n=== Контекст без локальных компонентов ===')
const simpleContext = registry.createContext()
simpleContext.resolve('BaseModal')   // глобальный
simpleContext.resolve('UserCard')    // не найден

// === Паттерн: плагин ===
console.log('\n=== Паттерн: регистрация через плагин ===')
function UIPlugin(appRegistry) {
  appRegistry.registerGlobal('BaseButton', BaseButton)
  appRegistry.registerGlobal('BaseInput', BaseInput)
  console.log('  UIPlugin установлен')
}

const newRegistry = new ComponentRegistry()
UIPlugin(newRegistry)
console.log('После установки UIPlugin:', newRegistry.listGlobal())