@absolutejs/absolute 0.19.0-beta.623 → 0.19.0-beta.625

package/dist/vue/index.js

@@ -1501,12 +1501,12 @@ var CONVENTIONS_KEY = "__absoluteConventions", isConventionsMap = (value) => Boo
   });
   return { body, styles };
 }, renderVueError = async (conventionPath, errorProps) => {
-  const { createSSRApp, h: h3 } = await import("vue");
+  const { createSSRApp, h: h4 } = await import("vue");
   const { renderToString } = await import("vue/server-renderer");
   const mod = await import(conventionPath);
   const ErrorComponent = mod.default;
   const app = createSSRApp({
-    render: () => h3(ErrorComponent, errorProps)
+    render: () => h4(ErrorComponent, errorProps)
   });
   const rawBody = await renderToString(app);
   const { styles, body } = unescapeVueStyles(rawBody);
@@ -1569,12 +1569,12 @@ var CONVENTIONS_KEY = "__absoluteConventions", isConventionsMap = (value) => Boo
     status: 404
   });
 }, renderVueNotFound = async (conventionPath) => {
-  const { createSSRApp, h: h3 } = await import("vue");
+  const { createSSRApp, h: h4 } = await import("vue");
   const { renderToString } = await import("vue/server-renderer");
   const mod = await import(conventionPath);
   const NotFoundComponent = mod.default;
   const app = createSSRApp({
-    render: () => h3(NotFoundComponent)
+    render: () => h4(NotFoundComponent)
   });
   const rawBody = await renderToString(app);
   const { styles, body } = unescapeVueStyles(rawBody);
@@ -1720,10 +1720,10 @@ var ssrDirty = false, isRecord2 = (value) => typeof value === "object" && value
         };
       };
       const resolvedPage = await resolvePageComponent();
-      const { createSSRApp, h: h3 } = await import("vue");
+      const { createSSRApp, h: h4 } = await import("vue");
       const { renderToWebStream } = await import("vue/server-renderer");
       const app = createSSRApp({
-        render: () => h3(resolvedPage.component, maybeProps ?? null)
+        render: () => h4(resolvedPage.component, maybeProps ?? null)
       });
       const bodyStream = renderToWebStream(app);
       const { firstChunk, reader } = await primeVueStream(bodyStream);
@@ -2374,9 +2374,9 @@ var renderAngularIslandToHtmlInternal = async (component, props, islandId) => {
 }, renderAngularIslandToHtml2, renderReactIslandToHtml = (component, props) => import("react").then(({ createElement }) => import("react-dom/server").then(({ renderToStaticMarkup }) => renderToStaticMarkup(createElement(component, props)))), renderSvelteIslandToHtml = (component, props) => import("svelte/server").then(({ render }) => {
   const { body } = render(component, { props });
   return body;
-}), renderVueIslandToHtml = (component, props) => import("vue").then(({ createSSRApp, h: h3 }) => {
+}), renderVueIslandToHtml = (component, props) => import("vue").then(({ createSSRApp, h: h4 }) => {
   const app = createSSRApp({
-    render: () => h3(component, props)
+    render: () => h4(component, props)
   });
   return import("vue/server-renderer").then(({ renderToString }) => renderToString(app));
 });
@@ -2870,18 +2870,183 @@ var init_renderIslandMarkup = __esm(() => {
   resolvedServerBuildComponentCache = new Map;
 });
 
