init() — astro Function Reference

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

Function typescript DevToolbar ToolbarClient calls 3 called by 1

Entity Profile

DevToolbar→ ToolbarClient→ init() — astro Function Reference

Dependency Diagram

graph TD
  e295abb8_a27c_a9ba_5daf_4ea2ac1d163e["init()"]
  833f7e6d_4781_eb37_c633_27829bbb8361["AstroDevToolbar"]
  e295abb8_a27c_a9ba_5daf_4ea2ac1d163e -->|defined in| 833f7e6d_4781_eb37_c633_27829bbb8361
  593d4863_5062_9efc_165f_2f1fac2dce1d["connectedCallback()"]
  593d4863_5062_9efc_165f_2f1fac2dce1d -->|calls| e295abb8_a27c_a9ba_5daf_4ea2ac1d163e
  794870ff_2fac_eb49_42a7_ffd9c75c0a9e["getAppTemplate()"]
  e295abb8_a27c_a9ba_5daf_4ea2ac1d163e -->|calls| 794870ff_2fac_eb49_42a7_ffd9c75c0a9e
  9028096c_54ca_ca1e_b2cb_f6201ef5a538["attachEvents()"]
  e295abb8_a27c_a9ba_5daf_4ea2ac1d163e -->|calls| 9028096c_54ca_ca1e_b2cb_f6201ef5a538
  7e14b19e_e40c_89de_0e1a_ee47b118ee6f["initApp()"]
  e295abb8_a27c_a9ba_5daf_4ea2ac1d163e -->|calls| 7e14b19e_e40c_89de_0e1a_ee47b118ee6f
  style e295abb8_a27c_a9ba_5daf_4ea2ac1d163e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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

	init() {
		this.shadowRoot.innerHTML = `
		<style>
			:host {
				/* Important! Reset all inherited styles to initial */
				all: initial;
				z-index: 999999;
				view-transition-name: astro-dev-toolbar;
				display: contents;

				/* Hide the dev toolbar on window.print() (CTRL + P) */
				@media print {
					display: none;
				}
			}

			::view-transition-old(astro-dev-toolbar),
			::view-transition-new(astro-dev-toolbar) {
				animation: none;
			}

			#dev-toolbar-root {
				position: fixed;
				bottom: 0px;
				z-index: 2000000010;
				display: flex;
				flex-direction: column;
				align-items: center;
				transition: bottom 0.35s cubic-bezier(0.485, -0.050, 0.285, 1.505);
				pointer-events: none;
			}

			#dev-toolbar-root[data-hidden] {
				bottom: -40px;
			}

			#dev-toolbar-root[data-hidden] #dev-bar .item {
				opacity: 0.2;
			}

			#dev-toolbar-root[data-placement="bottom-left"] {
				left: 16px;
			}
			#dev-toolbar-root[data-placement="bottom-center"] {
				left: 50%;
				transform: translateX(-50%);
			}
			#dev-toolbar-root[data-placement="bottom-right"] {
				right: 16px;
			}

			#dev-bar-hitbox-above,
			#dev-bar-hitbox-below {
				width: 100%;
				pointer-events: auto;
			}
			#dev-bar-hitbox-above {
				height: ${DEVBAR_HITBOX_ABOVE}px;
			}
			#dev-bar-hitbox-below {
				height: 16px;
			}
			#dev-bar {
				height: 40px;
				overflow: hidden;
				pointer-events: auto;
				background: linear-gradient(180deg, #13151A 0%, rgba(19, 21, 26, 0.88) 100%);
				border: 1px solid #343841;
				border-radius: 9999px;
				box-shadow: 0px 0px 0px 0px rgba(19, 21, 26, 0.30), 0px 1px 2px 0px rgba(19, 21, 26, 0.29), 0px 4px 4px 0px rgba(19, 21, 26, 0.26), 0px 10px 6px 0px rgba(19, 21, 26, 0.15), 0px 17px 7px 0px rgba(19, 21, 26, 0.04), 0px 26px 7px 0px rgba(19, 21, 26, 0.01);
			}

			@media (forced-colors: active) {
				#dev-bar {
					background: white;
				}
			}

			#dev-bar .item {
				display: flex;
				justify-content: center;