@absolutejs/absolute 0.19.0-beta.1043 → 0.19.0-beta.1045

package/dist/react/components/browser/index.js

@@ -0,0 +1,467 @@
+// src/utils/jsonLd.ts
+var serializeJsonLd = (schema) => {
+  const schemaOrgContext = "https://schema.org";
+  const data = Array.isArray(schema) ? schema.map((s) => ({
+    "@context": schemaOrgContext,
+    ...s
+  })) : { "@context": schemaOrgContext, ...schema };
+  return JSON.stringify(data);
+};
+
+// src/react/components/Head.tsx
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+var RobotsContent = ({ robots }) => {
+  const directives = [];
+  if (robots.index === false)
+    directives.push("noindex");
+  if (robots.index === true)
+    directives.push("index");
+  if (robots.follow === false)
+    directives.push("nofollow");
+  if (robots.follow === true)
+    directives.push("follow");
+  if (robots.noarchive)
+    directives.push("noarchive");
+  if (robots.nosnippet)
+    directives.push("nosnippet");
+  if (robots.noimageindex)
+    directives.push("noimageindex");
+  if (robots.maxSnippet !== undefined)
+    directives.push(`max-snippet:${robots.maxSnippet}`);
+  if (robots.maxImagePreview)
+    directives.push(`max-image-preview:${robots.maxImagePreview}`);
+  if (robots.maxVideoPreview !== undefined)
+    directives.push(`max-video-preview:${robots.maxVideoPreview}`);
+  const content = directives.join(", ");
+  return content ? /* @__PURE__ */ jsxDEV("meta", {
+    content,
+    name: "robots"
+  }, undefined, false, undefined, this) : null;
+};
+var OpenGraphTags = ({
+  openGraph,
+  title,
+  description
+}) => /* @__PURE__ */ jsxDEV(Fragment, {
+  children: [
+    /* @__PURE__ */ jsxDEV("meta", {
+      content: openGraph.title ?? title,
+      property: "og:title"
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV("meta", {
+      content: openGraph.description ?? description,
+      property: "og:description"
+    }, undefined, false, undefined, this),
+    openGraph.url && /* @__PURE__ */ jsxDEV("meta", {
+      content: openGraph.url,
+      property: "og:url"
+    }, undefined, false, undefined, this),
+    openGraph.image && /* @__PURE__ */ jsxDEV("meta", {
+      content: openGraph.image,
+      property: "og:image"
+    }, undefined, false, undefined, this),
+    openGraph.imageAlt && /* @__PURE__ */ jsxDEV("meta", {
+      content: openGraph.imageAlt,
+      property: "og:image:alt"
+    }, undefined, false, undefined, this),
+    openGraph.imageWidth && /* @__PURE__ */ jsxDEV("meta", {
+      content: String(openGraph.imageWidth),
+      property: "og:image:width"
+    }, undefined, false, undefined, this),
+    openGraph.imageHeight && /* @__PURE__ */ jsxDEV("meta", {
+      content: String(openGraph.imageHeight),
+      property: "og:image:height"
+    }, undefined, false, undefined, this),
+    openGraph.type && /* @__PURE__ */ jsxDEV("meta", {
+      content: openGraph.type,
+      property: "og:type"
+    }, undefined, false, undefined, this),
+    openGraph.siteName && /* @__PURE__ */ jsxDEV("meta", {
+      content: openGraph.siteName,
+      property: "og:site_name"
+    }, undefined, false, undefined, this),
+    openGraph.locale && /* @__PURE__ */ jsxDEV("meta", {
+      content: openGraph.locale,
+      property: "og:locale"
+    }, undefined, false, undefined, this)
+  ]
+}, undefined, true, undefined, this);
+var TwitterTags = ({
+  twitter,
+  title,
+  description
+}) => /* @__PURE__ */ jsxDEV(Fragment, {
+  children: [
+    twitter.card && /* @__PURE__ */ jsxDEV("meta", {
+      content: twitter.card,
+      name: "twitter:card"
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV("meta", {
+      content: twitter.title ?? title,
+      name: "twitter:title"
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV("meta", {
+      content: twitter.description ?? description,
+      name: "twitter:description"
+    }, undefined, false, undefined, this),
+    twitter.image && /* @__PURE__ */ jsxDEV("meta", {
+      content: twitter.image,
+      name: "twitter:image"
+    }, undefined, false, undefined, this),
+    twitter.imageAlt && /* @__PURE__ */ jsxDEV("meta", {
+      content: twitter.imageAlt,
+      name: "twitter:image:alt"
+    }, undefined, false, undefined, this),
+    twitter.site && /* @__PURE__ */ jsxDEV("meta", {
+      content: twitter.site,
+      name: "twitter:site"
+    }, undefined, false, undefined, this),
+    twitter.creator && /* @__PURE__ */ jsxDEV("meta", {
+      content: twitter.creator,
+      name: "twitter:creator"
+    }, undefined, false, undefined, this)
+  ]
+}, undefined, true, undefined, this);
+var CustomMetaTag = ({ tag }) => {
+  if (tag.property)
+    return /* @__PURE__ */ jsxDEV("meta", {
+      content: tag.content,
+      property: tag.property
+    }, undefined, false, undefined, this);
+  if (tag.httpEquiv)
+    return /* @__PURE__ */ jsxDEV("meta", {
+      content: tag.content,
+      httpEquiv: tag.httpEquiv
+    }, undefined, false, undefined, this);
+  return /* @__PURE__ */ jsxDEV("meta", {
+    content: tag.content,
+    name: tag.name
+  }, undefined, false, undefined, this);
+};
+var Head = ({
+  title = "AbsoluteJS",
+  description = "A page created using AbsoluteJS",
+  icon = "/assets/ico/favicon.ico",
+  font,
+  cssPath,
+  canonical,
+  openGraph,
+  twitter,
+  robots,
+  meta,
+  jsonLd
+} = {}) => /* @__PURE__ */ jsxDEV("head", {
+  suppressHydrationWarning: true,
+  children: [
+    /* @__PURE__ */ jsxDEV("meta", {
+      charSet: "utf-8"
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV("title", {
+      children: title
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV("meta", {
+      content: description,
+      name: "description"
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV("meta", {
+      content: "width=device-width, initial-scale=1",
+      name: "viewport"
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV("link", {
+      href: icon,
+      rel: "icon"
+    }, undefined, false, undefined, this),
+    canonical && /* @__PURE__ */ jsxDEV("link", {
+      href: canonical,
+      rel: "canonical"
+    }, undefined, false, undefined, this),
+    openGraph && /* @__PURE__ */ jsxDEV(OpenGraphTags, {
+      description,
+      openGraph,
+      title
+    }, undefined, false, undefined, this),
+    twitter && /* @__PURE__ */ jsxDEV(TwitterTags, {
+      description,
+      title,
+      twitter
+    }, undefined, false, undefined, this),
+    robots && /* @__PURE__ */ jsxDEV(RobotsContent, {
+      robots
+    }, undefined, false, undefined, this),
+    meta?.map((tag, i) => /* @__PURE__ */ jsxDEV(CustomMetaTag, {
+      tag
+    }, i, false, undefined, this)),
+    font && /* @__PURE__ */ jsxDEV(Fragment, {
+      children: [
+        /* @__PURE__ */ jsxDEV("link", {
+          href: "https://fonts.googleapis.com",
+          rel: "preconnect"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV("link", {
+          crossOrigin: "anonymous",
+          href: "https://fonts.gstatic.com",
+          rel: "preconnect",
+          suppressHydrationWarning: true
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV("link", {
+          href: `https://fonts.googleapis.com/css2?family=${font}:wght@100..900&display=swap`,
+          rel: "stylesheet",
+          suppressHydrationWarning: true
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this),
+    cssPath && [cssPath].flat().map((path) => /* @__PURE__ */ jsxDEV("link", {
+      href: path,
+      rel: "stylesheet",
+      suppressHydrationWarning: true,
+      type: "text/css"
+    }, path, false, undefined, this)),
+    jsonLd && /* @__PURE__ */ jsxDEV("script", {
+      dangerouslySetInnerHTML: { __html: serializeJsonLd(jsonLd) },
+      type: "application/ld+json"
+    }, undefined, false, undefined, this)
+  ]
+}, undefined, true, undefined, this);
+// src/constants.ts
+var HOURS_IN_DAY = 24;
+var IMAGE_DEFAULT_DEVICE_SIZES = [
+  640,
+  750,
+  828,
+  1080,
+  1200,
+  1920,
+  2048,
+  3840
+];
+var IMAGE_DEFAULT_IMAGE_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];
+var IMAGE_DEFAULT_QUALITY = 75;
+var MILLISECONDS_IN_A_SECOND = 1000;
+var MINUTES_IN_AN_HOUR = 60;
+var SECONDS_IN_A_MINUTE = 60;
+var MILLISECONDS_IN_A_MINUTE = MILLISECONDS_IN_A_SECOND * SECONDS_IN_A_MINUTE;
+var MILLISECONDS_IN_A_DAY = MILLISECONDS_IN_A_SECOND * SECONDS_IN_A_MINUTE * MINUTES_IN_AN_HOUR * HOURS_IN_DAY;
+var TWO_THIRDS = 2 / 3;
+
+// src/utils/imageClient.ts
+var DEFAULT_DEVICE_SIZES = IMAGE_DEFAULT_DEVICE_SIZES;
+var DEFAULT_IMAGE_SIZES = IMAGE_DEFAULT_IMAGE_SIZES;
+var DEFAULT_QUALITY = IMAGE_DEFAULT_QUALITY;
+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/react/components/Image.tsx
+import { jsxDEV as jsxDEV2, Fragment as Fragment2 } from "react/jsx-dev-runtime";
+var resolveSource = (src, overrideSrc, unoptimized, loader, width, quality) => {
+  if (overrideSrc)
+    return overrideSrc;
+  if (unoptimized)
+    return src;
+  if (loader)
+    return loader({ quality, src, width: width ?? 0 });
+  if (!width)
+    return buildOptimizedUrl(src, 0, quality);
+  return buildOptimizedUrl(src, width, quality);
+};
+var resolveBlurBackground = (hasBlur, placeholder, blurDataURL) => {
+  if (!hasBlur)
+    return;
+  if (typeof placeholder === "string" && placeholder !== "blur" && placeholder.startsWith("data:")) {
+    return generateBlurSvg(placeholder);
+  }
+  if (blurDataURL)
+    return generateBlurSvg(blurDataURL);
+  return;
+};
+var Image = ({
+  alt,
+  blurDataURL,
+  className,
+  crossOrigin,
+  fetchPriority,
+  fill,
+  height,
+  loader,
+  loading,
+  onError,
+  onLoad,
+  overrideSrc,
+  placeholder,
+  priority,
+  quality = DEFAULT_QUALITY,
+  referrerPolicy,
+  sizes,
+  src,
+  style,
+  unoptimized,
+  width
+}) => {
+  const resolvedSrc = resolveSource(src, overrideSrc, unoptimized, loader, width, quality);
+  const srcSet = unoptimized ? undefined : generateSrcSet(src, width, sizes);
+  const resolvedSizes = sizes ?? (fill ? "100vw" : undefined);
+  const resolvedLoading = priority ? "eager" : loading ?? "lazy";
+  const resolvedFetchPriority = priority ? "high" : fetchPriority;
+  const hasBlur = placeholder === "blur" || typeof placeholder === "string" && placeholder !== "empty" && placeholder.startsWith("data:");
+  const blurBackground = resolveBlurBackground(hasBlur, placeholder, blurDataURL);
+  const imgStyle = {
+    ...style ?? {},
+    ...blurBackground ? {
+      backgroundImage: blurBackground,
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat",
+      backgroundSize: "cover"
+    } : {},
+    ...fill ? {
+      color: "transparent",
+      height: "100%",
+      inset: 0,
+      objectFit: "cover",
+      position: "absolute",
+      width: "100%"
+    } : { color: "transparent" }
+  };
+  const fillWrapperStyle = {
+    display: "block",
+    height: "100%",
+    overflow: "hidden",
+    position: "relative",
+    width: "100%"
+  };
+  const preloadLink = priority ? /* @__PURE__ */ jsxDEV2("link", {
+    as: "image",
+    crossOrigin,
+    href: resolvedSrc,
+    imageSizes: resolvedSizes,
+    imageSrcSet: srcSet,
+    rel: "preload"
+  }, undefined, false, undefined, this) : null;
+  const imgElement = /* @__PURE__ */ jsxDEV2("img", {
+    alt,
+    className,
+    crossOrigin,
+    decoding: "async",
+    fetchPriority: resolvedFetchPriority,
+    height: fill ? undefined : height,
+    loading: resolvedLoading,
+    onError: onError ? (event) => onError(event.nativeEvent) : undefined,
+    onLoad: (event) => {
+      const { target } = event;
+      if (blurBackground && target instanceof HTMLImageElement) {
+        target.style.backgroundImage = "none";
+      }
+      if (onLoad)
+        onLoad(event.nativeEvent);
+    },
+    referrerPolicy,
+    sizes: resolvedSizes,
+    src: resolvedSrc,
+    srcSet,
+    style: imgStyle,
+    width: fill ? undefined : width
+  }, undefined, false, undefined, this);
+  if (fill) {
+    return /* @__PURE__ */ jsxDEV2(Fragment2, {
+      children: [
+        preloadLink,
+        /* @__PURE__ */ jsxDEV2("span", {
+          style: fillWrapperStyle,
+          children: imgElement
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV2(Fragment2, {
+    children: [
+      preloadLink,
+      imgElement
+    ]
+  }, undefined, true, undefined, this);
+};
+// src/react/components/JsonLd.tsx
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+var JsonLd = ({
+  schema
+}) => {
+  const schemaOrgContext = "https://schema.org";
+  const data = Array.isArray(schema) ? schema.map((s) => ({
+    "@context": schemaOrgContext,
+    ...s
+  })) : { "@context": schemaOrgContext, ...schema };
+  return /* @__PURE__ */ jsxDEV3("script", {
+    dangerouslySetInnerHTML: { __html: JSON.stringify(data) },
+    type: "application/ld+json"
+  }, undefined, false, undefined, this);
+};
+// src/react/components/SuspenseSlot.browser.tsx
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+var isLegacyProps = (props) => ("fallbackHtml" in props) || ("errorHtml" in props);
+var SuspenseSlot = (props) => {
+  if (isLegacyProps(props)) {
+    return /* @__PURE__ */ jsxDEV4("div", {
+      className: props.className,
+      dangerouslySetInnerHTML: { __html: props.fallbackHtml ?? "" },
+      "data-absolute-slot": "true",
+      id: props.id,
+      suppressHydrationWarning: true
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className: props.className,
+    "data-absolute-slot": "true",
+    id: props.id,
+    suppressHydrationWarning: true,
+    children: props.fallback ?? null
+  }, undefined, false, undefined, this);
+};
+// src/react/components/StreamSlot.browser.tsx
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+var StreamSlot = ({
+  className,
+  fallbackHtml = "",
+  id
+}) => /* @__PURE__ */ jsxDEV5("div", {
+  className,
+  dangerouslySetInnerHTML: { __html: fallbackHtml },
+  "data-absolute-slot": "true",
+  id,
+  suppressHydrationWarning: true
+}, undefined, false, undefined, this);
+export {
+  SuspenseSlot,
+  StreamSlot,
+  JsonLd,
+  Image,
+  Head
+};