-// src/vue/components/Image.vue
-var Image_default = "../Image-0pe96k20.vue";
+// src/vue/components/Image.ts
+import { computed, defineComponent, h, ref } from "vue";
+
+// src/utils/imageClient.ts
+var DEFAULT_DEVICE_SIZES = [
+  640,
+  750,
+  828,
+  1080,
+  1200,
+  1920,
+  2048,
+  3840
+];
+var DEFAULT_IMAGE_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];
+var DEFAULT_QUALITY = 75;
+var OPTIMIZATION_ENDPOINT = "/_absolute/image";
+var buildOptimizedUrl = (src, width, quality, basePath = OPTIMIZATION_ENDPOINT) => `${basePath}?url=${encodeURIComponent(src)}&w=${width}&q=${quality}`;
+var getAllSizes = (deviceSizes, imageSizes) => {
+  const device = deviceSizes ?? DEFAULT_DEVICE_SIZES;
+  const image = imageSizes ?? DEFAULT_IMAGE_SIZES;
+  return [...device, ...image].sort((left, right) => left - right);
+};
+var snapToSize = (target, sizes) => {
+  for (const size of sizes) {
+    if (size >= target)
+      return size;
+  }
+  return sizes[sizes.length - 1] ?? target;
+};
+var generateBlurSvg = (base64Thumbnail) => {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320"><filter id="b" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="20"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1"/></filter><image filter="url(#b)" x="0" y="0" width="100%" height="100%" href="${base64Thumbnail}"/></svg>`;
+  const encoded = encodeURIComponent(svg);
+  return `url("data:image/svg+xml,${encoded}")`;
+};
+var generateSrcSet = (src, width, sizes, deviceSizes, imageSizes) => {
+  const quality = DEFAULT_QUALITY;
+  if (sizes) {
+    const allSizes = getAllSizes(deviceSizes, imageSizes);
+    return allSizes.map((sizeWidth) => `${buildOptimizedUrl(src, sizeWidth, quality)} ${sizeWidth}w`).join(", ");
+  }
+  if (width) {
+    const allSizes = getAllSizes(deviceSizes, imageSizes);
+    const w1x = snapToSize(width, allSizes);
+    const w2x = snapToSize(width * 2, allSizes);
+    return `${buildOptimizedUrl(src, w1x, quality)} 1x, ${buildOptimizedUrl(src, w2x, quality)} 2x`;
+  }
+  const devSizes = deviceSizes ?? DEFAULT_DEVICE_SIZES;
+  return devSizes.map((sizeWidth) => `${buildOptimizedUrl(src, sizeWidth, quality)} ${sizeWidth}w`).join(", ");
+};
+
+// src/vue/components/Image.ts
+var fillWrapperStyle = {
+  display: "block",
+  height: "100%",
+  overflow: "hidden",
+  position: "relative",
+  width: "100%"
+};
+var Image_default = defineComponent({
+  name: "AbsoluteImage",
+  props: {
+    src: { required: true, type: String },
+    alt: { required: true, type: String },
+    width: { default: undefined, type: Number },
+    height: { default: undefined, type: Number },
+    fill: { default: false, type: Boolean },
+    quality: { default: DEFAULT_QUALITY, type: Number },
+    sizes: { default: undefined, type: String },
+    loader: { default: undefined, type: Function },
+    unoptimized: { default: false, type: Boolean },
+    loading: { default: "lazy", type: String },
+    priority: { default: false, type: Boolean },
+    placeholder: { default: undefined, type: String },
+    blurDataURL: { default: undefined, type: String },
+    className: { default: undefined, type: String },
+    style: { default: undefined, type: Object },
+    onLoad: { default: undefined, type: Function },
+    onError: { default: undefined, type: Function },
+    crossOrigin: { default: undefined, type: String },
+    referrerPolicy: { default: undefined, type: String },
+    fetchPriority: { default: undefined, type: String },
+    overrideSrc: { default: undefined, type: String }
+  },
+  setup(props) {
+    const blurRemoved = ref(false);
+    const resolvedSrc = computed(() => {
+      if (props.overrideSrc)
+        return props.overrideSrc;
+      if (props.unoptimized)
+        return props.src;
+      if (props.loader) {
+        return props.loader({
+          quality: props.quality ?? DEFAULT_QUALITY,
+          src: props.src,
+          width: props.width ?? 0
+        });
+      }
+      if (!props.width) {
+        return buildOptimizedUrl(props.src, 0, props.quality ?? DEFAULT_QUALITY);
+      }
+      return buildOptimizedUrl(props.src, props.width, props.quality ?? DEFAULT_QUALITY);
+    });
+    const srcSet = computed(() => props.unoptimized ? undefined : generateSrcSet(props.src, props.width, props.sizes));
+    const resolvedSizes = computed(() => props.sizes ?? (props.fill ? "100vw" : undefined));
+    const resolvedLoading = computed(() => props.priority ? "eager" : props.loading ?? "lazy");
+    const resolvedFetchPriority = computed(() => props.priority ? "high" : props.fetchPriority);
+    const hasBlur = computed(() => props.placeholder === "blur" || typeof props.placeholder === "string" && props.placeholder !== "empty" && props.placeholder.startsWith("data:"));
+    const blurBackground = computed(() => {
+      if (!hasBlur.value || blurRemoved.value)
+        return;
+      if (typeof props.placeholder === "string" && props.placeholder !== "blur" && props.placeholder.startsWith("data:")) {
+        return generateBlurSvg(props.placeholder);
+      }
+      if (props.blurDataURL)
+        return generateBlurSvg(props.blurDataURL);
+      return;
+    });
+    const imgStyle = computed(() => {
+      const base = {
+        ...props.style ?? {},
+        color: "transparent"
+      };
+      if (blurBackground.value) {
+        base.backgroundImage = blurBackground.value;
+        base.backgroundPosition = "center";
+        base.backgroundRepeat = "no-repeat";
+        base.backgroundSize = "cover";
+      }
+      if (props.fill) {
+        base.height = "100%";
+        base.inset = "0";
+        base.objectFit = "cover";
+        base.position = "absolute";
+        base.width = "100%";
+      }
+      return base;
+    });
+    const handleLoad = (event) => {
+      blurRemoved.value = true;
+      props.onLoad?.(event);
+    };
+    const handleError = (event) => {
+      props.onError?.(event);
+    };
+    return () => {
+      const imgNode = h("img", {
+        alt: props.alt,
+        class: props.className,
+        crossorigin: props.crossOrigin,
+        decoding: "async",
+        fetchpriority: resolvedFetchPriority.value,
+        height: props.fill ? undefined : props.height,
+        loading: resolvedLoading.value,
+        onError: handleError,
+        onLoad: handleLoad,
+        referrerpolicy: props.referrerPolicy,
+        sizes: resolvedSizes.value,
+        src: resolvedSrc.value,
+        srcset: srcSet.value,
+        style: imgStyle.value,
+        width: props.fill ? undefined : props.width
+      });
+      return props.fill ? h("span", { style: fillWrapperStyle }, [imgNode]) : imgNode;
+    };
+  }
+});
 // src/vue/components/SuspenseSlot.ts
 init_streamingSlotRegistrar();
 import {
   cloneVNode,
-  defineComponent,
-  h,
+  defineComponent as defineComponent2,
+  h as h2,
   isVNode,
   onMounted,
   onBeforeUnmount,
-  ref,
+  ref as ref2,
   useSSRContext
 } from "vue";
 var renderVueNodesToHtml = async (nodes) => {
@@ -2955,7 +3120,7 @@ var registerLegacySuspenseSlot = (props) => {
     timeoutMs: props.timeoutMs
   });
 };
-var SuspenseSlot = defineComponent({
+var SuspenseSlot = defineComponent2({
   name: "AbsoluteSuspenseSlot",
   props: {
     className: { default: undefined, type: String },
@@ -2981,10 +3146,10 @@ var SuspenseSlot = defineComponent({
         return false;
       return slotNode.getAttribute("data-absolute-slot-state") === "resolved";
     };
-    const isResolved = ref(false);
-    const resolvedValue = ref(undefined);
-    const hasError = ref(false);
-    const hasPatchedDom = ref(readPatchedDomState());
+    const isResolved = ref2(false);
+    const resolvedValue = ref2(undefined);
+    const hasError = ref2(false);
+    const hasPatchedDom = ref2(readPatchedDomState());
     const usesFrameworkSlots = hasFrameworkSlots(slots.default, slots.fallback, slots.error, props.promise);
     const isSsrRender = useSSRContext() !== undefined;
     if (isSsrRender) {
@@ -3063,14 +3228,14 @@ var SuspenseSlot = defineComponent({
     };
     return () => {
       if (!usesFrameworkSlots) {
-        return h("div", {
+        return h2("div", {
           class: props.className,
           "data-absolute-slot": "true",
           id: props.id,
           innerHTML: props.fallbackHtml
         });
       }
-      return h("div", {
+      return h2("div", {
         class: props.className,
         "data-absolute-slot": "true",
         "data-allow-mismatch": "",
@@ -3081,8 +3246,8 @@ var SuspenseSlot = defineComponent({
 });
 // src/vue/components/StreamSlot.ts
 init_streamingSlotRegistrar();
-import { defineComponent as defineComponent2, h as h2, useSSRContext as useSSRContext2 } from "vue";
-var StreamSlot = defineComponent2({
+import { defineComponent as defineComponent3, h as h3, useSSRContext as useSSRContext2 } from "vue";
+var StreamSlot = defineComponent3({
   name: "AbsoluteStreamSlot",
   props: {
     className: { default: undefined, type: String },
@@ -3109,7 +3274,7 @@ var StreamSlot = defineComponent2({
         warnMissingStreamingSlotCollector("StreamSlot");
       }
     }
-    return () => h2("div", {
+    return () => h3("div", {
       class: props.className,
       "data-absolute-slot": "true",
       id: props.id,
@@ -3121,7 +3286,7 @@ var StreamSlot = defineComponent2({
 init_pageHandler();
 
 // src/vue/Island.ts
-import { defineComponent as defineComponent3, h as h3, onServerPrefetch } from "vue";
+import { defineComponent as defineComponent4, h as h4, onServerPrefetch } from "vue";
 
 // src/client/preserveIslandMarkup.ts
 init_islandMarkupAttributes();
@@ -3209,7 +3374,7 @@ var preserveIslandMarkup = (props) => {
 // src/vue/Island.ts
 init_islandMarkupAttributes();
 init_renderIslandMarkup();
-var defineRuntimeIslandComponent = (setup) => defineComponent3({
+var defineRuntimeIslandComponent = (setup) => defineComponent4({
   name: "AbsoluteIsland",
   props: {
     component: {
@@ -3241,7 +3406,7 @@ var Island = defineRuntimeIslandComponent((props) => {
   });
   return () => {
     const preserved = isBrowser ? preserveIslandMarkup(props) : null;
-    return h3("div", {
+    return h4("div", {
       ...preserved?.attributes ?? markerAttributes,
       "data-allow-mismatch": "",
       innerHTML: isBrowser ? preserved?.innerHTML : html
@@ -3251,8 +3416,8 @@ var Island = defineRuntimeIslandComponent((props) => {
 // src/vue/createIsland.ts
 init_islandMarkupAttributes();
 init_renderIslandMarkup();
-import { defineComponent as defineComponent4, h as h4, onServerPrefetch as onServerPrefetch2 } from "vue";
-var defineRuntimeIslandComponent2 = (setup) => defineComponent4({
+import { defineComponent as defineComponent5, h as h5, onServerPrefetch as onServerPrefetch2 } from "vue";
+var defineRuntimeIslandComponent2 = (setup) => defineComponent5({
   name: "AbsoluteIsland",
   props: {
     component: {
@@ -3282,7 +3447,7 @@ var createTypedIsland = (registry) => defineRuntimeIslandComponent2((props) => {
     const result = await renderIslandResult(registry, props);
     ({ attributes: markerAttributes, html } = result);
   });
-  return () => h4("div", {
+  return () => h5("div", {
     ...markerAttributes,
     "data-allow-mismatch": "",
     innerHTML: isBrowser ? undefined : html
@@ -3436,5 +3601,5 @@ export {
   Image_default as Image
 };
 
-//# debugId=E56AFBF4A689CCFA64756E2164756E21
+//# debugId=367D86E23CA4210164756E2164756E21
 //# sourceMappingURL=index.js.map