@altano/astro-opengraph 0.1.0-alpha.3 → 0.1.0-alpha.4

package/components/meta.astro

@@ -1,5 +1,5 @@
 ---
-import { getResolvedConfig } from "../src/config";
+import { getResolvedConfig } from "@altano/astro-opengraph/config";
 
 export type Props = {
   /**

package/dist/chunk-DX3VCTOX.js

@@ -0,0 +1,49 @@
+// src/config.ts
+import { readFile } from "node:fs/promises";
+async function deserializeVirtualConfig(configMaybeMocked) {
+  const config = typeof configMaybeMocked === "function" ? configMaybeMocked() : configMaybeMocked;
+  const fontsWithBuffers = await Promise.all(
+    config.imageOptions.fonts.map(async (font) => {
+      const data = await readFile(font.path);
+      return {
+        ...font,
+        data
+      };
+    })
+  );
+  return {
+    ...config,
+    imageOptions: {
+      ...config.imageOptions,
+      fonts: fontsWithBuffers
+    }
+  };
+}
+var imageOptionDefaults = {
+  width: 1200,
+  height: 630
+};
+var metaTagDefaults = {
+  "og:image": `/opengraph.png`
+};
+async function getResolvedConfig() {
+  const module = await import("virtual:astro-opengraph/user-config");
+  const lazyConfig = module.default;
+  const deserialized = await deserializeVirtualConfig(lazyConfig);
+  return {
+    ...deserialized,
+    imageOptions: {
+      ...imageOptionDefaults,
+      ...deserialized.imageOptions
+    },
+    componentMetaTagFallbacks: {
+      ...deserialized.componentMetaTagFallbacks,
+      ...metaTagDefaults
+    }
+  };
+}
+
+export {
+  deserializeVirtualConfig,
+  getResolvedConfig
+};

package/dist/config.js

@@ -0,0 +1,8 @@
+import {
+  deserializeVirtualConfig,
+  getResolvedConfig
+} from "./chunk-DX3VCTOX.js";
+export {
+  deserializeVirtualConfig,
+  getResolvedConfig
+};

package/dist/endpoint.js

@@ -1,52 +1,11 @@
+import {
+  getResolvedConfig
+} from "./chunk-DX3VCTOX.js";
+
 // src/endpoint.ts
 import { experimental_AstroContainer } from "astro/container";
 import { isAstroComponentFactory } from "astro/runtime/server/render/astro/factory.js";
 
-// src/config.ts
-import { readFile } from "node:fs/promises";
-async function deserializeVirtualConfig(configMaybeMocked) {
-  const config = typeof configMaybeMocked === "function" ? configMaybeMocked() : configMaybeMocked;
-  const fontsWithBuffers = await Promise.all(
-    config.imageOptions.fonts.map(async (font) => {
-      const data = await readFile(font.path);
-      return {
-        ...font,
-        data
-      };
-    })
-  );
-  return {
-    ...config,
-    imageOptions: {
-      ...config.imageOptions,
-      fonts: fontsWithBuffers
-    }
-  };
-}
-var imageOptionDefaults = {
-  width: 1200,
-  height: 630
-};
-var metaTagDefaults = {
-  "og:image": `/opengraph.png`
-};
-async function getResolvedConfig() {
-  const module = await import("virtual:astro-opengraph/user-config");
-  const lazyConfig = module.default;
-  const deserialized = await deserializeVirtualConfig(lazyConfig);
-  return {
-    ...deserialized,
-    imageOptions: {
-      ...imageOptionDefaults,
-      ...deserialized.imageOptions
-    },
-    componentMetaTagFallbacks: {
-      ...deserialized.componentMetaTagFallbacks,
-      ...metaTagDefaults
-    }
-  };
-}
-
 // src/image.ts
 import { getConfiguredImageService, imageConfig } from "astro:assets";
 import satori from "satori";

package/dist/toolbar/components/CopyImageUrlButton.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
-export declare function CopyImageUrlButton(): React.JSX.Element;
+import type Preact from "preact";
+export declare function CopyImageUrlButton(): Preact.JSX.Element;
 //# sourceMappingURL=CopyImageUrlButton.d.ts.map

package/dist/toolbar/components/Error.d.ts

@@ -0,0 +1,7 @@
+import type { Icon } from "astro/runtime/client/dev-toolbar/ui-library/icons.js";
+import type Preact from "preact";
+export declare function Error({ message, icon, }: {
+    message: string;
+    icon: Icon;
+}): Preact.JSX.Element;
+//# sourceMappingURL=Error.d.ts.map

package/dist/toolbar/components/ExternalLinkicon.d.ts

@@ -1,7 +1,7 @@
-import type React from "react";
+import type Preact from "preact";
 export declare function ExternalLinkicon({ width, height, fill, }: {
     width?: number;
     height?: number;
     fill?: string;
-}): React.JSX.Element;
+}): Preact.JSX.Element;
 //# sourceMappingURL=ExternalLinkicon.d.ts.map

package/dist/toolbar/components/Image.d.ts

@@ -1,5 +1,6 @@
-import React from "react";
-export declare function Image({ imageSize }: {
+import type Preact from "preact";
+export declare function Image({ imageSize, handleLoadError, }: {
     imageSize: number;
-}): React.JSX.Element;
+    handleLoadError: () => void;
+}): Preact.JSX.Element;
 //# sourceMappingURL=Image.d.ts.map

package/dist/toolbar/components/ImageSection.d.ts

@@ -1,4 +1,6 @@
-export declare function ImageSection({ isHovered, }: {
+import type Preact from "preact";
+export declare function ImageSection({ isHovered, handleLoadError, }: {
     isHovered: boolean;
-}): React.JSX.Element;
+    handleLoadError: () => void;
+}): Preact.JSX.Element;
 //# sourceMappingURL=ImageSection.d.ts.map

package/dist/toolbar/components/ImageZoomToolbar.d.ts

@@ -1,7 +1,7 @@
-import type React from "react";
+import type Preact from "preact";
 export declare function ImageZoomToolbar({ isHovered, imageSize, setImageSize, }: {
     isHovered: boolean;
     imageSize: number;
-    setImageSize: React.Dispatch<React.SetStateAction<number>>;
-}): React.JSX.Element;
+    setImageSize: (size: number) => void;
+}): Preact.JSX.Element;
 //# sourceMappingURL=ImageZoomToolbar.d.ts.map

package/dist/toolbar/components/LinkOrText.d.ts

@@ -1,5 +1,5 @@
-import type React from "react";
-type LinkOrTextType = React.JSX.Element | string | null;
+import type Preact from "preact";
+type LinkOrTextType = Preact.JSX.Element | string | null;
 export declare function LinkOrText({ maybeLinkText, }: {
     maybeLinkText: string | null;
 }): LinkOrTextType;

package/dist/toolbar/components/MetaTags.d.ts

@@ -1,3 +1,3 @@
-import type React from "react";
-export declare function MetaTags(): React.JSX.Element;
+import type Preact from "preact";
+export declare function MetaTags(): Preact.JSX.Element;
 //# sourceMappingURL=MetaTags.d.ts.map

package/dist/toolbar/components/Summary.d.ts

@@ -1,5 +1,5 @@
-import type React from "react";
-export declare function Summary({ children }: {
+import type Preact from "preact";
+export declare function Summary({ children, }: {
     children: string;
-}): React.JSX.Element;
+}): Preact.JSX.Element;
 //# sourceMappingURL=Summary.d.ts.map

package/dist/toolbar/components/ToolbarApp.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
-export declare function ToolbarApp(): React.JSX.Element;
+import type Preact from "preact";
+export declare function ToolbarApp(): Preact.JSX.Element;
 //# sourceMappingURL=ToolbarApp.d.ts.map

package/dist/toolbar/components/ToolbarAppWindow.d.ts

@@ -1,3 +1,3 @@
-import type React from "react";
-export declare function ToolbarAppWindow(): React.JSX.Element;
+import type Preact from "preact";
+export declare function ToolbarAppWindow(): Preact.JSX.Element;
 //# sourceMappingURL=ToolbarAppWindow.d.ts.map

package/dist/toolbar/components/ToolbarSection.d.ts

@@ -1,6 +1,7 @@
-import type React from "react";
+import type { ComponentChildren } from "preact";
+import type Preact from "preact";
 export declare function ToolbarSection({ icon, children, }: {
-    icon: React.ReactNode;
-    children: React.ReactNode;
-}): React.JSX.Element;
+    icon: Preact.JSX.Element;
+    children: ComponentChildren;
+}): Preact.JSX.Element;
 //# sourceMappingURL=ToolbarSection.d.ts.map

package/dist/toolbar/components/ZoomButton.d.ts

@@ -1,7 +1,7 @@
-import type React from "react";
+import type Preact from "preact";
 export declare function ZoomButton({ value, imageSize, setImageSize, }: {
     value: number;
     imageSize: number;
-    setImageSize: React.Dispatch<React.SetStateAction<number>>;
-}): React.JSX.Element;
+    setImageSize: (size: number) => void;
+}): Preact.JSX.Element;
 //# sourceMappingURL=ZoomButton.d.ts.map

package/dist/toolbar/components/getRelativeUrl.d.ts

@@ -0,0 +1,2 @@
+export declare function getRelativeUrl(absoluteUrl: string): string;
+//# sourceMappingURL=getRelativeUrl.d.ts.map

package/dist/toolbar/hooks/useHoverState.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
-export declare function useHoverState<TElement extends HTMLElement>(setHoverState: React.Dispatch<React.SetStateAction<boolean>>): React.RefObject<TElement | null>;
+import type Preact from "preact";
+export declare function useHoverState<TElement extends HTMLElement>(setHoverState: (isHover: boolean) => void): Preact.RefObject<TElement>;
 //# sourceMappingURL=useHoverState.d.ts.map

package/dist/toolbar/index.js

@@ -1,5 +1,5 @@
 // src/toolbar/index.tsx
-import { createRoot } from "react-dom/client";
+import { render } from "preact";
 import { defineToolbarApp } from "astro/toolbar";
 
 // src/toolbar/styles.tsx
@@ -38,11 +38,13 @@ var styles = (
 );
 
 // src/toolbar/components/ToolbarApp.tsx
-import { useState as useState4 } from "react";
+import { useState as useState4 } from "preact/hooks";
 
 // src/toolbar/components/Summary.tsx
-import { jsx } from "react/jsx-runtime";
-function Summary({ children }) {
+import { jsx } from "preact/jsx-runtime";
+function Summary({
+  children
+}) {
   return /* @__PURE__ */ jsx(
     "summary",
     {
@@ -57,7 +59,7 @@ function Summary({ children }) {
 }
 
 // src/toolbar/components/ExternalLinkicon.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "preact/jsx-runtime";
 function ExternalLinkicon({
   width = 27,
   height = 27,
@@ -94,7 +96,7 @@ function ExternalLinkicon({
 }
 
 // src/toolbar/components/LinkOrText.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "preact/jsx-runtime";
 function LinkOrText({
   maybeLinkText
 }) {
@@ -125,7 +127,7 @@ function useMetaTagInfo() {
 }
 
 // src/toolbar/components/MetaTags.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "preact/jsx-runtime";
 function MetaTags() {
   const tags = useMetaTagInfo();
   return /* @__PURE__ */ jsx4(
@@ -162,7 +164,7 @@ function MetaTagContent({ tag }) {
 }
 
 // src/toolbar/hooks/useHoverState.tsx
-import { useRef, useEffect } from "react";
+import { useRef, useEffect } from "preact/hooks";
 function useHoverState(setHoverState) {
   const ref = useRef(null);
   useEffect(() => {
@@ -180,7 +182,7 @@ function useHoverState(setHoverState) {
 }
 
 // src/toolbar/hooks/useImageURL.tsx
-import { useState } from "react";
+import { useState } from "preact/hooks";
 function useImageURL() {
   const imageUrl = useImageURLIfAvailable();
   if (imageUrl == null) {
@@ -199,12 +201,16 @@ function useImageURLIfAvailable() {
 }
 
 // src/toolbar/components/Image.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-function Image({ imageSize }) {
+import { jsx as jsx5 } from "preact/jsx-runtime";
+function Image({
+  imageSize,
+  handleLoadError
+}) {
   const imageUrl = useImageURL();
   return /* @__PURE__ */ jsx5("div", { className: "image", children: /* @__PURE__ */ jsx5("a", { href: imageUrl, target: "_blank", title: "Open image in new tab", children: /* @__PURE__ */ jsx5(
     "img",
     {
+      onError: handleLoadError,
       alt: "Open Graph",
       src: imageUrl,
       style: {
@@ -224,7 +230,7 @@ function ZoomLabel({ imageSize }) {
 }
 
 // src/toolbar/components/ZoomButton.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "preact/jsx-runtime";
 function ZoomButton({
   value,
   imageSize,
@@ -246,7 +252,7 @@ function ZoomButton({
 }
 
 // src/toolbar/components/ToolbarSection.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "preact/jsx-runtime";
 function ToolbarSection({
   icon,
   children
@@ -279,7 +285,7 @@ function ToolbarSection({
 }
 
 // src/toolbar/components/ImageZoomToolbar.tsx
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "preact/jsx-runtime";
 function ImageZoomToolbar({
   isHovered,
   imageSize,
@@ -329,12 +335,8 @@ function ImageZoomToolbar({
 }
 
 // src/toolbar/components/CopyImageUrlButton.tsx
-import React2, {
-  useState as useState2,
-  useRef as useRef2,
-  useEffect as useEffect2
-} from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useCallback } from "preact/hooks";
+import { jsx as jsx9 } from "preact/jsx-runtime";
 function CopyImageUrlButton() {
   const imageUrl = useImageURL();
   const [wasRecentlyClicked, setWasRecentlyClicked] = useState2(false);
@@ -347,7 +349,7 @@ function CopyImageUrlButton() {
       }, 3e3);
     }
   }, [wasRecentlyClicked]);
-  const handleClick = React2.useCallback(
+  const handleClick = useCallback(
     (evt) => {
       void navigator.clipboard.writeText(imageUrl);
       setWasRecentlyClicked(true);
@@ -368,14 +370,15 @@ function CopyImageUrlButton() {
 }
 
 // src/toolbar/components/ImageSection.tsx
-import { useState as useState3 } from "react";
-import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState as useState3 } from "preact/hooks";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs6 } from "preact/jsx-runtime";
 function ImageSection({
-  isHovered
+  isHovered,
+  handleLoadError
 }) {
   const [imageSize, setImageSize] = useState3(100);
   return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    /* @__PURE__ */ jsx10(Image, { imageSize }),
+    /* @__PURE__ */ jsx10(Image, { imageSize, handleLoadError }),
     /* @__PURE__ */ jsxs6(
       "div",
       {
@@ -402,58 +405,93 @@ function ImageSection({
   ] });
 }
 
+// src/toolbar/components/Error.tsx
+import { jsx as jsx11, jsxs as jsxs7 } from "preact/jsx-runtime";
+function Error2({
+  message,
+  icon
+}) {
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: 10,
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx11("astro-dev-toolbar-icon", { style: { width: 24, height: 24 }, icon }),
+        " ",
+        message
+      ]
+    }
+  );
+}
+
+// src/toolbar/components/getRelativeUrl.tsx
+function getRelativeUrl(absoluteUrl) {
+  const url = new URL(absoluteUrl);
+  return url.pathname;
+}
+
 // src/toolbar/components/ToolbarApp.tsx
-import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs8 } from "preact/jsx-runtime";
 function ToolbarApp() {
   const [isImageDetailsHovered, setIsImageDetailsHovered] = useState4(false);
   const imageDetailsRef = useHoverState(
     setIsImageDetailsHovered
   );
   const imageUrl = useImageURLIfAvailable();
+  const [imageLoadStatus, setImageLoadStatus] = useState4(
+    "pending"
+  );
   if (imageUrl == null) {
-    return /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx11(
-        "astro-dev-toolbar-icon",
+    return /* @__PURE__ */ jsx12(Error2, { icon: "warning", message: "No Open Graph image found on this page" });
+  } else if (imageLoadStatus === "error") {
+    return /* @__PURE__ */ jsx12(
+      Error2,
+      {
+        icon: "bug",
+        message: `Error loading image at ${getRelativeUrl(imageUrl)}`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
+    /* @__PURE__ */ jsxs8("details", { open: true, className: "image", ref: imageDetailsRef, children: [
+      /* @__PURE__ */ jsx12(Summary, { children: "Image" }),
+      /* @__PURE__ */ jsx12(
+        ImageSection,
         {
-          style: { width: 24, height: 24 },
-          icon: "warning"
+          isHovered: isImageDetailsHovered,
+          handleLoadError: () => setImageLoadStatus("error")
         }
-      ),
-      " ",
-      "No Open Graph image found on this page"
-    ] });
-  }
-  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
-    /* @__PURE__ */ jsxs7("details", { open: true, className: "image", ref: imageDetailsRef, children: [
-      /* @__PURE__ */ jsx11(Summary, { children: "Image" }),
-      /* @__PURE__ */ jsx11(ImageSection, { isHovered: isImageDetailsHovered })
+      )
     ] }),
-    /* @__PURE__ */ jsxs7("details", { children: [
-      /* @__PURE__ */ jsx11(Summary, { children: "Meta Tags" }),
-      /* @__PURE__ */ jsx11(MetaTags, {})
+    /* @__PURE__ */ jsxs8("details", { children: [
+      /* @__PURE__ */ jsx12(Summary, { children: "Meta Tags" }),
+      /* @__PURE__ */ jsx12(MetaTags, {})
     ] })
   ] });
 }
 
 // src/toolbar/components/ToolbarAppWindow.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9 } from "preact/jsx-runtime";
 function ToolbarAppWindow() {
-  return /* @__PURE__ */ jsxs8("astro-dev-toolbar-window", { children: [
-    /* @__PURE__ */ jsx12("style", { children: styles }),
-    /* @__PURE__ */ jsx12(ToolbarApp, {})
+  return /* @__PURE__ */ jsxs9("astro-dev-toolbar-window", { children: [
+    /* @__PURE__ */ jsx13("style", { children: styles }),
+    /* @__PURE__ */ jsx13(ToolbarApp, {})
   ] });
 }
 
 // src/toolbar/index.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "preact/jsx-runtime";
 var SESSION_KEY_OPEN = "@altano/astro-opengraph/toolbar:is-open";
 var toolbar_default = defineToolbarApp({
   init(canvas, app) {
-    const root = createRoot(canvas);
     app.onToggled((event) => {
       if (event.state) {
         sessionStorage.setItem(SESSION_KEY_OPEN, "true");
-        root.render(/* @__PURE__ */ jsx13(ToolbarAppWindow, {}));
+        render(/* @__PURE__ */ jsx14(ToolbarAppWindow, {}), canvas);
       } else {
         sessionStorage.removeItem(SESSION_KEY_OPEN);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altano/astro-opengraph",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.4",
   "description": "Open Graph Tools for Astro",
   "keywords": [
     "astro",
@@ -25,6 +25,7 @@
   "exports": {
     ".": "./dist/index.js",
     "./components/meta.astro": "./components/meta.astro",
+    "./config": "./dist/config.js",
     "./endpoint": "./dist/endpoint.js",
     "./toolbar": "./dist/toolbar/index.js"
   },
@@ -41,38 +42,37 @@
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",
+    "@astrojs/preact": "^4.0.8",
+    "@astrojs/svelte": "^7.0.9",
+    "@astrojs/vue": "^5.0.9",
     "@inox-tools/astro-tests": "0.5.1",
     "@playwright/test": "1.47.0",
     "@types/he": "^1.2.3",
     "@types/jest-image-snapshot": "^6.4.0",
     "@types/node": "^22.13.10",
-    "@types/react": "^19.0.12",
-    "@types/react-dom": "^19.0.4",
     "@vitest/coverage-v8": "^3.1.1",
     "astro": "^5.5.6",
     "depcheck": "^1.4.7",
     "jest-image-snapshot": "^6.4.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "preact": "^10.26.5",
     "sharp": "^0.33.1",
+    "svelte": "^5.25.12",
     "tsup": "^8.4.0",
     "typescript": "^5.8.2",
     "vite": "^6.2.5",
     "vitest": "^3.1.1",
+    "vue": "^3.5.13",
     "zx": "^8.5.2",
     "@altano/assets": "0.0.0",
-    "@altano/build-config": "0.0.0",
     "@altano/testing": "0.0.0",
+    "@altano/build-config": "0.0.0",
     "@altano/tsconfig": "0.0.0",
     "@altano/tiny-async-pool": "3.0.2",
     "@altano/vitest-plugins": "1.1.0"
   },
   "peerDependencies": {
-    "@types/react": ">=18",
-    "@types/react-dom": ">=18",
     "astro": "5.x.x",
-    "react": ">=18",
-    "react-dom": ">=18"
+    "preact": ">=10"
   },
   "publishConfig": {
     "access": "public"
@@ -91,7 +91,7 @@
     "lint:fix": "TIMING=1 eslint src/**/*.ts* --fix",
     "lint:timing": "TIMING=1 eslint src/**/*.ts*",
     "test:e2e": "playwright test",
-    "test:e2e:server": "astro --root tests/fixtures/ssg --port 3913 dev",
+    "test:e2e:server": "astro --root tests/fixtures/ui-frameworks --port 3913 dev",
     "test:e2e:ui": "playwright test --ui",
     "test:unit": "vitest --run",
     "test:unit:watch": "vitest"