astro Architecture Docs
Home / File/ xray.ts — astro Source File

xray.ts — astro Source File

Architecture documentation for xray.ts, a typescript file in the astro codebase. 5 imports, 0 dependents.

File typescript DevToolbar ToolbarClient 5 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  46c759e3_5d77_eae5_955d_7af4606860d2["xray.ts"]
  6e91fe0d_c6ce_0cca_abd3_06b774edbe23["./toolbar.js"]
  46c759e3_5d77_eae5_955d_7af4606860d2 --> 6e91fe0d_c6ce_0cca_abd3_06b774edbe23
  76a8dde1_0437_fd1c_f3f4_3c2497b06de9["../ui-library/highlight.js"]
  46c759e3_5d77_eae5_955d_7af4606860d2 --> 76a8dde1_0437_fd1c_f3f4_3c2497b06de9
  36c86db7_583c_6a41_001d_26ecc3b5189e["./utils/highlight.js"]
  46c759e3_5d77_eae5_955d_7af4606860d2 --> 36c86db7_583c_6a41_001d_26ecc3b5189e
  2c2fd83a_a206_7736_5927_a82639572edb["./utils/window.js"]
  46c759e3_5d77_eae5_955d_7af4606860d2 --> 2c2fd83a_a206_7736_5927_a82639572edb
  fc634da7_3e72_de83_7395_a46311dd837e["html-escaper"]
  46c759e3_5d77_eae5_955d_7af4606860d2 --> fc634da7_3e72_de83_7395_a46311dd837e
  style 46c759e3_5d77_eae5_955d_7af4606860d2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { escape as escapeHTML } from 'html-escaper';
import type {
	DevToolbarMetadata,
	ResolvedDevToolbarApp,
} from '../../../../types/public/toolbar.js';
import type { DevToolbarHighlight } from '../ui-library/highlight.js';
import {
	attachTooltipToHighlight,
	createHighlight,
	getElementsPositionInDocument,
	positionHighlight,
} from './utils/highlight.js';
import {
	closeOnOutsideClick,
	createWindowElement,
	synchronizePlacementOnUpdate,
} from './utils/window.js';

const icon =
	'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true"><path fill="#fff" d="M7.9 1.5v-.4a1.1 1.1 0 0 1 2.2 0v.4a1.1 1.1 0 1 1-2.2 0Zm-6.4 8.6a1.1 1.1 0 1 0 0-2.2h-.4a1.1 1.1 0 0 0 0 2.2h.4ZM12 3.7a1.1 1.1 0 0 0 1.4-.7l.4-1.1a1.1 1.1 0 0 0-2.1-.8l-.4 1.2a1.1 1.1 0 0 0 .7 1.4Zm-9.7 7.6-1.2.4a1.1 1.1 0 1 0 .8 2.1l1-.4a1.1 1.1 0 1 0-.6-2ZM20.8 17a1.9 1.9 0 0 1 0 2.6l-1.2 1.2a1.9 1.9 0 0 1-2.6 0l-4.3-4.2-1.6 3.6a1.9 1.9 0 0 1-1.7 1.2A1.9 1.9 0 0 1 7.5 20L2.7 5a1.9 1.9 0 0 1 2.4-2.4l15 5a1.9 1.9 0 0 1 .2 3.4l-3.7 1.6 4.2 4.3ZM19 18.3 14.6 14a1.9 1.9 0 0 1 .6-3l3.2-1.5L5.1 5.1l4.3 13.3 1.5-3.2a1.9 1.9 0 0 1 3-.6l4.4 4.4.7-.7Z"/></svg>';

export default {
	id: 'astro:xray',
	name: 'Inspect',
	icon: icon,
	init(canvas, eventTarget) {
		let islandsOverlays: { highlightElement: DevToolbarHighlight; island: HTMLElement }[] = [];

		addIslandsOverlay();

		document.addEventListener('astro:after-swap', addIslandsOverlay);
		document.addEventListener('astro:page-load', refreshIslandsOverlayPositions);

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

		function addIslandsOverlay() {
			islandsOverlays.forEach(({ highlightElement }) => {
				highlightElement.remove();
			});
			islandsOverlays = [];

			const islands = document.querySelectorAll<HTMLElement>('astro-island');

			if (islands.length === 0) {
				const window = createWindowElement(
					`<style>
						header {
							display: flex;
						}

						h1 {
							display: flex;
							align-items: center;
							gap: 8px;
							font-weight: 600;
							color: #fff;
							margin: 0;
							font-size: 22px;
						}
// ... (124 more lines)

Domain

Subdomains

Functions

Dependencies

  • ../ui-library/highlight.js
  • ./toolbar.js
  • ./utils/highlight.js
  • ./utils/window.js
  • html-escaper

Source

Frequently Asked Questions

What does xray.ts do?
xray.ts is a source file in the astro codebase, written in typescript. It belongs to the DevToolbar domain, ToolbarClient subdomain.
What functions are defined in xray.ts?
xray.ts defines 1 function(s): default.init.
What does xray.ts depend on?
xray.ts imports 5 module(s): ../ui-library/highlight.js, ./toolbar.js, ./utils/highlight.js, ./utils/window.js, html-escaper.
Where is xray.ts in the architecture?
xray.ts is located at packages/astro/src/runtime/client/dev-toolbar/apps/xray.ts (domain: DevToolbar, subdomain: ToolbarClient, directory: packages/astro/src/runtime/client/dev-toolbar/apps).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free