Initial commit

node_modules/astro/dist/runtime/client/dev-toolbar/apps/xray.js

@@ -0,0 +1,140 @@
+import { escape as escapeHTML } from "html-escaper";
+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>';
+var xray_default = {
+  id: "astro:xray",
+  name: "Inspect",
+  icon,
+  init(canvas, eventTarget) {
+    let islandsOverlays = [];
+    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("astro-island");
+      if (islands.length === 0) {
+        const window2 = createWindowElement(
+          `<style>
+						header {
+							display: flex;
+						}
+
+						h1 {
+							display: flex;
+							align-items: center;
+							gap: 8px;
+							font-weight: 600;
+							color: #fff;
+							margin: 0;
+							font-size: 22px;
+						}
+
+						astro-dev-toolbar-icon {
+							width: 1em;
+						   height: 1em;
+						   padding: 8px;
+							display: block;
+							background: #5f9ea0;
+							border-radius: 9999px;
+						}
+					</style>
+					<header>
+						<h1><astro-dev-toolbar-icon icon="lightbulb"></astro-dev-toolbar-icon>No islands detected.</h1>
+					</header>
+					<p>
+						It looks like there are no interactive component islands on this page. Did you forget to add a client directive to your interactive UI component?
+					</p>
+					`
+        );
+        canvas.append(window2);
+        return;
+      }
+      islands.forEach((island) => {
+        const computedStyle = window.getComputedStyle(island);
+        const islandElement = island.children[0] || island;
+        if (islandElement.offsetParent === null || computedStyle.display === "none") {
+          return;
+        }
+        const rect = islandElement.getBoundingClientRect();
+        const highlight = createHighlight(rect);
+        const tooltip = buildIslandTooltip(island);
+        const { isFixed } = getElementsPositionInDocument(islandElement);
+        if (isFixed) {
+          tooltip.style.position = highlight.style.position = "fixed";
+        }
+        attachTooltipToHighlight(highlight, tooltip, islandElement);
+        canvas.append(highlight);
+        islandsOverlays.push({ highlightElement: highlight, island: islandElement });
+      });
+      ["scroll", "resize"].forEach((event) => {
+        window.addEventListener(event, refreshIslandsOverlayPositions);
+      });
+    }
+    function refreshIslandsOverlayPositions() {
+      islandsOverlays.forEach(({ highlightElement, island: islandElement }) => {
+        const rect = islandElement.getBoundingClientRect();
+        positionHighlight(highlightElement, rect);
+      });
+    }
+    function buildIslandTooltip(island) {
+      const tooltip = document.createElement("astro-dev-toolbar-tooltip");
+      tooltip.sections = [];
+      const islandProps = island.getAttribute("props") ? JSON.parse(island.getAttribute("props")) : {};
+      const islandClientDirective = island.getAttribute("client");
+      if (islandClientDirective) {
+        tooltip.sections.push({
+          title: "Client directive",
+          inlineTitle: `<code>client:${islandClientDirective}</code>`
+        });
+      }
+      const islandPropsEntries = Object.entries(islandProps).filter(
+        (prop) => !prop[0].startsWith("data-astro-cid-")
+      );
+      if (islandPropsEntries.length > 0) {
+        const stringifiedProps = JSON.stringify(
+          Object.fromEntries(islandPropsEntries.map((prop) => [prop[0], prop[1][1]])),
+          void 0,
+          2
+        );
+        tooltip.sections.push({
+          title: "Props",
+          content: `<pre><code>${escapeHTML(stringifiedProps)}</code></pre>`
+        });
+      }
+      const islandComponentPath = island.getAttribute("component-url");
+      if (islandComponentPath) {
+        tooltip.sections.push({
+          content: islandComponentPath,
+          clickDescription: "Click to go to file",
+          async clickAction() {
+            await fetch(
+              "/__open-in-editor?file=" + encodeURIComponent(
+                window.__astro_dev_toolbar__.root + islandComponentPath.slice(1)
+              )
+            );
+          }
+        });
+      }
+      return tooltip;
+    }
+  }
+};
+export {
+  xray_default as default
+};