@absolutejs/absolute 0.19.0-beta.352 → 0.19.0-beta.354

package/dist/angular/index.js

@@ -39818,6 +39818,171 @@ var require_cjs = __commonJS((exports) => {
   } });
 });
 
+// src/utils/imageProcessing.ts
+import { existsSync as existsSync3, mkdirSync, readFileSync as readFileSync2, writeFileSync as writeFileSync2 } from "fs";
+import { join as join3, resolve as resolve4 } from "path";
+var DEFAULT_DEVICE_SIZES, DEFAULT_IMAGE_SIZES, DEFAULT_QUALITY = 75, OPTIMIZATION_ENDPOINT = "/_absolute/image", BLUR_DEVIATION = 20, sharpModule = undefined, sharpLoaded = false, sharpWarned = false, snapToSize = (target, sizes) => {
+  for (const size of sizes) {
+    if (size >= target)
+      return size;
+  }
+  return sizes[sizes.length - 1] ?? target;
+}, matchHostname = (actual, pattern) => {
+  if (pattern === actual)
+    return true;
+  if (pattern.startsWith("*.")) {
+    const suffix = pattern.slice(1);
+    return actual.endsWith(suffix) && actual.length > suffix.length;
+  }
+  return false;
+}, matchPathname = (actual, pattern) => {
+  if (pattern.endsWith("/**")) {
+    const prefix = pattern.slice(0, -2);
+    return actual.startsWith(prefix);
+  }
+  return actual === pattern;
+}, MIME_MAP, callSharp = (sharpRef, input3) => {
+  const factory = sharpRef;
+  return factory(input3);
+}, toBuffer = (input3) => {
+  if (Buffer.isBuffer(input3))
+    return input3;
+  return Buffer.from(input3);
+}, buildOptimizedUrl = (src, width, quality, basePath = OPTIMIZATION_ENDPOINT) => `${basePath}?url=${encodeURIComponent(src)}&w=${width}&q=${quality}`, formatToMime = (format) => MIME_MAP[format], 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="${BLUR_DEVIATION}"/><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}")`;
+}, generateSrcSet = (src, width, sizes, config, loader) => {
+  const quality = config?.quality ?? DEFAULT_QUALITY;
+  const basePath = config?.path ?? OPTIMIZATION_ENDPOINT;
+  const buildUrl = loader ?? ((params) => buildOptimizedUrl(params.src, params.width, params.quality, basePath));
+  if (sizes) {
+    const allSizes = getAllSizes(config);
+    return allSizes.map((sizeWidth) => `${buildUrl({ quality, src, width: sizeWidth })} ${sizeWidth}w`).join(", ");
+  }
+  if (width) {
+    const allSizes = getAllSizes(config);
+    const w1x = snapToSize(width, allSizes);
+    const w2x = snapToSize(width * 2, allSizes);
+    return `${buildUrl({ quality, src, width: w1x })} 1x, ${buildUrl({ quality, src, width: w2x })} 2x`;
+  }
+  const deviceSizes = config?.deviceSizes ?? DEFAULT_DEVICE_SIZES;
+  return deviceSizes.map((sizeWidth) => `${buildUrl({ quality, src, width: sizeWidth })} ${sizeWidth}w`).join(", ");
+}, getAllSizes = (config) => {
+  const device = config?.deviceSizes ?? DEFAULT_DEVICE_SIZES;
+  const image = config?.imageSizes ?? DEFAULT_IMAGE_SIZES;
+  return [...device, ...image].sort((left, right) => left - right);
+}, getCacheDir = (buildDir) => {
+  const dir = join3(buildDir, ".cache", "images");
+  if (!existsSync3(dir))
+    mkdirSync(dir, { recursive: true });
+  return dir;
+}, getCacheKey = (url, width, quality, format) => {
+  const hasher = new Bun.CryptoHasher("sha256");
+  hasher.update(`${url}|${width}|${quality}|${format}`);
+  return hasher.digest("hex");
+}, isCacheStale = (meta) => Date.now() > meta.expireAt, matchRemotePattern = (urlString, patterns) => {
+  let parsed;
+  try {
+    parsed = new URL(urlString);
+  } catch {
+    return false;
+  }
+  return patterns.some((pattern) => {
+    if (pattern.protocol && parsed.protocol !== `${pattern.protocol}:`)
+      return false;
+    if (!matchHostname(parsed.hostname, pattern.hostname))
+      return false;
+    if (pattern.port && parsed.port !== pattern.port)
+      return false;
+    if (pattern.pathname && !matchPathname(parsed.pathname, pattern.pathname))
+      return false;
+    return true;
+  });
+}, negotiateFormat = (acceptHeader, configuredFormats) => {
+  for (const format of configuredFormats) {
+    const mime = MIME_MAP[format];
+    if (mime && acceptHeader.includes(mime))
+      return format;
+  }
+  if (configuredFormats.includes("webp") && acceptHeader.includes("image/webp")) {
+    return "webp";
+  }
+  return "jpeg";
+}, AVIF_QUALITY_OFFSET = 20, AVIF_EFFORT = 3, optimizeImage = async (buffer, width, quality, format) => {
+  const sharp = await tryLoadSharp();
+  if (!sharp)
+    return toBuffer(buffer);
+  const pipeline = callSharp(sharp, toBuffer(buffer)).rotate().resize(width, undefined, { withoutEnlargement: true });
+  switch (format) {
+    case "avif":
+      return pipeline.avif({
+        effort: AVIF_EFFORT,
+        quality: Math.max(1, quality - AVIF_QUALITY_OFFSET)
+      }).toBuffer();
+    case "jpeg":
+      return pipeline.jpeg({ mozjpeg: true, quality }).toBuffer();
+    case "png":
+      return pipeline.png({ quality }).toBuffer();
+    case "webp":
+      return pipeline.webp({ quality }).toBuffer();
+    default:
+      return toBuffer(buffer);
+  }
+}, readFromCache = (cacheDir, cacheKey) => {
+  const metaPath = join3(cacheDir, `${cacheKey}.meta`);
+  const dataPath = join3(cacheDir, `${cacheKey}.data`);
+  if (!existsSync3(metaPath) || !existsSync3(dataPath))
+    return null;
+  try {
+    const meta = JSON.parse(readFileSync2(metaPath, "utf-8"));
+    const buffer = readFileSync2(dataPath);
+    return { buffer, meta };
+  } catch {
+    return null;
+  }
+}, tryLoadSharp = async () => {
+  if (sharpLoaded)
+    return sharpModule;
+  sharpLoaded = true;
+  try {
+    const sharpPath = resolve4(process.cwd(), "node_modules/sharp");
+    const mod = await import(sharpPath);
+    sharpModule = mod.default ?? mod;
+    return sharpModule;
+  } catch {
+    if (sharpWarned)
+      return null;
+    sharpWarned = true;
+    console.warn("[image] sharp not installed \u2014 serving unoptimized images. Install with: bun add sharp");
+    return null;
+  }
+}, writeToCache = (cacheDir, cacheKey, buffer, meta) => {
+  const metaPath = join3(cacheDir, `${cacheKey}.meta`);
+  const dataPath = join3(cacheDir, `${cacheKey}.data`);
+  writeFileSync2(dataPath, buffer);
+  writeFileSync2(metaPath, JSON.stringify(meta));
+};
+var init_imageProcessing = __esm(() => {
+  DEFAULT_DEVICE_SIZES = [
+    640,
+    750,
+    828,
+    1080,
+    1200,
+    1920,
+    2048,
+    3840
+  ];
+  DEFAULT_IMAGE_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];
+  MIME_MAP = {
+    avif: "image/avif",
+    jpeg: "image/jpeg",
+    png: "image/png",
+    webp: "image/webp"
+  };
+});
+
 // src/client/streamSwap.ts
 var streamSwapRuntime = () => {
   if (window.__ABS_SLOT_RUNTIME__ === true)
@@ -40579,6 +40744,224 @@ var IslandStore = IslandStoreImpl;
 // src/angular/renderIsland.ts
 init_renderIslandMarkup();
 var renderIsland = (props) => renderIslandMarkup(requireCurrentIslandRegistry(), props);
+// src/angular/components/defer-slot.component.ts
+import { Component as Component5, computed, input as input2 } from "@angular/core";
+
+// src/angular/components/stream-slot.component.ts
+import { Component as Component4, input } from "@angular/core";
+class StreamSlotComponent {
+  className = input();
+  errorHtml = input();
+  fallbackHtml = input("");
+  id = input.required();
+  resolve = input.required();
+  timeoutMs = input();
+  ngOnInit() {
+    if (typeof window !== "undefined")
+      return;
+    registerStreamingSlot({
+      errorHtml: this.errorHtml(),
+      fallbackHtml: this.fallbackHtml(),
+      id: this.id(),
+      resolve: this.resolve(),
+      timeoutMs: this.timeoutMs()
+    });
+  }
+}
+StreamSlotComponent = __legacyDecorateClassTS([
+  Component4({
+    selector: "abs-stream-slot",
+    standalone: true,
+    template: `
+		<div
+			[attr.id]="'slot-' + id()"
+			[attr.class]="className()"
+			data-absolute-slot="true"
+			[innerHTML]="fallbackHtml()"
+		></div>
+	`
+  })
+], StreamSlotComponent);
+
+// src/angular/components/defer-slot.component.ts
+class DeferSlotComponent {
+  className = input2();
+  errorHtml = input2();
+  fallbackHtml = input2("");
+  id = input2.required();
+  promise = input2();
+  resolve = input2();
+  timeoutMs = input2();
+  resolvedResolver = computed(() => {
+    const resolver = this.resolve();
+    if (resolver)
+      return resolver;
+    const promise = this.promise();
+    if (promise)
+      return () => promise;
+    return () => "";
+  });
+}
+DeferSlotComponent = __legacyDecorateClassTS([
+  Component5({
+    selector: "abs-defer-slot",
+    standalone: true,
+    template: `
+		<abs-stream-slot
+			[className]="className()"
+			[errorHtml]="errorHtml()"
+			[fallbackHtml]="fallbackHtml()"
+			[id]="id()"
+			[resolve]="resolvedResolver()"
+			[timeoutMs]="timeoutMs()"
+		></abs-stream-slot>
+	`,
+    imports: [StreamSlotComponent]
+  })
+], DeferSlotComponent);
+// src/angular/components/image.component.ts
+init_imageProcessing();
+import { Component as Component6, computed as computed2, input as input3, signal } from "@angular/core";
+import { NgStyle } from "@angular/common";
+var resolveBlurBg = (placeholderValue, blurDataUrl) => {
+  if (typeof placeholderValue === "string" && placeholderValue !== "blur" && placeholderValue.startsWith("data:")) {
+    return generateBlurSvg(placeholderValue);
+  }
+  if (blurDataUrl)
+    return generateBlurSvg(blurDataUrl);
+  return;
+};
+
+class ImageComponent {
+  alt = input3.required();
+  blurDataURL = input3();
+  className = input3();
+  crossOrigin = input3();
+  fetchPriority = input3();
+  fill = input3(false);
+  height = input3();
+  loader = input3();
+  loading = input3("lazy");
+  onError = input3();
+  onLoad = input3();
+  overrideSrc = input3();
+  placeholder = input3("empty");
+  priority = input3(false);
+  quality = input3(DEFAULT_QUALITY);
+  referrerPolicy = input3();
+  sizes = input3();
+  src = input3.required();
+  style = input3();
+  unoptimized = input3(false);
+  width = input3();
+  blurRemoved = signal(false);
+  resolvedSrc = computed2(() => {
+    const override = this.overrideSrc();
+    if (override)
+      return override;
+    if (this.unoptimized())
+      return this.src();
+    const loaderFn = this.loader();
+    if (loaderFn)
+      return loaderFn({
+        quality: this.quality(),
+        src: this.src(),
+        width: this.width() ?? 0
+      });
+    const currentWidth = this.width();
+    if (!currentWidth)
+      return buildOptimizedUrl(this.src(), 0, this.quality());
+    return buildOptimizedUrl(this.src(), currentWidth, this.quality());
+  });
+  srcSet = computed2(() => this.unoptimized() ? null : generateSrcSet(this.src(), this.width(), this.sizes(), undefined, this.loader() ?? undefined) ?? null);
+  resolvedSrcSet = computed2(() => this.srcSet() ?? null);
+  resolvedSizes = computed2(() => this.sizes() ?? (this.fill() ? "100vw" : null));
+  resolvedCrossOrigin = computed2(() => this.crossOrigin() ?? null);
+  resolvedReferrerPolicy = computed2(() => this.referrerPolicy() ?? null);
+  resolvedLoading = computed2(() => this.priority() ? "eager" : this.loading());
+  resolvedFetchPriority = computed2(() => this.priority() ? "high" : this.fetchPriority() ?? null);
+  imgStyle = computed2(() => {
+    const base = {
+      ...this.style() ?? {},
+      color: "transparent"
+    };
+    const hasBlur = !this.blurRemoved() && (this.placeholder() === "blur" || typeof this.placeholder() === "string" && this.placeholder() !== "empty" && (this.placeholder() ?? "").startsWith("data:"));
+    const blurValue = hasBlur ? resolveBlurBg(this.placeholder(), this.blurDataURL()) : undefined;
+    if (blurValue) {
+      base["background-image"] = blurValue;
+      base["background-position"] = "center";
+      base["background-repeat"] = "no-repeat";
+      base["background-size"] = "cover";
+    }
+    if (this.fill()) {
+      base.height = "100%";
+      base.inset = "0";
+      base["object-fit"] = "cover";
+      base.position = "absolute";
+      base.width = "100%";
+    }
+    return base;
+  });
+  handleLoad(event) {
+    this.blurRemoved.set(true);
+    const callback = this.onLoad();
+    if (callback)
+      callback(event);
+  }
+  handleError(event) {
+    const callback = this.onError();
+    if (callback)
+      callback(event);
+  }
+}
+ImageComponent = __legacyDecorateClassTS([
+  Component6({
+    imports: [NgStyle],
+    selector: "abs-image",
+    standalone: true,
+    template: `
+		@if (fill()) {
+			<span
+				style="position:relative;overflow:hidden;display:block;width:100%;height:100%"
+			>
+				<img
+					[alt]="alt()"
+					[src]="resolvedSrc()"
+					[attr.srcset]="resolvedSrcSet()"
+					[attr.sizes]="resolvedSizes()"
+					[loading]="resolvedLoading()"
+					[class]="className()"
+					[ngStyle]="imgStyle()"
+					[attr.crossorigin]="resolvedCrossOrigin()"
+					[attr.referrerpolicy]="resolvedReferrerPolicy()"
+					[attr.fetchpriority]="resolvedFetchPriority()"
+					decoding="async"
+					(load)="handleLoad($event)"
+					(error)="handleError($event)"
+				/>
+			</span>
+		} @else {
+			<img
+				[alt]="alt()"
+				[src]="resolvedSrc()"
+				[attr.srcset]="resolvedSrcSet()"
+				[attr.sizes]="resolvedSizes()"
+				[width]="width()"
+				[height]="height()"
+				[loading]="resolvedLoading()"
+				[class]="className()"
+				[ngStyle]="imgStyle()"
+				[attr.crossorigin]="resolvedCrossOrigin()"
+				[attr.referrerpolicy]="resolvedReferrerPolicy()"
+				[attr.fetchpriority]="resolvedFetchPriority()"
+				decoding="async"
+				(load)="handleLoad($event)"
+				(error)="handleError($event)"
+			/>
+		}
+	`
+  })
+], ImageComponent);
 
 // src/angular/index.ts
 var handleAngularPageRequest2 = wrapPageHandlerWithStreamingSlots(handleAngularPageRequest);
@@ -40587,9 +40970,12 @@ export {
   handleAngularPageRequest2 as handleAngularPageRequest,
   getCachedRouteData,
   createTypedIsland,
+  StreamSlotComponent,
   IslandStore,
-  Island
+  Island,
+  ImageComponent,
+  DeferSlotComponent
 };
 
-//# debugId=87DA1ED8BAE8A55064756E2164756E21
+//# debugId=A6ACDE5F26CA47D664756E2164756E21
 //# sourceMappingURL=index.js.map