@gluonjs/core / src / GluonApp

Interface: GluonApp<Public>

Type Parameters

Public

Public = unknown

Properties

config

readonly config: AppConfig

---

mounted

readonly mounted: boolean

Methods

component()

component<Props>(name, component): this

Type Parameters

Props

Props

Parameters

name

string

component

FunctionalComponent<Props>

Returns

this

---

mount()

mount(container): AppMount<Public>

Parameters

container

AppContainer

Returns

AppMount<Public>

---

onMounted()

onMounted(callback): this

Parameters

callback

() => void | PromiseLike<void>

Returns

this

---

onUnmounted()

onUnmounted(callback): this

Parameters

callback

() => void | PromiseLike<void>

Returns

this

---

provide()

provide<Value>(key, value): this

Type Parameters

Value

Value

Parameters

key

InjectionKey<Value>

value

Value

Returns

this

---

run()

run<Result>(callback): Result | Promise<Result | undefined> | undefined

Type Parameters

Result

Result

Parameters

callback

() => Result | PromiseLike<Result>

Returns

Result | Promise<Result | undefined> | undefined

---

unmount()

unmount(): void

Returns

void

---

use()

Call Signature

use<Options>(plugin, options): this

Type Parameters

Options

Options

Parameters

plugin

GluonAppPlugin<Options>

options

Options

Returns

this

Call Signature

use(plugin): this

Parameters

plugin

GluonAppPlugin<void>

Returns

this

Example

Own application configuration, providers, components, plugins, lifecycle hooks, mounting, scoped execution, and unmounting:

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);