vue#InjectionKey TypeScript Examples

useProvider = <T>(key: InjectionKey<Provider<T>>) => {
  const context = inject(key, null)
  if (context) {
    const instance = getCurrentInstance()!
    const { link, unlink, internalChildren, ...rest } = context
    link(instance)
    onUnmounted(() => unlink(instance))
    const idx = computed(() => internalChildren.indexOf(instance))
    return {
      context: rest,
      idx: idx.value
    }
  }
  return {
    context: null,
    idx: -1
  }
}

useChildren = <T extends Record<string, unknown>>(key: InjectionKey<ParentProvide<T>>, data: T) => {
  const children: ComponentInternalInstance[] = reactive([])
  provide(key, {
    ...data,
    children,
    insert: (child: ComponentInternalInstance) => {
      children.push(child)
    },
    remove: (child: ComponentInternalInstance) => {
      const index = children.indexOf(child)
      children.splice(index, 1)
    }
  })
}

notificationProviderInjectionKey: InjectionKey<Notification> =
  Symbol("notification")

READONLY_SKELETON_KEY: InjectionKey<SkeletonContext> = Symbol('skeletonKey')

parentSymbol: InjectionKey<FormKitNode> = Symbol('FormKitParent')

key: InjectionKey<IThemePlugin> = Symbol("key")

READONLY_LAYOUT_KEY: InjectionKey<LayoutContext> = Symbol('layoutkey')

key: InjectionKey<Store<StateType>> = Symbol()

I18nInjectionKey: InjectionKey<I18n> | string =
  /* #__PURE__*/ makeSymbol('global-vue-i18n')

key: InjectionKey<Store<storeTypes>> = Symbol()

TerminalInjectionKey: InjectionKey<TerminalInjection> =
    Symbol('Terminal')

key: InjectionKey<Store<RootState>> = Symbol()

RendererInjectionKey: InjectionKey<RendererPublicInterface> = Symbol('Renderer')

READONLY_AVATAR_KEY: InjectionKey<AvatarContext> = Symbol('avatarKey')

GLOBAL_OPTIONS_PROVIDE_KEY: InjectionKey<GlobalOptions> = Symbol(
  'GLOBAL_OPTIONS_PROVIDE_KEY',
)

key: InjectionKey<Store<State>> = Symbol()

Breadcrumb_IJK: InjectionKey<ParentProvide<BreadcrumbProvide>> = Symbol('BreadcrumbProvide')

key: InjectionKey<PageContext> = Symbol()

READONLY_SELECT_KEY: InjectionKey<SelectContext> = Symbol('selectKey')

ssrContextKey: InjectionKey<CssrSsrContext> = Symbol(
  '@css-render/vue3-ssr'
)

// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
export function createI18n(options: any = {}, VueI18nLegacy?: any): any {
  type _I18n = I18n & I18nInternal

  if (__BRIDGE__) {
    _legacyVueI18n = VueI18nLegacy
  }

  // prettier-ignore
  const __legacyMode = __LITE__
    ? false
    :  __FEATURE_LEGACY_API__ && isBoolean(options.legacy)
      ? options.legacy
      : __FEATURE_LEGACY_API__
  // prettier-ignore
  const __globalInjection = isBoolean(options.globalInjection)
      ? options.globalInjection
      : true
  // prettier-ignore
  const __allowComposition = __LITE__
    ? true
    :  __FEATURE_LEGACY_API__ && __legacyMode
      ? !!options.allowComposition
      : true
  const __instances = new Map<ComponentInternalInstance, VueI18n | Composer>()
  const [globalScope, __global] = createGlobal(
    options,
    __legacyMode,
    VueI18nLegacy
  )
  const symbol: InjectionKey<I18n> | string = /* #__PURE__*/ makeSymbol(
    __DEV__ ? 'vue-i18n' : ''
  )

  function __getInstance<Instance extends VueI18n | Composer>(
    component: ComponentInternalInstance
  ): Instance | null {
    return (__instances.get(component) as unknown as Instance) || null
  }
  function __setInstance<Instance extends VueI18n | Composer>(
    component: ComponentInternalInstance,
    instance: Instance
  ): void {
    __instances.set(component, instance)
  }
  function __deleteInstance(component: ComponentInternalInstance): void {
    __instances.delete(component)
  }

  if (!__BRIDGE__) {
    const i18n = {
      // mode
      get mode(): I18nMode {
        return !__LITE__ && __FEATURE_LEGACY_API__ && __legacyMode
          ? 'legacy'
          : 'composition'
      },
      // allowComposition
      get allowComposition(): boolean {
        return __allowComposition
      },
      // install plugin
      async install(app: App, ...options: unknown[]): Promise<void> {
        if (
          !__BRIDGE__ &&
          (__DEV__ || __FEATURE_PROD_VUE_DEVTOOLS__) &&
          !__NODE_JS__
        ) {
          app.__VUE_I18N__ = i18n as unknown as _I18n
        }

        // setup global provider
        app.__VUE_I18N_SYMBOL__ = symbol
        app.provide(app.__VUE_I18N_SYMBOL__, i18n as unknown as I18n)

        // global method and properties injection for Composition API
        if (!__legacyMode && __globalInjection) {
          injectGlobalFields(app, i18n.global as Composer)
        }

        // install built-in components and directive
        if (!__LITE__ && __FEATURE_FULL_INSTALL__) {
          applyNext(app, i18n as I18n, ...options)
        }

        // setup mixin for Legacy API
        if (!__LITE__ && __FEATURE_LEGACY_API__ && __legacyMode) {
          app.mixin(
            defineMixinNext(
              __global as unknown as VueI18n,
              (__global as unknown as VueI18nInternal).__composer as Composer,
              i18n as unknown as I18nInternal
            )
          )
        }

        // release global scope
        const unmountApp = app.unmount
        app.unmount = () => {
          i18n.dispose()
          unmountApp()
        }

        // setup vue-devtools plugin
        if ((__DEV__ || __FEATURE_PROD_VUE_DEVTOOLS__) && !__NODE_JS__) {
          const ret = await enableDevTools(app, i18n as _I18n)
          if (!ret) {
            throw createI18nError(
              I18nErrorCodes.CANNOT_SETUP_VUE_DEVTOOLS_PLUGIN
            )
          }
          const emitter: VueDevToolsEmitter =
            createEmitter<VueDevToolsEmitterEvents>()
          if (__legacyMode) {
            const _vueI18n = __global as unknown as VueI18nInternal
            _vueI18n.__enableEmitter && _vueI18n.__enableEmitter(emitter)
          } else {
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            const _composer = __global as any
            _composer[EnableEmitter] && _composer[EnableEmitter](emitter)
          }
          emitter.on('*', addTimelineEvent)
        }
      },
      // global accessor
      get global() {
        return __global
      },
      dispose(): void {
        globalScope.stop()
      },
      // @internal
      __instances,
      // @internal
      __getInstance,
      // @internal
      __setInstance,
      // @internal
      __deleteInstance
    }
    return i18n
  } else {
    // extend legacy VueI18n instance

    const i18n = (__global as any)[LegacyInstanceSymbol] // eslint-disable-line @typescript-eslint/no-explicit-any
    let _localeWatcher: Function | null = null
    Object.defineProperty(i18n, 'global', {
      get() {
        return __global
      }
    })
    Object.defineProperty(i18n, 'mode', {
      get() {
        return __legacyMode ? 'legacy' : 'composition'
      }
    })
    Object.defineProperty(i18n, 'allowComposition', {
      get() {
        return __allowComposition
      }
    })
    Object.defineProperty(i18n, '__instances', {
      get() {
        return __instances
      }
    })
    Object.defineProperty(i18n, 'install', {
      writable: true,
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      value: (Vue: any, ...options: unknown[]) => {
        const version =
          (Vue && Vue.version && Number(Vue.version.split('.')[0])) || -1
        if (version !== 2) {
          throw createI18nError(I18nErrorCodes.BRIDGE_SUPPORT_VUE_2_ONLY)
        }

        __FEATURE_FULL_INSTALL__ && applyBridge(Vue, ...options)

        if (!__legacyMode && __globalInjection) {
          _localeWatcher = injectGlobalFieldsForBridge(
            Vue,
            i18n,
            __global as Composer
          )
        }
        Vue.mixin(defineMixinBridge(i18n, _legacyVueI18n))
      }
    })
    Object.defineProperty(i18n, 'dispose', {
      value: (): void => {
        _localeWatcher && _localeWatcher()
        globalScope.stop()
      }
    })
    const methodMap = {
      __getInstance,
      __setInstance,
      __deleteInstance
    }
    Object.keys(methodMap).forEach(
      key =>
        Object.defineProperty(i18n, key, { value: (methodMap as any)[key] }) // eslint-disable-line @typescript-eslint/no-explicit-any
    )
    return i18n
  }
}