initApp() — astro Function Reference

Architecture documentation for the initApp() function in toolbar.ts from the astro codebase.

Function typescript DevToolbar ToolbarClient calls 2 called by 1

Entity Profile

DevToolbar→ ToolbarClient→ initApp() — astro Function Reference

Dependency Diagram

graph TD
  7e14b19e_e40c_89de_0e1a_ee47b118ee6f["initApp()"]
  833f7e6d_4781_eb37_c633_27829bbb8361["AstroDevToolbar"]
  7e14b19e_e40c_89de_0e1a_ee47b118ee6f -->|defined in| 833f7e6d_4781_eb37_c633_27829bbb8361
  e295abb8_a27c_a9ba_5daf_4ea2ac1d163e["init()"]
  e295abb8_a27c_a9ba_5daf_4ea2ac1d163e -->|calls| 7e14b19e_e40c_89de_0e1a_ee47b118ee6f
  b2d441c5_a363_0a99_57fc_b8f8854a4ea8["getAppCanvasById()"]
  7e14b19e_e40c_89de_0e1a_ee47b118ee6f -->|calls| b2d441c5_a363_0a99_57fc_b8f8854a4ea8
  360742fe_0e10_f36e_4863_bd7718e42016["getAppButtonById()"]
  7e14b19e_e40c_89de_0e1a_ee47b118ee6f -->|calls| 360742fe_0e10_f36e_4863_bd7718e42016
  style 7e14b19e_e40c_89de_0e1a_ee47b118ee6f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/toolbar.ts lines 385–416

	async initApp(app: DevToolbarApp) {
		const shadowRoot = this.getAppCanvasById(app.id)!.shadowRoot!;
		app.status = 'loading';
		try {
			settings.logger.verboseLog(`Initializing app ${app.id}`);

			await app.init?.(shadowRoot, app.eventTarget, serverHelpers);
			app.status = 'ready';

			if (import.meta.hot) {
				import.meta.hot.send(`${WS_EVENT_NAME}:${app.id}:initialized`);
			}
		} catch (e) {
			console.error(`Failed to init app ${app.id}, error: ${e}`);
			app.status = 'error';

			if (import.meta.hot) {
				import.meta.hot.send('astro:devtoolbar:error:init', {
					app: app,
					error: e instanceof Error ? e.stack : e,
				});
			}

			const appButton = this.getAppButtonById(app.id);
			const appTooltip = appButton?.querySelector<HTMLElement>('.item-tooltip');

			if (appButton && appTooltip) {
				appButton.toggleAttribute('data-app-error', true);
				appTooltip.innerText = `Error initializing ${app.name}`;
			}
		}
	}