Registry

RegistryModule - набор функций для работы с паттерном Реестр в контексте Nuxt приложений

К реестру так же относится папка src/registry, в которой хранятся все пары ключ+тип

Module

Аргументы

sources

  • type: string[]

Пути к папкам переназначений и расширений реестра в проекте, мержит все источники в runtime папку, анализируя экспорты файлов для удобной работы без boilerplate с регистрацией элементов реестра.

В частности, добавляется alias #registry, указывающий на сгенерированную папку .nuxt/aggregator-registry.

Важно знать

  1. Нельзя использовать
export * from './some-file';

в файлах, определяющих registry, так как это требует рекурсивного анализа экспорта, что фактически означает загрузчик.

  1. Нельзя образаться к #registry внутри файлов, определяющих registry, исключением случаев reexport файлов.

defineRegistryItem

Предпочтительный способ создания и использования реестра в проектах

Аргументы

key

  • type: RegistryKey<T>

Используется для идентификация сущности в реестре и типизации этой сущности, подробнее в примерах

itemFactory

  • type: (context: RegistryContext) => T

Фабрика сущностей, вызывается единожды при первом использовании данной сущности

RegistryContext

Контекст передаваемый в itemFactory

// src/modules/registry/types.ts
interface RegistryContext extends Record<any, any> {}

Добавление свойств в контекст осуществляется через registryInstance.context.foo = 'foo' Пример из nuxt плагина

// nuxt-modules/registry/src/runtime/plugin3.ts
declare module 'shared-front/lib/modules/registry' {
  interface RegistryContext {
    $nuxt: NuxtApp;
    $pinia: Pinia;
    $axios: NuxtAxiosInstance;
  }
}

export default defineNuxtPlugin((nuxtApp) => {
  const registry = createRegistry();

  // @ts-ignore
  registry.context.$nuxt = nuxtApp;

  if (nuxtApp.pinia) {
    registry.context.$pinia = nuxtApp.pinia;
    nuxtApp.pinia._p.push(({ store }) => {
      Object.defineProperty(store, '$registry', {
        get: () => registry,
      });
    });
  }
  if (nuxtApp.$axios) registry.context.$axios = nuxtApp.$axios;
});

Return

  • type: (registry?: Registry) => T

provideRegistryItem

Более простая версия defineRegistryItem для добавления в реестр, ничего не возвращает, помещает сущность в реестр, не перезаписывает текущее значение

Аргументы

key

  • type: RegistryKey<T>

Используется для идентификация сущности в реестре и типизации этой сущности, подробнее в примерах

item

  • type: T = any

Сущность которую необходимо добавить в реестр

registry

  • type: Registry
  • required: false

Указание конкретного реестра, актуально при использовании к примеру в pinia

useRegistryItem

Типичный способ использования реестра из shared-front

Аргументы

key

  • type: RegistryKey<T>

Используется для идентификация сущности в реестре и типизации этой сущности, подробнее в примерах

registry

  • type: Registry
  • required: false

Указание конкретного реестра, актуально при использовании к примеру в pinia

Error

При отсутствии сущности в реестре выбрасывается исключение

Return

Сущность по выбранному ключу

useRegistryWrapper

Обертка для useRegistryItem

  (registry?: Registry) =>
    useRegistryItem(key, registry, defaultItemFactory);

Example

// src/registry/example.ts
import type { RegistryKey } from '#sf/modules/registry';
import { useRegistryWrapper } from '#sf/modules/registry';

export interface Example {
  foo: string;

  bar: number;
}

export const exampleRegistryKey = Symbol('example registry-key') as RegistryKey<Example>;

export default useRegistryWrapper(exampleRegistryKey);
// work24/registry/example

import { exampleRegistryKey } from 'shared-front/lib/modules/registry';
import { defineRegistryItem } from 'shared-front/lib/composition/registry';


export default defineRegistryItem(exampleRegistryKey, () => ({
  foo: 'foo',

  bar: 124,
}));
// work24/pages/foo

import useExample from '#registry/example';

const example = useExample();
// src/components/foo/bar.ts

import { exampleRegistryKey } from '#registry';
import useExample, { useRegistryItem } from '#sf/modules/registry';


const example = useRegistryItem(exampleRegistryKey);
// Идентично
const example = useExample();

Guide

Более подробный гайд по использованию реестра