chore(kumahq/container): allows us to use multiple containers at once (#5082)

Adds `createBuilder` function instead of `build` to let us use multiple
containers in one application.

Mostly just grunt work to get this done by passing through extra
arguments to thing.

Remember: I'm very close to replacing this entire file and the brandijs
dependency so this is very "lets just get this done" mode, with an eye
to replacing with my other better thing at some point.

Signed-off-by: John Cowen <john.cowen@konghq.com>

Author: johncowen

package-lock.json

@@ -4,14 +4,18 @@ import {
   injected,
 } from 'brandi'
 import deepmerge from 'deepmerge'
+import { inject } from 'vue'
 
 import type {
   Token,
   TokenType,
   TokenValue,
   RequiredToken,
   OptionalToken,
+  Container,
 } from 'brandi'
+import type { InjectionKey } from 'vue'
+
 
 export {
   token,
@@ -49,14 +53,51 @@ export type ServiceConfigurator<T = Record<string, Token>> = ($: T) => ServiceDe
 export type Alias<T extends (...args: never[]) => unknown> = (...rest: Parameters<T>) => ReturnType<T>
 export type Decorator<T extends TokenValue> = TokenType<T>
 export type ReturnDecorated<T extends TokenValue> = () => TokenType<T>
-export let container = createContainer()
-let labelMap = new WeakMap()
 
 //
 export const merge = (...definitions: Array<ServiceDefinition[]>): ServiceDefinition[] => {
   return [...new Map([...definitions.flat()]).entries()]
 }
-const decorate = (entries: ServiceDefinition[]) => {
+export type Getter = <T extends TokenValue>(t: T) => TokenType<T>
+
+export const injectionKey = Symbol() as InjectionKey<Getter>
+
+export const createBuilder = () => {
+  const container = createContainer()
+  const labelMap = new WeakMap()
+  return {
+    build: (...entries: Array<ServiceDefinition[]>) => {
+      const get = <T extends TokenValue>(token: T) => {
+        try {
+          return container.get(token)
+        } catch (e) {
+          console.error(`error resolving ${token.__d}`)
+          throw e
+        }
+      }
+      const merged = decorate(merge(...entries), get)
+      merged.forEach(([t, config]) => service(t, config, container, labelMap))
+      return get
+    },
+    destroy: () => { },
+    injectionKey,
+    container,
+  }
+
+}
+
+export const createInjections = <T extends TokenValue[]>(...tokens: T): InjectionHooks<T> => {
+  return tokens.map((token) => () => {
+    const get = inject(injectionKey)
+    if(typeof get !== 'undefined') {
+      return get(token)
+    }
+    throw new Error(`Unable to find container for ${token.__d}`)
+  }) as InjectionHooks<T>
+}
+
+
+const decorate = (entries: ServiceDefinition[], get: Getter) => {
   const map = new Map(entries)
   entries.forEach(([_token, definition]) => {
     if (typeof definition.decorates !== 'undefined') {
@@ -94,29 +135,8 @@ const decorate = (entries: ServiceDefinition[]) => {
   })
   return [...map.entries()]
 }
-export const get = <T extends TokenValue>(token: T): TokenType<T> => {
-  try {
-    return container.get(token)
-  } catch (e) {
-    console.error(`error resolving ${token.__d}`)
-    throw e
-  }
-}
-export const build = (...entries: Array<ServiceDefinition[]>): typeof get => {
-  container = createContainer()
-  labelMap = new WeakMap()
-  const merged = decorate(merge(...entries))
-  merged.forEach(item => service(...item))
-  return get
-}
-
-export const createInjections = <T extends TokenValue[]>(
-  ...tokens: T
-): InjectionHooks<T> =>
-  tokens.map((token) => () => get(token)) as InjectionHooks<T>
-//
 
-export const service = (t: Token, config: DependencyDefinition): void => {
+const service = (t: Token, config: DependencyDefinition, container: Container, labelMap: WeakMap<Token, Token[]>): void => {
   const bound = container.bind(t)
   switch (true) {
     case 'constant' in config:
@@ -134,27 +154,33 @@ export const service = (t: Token, config: DependencyDefinition): void => {
     config.labels.forEach((label: Token) => {
       if (!labelMap.has(label)) {
         labelMap.set(label, [])
-        service(label, {
-          service: () => {
-            return labelMap.get(label).reduce((prev: unknown[], TOKEN: Token) => {
-              try {
-                const service = get(TOKEN)
-                if (Array.isArray(service)) {
-                  return prev.concat(service)
-                } else if (service instanceof Object) {
-                  return deepmerge(prev, service)
-                } else {
-                  return prev
+        service(
+          label,
+          {
+            service: () => {
+              // @ts-ignore
+              return labelMap.get(label)!.reduce((prev: Token[], TOKEN) => {
+                try {
+                  const service = container.get(TOKEN)
+                  if (Array.isArray(service)) {
+                    return prev.concat(service)
+                  } else if (service instanceof Object) {
+                    return deepmerge(prev, service)
+                  } else {
+                    return prev
+                  }
+                } catch (e) {
+                  console.error(e)
+                  throw e
                 }
-              } catch (e) {
-                console.error(e)
-                throw e
-              }
-            }, [])
+              }, [] as Token[])
+            },
           },
-        })
+          container,
+          labelMap,
+        )
       }
-      const tokens = labelMap.get(label)
+      const tokens = labelMap.get(label)!
       tokens.push(t)
     })
   }
@@ -167,9 +193,3 @@ export const service = (t: Token, config: DependencyDefinition): void => {
     injected(...([config.service, ...config.arguments] as Parameters<typeof injected>))
   }
 }
-export const constant = <T>(func: T, config: { description: string }): Token<T> => {
-  const t = token<T>(config.description)
-  const bound = container.bind(t)
-  bound.toConstant(func as Parameters<typeof bound.toConstant>[0])
-  return t as Token<T>
-}

packages/container/index.ts

@@ -13,7 +13,8 @@
   },
   "dependencies": {
     "brandi": "^5.1.0",
-    "deepmerge": "^4.3.1"
+    "deepmerge": "^4.3.1",
+    "vue": "^3"
   },
   "devDependencies": {
     "@kumahq/config": "*"

packages/container/package.json

@@ -1,4 +1,4 @@
-import { build, token } from '@kumahq/container'
+import { createBuilder, token } from '@kumahq/container'
 import { setupSteps } from '@kumahq/gherkin-web/playwright'
 import env from '@kumahq/settings/env'
 
@@ -15,6 +15,7 @@ export { test } from '@kumahq/gherkin-web/playwright'
     env: token<typeof env>('playwright.env'),
     vars: token('playwright.env.vars'),
   }
+  const { build } = createBuilder()
   const get = build(
     // mocks
     fakeFs($),

packages/kuma-gui/playwright/main.ts

@@ -1,31 +1,37 @@
-import { token, get } from '@kumahq/container'
+import { token } from '@kumahq/container'
 import { Cookie } from '@kumahq/fake-api'
 
 import debugI18n from './services/i18n/DebugI18n'
 import type { Env } from '@/app/application'
 import type { ServiceDefinition, Token } from '@kumahq/container'
 
 type I18n = ReturnType<typeof debugI18n>
-
 export const services = (app: Record<string, Token>, prefix = 'KUMA'): ServiceDefinition[] => [
   [token('i18n.debug'), {
-    service: (i18n: () => I18n) => {
-      const env = get(app.env) as Env
-      // @ts-ignore PREFIX_I18N_DEBUG_ENABLED is debug only
-      if (env(`${prefix}_I18N_DEBUG_ENABLED`).length > 0) {
-        return debugI18n(i18n())
+    service: (useI18n: () => I18n) => {
+      const i18n = useI18n()
+      return {
+        ...i18n,
+        t: (...args: Parameters<typeof i18n['t']>) => {
+          const cookies = Cookie.parse(document.cookie ?? '', { prefix: `${prefix}_` })
+          const env = (key: string) => {
+            return cookies[key] ?? ''
+          }
+          if (env(`${prefix}_I18N_DEBUG_ENABLED`).length > 0) {
+            return args[0]
+          }
+          return i18n.t(...args)
+        } ,
       }
-      return i18n()
     },
     decorates: app.i18n,
   }],
   [token('env.debug'), {
-    service: (getEnv: () => Env) => {
-
-      const env = getEnv()
-      return (...[ key, ...rest ]: Parameters<Env>) => {
+    service: (useEnv: () => Env) => {
+      const env = useEnv()
+      return (...[key, ...rest]: Parameters<Env>) => {
         // make sure you can't read/replace anything but PREFIX_*
-        return Cookie.parse(document.cookie ?? '', { prefix: `${prefix}_`})[key] ?? env(key, ...rest)
+        return Cookie.parse(document.cookie ?? '', { prefix: `${prefix}_` })[key] ?? env(key, ...rest)
       }
     },
     decorates: app.env,

packages/kuma-gui/src/app/application/debug.ts

@@ -13,9 +13,9 @@ import KumaTargetRef from '@/app/kuma/components/kuma-target-ref/KumaTargetRef.v
 import { ApiError } from '@/app/kuma/services/kuma-api/ApiError'
 import KumaApi from '@/app/kuma/services/kuma-api/KumaApi'
 import { RestClient } from '@/app/kuma/services/kuma-api/RestClient'
-import { useRouter } from '@/app/vue'
 import type { ServiceDefinition } from '@kumahq/container'
 import type { DataSourcePool } from '@kumahq/data'
+import type { Router } from 'vue-router'
 
 export * from './utils'
 export { Kri } from './kri'
@@ -59,7 +59,7 @@ function normalizeBaseUrl(url: string): string {
   return stripTrailingSlashes(url)
 }
 
-const protocolHandler = (can: Can) => {
+const protocolHandler = (can: Can, router: Router) => {
   return (href: string) => {
     const kriProto = 'kri://'
     switch (true) {
@@ -138,7 +138,6 @@ const protocolHandler = (can: Can) => {
           }
         })()
         if (to) {
-          const router = useRouter()
           try {
             return router.resolve(to).href
           } catch(e) {
@@ -158,19 +157,20 @@ const protocolHandler = (can: Can) => {
 export const services = (app: Record<string, Token>): ServiceDefinition[] => {
   return [
     [token('kuma.plugins'), {
-      service: (i18n, can) => {
+      service: (i18n, can, router) => {
         return [
           [Kongponents],
           [X, {
             i18n,
-            protocolHandler: protocolHandler(can),
+            protocolHandler: protocolHandler(can, router),
             routerElement: () => document.querySelector('.kuma-application'),
           }],
         ]
       },
       arguments: [
         app.i18n,
         app.can,
+        app.router,
       ],
       labels: [
         app.plugins,

packages/kuma-gui/src/app/kuma/index.ts

@@ -1,7 +1,7 @@
 // Importing styles here enforces a consistent stylesheet order between the Vite development server and the production build. See https://github.com/vitejs/vite/issues/4890.
 import './assets/styles/main.scss'
 
-import { build } from '@kumahq/container'
+import { createBuilder } from '@kumahq/container'
 import { createApp } from 'vue'
 
 import { services as application, TOKENS as APPLICATION } from '@/app/application'
@@ -32,6 +32,7 @@ async function mountVueApplication() {
     ...KUMA,
   }
 
+  const { build, injectionKey } = createBuilder()
   const get = build(
     vue($),
     application($),
@@ -89,8 +90,9 @@ async function mountVueApplication() {
     const msw = await import('@/app/msw')
     await get(msw.TOKENS.msw)
   }
-  const app = createApp((await import('./app/App.vue')).default);
-  (await get($.app)(app)).mount('#app')
+  const app = createApp((await import('./app/App.vue')).default)
+  app.provide(injectionKey, get)
+  ;(await get($.app)(app)).mount('#app')
 }
 
 mountVueApplication()

packages/kuma-gui/src/main.ts

@@ -3,7 +3,7 @@
 // vitest's `setupFiles` property, please see `/vite.config.production.ts`
 
 import { defaultKumaHtmlVars as htmlVars } from '@kumahq/config/vite'
-import { get, container, build } from '@kumahq/container'
+import { createBuilder } from '@kumahq/container'
 import { beforeEach, afterEach } from 'vitest'
 
 import { services as application, TOKENS as APPLICATION } from '@/app/application'
@@ -16,7 +16,8 @@ import { services as testing } from '@/app/vue/testing'
     ...APPLICATION,
     ...KUMA,
   }
-  build(
+  const { build, container } = createBuilder()
+  const get = build(
     application($),
     vue($),
     testing($),