@gluonjs/core / src / inject

Function: inject()

Call Signature

inject<Value>(key): Value

Type Parameters

Value

Value

Parameters

key

InjectionKey<Value>

Returns

Value

Call Signature

inject<Value>(key, fallback): Value

Type Parameters

Value

Value

Parameters

key

InjectionKey<Value>

fallback

Value

Returns

Value

Example

Read a typed value from the active application render context or use an explicit fallback when no provider owns it:

import {
  createApp,
  createInjectionKey,
  dynamicComponent,
  html,
  inject,
  refreshGluonApplications,
  runWithErrorHandling,
  unmount,
  warn,
  type AppConfig,
  type AppContainer,
  type AppErrorHandler,
  type AppErrorInfo,
  type AppErrorSource,
  type AppMount,
  type AppPluginCleanup,
  type AppRoot,
  type AppRootRenderContext,
  type AppWarningHandler,
  type AppWarningInfo,
  type FunctionalComponent,
  type GluonApp,
  type GluonAppPlugin,
  type GluonPlugin,
  type GluonPluginFunction,
  type InjectionKey,
} from '@gluonjs/core';

type PublicApi = { refresh(): void };
const localeKey: InjectionKey<string> = createInjectionKey<string>('locale');
const ShopView: FunctionalComponent<{ locale: string }> = ({ locale }) => html`<main lang=${locale}>Shop</main>`;
const root: AppRoot<PublicApi> = (context: AppRootRenderContext<PublicApi>) => {
  const locale = inject(localeKey, context.inject(localeKey, 'en'));
  context.expose({ refresh: () => console.log('refresh') });
  return html`${dynamicComponent('ShopView', { locale })}`;
};
const errorHandler: AppErrorHandler = (info: AppErrorInfo) => console.error(info.source, info.error);
const warningHandler: AppWarningHandler = (info: AppWarningInfo) => console.warn(info.code, info.message);
const source: AppErrorSource = 'application';
const cleanup: AppPluginCleanup = () => console.log('logger disposed');
const logger: GluonPluginFunction<{ prefix: string }> = (app, options) => {
  app.config.errorHandler = (info) => console.error(options.prefix, info.source, info.error);
  app.config.warnHandler = warningHandler;
  return cleanup;
};
const plugin: GluonPlugin = { install: (app) => { app.config.globalProperties.source = source; } };
const typedPlugin: GluonAppPlugin<{ prefix: string }> = logger;

const app: GluonApp<PublicApi> = createApp(root)
  .provide(localeKey, 'de')
  .component('ShopView', ShopView)
  .use(plugin)
  .use(typedPlugin, { prefix: '[shop]' });
const config: AppConfig = app.config;
config.errorHandler = errorHandler;
const container: AppContainer = document.querySelector('#app')!;
const mount: AppMount<PublicApi> = app.mount(container);
mount.exposed?.refresh();
app.run(() => runWithErrorHandling(() => warn('Inventory is stale', 'SHOP_STALE')));
refreshGluonApplications();
mount.unmount();
unmount(container);