Refactor routing in App component to enhance navigation and improve error handling by integrating dynamic routes and updating the NotFound route.
This commit is contained in:
20
node_modules/astro/dist/runtime/client/dev-toolbar/apps/astro.d.ts
generated
vendored
Normal file
20
node_modules/astro/dist/runtime/client/dev-toolbar/apps/astro.d.ts
generated
vendored
Normal file
@@ -0,0 +1,20 @@
|
||||
export interface Integration {
|
||||
name: string;
|
||||
title: string;
|
||||
description: string;
|
||||
image?: string;
|
||||
categories: string[];
|
||||
repoUrl: string;
|
||||
npmUrl: string;
|
||||
homepageUrl: string;
|
||||
official: boolean;
|
||||
featured: number;
|
||||
downloads: number;
|
||||
}
|
||||
declare const _default: {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: "astro:logo";
|
||||
init(canvas: ShadowRoot, eventTarget: import("../helpers.js").ToolbarAppEventTarget): Promise<void>;
|
||||
};
|
||||
export default _default;
|
394
node_modules/astro/dist/runtime/client/dev-toolbar/apps/astro.js
generated
vendored
Normal file
394
node_modules/astro/dist/runtime/client/dev-toolbar/apps/astro.js
generated
vendored
Normal file
@@ -0,0 +1,394 @@
|
||||
import { isDefinedIcon } from "../ui-library/icons.js";
|
||||
import { colorForIntegration, iconForIntegration } from "./utils/icons.js";
|
||||
import {
|
||||
closeOnOutsideClick,
|
||||
createWindowElement,
|
||||
synchronizePlacementOnUpdate
|
||||
} from "./utils/window.js";
|
||||
const astroLogo = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 99 26" width="100"><path fill="#fff" d="M6.70402 22.1453c-1.17459-1.0737-1.51748-3.3297-1.02811-4.9641.84853 1.0304 2.02424 1.3569 3.24204 1.5411 1.88005.2844 3.72635.178 5.47285-.6813.1998-.0984.3844-.2292.6027-.3617.1639.4755.2065.9554.1493 1.4439-.1392 1.1898-.7313 2.1088-1.673 2.8054-.3765.2787-.775.5278-1.1639.7905-1.1948.8075-1.518 1.7544-1.0691 3.1318.0107.0336.0202.0671.0444.149-.6101-.273-1.0557-.6705-1.39518-1.1931-.3586-.5517-.52921-1.1619-.53819-1.8221-.00449-.3213-.00449-.6455-.0477-.9623-.10551-.7722-.46804-1.118-1.15102-1.1379-.70094-.0205-1.2554.4129-1.40244 1.0953-.01122.0523-.02749.1041-.04377.1649l.00112.0006Z"/><path fill="url(#paint0_linear_386_2739)" d="M6.70402 22.1453c-1.17459-1.0737-1.51748-3.3297-1.02811-4.9641.84853 1.0304 2.02424 1.3569 3.24204 1.5411 1.88005.2844 3.72635.178 5.47285-.6813.1998-.0984.3844-.2292.6027-.3617.1639.4755.2065.9554.1493 1.4439-.1392 1.1898-.7313 2.1088-1.673 2.8054-.3765.2787-.775.5278-1.1639.7905-1.1948.8075-1.518 1.7544-1.0691 3.1318.0107.0336.0202.0671.0444.149-.6101-.273-1.0557-.6705-1.39518-1.1931-.3586-.5517-.52921-1.1619-.53819-1.8221-.00449-.3213-.00449-.6455-.0477-.9623-.10551-.7722-.46804-1.118-1.15102-1.1379-.70094-.0205-1.2554.4129-1.40244 1.0953-.01122.0523-.02749.1041-.04377.1649l.00112.0006Z"/><path fill="#fff" d="M0 16.909s3.47815-1.6944 6.96603-1.6944l2.62973-8.13858c.09846-.39359.38592-.66106.71044-.66106.3246 0 .612.26747.7105.66106l2.6297 8.13858c4.1309 0 6.966 1.6944 6.966 1.6944S14.7045.814589 14.693.782298C14.5234.306461 14.2371 0 13.8512 0H6.76183c-.38593 0-.66063.306461-.84174.782298C5.90733.81398 0 16.909 0 16.909ZM36.671 11.7318c0 1.4262-1.7739 2.2779-4.2302 2.2779-1.5985 0-2.1638-.3962-2.1638-1.2281 0-.8715.7018-1.2875 2.3003-1.2875 1.4426 0 2.6707.0198 4.0937.1981v.0396Zm.0195-1.7629c-.8772-.19808-2.2028-.31693-3.7818-.31693-4.6006 0-6.7644 1.08943-6.7644 3.62483 0 2.6344 1.4815 3.6446 4.9125 3.6446 2.9046 0 4.8735-.7328 5.5947-2.5354h.117c-.0195.4358-.039.8716-.039 1.2083 0 .931.156 1.0102.9162 1.0102h3.5869c-.1949-.5546-.3119-2.1194-.3119-3.4663 0-1.446.0585-2.5355.0585-4.00123 0-2.99098-1.7934-4.89253-7.4077-4.89253-2.4173 0-5.1074.41596-7.1543 1.03.1949.81213.4679 2.45617.6043 3.5258 1.774-.83193 4.2887-1.18847 6.2381-1.18847 2.6902 0 3.4309.61404 3.4309 1.86193v.4952ZM46.5325 12.5637c-.4874.0594-1.1502.0594-1.8325.0594-.7213 0-1.3841-.0198-1.8324-.0792 0 .1585-.0195.3367-.0195.4952 0 2.476 1.618 3.922 7.3102 3.922 5.3609 0 7.0958-1.4262 7.0958-3.9418 0-2.3769-1.1501-3.5456-6.238-3.8031-3.9573-.17827-4.3082-.61404-4.3082-1.10924 0-.57442.5068-.87154 3.158-.87154 2.7487 0 3.4894.37635 3.4894 1.16866v.17827c.3899-.01981 1.0917-.03961 1.813-.03961.6823 0 1.423.0198 1.8519.05942 0-.17827.0195-.33674.0195-.47539 0-2.91175-2.4172-3.86252-7.0958-3.86252-5.2634 0-7.0373 1.2875-7.0373 3.8031 0 2.25805 1.423 3.66445 6.472 3.88235 3.7233.1188 4.1327.5348 4.1327 1.1092 0 .6141-.6043.8914-3.2165.8914-3.0021 0-3.7623-.416-3.7623-1.2677v-.1189ZM63.6883 2.125c-1.423 1.32712-3.9768 2.65425-5.3998 3.01079.0195.73289.0195 2.07982.0195 2.81271l1.3061.01981c-.0195 1.40635-.039 3.10979-.039 4.23889 0 2.6344 1.3841 4.6152 5.6922 4.6152 1.813 0 3.0216-.1981 4.5226-.515-.1559-.9706-.3314-2.4562-.3898-3.5852-.8968.2971-2.0274.4556-3.275.4556-1.735 0-2.4368-.4754-2.4368-1.8422 0-1.1884 0-2.29767.0195-3.32768 2.2223.01981 4.4446.05943 5.7507.09904-.0195-1.03.0195-2.51559.078-3.50598-1.8909.03961-4.0157.05942-5.7702.05942.0195-.87154.039-1.70347.0585-2.5354h-.1365ZM75.3313 7.35427c.0195-1.03001.039-1.90156.0585-2.75329h-3.9183c.0585 1.70347.0585 3.44656.0585 6.00172 0 2.5553-.0195 4.3182-.0585 6.0018h4.4836c-.078-1.1885-.0975-3.189-.0975-4.8925 0-2.69388 1.0917-3.46638 3.5674-3.46638 1.1502 0 1.9689.13865 2.6902.39615.0195-1.01019.2144-2.97117.3314-3.84271-.7408-.21789-1.5595-.35655-2.5537-.35655-2.1249-.0198-3.6844.85174-4.4056 2.93156l-.156-.0198ZM94.8501 10.5235c0 2.1591-1.5595 3.1693-4.0157 3.1693-2.4368 0-3.9963-.9508-3.9963-3.1693 0-2.21846 1.579-3.05039 3.9963-3.05039 2.4367 0 4.0157.89135 4.0157 3.05039Zm4.0743-.099c0-4.29832-3.353-6.21968-8.09-6.21968-4.7566 0-7.9926 1.92136-7.9926 6.21968 0 4.2785 3.0216 6.5762 7.9731 6.5762 4.9904 0 8.1095-2.2977 8.1095-6.5762Z"/><defs><linearGradient id="paint0_linear_386_2739" x1="5.46011" x2="16.8017" y1="25.9999" y2="20.6412" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>';
|
||||
let integrationData;
|
||||
var astro_default = {
|
||||
id: "astro:home",
|
||||
name: "Menu",
|
||||
icon: "astro:logo",
|
||||
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: "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 hasNewerVersion = window.__astro_dev_toolbar__.latestAstroVersion;
|
||||
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 {
|
||||
color: rgba(204, 206, 216, 1);
|
||||
}
|
||||
|
||||
#main-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header section {
|
||||
display: flex;
|
||||
gap: 0.8em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: white;
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(224, 204, 250, 1);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #f4ecfd;
|
||||
}
|
||||
|
||||
#integration-list-wrapper {
|
||||
position: relative;
|
||||
--offset: 24px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
margin-left: calc(var(--offset) * -1);
|
||||
margin-right: calc(var(--offset) * -1);
|
||||
padding-left: var(--offset);
|
||||
padding-right: var(--offset);
|
||||
height: 210px;
|
||||
}
|
||||
|
||||
/* Pseudo-elements to fade cards as they scroll out of viewport */
|
||||
#integration-list-wrapper::before,
|
||||
#integration-list-wrapper::after {
|
||||
content: '';
|
||||
height: 192px;
|
||||
display: block;
|
||||
position: fixed;
|
||||
width: var(--offset);
|
||||
top: 106px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
#integration-list-wrapper::before {
|
||||
left: -1px;
|
||||
border-left: 1px solid rgba(52, 56, 65, 1);
|
||||
background: linear-gradient(to right, rgba(19, 21, 26, 1), rgba(19, 21, 26, 0));
|
||||
}
|
||||
|
||||
#integration-list-wrapper::after {
|
||||
right: -1px;
|
||||
border-right: 1px solid rgba(52, 56, 65, 1);
|
||||
background: linear-gradient(to left, rgba(19, 21, 26, 1), rgba(19, 21, 26, 0));
|
||||
}
|
||||
|
||||
#integration-list-wrapper::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 8px;
|
||||
background-color: rgba(255, 255, 255, 0.08); /* or add it to the track */
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* This is wild but gives us a gap on either side of the container */
|
||||
#integration-list-wrapper::-webkit-scrollbar-button:start:decrement,
|
||||
#integration-list-wrapper::-webkit-scrollbar-button:end:increment {
|
||||
display: block;
|
||||
width: 24px;
|
||||
background-color: #13151A;
|
||||
}
|
||||
|
||||
/* Removes arrows on both sides */
|
||||
#integration-list-wrapper::-webkit-scrollbar-button:horizontal:start:increment,
|
||||
#integration-list-wrapper::-webkit-scrollbar-button:horizontal:end:decrement {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#integration-list-wrapper::-webkit-scrollbar-track-piece {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#integration-list-wrapper::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#integration-list {
|
||||
margin-top: 1em;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
#integration-list::after {
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
white-space: pre;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
#integration-list astro-dev-toolbar-card, .integration-skeleton {
|
||||
min-width: 240px;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.integration-skeleton {
|
||||
animation: pulse 2s calc(var(--i, 0) * 250ms) cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
background-color: rgba(35, 38, 45, 1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
#integration-list astro-dev-toolbar-card .integration-image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: var(--integration-image-background, white);
|
||||
border-radius: 9999px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#integration-list astro-dev-toolbar-card img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
#integration-list astro-dev-toolbar-card astro-dev-toolbar-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#links {
|
||||
margin: auto 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
#links a {
|
||||
text-decoration: none;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.7em;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#links a:hover {
|
||||
color: rgba(145, 152, 173, 1);
|
||||
}
|
||||
|
||||
#links astro-dev-toolbar-icon {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#integration-list astro-dev-toolbar-card svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
#integration-list astro-dev-toolbar-card h3 {
|
||||
margin: 0;
|
||||
margin-bottom: 8px;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#integration-list astro-dev-toolbar-card p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
svg path[fill="#fff"] {
|
||||
fill: black;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<header>
|
||||
<section>
|
||||
${astroLogo}
|
||||
<astro-dev-toolbar-badge badge-style="gray" size="large">${window.__astro_dev_toolbar__.version}</astro-dev-toolbar-badge>
|
||||
${hasNewerVersion ? `<astro-dev-toolbar-badge badge-style="green" size="large">${window.__astro_dev_toolbar__.latestAstroVersion} available!</astro-dev-toolbar-badge>
|
||||
` : ""}
|
||||
</section>
|
||||
<astro-dev-toolbar-button id="copy-debug-button">Copy debug info <astro-dev-toolbar-icon icon="copy" /></astro-dev-toolbar-button>
|
||||
</header>
|
||||
<hr />
|
||||
|
||||
<div id="main-container">
|
||||
<div>
|
||||
<header><h2>Featured integrations</h2><a href="https://astro.build/integrations/" target="_blank">View all</a></header>
|
||||
<div id="integration-list-wrapper">
|
||||
<section id="integration-list">
|
||||
<div class="integration-skeleton" style="--i:0;"></div>
|
||||
<div class="integration-skeleton" style="--i:1;"></div>
|
||||
<div class="integration-skeleton" style="--i:2;"></div>
|
||||
<div class="integration-skeleton" style="--i:3;"></div>
|
||||
<div class="integration-skeleton" style="--i:4;"></div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<section id="links">
|
||||
${links.map(
|
||||
(link) => `<a href="${link.link}" target="_blank"><astro-dev-toolbar-icon ${isDefinedIcon(link.icon) ? `icon="${link.icon}">` : `>${link.icon}`}</astro-dev-toolbar-icon>${link.name}</a>`
|
||||
).join("")}
|
||||
</section>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
const copyDebugButton = windowComponent.querySelector("#copy-debug-button");
|
||||
copyDebugButton?.addEventListener("click", () => {
|
||||
navigator.clipboard.writeText(
|
||||
"```\n" + window.__astro_dev_toolbar__.debugInfo + "\n```"
|
||||
);
|
||||
copyDebugButton.textContent = "Copied to clipboard!";
|
||||
setTimeout(() => {
|
||||
resetDebugButton();
|
||||
}, 3500);
|
||||
});
|
||||
canvas.append(windowComponent);
|
||||
if (integrationData) refreshIntegrationList();
|
||||
}
|
||||
function resetDebugButton() {
|
||||
const copyDebugButton = canvas.querySelector("#copy-debug-button");
|
||||
if (!copyDebugButton) return;
|
||||
copyDebugButton.innerHTML = 'Copy debug info <astro-dev-toolbar-icon icon="copy" />';
|
||||
}
|
||||
function refreshIntegrationList() {
|
||||
const integrationList = canvas.querySelector("#integration-list");
|
||||
if (!integrationList) return;
|
||||
integrationList.innerHTML = "";
|
||||
const fragment = document.createDocumentFragment();
|
||||
for (const integration of integrationData.data) {
|
||||
const integrationComponent = document.createElement("astro-dev-toolbar-card");
|
||||
integrationComponent.link = integration.homepageUrl;
|
||||
const integrationContainer = document.createElement("div");
|
||||
integrationContainer.className = "integration-container";
|
||||
const integrationImage = document.createElement("div");
|
||||
integrationImage.className = "integration-image";
|
||||
if (integration.image) {
|
||||
const img = document.createElement("img");
|
||||
img.src = integration.image;
|
||||
img.alt = integration.title;
|
||||
integrationImage.append(img);
|
||||
} else {
|
||||
const icon = document.createElement("astro-dev-toolbar-icon");
|
||||
icon.icon = iconForIntegration(integration);
|
||||
integrationImage.append(icon);
|
||||
integrationImage.style.setProperty(
|
||||
"--integration-image-background",
|
||||
colorForIntegration()
|
||||
);
|
||||
}
|
||||
integrationContainer.append(integrationImage);
|
||||
let integrationTitle = document.createElement("h3");
|
||||
integrationTitle.textContent = integration.title;
|
||||
if (integration.official || integration.categories.includes("official")) {
|
||||
integrationTitle.innerHTML += ' <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 20"><rect width="19" height="19" x="1.16602" y=".5" fill="url(#paint0_linear_917_1096)" fill-opacity=".33" rx="9.5"/><path fill="#fff" d="M15.139 6.80657c-.062-.06248-.1357-.11208-.217-.14592-.0812-.03385-.1683-.05127-.2563-.05127-.0881 0-.1752.01742-.2564.05127-.0813.03384-.155.08344-.217.14592L9.22566 11.7799 7.13899 9.68657c-.06435-.06216-.14031-.11103-.22355-.14383-.08323-.03281-.17211-.04889-.26157-.04735-.08945.00155-.17773.0207-.25978.05637a.68120694.68120694 0 0 0-.21843.15148c-.06216.06435-.11104.14031-.14384.22355-.0328.08321-.04889.17211-.04734.26161.00154.0894.0207.1777.05636.2597.03566.0821.08714.1563.15148.2185l2.56 2.56c.06198.0625.13571.1121.21695.1459s.16838.0513.25639.0513c.088 0 .17514-.0175.25638-.0513s.15497-.0834.21695-.1459L15.139 7.78657c.0677-.06242.1217-.13819.1586-.22253.0369-.08433.056-.1754.056-.26747 0-.09206-.0191-.18313-.056-.26747-.0369-.08433-.0909-.1601-.1586-.22253Z"/><rect width="19" height="19" x="1.16602" y=".5" stroke="url(#paint1_linear_917_1096)" rx="9.5"/><defs><linearGradient id="paint0_linear_917_1096" x1="20.666" x2="-3.47548" y1=".00000136" y2="10.1345" gradientUnits="userSpaceOnUse"><stop stop-color="#4AF2C8"/><stop offset="1" stop-color="#2F4CB3"/></linearGradient><linearGradient id="paint1_linear_917_1096" x1="20.666" x2="-3.47548" y1=".00000136" y2="10.1345" gradientUnits="userSpaceOnUse"><stop stop-color="#4AF2C8"/><stop offset="1" stop-color="#2F4CB3"/></linearGradient></defs></svg>';
|
||||
}
|
||||
integrationContainer.append(integrationTitle);
|
||||
const integrationDescription = document.createElement("p");
|
||||
integrationDescription.textContent = integration.description.length > 90 ? integration.description.slice(0, 90) + "\u2026" : integration.description;
|
||||
integrationContainer.append(integrationDescription);
|
||||
integrationComponent.append(integrationContainer);
|
||||
fragment.append(integrationComponent);
|
||||
}
|
||||
integrationList.append(fragment);
|
||||
}
|
||||
}
|
||||
};
|
||||
export {
|
||||
astro_default as default
|
||||
};
|
15
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/index.d.ts
generated
vendored
Normal file
15
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
import type { DevToolbarHighlight } from '../../ui-library/highlight.js';
|
||||
import { type AuditRule } from './rules/index.js';
|
||||
export type Audit = {
|
||||
auditedElement: HTMLElement;
|
||||
rule: AuditRule;
|
||||
highlight: DevToolbarHighlight | null;
|
||||
card: HTMLElement | null;
|
||||
};
|
||||
declare const _default: {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 1 20 16\"><path fill=\"#fff\" d=\"M.6 2A1.1 1.1 0 0 1 1.7.9h16.6a1.1 1.1 0 1 1 0 2.2H1.6A1.1 1.1 0 0 1 .8 2Zm1.1 7.1h6a1.1 1.1 0 0 0 0-2.2h-6a1.1 1.1 0 0 0 0 2.2ZM9.3 13H1.8a1.1 1.1 0 1 0 0 2.2h7.5a1.1 1.1 0 1 0 0-2.2Zm11.3 1.9a1.1 1.1 0 0 1-1.5 0l-1.7-1.7a4.1 4.1 0 1 1 1.6-1.6l1.6 1.7a1.1 1.1 0 0 1 0 1.6Zm-5.3-3.4a1.9 1.9 0 1 0 0-3.8 1.9 1.9 0 0 0 0 3.8Z\"/></svg>";
|
||||
init(canvas: ShadowRoot, eventTarget: import("../../helpers.js").ToolbarAppEventTarget): Promise<void>;
|
||||
};
|
||||
export default _default;
|
172
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/index.js
generated
vendored
Normal file
172
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/index.js
generated
vendored
Normal file
@@ -0,0 +1,172 @@
|
||||
import { settings } from "../../settings.js";
|
||||
import { positionHighlight } from "../utils/highlight.js";
|
||||
import { closeOnOutsideClick } from "../utils/window.js";
|
||||
import { rulesCategories } from "./rules/index.js";
|
||||
import { DevToolbarAuditListItem } from "./ui/audit-list-item.js";
|
||||
import { DevToolbarAuditListWindow } from "./ui/audit-list-window.js";
|
||||
import { createAuditUI } from "./ui/audit-ui.js";
|
||||
const icon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 1 20 16"><path fill="#fff" d="M.6 2A1.1 1.1 0 0 1 1.7.9h16.6a1.1 1.1 0 1 1 0 2.2H1.6A1.1 1.1 0 0 1 .8 2Zm1.1 7.1h6a1.1 1.1 0 0 0 0-2.2h-6a1.1 1.1 0 0 0 0 2.2ZM9.3 13H1.8a1.1 1.1 0 1 0 0 2.2h7.5a1.1 1.1 0 1 0 0-2.2Zm11.3 1.9a1.1 1.1 0 0 1-1.5 0l-1.7-1.7a4.1 4.1 0 1 1 1.6-1.6l1.6 1.7a1.1 1.1 0 0 1 0 1.6Zm-5.3-3.4a1.9 1.9 0 1 0 0-3.8 1.9 1.9 0 0 0 0 3.8Z"/></svg>';
|
||||
try {
|
||||
customElements.define("astro-dev-toolbar-audit-window", DevToolbarAuditListWindow);
|
||||
customElements.define("astro-dev-toolbar-audit-list-item", DevToolbarAuditListItem);
|
||||
} catch {
|
||||
}
|
||||
let showState = false;
|
||||
var audit_default = {
|
||||
id: "astro:audit",
|
||||
name: "Audit",
|
||||
icon,
|
||||
async init(canvas, eventTarget) {
|
||||
let audits = [];
|
||||
let auditWindow = document.createElement(
|
||||
"astro-dev-toolbar-audit-window"
|
||||
);
|
||||
let hasCreatedUI = false;
|
||||
canvas.appendChild(auditWindow);
|
||||
await lint();
|
||||
let mutationDebounce;
|
||||
const observer = new MutationObserver(() => {
|
||||
if (mutationDebounce) {
|
||||
clearTimeout(mutationDebounce);
|
||||
}
|
||||
mutationDebounce = setTimeout(() => {
|
||||
settings.logger.verboseLog("Rerunning audit lints because the DOM has been updated.");
|
||||
if ("requestIdleCallback" in window) {
|
||||
window.requestIdleCallback(
|
||||
async () => {
|
||||
lint().then(() => {
|
||||
if (showState) createAuditsUI();
|
||||
});
|
||||
},
|
||||
{ timeout: 300 }
|
||||
);
|
||||
} else {
|
||||
setTimeout(async () => {
|
||||
lint().then(() => {
|
||||
if (showState) createAuditsUI();
|
||||
});
|
||||
}, 150);
|
||||
}
|
||||
}, 250);
|
||||
});
|
||||
setupObserver();
|
||||
document.addEventListener("astro:before-preparation", () => {
|
||||
observer.disconnect();
|
||||
});
|
||||
document.addEventListener("astro:after-swap", async () => {
|
||||
lint();
|
||||
});
|
||||
document.addEventListener("astro:page-load", async () => {
|
||||
refreshLintPositions();
|
||||
setTimeout(() => {
|
||||
setupObserver();
|
||||
}, 100);
|
||||
});
|
||||
eventTarget.addEventListener("app-toggled", (event) => {
|
||||
if (event.detail.state === true) {
|
||||
showState = true;
|
||||
createAuditsUI();
|
||||
} else {
|
||||
showState = false;
|
||||
}
|
||||
});
|
||||
closeOnOutsideClick(eventTarget, () => {
|
||||
const activeAudits = audits.filter((audit) => audit.card?.hasAttribute("active"));
|
||||
if (activeAudits.length > 0) {
|
||||
activeAudits.forEach((audit) => {
|
||||
audit.card?.toggleAttribute("active", false);
|
||||
});
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
async function createAuditsUI() {
|
||||
if (hasCreatedUI) return;
|
||||
const fragment = document.createDocumentFragment();
|
||||
for (const audit of audits) {
|
||||
const { card, highlight } = createAuditUI(audit, audits);
|
||||
audit.card = card;
|
||||
audit.highlight = highlight;
|
||||
fragment.appendChild(highlight);
|
||||
}
|
||||
auditWindow.audits = audits;
|
||||
canvas.appendChild(fragment);
|
||||
hasCreatedUI = true;
|
||||
}
|
||||
async function lint() {
|
||||
if (audits.length > 0) {
|
||||
audits.forEach((audit) => {
|
||||
audit.highlight?.remove();
|
||||
audit.card?.remove();
|
||||
});
|
||||
audits = [];
|
||||
hasCreatedUI = false;
|
||||
}
|
||||
const selectorCache = /* @__PURE__ */ new Map();
|
||||
for (const ruleCategory of rulesCategories) {
|
||||
for (const rule of ruleCategory.rules) {
|
||||
const elements = selectorCache.get(rule.selector) ?? document.querySelectorAll(rule.selector);
|
||||
let matches = [];
|
||||
if (typeof rule.match === "undefined") {
|
||||
matches = Array.from(elements);
|
||||
} else {
|
||||
for (const element of elements) {
|
||||
try {
|
||||
if (await rule.match(element)) {
|
||||
matches.push(element);
|
||||
}
|
||||
} catch (e) {
|
||||
settings.logger.error(`Error while running audit's match function: ${e}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (const element of matches) {
|
||||
if (audits.some((audit) => audit.auditedElement === element)) continue;
|
||||
await createAuditProblem(rule, element);
|
||||
}
|
||||
}
|
||||
}
|
||||
eventTarget.dispatchEvent(
|
||||
new CustomEvent("toggle-notification", {
|
||||
detail: {
|
||||
state: audits.length > 0
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
async function createAuditProblem(rule, originalElement) {
|
||||
const computedStyle = window.getComputedStyle(originalElement);
|
||||
const targetedElement = originalElement.children[0] || originalElement;
|
||||
if (targetedElement.offsetParent === null || computedStyle.display === "none") {
|
||||
return;
|
||||
}
|
||||
if (originalElement.nodeName === "IMG" && !originalElement.complete) {
|
||||
return;
|
||||
}
|
||||
audits.push({
|
||||
auditedElement: originalElement,
|
||||
rule,
|
||||
card: null,
|
||||
highlight: null
|
||||
});
|
||||
}
|
||||
function refreshLintPositions() {
|
||||
audits.forEach(({ highlight, auditedElement }) => {
|
||||
const rect = auditedElement.getBoundingClientRect();
|
||||
if (highlight) positionHighlight(highlight, rect);
|
||||
});
|
||||
}
|
||||
["scroll", "resize"].forEach((event) => {
|
||||
window.addEventListener(event, refreshLintPositions);
|
||||
});
|
||||
function setupObserver() {
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
export {
|
||||
audit_default as default
|
||||
};
|
26
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/rules/a11y.d.ts
generated
vendored
Normal file
26
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/rules/a11y.d.ts
generated
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* https://github.com/sveltejs/svelte/blob/61e5e53eee82e895c1a5b4fd36efb87eafa1fc2d/LICENSE.md
|
||||
* @license MIT
|
||||
*
|
||||
* Copyright (c) 2016-23 [these people](https://github.com/sveltejs/svelte/graphs/contributors)
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
import type { AuditRuleWithSelector } from './index.js';
|
||||
export declare const a11y: AuditRuleWithSelector[];
|
592
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/rules/a11y.js
generated
vendored
Normal file
592
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/rules/a11y.js
generated
vendored
Normal file
@@ -0,0 +1,592 @@
|
||||
/**
|
||||
* https://github.com/sveltejs/svelte/blob/61e5e53eee82e895c1a5b4fd36efb87eafa1fc2d/LICENSE.md
|
||||
* @license MIT
|
||||
*
|
||||
* Copyright (c) 2016-23 [these people](https://github.com/sveltejs/svelte/graphs/contributors)
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
import { aria, roles } from "aria-query";
|
||||
import { AXObjectRoles, elementAXObjects } from "axobject-query";
|
||||
const WHITESPACE_REGEX = /\s+/;
|
||||
const a11y_required_attributes = {
|
||||
a: ["href"],
|
||||
area: ["alt", "aria-label", "aria-labelledby"],
|
||||
// html-has-lang
|
||||
html: ["lang"],
|
||||
// iframe-has-title
|
||||
iframe: ["title"],
|
||||
img: ["alt"],
|
||||
object: ["title", "aria-label", "aria-labelledby"]
|
||||
};
|
||||
const MAYBE_INTERACTIVE = /* @__PURE__ */ new Map([
|
||||
["a", "href"],
|
||||
["input", "type"],
|
||||
["audio", "controls"],
|
||||
["img", "usemap"],
|
||||
["object", "usemap"],
|
||||
["video", "controls"]
|
||||
]);
|
||||
const interactiveElements = [
|
||||
"button",
|
||||
"details",
|
||||
"embed",
|
||||
"iframe",
|
||||
"label",
|
||||
"select",
|
||||
"textarea",
|
||||
...MAYBE_INTERACTIVE.keys()
|
||||
];
|
||||
const labellableElements = ["button", "input", "meter", "output", "progress", "select", "textarea"];
|
||||
const aria_non_interactive_roles = [
|
||||
"alert",
|
||||
"alertdialog",
|
||||
"application",
|
||||
"article",
|
||||
"banner",
|
||||
"cell",
|
||||
"columnheader",
|
||||
"complementary",
|
||||
"contentinfo",
|
||||
"definition",
|
||||
"dialog",
|
||||
"directory",
|
||||
"document",
|
||||
"feed",
|
||||
"figure",
|
||||
"form",
|
||||
"group",
|
||||
"heading",
|
||||
"img",
|
||||
"list",
|
||||
"listitem",
|
||||
"log",
|
||||
"main",
|
||||
"marquee",
|
||||
"math",
|
||||
"menuitemradio",
|
||||
"navigation",
|
||||
"none",
|
||||
"note",
|
||||
"presentation",
|
||||
"region",
|
||||
"row",
|
||||
"rowgroup",
|
||||
"rowheader",
|
||||
"search",
|
||||
"status",
|
||||
"tabpanel",
|
||||
"term",
|
||||
"timer",
|
||||
"toolbar",
|
||||
"tooltip"
|
||||
];
|
||||
const roleless_elements = ["div", "span"];
|
||||
const a11y_required_content = [
|
||||
// anchor-has-content
|
||||
"a",
|
||||
// heading-has-content
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"h4",
|
||||
"h5",
|
||||
"h6"
|
||||
];
|
||||
const a11y_distracting_elements = ["blink", "marquee"];
|
||||
const a11y_implicit_semantics = /* @__PURE__ */ new Map([
|
||||
["a", "link"],
|
||||
["area", "link"],
|
||||
["article", "article"],
|
||||
["aside", "complementary"],
|
||||
["body", "document"],
|
||||
["button", "button"],
|
||||
["datalist", "listbox"],
|
||||
["dd", "definition"],
|
||||
["dfn", "term"],
|
||||
["dialog", "dialog"],
|
||||
["details", "group"],
|
||||
["dt", "term"],
|
||||
["fieldset", "group"],
|
||||
["figure", "figure"],
|
||||
["form", "form"],
|
||||
["h1", "heading"],
|
||||
["h2", "heading"],
|
||||
["h3", "heading"],
|
||||
["h4", "heading"],
|
||||
["h5", "heading"],
|
||||
["h6", "heading"],
|
||||
["hr", "separator"],
|
||||
["img", "img"],
|
||||
["li", "listitem"],
|
||||
["link", "link"],
|
||||
["main", "main"],
|
||||
["menu", "list"],
|
||||
["meter", "progressbar"],
|
||||
["nav", "navigation"],
|
||||
["ol", "list"],
|
||||
["option", "option"],
|
||||
["optgroup", "group"],
|
||||
["output", "status"],
|
||||
["progress", "progressbar"],
|
||||
["section", "region"],
|
||||
["summary", "button"],
|
||||
["table", "table"],
|
||||
["tbody", "rowgroup"],
|
||||
["textarea", "textbox"],
|
||||
["tfoot", "rowgroup"],
|
||||
["thead", "rowgroup"],
|
||||
["tr", "row"],
|
||||
["ul", "list"]
|
||||
]);
|
||||
const menuitem_type_to_implicit_role = /* @__PURE__ */ new Map([
|
||||
["command", "menuitem"],
|
||||
["checkbox", "menuitemcheckbox"],
|
||||
["radio", "menuitemradio"]
|
||||
]);
|
||||
const input_type_to_implicit_role = /* @__PURE__ */ new Map([
|
||||
["button", "button"],
|
||||
["image", "button"],
|
||||
["reset", "button"],
|
||||
["submit", "button"],
|
||||
["checkbox", "checkbox"],
|
||||
["radio", "radio"],
|
||||
["range", "slider"],
|
||||
["number", "spinbutton"],
|
||||
["email", "textbox"],
|
||||
["search", "searchbox"],
|
||||
["tel", "textbox"],
|
||||
["text", "textbox"],
|
||||
["url", "textbox"]
|
||||
]);
|
||||
const ariaAttributes = new Set(
|
||||
"activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext".split(
|
||||
" "
|
||||
)
|
||||
);
|
||||
const ariaRoles = new Set(
|
||||
"alert alertdialog application article banner button cell checkbox columnheader combobox complementary contentinfo definition dialog directory document feed figure form grid gridcell group heading img link list listbox listitem log main marquee math menu menubar menuitem menuitemcheckbox menuitemradio navigation none note option presentation progressbar radio radiogroup region row rowgroup rowheader scrollbar search searchbox separator slider spinbutton status switch tab tablist tabpanel textbox timer toolbar tooltip tree treegrid treeitem".split(
|
||||
" "
|
||||
)
|
||||
);
|
||||
function isInteractive(element) {
|
||||
const attribute = MAYBE_INTERACTIVE.get(element.localName);
|
||||
if (attribute) {
|
||||
return element.hasAttribute(attribute);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
const a11y = [
|
||||
{
|
||||
code: "a11y-accesskey",
|
||||
title: "Avoid using `accesskey`",
|
||||
message: "The `accesskey` attribute can cause accessibility issues. The shortcuts can conflict with the browser's or operating system's shortcuts, and they are difficult for users to discover and use.",
|
||||
selector: "[accesskey]"
|
||||
},
|
||||
{
|
||||
code: "a11y-aria-activedescendant-has-tabindex",
|
||||
title: "Elements with attribute `aria-activedescendant` must be tabbable",
|
||||
message: "Element with the `aria-activedescendant` attribute must either have an inherent `tabindex` or declare `tabindex` as an attribute.",
|
||||
selector: "[aria-activedescendant]",
|
||||
match(element) {
|
||||
if (!element.tabIndex && !element.hasAttribute("tabindex")) return true;
|
||||
}
|
||||
},
|
||||
{
|
||||
code: "a11y-aria-attributes",
|
||||
title: "Element does not support ARIA roles.",
|
||||
message: "Elements like `meta`, `html`, `script`, `style` do not support having ARIA roles.",
|
||||
selector: ":is(meta, html, script, style)[role]",
|
||||
match(element) {
|
||||
for (const attribute of element.attributes) {
|
||||
if (attribute.name.startsWith("aria-")) return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
code: "a11y-autofocus",
|
||||
title: "Avoid using `autofocus`",
|
||||
message: "The `autofocus` attribute can cause accessibility issues, as it can cause the focus to move around unexpectedly for screen reader users.",
|
||||
selector: "[autofocus]"
|
||||
},
|
||||
{
|
||||
code: "a11y-distracting-elements",
|
||||
title: "Distracting elements should not be used",
|
||||
message: "Elements that can be visually distracting like `<marquee>` or `<blink>` can cause accessibility issues for visually impaired users and should be avoided.",
|
||||
selector: `:is(${a11y_distracting_elements.join(",")})`
|
||||
},
|
||||
{
|
||||
code: "a11y-hidden",
|
||||
title: "Certain DOM elements are useful for screen reader navigation and should not be hidden",
|
||||
message: (element) => `${element.localName} element should not be hidden.`,
|
||||
selector: "[aria-hidden]:is(h1,h2,h3,h4,h5,h6)"
|
||||
},
|
||||
{
|
||||
code: "a11y-img-redundant-alt",
|
||||
title: "Redundant text in alt attribute",
|
||||
message: 'Screen readers already announce `img` elements as an image. There is no need to use words such as "image", "photo", and/or "picture".',
|
||||
selector: "img[alt]:not([aria-hidden])",
|
||||
match: (img) => /\b(?:image|picture|photo)\b/i.test(img.alt)
|
||||
},
|
||||
{
|
||||
code: "a11y-incorrect-aria-attribute-type",
|
||||
title: "Incorrect value for ARIA attribute.",
|
||||
message: "`aria-hidden` should only receive a boolean.",
|
||||
selector: "[aria-hidden]",
|
||||
match(element) {
|
||||
const value = element.getAttribute("aria-hidden");
|
||||
if (!value) return true;
|
||||
if (!["true", "false"].includes(value)) return true;
|
||||
}
|
||||
},
|
||||
{
|
||||
code: "a11y-invalid-href",
|
||||
title: "Invalid `href` attribute",
|
||||
message: "`href` should not be empty, `'#'`, or `javascript:`.",
|
||||
selector: 'a[href]:is([href=""], [href="#"], [href^="javascript:" i])'
|
||||
},
|
||||
{
|
||||
code: "a11y-invalid-label",
|
||||
title: "`label` element should have an associated control and a text content.",
|
||||
message: "The `label` element must be associated with a control either by using the `for` attribute or by containing a nested form element. Additionally, the `label` element must have text content.",
|
||||
selector: "label",
|
||||
match(element) {
|
||||
const hasFor = element.hasAttribute("for");
|
||||
const nestedLabellableElement = element.querySelector(`${labellableElements.join(", ")}`);
|
||||
if (!hasFor && !nestedLabellableElement) return true;
|
||||
const innerText = element.innerText.trim();
|
||||
if (innerText === "") return true;
|
||||
}
|
||||
},
|
||||
{
|
||||
code: "a11y-media-has-caption",
|
||||
title: "Unmuted video elements should have captions",
|
||||
message: "Videos without captions can be difficult for deaf and hard-of-hearing users to follow along with. If the video does not need captions, add the `muted` attribute.",
|
||||
selector: "video:not([muted])",
|
||||
match(element) {
|
||||
const tracks = element.querySelectorAll("track");
|
||||
if (!tracks.length) return true;
|
||||
const hasCaptionTrack = Array.from(tracks).some(
|
||||
(track) => track.getAttribute("kind") === "captions"
|
||||
);
|
||||
return !hasCaptionTrack;
|
||||
}
|
||||
},
|
||||
{
|
||||
code: "a11y-misplaced-scope",
|
||||
title: "The `scope` attribute should only be used on `<th>` elements",
|
||||
message: "The `scope` attribute tells the browser and screen readers how to navigate tables. In HTML5, it should only be used on `<th>` elements.",
|
||||
selector: ":not(th)[scope]"
|
||||
},
|
||||
{
|
||||
code: "a11y-missing-attribute",
|
||||
title: "Required attributes missing.",
|
||||
description: "Some HTML elements require additional attributes for accessibility. For example, an `img` element requires an `alt` attribute, this attribute is used to describe the content of the image for screen readers.",
|
||||
message: (element) => {
|
||||
const requiredAttributes = a11y_required_attributes[element.localName];
|
||||
const missingAttributes = requiredAttributes.filter(
|
||||
(attribute) => !element.hasAttribute(attribute)
|
||||
);
|
||||
return `${element.localName} element is missing required attributes for accessibility: ${missingAttributes.join(", ")} `;
|
||||
},
|
||||
selector: Object.keys(a11y_required_attributes).join(","),
|
||||
match(element) {
|
||||
const requiredAttributes = a11y_required_attributes[element.localName];
|
||||
if (!requiredAttributes) return true;
|
||||
for (const attribute of requiredAttributes) {
|
||||
if (!element.hasAttribute(attribute)) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
},
|
||||
{
|
||||
code: "a11y-missing-content",
|
||||
title: "Missing content",
|
||||
message: "Headings and anchors must have an accessible name, which can come from: inner text, aria-label, aria-labelledby, an img with alt property, or an svg with a tag <title></title>.",
|
||||
selector: a11y_required_content.join(","),
|
||||
match(element) {
|
||||
const innerText = element.innerText?.trim();
|
||||
if (innerText && innerText !== "") return false;
|
||||
const ariaLabel = element.getAttribute("aria-label")?.trim();
|
||||
if (ariaLabel && ariaLabel !== "") return false;
|
||||
const ariaLabelledby = element.getAttribute("aria-labelledby")?.trim();
|
||||
if (ariaLabelledby) {
|
||||
const ids = ariaLabelledby.split(" ");
|
||||
for (const id of ids) {
|
||||
const referencedElement = document.getElementById(id);
|
||||
if (referencedElement && referencedElement.innerText.trim() !== "") return false;
|
||||
}
|
||||
}
|
||||
const imgElements = element.querySelectorAll("img");
|
||||
for (const img of imgElements) {
|
||||
const altAttribute = img.getAttribute("alt");
|
||||
if (altAttribute && altAttribute.trim() !== "") return false;
|
||||
}
|
||||
const svgElements = element.querySelectorAll("svg");
|
||||
for (const svg of svgElements) {
|
||||
const titleText = svg.querySelector("title");
|
||||
if (titleText && titleText.textContent && titleText.textContent.trim() !== "") return false;
|
||||
}
|
||||
const inputElements = element.querySelectorAll("input");
|
||||
for (const input of inputElements) {
|
||||
if (input.type === "image") {
|
||||
const altAttribute = input.getAttribute("alt");
|
||||
if (altAttribute && altAttribute.trim() !== "") return false;
|
||||
}
|
||||
const inputAriaLabel = input.getAttribute("aria-label")?.trim();
|
||||
if (inputAriaLabel && inputAriaLabel !== "") return false;
|
||||
const inputAriaLabelledby = input.getAttribute("aria-labelledby")?.trim();
|
||||
if (inputAriaLabelledby) {
|
||||
const ids = inputAriaLabelledby.split(" ");
|
||||
for (const id of ids) {
|
||||
const referencedElement = document.getElementById(id);
|
||||
if (referencedElement && referencedElement.innerText.trim() !== "") return false;
|
||||
}
|
||||
}
|
||||
const title = input.getAttribute("title")?.trim();
|
||||
if (title && title !== "") return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
{
|
||||
code: "a11y-no-redundant-roles",
|
||||
title: "HTML element has redundant ARIA roles",
|
||||
message: "Giving these elements an ARIA role that is already set by the browser has no effect and is redundant.",
|
||||
selector: [...a11y_implicit_semantics.keys()].join(","),
|
||||
match(element) {
|
||||
const role = element.getAttribute("role");
|
||||
if (element.localName === "input") {
|
||||
const type = element.getAttribute("type");
|
||||
if (!type) return true;
|
||||
const implicitRoleForType = input_type_to_implicit_role.get(type);
|
||||
if (!implicitRoleForType) return true;
|
||||
if (role === implicitRoleForType) return false;
|
||||
}
|
||||
const implicitRole = a11y_implicit_semantics.get(element.localName);
|
||||
if (!implicitRole) return true;
|
||||
if (role === implicitRole) return false;
|
||||
}
|
||||
},
|
||||
{
|
||||
code: "a11y-no-interactive-element-to-noninteractive-role",
|
||||
title: "Non-interactive ARIA role used on interactive HTML element.",
|
||||
message: "Interactive HTML elements like `<a>` and `<button>` cannot use non-interactive roles like `heading`, `list`, `menu`, and `toolbar`.",
|
||||
selector: `[role]:is(${interactiveElements.join(",")})`,
|
||||
match(element) {
|
||||
if (!isInteractive(element)) return false;
|
||||
const role = element.getAttribute("role");
|
||||
if (!role) return false;
|
||||
if (!ariaRoles.has(role)) return false;
|
||||
if (roleless_elements.includes(element.localName)) return false;
|
||||
if (aria_non_interactive_roles.includes(role)) return true;
|
||||
}
|
||||
},
|
||||
{
|
||||
code: "a11y-no-noninteractive-element-to-interactive-role",
|
||||
title: "Interactive ARIA role used on non-interactive HTML element.",
|
||||
message: "Interactive roles should not be used to convert a non-interactive element to an interactive element",
|
||||
selector: `[role]:not(${interactiveElements.join(",")})`,
|
||||
match(element) {
|
||||
if (!isInteractive(element)) return false;
|
||||
const role = element.getAttribute("role");
|
||||
if (!role) return false;
|
||||
if (!ariaRoles.has(role)) return false;
|
||||
const exceptions = a11y_non_interactive_element_to_interactive_role_exceptions[element.localName];
|
||||
if (exceptions?.includes(role)) return false;
|
||||
if (roleless_elements.includes(element.localName)) return false;
|
||||
if (!aria_non_interactive_roles.includes(role)) return true;
|
||||
}
|
||||
},
|
||||
{
|
||||
code: "a11y-no-noninteractive-tabindex",
|
||||
title: "Invalid `tabindex` on non-interactive element",
|
||||
description: 'The `tabindex` attribute should only be used on interactive elements, as it can be confusing for keyboard-only users to navigate through non-interactive elements. If your element is only conditionally interactive, consider using `tabindex="-1"` to make it focusable only when it is actually interactive.',
|
||||
message: (element) => `${element.localName} elements should not have \`tabindex\` attribute`,
|
||||
selector: '[tabindex]:not([role="tabpanel"])',
|
||||
match(element) {
|
||||
const isScrollable = element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
|
||||
if (isScrollable) return false;
|
||||
if (!isInteractive(element)) return false;
|
||||
if (!interactiveElements.includes(element.localName) && !roleless_elements.includes(element.localName))
|
||||
return true;
|
||||
}
|
||||
},
|
||||
{
|
||||
code: "a11y-positive-tabindex",
|
||||
title: "Avoid positive `tabindex` property values",
|
||||
message: "This will move elements out of the expected tab order, creating a confusing experience for keyboard users.",
|
||||
selector: '[tabindex]:not([tabindex="-1"]):not([tabindex="0"])'
|
||||
},
|
||||
{
|
||||
code: "a11y-role-has-required-aria-props",
|
||||
title: "Missing attributes required for ARIA role",
|
||||
message: (element) => {
|
||||
const { __astro_role: role, __astro_missing_attributes: required } = element;
|
||||
return `${element.localName} element is missing required attributes for its role (${role}): ${required.join(", ")}`;
|
||||
},
|
||||
selector: "*",
|
||||
match(element) {
|
||||
const role = getRole(element);
|
||||
if (!role) return false;
|
||||
if (is_semantic_role_element(role, element.localName, getAttributeObject(element))) {
|
||||
return;
|
||||
}
|
||||
const elementRoles = role.split(WHITESPACE_REGEX);
|
||||
for (const elementRole of elementRoles) {
|
||||
const { requiredProps } = roles.get(elementRole);
|
||||
const required_role_props = Object.keys(requiredProps);
|
||||
const missingProps = required_role_props.filter((prop) => !element.hasAttribute(prop));
|
||||
if (missingProps.length > 0) {
|
||||
element.__astro_role = elementRole;
|
||||
element.__astro_missing_attributes = missingProps;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
code: "a11y-role-supports-aria-props",
|
||||
title: "Unsupported ARIA attribute",
|
||||
message: (element) => {
|
||||
const { __astro_role: role, __astro_unsupported_attributes: unsupported } = element;
|
||||
return `${element.localName} element has ARIA attributes that are not supported by its role (${role}): ${unsupported.join(
|
||||
", "
|
||||
)}`;
|
||||
},
|
||||
selector: "*",
|
||||
match(element) {
|
||||
const role = getRole(element);
|
||||
if (!role) return false;
|
||||
const elementRoles = role.split(WHITESPACE_REGEX);
|
||||
for (const elementRole of elementRoles) {
|
||||
const { props } = roles.get(elementRole);
|
||||
const attributes = getAttributeObject(element);
|
||||
const unsupportedAttributes = aria.keys().filter((attribute) => !(attribute in props));
|
||||
const invalidAttributes = Object.keys(attributes).filter(
|
||||
(key) => key.startsWith("aria-") && unsupportedAttributes.includes(key)
|
||||
);
|
||||
if (invalidAttributes.length > 0) {
|
||||
element.__astro_role = elementRole;
|
||||
element.__astro_unsupported_attributes = invalidAttributes;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
code: "a11y-structure",
|
||||
title: "Invalid DOM structure",
|
||||
message: "The DOM structure must be valid for accessibility of the page, for example `figcaption` must be a direct child of `figure`.",
|
||||
selector: "figcaption:not(figure > figcaption)"
|
||||
},
|
||||
{
|
||||
code: "a11y-unknown-aria-attribute",
|
||||
title: "Unknown ARIA attribute",
|
||||
message: "ARIA attributes prefixed with `aria-` must be valid, non-abstract ARIA attributes.",
|
||||
selector: "*",
|
||||
match(element) {
|
||||
for (const attribute of element.attributes) {
|
||||
if (attribute.name.startsWith("aria-")) {
|
||||
if (!ariaAttributes.has(attribute.name.slice("aria-".length))) return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
code: "a11y-unknown-role",
|
||||
title: "Unknown ARIA role",
|
||||
message: "ARIA roles must be valid, non-abstract ARIA roles.",
|
||||
selector: "[role]",
|
||||
match(element) {
|
||||
const role = element.getAttribute("role");
|
||||
if (!role) return true;
|
||||
if (!ariaRoles.has(role)) return true;
|
||||
}
|
||||
}
|
||||
];
|
||||
const a11y_non_interactive_element_to_interactive_role_exceptions = {
|
||||
ul: ["listbox", "menu", "menubar", "radiogroup", "tablist", "tree", "treegrid"],
|
||||
ol: ["listbox", "menu", "menubar", "radiogroup", "tablist", "tree", "treegrid"],
|
||||
li: ["menuitem", "option", "row", "tab", "treeitem"],
|
||||
table: ["grid"],
|
||||
td: ["gridcell"],
|
||||
fieldset: ["radiogroup", "presentation"]
|
||||
};
|
||||
const combobox_if_list = ["email", "search", "tel", "text", "url"];
|
||||
function input_implicit_role(attributes) {
|
||||
if (!("type" in attributes)) return;
|
||||
const { type, list } = attributes;
|
||||
if (!type) return;
|
||||
if (list && combobox_if_list.includes(type)) {
|
||||
return "combobox";
|
||||
}
|
||||
return input_type_to_implicit_role.get(type);
|
||||
}
|
||||
function menuitem_implicit_role(attributes) {
|
||||
if (!("type" in attributes)) return;
|
||||
const { type } = attributes;
|
||||
if (!type) return;
|
||||
return menuitem_type_to_implicit_role.get(type);
|
||||
}
|
||||
function getRole(element) {
|
||||
if (element.hasAttribute("role")) {
|
||||
return element.getAttribute("role");
|
||||
}
|
||||
return getImplicitRole(element);
|
||||
}
|
||||
function getImplicitRole(element) {
|
||||
const name = element.localName;
|
||||
const attrs = getAttributeObject(element);
|
||||
if (name === "menuitem") {
|
||||
return menuitem_implicit_role(attrs);
|
||||
} else if (name === "input") {
|
||||
return input_implicit_role(attrs);
|
||||
} else {
|
||||
return a11y_implicit_semantics.get(name);
|
||||
}
|
||||
}
|
||||
function getAttributeObject(element) {
|
||||
let obj = {};
|
||||
for (let i = 0; i < element.attributes.length; i++) {
|
||||
const attribute = element.attributes.item(i);
|
||||
obj[attribute.name] = attribute.value;
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
function is_semantic_role_element(role, tag_name, attributes) {
|
||||
for (const [schema, ax_object] of elementAXObjects.entries()) {
|
||||
if (schema.name === tag_name && (!schema.attributes || schema.attributes.every((attr) => attributes[attr.name] === attr.value))) {
|
||||
for (const name of ax_object) {
|
||||
const axRoles = AXObjectRoles.get(name);
|
||||
if (axRoles) {
|
||||
for (const { name: _name } of axRoles) {
|
||||
if (_name === role) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
export {
|
||||
a11y
|
||||
};
|
35
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/rules/index.d.ts
generated
vendored
Normal file
35
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/rules/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,35 @@
|
||||
type DynamicString = string | ((element: Element) => string);
|
||||
export interface AuditRule {
|
||||
code: string;
|
||||
title: DynamicString;
|
||||
message: DynamicString;
|
||||
description?: DynamicString;
|
||||
}
|
||||
export interface ResolvedAuditRule {
|
||||
code: string;
|
||||
title: string;
|
||||
message: string;
|
||||
description?: string;
|
||||
}
|
||||
export interface AuditRuleWithSelector extends AuditRule {
|
||||
selector: string;
|
||||
match?: (element: Element) => boolean | null | undefined | void | Promise<boolean> | Promise<void> | Promise<null> | Promise<undefined>;
|
||||
}
|
||||
export declare const rulesCategories: ({
|
||||
code: string;
|
||||
name: string;
|
||||
icon: "person-arms-spread";
|
||||
rules: AuditRuleWithSelector[];
|
||||
} | {
|
||||
code: string;
|
||||
name: string;
|
||||
icon: "gauge";
|
||||
rules: AuditRuleWithSelector[];
|
||||
})[];
|
||||
export declare function resolveAuditRule(rule: AuditRule, element: Element): ResolvedAuditRule;
|
||||
export declare function getAuditCategory(rule: AuditRule): 'perf' | 'a11y';
|
||||
export declare const categoryLabel: {
|
||||
perf: string;
|
||||
a11y: string;
|
||||
};
|
||||
export {};
|
39
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/rules/index.js
generated
vendored
Normal file
39
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/rules/index.js
generated
vendored
Normal file
@@ -0,0 +1,39 @@
|
||||
import { settings } from "../../../settings.js";
|
||||
import { a11y } from "./a11y.js";
|
||||
import { perf } from "./perf.js";
|
||||
const rulesCategories = [
|
||||
{ code: "a11y", name: "Accessibility", icon: "person-arms-spread", rules: a11y },
|
||||
{ code: "perf", name: "Performance", icon: "gauge", rules: perf }
|
||||
];
|
||||
const dynamicAuditRuleKeys = ["title", "message", "description"];
|
||||
function resolveAuditRule(rule, element) {
|
||||
let resolved = { ...rule };
|
||||
for (const key of dynamicAuditRuleKeys) {
|
||||
const value = rule[key];
|
||||
if (typeof value === "string") continue;
|
||||
try {
|
||||
if (!value) {
|
||||
resolved[key] = "";
|
||||
continue;
|
||||
}
|
||||
resolved[key] = value(element);
|
||||
} catch (err) {
|
||||
settings.logger.error(`Error resolving dynamic audit rule ${rule.code}'s ${key}: ${err}`);
|
||||
resolved[key] = "Error resolving dynamic rule";
|
||||
}
|
||||
}
|
||||
return resolved;
|
||||
}
|
||||
function getAuditCategory(rule) {
|
||||
return rule.code.split("-")[0];
|
||||
}
|
||||
const categoryLabel = {
|
||||
perf: "performance",
|
||||
a11y: "accessibility"
|
||||
};
|
||||
export {
|
||||
categoryLabel,
|
||||
getAuditCategory,
|
||||
resolveAuditRule,
|
||||
rulesCategories
|
||||
};
|
2
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/rules/perf.d.ts
generated
vendored
Normal file
2
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/rules/perf.d.ts
generated
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
import type { AuditRuleWithSelector } from './index.js';
|
||||
export declare const perf: AuditRuleWithSelector[];
|
100
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/rules/perf.js
generated
vendored
Normal file
100
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/rules/perf.js
generated
vendored
Normal file
@@ -0,0 +1,100 @@
|
||||
const EXTERNAL_URL_REGEX = /^(?:[a-z+]+:)?\/\//i;
|
||||
const perf = [
|
||||
{
|
||||
code: "perf-use-image-component",
|
||||
title: "Use the Image component",
|
||||
message: "This image could be replaced with the Image component to improve performance.",
|
||||
selector: "img:not([data-image-component])",
|
||||
async match(element) {
|
||||
const src = element.getAttribute("src");
|
||||
if (!src) return false;
|
||||
if (src.startsWith("data:")) return false;
|
||||
if (!EXTERNAL_URL_REGEX.test(src)) {
|
||||
const imageData = await fetch(src).then((response) => response.blob());
|
||||
if (imageData.size < 20480) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
{
|
||||
code: "perf-use-loading-lazy",
|
||||
title: "Unoptimized loading attribute",
|
||||
message: (element) => `This ${element.nodeName} tag is below the fold and could be lazy-loaded to improve performance.`,
|
||||
selector: 'img:not([loading]), img[loading="eager"], iframe:not([loading]), iframe[loading="eager"]',
|
||||
match(element) {
|
||||
const htmlElement = element;
|
||||
const elementYPosition = htmlElement.getBoundingClientRect().y + window.scrollY;
|
||||
if (elementYPosition < window.innerHeight) return false;
|
||||
if (htmlElement.src.startsWith("data:")) return false;
|
||||
return true;
|
||||
}
|
||||
},
|
||||
{
|
||||
code: "perf-use-loading-eager",
|
||||
title: "Unoptimized loading attribute",
|
||||
message: (element) => `This ${element.nodeName} tag is above the fold and could be eagerly-loaded to improve performance.`,
|
||||
selector: 'img[loading="lazy"], iframe[loading="lazy"]',
|
||||
match(element) {
|
||||
const htmlElement = element;
|
||||
const elementYPosition = htmlElement.getBoundingClientRect().y + window.scrollY;
|
||||
if (elementYPosition > window.innerHeight) return false;
|
||||
if (htmlElement.src.startsWith("data:")) return false;
|
||||
return true;
|
||||
}
|
||||
},
|
||||
{
|
||||
code: "perf-use-videos",
|
||||
title: "Use videos instead of GIFs for large animations",
|
||||
message: "This GIF could be replaced with a video to reduce its file size and improve performance.",
|
||||
selector: 'img[src$=".gif"]',
|
||||
async match(element) {
|
||||
const src = element.getAttribute("src");
|
||||
if (!src) return false;
|
||||
if (EXTERNAL_URL_REGEX.test(src)) return false;
|
||||
if (!EXTERNAL_URL_REGEX.test(src)) {
|
||||
const imageData = await fetch(src).then((response) => response.blob());
|
||||
if (imageData.size < 102400) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
{
|
||||
code: "perf-slow-component-server-render",
|
||||
title: "Server-rendered component took a long time to render",
|
||||
message: (element) => `This component took an unusually long time to render on the server (${getCleanRenderingTime(
|
||||
element.getAttribute("server-render-time")
|
||||
)}). This might be a sign that it's doing too much work on the server, or something is blocking rendering.`,
|
||||
selector: "astro-island[server-render-time]",
|
||||
match(element) {
|
||||
const serverRenderTime = element.getAttribute("server-render-time");
|
||||
if (!serverRenderTime) return false;
|
||||
const renderingTime = parseFloat(serverRenderTime);
|
||||
if (Number.isNaN(renderingTime)) return false;
|
||||
return renderingTime > 500;
|
||||
}
|
||||
},
|
||||
{
|
||||
code: "perf-slow-component-client-hydration",
|
||||
title: "Client-rendered component took a long time to hydrate",
|
||||
message: (element) => `This component took an unusually long time to render on the server (${getCleanRenderingTime(
|
||||
element.getAttribute("client-render-time")
|
||||
)}). This could be a sign that something is blocking the main thread and preventing the component from hydrating quickly.`,
|
||||
selector: "astro-island[client-render-time]",
|
||||
match(element) {
|
||||
const clientRenderTime = element.getAttribute("client-render-time");
|
||||
if (!clientRenderTime) return false;
|
||||
const renderingTime = parseFloat(clientRenderTime);
|
||||
if (Number.isNaN(renderingTime)) return false;
|
||||
return renderingTime > 500;
|
||||
}
|
||||
}
|
||||
];
|
||||
function getCleanRenderingTime(time) {
|
||||
if (!time) return "unknown";
|
||||
const renderingTime = parseFloat(time);
|
||||
if (Number.isNaN(renderingTime)) return "unknown";
|
||||
return renderingTime.toFixed(2) + "s";
|
||||
}
|
||||
export {
|
||||
perf
|
||||
};
|
7
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/ui/audit-list-item.d.ts
generated
vendored
Normal file
7
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/ui/audit-list-item.d.ts
generated
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
export declare class DevToolbarAuditListItem extends HTMLElement {
|
||||
clickAction?: () => void | (() => Promise<void>);
|
||||
shadowRoot: ShadowRoot;
|
||||
isManualFocus: boolean;
|
||||
constructor();
|
||||
connectedCallback(): void;
|
||||
}
|
144
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/ui/audit-list-item.js
generated
vendored
Normal file
144
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/ui/audit-list-item.js
generated
vendored
Normal file
@@ -0,0 +1,144 @@
|
||||
class DevToolbarAuditListItem extends HTMLElement {
|
||||
clickAction;
|
||||
shadowRoot;
|
||||
isManualFocus;
|
||||
constructor() {
|
||||
super();
|
||||
this.shadowRoot = this.attachShadow({ mode: "open" });
|
||||
this.isManualFocus = false;
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host>button, :host>div {
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid #1F2433;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:host>button:hover, :host([hovered])>button {
|
||||
background: #FFFFFF20;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
:host>button#astro-overlay-card {
|
||||
text-align: left;
|
||||
box-shadow: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
:host(:not([active]))>button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.extended-info {
|
||||
display: none;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.extended-info hr {
|
||||
border: 1px solid rgba(27, 30, 36, 1);
|
||||
}
|
||||
|
||||
:host([active]) .extended-info {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 98px;
|
||||
height: calc(100% - 98px);
|
||||
background: #0d0e12;
|
||||
user-select: text;
|
||||
overflow: auto;
|
||||
border: none;
|
||||
z-index: 1000000000;
|
||||
flex-direction: column;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
:host([active])>button#astro-overlay-card {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.audit-title {
|
||||
margin: 0;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.extended-info .audit-selector {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid transparent;
|
||||
user-select: none;
|
||||
color: rgba(191, 193, 201, 1);
|
||||
}
|
||||
|
||||
.extended-info .audit-selector:hover {
|
||||
border-bottom: 1px solid rgba(255, 255, 255);
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.audit-selector svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.extended-info .audit-description {
|
||||
color: rgba(191, 193, 201, 1);
|
||||
}
|
||||
|
||||
.extended-info code {
|
||||
padding: 1px 3px;
|
||||
border-radius: 3px;
|
||||
background: #1F2433;
|
||||
}
|
||||
|
||||
.reset-button {
|
||||
text-align: left;
|
||||
border: none;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
line-height: normal;
|
||||
-webkit-font-smoothing: inherit;
|
||||
-moz-osx-font-smoothing: inherit;
|
||||
-webkit-appearance: none;
|
||||
padding: 0;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<button id="astro-overlay-card">
|
||||
<slot />
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
connectedCallback() {
|
||||
if (this.clickAction) {
|
||||
this.shadowRoot.getElementById("astro-overlay-card")?.addEventListener("click", this.clickAction);
|
||||
}
|
||||
}
|
||||
}
|
||||
export {
|
||||
DevToolbarAuditListItem
|
||||
};
|
23
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/ui/audit-list-window.d.ts
generated
vendored
Normal file
23
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/ui/audit-list-window.d.ts
generated
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
import type { Icon } from '../../../ui-library/icons.js';
|
||||
import type { Audit } from '../index.js';
|
||||
export declare function createRoundedBadge(icon: Icon): {
|
||||
badge: import("../../../ui-library/badge.js").DevToolbarBadge;
|
||||
updateCount: (count: number) => void;
|
||||
};
|
||||
export declare class DevToolbarAuditListWindow extends HTMLElement {
|
||||
_audits: Audit[];
|
||||
shadowRoot: ShadowRoot;
|
||||
badges: {
|
||||
[key: string]: {
|
||||
badge: HTMLElement;
|
||||
updateCount: (count: number) => void;
|
||||
};
|
||||
};
|
||||
get audits(): Audit[];
|
||||
set audits(value: Audit[]);
|
||||
constructor();
|
||||
connectedCallback(): void;
|
||||
updateAuditList(): void;
|
||||
updateBadgeCounts(): void;
|
||||
render(): void;
|
||||
}
|
382
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/ui/audit-list-window.js
generated
vendored
Normal file
382
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/ui/audit-list-window.js
generated
vendored
Normal file
@@ -0,0 +1,382 @@
|
||||
import { getAuditCategory, rulesCategories } from "../rules/index.js";
|
||||
function createRoundedBadge(icon) {
|
||||
const badge = document.createElement("astro-dev-toolbar-badge");
|
||||
badge.shadowRoot.innerHTML += `
|
||||
<style>
|
||||
:host>div {
|
||||
padding: 12px 8px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
badge.innerHTML = `<astro-dev-toolbar-icon icon="${icon}"></astro-dev-toolbar-icon>0`;
|
||||
return {
|
||||
badge,
|
||||
updateCount: (count) => {
|
||||
if (count === 0) {
|
||||
badge.badgeStyle = "green";
|
||||
} else {
|
||||
badge.badgeStyle = "purple";
|
||||
}
|
||||
badge.innerHTML = `<astro-dev-toolbar-icon icon="${icon}"></astro-dev-toolbar-icon>${count}`;
|
||||
}
|
||||
};
|
||||
}
|
||||
class DevToolbarAuditListWindow extends HTMLElement {
|
||||
_audits = [];
|
||||
shadowRoot;
|
||||
badges = {};
|
||||
get audits() {
|
||||
return this._audits;
|
||||
}
|
||||
set audits(value) {
|
||||
this._audits = value;
|
||||
this.render();
|
||||
}
|
||||
constructor() {
|
||||
super();
|
||||
this.shadowRoot = this.attachShadow({ mode: "open" });
|
||||
this.shadowRoot.innerHTML = `<style>
|
||||
:host {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(0deg, #13151a, #13151a), linear-gradient(0deg, #343841, #343841);
|
||||
border: 1px solid rgba(52, 56, 65, 1);
|
||||
width: min(640px, 100%);
|
||||
max-height: 480px;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
font-family:
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
"Helvetica Neue",
|
||||
Arial,
|
||||
"Noto Sans",
|
||||
sans-serif,
|
||||
"Apple Color Emoji",
|
||||
"Segoe UI Emoji",
|
||||
"Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
color: rgba(191, 193, 201, 1);
|
||||
position: fixed;
|
||||
z-index: 999999999;
|
||||
bottom: 72px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-shadow:
|
||||
0px 0px 0px 0px rgba(19, 21, 26, 0.3),
|
||||
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) {
|
||||
:host {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
:host {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
hr,
|
||||
::slotted(hr) {
|
||||
border: 1px solid rgba(27, 30, 36, 1);
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.reset-button {
|
||||
text-align: left;
|
||||
border: none;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
line-height: normal;
|
||||
-webkit-font-smoothing: inherit;
|
||||
-moz-osx-font-smoothing: inherit;
|
||||
-webkit-appearance: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:host {
|
||||
left: initial;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
transform: none;
|
||||
width: 350px;
|
||||
min-height: 350px;
|
||||
max-height: 420px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
header > section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
header.category-header {
|
||||
background: rgba(27, 30, 36, 1);
|
||||
padding: 10px 16px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
header.category-header astro-dev-toolbar-icon {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
#audit-counts {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
#audit-counts > div {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.audit-header {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.audit-selector {
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||
"Liberation Mono", "Courier New", monospace;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
[active] .audit-selector:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selector-title-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
astro-dev-toolbar-icon {
|
||||
color: white;
|
||||
fill: white;
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
#audit-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#back-to-list {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(27, 30, 36, 1);
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
#back-to-list:hover {
|
||||
cursor: pointer;
|
||||
background: #313236;
|
||||
}
|
||||
|
||||
#back-to-list:has(+ #audit-list astro-dev-toolbar-audit-list-item[active]) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.no-audit-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.no-audit-container h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.no-audit-container astro-dev-toolbar-icon {
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template id="category-template">
|
||||
<div>
|
||||
<header class="category-header">
|
||||
</header>
|
||||
<div class="category-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<header>
|
||||
<section id="header-left">
|
||||
<h1>Audit</h1>
|
||||
<section id="audit-counts"></section>
|
||||
</section>
|
||||
</header>
|
||||
<hr />
|
||||
<button id="back-to-list" class="reset-button">
|
||||
<astro-dev-toolbar-icon icon="arrow-left"></astro-dev-toolbar-icon>
|
||||
Back to list
|
||||
</button>
|
||||
<div id="audit-list"></div>
|
||||
`;
|
||||
const auditCounts = this.shadowRoot.getElementById("audit-counts");
|
||||
if (auditCounts) {
|
||||
rulesCategories.forEach((category) => {
|
||||
const headerEntryContainer = document.createElement("div");
|
||||
const auditCount = this.audits.filter(
|
||||
(audit) => getAuditCategory(audit.rule) === category.code
|
||||
).length;
|
||||
const categoryBadge = createRoundedBadge(category.icon);
|
||||
categoryBadge.updateCount(auditCount);
|
||||
headerEntryContainer.append(categoryBadge.badge);
|
||||
auditCounts.append(headerEntryContainer);
|
||||
this.badges[category.code] = categoryBadge;
|
||||
});
|
||||
}
|
||||
const backToListButton = this.shadowRoot.getElementById("back-to-list");
|
||||
if (backToListButton) {
|
||||
backToListButton.addEventListener("click", () => {
|
||||
const activeAudit = this.shadowRoot.querySelector(
|
||||
"astro-dev-toolbar-audit-list-item[active]"
|
||||
);
|
||||
if (activeAudit) {
|
||||
activeAudit.toggleAttribute("active", false);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
}
|
||||
updateAuditList() {
|
||||
const auditListContainer = this.shadowRoot.getElementById("audit-list");
|
||||
if (auditListContainer) {
|
||||
auditListContainer.innerHTML = "";
|
||||
if (this.audits.length > 0) {
|
||||
for (const category of rulesCategories) {
|
||||
const template = this.shadowRoot.getElementById(
|
||||
"category-template"
|
||||
);
|
||||
if (!template) return;
|
||||
const clone = document.importNode(template.content, true);
|
||||
const categoryContainer = clone.querySelector("div");
|
||||
const categoryHeader = clone.querySelector(".category-header");
|
||||
categoryHeader.innerHTML = `<astro-dev-toolbar-icon icon="${category.icon}"></astro-dev-toolbar-icon><h2>${category.name}</h2>`;
|
||||
categoryContainer.append(categoryHeader);
|
||||
const categoryContent = clone.querySelector(".category-content");
|
||||
const categoryAudits = this.audits.filter(
|
||||
(audit) => getAuditCategory(audit.rule) === category.code
|
||||
);
|
||||
for (const audit of categoryAudits) {
|
||||
if (audit.card) categoryContent.append(audit.card);
|
||||
}
|
||||
categoryContainer.append(categoryContent);
|
||||
auditListContainer.append(categoryContainer);
|
||||
}
|
||||
} else {
|
||||
const noAuditContainer = document.createElement("div");
|
||||
noAuditContainer.classList.add("no-audit-container");
|
||||
noAuditContainer.innerHTML = `
|
||||
<header>
|
||||
<h1></astro-dev-toolbar-icon>No accessibility or performance issues detected.</h1>
|
||||
</header>
|
||||
<p>
|
||||
Nice work! This app scans the page and highlights common accessibility and performance issues for you, like a missing "alt" attribute on an image, or a image not using performant attributes.
|
||||
</p>
|
||||
<astro-dev-toolbar-icon icon="houston-detective"></astro-dev-toolbar-icon>
|
||||
`;
|
||||
auditListContainer.append(noAuditContainer);
|
||||
}
|
||||
}
|
||||
}
|
||||
updateBadgeCounts() {
|
||||
for (const category of rulesCategories) {
|
||||
const auditCount = this.audits.filter(
|
||||
(audit) => getAuditCategory(audit.rule) === category.code
|
||||
).length;
|
||||
this.badges[category.code].updateCount(auditCount);
|
||||
}
|
||||
}
|
||||
render() {
|
||||
this.updateAuditList();
|
||||
this.updateBadgeCounts();
|
||||
}
|
||||
}
|
||||
export {
|
||||
DevToolbarAuditListWindow,
|
||||
createRoundedBadge
|
||||
};
|
6
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/ui/audit-ui.d.ts
generated
vendored
Normal file
6
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/ui/audit-ui.d.ts
generated
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
import type { Audit } from '../index.js';
|
||||
import type { DevToolbarAuditListItem } from './audit-list-item.js';
|
||||
export declare function createAuditUI(audit: Audit, audits: Audit[]): {
|
||||
highlight: import("../../../ui-library/highlight.js").DevToolbarHighlight;
|
||||
card: DevToolbarAuditListItem;
|
||||
};
|
129
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/ui/audit-ui.js
generated
vendored
Normal file
129
node_modules/astro/dist/runtime/client/dev-toolbar/apps/audit/ui/audit-ui.js
generated
vendored
Normal file
@@ -0,0 +1,129 @@
|
||||
import { escape as escapeHTML } from "html-escaper";
|
||||
import {
|
||||
attachTooltipToHighlight,
|
||||
createHighlight,
|
||||
getElementsPositionInDocument
|
||||
} from "../../utils/highlight.js";
|
||||
import { resolveAuditRule } from "../rules/index.js";
|
||||
function truncate(val, maxLength) {
|
||||
return val.length > maxLength ? val.slice(0, maxLength - 1) + "…" : val;
|
||||
}
|
||||
function createAuditUI(audit, audits) {
|
||||
const rect = audit.auditedElement.getBoundingClientRect();
|
||||
const highlight = createHighlight(rect, "warning", { "data-audit-code": audit.rule.code });
|
||||
const resolvedAuditRule = resolveAuditRule(audit.rule, audit.auditedElement);
|
||||
const tooltip = buildAuditTooltip(resolvedAuditRule, audit.auditedElement);
|
||||
const card = buildAuditCard(resolvedAuditRule, highlight, audit.auditedElement, audits);
|
||||
["focus", "mouseover"].forEach((event) => {
|
||||
const attribute = event === "focus" ? "active" : "hovered";
|
||||
highlight.addEventListener(event, () => {
|
||||
if (event === "focus") {
|
||||
audits.forEach((adt) => {
|
||||
if (adt.card) adt.card.toggleAttribute("active", false);
|
||||
});
|
||||
if (!card.isManualFocus) card.scrollIntoView();
|
||||
card.toggleAttribute("active", true);
|
||||
} else {
|
||||
card.toggleAttribute(attribute, true);
|
||||
}
|
||||
});
|
||||
});
|
||||
highlight.addEventListener("mouseout", () => {
|
||||
card.toggleAttribute("hovered", false);
|
||||
});
|
||||
const { isFixed } = getElementsPositionInDocument(audit.auditedElement);
|
||||
if (isFixed) {
|
||||
tooltip.style.position = highlight.style.position = "fixed";
|
||||
}
|
||||
attachTooltipToHighlight(highlight, tooltip, audit.auditedElement);
|
||||
return { highlight, card };
|
||||
}
|
||||
function buildAuditTooltip(rule, element) {
|
||||
const tooltip = document.createElement("astro-dev-toolbar-tooltip");
|
||||
const { title, message } = rule;
|
||||
tooltip.sections = [
|
||||
{
|
||||
icon: "warning",
|
||||
title: escapeHTML(title)
|
||||
},
|
||||
{
|
||||
content: escapeHTML(message)
|
||||
}
|
||||
];
|
||||
const elementFile = element.getAttribute("data-astro-source-file");
|
||||
const elementPosition = element.getAttribute("data-astro-source-loc");
|
||||
if (elementFile) {
|
||||
const elementFileWithPosition = elementFile + (elementPosition ? ":" + elementPosition : "");
|
||||
tooltip.sections.push({
|
||||
content: elementFileWithPosition.slice(
|
||||
window.__astro_dev_toolbar__.root.length - 1
|
||||
// We want to keep the final slash, so minus one.
|
||||
),
|
||||
clickDescription: "Click to go to file",
|
||||
async clickAction() {
|
||||
await fetch("/__open-in-editor?file=" + encodeURIComponent(elementFileWithPosition));
|
||||
}
|
||||
});
|
||||
}
|
||||
return tooltip;
|
||||
}
|
||||
function buildAuditCard(rule, highlightElement, auditedElement, audits) {
|
||||
const card = document.createElement(
|
||||
"astro-dev-toolbar-audit-list-item"
|
||||
);
|
||||
card.clickAction = () => {
|
||||
if (card.hasAttribute("active")) return;
|
||||
audits.forEach((audit) => {
|
||||
audit.card?.toggleAttribute("active", false);
|
||||
});
|
||||
highlightElement.scrollIntoView();
|
||||
card.isManualFocus = true;
|
||||
highlightElement.focus();
|
||||
card.isManualFocus = false;
|
||||
};
|
||||
const selectorTitleContainer = document.createElement("section");
|
||||
selectorTitleContainer.classList.add("selector-title-container");
|
||||
const selector = document.createElement("span");
|
||||
const selectorName = truncate(auditedElement.tagName.toLowerCase(), 8);
|
||||
selector.classList.add("audit-selector");
|
||||
selector.innerHTML = escapeHTML(selectorName);
|
||||
const title = document.createElement("h3");
|
||||
title.classList.add("audit-title");
|
||||
title.innerText = rule.title;
|
||||
selectorTitleContainer.append(selector, title);
|
||||
card.append(selectorTitleContainer);
|
||||
const extendedInfo = document.createElement("div");
|
||||
extendedInfo.classList.add("extended-info");
|
||||
const selectorButton = document.createElement("button");
|
||||
selectorButton.className = "audit-selector reset-button";
|
||||
selectorButton.innerHTML = `${selectorName} <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M128,136v64a8,8,0,0,1-16,0V155.32L45.66,221.66a8,8,0,0,1-11.32-11.32L100.68,144H56a8,8,0,0,1,0-16h64A8,8,0,0,1,128,136ZM208,32H80A16,16,0,0,0,64,48V96a8,8,0,0,0,16,0V48H208V176H160a8,8,0,0,0,0,16h48a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Z"></path></svg>`;
|
||||
selectorButton.addEventListener("click", () => {
|
||||
highlightElement.scrollIntoView();
|
||||
highlightElement.focus();
|
||||
});
|
||||
extendedInfo.append(title.cloneNode(true));
|
||||
extendedInfo.append(selectorButton);
|
||||
extendedInfo.append(document.createElement("hr"));
|
||||
const message = document.createElement("p");
|
||||
message.classList.add("audit-message");
|
||||
message.innerHTML = simpleRenderMarkdown(rule.message);
|
||||
extendedInfo.appendChild(message);
|
||||
const description = rule.description;
|
||||
if (description) {
|
||||
const descriptionElement = document.createElement("p");
|
||||
descriptionElement.classList.add("audit-description");
|
||||
descriptionElement.innerHTML = simpleRenderMarkdown(description);
|
||||
extendedInfo.appendChild(descriptionElement);
|
||||
}
|
||||
card.shadowRoot.appendChild(extendedInfo);
|
||||
return card;
|
||||
}
|
||||
const linkRegex = /\[([^[]+)\]\((.*)\)/g;
|
||||
const boldRegex = /\*\*(.+)\*\*/g;
|
||||
const codeRegex = /`([^`]+)`/g;
|
||||
function simpleRenderMarkdown(markdown) {
|
||||
return escapeHTML(markdown).replace(linkRegex, `<a href="$2" target="_blank">$1</a>`).replace(boldRegex, "<b>$1</b>").replace(codeRegex, "<code>$1</code>");
|
||||
}
|
||||
export {
|
||||
createAuditUI
|
||||
};
|
7
node_modules/astro/dist/runtime/client/dev-toolbar/apps/settings.d.ts
generated
vendored
Normal file
7
node_modules/astro/dist/runtime/client/dev-toolbar/apps/settings.d.ts
generated
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
declare const _default: {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: "gear";
|
||||
init(canvas: ShadowRoot, eventTarget: import("../helpers.js").ToolbarAppEventTarget): void;
|
||||
};
|
||||
export default _default;
|
201
node_modules/astro/dist/runtime/client/dev-toolbar/apps/settings.js
generated
vendored
Normal file
201
node_modules/astro/dist/runtime/client/dev-toolbar/apps/settings.js
generated
vendored
Normal file
@@ -0,0 +1,201 @@
|
||||
import { settings } from "../settings.js";
|
||||
import { isValidPlacement, placements } from "../ui-library/window.js";
|
||||
import {
|
||||
closeOnOutsideClick,
|
||||
createWindowElement,
|
||||
synchronizePlacementOnUpdate
|
||||
} from "./utils/window.js";
|
||||
const settingsRows = [
|
||||
{
|
||||
name: "Disable notifications",
|
||||
description: "Hide notification badges in the toolbar.",
|
||||
input: "checkbox",
|
||||
settingKey: "disableAppNotification",
|
||||
changeEvent: (evt) => {
|
||||
if (evt.currentTarget instanceof HTMLInputElement) {
|
||||
const devToolbar = document.querySelector("astro-dev-toolbar");
|
||||
if (devToolbar) {
|
||||
devToolbar.setNotificationVisible(!evt.currentTarget.checked);
|
||||
}
|
||||
settings.updateSetting("disableAppNotification", evt.currentTarget.checked);
|
||||
const action = evt.currentTarget.checked ? "disabled" : "enabled";
|
||||
settings.logger.verboseLog(`App notification badges ${action}`);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Verbose logging",
|
||||
description: "Logs dev toolbar events in the browser console.",
|
||||
input: "checkbox",
|
||||
settingKey: "verbose",
|
||||
changeEvent: (evt) => {
|
||||
if (evt.currentTarget instanceof HTMLInputElement) {
|
||||
settings.updateSetting("verbose", evt.currentTarget.checked);
|
||||
const action = evt.currentTarget.checked ? "enabled" : "disabled";
|
||||
settings.logger.verboseLog(`Verbose logging ${action}`);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Placement",
|
||||
description: "Adjust the placement of the dev toolbar.",
|
||||
input: "select",
|
||||
settingKey: "placement",
|
||||
changeEvent: (evt) => {
|
||||
if (evt.currentTarget instanceof HTMLSelectElement) {
|
||||
const placement = evt.currentTarget.value;
|
||||
if (isValidPlacement(placement)) {
|
||||
document.querySelector("astro-dev-toolbar")?.setToolbarPlacement(placement);
|
||||
settings.updateSetting("placement", placement);
|
||||
settings.logger.verboseLog(`Placement set to ${placement}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
var settings_default = {
|
||||
id: "astro:settings",
|
||||
name: "Settings",
|
||||
icon: "gear",
|
||||
init(canvas, eventTarget) {
|
||||
createSettingsWindow();
|
||||
document.addEventListener("astro:after-swap", createSettingsWindow);
|
||||
closeOnOutsideClick(eventTarget);
|
||||
synchronizePlacementOnUpdate(eventTarget, canvas);
|
||||
function createSettingsWindow() {
|
||||
const windowElement = createWindowElement(
|
||||
`<style>
|
||||
:host astro-dev-toolbar-window {
|
||||
height: 480px;
|
||||
|
||||
--color-purple: rgba(224, 204, 250, 1);
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.setting-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: white;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 14px;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
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;
|
||||
display: block;
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--color-purple);
|
||||
border-color: #343841;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: .4em;
|
||||
background-color: #24262D;
|
||||
padding: .3em;
|
||||
}
|
||||
|
||||
label > section {
|
||||
max-width: 67%;
|
||||
}
|
||||
p {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
a, a:visited {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
a:hover {
|
||||
color: #f4ecfd;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1><astro-dev-toolbar-icon icon="gear"></astro-dev-toolbar-icon> Settings</h1>
|
||||
</header>
|
||||
|
||||
<hr id="general"/>
|
||||
|
||||
<label class="setting-row">
|
||||
<section>
|
||||
<h3>Hide toolbar</h3>
|
||||
Run <code>astro preferences disable devToolbar</code> in your terminal to disable the toolbar. <a href="https://docs.astro.build/en/reference/cli-reference/#astro-preferences" target="_blank">Learn more</a>.
|
||||
</section>
|
||||
</label>
|
||||
`
|
||||
);
|
||||
const general = windowElement.querySelector("#general");
|
||||
for (const settingsRow of settingsRows) {
|
||||
general.after(document.createElement("hr"));
|
||||
general.after(getElementForSettingAsString(settingsRow));
|
||||
}
|
||||
canvas.append(windowElement);
|
||||
function getElementForSettingAsString(setting) {
|
||||
const label = document.createElement("label");
|
||||
label.classList.add("setting-row");
|
||||
const section = document.createElement("section");
|
||||
section.innerHTML = `<h3>${setting.name}</h3>${setting.description}`;
|
||||
label.append(section);
|
||||
switch (setting.input) {
|
||||
case "checkbox": {
|
||||
const astroToggle = document.createElement("astro-dev-toolbar-toggle");
|
||||
astroToggle.input.addEventListener("change", setting.changeEvent);
|
||||
astroToggle.input.checked = settings.config[setting.settingKey];
|
||||
label.append(astroToggle);
|
||||
break;
|
||||
}
|
||||
case "select": {
|
||||
const astroSelect = document.createElement("astro-dev-toolbar-select");
|
||||
placements.forEach((placement) => {
|
||||
const option = document.createElement("option");
|
||||
option.setAttribute("value", placement);
|
||||
if (placement === settings.config[setting.settingKey]) {
|
||||
option.selected = true;
|
||||
}
|
||||
option.textContent = `${placement.slice(0, 1).toUpperCase()}${placement.slice(
|
||||
1
|
||||
)}`.replace("-", " ");
|
||||
astroSelect.append(option);
|
||||
});
|
||||
astroSelect.element.addEventListener("change", setting.changeEvent);
|
||||
label.append(astroSelect);
|
||||
break;
|
||||
}
|
||||
case "number":
|
||||
case "text":
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return label;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
export {
|
||||
settings_default as default
|
||||
};
|
8
node_modules/astro/dist/runtime/client/dev-toolbar/apps/utils/highlight.d.ts
generated
vendored
Normal file
8
node_modules/astro/dist/runtime/client/dev-toolbar/apps/utils/highlight.d.ts
generated
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
import type { DevToolbarHighlight } from '../../ui-library/highlight.js';
|
||||
import type { Icon } from '../../ui-library/icons.js';
|
||||
export declare function createHighlight(rect: DOMRect, icon?: Icon, additionalAttributes?: Record<string, string>): DevToolbarHighlight;
|
||||
export declare function getElementsPositionInDocument(el: Element): {
|
||||
isFixed: boolean;
|
||||
};
|
||||
export declare function positionHighlight(highlight: DevToolbarHighlight, rect: DOMRect): void;
|
||||
export declare function attachTooltipToHighlight(highlight: DevToolbarHighlight, tooltip: HTMLElement, originalElement: Element): void;
|
69
node_modules/astro/dist/runtime/client/dev-toolbar/apps/utils/highlight.js
generated
vendored
Normal file
69
node_modules/astro/dist/runtime/client/dev-toolbar/apps/utils/highlight.js
generated
vendored
Normal file
@@ -0,0 +1,69 @@
|
||||
function createHighlight(rect, icon, additionalAttributes) {
|
||||
const highlight = document.createElement("astro-dev-toolbar-highlight");
|
||||
if (icon) highlight.icon = icon;
|
||||
if (additionalAttributes) {
|
||||
for (const [key, value] of Object.entries(additionalAttributes)) {
|
||||
highlight.setAttribute(key, value);
|
||||
}
|
||||
}
|
||||
highlight.tabIndex = 0;
|
||||
if (rect.width === 0 || rect.height === 0) {
|
||||
highlight.style.display = "none";
|
||||
} else {
|
||||
positionHighlight(highlight, rect);
|
||||
}
|
||||
return highlight;
|
||||
}
|
||||
function getElementsPositionInDocument(el) {
|
||||
let isFixed = false;
|
||||
let current = el;
|
||||
while (current instanceof Element) {
|
||||
let style = getComputedStyle(current);
|
||||
if (style.position === "fixed") {
|
||||
isFixed = true;
|
||||
}
|
||||
current = current.parentNode;
|
||||
}
|
||||
return {
|
||||
isFixed
|
||||
};
|
||||
}
|
||||
function positionHighlight(highlight, rect) {
|
||||
highlight.style.display = "block";
|
||||
const scrollY = highlight.style.position === "fixed" ? 0 : window.scrollY;
|
||||
highlight.style.top = `${Math.max(rect.top + scrollY - 10, 0)}px`;
|
||||
highlight.style.left = `${Math.max(rect.left + window.scrollX - 10, 0)}px`;
|
||||
highlight.style.width = `${rect.width + 15}px`;
|
||||
highlight.style.height = `${rect.height + 15}px`;
|
||||
}
|
||||
function attachTooltipToHighlight(highlight, tooltip, originalElement) {
|
||||
highlight.shadowRoot.append(tooltip);
|
||||
["mouseover", "focus"].forEach((event) => {
|
||||
highlight.addEventListener(event, () => {
|
||||
tooltip.dataset.show = "true";
|
||||
const originalRect = originalElement.getBoundingClientRect();
|
||||
const dialogRect = tooltip.getBoundingClientRect();
|
||||
if (originalRect.top < dialogRect.height) {
|
||||
tooltip.style.top = `${originalRect.height + 15}px`;
|
||||
} else {
|
||||
tooltip.style.top = `-${tooltip.offsetHeight}px`;
|
||||
}
|
||||
if (dialogRect.right > document.documentElement.clientWidth) {
|
||||
tooltip.style.right = "0px";
|
||||
} else if (dialogRect.left < 0) {
|
||||
tooltip.style.left = "0px";
|
||||
}
|
||||
});
|
||||
});
|
||||
["mouseout", "blur"].forEach((event) => {
|
||||
highlight.addEventListener(event, () => {
|
||||
tooltip.dataset.show = "false";
|
||||
});
|
||||
});
|
||||
}
|
||||
export {
|
||||
attachTooltipToHighlight,
|
||||
createHighlight,
|
||||
getElementsPositionInDocument,
|
||||
positionHighlight
|
||||
};
|
3
node_modules/astro/dist/runtime/client/dev-toolbar/apps/utils/icons.d.ts
generated
vendored
Normal file
3
node_modules/astro/dist/runtime/client/dev-toolbar/apps/utils/icons.d.ts
generated
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import type { Integration } from '../astro.js';
|
||||
export declare function iconForIntegration(integration: Integration): string;
|
||||
export declare function colorForIntegration(): string;
|
37
node_modules/astro/dist/runtime/client/dev-toolbar/apps/utils/icons.js
generated
vendored
Normal file
37
node_modules/astro/dist/runtime/client/dev-toolbar/apps/utils/icons.js
generated
vendored
Normal file
@@ -0,0 +1,37 @@
|
||||
function randomFromArray(list) {
|
||||
return list[Math.floor(Math.random() * list.length)];
|
||||
}
|
||||
const categoryIcons = new Map(
|
||||
Object.entries({
|
||||
frameworks: ["puzzle", "grid"],
|
||||
adapters: ["puzzle", "grid", "compress"],
|
||||
"css+ui": ["compress", "grid", "image", "resizeImage", "puzzle"],
|
||||
"performance+seo": ["approveUser", "checkCircle", "compress", "robot", "searchFile", "sitemap"],
|
||||
analytics: ["checkCircle", "compress", "searchFile"],
|
||||
accessibility: ["approveUser", "checkCircle"],
|
||||
other: ["checkCircle", "grid", "puzzle", "sitemap"]
|
||||
})
|
||||
);
|
||||
function iconForIntegration(integration) {
|
||||
const icons = integration.categories.filter((category) => categoryIcons.has(category)).map((category) => categoryIcons.get(category)).flat();
|
||||
return randomFromArray(icons);
|
||||
}
|
||||
const iconColors = [
|
||||
"#BC52EE",
|
||||
"#6D6AF0",
|
||||
"#52EEBD",
|
||||
"#52B7EE",
|
||||
"#52EE55",
|
||||
"#B7EE52",
|
||||
"#EEBD52",
|
||||
"#EE5552",
|
||||
"#EE52B7",
|
||||
"#858B98"
|
||||
];
|
||||
function colorForIntegration() {
|
||||
return randomFromArray(iconColors);
|
||||
}
|
||||
export {
|
||||
colorForIntegration,
|
||||
iconForIntegration
|
||||
};
|
3
node_modules/astro/dist/runtime/client/dev-toolbar/apps/utils/window.d.ts
generated
vendored
Normal file
3
node_modules/astro/dist/runtime/client/dev-toolbar/apps/utils/window.d.ts
generated
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
export declare function createWindowElement(content: string, placement?: "bottom-left" | "bottom-center" | "bottom-right"): import("../../ui-library/window.js").DevToolbarWindow;
|
||||
export declare function closeOnOutsideClick(eventTarget: EventTarget, additionalCheck?: (target: Element) => boolean): void;
|
||||
export declare function synchronizePlacementOnUpdate(eventTarget: EventTarget, canvas: ShadowRoot): void;
|
48
node_modules/astro/dist/runtime/client/dev-toolbar/apps/utils/window.js
generated
vendored
Normal file
48
node_modules/astro/dist/runtime/client/dev-toolbar/apps/utils/window.js
generated
vendored
Normal file
@@ -0,0 +1,48 @@
|
||||
import { settings } from "../../settings.js";
|
||||
function createWindowElement(content, placement = settings.config.placement) {
|
||||
const windowElement = document.createElement("astro-dev-toolbar-window");
|
||||
windowElement.innerHTML = content;
|
||||
windowElement.placement = placement;
|
||||
return windowElement;
|
||||
}
|
||||
function closeOnOutsideClick(eventTarget, additionalCheck) {
|
||||
function onPageClick(event) {
|
||||
const target = event.target;
|
||||
if (!target) return;
|
||||
if (!target.closest) return;
|
||||
if (target.closest("astro-dev-toolbar")) return;
|
||||
if (additionalCheck && additionalCheck(target)) return;
|
||||
eventTarget.dispatchEvent(
|
||||
new CustomEvent("toggle-app", {
|
||||
detail: {
|
||||
state: false
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
eventTarget.addEventListener("app-toggled", (event) => {
|
||||
if (event.detail.state === true) {
|
||||
document.addEventListener("click", onPageClick, true);
|
||||
} else {
|
||||
document.removeEventListener("click", onPageClick, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
function synchronizePlacementOnUpdate(eventTarget, canvas) {
|
||||
eventTarget.addEventListener("placement-updated", (evt) => {
|
||||
if (!(evt instanceof CustomEvent)) {
|
||||
return;
|
||||
}
|
||||
const windowElement = canvas.querySelector("astro-dev-toolbar-window");
|
||||
if (!windowElement) {
|
||||
return;
|
||||
}
|
||||
const event = evt;
|
||||
windowElement.placement = event.detail.placement;
|
||||
});
|
||||
}
|
||||
export {
|
||||
closeOnOutsideClick,
|
||||
createWindowElement,
|
||||
synchronizePlacementOnUpdate
|
||||
};
|
7
node_modules/astro/dist/runtime/client/dev-toolbar/apps/xray.d.ts
generated
vendored
Normal file
7
node_modules/astro/dist/runtime/client/dev-toolbar/apps/xray.d.ts
generated
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
declare const _default: {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><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>";
|
||||
init(canvas: ShadowRoot, eventTarget: import("../helpers.js").ToolbarAppEventTarget): void;
|
||||
};
|
||||
export default _default;
|
140
node_modules/astro/dist/runtime/client/dev-toolbar/apps/xray.js
generated
vendored
Normal file
140
node_modules/astro/dist/runtime/client/dev-toolbar/apps/xray.js
generated
vendored
Normal file
@@ -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"><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
|
||||
};
|
1
node_modules/astro/dist/runtime/client/dev-toolbar/entrypoint.d.ts
generated
vendored
Normal file
1
node_modules/astro/dist/runtime/client/dev-toolbar/entrypoint.d.ts
generated
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export {};
|
246
node_modules/astro/dist/runtime/client/dev-toolbar/entrypoint.js
generated
vendored
Normal file
246
node_modules/astro/dist/runtime/client/dev-toolbar/entrypoint.js
generated
vendored
Normal file
@@ -0,0 +1,246 @@
|
||||
import { loadDevToolbarApps } from "astro:toolbar:internal";
|
||||
import { ToolbarAppEventTarget } from "./helpers.js";
|
||||
import { settings } from "./settings.js";
|
||||
let overlay;
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
const [
|
||||
customAppsDefinitions,
|
||||
{ default: astroDevToolApp },
|
||||
{ default: astroAuditApp },
|
||||
{ default: astroXrayApp },
|
||||
{ default: astroSettingsApp },
|
||||
{ AstroDevToolbar, DevToolbarCanvas, getAppIcon },
|
||||
{
|
||||
DevToolbarCard,
|
||||
DevToolbarHighlight,
|
||||
DevToolbarTooltip,
|
||||
DevToolbarWindow,
|
||||
DevToolbarToggle,
|
||||
DevToolbarButton,
|
||||
DevToolbarBadge,
|
||||
DevToolbarIcon,
|
||||
DevToolbarSelect,
|
||||
DevToolbarRadioCheckbox
|
||||
}
|
||||
] = await Promise.all([
|
||||
loadDevToolbarApps(),
|
||||
import("./apps/astro.js"),
|
||||
import("./apps/audit/index.js"),
|
||||
import("./apps/xray.js"),
|
||||
import("./apps/settings.js"),
|
||||
import("./toolbar.js"),
|
||||
import("./ui-library/index.js")
|
||||
]);
|
||||
customElements.define("astro-dev-toolbar", AstroDevToolbar);
|
||||
customElements.define("astro-dev-toolbar-window", DevToolbarWindow);
|
||||
customElements.define("astro-dev-toolbar-app-canvas", DevToolbarCanvas);
|
||||
customElements.define("astro-dev-toolbar-tooltip", DevToolbarTooltip);
|
||||
customElements.define("astro-dev-toolbar-highlight", DevToolbarHighlight);
|
||||
customElements.define("astro-dev-toolbar-card", DevToolbarCard);
|
||||
customElements.define("astro-dev-toolbar-toggle", DevToolbarToggle);
|
||||
customElements.define("astro-dev-toolbar-button", DevToolbarButton);
|
||||
customElements.define("astro-dev-toolbar-badge", DevToolbarBadge);
|
||||
customElements.define("astro-dev-toolbar-icon", DevToolbarIcon);
|
||||
customElements.define("astro-dev-toolbar-select", DevToolbarSelect);
|
||||
customElements.define("astro-dev-toolbar-radio-checkbox", DevToolbarRadioCheckbox);
|
||||
const deprecated = (Parent) => class extends Parent {
|
||||
};
|
||||
customElements.define("astro-dev-overlay", deprecated(AstroDevToolbar));
|
||||
customElements.define("astro-dev-overlay-window", deprecated(DevToolbarWindow));
|
||||
customElements.define("astro-dev-overlay-plugin-canvas", deprecated(DevToolbarCanvas));
|
||||
customElements.define("astro-dev-overlay-tooltip", deprecated(DevToolbarTooltip));
|
||||
customElements.define("astro-dev-overlay-highlight", deprecated(DevToolbarHighlight));
|
||||
customElements.define("astro-dev-overlay-card", deprecated(DevToolbarCard));
|
||||
customElements.define("astro-dev-overlay-toggle", deprecated(DevToolbarToggle));
|
||||
customElements.define("astro-dev-overlay-button", deprecated(DevToolbarButton));
|
||||
customElements.define("astro-dev-overlay-badge", deprecated(DevToolbarBadge));
|
||||
customElements.define("astro-dev-overlay-icon", deprecated(DevToolbarIcon));
|
||||
overlay = document.createElement("astro-dev-toolbar");
|
||||
const notificationLevels = ["error", "warning", "info"];
|
||||
const notificationSVGs = {
|
||||
error: '<svg viewBox="0 0 10 10" style="--fill:var(--fill-default);--fill-default:#B33E66;--fill-hover:#E3AFC1;"><rect width="9" height="9" x=".5" y=".5" fill="var(--fill)" stroke="#13151A" stroke-width="2" rx="4.5"/></svg>',
|
||||
warning: '<svg width="12" height="10" fill="none" style="--fill:var(--fill-default);--fill-default:#B58A2D;--fill-hover:#D5B776;"><path fill="var(--fill)" stroke="#13151A" stroke-width="2" d="M7.29904 1.25c-.57735-1-2.02073-1-2.59808 0l-3.4641 6C.65951 8.25 1.3812 9.5 2.5359 9.5h6.9282c1.1547 0 1.8764-1.25 1.299-2.25l-3.46406-6Z"/></svg>',
|
||||
info: '<svg viewBox="0 0 10 10" style="--fill:var(--fill-default);--fill-default:#3645D9;--fill-hover:#BDC3FF;"><rect width="9" height="9" x=".5" y=".5" fill="var(--fill)" stroke="#13151A" stroke-width="2" rx="1.5"/></svg>'
|
||||
};
|
||||
const prepareApp = (appDefinition, builtIn) => {
|
||||
const eventTarget = new ToolbarAppEventTarget();
|
||||
const app = {
|
||||
...appDefinition,
|
||||
builtIn,
|
||||
active: false,
|
||||
status: "loading",
|
||||
notification: { state: false, level: void 0 },
|
||||
eventTarget
|
||||
};
|
||||
eventTarget.addEventListener("toggle-notification", (evt) => {
|
||||
if (!(evt instanceof CustomEvent)) return;
|
||||
const target = overlay.shadowRoot?.querySelector(`[data-app-id="${app.id}"]`);
|
||||
if (!target) return;
|
||||
const notificationElement = target.querySelector(".notification");
|
||||
if (!notificationElement) return;
|
||||
let newState = evt.detail.state ?? true;
|
||||
let level = notificationLevels.includes(evt?.detail?.level) ? evt.detail.level : "error";
|
||||
app.notification.state = newState;
|
||||
if (newState) app.notification.level = level;
|
||||
notificationElement.toggleAttribute("data-active", newState);
|
||||
if (newState) {
|
||||
notificationElement.setAttribute("data-level", level);
|
||||
notificationElement.innerHTML = notificationSVGs[level];
|
||||
}
|
||||
});
|
||||
const onToggleApp = async (evt) => {
|
||||
let newState = void 0;
|
||||
if (evt instanceof CustomEvent) {
|
||||
newState = evt.detail.state ?? true;
|
||||
}
|
||||
await overlay.setAppStatus(app, newState);
|
||||
};
|
||||
eventTarget.addEventListener("toggle-app", onToggleApp);
|
||||
eventTarget.addEventListener("toggle-plugin", onToggleApp);
|
||||
return app;
|
||||
};
|
||||
const astroMoreApp = {
|
||||
id: "astro:more",
|
||||
name: "More",
|
||||
icon: "dots-three",
|
||||
init(canvas, eventTarget) {
|
||||
const hiddenApps = apps.filter((p) => !p.builtIn).slice(overlay.customAppsToShow);
|
||||
createDropdown();
|
||||
document.addEventListener("astro:after-swap", createDropdown);
|
||||
function createDropdown() {
|
||||
const style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
#dropdown {
|
||||
background: rgba(19, 21, 26, 1);
|
||||
border: 1px solid rgba(52, 56, 65, 1);
|
||||
border-radius: 12px;
|
||||
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);
|
||||
width: 192px;
|
||||
padding: 8px;
|
||||
z-index: 2000000010;
|
||||
transform: translate(-50%, 0%);
|
||||
position: fixed;
|
||||
bottom: 72px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.notification {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -5px;
|
||||
width: 12px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.notification svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#dropdown:not([data-no-notification]) .notification[data-active] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#dropdown button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: white;
|
||||
font-family: system-ui, sans-serif;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
#dropdown button:hover, #dropdown button:focus-visible {
|
||||
background: #FFFFFF20;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#dropdown button.active {
|
||||
background: rgba(71, 78, 94, 1);
|
||||
}
|
||||
|
||||
#dropdown .icon {
|
||||
position: relative;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 1px;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
#dropdown .icon svg {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
`;
|
||||
canvas.append(style);
|
||||
const dropdown = document.createElement("div");
|
||||
dropdown.id = "dropdown";
|
||||
dropdown.toggleAttribute("data-no-notification", settings.config.disableAppNotification);
|
||||
for (const app of hiddenApps) {
|
||||
const buttonContainer = document.createElement("div");
|
||||
buttonContainer.classList.add("item");
|
||||
const button = document.createElement("button");
|
||||
button.setAttribute("data-app-id", app.id);
|
||||
const iconContainer = document.createElement("div");
|
||||
const iconElement = document.createElement("template");
|
||||
iconElement.innerHTML = app.icon ? getAppIcon(app.icon) : "?";
|
||||
iconContainer.append(iconElement.content.cloneNode(true));
|
||||
const notification = document.createElement("div");
|
||||
notification.classList.add("notification");
|
||||
iconContainer.append(notification);
|
||||
iconContainer.classList.add("icon");
|
||||
button.append(iconContainer);
|
||||
button.append(document.createTextNode(app.name));
|
||||
button.addEventListener("click", () => {
|
||||
overlay.toggleAppStatus(app);
|
||||
});
|
||||
buttonContainer.append(button);
|
||||
dropdown.append(buttonContainer);
|
||||
app.eventTarget.addEventListener("toggle-notification", (evt) => {
|
||||
if (!(evt instanceof CustomEvent)) return;
|
||||
let newState = evt.detail.state ?? true;
|
||||
let level = notificationLevels.includes(evt?.detail?.level) ? evt.detail.level : "error";
|
||||
notification.toggleAttribute("data-active", newState);
|
||||
if (newState) {
|
||||
notification.setAttribute("data-level", level);
|
||||
notification.innerHTML = notificationSVGs[level];
|
||||
}
|
||||
app.notification.state = newState;
|
||||
if (newState) app.notification.level = level;
|
||||
eventTarget.dispatchEvent(
|
||||
new CustomEvent("toggle-notification", {
|
||||
detail: {
|
||||
state: hiddenApps.some((p) => p.notification.state === true),
|
||||
level: ["error", "warning", "info"].find(
|
||||
(notificationLevel) => hiddenApps.some(
|
||||
(p) => p.notification.state === true && p.notification.level === notificationLevel
|
||||
)
|
||||
) ?? "error"
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
canvas.append(dropdown);
|
||||
}
|
||||
}
|
||||
};
|
||||
const apps = [
|
||||
...[astroDevToolApp, astroXrayApp, astroAuditApp, astroSettingsApp, astroMoreApp].map(
|
||||
(appDef) => prepareApp(appDef, true)
|
||||
),
|
||||
...customAppsDefinitions.map((appDef) => prepareApp(appDef, false))
|
||||
];
|
||||
overlay.apps = apps;
|
||||
document.body.append(overlay);
|
||||
document.addEventListener("astro:after-swap", () => {
|
||||
document.body.append(overlay);
|
||||
});
|
||||
});
|
61
node_modules/astro/dist/runtime/client/dev-toolbar/helpers.d.ts
generated
vendored
Normal file
61
node_modules/astro/dist/runtime/client/dev-toolbar/helpers.d.ts
generated
vendored
Normal file
@@ -0,0 +1,61 @@
|
||||
type NotificationPayload = {
|
||||
state: true;
|
||||
level?: 'error' | 'warning' | 'info';
|
||||
} | {
|
||||
state: false;
|
||||
};
|
||||
type AppStatePayload = {
|
||||
state: boolean;
|
||||
};
|
||||
type AppToggledEvent = (opts: {
|
||||
state: boolean;
|
||||
}) => void;
|
||||
type ToolbarPlacementUpdatedEvent = (opts: {
|
||||
placement: 'bottom-left' | 'bottom-center' | 'bottom-right';
|
||||
}) => void;
|
||||
export declare class ToolbarAppEventTarget extends EventTarget {
|
||||
constructor();
|
||||
/**
|
||||
* Toggle the notification state of the toolbar
|
||||
* @param options - The notification options
|
||||
* @param options.state - The state of the notification
|
||||
* @param options.level - The level of the notification, optional when state is false
|
||||
*/
|
||||
toggleNotification(options: NotificationPayload): void;
|
||||
/**
|
||||
* Toggle the app state on or off
|
||||
* @param options - The app state options
|
||||
* @param options.state - The new state of the app
|
||||
*/
|
||||
toggleState(options: AppStatePayload): void;
|
||||
/**
|
||||
* Fired when the app is toggled on or off
|
||||
* @param callback - The callback to run when the event is fired, takes an object with the new state
|
||||
*/
|
||||
onToggled(callback: AppToggledEvent): void;
|
||||
/**
|
||||
* Fired when the toolbar placement is updated by the user
|
||||
* @param callback - The callback to run when the event is fired, takes an object with the new placement
|
||||
*/
|
||||
onToolbarPlacementUpdated(callback: ToolbarPlacementUpdatedEvent): void;
|
||||
}
|
||||
export declare const serverHelpers: {
|
||||
/**
|
||||
* Send a message to the server, the payload can be any serializable data.
|
||||
*
|
||||
* The server can listen for this message in the `astro:server:config` hook of an Astro integration, using the `toolbar.on` method.
|
||||
*
|
||||
* @param event - The event name
|
||||
* @param payload - The payload to send
|
||||
*/
|
||||
send: <T>(event: string, payload: T) => void;
|
||||
/**
|
||||
* Receive a message from the server.
|
||||
* @param event - The event name
|
||||
* @param callback - The callback to run when the event is received.
|
||||
* The payload's content will be passed to the callback as an argument
|
||||
*/
|
||||
on: <T>(event: string, callback: (data: T) => void) => void;
|
||||
};
|
||||
export type ToolbarServerHelpers = typeof serverHelpers;
|
||||
export {};
|
85
node_modules/astro/dist/runtime/client/dev-toolbar/helpers.js
generated
vendored
Normal file
85
node_modules/astro/dist/runtime/client/dev-toolbar/helpers.js
generated
vendored
Normal file
@@ -0,0 +1,85 @@
|
||||
class ToolbarAppEventTarget extends EventTarget {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
/**
|
||||
* Toggle the notification state of the toolbar
|
||||
* @param options - The notification options
|
||||
* @param options.state - The state of the notification
|
||||
* @param options.level - The level of the notification, optional when state is false
|
||||
*/
|
||||
toggleNotification(options) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("toggle-notification", {
|
||||
detail: {
|
||||
state: options.state,
|
||||
level: options.state === true ? options.level : void 0
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
/**
|
||||
* Toggle the app state on or off
|
||||
* @param options - The app state options
|
||||
* @param options.state - The new state of the app
|
||||
*/
|
||||
toggleState(options) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("toggle-app", {
|
||||
detail: {
|
||||
state: options.state
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
/**
|
||||
* Fired when the app is toggled on or off
|
||||
* @param callback - The callback to run when the event is fired, takes an object with the new state
|
||||
*/
|
||||
onToggled(callback) {
|
||||
this.addEventListener("app-toggled", (evt) => {
|
||||
if (!(evt instanceof CustomEvent)) return;
|
||||
callback(evt.detail);
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Fired when the toolbar placement is updated by the user
|
||||
* @param callback - The callback to run when the event is fired, takes an object with the new placement
|
||||
*/
|
||||
onToolbarPlacementUpdated(callback) {
|
||||
this.addEventListener("placement-updated", (evt) => {
|
||||
if (!(evt instanceof CustomEvent)) return;
|
||||
callback(evt.detail);
|
||||
});
|
||||
}
|
||||
}
|
||||
const serverHelpers = {
|
||||
/**
|
||||
* Send a message to the server, the payload can be any serializable data.
|
||||
*
|
||||
* The server can listen for this message in the `astro:server:config` hook of an Astro integration, using the `toolbar.on` method.
|
||||
*
|
||||
* @param event - The event name
|
||||
* @param payload - The payload to send
|
||||
*/
|
||||
send: (event, payload) => {
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.send(event, payload);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Receive a message from the server.
|
||||
* @param event - The event name
|
||||
* @param callback - The callback to run when the event is received.
|
||||
* The payload's content will be passed to the callback as an argument
|
||||
*/
|
||||
on: (event, callback) => {
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.on(event, callback);
|
||||
}
|
||||
}
|
||||
};
|
||||
export {
|
||||
ToolbarAppEventTarget,
|
||||
serverHelpers
|
||||
};
|
21
node_modules/astro/dist/runtime/client/dev-toolbar/settings.d.ts
generated
vendored
Normal file
21
node_modules/astro/dist/runtime/client/dev-toolbar/settings.d.ts
generated
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
import type { Placement } from './ui-library/window.js';
|
||||
export interface Settings {
|
||||
disableAppNotification: boolean;
|
||||
verbose: boolean;
|
||||
placement: Placement;
|
||||
}
|
||||
export declare const defaultSettings: {
|
||||
disableAppNotification: false;
|
||||
verbose: false;
|
||||
placement: "bottom-center";
|
||||
};
|
||||
export declare const settings: {
|
||||
readonly config: Settings;
|
||||
updateSetting: <Key extends keyof Settings>(key: Key, value: Settings[Key]) => void;
|
||||
logger: {
|
||||
log: (message: string, level?: "log" | "warn" | "error") => void;
|
||||
warn: (message: string) => void;
|
||||
error: (message: string) => void;
|
||||
verboseLog: (message: string) => void;
|
||||
};
|
||||
};
|
53
node_modules/astro/dist/runtime/client/dev-toolbar/settings.js
generated
vendored
Normal file
53
node_modules/astro/dist/runtime/client/dev-toolbar/settings.js
generated
vendored
Normal file
@@ -0,0 +1,53 @@
|
||||
const defaultSettings = {
|
||||
disableAppNotification: false,
|
||||
verbose: false,
|
||||
placement: "bottom-center"
|
||||
};
|
||||
const settings = getSettings();
|
||||
function getSettings() {
|
||||
let _settings = { ...defaultSettings };
|
||||
const toolbarSettings = localStorage.getItem("astro:dev-toolbar:settings");
|
||||
const oldSettings = localStorage.getItem("astro:dev-overlay:settings");
|
||||
if (oldSettings && !toolbarSettings) {
|
||||
localStorage.setItem("astro:dev-toolbar:settings", oldSettings);
|
||||
localStorage.removeItem("astro:dev-overlay:settings");
|
||||
}
|
||||
if (toolbarSettings) {
|
||||
_settings = { ..._settings, ...JSON.parse(toolbarSettings) };
|
||||
}
|
||||
function updateSetting(key, value) {
|
||||
_settings[key] = value;
|
||||
localStorage.setItem("astro:dev-toolbar:settings", JSON.stringify(_settings));
|
||||
}
|
||||
function log(message, level = "log") {
|
||||
console[level](
|
||||
`%cAstro`,
|
||||
"background: linear-gradient(66.77deg, #D83333 0%, #F041FF 100%); color: white; padding-inline: 4px; border-radius: 2px; font-family: monospace;",
|
||||
message
|
||||
);
|
||||
}
|
||||
return {
|
||||
get config() {
|
||||
return _settings;
|
||||
},
|
||||
updateSetting,
|
||||
logger: {
|
||||
log,
|
||||
warn: (message) => {
|
||||
log(message, "warn");
|
||||
},
|
||||
error: (message) => {
|
||||
log(message, "error");
|
||||
},
|
||||
verboseLog: (message) => {
|
||||
if (_settings.verbose) {
|
||||
log(message);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
export {
|
||||
defaultSettings,
|
||||
settings
|
||||
};
|
50
node_modules/astro/dist/runtime/client/dev-toolbar/toolbar.d.ts
generated
vendored
Normal file
50
node_modules/astro/dist/runtime/client/dev-toolbar/toolbar.d.ts
generated
vendored
Normal file
@@ -0,0 +1,50 @@
|
||||
import type { ResolvedDevToolbarApp as DevToolbarAppDefinition } from '../../../@types/astro.js';
|
||||
import { type ToolbarAppEventTarget } from './helpers.js';
|
||||
import { type Icon } from './ui-library/icons.js';
|
||||
import type { Placement } from './ui-library/window.js';
|
||||
export type DevToolbarApp = DevToolbarAppDefinition & {
|
||||
builtIn: boolean;
|
||||
active: boolean;
|
||||
status: 'ready' | 'loading' | 'error';
|
||||
notification: {
|
||||
state: boolean;
|
||||
level?: 'error' | 'warning' | 'info';
|
||||
};
|
||||
eventTarget: ToolbarAppEventTarget;
|
||||
};
|
||||
export declare class AstroDevToolbar extends HTMLElement {
|
||||
shadowRoot: ShadowRoot;
|
||||
delayedHideTimeout: number | undefined;
|
||||
devToolbarContainer: HTMLDivElement | undefined;
|
||||
apps: DevToolbarApp[];
|
||||
hasBeenInitialized: boolean;
|
||||
customAppsToShow: number;
|
||||
constructor();
|
||||
/**
|
||||
* All one-time DOM setup runs through here. Only ever call this once,
|
||||
* in connectedCallback(), and protect it from being called again.
|
||||
*/
|
||||
init(): void;
|
||||
connectedCallback(): void;
|
||||
attachEvents(): void;
|
||||
initApp(app: DevToolbarApp): Promise<void>;
|
||||
getAppTemplate(app: DevToolbarApp): string;
|
||||
getAppById(id: string): DevToolbarApp | undefined;
|
||||
getAppCanvasById(id: string): HTMLElement | null;
|
||||
getAppButtonById(id: string): HTMLElement | null;
|
||||
toggleAppStatus(app: DevToolbarApp): Promise<void>;
|
||||
setAppStatus(app: DevToolbarApp, newStatus: boolean): Promise<boolean>;
|
||||
isHidden(): boolean;
|
||||
getActiveApp(): DevToolbarApp | undefined;
|
||||
clearDelayedHide(): void;
|
||||
triggerDelayedHide(): void;
|
||||
setToolbarVisible(newStatus: boolean): void;
|
||||
setNotificationVisible(newStatus: boolean): void;
|
||||
setToolbarPlacement(newPlacement: Placement): void;
|
||||
}
|
||||
export declare class DevToolbarCanvas extends HTMLElement {
|
||||
shadowRoot: ShadowRoot;
|
||||
constructor();
|
||||
connectedCallback(): void;
|
||||
}
|
||||
export declare function getAppIcon(icon: Icon): string;
|
528
node_modules/astro/dist/runtime/client/dev-toolbar/toolbar.js
generated
vendored
Normal file
528
node_modules/astro/dist/runtime/client/dev-toolbar/toolbar.js
generated
vendored
Normal file
@@ -0,0 +1,528 @@
|
||||
import { serverHelpers } from "./helpers.js";
|
||||
import { settings } from "./settings.js";
|
||||
import { getIconElement, isDefinedIcon } from "./ui-library/icons.js";
|
||||
const WS_EVENT_NAME = "astro-dev-toolbar";
|
||||
const WS_EVENT_NAME_DEPRECATED = "astro-dev-overlay";
|
||||
const HOVER_DELAY = 2 * 1e3;
|
||||
const DEVBAR_HITBOX_ABOVE = 42;
|
||||
class AstroDevToolbar extends HTMLElement {
|
||||
shadowRoot;
|
||||
delayedHideTimeout;
|
||||
devToolbarContainer;
|
||||
apps = [];
|
||||
hasBeenInitialized = false;
|
||||
// TODO: This should be dynamic based on the screen size or at least configurable, erika - 2023-11-29
|
||||
customAppsToShow = 3;
|
||||
constructor() {
|
||||
super();
|
||||
this.shadowRoot = this.attachShadow({ mode: "open" });
|
||||
}
|
||||
/**
|
||||
* All one-time DOM setup runs through here. Only ever call this once,
|
||||
* in connectedCallback(), and protect it from being called again.
|
||||
*/
|
||||
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;
|
||||
align-items: center;
|
||||
width: 44px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: white;
|
||||
font-family: system-ui, sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
transition: opacity 0.2s ease-out 0s;
|
||||
}
|
||||
|
||||
#dev-bar #bar-container .item:hover, #dev-bar #bar-container .item:focus-visible {
|
||||
background: #FFFFFF20;
|
||||
cursor: pointer;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
|
||||
#dev-bar #bar-container .item[data-app-error]:hover, #dev-bar #bar-container .item[data-app-error]:focus-visible {
|
||||
cursor: not-allowed;
|
||||
background: #ff252520;
|
||||
}
|
||||
|
||||
#dev-bar .item:first-of-type {
|
||||
border-top-left-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
width: 42px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
#dev-bar .item:last-of-type {
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
width: 42px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
#dev-bar #bar-container .item.active {
|
||||
background: rgba(71, 78, 94, 1);
|
||||
}
|
||||
|
||||
#dev-bar .item-tooltip {
|
||||
background: linear-gradient(0deg, #13151A, #13151A), linear-gradient(0deg, #343841, #343841);
|
||||
border: 1px solid rgba(52, 56, 65, 1);
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
position: absolute;
|
||||
top: ${4 - DEVBAR_HITBOX_ABOVE}px;
|
||||
font-size: 14px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out 0s;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#dev-bar .item-tooltip::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: calc(50% - 5px);
|
||||
bottom: -6px;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 5px solid #343841;
|
||||
}
|
||||
|
||||
#dev-bar .item[data-app-error] .icon {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
#dev-bar .item:hover .item-tooltip, #dev-bar .item:not(.active):focus-visible .item-tooltip {
|
||||
transition: opacity 0.2s ease-in-out 200ms;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
#dev-bar .item:hover .item-tooltip,
|
||||
#dev-bar .item:not(.active):focus-visible .item-tooltip {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
#dev-bar #bar-container .item:hover .notification rect, #dev-bar #bar-container .item:hover .notification path {
|
||||
stroke: #38393D;
|
||||
--fill: var(--fill-hover);
|
||||
}
|
||||
|
||||
#dev-bar #bar-container .item.active .notification rect, #dev-bar #bar-container .item.active .notification path {
|
||||
stroke: #454C5C;
|
||||
--fill: var(--fill-hover);
|
||||
}
|
||||
|
||||
#dev-bar .item .icon {
|
||||
position: relative;
|
||||
max-width: 20px;
|
||||
max-height: 20px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#dev-bar .item .icon>svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
#dev-bar .item svg path[fill="#fff"] {
|
||||
fill: black;
|
||||
}
|
||||
}
|
||||
|
||||
#dev-bar .item .notification {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -6px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
#dev-bar .item .notification svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#dev-toolbar-root:not([data-no-notification]) #dev-bar .item .notification[data-active] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#dev-bar #bar-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#dev-bar .separator {
|
||||
background: rgba(52, 56, 65, 1);
|
||||
width: 1px;
|
||||
}
|
||||
</style>
|
||||
<div id="dev-toolbar-root" data-hidden ${settings.config.disableAppNotification ? "data-no-notification" : ""} data-placement="${settings.config.placement}">
|
||||
<div id="dev-bar-hitbox-above"></div>
|
||||
<div id="dev-bar">
|
||||
<div id="bar-container">
|
||||
${this.apps.filter((app) => app.builtIn && !["astro:settings", "astro:more"].includes(app.id)).map((app) => this.getAppTemplate(app)).join("")}
|
||||
${this.apps.filter((app) => !app.builtIn).length > 0 ? `<div class="separator"></div>${this.apps.filter((app) => !app.builtIn).slice(0, this.customAppsToShow).map((app) => this.getAppTemplate(app)).join("")}` : ""}
|
||||
${this.apps.filter((app) => !app.builtIn).length > this.customAppsToShow ? this.getAppTemplate(
|
||||
this.apps.find((app) => app.builtIn && app.id === "astro:more")
|
||||
) : ""}
|
||||
<div class="separator"></div>
|
||||
${this.getAppTemplate(
|
||||
this.apps.find((app) => app.builtIn && app.id === "astro:settings")
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dev-bar-hitbox-below"></div>
|
||||
</div>`;
|
||||
this.devToolbarContainer = this.shadowRoot.querySelector("#dev-toolbar-root");
|
||||
this.attachEvents();
|
||||
this.apps.forEach(async (app) => {
|
||||
settings.logger.verboseLog(`Creating app canvas for ${app.id}`);
|
||||
const appCanvas = document.createElement("astro-dev-toolbar-app-canvas");
|
||||
appCanvas.dataset.appId = app.id;
|
||||
this.shadowRoot?.append(appCanvas);
|
||||
});
|
||||
if ("requestIdleCallback" in window) {
|
||||
window.requestIdleCallback(
|
||||
async () => {
|
||||
this.apps.map((app) => this.initApp(app));
|
||||
},
|
||||
{ timeout: 300 }
|
||||
);
|
||||
} else {
|
||||
setTimeout(async () => {
|
||||
this.apps.map((app) => this.initApp(app));
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
// This is called whenever the component is connected to the DOM.
|
||||
// This happens on first page load, and on each page change when
|
||||
// view transitions are used.
|
||||
connectedCallback() {
|
||||
if (!this.hasBeenInitialized) {
|
||||
this.init();
|
||||
this.hasBeenInitialized = true;
|
||||
}
|
||||
this.apps.forEach(async (app) => {
|
||||
await this.setAppStatus(app, app.active);
|
||||
});
|
||||
}
|
||||
attachEvents() {
|
||||
const items = this.shadowRoot.querySelectorAll(".item");
|
||||
items.forEach((item) => {
|
||||
item.addEventListener("click", async (event) => {
|
||||
const target = event.currentTarget;
|
||||
if (!target || !(target instanceof HTMLElement)) return;
|
||||
const id = target.dataset.appId;
|
||||
if (!id) return;
|
||||
const app = this.getAppById(id);
|
||||
if (!app) return;
|
||||
event.stopPropagation();
|
||||
await this.toggleAppStatus(app);
|
||||
});
|
||||
});
|
||||
["mouseenter", "focusin"].forEach((event) => {
|
||||
this.devToolbarContainer.addEventListener(event, () => {
|
||||
this.clearDelayedHide();
|
||||
if (this.isHidden()) {
|
||||
this.setToolbarVisible(true);
|
||||
}
|
||||
});
|
||||
});
|
||||
["mouseleave", "focusout"].forEach((event) => {
|
||||
this.devToolbarContainer.addEventListener(event, () => {
|
||||
this.clearDelayedHide();
|
||||
if (this.getActiveApp() || this.isHidden()) {
|
||||
return;
|
||||
}
|
||||
this.triggerDelayedHide();
|
||||
});
|
||||
});
|
||||
document.addEventListener("keyup", (event) => {
|
||||
if (event.key !== "Escape") return;
|
||||
if (this.isHidden()) return;
|
||||
const activeApp = this.getActiveApp();
|
||||
if (activeApp) {
|
||||
this.toggleAppStatus(activeApp);
|
||||
} else {
|
||||
this.setToolbarVisible(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
async initApp(app) {
|
||||
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`);
|
||||
import.meta.hot.send(`${WS_EVENT_NAME_DEPRECATED}:${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,
|
||||
error: e instanceof Error ? e.stack : e
|
||||
});
|
||||
}
|
||||
const appButton = this.getAppButtonById(app.id);
|
||||
const appTooltip = appButton?.querySelector(".item-tooltip");
|
||||
if (appButton && appTooltip) {
|
||||
appButton.toggleAttribute("data-app-error", true);
|
||||
appTooltip.innerText = `Error initializing ${app.name}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
getAppTemplate(app) {
|
||||
return `<button class="item" data-app-id="${app.id}">
|
||||
<div class="icon">${app.icon ? getAppIcon(app.icon) : "?"}<div class="notification"></div></div>
|
||||
<span class="item-tooltip">${app.name}</span>
|
||||
</button>`;
|
||||
}
|
||||
getAppById(id) {
|
||||
return this.apps.find((app) => app.id === id);
|
||||
}
|
||||
getAppCanvasById(id) {
|
||||
return this.shadowRoot.querySelector(
|
||||
`astro-dev-toolbar-app-canvas[data-app-id="${id}"]`
|
||||
);
|
||||
}
|
||||
getAppButtonById(id) {
|
||||
return this.shadowRoot.querySelector(`[data-app-id="${id}"]`);
|
||||
}
|
||||
async toggleAppStatus(app) {
|
||||
const activeApp = this.getActiveApp();
|
||||
if (activeApp) {
|
||||
const closeApp = await this.setAppStatus(activeApp, false);
|
||||
if (!closeApp) return;
|
||||
}
|
||||
if (app.status !== "ready") return;
|
||||
if (app !== activeApp) {
|
||||
await this.setAppStatus(app, true);
|
||||
if (import.meta.hot && app.id !== "astro:more") {
|
||||
import.meta.hot.send("astro:devtoolbar:app:toggled", {
|
||||
app
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
async setAppStatus(app, newStatus) {
|
||||
const appCanvas = this.getAppCanvasById(app.id);
|
||||
if (!appCanvas) return false;
|
||||
if (app.active && !newStatus && app.beforeTogglingOff) {
|
||||
const shouldToggleOff = await app.beforeTogglingOff(appCanvas.shadowRoot);
|
||||
if (!shouldToggleOff) return false;
|
||||
}
|
||||
app.active = newStatus ?? !app.active;
|
||||
const mainBarButton = this.getAppButtonById(app.id);
|
||||
const moreBarButton = this.getAppCanvasById("astro:more")?.shadowRoot?.querySelector(
|
||||
`[data-app-id="${app.id}"]`
|
||||
);
|
||||
if (mainBarButton) {
|
||||
mainBarButton.classList.toggle("active", app.active);
|
||||
}
|
||||
if (moreBarButton) {
|
||||
moreBarButton.classList.toggle("active", app.active);
|
||||
}
|
||||
if (app.active) {
|
||||
appCanvas.style.display = "block";
|
||||
appCanvas.setAttribute("data-active", "");
|
||||
} else {
|
||||
appCanvas.style.display = "none";
|
||||
appCanvas.removeAttribute("data-active");
|
||||
}
|
||||
[
|
||||
"app-toggled",
|
||||
// Deprecated
|
||||
// TODO: Remove in Astro 5.0
|
||||
"plugin-toggled"
|
||||
].forEach((eventName) => {
|
||||
app.eventTarget.dispatchEvent(
|
||||
new CustomEvent(eventName, {
|
||||
detail: {
|
||||
state: app.active,
|
||||
app
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.send(`${WS_EVENT_NAME}:${app.id}:toggled`, { state: app.active });
|
||||
import.meta.hot.send(`${WS_EVENT_NAME_DEPRECATED}:${app.id}:toggled`, {
|
||||
state: app.active
|
||||
});
|
||||
}
|
||||
return true;
|
||||
}
|
||||
isHidden() {
|
||||
return this.devToolbarContainer?.hasAttribute("data-hidden") ?? true;
|
||||
}
|
||||
getActiveApp() {
|
||||
return this.apps.find((app) => app.active);
|
||||
}
|
||||
clearDelayedHide() {
|
||||
window.clearTimeout(this.delayedHideTimeout);
|
||||
this.delayedHideTimeout = void 0;
|
||||
}
|
||||
triggerDelayedHide() {
|
||||
this.clearDelayedHide();
|
||||
this.delayedHideTimeout = window.setTimeout(() => {
|
||||
this.setToolbarVisible(false);
|
||||
this.delayedHideTimeout = void 0;
|
||||
}, HOVER_DELAY);
|
||||
}
|
||||
setToolbarVisible(newStatus) {
|
||||
const barContainer = this.shadowRoot.querySelector("#bar-container");
|
||||
const devBar = this.shadowRoot.querySelector("#dev-bar");
|
||||
const devBarHitboxAbove = this.shadowRoot.querySelector("#dev-bar-hitbox-above");
|
||||
if (newStatus === true) {
|
||||
this.devToolbarContainer?.removeAttribute("data-hidden");
|
||||
barContainer?.removeAttribute("inert");
|
||||
devBar?.removeAttribute("tabindex");
|
||||
if (devBarHitboxAbove) devBarHitboxAbove.style.height = "0";
|
||||
return;
|
||||
}
|
||||
if (newStatus === false) {
|
||||
this.devToolbarContainer?.setAttribute("data-hidden", "");
|
||||
barContainer?.setAttribute("inert", "");
|
||||
devBar?.setAttribute("tabindex", "0");
|
||||
if (devBarHitboxAbove) devBarHitboxAbove.style.height = `${DEVBAR_HITBOX_ABOVE}px`;
|
||||
return;
|
||||
}
|
||||
}
|
||||
setNotificationVisible(newStatus) {
|
||||
this.devToolbarContainer?.toggleAttribute("data-no-notification", !newStatus);
|
||||
const moreCanvas = this.getAppCanvasById("astro:more");
|
||||
moreCanvas?.shadowRoot?.querySelector("#dropdown")?.toggleAttribute("data-no-notification", !newStatus);
|
||||
}
|
||||
setToolbarPlacement(newPlacement) {
|
||||
this.devToolbarContainer?.setAttribute("data-placement", newPlacement);
|
||||
this.apps.forEach((app) => {
|
||||
app.eventTarget.dispatchEvent(
|
||||
new CustomEvent("placement-updated", {
|
||||
detail: {
|
||||
placement: newPlacement
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
class DevToolbarCanvas extends HTMLElement {
|
||||
shadowRoot;
|
||||
constructor() {
|
||||
super();
|
||||
this.shadowRoot = this.attachShadow({ mode: "open" });
|
||||
}
|
||||
connectedCallback() {
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>`;
|
||||
}
|
||||
}
|
||||
function getAppIcon(icon) {
|
||||
if (isDefinedIcon(icon)) {
|
||||
return getIconElement(icon).outerHTML;
|
||||
}
|
||||
return icon;
|
||||
}
|
||||
export {
|
||||
AstroDevToolbar,
|
||||
DevToolbarCanvas,
|
||||
getAppIcon
|
||||
};
|
19
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/badge.d.ts
generated
vendored
Normal file
19
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/badge.d.ts
generated
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
declare const sizes: readonly ["small", "large"];
|
||||
declare const styles: readonly ["purple", "gray", "red", "green", "yellow", "blue"];
|
||||
type BadgeSize = (typeof sizes)[number];
|
||||
type BadgeStyle = (typeof styles)[number];
|
||||
export declare class DevToolbarBadge extends HTMLElement {
|
||||
_size: BadgeSize;
|
||||
_badgeStyle: BadgeStyle;
|
||||
get size(): "small" | "large";
|
||||
set size(value: "small" | "large");
|
||||
get badgeStyle(): "red" | "purple" | "gray" | "green" | "yellow" | "blue";
|
||||
set badgeStyle(value: "red" | "purple" | "gray" | "green" | "yellow" | "blue");
|
||||
shadowRoot: ShadowRoot;
|
||||
static observedAttributes: string[];
|
||||
constructor();
|
||||
connectedCallback(): void;
|
||||
attributeChangedCallback(): void;
|
||||
updateStyle(): void;
|
||||
}
|
||||
export {};
|
105
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/badge.js
generated
vendored
Normal file
105
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/badge.js
generated
vendored
Normal file
@@ -0,0 +1,105 @@
|
||||
import { settings } from "../settings.js";
|
||||
const sizes = ["small", "large"];
|
||||
const styles = ["purple", "gray", "red", "green", "yellow", "blue"];
|
||||
class DevToolbarBadge extends HTMLElement {
|
||||
_size = "small";
|
||||
_badgeStyle = "purple";
|
||||
get size() {
|
||||
return this._size;
|
||||
}
|
||||
set size(value) {
|
||||
if (!sizes.includes(value)) {
|
||||
settings.logger.error(
|
||||
`Invalid size: ${value}, expected one of ${sizes.join(", ")}, got ${value}.`
|
||||
);
|
||||
return;
|
||||
}
|
||||
this._size = value;
|
||||
this.updateStyle();
|
||||
}
|
||||
get badgeStyle() {
|
||||
return this._badgeStyle;
|
||||
}
|
||||
set badgeStyle(value) {
|
||||
if (!styles.includes(value)) {
|
||||
settings.logger.error(
|
||||
`Invalid style: ${value}, expected one of ${styles.join(", ")}, got ${value}.`
|
||||
);
|
||||
return;
|
||||
}
|
||||
this._badgeStyle = value;
|
||||
this.updateStyle();
|
||||
}
|
||||
shadowRoot;
|
||||
static observedAttributes = ["badge-style", "size"];
|
||||
constructor() {
|
||||
super();
|
||||
this.shadowRoot = this.attachShadow({ mode: "open" });
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
.badge {
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
border: 1px solid transparent;
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text-color);
|
||||
height: var(--size);
|
||||
border: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
|
||||
--purple-text: rgba(224, 204, 250, 1);
|
||||
--purple-border: rgba(113, 24, 226, 1);
|
||||
|
||||
--gray-text: rgba(191, 193, 201, 1);
|
||||
--gray-border:rgba(191, 193, 201, 1);
|
||||
|
||||
--red-text: rgba(249, 196, 215, 1);
|
||||
--red-border: rgba(179, 62, 102, 1);
|
||||
|
||||
--green-text: rgba(213, 249, 196, 1);
|
||||
--green-border: rgba(61, 125, 31, 1);
|
||||
|
||||
--yellow-text: rgba(249, 233, 196, 1);
|
||||
--yellow-border: rgba(181, 138, 45, 1);
|
||||
|
||||
--blue-text: rgba(189, 195, 255, 1);
|
||||
--blue-border: rgba(54, 69, 217, 1);
|
||||
|
||||
--large: 24px;
|
||||
--small: 20px;
|
||||
}
|
||||
</style>
|
||||
<style id="selected-style"></style>
|
||||
|
||||
<div class="badge">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
connectedCallback() {
|
||||
this.updateStyle();
|
||||
}
|
||||
attributeChangedCallback() {
|
||||
if (this.hasAttribute("badge-style"))
|
||||
this.badgeStyle = this.getAttribute("badge-style");
|
||||
if (this.hasAttribute("size")) this.size = this.getAttribute("size");
|
||||
}
|
||||
updateStyle() {
|
||||
const style = this.shadowRoot.querySelector("#selected-style");
|
||||
if (style) {
|
||||
style.innerHTML = `
|
||||
.badge {
|
||||
--text-color: var(--${this.badgeStyle}-text);
|
||||
--border-color: var(--${this.badgeStyle}-border);
|
||||
--size: var(--${this.size});
|
||||
}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
export {
|
||||
DevToolbarBadge
|
||||
};
|
24
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/button.d.ts
generated
vendored
Normal file
24
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/button.d.ts
generated
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
declare const sizes: readonly ["small", "medium", "large"];
|
||||
declare const styles: readonly ["ghost", "outline", "purple", "gray", "red", "green", "yellow", "blue"];
|
||||
declare const borderRadii: readonly ["normal", "rounded"];
|
||||
type ButtonSize = (typeof sizes)[number];
|
||||
type ButtonStyle = (typeof styles)[number];
|
||||
type ButtonBorderRadius = (typeof borderRadii)[number];
|
||||
export declare class DevToolbarButton extends HTMLElement {
|
||||
_size: ButtonSize;
|
||||
_buttonStyle: ButtonStyle;
|
||||
_buttonBorderRadius: ButtonBorderRadius;
|
||||
get size(): "small" | "large" | "medium";
|
||||
set size(value: "small" | "large" | "medium");
|
||||
get buttonStyle(): "red" | "purple" | "gray" | "green" | "yellow" | "blue" | "ghost" | "outline";
|
||||
set buttonStyle(value: "red" | "purple" | "gray" | "green" | "yellow" | "blue" | "ghost" | "outline");
|
||||
get buttonBorderRadius(): "normal" | "rounded";
|
||||
set buttonBorderRadius(value: "normal" | "rounded");
|
||||
static observedAttributes: string[];
|
||||
shadowRoot: ShadowRoot;
|
||||
constructor();
|
||||
connectedCallback(): void;
|
||||
updateStyle(): void;
|
||||
attributeChangedCallback(): void;
|
||||
}
|
||||
export {};
|
159
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/button.js
generated
vendored
Normal file
159
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/button.js
generated
vendored
Normal file
@@ -0,0 +1,159 @@
|
||||
import { settings } from "../settings.js";
|
||||
const sizes = ["small", "medium", "large"];
|
||||
const styles = ["ghost", "outline", "purple", "gray", "red", "green", "yellow", "blue"];
|
||||
const borderRadii = ["normal", "rounded"];
|
||||
class DevToolbarButton extends HTMLElement {
|
||||
_size = "small";
|
||||
_buttonStyle = "purple";
|
||||
_buttonBorderRadius = "normal";
|
||||
get size() {
|
||||
return this._size;
|
||||
}
|
||||
set size(value) {
|
||||
if (!sizes.includes(value)) {
|
||||
settings.logger.error(
|
||||
`Invalid size: ${value}, expected one of ${sizes.join(", ")}, got ${value}.`
|
||||
);
|
||||
return;
|
||||
}
|
||||
this._size = value;
|
||||
this.updateStyle();
|
||||
}
|
||||
get buttonStyle() {
|
||||
return this._buttonStyle;
|
||||
}
|
||||
set buttonStyle(value) {
|
||||
if (!styles.includes(value)) {
|
||||
settings.logger.error(
|
||||
`Invalid style: ${value}, expected one of ${styles.join(", ")}, got ${value}.`
|
||||
);
|
||||
return;
|
||||
}
|
||||
this._buttonStyle = value;
|
||||
this.updateStyle();
|
||||
}
|
||||
get buttonBorderRadius() {
|
||||
return this._buttonBorderRadius;
|
||||
}
|
||||
set buttonBorderRadius(value) {
|
||||
if (!borderRadii.includes(value)) {
|
||||
settings.logger.error(
|
||||
`Invalid border-radius: ${value}, expected one of ${borderRadii.join(", ")}, got ${value}.`
|
||||
);
|
||||
return;
|
||||
}
|
||||
this._buttonBorderRadius = value;
|
||||
this.updateStyle();
|
||||
}
|
||||
static observedAttributes = ["button-style", "size", "button-border-radius"];
|
||||
shadowRoot;
|
||||
constructor() {
|
||||
super();
|
||||
this.shadowRoot = this.attachShadow({ mode: "open" });
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
button {
|
||||
--purple-background: rgba(113, 24, 226, 1);
|
||||
--purple-border: rgba(224, 204, 250, 0.33);
|
||||
--purple-text: #fff;
|
||||
|
||||
--gray-background: rgba(52, 56, 65, 1);
|
||||
--gray-border: rgba(71, 78, 94, 1);
|
||||
--gray-text: #fff;
|
||||
|
||||
--red-background: rgba(179, 62, 102, 1);
|
||||
--red-border: rgba(249, 196, 215, 0.33);
|
||||
--red-text: #fff;
|
||||
|
||||
--green-background: rgba(213, 249, 196, 1);
|
||||
--green-border: rgba(61, 125, 31, 1);
|
||||
--green-text: #000;
|
||||
|
||||
--yellow-background: rgba(255, 236, 179, 1);
|
||||
--yellow-border: rgba(255, 191, 0, 1);
|
||||
--yellow-text: #000;
|
||||
|
||||
--blue-background: rgba(54, 69, 217, 1);
|
||||
--blue-border: rgba(189, 195, 255, 1);
|
||||
--blue-text: #fff;
|
||||
|
||||
--outline-background: transparent;
|
||||
--outline-border: #fff;
|
||||
--outline-text: #fff;
|
||||
|
||||
--ghost-background: transparent;
|
||||
--ghost-border: transparent;
|
||||
--ghost-text: #fff;
|
||||
|
||||
--large-font-size: 16px;
|
||||
--medium-font-size: 14px;
|
||||
--small-font-size: 12px;
|
||||
|
||||
--large-padding: 12px 16px;
|
||||
--large-rounded-padding: 12px 12px;
|
||||
--medium-padding: 8px 12px;
|
||||
--medium-rounded-padding: 8px 8px;
|
||||
--small-padding: 4px 8px;
|
||||
--small-rounded-padding: 4px 4px;
|
||||
|
||||
--normal-border-radius: 4px;
|
||||
--rounded-border-radius: 9999px;
|
||||
|
||||
border: 1px solid var(--border);
|
||||
padding: var(--padding);
|
||||
font-size: var(--font-size);
|
||||
background: var(--background);
|
||||
|
||||
color: var(--text-color);
|
||||
border-radius: var(--border-radius);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* TODO: Remove "astro-dev-overlay-icon" in Astro 5.0 */
|
||||
::slotted(astro-dev-overlay-icon),
|
||||
::slotted(astro-dev-toolbar-icon) {
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
</style>
|
||||
<style id="selected-style"></style>
|
||||
|
||||
<button>
|
||||
<slot></slot>
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
connectedCallback() {
|
||||
this.updateStyle();
|
||||
}
|
||||
updateStyle() {
|
||||
const style = this.shadowRoot.querySelector("#selected-style");
|
||||
if (style) {
|
||||
style.innerHTML = `
|
||||
button {
|
||||
--background: var(--${this.buttonStyle}-background);
|
||||
--border: var(--${this.buttonStyle}-border);
|
||||
--font-size: var(--${this.size}-font-size);
|
||||
--text-color: var(--${this.buttonStyle}-text);
|
||||
${this.buttonBorderRadius === "normal" ? "--padding: var(--" + this.size + "-padding);" : "--padding: var(--" + this.size + "-rounded-padding);"}
|
||||
--border-radius: var(--${this.buttonBorderRadius}-border-radius);
|
||||
}`;
|
||||
}
|
||||
}
|
||||
attributeChangedCallback() {
|
||||
if (this.hasAttribute("size")) this.size = this.getAttribute("size");
|
||||
if (this.hasAttribute("button-style"))
|
||||
this.buttonStyle = this.getAttribute("button-style");
|
||||
}
|
||||
}
|
||||
export {
|
||||
DevToolbarButton
|
||||
};
|
16
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/card.d.ts
generated
vendored
Normal file
16
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/card.d.ts
generated
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
declare const styles: readonly ["purple", "gray", "red", "green", "yellow", "blue"];
|
||||
type CardStyle = (typeof styles)[number];
|
||||
export declare class DevToolbarCard extends HTMLElement {
|
||||
link?: string | undefined | null;
|
||||
clickAction?: () => void | (() => Promise<void>);
|
||||
shadowRoot: ShadowRoot;
|
||||
_cardStyle: CardStyle;
|
||||
get cardStyle(): "red" | "purple" | "gray" | "green" | "yellow" | "blue";
|
||||
set cardStyle(value: "red" | "purple" | "gray" | "green" | "yellow" | "blue");
|
||||
static observedAttributes: string[];
|
||||
constructor();
|
||||
attributeChangedCallback(): void;
|
||||
updateStyle(): void;
|
||||
connectedCallback(): void;
|
||||
}
|
||||
export {};
|
116
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/card.js
generated
vendored
Normal file
116
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/card.js
generated
vendored
Normal file
@@ -0,0 +1,116 @@
|
||||
import { settings } from "../settings.js";
|
||||
const styles = ["purple", "gray", "red", "green", "yellow", "blue"];
|
||||
class DevToolbarCard extends HTMLElement {
|
||||
link;
|
||||
clickAction;
|
||||
shadowRoot;
|
||||
_cardStyle = "purple";
|
||||
get cardStyle() {
|
||||
return this._cardStyle;
|
||||
}
|
||||
set cardStyle(value) {
|
||||
if (!styles.includes(value)) {
|
||||
settings.logger.error(
|
||||
`Invalid style: ${value}, expected one of ${styles.join(", ")}, got ${value}.`
|
||||
);
|
||||
return;
|
||||
}
|
||||
this._cardStyle = value;
|
||||
this.updateStyle();
|
||||
}
|
||||
static observedAttributes = ["card-style"];
|
||||
constructor() {
|
||||
super();
|
||||
this.shadowRoot = this.attachShadow({ mode: "open" });
|
||||
this.link = this.getAttribute("link");
|
||||
}
|
||||
attributeChangedCallback() {
|
||||
if (this.hasAttribute("card-style"))
|
||||
this.cardStyle = this.getAttribute("card-style");
|
||||
this.updateStyle();
|
||||
}
|
||||
updateStyle() {
|
||||
const style = this.shadowRoot.querySelector("#selected-style");
|
||||
if (style) {
|
||||
style.innerHTML = `
|
||||
:host {
|
||||
--hover-background: var(--${this.cardStyle}-hover-background);
|
||||
--hover-border: var(--${this.cardStyle}-hover-border);
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
connectedCallback() {
|
||||
const element = this.link ? "a" : this.clickAction ? "button" : "div";
|
||||
this.shadowRoot.innerHTML += `
|
||||
<style>
|
||||
:host {
|
||||
--purple-hover-background: rgba(136, 58, 234, 0.33);
|
||||
--purple-hover-border: 1px solid rgba(113, 24, 226, 1);
|
||||
|
||||
--gray-hover-background: rgba(191, 193, 201, 0.33);
|
||||
--gray-hover-border: 1px solid rgba(191, 193, 201, 1);
|
||||
|
||||
--red-hover-background: rgba(249, 196, 215, 0.33);
|
||||
--red-hover-border: 1px solid rgba(179, 62, 102, 1);
|
||||
|
||||
--green-hover-background: rgba(213, 249, 196, 0.33);
|
||||
--green-hover-border: 1px solid rgba(61, 125, 31, 1);
|
||||
|
||||
--yellow-hover-background: rgba(255, 236, 179, 0.33);
|
||||
--yellow-hover-border: 1px solid rgba(255, 191, 0, 1);
|
||||
|
||||
--blue-hover-background: rgba(189, 195, 255, 0.33);
|
||||
--blue-hover-border: 1px solid rgba(54, 69, 217, 1);
|
||||
}
|
||||
|
||||
:host>a, :host>button, :host>div {
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(35, 38, 45, 1);
|
||||
color: rgba(191, 193, 201, 1);
|
||||
text-decoration: none;
|
||||
background-color: #13151A;
|
||||
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.09), 0px 10px 6px 0px rgba(0, 0, 0, 0.05), 0px 17px 7px 0px rgba(0, 0, 0, 0.01), 0px 26px 7px 0px rgba(0, 0, 0, 0.00);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a:hover, button:hover {
|
||||
background: var(--hover-background);
|
||||
border: var(--hover-border);
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: 8px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<style id="selected-style"></style>
|
||||
|
||||
<${element}${this.link ? ` href="${this.link}" target="_blank"` : ``} id="astro-overlay-card">
|
||||
<slot />
|
||||
</${element}>
|
||||
`;
|
||||
this.updateStyle();
|
||||
if (this.clickAction) {
|
||||
this.shadowRoot.getElementById("astro-overlay-card")?.addEventListener("click", this.clickAction);
|
||||
}
|
||||
}
|
||||
}
|
||||
export {
|
||||
DevToolbarCard
|
||||
};
|
16
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/highlight.d.ts
generated
vendored
Normal file
16
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/highlight.d.ts
generated
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
import { type Icon } from './icons.js';
|
||||
declare const styles: readonly ["purple", "gray", "red", "green", "yellow", "blue"];
|
||||
type HighlightStyle = (typeof styles)[number];
|
||||
export declare class DevToolbarHighlight extends HTMLElement {
|
||||
icon?: Icon | undefined | null;
|
||||
_highlightStyle: HighlightStyle;
|
||||
get highlightStyle(): "red" | "purple" | "gray" | "green" | "yellow" | "blue";
|
||||
set highlightStyle(value: "red" | "purple" | "gray" | "green" | "yellow" | "blue");
|
||||
static observedAttributes: string[];
|
||||
shadowRoot: ShadowRoot;
|
||||
constructor();
|
||||
updateStyle(): void;
|
||||
attributeChangedCallback(): void;
|
||||
connectedCallback(): void;
|
||||
}
|
||||
export {};
|
114
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/highlight.js
generated
vendored
Normal file
114
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/highlight.js
generated
vendored
Normal file
@@ -0,0 +1,114 @@
|
||||
import { settings } from "../settings.js";
|
||||
import { getIconElement, isDefinedIcon } from "./icons.js";
|
||||
const styles = ["purple", "gray", "red", "green", "yellow", "blue"];
|
||||
class DevToolbarHighlight extends HTMLElement {
|
||||
icon;
|
||||
_highlightStyle = "purple";
|
||||
get highlightStyle() {
|
||||
return this._highlightStyle;
|
||||
}
|
||||
set highlightStyle(value) {
|
||||
if (!styles.includes(value)) {
|
||||
settings.logger.error(
|
||||
`Invalid style: ${value}, expected one of ${styles.join(", ")}, got ${value}.`
|
||||
);
|
||||
return;
|
||||
}
|
||||
this._highlightStyle = value;
|
||||
this.updateStyle();
|
||||
}
|
||||
static observedAttributes = ["highlight-style"];
|
||||
shadowRoot;
|
||||
constructor() {
|
||||
super();
|
||||
this.shadowRoot = this.attachShadow({ mode: "open" });
|
||||
this.icon = this.hasAttribute("icon") ? this.getAttribute("icon") : void 0;
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
--purple-background: linear-gradient(180deg, rgba(224, 204, 250, 0.33) 0%, rgba(224, 204, 250, 0.0825) 100%);
|
||||
--purple-border: 1px solid rgba(113, 24, 226, 1);
|
||||
|
||||
--gray-background: linear-gradient(180deg, rgba(191, 193, 201, 0.33) 0%, rgba(191, 193, 201, 0.0825) 100%);
|
||||
--gray-border: 1px solid rgba(191, 193, 201, 1);
|
||||
|
||||
--red-background: linear-gradient(180deg, rgba(249, 196, 215, 0.33) 0%, rgba(249, 196, 215, 0.0825) 100%);
|
||||
--red-border: 1px solid rgba(179, 62, 102, 1);
|
||||
|
||||
--green-background: linear-gradient(180deg, rgba(213, 249, 196, 0.33) 0%, rgba(213, 249, 196, 0.0825) 100%);
|
||||
--green-border: 1px solid rgba(61, 125, 31, 1);
|
||||
|
||||
--yellow-background: linear-gradient(180deg, rgba(255, 236, 179, 0.33) 0%, rgba(255, 236, 179, 0.0825) 100%);
|
||||
--yellow-border: 1px solid rgba(181, 138, 45, 1);
|
||||
|
||||
--blue-background: linear-gradient(180deg, rgba(189, 195, 255, 0.33) 0%, rgba(189, 195, 255, 0.0825) 100%);
|
||||
--blue-border: 1px solid rgba(54, 69, 217, 1);
|
||||
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 2000000000;
|
||||
|
||||
background: var(--background);
|
||||
border: var(--border);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: white;
|
||||
background: linear-gradient(0deg, #B33E66, #B33E66), linear-gradient(0deg, #351722, #351722);
|
||||
border: 1px solid rgba(53, 23, 34, 1);
|
||||
border-radius: 9999px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
right: -15px;
|
||||
}
|
||||
</style>
|
||||
<style id="selected-style"></style>
|
||||
`;
|
||||
}
|
||||
updateStyle() {
|
||||
const style = this.shadowRoot.querySelector("#selected-style");
|
||||
if (style) {
|
||||
style.innerHTML = `
|
||||
:host {
|
||||
--background: var(--${this.highlightStyle}-background);
|
||||
--border: var(--${this.highlightStyle}-border);
|
||||
}`;
|
||||
}
|
||||
}
|
||||
attributeChangedCallback() {
|
||||
if (this.hasAttribute("highlight-style"))
|
||||
this.highlightStyle = this.getAttribute("highlight-style");
|
||||
}
|
||||
connectedCallback() {
|
||||
this.updateStyle();
|
||||
if (this.icon) {
|
||||
let iconContainer = document.createElement("div");
|
||||
iconContainer.classList.add("icon");
|
||||
let iconElement;
|
||||
if (isDefinedIcon(this.icon)) {
|
||||
iconElement = getIconElement(this.icon);
|
||||
} else {
|
||||
iconElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
iconElement.setAttribute("viewBox", "0 0 16 16");
|
||||
iconElement.innerHTML = this.icon;
|
||||
}
|
||||
if (iconElement) {
|
||||
iconElement?.style.setProperty("width", "16px");
|
||||
iconElement?.style.setProperty("height", "16px");
|
||||
iconContainer.append(iconElement);
|
||||
this.shadowRoot.append(iconContainer);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export {
|
||||
DevToolbarHighlight
|
||||
};
|
10
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/icon.d.ts
generated
vendored
Normal file
10
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/icon.d.ts
generated
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
import { type Icon } from './icons.js';
|
||||
export declare class DevToolbarIcon extends HTMLElement {
|
||||
_icon: Icon | undefined;
|
||||
shadowRoot: ShadowRoot;
|
||||
get icon(): Icon | undefined;
|
||||
set icon(name: Icon | undefined);
|
||||
constructor();
|
||||
getIconHTML(icon: Icon | undefined): string;
|
||||
buildTemplate(): void;
|
||||
}
|
46
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/icon.js
generated
vendored
Normal file
46
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/icon.js
generated
vendored
Normal file
@@ -0,0 +1,46 @@
|
||||
import { getIconElement, isDefinedIcon } from "./icons.js";
|
||||
class DevToolbarIcon extends HTMLElement {
|
||||
_icon = void 0;
|
||||
shadowRoot;
|
||||
get icon() {
|
||||
return this._icon;
|
||||
}
|
||||
set icon(name) {
|
||||
this._icon = name;
|
||||
this.buildTemplate();
|
||||
}
|
||||
constructor() {
|
||||
super();
|
||||
this.shadowRoot = this.attachShadow({ mode: "open" });
|
||||
if (this.hasAttribute("icon")) {
|
||||
this.icon = this.getAttribute("icon");
|
||||
} else {
|
||||
this.buildTemplate();
|
||||
}
|
||||
}
|
||||
getIconHTML(icon) {
|
||||
if (icon && isDefinedIcon(icon)) {
|
||||
return getIconElement(icon)?.outerHTML ?? "";
|
||||
}
|
||||
return "<slot />";
|
||||
}
|
||||
buildTemplate() {
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
svg path[fill="#fff"] {
|
||||
fill: black;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
${this.getIconHTML(this._icon)}`;
|
||||
}
|
||||
}
|
||||
export {
|
||||
DevToolbarIcon
|
||||
};
|
35
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/icons.d.ts
generated
vendored
Normal file
35
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/icons.d.ts
generated
vendored
Normal file
File diff suppressed because one or more lines are too long
45
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/icons.js
generated
vendored
Normal file
45
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/icons.js
generated
vendored
Normal file
File diff suppressed because one or more lines are too long
10
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/index.d.ts
generated
vendored
Normal file
10
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
export { DevToolbarBadge } from './badge.js';
|
||||
export { DevToolbarButton } from './button.js';
|
||||
export { DevToolbarCard } from './card.js';
|
||||
export { DevToolbarHighlight } from './highlight.js';
|
||||
export { DevToolbarIcon } from './icon.js';
|
||||
export { DevToolbarSelect } from './select.js';
|
||||
export { DevToolbarToggle } from './toggle.js';
|
||||
export { DevToolbarTooltip } from './tooltip.js';
|
||||
export { DevToolbarWindow } from './window.js';
|
||||
export { DevToolbarRadioCheckbox } from './radio-checkbox.js';
|
22
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/index.js
generated
vendored
Normal file
22
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/index.js
generated
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
import { DevToolbarBadge } from "./badge.js";
|
||||
import { DevToolbarButton } from "./button.js";
|
||||
import { DevToolbarCard } from "./card.js";
|
||||
import { DevToolbarHighlight } from "./highlight.js";
|
||||
import { DevToolbarIcon } from "./icon.js";
|
||||
import { DevToolbarSelect } from "./select.js";
|
||||
import { DevToolbarToggle } from "./toggle.js";
|
||||
import { DevToolbarTooltip } from "./tooltip.js";
|
||||
import { DevToolbarWindow } from "./window.js";
|
||||
import { DevToolbarRadioCheckbox } from "./radio-checkbox.js";
|
||||
export {
|
||||
DevToolbarBadge,
|
||||
DevToolbarButton,
|
||||
DevToolbarCard,
|
||||
DevToolbarHighlight,
|
||||
DevToolbarIcon,
|
||||
DevToolbarRadioCheckbox,
|
||||
DevToolbarSelect,
|
||||
DevToolbarToggle,
|
||||
DevToolbarTooltip,
|
||||
DevToolbarWindow
|
||||
};
|
13
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/radio-checkbox.d.ts
generated
vendored
Normal file
13
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/radio-checkbox.d.ts
generated
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
export declare class DevToolbarRadioCheckbox extends HTMLElement {
|
||||
private _radioStyle;
|
||||
input: HTMLInputElement;
|
||||
shadowRoot: ShadowRoot;
|
||||
get radioStyle(): "red" | "purple" | "gray" | "green" | "yellow" | "blue";
|
||||
set radioStyle(value: "red" | "purple" | "gray" | "green" | "yellow" | "blue");
|
||||
static observedAttributes: string[];
|
||||
constructor();
|
||||
connectedCallback(): void;
|
||||
updateStyle(): void;
|
||||
updateInputState(): void;
|
||||
attributeChangedCallback(): void;
|
||||
}
|
109
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/radio-checkbox.js
generated
vendored
Normal file
109
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/radio-checkbox.js
generated
vendored
Normal file
@@ -0,0 +1,109 @@
|
||||
const styles = ["purple", "gray", "red", "green", "yellow", "blue"];
|
||||
class DevToolbarRadioCheckbox extends HTMLElement {
|
||||
_radioStyle = "purple";
|
||||
input;
|
||||
shadowRoot;
|
||||
get radioStyle() {
|
||||
return this._radioStyle;
|
||||
}
|
||||
set radioStyle(value) {
|
||||
if (!styles.includes(value)) {
|
||||
console.error(`Invalid style: ${value}, expected one of ${styles.join(", ")}.`);
|
||||
return;
|
||||
}
|
||||
this._radioStyle = value;
|
||||
this.updateStyle();
|
||||
}
|
||||
static observedAttributes = ["radio-style", "checked", "disabled", "name", "value"];
|
||||
constructor() {
|
||||
super();
|
||||
this.shadowRoot = this.attachShadow({ mode: "open" });
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
--purple-unchecked: rgba(224, 204, 250, 0.33);
|
||||
--purple-checked: rgba(224, 204, 250, 1);
|
||||
|
||||
--gray-unchecked: rgba(191, 193, 201, 0.33);
|
||||
--gray-checked: rgba(191, 193, 201, 1);
|
||||
|
||||
--red-unchecked: rgba(249, 196, 215, 0.33);
|
||||
--red-checked: rgba(179, 62, 102, 1);
|
||||
|
||||
--green-unchecked: rgba(213, 249, 196, 0.33);
|
||||
--green-checked: rgba(61, 125, 31, 1);
|
||||
|
||||
--yellow-unchecked: rgba(255, 236, 179, 0.33);
|
||||
--yellow-checked: rgba(181, 138, 45, 1);
|
||||
|
||||
--blue-unchecked: rgba(189, 195, 255, 0.33);
|
||||
--blue-checked: rgba(54, 69, 217, 1);
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
border: 2px solid var(--unchecked-color);
|
||||
border-radius: 9999px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
input[type="radio"]::before {
|
||||
content: "";
|
||||
background-color: var(--checked-color);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 9999px;
|
||||
visibility: hidden;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
input[type="radio"]:checked {
|
||||
border-color: var(--checked-color);
|
||||
}
|
||||
|
||||
input[type="radio"]:checked::before {
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
<style id="selected-style"></style>
|
||||
`;
|
||||
this.input = document.createElement("input");
|
||||
this.input.type = "radio";
|
||||
this.shadowRoot.append(this.input);
|
||||
}
|
||||
connectedCallback() {
|
||||
this.updateInputState();
|
||||
this.updateStyle();
|
||||
}
|
||||
updateStyle() {
|
||||
const styleElement = this.shadowRoot.querySelector("#selected-style");
|
||||
if (styleElement) {
|
||||
styleElement.innerHTML = `
|
||||
:host {
|
||||
--unchecked-color: var(--${this._radioStyle}-unchecked);
|
||||
--checked-color: var(--${this._radioStyle}-checked);
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
updateInputState() {
|
||||
this.input.checked = this.hasAttribute("checked");
|
||||
this.input.disabled = this.hasAttribute("disabled");
|
||||
this.input.name = this.getAttribute("name") || "";
|
||||
this.input.value = this.getAttribute("value") || "";
|
||||
}
|
||||
attributeChangedCallback() {
|
||||
if (this.hasAttribute("radio-style")) {
|
||||
this.radioStyle = this.getAttribute("radio-style");
|
||||
}
|
||||
this.updateInputState();
|
||||
}
|
||||
}
|
||||
export {
|
||||
DevToolbarRadioCheckbox
|
||||
};
|
15
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/select.d.ts
generated
vendored
Normal file
15
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/select.d.ts
generated
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
declare const styles: readonly ["purple", "gray", "red", "green", "yellow", "blue"];
|
||||
type SelectStyle = (typeof styles)[number];
|
||||
export declare class DevToolbarSelect extends HTMLElement {
|
||||
shadowRoot: ShadowRoot;
|
||||
element: HTMLSelectElement;
|
||||
_selectStyle: SelectStyle;
|
||||
get selectStyle(): "red" | "purple" | "gray" | "green" | "yellow" | "blue";
|
||||
set selectStyle(value: "red" | "purple" | "gray" | "green" | "yellow" | "blue");
|
||||
static observedAttributes: string[];
|
||||
constructor();
|
||||
connectedCallback(): void;
|
||||
attributeChangedCallback(): void;
|
||||
updateStyle(): void;
|
||||
}
|
||||
export {};
|
100
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/select.js
generated
vendored
Normal file
100
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/select.js
generated
vendored
Normal file
@@ -0,0 +1,100 @@
|
||||
import { settings } from "../settings.js";
|
||||
const styles = ["purple", "gray", "red", "green", "yellow", "blue"];
|
||||
class DevToolbarSelect extends HTMLElement {
|
||||
shadowRoot;
|
||||
element;
|
||||
_selectStyle = "gray";
|
||||
get selectStyle() {
|
||||
return this._selectStyle;
|
||||
}
|
||||
set selectStyle(value) {
|
||||
if (!styles.includes(value)) {
|
||||
settings.logger.error(`Invalid style: ${value}, expected one of ${styles.join(", ")}.`);
|
||||
return;
|
||||
}
|
||||
this._selectStyle = value;
|
||||
this.updateStyle();
|
||||
}
|
||||
static observedAttributes = ["select-style"];
|
||||
constructor() {
|
||||
super();
|
||||
this.shadowRoot = this.attachShadow({ mode: "open" });
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
--purple-text: rgba(224, 204, 250, 1);
|
||||
--purple-border: rgba(113, 24, 226, 1);
|
||||
|
||||
--gray-text: rgba(191, 193, 201, 1);
|
||||
--gray-border:rgba(191, 193, 201, 1);
|
||||
|
||||
--red-text: rgba(249, 196, 215, 1);
|
||||
--red-border: rgba(179, 62, 102, 1);
|
||||
|
||||
--green-text: rgba(213, 249, 196, 1);
|
||||
--green-border: rgba(61, 125, 31, 1);
|
||||
|
||||
--yellow-text: rgba(249, 233, 196, 1);
|
||||
--yellow-border: rgba(181, 138, 45, 1);
|
||||
|
||||
--blue-text: rgba(189, 195, 255, 1);
|
||||
--blue-border: rgba(54, 69, 217, 1);
|
||||
|
||||
--text-color: var(--gray-text);
|
||||
--border-color: var(--gray-border);
|
||||
}
|
||||
select {
|
||||
appearance: none;
|
||||
text-align-last: center;
|
||||
display: inline-block;
|
||||
font-family: system-ui, sans-serif;
|
||||
font-size: 14px;
|
||||
padding: 4px 24px 4px 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
color: var(--text-color);
|
||||
background-color: transparent;
|
||||
background-image:
|
||||
linear-gradient(45deg, transparent 50%, var(--text-color) 50%),
|
||||
linear-gradient(135deg, var(--text-color) 50%, transparent 50%);
|
||||
background-position:
|
||||
calc(100% - 12px) calc(1em - 2px),
|
||||
calc(100% - 8px) calc(1em - 2px);
|
||||
background-size: 4px 4px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
<style id="selected-style"></style>
|
||||
<slot></slot>
|
||||
`;
|
||||
this.element = document.createElement("select");
|
||||
this.shadowRoot.addEventListener("slotchange", (event) => {
|
||||
if (event.target instanceof HTMLSlotElement) {
|
||||
this.element.append(...event.target.assignedNodes());
|
||||
}
|
||||
});
|
||||
}
|
||||
connectedCallback() {
|
||||
this.shadowRoot.append(this.element);
|
||||
this.updateStyle();
|
||||
}
|
||||
attributeChangedCallback() {
|
||||
if (this.hasAttribute("select-style")) {
|
||||
this.selectStyle = this.getAttribute("select-style");
|
||||
}
|
||||
}
|
||||
updateStyle() {
|
||||
const style = this.shadowRoot.querySelector("#selected-style");
|
||||
if (style) {
|
||||
style.innerHTML = `
|
||||
:host {
|
||||
--text-color: var(--${this.selectStyle}-text);
|
||||
--border-color: var(--${this.selectStyle}-border);
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
}
|
||||
export {
|
||||
DevToolbarSelect
|
||||
};
|
17
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/toggle.d.ts
generated
vendored
Normal file
17
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/toggle.d.ts
generated
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
declare const styles: readonly ["purple", "gray", "red", "green", "yellow", "blue"];
|
||||
type ToggleStyle = (typeof styles)[number];
|
||||
export declare class DevToolbarToggle extends HTMLElement {
|
||||
shadowRoot: ShadowRoot;
|
||||
input: HTMLInputElement;
|
||||
_toggleStyle: ToggleStyle;
|
||||
get toggleStyle(): "red" | "purple" | "gray" | "green" | "yellow" | "blue";
|
||||
set toggleStyle(value: "red" | "purple" | "gray" | "green" | "yellow" | "blue");
|
||||
static observedAttributes: string[];
|
||||
constructor();
|
||||
attributeChangedCallback(): void;
|
||||
updateStyle(): void;
|
||||
connectedCallback(): void;
|
||||
get value(): string;
|
||||
set value(val: string);
|
||||
}
|
||||
export {};
|
124
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/toggle.js
generated
vendored
Normal file
124
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/toggle.js
generated
vendored
Normal file
@@ -0,0 +1,124 @@
|
||||
import { settings } from "../settings.js";
|
||||
const styles = ["purple", "gray", "red", "green", "yellow", "blue"];
|
||||
class DevToolbarToggle extends HTMLElement {
|
||||
shadowRoot;
|
||||
input;
|
||||
_toggleStyle = "gray";
|
||||
get toggleStyle() {
|
||||
return this._toggleStyle;
|
||||
}
|
||||
set toggleStyle(value) {
|
||||
if (!styles.includes(value)) {
|
||||
settings.logger.error(`Invalid style: ${value}, expected one of ${styles.join(", ")}.`);
|
||||
return;
|
||||
}
|
||||
this._toggleStyle = value;
|
||||
this.updateStyle();
|
||||
}
|
||||
static observedAttributes = ["toggle-style"];
|
||||
constructor() {
|
||||
super();
|
||||
this.shadowRoot = this.attachShadow({ mode: "open" });
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
--purple-bg-on: rgba(113, 24, 226, 1);
|
||||
--purple-border-off: rgba(113, 24, 226, 1);
|
||||
--purple-border-on: rgba(224, 204, 250, 1);
|
||||
|
||||
--gray-bg-on: rgba(61, 125, 31, 1);
|
||||
--gray-border-off: rgba(145, 152, 173, 1);
|
||||
--gray-border-on: rgba(213, 249, 196, 1);
|
||||
|
||||
--red-bg-on: rgba(179, 62, 102, 1);
|
||||
--red-border-off: rgba(179, 62, 102, 1);
|
||||
--red-border-on: rgba(249, 196, 215, 1);
|
||||
|
||||
--green-bg-on: rgba(61, 125, 31, 1);
|
||||
--green-border-off: rgba(61, 125, 31, 1);
|
||||
--green-border-on: rgba(213, 249, 196, 1);
|
||||
|
||||
--yellow-bg-on: rgba(181, 138, 45, 1);
|
||||
--yellow-border-off: rgba(181, 138, 45, 1);
|
||||
--yellow-border-on: rgba(255, 236, 179, 1);
|
||||
|
||||
--blue-bg-on: rgba(54, 69, 217, 1);
|
||||
--blue-border-off: rgba(54, 69, 217, 1);
|
||||
--blue-border-on: rgba(189, 195, 255, 1);
|
||||
}
|
||||
|
||||
input {
|
||||
appearance: none;
|
||||
width: 32px;
|
||||
height: 20px;
|
||||
border: 1px solid var(--border-off);
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
input::after {
|
||||
content: '';
|
||||
width: 16px;
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
background-color: var(--border-off);
|
||||
border-radius: 9999px;
|
||||
transition: transform 0.2s ease, background-color 0.2s ease;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
input::after {
|
||||
border: 1px solid black;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked {
|
||||
border: 1px solid var(--border-on);
|
||||
background-color: var(--bg-on);
|
||||
}
|
||||
|
||||
input:checked::after {
|
||||
transform: translateX(12px);
|
||||
background: var(--border-on);
|
||||
}
|
||||
</style>
|
||||
<style id="selected-style"></style>
|
||||
`;
|
||||
this.input = document.createElement("input");
|
||||
}
|
||||
attributeChangedCallback() {
|
||||
if (this.hasAttribute("toggle-style"))
|
||||
this.toggleStyle = this.getAttribute("toggle-style");
|
||||
}
|
||||
updateStyle() {
|
||||
const style = this.shadowRoot.querySelector("#selected-style");
|
||||
if (style) {
|
||||
style.innerHTML = `
|
||||
:host {
|
||||
--bg-on: var(--${this.toggleStyle}-bg-on);
|
||||
--border-off: var(--${this.toggleStyle}-border-off);
|
||||
--border-on: var(--${this.toggleStyle}-border-on);
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
connectedCallback() {
|
||||
this.input.type = "checkbox";
|
||||
this.shadowRoot.append(this.input);
|
||||
this.updateStyle();
|
||||
}
|
||||
get value() {
|
||||
return this.input.value;
|
||||
}
|
||||
set value(val) {
|
||||
this.input.value = val;
|
||||
}
|
||||
}
|
||||
export {
|
||||
DevToolbarToggle
|
||||
};
|
16
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/tooltip.d.ts
generated
vendored
Normal file
16
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/tooltip.d.ts
generated
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
import { type Icon } from './icons.js';
|
||||
export interface DevToolbarTooltipSection {
|
||||
title?: string;
|
||||
inlineTitle?: string;
|
||||
icon?: Icon;
|
||||
content?: string;
|
||||
clickAction?: () => void | Promise<void>;
|
||||
clickDescription?: string;
|
||||
}
|
||||
export declare class DevToolbarTooltip extends HTMLElement {
|
||||
sections: DevToolbarTooltipSection[];
|
||||
shadowRoot: ShadowRoot;
|
||||
constructor();
|
||||
connectedCallback(): void;
|
||||
getElementForIcon(icon: Icon | (string & NonNullable<unknown>)): string;
|
||||
}
|
143
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/tooltip.js
generated
vendored
Normal file
143
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/tooltip.js
generated
vendored
Normal file
@@ -0,0 +1,143 @@
|
||||
import { getIconElement, isDefinedIcon } from "./icons.js";
|
||||
class DevToolbarTooltip extends HTMLElement {
|
||||
sections = [];
|
||||
shadowRoot;
|
||||
constructor() {
|
||||
super();
|
||||
this.shadowRoot = this.attachShadow({ mode: "open" });
|
||||
}
|
||||
connectedCallback() {
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
position: absolute;
|
||||
display: none;
|
||||
color: white;
|
||||
background: linear-gradient(0deg, #310A65, #310A65), linear-gradient(0deg, #7118E2, #7118E2);
|
||||
border: 1px solid rgba(113, 24, 226, 1);
|
||||
border-radius: 4px;
|
||||
padding: 0;
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
z-index: 2000000001;
|
||||
max-width: 45ch;
|
||||
width: fit-content;
|
||||
min-width: 30ch;
|
||||
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.30), 0px 1px 2px 0px rgba(0, 0, 0, 0.29), 0px 4px 4px 0px rgba(0, 0, 0, 0.26), 0px 10px 6px 0px rgba(0, 0, 0, 0.15), 0px 17px 7px 0px rgba(0, 0, 0, 0.04), 0px 26px 7px 0px rgba(0, 0, 0, 0.01);
|
||||
}
|
||||
|
||||
:host([data-show="true"]) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: bottom;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 1px solid rgba(136, 58, 234, 0.33);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-main-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-title + div {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.modal-cta {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.clickable-section {
|
||||
background: rgba(113, 24, 226, 1);
|
||||
padding: 8px;
|
||||
border: 0;
|
||||
color: white;
|
||||
font-family: system-ui, sans-serif;
|
||||
text-align: left;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.clickable-section:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
background: rgb(78, 27, 145);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
padding: 2px;
|
||||
}
|
||||
pre {
|
||||
padding: 1em;
|
||||
margin: 0 0;
|
||||
overflow: auto;
|
||||
}
|
||||
`;
|
||||
const fragment = new DocumentFragment();
|
||||
this.sections.forEach((section, index) => {
|
||||
const sectionElement = section.clickAction ? document.createElement("button") : document.createElement("section");
|
||||
if (section.clickAction) {
|
||||
sectionElement.classList.add("clickable-section");
|
||||
sectionElement.addEventListener("click", async () => {
|
||||
await section.clickAction();
|
||||
});
|
||||
}
|
||||
sectionElement.innerHTML = `
|
||||
${section.title ? `<div class="modal-title"><span class="modal-main-title">
|
||||
${section.icon ? this.getElementForIcon(section.icon) : ""}${section.title}</span>${section.inlineTitle ?? ""}</div>` : ""}
|
||||
${section.content ? `<div class="section-content">${section.content}</div>` : ""}
|
||||
${section.clickDescription ? `<span class="modal-cta">${section.clickDescription}</span>` : ""}
|
||||
`;
|
||||
fragment.append(sectionElement);
|
||||
if (index < this.sections.length - 1) {
|
||||
fragment.append(document.createElement("hr"));
|
||||
}
|
||||
});
|
||||
this.shadowRoot.append(fragment);
|
||||
}
|
||||
getElementForIcon(icon) {
|
||||
let iconElement;
|
||||
if (isDefinedIcon(icon)) {
|
||||
iconElement = getIconElement(icon);
|
||||
} else {
|
||||
iconElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
iconElement.setAttribute("viewBox", "0 0 16 16");
|
||||
iconElement.innerHTML = icon;
|
||||
}
|
||||
iconElement?.style.setProperty("width", "16px");
|
||||
iconElement?.style.setProperty("height", "16px");
|
||||
return iconElement?.outerHTML ?? "";
|
||||
}
|
||||
}
|
||||
export {
|
||||
DevToolbarTooltip
|
||||
};
|
14
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/window.d.ts
generated
vendored
Normal file
14
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/window.d.ts
generated
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
export declare const placements: readonly ["bottom-left", "bottom-center", "bottom-right"];
|
||||
export type Placement = (typeof placements)[number];
|
||||
export declare function isValidPlacement(value: string): value is Placement;
|
||||
export declare class DevToolbarWindow extends HTMLElement {
|
||||
shadowRoot: ShadowRoot;
|
||||
_placement: Placement;
|
||||
get placement(): "bottom-left" | "bottom-center" | "bottom-right";
|
||||
set placement(value: "bottom-left" | "bottom-center" | "bottom-right");
|
||||
static observedAttributes: string[];
|
||||
constructor();
|
||||
connectedCallback(): Promise<void>;
|
||||
attributeChangedCallback(): void;
|
||||
updateStyle(): void;
|
||||
}
|
133
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/window.js
generated
vendored
Normal file
133
node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/window.js
generated
vendored
Normal file
@@ -0,0 +1,133 @@
|
||||
import { defaultSettings, settings } from "../settings.js";
|
||||
const placements = ["bottom-left", "bottom-center", "bottom-right"];
|
||||
function isValidPlacement(value) {
|
||||
return placements.map(String).includes(value);
|
||||
}
|
||||
class DevToolbarWindow extends HTMLElement {
|
||||
shadowRoot;
|
||||
_placement = defaultSettings.placement;
|
||||
get placement() {
|
||||
return this._placement;
|
||||
}
|
||||
set placement(value) {
|
||||
if (!isValidPlacement(value)) {
|
||||
settings.logger.error(
|
||||
`Invalid placement: ${value}, expected one of ${placements.join(", ")}, got ${value}.`
|
||||
);
|
||||
return;
|
||||
}
|
||||
this._placement = value;
|
||||
this.updateStyle();
|
||||
}
|
||||
static observedAttributes = ["placement"];
|
||||
constructor() {
|
||||
super();
|
||||
this.shadowRoot = this.attachShadow({ mode: "open" });
|
||||
}
|
||||
async connectedCallback() {
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(0deg, #13151A, #13151A), linear-gradient(0deg, #343841, #343841);
|
||||
border: 1px solid rgba(52, 56, 65, 1);
|
||||
width: min(640px, 100%);
|
||||
max-height: 480px;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
color: rgba(191, 193, 201, 1);
|
||||
position: fixed;
|
||||
z-index: 999999999;
|
||||
bottom: 72px;
|
||||
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) {
|
||||
:host {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
:host {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::slotted(h1), ::slotted(h2), ::slotted(h3), ::slotted(h4), ::slotted(h5) {
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::slotted(h1) {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
::slotted(h2) {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
::slotted(h3) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
::slotted(h4) {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
::slotted(h5) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
hr, ::slotted(hr) {
|
||||
border: 1px solid rgba(27, 30, 36, 1);
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
p, ::slotted(p) {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
</style>
|
||||
<style id="selected-style"></style>
|
||||
|
||||
<slot />
|
||||
`;
|
||||
this.updateStyle();
|
||||
}
|
||||
attributeChangedCallback() {
|
||||
if (this.hasAttribute("placement"))
|
||||
this.placement = this.getAttribute("placement");
|
||||
}
|
||||
updateStyle() {
|
||||
const style = this.shadowRoot.querySelector("#selected-style");
|
||||
if (style) {
|
||||
const styleMap = {
|
||||
"bottom-left": `
|
||||
:host {
|
||||
left: 16px;
|
||||
}
|
||||
`,
|
||||
"bottom-center": `
|
||||
:host {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
`,
|
||||
"bottom-right": `
|
||||
:host {
|
||||
right: 16px;
|
||||
}
|
||||
`
|
||||
};
|
||||
style.innerHTML = styleMap[this.placement];
|
||||
}
|
||||
}
|
||||
}
|
||||
export {
|
||||
DevToolbarWindow,
|
||||
isValidPlacement,
|
||||
placements
|
||||
};
|
1
node_modules/astro/dist/runtime/client/hmr.d.ts
generated
vendored
Normal file
1
node_modules/astro/dist/runtime/client/hmr.d.ts
generated
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export {};
|
2
node_modules/astro/dist/runtime/client/hmr.js
generated
vendored
Normal file
2
node_modules/astro/dist/runtime/client/hmr.js
generated
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
if (import.meta.hot) {
|
||||
}
|
3
node_modules/astro/dist/runtime/client/idle.d.ts
generated
vendored
Normal file
3
node_modules/astro/dist/runtime/client/idle.d.ts
generated
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import type { ClientDirective } from '../../@types/astro.js';
|
||||
declare const idleDirective: ClientDirective;
|
||||
export default idleDirective;
|
19
node_modules/astro/dist/runtime/client/idle.js
generated
vendored
Normal file
19
node_modules/astro/dist/runtime/client/idle.js
generated
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
const idleDirective = (load, options) => {
|
||||
const cb = async () => {
|
||||
const hydrate = await load();
|
||||
await hydrate();
|
||||
};
|
||||
const rawOptions = typeof options.value === "object" ? options.value : void 0;
|
||||
const idleOptions = {
|
||||
timeout: rawOptions?.timeout
|
||||
};
|
||||
if ("requestIdleCallback" in window) {
|
||||
window.requestIdleCallback(cb, idleOptions);
|
||||
} else {
|
||||
setTimeout(cb, idleOptions.timeout || 200);
|
||||
}
|
||||
};
|
||||
var idle_default = idleDirective;
|
||||
export {
|
||||
idle_default as default
|
||||
};
|
7
node_modules/astro/dist/runtime/client/idle.prebuilt.d.ts
generated
vendored
Normal file
7
node_modules/astro/dist/runtime/client/idle.prebuilt.d.ts
generated
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* This file is prebuilt from packages/astro/src/runtime/client/idle.ts
|
||||
* Do not edit this directly, but instead edit that file and rerun the prebuild
|
||||
* to generate this file.
|
||||
*/
|
||||
declare const _default: "(()=>{var l=(o,t)=>{let i=async()=>{await(await o())()},e=typeof t.value==\"object\"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};\"requestIdleCallback\"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event(\"astro:idle\"));})();";
|
||||
export default _default;
|
4
node_modules/astro/dist/runtime/client/idle.prebuilt.js
generated
vendored
Normal file
4
node_modules/astro/dist/runtime/client/idle.prebuilt.js
generated
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
var idle_prebuilt_default = `(()=>{var l=(o,t)=>{let i=async()=>{await(await o())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();`;
|
||||
export {
|
||||
idle_prebuilt_default as default
|
||||
};
|
3
node_modules/astro/dist/runtime/client/load.d.ts
generated
vendored
Normal file
3
node_modules/astro/dist/runtime/client/load.d.ts
generated
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import type { ClientDirective } from '../../@types/astro.js';
|
||||
declare const loadDirective: ClientDirective;
|
||||
export default loadDirective;
|
8
node_modules/astro/dist/runtime/client/load.js
generated
vendored
Normal file
8
node_modules/astro/dist/runtime/client/load.js
generated
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
const loadDirective = async (load) => {
|
||||
const hydrate = await load();
|
||||
await hydrate();
|
||||
};
|
||||
var load_default = loadDirective;
|
||||
export {
|
||||
load_default as default
|
||||
};
|
7
node_modules/astro/dist/runtime/client/load.prebuilt.d.ts
generated
vendored
Normal file
7
node_modules/astro/dist/runtime/client/load.prebuilt.d.ts
generated
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* This file is prebuilt from packages/astro/src/runtime/client/load.ts
|
||||
* Do not edit this directly, but instead edit that file and rerun the prebuild
|
||||
* to generate this file.
|
||||
*/
|
||||
declare const _default: "(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event(\"astro:load\"));})();";
|
||||
export default _default;
|
4
node_modules/astro/dist/runtime/client/load.prebuilt.js
generated
vendored
Normal file
4
node_modules/astro/dist/runtime/client/load.prebuilt.js
generated
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
var load_prebuilt_default = `(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();`;
|
||||
export {
|
||||
load_prebuilt_default as default
|
||||
};
|
6
node_modules/astro/dist/runtime/client/media.d.ts
generated
vendored
Normal file
6
node_modules/astro/dist/runtime/client/media.d.ts
generated
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
import type { ClientDirective } from '../../@types/astro.js';
|
||||
/**
|
||||
* Hydrate this component when a matching media query is found
|
||||
*/
|
||||
declare const mediaDirective: ClientDirective;
|
||||
export default mediaDirective;
|
18
node_modules/astro/dist/runtime/client/media.js
generated
vendored
Normal file
18
node_modules/astro/dist/runtime/client/media.js
generated
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
const mediaDirective = (load, options) => {
|
||||
const cb = async () => {
|
||||
const hydrate = await load();
|
||||
await hydrate();
|
||||
};
|
||||
if (options.value) {
|
||||
const mql = matchMedia(options.value);
|
||||
if (mql.matches) {
|
||||
cb();
|
||||
} else {
|
||||
mql.addEventListener("change", cb, { once: true });
|
||||
}
|
||||
}
|
||||
};
|
||||
var media_default = mediaDirective;
|
||||
export {
|
||||
media_default as default
|
||||
};
|
7
node_modules/astro/dist/runtime/client/media.prebuilt.d.ts
generated
vendored
Normal file
7
node_modules/astro/dist/runtime/client/media.prebuilt.d.ts
generated
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* This file is prebuilt from packages/astro/src/runtime/client/media.ts
|
||||
* Do not edit this directly, but instead edit that file and rerun the prebuild
|
||||
* to generate this file.
|
||||
*/
|
||||
declare const _default: "(()=>{var s=(i,t)=>{let a=async()=>{await(await i())()};if(t.value){let e=matchMedia(t.value);e.matches?a():e.addEventListener(\"change\",a,{once:!0})}};(self.Astro||(self.Astro={})).media=s;window.dispatchEvent(new Event(\"astro:media\"));})();";
|
||||
export default _default;
|
4
node_modules/astro/dist/runtime/client/media.prebuilt.js
generated
vendored
Normal file
4
node_modules/astro/dist/runtime/client/media.prebuilt.js
generated
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
var media_prebuilt_default = `(()=>{var s=(i,t)=>{let a=async()=>{await(await i())()};if(t.value){let e=matchMedia(t.value);e.matches?a():e.addEventListener("change",a,{once:!0})}};(self.Astro||(self.Astro={})).media=s;window.dispatchEvent(new Event("astro:media"));})();`;
|
||||
export {
|
||||
media_prebuilt_default as default
|
||||
};
|
6
node_modules/astro/dist/runtime/client/only.d.ts
generated
vendored
Normal file
6
node_modules/astro/dist/runtime/client/only.d.ts
generated
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
import type { ClientDirective } from '../../@types/astro.js';
|
||||
/**
|
||||
* Hydrate this component only on the client
|
||||
*/
|
||||
declare const onlyDirective: ClientDirective;
|
||||
export default onlyDirective;
|
8
node_modules/astro/dist/runtime/client/only.js
generated
vendored
Normal file
8
node_modules/astro/dist/runtime/client/only.js
generated
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
const onlyDirective = async (load) => {
|
||||
const hydrate = await load();
|
||||
await hydrate();
|
||||
};
|
||||
var only_default = onlyDirective;
|
||||
export {
|
||||
only_default as default
|
||||
};
|
7
node_modules/astro/dist/runtime/client/only.prebuilt.d.ts
generated
vendored
Normal file
7
node_modules/astro/dist/runtime/client/only.prebuilt.d.ts
generated
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* This file is prebuilt from packages/astro/src/runtime/client/only.ts
|
||||
* Do not edit this directly, but instead edit that file and rerun the prebuild
|
||||
* to generate this file.
|
||||
*/
|
||||
declare const _default: "(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event(\"astro:only\"));})();";
|
||||
export default _default;
|
4
node_modules/astro/dist/runtime/client/only.prebuilt.js
generated
vendored
Normal file
4
node_modules/astro/dist/runtime/client/only.prebuilt.js
generated
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
var only_prebuilt_default = `(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();`;
|
||||
export {
|
||||
only_prebuilt_default as default
|
||||
};
|
8
node_modules/astro/dist/runtime/client/visible.d.ts
generated
vendored
Normal file
8
node_modules/astro/dist/runtime/client/visible.d.ts
generated
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
import type { ClientDirective } from '../../@types/astro.js';
|
||||
/**
|
||||
* Hydrate this component when one of it's children becomes visible
|
||||
* We target the children because `astro-island` is set to `display: contents`
|
||||
* which doesn't work with IntersectionObserver
|
||||
*/
|
||||
declare const visibleDirective: ClientDirective;
|
||||
export default visibleDirective;
|
25
node_modules/astro/dist/runtime/client/visible.js
generated
vendored
Normal file
25
node_modules/astro/dist/runtime/client/visible.js
generated
vendored
Normal file
@@ -0,0 +1,25 @@
|
||||
const visibleDirective = (load, options, el) => {
|
||||
const cb = async () => {
|
||||
const hydrate = await load();
|
||||
await hydrate();
|
||||
};
|
||||
const rawOptions = typeof options.value === "object" ? options.value : void 0;
|
||||
const ioOptions = {
|
||||
rootMargin: rawOptions?.rootMargin
|
||||
};
|
||||
const io = new IntersectionObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
if (!entry.isIntersecting) continue;
|
||||
io.disconnect();
|
||||
cb();
|
||||
break;
|
||||
}
|
||||
}, ioOptions);
|
||||
for (const child of el.children) {
|
||||
io.observe(child);
|
||||
}
|
||||
};
|
||||
var visible_default = visibleDirective;
|
||||
export {
|
||||
visible_default as default
|
||||
};
|
7
node_modules/astro/dist/runtime/client/visible.prebuilt.d.ts
generated
vendored
Normal file
7
node_modules/astro/dist/runtime/client/visible.prebuilt.d.ts
generated
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* This file is prebuilt from packages/astro/src/runtime/client/visible.ts
|
||||
* Do not edit this directly, but instead edit that file and rerun the prebuild
|
||||
* to generate this file.
|
||||
*/
|
||||
declare const _default: "(()=>{var l=(s,i,o)=>{let r=async()=>{await(await s())()},t=typeof i.value==\"object\"?i.value:void 0,c={rootMargin:t==null?void 0:t.rootMargin},n=new IntersectionObserver(e=>{for(let a of e)if(a.isIntersecting){n.disconnect(),r();break}},c);for(let e of o.children)n.observe(e)};(self.Astro||(self.Astro={})).visible=l;window.dispatchEvent(new Event(\"astro:visible\"));})();";
|
||||
export default _default;
|
4
node_modules/astro/dist/runtime/client/visible.prebuilt.js
generated
vendored
Normal file
4
node_modules/astro/dist/runtime/client/visible.prebuilt.js
generated
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
var visible_prebuilt_default = `(()=>{var l=(s,i,o)=>{let r=async()=>{await(await s())()},t=typeof i.value=="object"?i.value:void 0,c={rootMargin:t==null?void 0:t.rootMargin},n=new IntersectionObserver(e=>{for(let a of e)if(a.isIntersecting){n.disconnect(),r();break}},c);for(let e of o.children)n.observe(e)};(self.Astro||(self.Astro={})).visible=l;window.dispatchEvent(new Event("astro:visible"));})();`;
|
||||
export {
|
||||
visible_prebuilt_default as default
|
||||
};
|
1
node_modules/astro/dist/runtime/compiler/index.d.ts
generated
vendored
Normal file
1
node_modules/astro/dist/runtime/compiler/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export { Fragment, addAttribute, createAstro, createComponent, createTransitionScope, defineScriptVars, defineStyleVars, maybeRenderHead, mergeSlots, render, renderComponent, renderHead, renderScript, renderSlot, renderTransition, spreadAttributes, unescapeHTML, } from '../server/index.js';
|
38
node_modules/astro/dist/runtime/compiler/index.js
generated
vendored
Normal file
38
node_modules/astro/dist/runtime/compiler/index.js
generated
vendored
Normal file
@@ -0,0 +1,38 @@
|
||||
import {
|
||||
Fragment,
|
||||
addAttribute,
|
||||
createAstro,
|
||||
createComponent,
|
||||
createTransitionScope,
|
||||
defineScriptVars,
|
||||
defineStyleVars,
|
||||
maybeRenderHead,
|
||||
mergeSlots,
|
||||
render,
|
||||
renderComponent,
|
||||
renderHead,
|
||||
renderScript,
|
||||
renderSlot,
|
||||
renderTransition,
|
||||
spreadAttributes,
|
||||
unescapeHTML
|
||||
} from "../server/index.js";
|
||||
export {
|
||||
Fragment,
|
||||
addAttribute,
|
||||
createAstro,
|
||||
createComponent,
|
||||
createTransitionScope,
|
||||
defineScriptVars,
|
||||
defineStyleVars,
|
||||
maybeRenderHead,
|
||||
mergeSlots,
|
||||
render,
|
||||
renderComponent,
|
||||
renderHead,
|
||||
renderScript,
|
||||
renderSlot,
|
||||
renderTransition,
|
||||
spreadAttributes,
|
||||
unescapeHTML
|
||||
};
|
9
node_modules/astro/dist/runtime/server/astro-component.d.ts
generated
vendored
Normal file
9
node_modules/astro/dist/runtime/server/astro-component.d.ts
generated
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
import type { PropagationHint } from '../../@types/astro.js';
|
||||
import type { AstroComponentFactory } from './render/index.js';
|
||||
interface CreateComponentOptions {
|
||||
factory: AstroComponentFactory;
|
||||
moduleId?: string;
|
||||
propagation?: PropagationHint;
|
||||
}
|
||||
export declare function createComponent(arg1: AstroComponentFactory | CreateComponentOptions, moduleId?: string, propagation?: PropagationHint): AstroComponentFactory;
|
||||
export {};
|
37
node_modules/astro/dist/runtime/server/astro-component.js
generated
vendored
Normal file
37
node_modules/astro/dist/runtime/server/astro-component.js
generated
vendored
Normal file
@@ -0,0 +1,37 @@
|
||||
import { AstroError, AstroErrorData } from "../../core/errors/index.js";
|
||||
function validateArgs(args) {
|
||||
if (args.length !== 3) return false;
|
||||
if (!args[0] || typeof args[0] !== "object") return false;
|
||||
return true;
|
||||
}
|
||||
function baseCreateComponent(cb, moduleId, propagation) {
|
||||
const name = moduleId?.split("/").pop()?.replace(".astro", "") ?? "";
|
||||
const fn = (...args) => {
|
||||
if (!validateArgs(args)) {
|
||||
throw new AstroError({
|
||||
...AstroErrorData.InvalidComponentArgs,
|
||||
message: AstroErrorData.InvalidComponentArgs.message(name)
|
||||
});
|
||||
}
|
||||
return cb(...args);
|
||||
};
|
||||
Object.defineProperty(fn, "name", { value: name, writable: false });
|
||||
fn.isAstroComponentFactory = true;
|
||||
fn.moduleId = moduleId;
|
||||
fn.propagation = propagation;
|
||||
return fn;
|
||||
}
|
||||
function createComponentWithOptions(opts) {
|
||||
const cb = baseCreateComponent(opts.factory, opts.moduleId, opts.propagation);
|
||||
return cb;
|
||||
}
|
||||
function createComponent(arg1, moduleId, propagation) {
|
||||
if (typeof arg1 === "function") {
|
||||
return baseCreateComponent(arg1, moduleId, propagation);
|
||||
} else {
|
||||
return createComponentWithOptions(arg1);
|
||||
}
|
||||
}
|
||||
export {
|
||||
createComponent
|
||||
};
|
2
node_modules/astro/dist/runtime/server/astro-global.d.ts
generated
vendored
Normal file
2
node_modules/astro/dist/runtime/server/astro-global.d.ts
generated
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
import type { AstroGlobalPartial } from '../../@types/astro.js';
|
||||
export declare function createAstro(site: string | undefined): AstroGlobalPartial;
|
33
node_modules/astro/dist/runtime/server/astro-global.js
generated
vendored
Normal file
33
node_modules/astro/dist/runtime/server/astro-global.js
generated
vendored
Normal file
@@ -0,0 +1,33 @@
|
||||
import { ASTRO_VERSION } from "../../core/constants.js";
|
||||
import { AstroError, AstroErrorData } from "../../core/errors/index.js";
|
||||
function createAstroGlobFn() {
|
||||
const globHandler = (importMetaGlobResult) => {
|
||||
if (typeof importMetaGlobResult === "string") {
|
||||
throw new AstroError({
|
||||
...AstroErrorData.AstroGlobUsedOutside,
|
||||
message: AstroErrorData.AstroGlobUsedOutside.message(JSON.stringify(importMetaGlobResult))
|
||||
});
|
||||
}
|
||||
let allEntries = [...Object.values(importMetaGlobResult)];
|
||||
if (allEntries.length === 0) {
|
||||
throw new AstroError({
|
||||
...AstroErrorData.AstroGlobNoMatch,
|
||||
message: AstroErrorData.AstroGlobNoMatch.message(JSON.stringify(importMetaGlobResult))
|
||||
});
|
||||
}
|
||||
return Promise.all(allEntries.map((fn) => fn()));
|
||||
};
|
||||
return globHandler;
|
||||
}
|
||||
function createAstro(site) {
|
||||
return {
|
||||
// TODO: this is no longer necessary for `Astro.site`
|
||||
// but it somehow allows working around caching issues in content collections for some tests
|
||||
site: site ? new URL(site) : void 0,
|
||||
generator: `Astro v${ASTRO_VERSION}`,
|
||||
glob: createAstroGlobFn()
|
||||
};
|
||||
}
|
||||
export {
|
||||
createAstro
|
||||
};
|
1
node_modules/astro/dist/runtime/server/astro-island.d.ts
generated
vendored
Normal file
1
node_modules/astro/dist/runtime/server/astro-island.d.ts
generated
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export {};
|
156
node_modules/astro/dist/runtime/server/astro-island.js
generated
vendored
Normal file
156
node_modules/astro/dist/runtime/server/astro-island.js
generated
vendored
Normal file
@@ -0,0 +1,156 @@
|
||||
{
|
||||
const propTypes = {
|
||||
0: (value) => reviveObject(value),
|
||||
1: (value) => reviveArray(value),
|
||||
2: (value) => new RegExp(value),
|
||||
3: (value) => new Date(value),
|
||||
4: (value) => new Map(reviveArray(value)),
|
||||
5: (value) => new Set(reviveArray(value)),
|
||||
6: (value) => BigInt(value),
|
||||
7: (value) => new URL(value),
|
||||
8: (value) => new Uint8Array(value),
|
||||
9: (value) => new Uint16Array(value),
|
||||
10: (value) => new Uint32Array(value),
|
||||
11: (value) => Infinity * value
|
||||
};
|
||||
const reviveTuple = (raw) => {
|
||||
const [type, value] = raw;
|
||||
return type in propTypes ? propTypes[type](value) : void 0;
|
||||
};
|
||||
const reviveArray = (raw) => raw.map(reviveTuple);
|
||||
const reviveObject = (raw) => {
|
||||
if (typeof raw !== "object" || raw === null) return raw;
|
||||
return Object.fromEntries(Object.entries(raw).map(([key, value]) => [key, reviveTuple(value)]));
|
||||
};
|
||||
class AstroIsland extends HTMLElement {
|
||||
Component;
|
||||
hydrator;
|
||||
static observedAttributes = ["props"];
|
||||
disconnectedCallback() {
|
||||
document.removeEventListener("astro:after-swap", this.unmount);
|
||||
document.addEventListener("astro:after-swap", this.unmount, { once: true });
|
||||
}
|
||||
connectedCallback() {
|
||||
if (!this.hasAttribute("await-children") || document.readyState === "interactive" || document.readyState === "complete") {
|
||||
this.childrenConnectedCallback();
|
||||
} else {
|
||||
const onConnected = () => {
|
||||
document.removeEventListener("DOMContentLoaded", onConnected);
|
||||
mo.disconnect();
|
||||
this.childrenConnectedCallback();
|
||||
};
|
||||
const mo = new MutationObserver(() => {
|
||||
if (this.lastChild?.nodeType === Node.COMMENT_NODE && this.lastChild.nodeValue === "astro:end") {
|
||||
this.lastChild.remove();
|
||||
onConnected();
|
||||
}
|
||||
});
|
||||
mo.observe(this, { childList: true });
|
||||
document.addEventListener("DOMContentLoaded", onConnected);
|
||||
}
|
||||
}
|
||||
async childrenConnectedCallback() {
|
||||
let beforeHydrationUrl = this.getAttribute("before-hydration-url");
|
||||
if (beforeHydrationUrl) {
|
||||
await import(beforeHydrationUrl);
|
||||
}
|
||||
this.start();
|
||||
}
|
||||
async start() {
|
||||
const opts = JSON.parse(this.getAttribute("opts"));
|
||||
const directive = this.getAttribute("client");
|
||||
if (Astro[directive] === void 0) {
|
||||
window.addEventListener(`astro:${directive}`, () => this.start(), { once: true });
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await Astro[directive](
|
||||
async () => {
|
||||
const rendererUrl = this.getAttribute("renderer-url");
|
||||
const [componentModule, { default: hydrator }] = await Promise.all([
|
||||
import(this.getAttribute("component-url")),
|
||||
rendererUrl ? import(rendererUrl) : () => () => {
|
||||
}
|
||||
]);
|
||||
const componentExport = this.getAttribute("component-export") || "default";
|
||||
if (!componentExport.includes(".")) {
|
||||
this.Component = componentModule[componentExport];
|
||||
} else {
|
||||
this.Component = componentModule;
|
||||
for (const part of componentExport.split(".")) {
|
||||
this.Component = this.Component[part];
|
||||
}
|
||||
}
|
||||
this.hydrator = hydrator;
|
||||
return this.hydrate;
|
||||
},
|
||||
opts,
|
||||
this
|
||||
);
|
||||
} catch (e) {
|
||||
console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`, e);
|
||||
}
|
||||
}
|
||||
hydrate = async () => {
|
||||
if (!this.hydrator) return;
|
||||
if (!this.isConnected) return;
|
||||
const parentSsrIsland = this.parentElement?.closest("astro-island[ssr]");
|
||||
if (parentSsrIsland) {
|
||||
parentSsrIsland.addEventListener("astro:hydrate", this.hydrate, { once: true });
|
||||
return;
|
||||
}
|
||||
const slotted = this.querySelectorAll("astro-slot");
|
||||
const slots = {};
|
||||
const templates = this.querySelectorAll("template[data-astro-template]");
|
||||
for (const template of templates) {
|
||||
const closest = template.closest(this.tagName);
|
||||
if (!closest?.isSameNode(this)) continue;
|
||||
slots[template.getAttribute("data-astro-template") || "default"] = template.innerHTML;
|
||||
template.remove();
|
||||
}
|
||||
for (const slot of slotted) {
|
||||
const closest = slot.closest(this.tagName);
|
||||
if (!closest?.isSameNode(this)) continue;
|
||||
slots[slot.getAttribute("name") || "default"] = slot.innerHTML;
|
||||
}
|
||||
let props;
|
||||
try {
|
||||
props = this.hasAttribute("props") ? reviveObject(JSON.parse(this.getAttribute("props"))) : {};
|
||||
} catch (e) {
|
||||
let componentName = this.getAttribute("component-url") || "<unknown>";
|
||||
const componentExport = this.getAttribute("component-export");
|
||||
if (componentExport) {
|
||||
componentName += ` (export ${componentExport})`;
|
||||
}
|
||||
console.error(
|
||||
`[hydrate] Error parsing props for component ${componentName}`,
|
||||
this.getAttribute("props"),
|
||||
e
|
||||
);
|
||||
throw e;
|
||||
}
|
||||
let hydrationTimeStart;
|
||||
const hydrator = this.hydrator(this);
|
||||
if (process.env.NODE_ENV === "development") hydrationTimeStart = performance.now();
|
||||
await hydrator(this.Component, props, slots, {
|
||||
client: this.getAttribute("client")
|
||||
});
|
||||
if (process.env.NODE_ENV === "development" && hydrationTimeStart)
|
||||
this.setAttribute(
|
||||
"client-render-time",
|
||||
(performance.now() - hydrationTimeStart).toString()
|
||||
);
|
||||
this.removeAttribute("ssr");
|
||||
this.dispatchEvent(new CustomEvent("astro:hydrate"));
|
||||
};
|
||||
attributeChangedCallback() {
|
||||
this.hydrate();
|
||||
}
|
||||
unmount = () => {
|
||||
if (!this.isConnected) this.dispatchEvent(new CustomEvent("astro:unmount"));
|
||||
};
|
||||
}
|
||||
if (!customElements.get("astro-island")) {
|
||||
customElements.define("astro-island", AstroIsland);
|
||||
}
|
||||
}
|
7
node_modules/astro/dist/runtime/server/astro-island.prebuilt-dev.d.ts
generated
vendored
Normal file
7
node_modules/astro/dist/runtime/server/astro-island.prebuilt-dev.d.ts
generated
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* This file is prebuilt from packages/astro/src/runtime/server/astro-island.ts
|
||||
* Do not edit this directly, but instead edit that file and rerun the prebuild
|
||||
* to generate this file.
|
||||
*/
|
||||
declare const _default: "(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var l=(i,o,a)=>g(i,typeof o!=\"symbol\"?o+\"\":o,a);{let i={0:t=>y(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[h,e]=t;return h in i?i[h](e):void 0},a=t=>t.map(o),y=t=>typeof t!=\"object\"||t===null?t:Object.fromEntries(Object.entries(t).map(([h,e])=>[h,o(e)]));class f extends HTMLElement{constructor(){super(...arguments);l(this,\"Component\");l(this,\"hydrator\");l(this,\"hydrate\",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest(\"astro-island[ssr]\");if(e){e.addEventListener(\"astro:hydrate\",this.hydrate,{once:!0});return}let c=this.querySelectorAll(\"astro-slot\"),n={},p=this.querySelectorAll(\"template[data-astro-template]\");for(let r of p){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute(\"data-astro-template\")||\"default\"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute(\"name\")||\"default\"]=r.innerHTML)}let u;try{u=this.hasAttribute(\"props\")?y(JSON.parse(this.getAttribute(\"props\"))):{}}catch(r){let s=this.getAttribute(\"component-url\")||\"<unknown>\",v=this.getAttribute(\"component-export\");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute(\"props\"),r),r}let d,m=this.hydrator(this);d=performance.now(),await m(this.Component,u,n,{client:this.getAttribute(\"client\")}),d&&this.setAttribute(\"client-render-time\",(performance.now()-d).toString()),this.removeAttribute(\"ssr\"),this.dispatchEvent(new CustomEvent(\"astro:hydrate\"))});l(this,\"unmount\",()=>{this.isConnected||this.dispatchEvent(new CustomEvent(\"astro:unmount\"))})}disconnectedCallback(){document.removeEventListener(\"astro:after-swap\",this.unmount),document.addEventListener(\"astro:after-swap\",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute(\"await-children\")||document.readyState===\"interactive\"||document.readyState===\"complete\")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener(\"DOMContentLoaded\",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue===\"astro:end\"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener(\"DOMContentLoaded\",e)}}async childrenConnectedCallback(){let e=this.getAttribute(\"before-hydration-url\");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute(\"opts\")),c=this.getAttribute(\"client\");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute(\"renderer-url\"),[p,{default:u}]=await Promise.all([import(this.getAttribute(\"component-url\")),n?import(n):()=>()=>{}]),d=this.getAttribute(\"component-export\")||\"default\";if(!d.includes(\".\"))this.Component=p[d];else{this.Component=p;for(let m of d.split(\".\"))this.Component=this.Component[m]}return this.hydrator=u,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute(\"component-url\")}`,n)}}attributeChangedCallback(){this.hydrate()}}l(f,\"observedAttributes\",[\"props\"]),customElements.get(\"astro-island\")||customElements.define(\"astro-island\",f)}})();";
|
||||
export default _default;
|
4
node_modules/astro/dist/runtime/server/astro-island.prebuilt-dev.js
generated
vendored
Normal file
4
node_modules/astro/dist/runtime/server/astro-island.prebuilt-dev.js
generated
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
var astro_island_prebuilt_dev_default = `(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var l=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>y(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[h,e]=t;return h in i?i[h](e):void 0},a=t=>t.map(o),y=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([h,e])=>[h,o(e)]));class f extends HTMLElement{constructor(){super(...arguments);l(this,"Component");l(this,"hydrator");l(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},p=this.querySelectorAll("template[data-astro-template]");for(let r of p){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let u;try{u=this.hasAttribute("props")?y(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=\` (export \${v})\`),console.error(\`[hydrate] Error parsing props for component \${s}\`,this.getAttribute("props"),r),r}let d,m=this.hydrator(this);d=performance.now(),await m(this.Component,u,n,{client:this.getAttribute("client")}),d&&this.setAttribute("client-render-time",(performance.now()-d).toString()),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});l(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(\`astro:\${c}\`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[p,{default:u}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),d=this.getAttribute("component-export")||"default";if(!d.includes("."))this.Component=p[d];else{this.Component=p;for(let m of d.split("."))this.Component=this.Component[m]}return this.hydrator=u,this.hydrate},e,this)}catch(n){console.error(\`[astro-island] Error hydrating \${this.getAttribute("component-url")}\`,n)}}attributeChangedCallback(){this.hydrate()}}l(f,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",f)}})();`;
|
||||
export {
|
||||
astro_island_prebuilt_dev_default as default
|
||||
};
|
7
node_modules/astro/dist/runtime/server/astro-island.prebuilt.d.ts
generated
vendored
Normal file
7
node_modules/astro/dist/runtime/server/astro-island.prebuilt.d.ts
generated
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* This file is prebuilt from packages/astro/src/runtime/server/astro-island.ts
|
||||
* Do not edit this directly, but instead edit that file and rerun the prebuild
|
||||
* to generate this file.
|
||||
*/
|
||||
declare const _default: "(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!=\"symbol\"?o+\"\":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!=\"object\"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,\"Component\");d(this,\"hydrator\");d(this,\"hydrate\",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest(\"astro-island[ssr]\");if(e){e.addEventListener(\"astro:hydrate\",this.hydrate,{once:!0});return}let c=this.querySelectorAll(\"astro-slot\"),n={},h=this.querySelectorAll(\"template[data-astro-template]\");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute(\"data-astro-template\")||\"default\"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute(\"name\")||\"default\"]=r.innerHTML)}let p;try{p=this.hasAttribute(\"props\")?m(JSON.parse(this.getAttribute(\"props\"))):{}}catch(r){let s=this.getAttribute(\"component-url\")||\"<unknown>\",v=this.getAttribute(\"component-export\");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute(\"props\"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute(\"client\")}),this.removeAttribute(\"ssr\"),this.dispatchEvent(new CustomEvent(\"astro:hydrate\"))});d(this,\"unmount\",()=>{this.isConnected||this.dispatchEvent(new CustomEvent(\"astro:unmount\"))})}disconnectedCallback(){document.removeEventListener(\"astro:after-swap\",this.unmount),document.addEventListener(\"astro:after-swap\",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute(\"await-children\")||document.readyState===\"interactive\"||document.readyState===\"complete\")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener(\"DOMContentLoaded\",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue===\"astro:end\"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener(\"DOMContentLoaded\",e)}}async childrenConnectedCallback(){let e=this.getAttribute(\"before-hydration-url\");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute(\"opts\")),c=this.getAttribute(\"client\");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute(\"renderer-url\"),[h,{default:p}]=await Promise.all([import(this.getAttribute(\"component-url\")),n?import(n):()=>()=>{}]),u=this.getAttribute(\"component-export\")||\"default\";if(!u.includes(\".\"))this.Component=h[u];else{this.Component=h;for(let f of u.split(\".\"))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute(\"component-url\")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,\"observedAttributes\",[\"props\"]),customElements.get(\"astro-island\")||customElements.define(\"astro-island\",y)}})();";
|
||||
export default _default;
|
4
node_modules/astro/dist/runtime/server/astro-island.prebuilt.js
generated
vendored
Normal file
4
node_modules/astro/dist/runtime/server/astro-island.prebuilt.js
generated
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
var astro_island_prebuilt_default = `(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=\` (export \${v})\`),console.error(\`[hydrate] Error parsing props for component \${s}\`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(\`astro:\${c}\`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(\`[astro-island] Error hydrating \${this.getAttribute("component-url")}\`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();`;
|
||||
export {
|
||||
astro_island_prebuilt_default as default
|
||||
};
|
4
node_modules/astro/dist/runtime/server/endpoint.d.ts
generated
vendored
Normal file
4
node_modules/astro/dist/runtime/server/endpoint.d.ts
generated
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
import type { APIContext, EndpointHandler } from '../../@types/astro.js';
|
||||
import type { Logger } from '../../core/logger/core.js';
|
||||
/** Renders an endpoint request to completion, returning the body. */
|
||||
export declare function renderEndpoint(mod: EndpointHandler, context: APIContext, ssr: boolean, logger: Logger): Promise<Response>;
|
54
node_modules/astro/dist/runtime/server/endpoint.js
generated
vendored
Normal file
54
node_modules/astro/dist/runtime/server/endpoint.js
generated
vendored
Normal file
@@ -0,0 +1,54 @@
|
||||
import { bold } from "kleur/colors";
|
||||
import { REROUTABLE_STATUS_CODES, REROUTE_DIRECTIVE_HEADER } from "../../core/constants.js";
|
||||
import { EndpointDidNotReturnAResponse } from "../../core/errors/errors-data.js";
|
||||
import { AstroError } from "../../core/errors/errors.js";
|
||||
async function renderEndpoint(mod, context, ssr, logger) {
|
||||
const { request, url } = context;
|
||||
const method = request.method.toUpperCase();
|
||||
const handler = mod[method] ?? mod["ALL"];
|
||||
if (!ssr && ssr === false && method !== "GET") {
|
||||
logger.warn(
|
||||
"router",
|
||||
`${url.pathname} ${bold(
|
||||
method
|
||||
)} requests are not available for a static site. Update your config to \`output: 'server'\` or \`output: 'hybrid'\` to enable.`
|
||||
);
|
||||
}
|
||||
if (handler === void 0) {
|
||||
logger.warn(
|
||||
"router",
|
||||
`No API Route handler exists for the method "${method}" for the route "${url.pathname}".
|
||||
Found handlers: ${Object.keys(mod).map((exp) => JSON.stringify(exp)).join(", ")}
|
||||
` + ("all" in mod ? `One of the exported handlers is "all" (lowercase), did you mean to export 'ALL'?
|
||||
` : "")
|
||||
);
|
||||
return new Response(null, { status: 404 });
|
||||
}
|
||||
if (typeof handler !== "function") {
|
||||
logger.error(
|
||||
"router",
|
||||
`The route "${url.pathname}" exports a value for the method "${method}", but it is of the type ${typeof handler} instead of a function.`
|
||||
);
|
||||
return new Response(null, { status: 500 });
|
||||
}
|
||||
let response = await handler.call(mod, context);
|
||||
if (!response || response instanceof Response === false) {
|
||||
throw new AstroError(EndpointDidNotReturnAResponse);
|
||||
}
|
||||
if (REROUTABLE_STATUS_CODES.includes(response.status)) {
|
||||
try {
|
||||
response.headers.set(REROUTE_DIRECTIVE_HEADER, "no");
|
||||
} catch (err) {
|
||||
if (err.message?.includes("immutable")) {
|
||||
response = new Response(response.body, response);
|
||||
response.headers.set(REROUTE_DIRECTIVE_HEADER, "no");
|
||||
} else {
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
}
|
||||
return response;
|
||||
}
|
||||
export {
|
||||
renderEndpoint
|
||||
};
|
22
node_modules/astro/dist/runtime/server/escape.d.ts
generated
vendored
Normal file
22
node_modules/astro/dist/runtime/server/escape.d.ts
generated
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
import { escape } from 'html-escaper';
|
||||
export declare const escapeHTML: typeof escape;
|
||||
export declare class HTMLBytes extends Uint8Array {
|
||||
}
|
||||
/**
|
||||
* A "blessed" extension of String that tells Astro that the string
|
||||
* has already been escaped. This helps prevent double-escaping of HTML.
|
||||
*/
|
||||
export declare class HTMLString extends String {
|
||||
get [Symbol.toStringTag](): string;
|
||||
}
|
||||
type BlessedType = string | HTMLBytes;
|
||||
/**
|
||||
* markHTMLString marks a string as raw or "already escaped" by returning
|
||||
* a `HTMLString` instance. This is meant for internal use, and should not
|
||||
* be returned through any public JS API.
|
||||
*/
|
||||
export declare const markHTMLString: (value: any) => any;
|
||||
export declare function isHTMLString(value: any): value is HTMLString;
|
||||
export declare function isHTMLBytes(value: any): value is HTMLBytes;
|
||||
export declare function unescapeHTML(str: any): BlessedType | Promise<BlessedType | AsyncGenerator<BlessedType, void, unknown>> | AsyncGenerator<BlessedType, void, unknown>;
|
||||
export {};
|
82
node_modules/astro/dist/runtime/server/escape.js
generated
vendored
Normal file
82
node_modules/astro/dist/runtime/server/escape.js
generated
vendored
Normal file
@@ -0,0 +1,82 @@
|
||||
import { escape } from "html-escaper";
|
||||
import { streamAsyncIterator } from "./util.js";
|
||||
const escapeHTML = escape;
|
||||
class HTMLBytes extends Uint8Array {
|
||||
}
|
||||
Object.defineProperty(HTMLBytes.prototype, Symbol.toStringTag, {
|
||||
get() {
|
||||
return "HTMLBytes";
|
||||
}
|
||||
});
|
||||
class HTMLString extends String {
|
||||
get [Symbol.toStringTag]() {
|
||||
return "HTMLString";
|
||||
}
|
||||
}
|
||||
const markHTMLString = (value) => {
|
||||
if (value instanceof HTMLString) {
|
||||
return value;
|
||||
}
|
||||
if (typeof value === "string") {
|
||||
return new HTMLString(value);
|
||||
}
|
||||
return value;
|
||||
};
|
||||
function isHTMLString(value) {
|
||||
return Object.prototype.toString.call(value) === "[object HTMLString]";
|
||||
}
|
||||
function markHTMLBytes(bytes) {
|
||||
return new HTMLBytes(bytes);
|
||||
}
|
||||
function isHTMLBytes(value) {
|
||||
return Object.prototype.toString.call(value) === "[object HTMLBytes]";
|
||||
}
|
||||
function hasGetReader(obj) {
|
||||
return typeof obj.getReader === "function";
|
||||
}
|
||||
async function* unescapeChunksAsync(iterable) {
|
||||
if (hasGetReader(iterable)) {
|
||||
for await (const chunk of streamAsyncIterator(iterable)) {
|
||||
yield unescapeHTML(chunk);
|
||||
}
|
||||
} else {
|
||||
for await (const chunk of iterable) {
|
||||
yield unescapeHTML(chunk);
|
||||
}
|
||||
}
|
||||
}
|
||||
function* unescapeChunks(iterable) {
|
||||
for (const chunk of iterable) {
|
||||
yield unescapeHTML(chunk);
|
||||
}
|
||||
}
|
||||
function unescapeHTML(str) {
|
||||
if (!!str && typeof str === "object") {
|
||||
if (str instanceof Uint8Array) {
|
||||
return markHTMLBytes(str);
|
||||
} else if (str instanceof Response && str.body) {
|
||||
const body = str.body;
|
||||
return unescapeChunksAsync(body);
|
||||
} else if (typeof str.then === "function") {
|
||||
return Promise.resolve(str).then((value) => {
|
||||
return unescapeHTML(value);
|
||||
});
|
||||
} else if (str[Symbol.for("astro:slot-string")]) {
|
||||
return str;
|
||||
} else if (Symbol.iterator in str) {
|
||||
return unescapeChunks(str);
|
||||
} else if (Symbol.asyncIterator in str || hasGetReader(str)) {
|
||||
return unescapeChunksAsync(str);
|
||||
}
|
||||
}
|
||||
return markHTMLString(str);
|
||||
}
|
||||
export {
|
||||
HTMLBytes,
|
||||
HTMLString,
|
||||
escapeHTML,
|
||||
isHTMLBytes,
|
||||
isHTMLString,
|
||||
markHTMLString,
|
||||
unescapeHTML
|
||||
};
|
27
node_modules/astro/dist/runtime/server/hydration.d.ts
generated
vendored
Normal file
27
node_modules/astro/dist/runtime/server/hydration.d.ts
generated
vendored
Normal file
@@ -0,0 +1,27 @@
|
||||
import type { AstroComponentMetadata, SSRElement, SSRLoadedRenderer, SSRResult } from '../../@types/astro.js';
|
||||
export interface HydrationMetadata {
|
||||
directive: string;
|
||||
value: string;
|
||||
componentUrl: string;
|
||||
componentExport: {
|
||||
value: string;
|
||||
};
|
||||
}
|
||||
type Props = Record<string | number | symbol, any>;
|
||||
interface ExtractedProps {
|
||||
isPage: boolean;
|
||||
hydration: HydrationMetadata | null;
|
||||
props: Props;
|
||||
propsWithoutTransitionAttributes: Props;
|
||||
}
|
||||
export declare function extractDirectives(inputProps: Props, clientDirectives: SSRResult['clientDirectives']): ExtractedProps;
|
||||
interface HydrateScriptOptions {
|
||||
renderer: SSRLoadedRenderer;
|
||||
result: SSRResult;
|
||||
astroId: string;
|
||||
props: Record<string | number, any>;
|
||||
attrs: Record<string, string> | undefined;
|
||||
}
|
||||
/** For hydrated components, generate a <script type="module"> to load the component */
|
||||
export declare function generateHydrateScript(scriptOptions: HydrateScriptOptions, metadata: Required<AstroComponentMetadata>): Promise<SSRElement>;
|
||||
export {};
|
123
node_modules/astro/dist/runtime/server/hydration.js
generated
vendored
Normal file
123
node_modules/astro/dist/runtime/server/hydration.js
generated
vendored
Normal file
@@ -0,0 +1,123 @@
|
||||
import { AstroError, AstroErrorData } from "../../core/errors/index.js";
|
||||
import { escapeHTML } from "./escape.js";
|
||||
import { serializeProps } from "./serialize.js";
|
||||
const transitionDirectivesToCopyOnIsland = Object.freeze([
|
||||
"data-astro-transition-scope",
|
||||
"data-astro-transition-persist",
|
||||
"data-astro-transition-persist-props"
|
||||
]);
|
||||
function extractDirectives(inputProps, clientDirectives) {
|
||||
let extracted = {
|
||||
isPage: false,
|
||||
hydration: null,
|
||||
props: {},
|
||||
propsWithoutTransitionAttributes: {}
|
||||
};
|
||||
for (const [key, value] of Object.entries(inputProps)) {
|
||||
if (key.startsWith("server:")) {
|
||||
if (key === "server:root") {
|
||||
extracted.isPage = true;
|
||||
}
|
||||
}
|
||||
if (key.startsWith("client:")) {
|
||||
if (!extracted.hydration) {
|
||||
extracted.hydration = {
|
||||
directive: "",
|
||||
value: "",
|
||||
componentUrl: "",
|
||||
componentExport: { value: "" }
|
||||
};
|
||||
}
|
||||
switch (key) {
|
||||
case "client:component-path": {
|
||||
extracted.hydration.componentUrl = value;
|
||||
break;
|
||||
}
|
||||
case "client:component-export": {
|
||||
extracted.hydration.componentExport.value = value;
|
||||
break;
|
||||
}
|
||||
case "client:component-hydration": {
|
||||
break;
|
||||
}
|
||||
case "client:display-name": {
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
extracted.hydration.directive = key.split(":")[1];
|
||||
extracted.hydration.value = value;
|
||||
if (!clientDirectives.has(extracted.hydration.directive)) {
|
||||
const hydrationMethods = Array.from(clientDirectives.keys()).map((d) => `client:${d}`).join(", ");
|
||||
throw new Error(
|
||||
`Error: invalid hydration directive "${key}". Supported hydration methods: ${hydrationMethods}`
|
||||
);
|
||||
}
|
||||
if (extracted.hydration.directive === "media" && typeof extracted.hydration.value !== "string") {
|
||||
throw new AstroError(AstroErrorData.MissingMediaQueryDirective);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
extracted.props[key] = value;
|
||||
if (!transitionDirectivesToCopyOnIsland.includes(key)) {
|
||||
extracted.propsWithoutTransitionAttributes[key] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
for (const sym of Object.getOwnPropertySymbols(inputProps)) {
|
||||
extracted.props[sym] = inputProps[sym];
|
||||
extracted.propsWithoutTransitionAttributes[sym] = inputProps[sym];
|
||||
}
|
||||
return extracted;
|
||||
}
|
||||
async function generateHydrateScript(scriptOptions, metadata) {
|
||||
const { renderer, result, astroId, props, attrs } = scriptOptions;
|
||||
const { hydrate, componentUrl, componentExport } = metadata;
|
||||
if (!componentExport.value) {
|
||||
throw new AstroError({
|
||||
...AstroErrorData.NoMatchingImport,
|
||||
message: AstroErrorData.NoMatchingImport.message(metadata.displayName)
|
||||
});
|
||||
}
|
||||
const island = {
|
||||
children: "",
|
||||
props: {
|
||||
// This is for HMR, probably can avoid it in prod
|
||||
uid: astroId
|
||||
}
|
||||
};
|
||||
if (attrs) {
|
||||
for (const [key, value] of Object.entries(attrs)) {
|
||||
island.props[key] = escapeHTML(value);
|
||||
}
|
||||
}
|
||||
island.props["component-url"] = await result.resolve(decodeURI(componentUrl));
|
||||
if (renderer.clientEntrypoint) {
|
||||
island.props["component-export"] = componentExport.value;
|
||||
island.props["renderer-url"] = await result.resolve(decodeURI(renderer.clientEntrypoint));
|
||||
island.props["props"] = escapeHTML(serializeProps(props, metadata));
|
||||
}
|
||||
island.props["ssr"] = "";
|
||||
island.props["client"] = hydrate;
|
||||
let beforeHydrationUrl = await result.resolve("astro:scripts/before-hydration.js");
|
||||
if (beforeHydrationUrl.length) {
|
||||
island.props["before-hydration-url"] = beforeHydrationUrl;
|
||||
}
|
||||
island.props["opts"] = escapeHTML(
|
||||
JSON.stringify({
|
||||
name: metadata.displayName,
|
||||
value: metadata.hydrateArgs || ""
|
||||
})
|
||||
);
|
||||
transitionDirectivesToCopyOnIsland.forEach((name) => {
|
||||
if (typeof props[name] !== "undefined") {
|
||||
island.props[name] = props[name];
|
||||
}
|
||||
});
|
||||
return island;
|
||||
}
|
||||
export {
|
||||
extractDirectives,
|
||||
generateHydrateScript
|
||||
};
|
13
node_modules/astro/dist/runtime/server/index.d.ts
generated
vendored
Normal file
13
node_modules/astro/dist/runtime/server/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
export { createComponent } from './astro-component.js';
|
||||
export { createAstro } from './astro-global.js';
|
||||
export { renderEndpoint } from './endpoint.js';
|
||||
export { escapeHTML, HTMLBytes, HTMLString, isHTMLString, markHTMLString, unescapeHTML, } from './escape.js';
|
||||
export { renderJSX } from './jsx.js';
|
||||
export { addAttribute, createHeadAndContent, defineScriptVars, Fragment, maybeRenderHead, renderTemplate as render, renderComponent, Renderer as Renderer, renderHead, renderHTMLElement, renderPage, renderScript, renderScriptElement, renderSlot, renderSlotToString, renderTemplate, renderToString, renderUniqueStylesheet, voidElementNames, } from './render/index.js';
|
||||
export type { AstroComponentFactory, AstroComponentInstance, ComponentSlots, RenderInstruction, } from './render/index.js';
|
||||
export { createTransitionScope, renderTransition } from './transition.js';
|
||||
export declare function mergeSlots(...slotted: unknown[]): Record<string, () => any>;
|
||||
export declare function spreadAttributes(values?: Record<any, any>, _name?: string, { class: scopedClassName }?: {
|
||||
class?: string;
|
||||
}): any;
|
||||
export declare function defineStyleVars(defs: Record<any, any> | Record<any, any>[]): any;
|
122
node_modules/astro/dist/runtime/server/index.js
generated
vendored
Normal file
122
node_modules/astro/dist/runtime/server/index.js
generated
vendored
Normal file
@@ -0,0 +1,122 @@
|
||||
import { createComponent } from "./astro-component.js";
|
||||
import { createAstro } from "./astro-global.js";
|
||||
import { renderEndpoint } from "./endpoint.js";
|
||||
import {
|
||||
escapeHTML,
|
||||
HTMLBytes,
|
||||
HTMLString,
|
||||
isHTMLString,
|
||||
markHTMLString,
|
||||
unescapeHTML
|
||||
} from "./escape.js";
|
||||
import { renderJSX } from "./jsx.js";
|
||||
import {
|
||||
addAttribute,
|
||||
createHeadAndContent,
|
||||
defineScriptVars,
|
||||
Fragment,
|
||||
maybeRenderHead,
|
||||
renderTemplate,
|
||||
renderComponent,
|
||||
Renderer,
|
||||
renderHead,
|
||||
renderHTMLElement,
|
||||
renderPage,
|
||||
renderScript,
|
||||
renderScriptElement,
|
||||
renderSlot,
|
||||
renderSlotToString,
|
||||
renderTemplate as renderTemplate2,
|
||||
renderToString,
|
||||
renderUniqueStylesheet,
|
||||
voidElementNames
|
||||
} from "./render/index.js";
|
||||
import { createTransitionScope, renderTransition } from "./transition.js";
|
||||
import { markHTMLString as markHTMLString2 } from "./escape.js";
|
||||
import { Renderer as Renderer2, addAttribute as addAttribute2 } from "./render/index.js";
|
||||
function mergeSlots(...slotted) {
|
||||
const slots = {};
|
||||
for (const slot of slotted) {
|
||||
if (!slot) continue;
|
||||
if (typeof slot === "object") {
|
||||
Object.assign(slots, slot);
|
||||
} else if (typeof slot === "function") {
|
||||
Object.assign(slots, mergeSlots(slot()));
|
||||
}
|
||||
}
|
||||
return slots;
|
||||
}
|
||||
function __astro_tag_component__(Component, rendererName) {
|
||||
if (!Component) return;
|
||||
if (typeof Component !== "function") return;
|
||||
Object.defineProperty(Component, Renderer2, {
|
||||
value: rendererName,
|
||||
enumerable: false,
|
||||
writable: false
|
||||
});
|
||||
}
|
||||
function spreadAttributes(values = {}, _name, { class: scopedClassName } = {}) {
|
||||
let output = "";
|
||||
if (scopedClassName) {
|
||||
if (typeof values.class !== "undefined") {
|
||||
values.class += ` ${scopedClassName}`;
|
||||
} else if (typeof values["class:list"] !== "undefined") {
|
||||
values["class:list"] = [values["class:list"], scopedClassName];
|
||||
} else {
|
||||
values.class = scopedClassName;
|
||||
}
|
||||
}
|
||||
for (const [key, value] of Object.entries(values)) {
|
||||
output += addAttribute2(value, key, true);
|
||||
}
|
||||
return markHTMLString2(output);
|
||||
}
|
||||
function defineStyleVars(defs) {
|
||||
let output = "";
|
||||
let arr = !Array.isArray(defs) ? [defs] : defs;
|
||||
for (const vars of arr) {
|
||||
for (const [key, value] of Object.entries(vars)) {
|
||||
if (value || value === 0) {
|
||||
output += `--${key}: ${value};`;
|
||||
}
|
||||
}
|
||||
}
|
||||
return markHTMLString2(output);
|
||||
}
|
||||
export {
|
||||
Fragment,
|
||||
HTMLBytes,
|
||||
HTMLString,
|
||||
Renderer,
|
||||
__astro_tag_component__,
|
||||
addAttribute,
|
||||
createAstro,
|
||||
createComponent,
|
||||
createHeadAndContent,
|
||||
createTransitionScope,
|
||||
defineScriptVars,
|
||||
defineStyleVars,
|
||||
escapeHTML,
|
||||
isHTMLString,
|
||||
markHTMLString,
|
||||
maybeRenderHead,
|
||||
mergeSlots,
|
||||
renderTemplate as render,
|
||||
renderComponent,
|
||||
renderEndpoint,
|
||||
renderHTMLElement,
|
||||
renderHead,
|
||||
renderJSX,
|
||||
renderPage,
|
||||
renderScript,
|
||||
renderScriptElement,
|
||||
renderSlot,
|
||||
renderSlotToString,
|
||||
renderTemplate2 as renderTemplate,
|
||||
renderToString,
|
||||
renderTransition,
|
||||
renderUniqueStylesheet,
|
||||
spreadAttributes,
|
||||
unescapeHTML,
|
||||
voidElementNames
|
||||
};
|
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user