default.init() — astro Function Reference

Architecture documentation for the default.init() function in astro.ts from the astro codebase.

Function typescript DevToolbar ToolbarClient

Entity Profile

DevToolbar→ ToolbarClient→ default.init() — astro Function Reference

Dependency Diagram

graph TD
  da92f48b_4e11_f833_462a_60fff1ed7a7c["default.init()"]
  2476de77_9cc7_e66f_77b3_1bebf6f76775["astro.ts"]
  da92f48b_4e11_f833_462a_60fff1ed7a7c -->|defined in| 2476de77_9cc7_e66f_77b3_1bebf6f76775
  style da92f48b_4e11_f833_462a_60fff1ed7a7c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts lines 40–459

	async init(canvas, eventTarget) {
		createCanvas();

		document.addEventListener('astro:after-swap', createCanvas);

		eventTarget.addEventListener('app-toggled', async (event) => {
			resetDebugButton();
			if (!(event instanceof CustomEvent)) return;

			if (event.detail.state === true) {
				if (!integrationData) fetchIntegrationData();
			}
		});

		closeOnOutsideClick(eventTarget);
		synchronizePlacementOnUpdate(eventTarget, canvas);

		function fetchIntegrationData() {
			fetch('https://astro.build/api/v1/dev-overlay/', {
				cache: 'no-cache',
			})
				.then((res) => res.json())
				.then((data) => {
					integrationData = data;
					integrationData.data = integrationData.data.map((integration) => {
						return integration;
					});
					refreshIntegrationList();
				});
		}

		function createCanvas() {
			const links: { icon: Icon; name: string; link: string }[] = [
				{
					icon: 'bug',
					name: 'Report a Bug',
					link: 'https://github.com/withastro/astro/issues/new/choose',
				},
				{
					icon: 'lightbulb',
					name: 'Feedback',
					link: 'https://github.com/withastro/roadmap/discussions/new/choose',
				},
				{
					icon: 'file-search',
					name: 'Documentation',
					link: 'https://docs.astro.build',
				},
				{
					icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 14"><path fill="currentColor" d="M14.3451 1.9072c-1.0375-.47613-2.1323-.81595-3.257-1.010998-.0102-.001716-.0207-.000234-.03.004243s-.017.011728-.022.020757c-.141.249998-.297.576998-.406.832998-1.2124-.18399-2.44561-.18399-3.658 0-.12159-.28518-.25914-.56328-.412-.832998-.00513-.00893-.01285-.016098-.02213-.02056-.00928-.004462-.0197-.00601-.02987-.00444-1.125.193998-2.22.533998-3.257 1.010998-.00888.00339-.0163.00975-.021.018-2.074 3.099-2.643004 6.122-2.364004 9.107.001.014.01.028.021.037 1.207724.8946 2.558594 1.5777 3.995004 2.02.01014.0032.02103.0031.03111-.0003.01007-.0034.01878-.01.02489-.0187.308-.42.582-.863.818-1.329.00491-.0096.0066-.0205.0048-.0312-.00181-.0106-.007-.0204-.0148-.0278-.00517-.0049-.0113-.0086-.018-.011-.43084-.1656-.84811-.3645-1.248-.595-.01117-.0063-.01948-.0167-.0232-.029-.00373-.0123-.00258-.0255.0032-.037.0034-.0074.00854-.014.015-.019.084-.063.168-.129.248-.195.00706-.0057.01554-.0093.02453-.0106.00898-.0012.01813 0 .02647.0036 2.619 1.196 5.454 1.196 8.041 0 .0086-.0037.0181-.0051.0275-.0038.0093.0012.0181.0049.0255.0108.08.066.164.132.248.195.0068.005.0123.0116.0159.0192.0036.0076.0053.016.0049.0244-.0003.0084-.0028.0166-.0072.0238-.0043.0072-.0104.0133-.0176.0176-.399.2326-.8168.4313-1.249.594-.0069.0025-.0132.0065-.0183.0117-.0052.0051-.0092.0114-.0117.0183-.0023.0067-.0032.0138-.0027.0208.0005.0071.0024.0139.0057.0202.24.465.515.909.817 1.329.0061.0087.0148.0153.0249.0187.0101.0034.021.0035.0311.0003 1.4388-.441 2.7919-1.1241 4.001-2.02.0061-.0042.0111-.0097.0147-.0161.0037-.0064.0058-.0135.0063-.0209.334-3.451-.559-6.449-2.366-9.106-.0018-.00439-.0045-.00834-.008-.01162-.0034-.00327-.0075-.00578-.012-.00738Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"/></svg>',
					name: 'Community',
					link: 'https://astro.build/chat',
				},
			];

			const { latestAstroVersion, version, debugInfo } =
				(window as DevToolbarMetadata).__astro_dev_toolbar__ ?? {};

			const windowComponent = createWindowElement(
				`<style>
				#buttons-container {
					display: flex;
					gap: 16px;
					justify-content: center;
				}

				#buttons-container astro-dev-toolbar-card {
					flex: 1;
				}

				footer {
					display: flex;
					justify-content: center;
					gap: 24px;
				}

				footer a {
					color: rgba(145, 152, 173, 1);
				}

				footer a:hover {