@absolutejs/absolute 0.19.0-beta.176 → 0.19.0-beta.178

package/dist/svelte/components/JsonLd.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { JsonLdSchema, WithContext } from '../../../types/jsonLd';
+
+	let { schema }: { schema: JsonLdSchema | JsonLdSchema[] } = $props();
+
+	const data = $derived<
+		WithContext<JsonLdSchema> | WithContext<JsonLdSchema>[]
+	>(
+		Array.isArray(schema)
+			? schema.map((s) => ({
+					'@context': 'https://schema.org' as const,
+					...s
+				}))
+			: { '@context': 'https://schema.org' as const, ...schema }
+	);
+</script>
+
+<svelte:head>
+	{@html `<script type="application/ld+json">${JSON.stringify(data)}</script>`}
+</svelte:head>

package/dist/types/build.d.ts

@@ -1,5 +1,6 @@
 import { build } from '../src/core/build';
 import { devBuild } from '../src/core/devBuild';
+import type { ImageConfig } from './image';
 import type { SitemapConfig } from './sitemap';
 export type BuildOptions = {
     /** When true, build() throws on error instead of exit(1) - used by HMR rebuilds */
@@ -45,6 +46,7 @@ export type BuildConfig = {
         https?: boolean;
     };
     static?: StaticConfig;
+    images?: ImageConfig;
     sitemap?: SitemapConfig;
 };
 export type BuildResult = ReturnType<typeof build>;

package/dist/types/image.d.ts

@@ -0,0 +1,77 @@
+export type ImageFormat = 'webp' | 'avif' | 'jpeg' | 'png';
+export type RemotePattern = {
+    protocol?: 'http' | 'https';
+    hostname: string;
+    port?: string;
+    pathname?: string;
+};
+export type ImageLoaderParams = {
+    src: string;
+    width: number;
+    quality: number;
+};
+export type ImageLoader = (params: ImageLoaderParams) => string;
+export type ImageConfig = {
+    /** Breakpoints for device-width responsive images (default: [640, 750, 828, 1080, 1200, 1920, 2048, 3840]) */
+    deviceSizes?: number[];
+    /** Breakpoints for fixed-width images (default: [16, 32, 48, 64, 96, 128, 256, 384]) */
+    imageSizes?: number[];
+    /** Output formats in preference order (default: ['webp']). Add 'avif' for smaller files at slower encode. */
+    formats?: ImageFormat[];
+    /** Minimum cache TTL in seconds (default: 60) */
+    minimumCacheTTL?: number;
+    /** Allowed remote image origins */
+    remotePatterns?: RemotePattern[];
+    /** Default quality 1-100 (default: 75) */
+    quality?: number;
+    /** Custom URL builder — overrides the default optimization endpoint */
+    loader?: ImageLoader;
+    /** Optimization endpoint path (default: '/_absolute/image') */
+    path?: string;
+    /** Globally disable image optimization — serve images as-is */
+    unoptimized?: boolean;
+};
+export type ImageProps = {
+    /** Image source URL or path */
+    src: string;
+    /** Alt text for accessibility (required) */
+    alt: string;
+    /** Intrinsic width in pixels (required unless fill) */
+    width?: number;
+    /** Intrinsic height in pixels (required unless fill) */
+    height?: number;
+    /** Fill parent container with position: absolute */
+    fill?: boolean;
+    /** Quality 1-100 (default: 75) */
+    quality?: number;
+    /** Responsive sizes attribute (e.g., "(max-width: 768px) 100vw, 50vw") */
+    sizes?: string;
+    /** Custom URL builder for this image */
+    loader?: ImageLoader;
+    /** Bypass optimization for this image */
+    unoptimized?: boolean;
+    /** Loading strategy (default: "lazy") */
+    loading?: 'lazy' | 'eager';
+    /** Add <link rel="preload"> and set loading="eager" + fetchPriority="high" */
+    priority?: boolean;
+    /** Placeholder while loading: "blur" uses blurDataURL, "empty" shows nothing, or pass a data URI */
+    placeholder?: 'blur' | 'empty' | string;
+    /** Base64 blur placeholder data URI (auto-generated for build-time images) */
+    blurDataURL?: string;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: Record<string, string | number>;
+    /** Callback when image loads */
+    onLoad?: (() => void) | ((event: Event) => void);
+    /** Callback on load error */
+    onError?: (() => void) | ((event: Event) => void);
+    /** CORS setting */
+    crossOrigin?: 'anonymous' | 'use-credentials' | '';
+    /** Referrer policy */
+    referrerPolicy?: '' | 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
+    /** Fetch priority hint */
+    fetchPriority?: 'high' | 'low' | 'auto';
+    /** Override the final src attribute on the rendered <img> */
+    overrideSrc?: string;
+};

package/dist/types/index.d.ts

@@ -2,6 +2,7 @@ export * from './angular';
 export * from './build';
 export * from './cli';
 export * from './client';
+export * from './image';
 export * from './messages';
 export * from './telemetry';
 export * from './tool';

package/package.json

@@ -78,14 +78,25 @@
 			"types": "./dist/src/svelte/index.d.ts"
 		},
 		"./svelte/components/Head.svelte": {
-			"import": "./src/svelte/components/Head.svelte"
+			"import": "./dist/svelte/components/Head.svelte"
+		},
+		"./svelte/components/Image.svelte": {
+			"import": "./dist/svelte/components/Image.svelte"
 		},
 		"./svelte/components/JsonLd.svelte": {
-			"import": "./src/svelte/components/JsonLd.svelte"
+			"import": "./dist/svelte/components/JsonLd.svelte"
 		},
 		"./vue": {
 			"import": "./dist/vue/index.js",
 			"types": "./dist/src/vue/index.d.ts"
+		},
+		"./vue/components": {
+			"import": "./dist/vue/components/index.js",
+			"types": "./dist/src/vue/components/index.d.ts"
+		},
+		"./angular/components": {
+			"import": "./dist/angular/components/index.js",
+			"types": "./dist/src/angular/components/index.d.ts"
 		}
 	},
 	"license": "BSL-1.1",
@@ -115,6 +126,7 @@
 		"react-refresh": "^0.18.0",
 		"svelte": "^5.35.2",
 		"vue": "^3.5.27",
+		"sharp": ">=0.33.0",
 		"zone.js": "^0.15.0"
 	},
 	"peerDependenciesMeta": {
@@ -151,6 +163,9 @@
 		"vue": {
 			"optional": true
 		},
+		"sharp": {
+			"optional": true
+		},
 		"zone.js": {
 			"optional": true
 		}
@@ -160,7 +175,7 @@
 		"url": "git+https://github.com/absolutejs/absolutejs.git"
 	},
 	"scripts": {
-		"build": "rm -rf dist && bun build src/index.ts src/build.ts src/angular/index.ts src/react/index.ts src/react/hooks/index.ts src/svelte/index.ts src/vue/index.ts --outdir dist --sourcemap --target=bun --external react --external react-dom --external vue --external @vue/compiler-sfc --external vue/server-renderer --external svelte --external svelte/compiler --external svelte/server --external elysia --external @elysiajs/static --external @angular/compiler-cli --external @angular/core --external @angular/common --external @angular/platform-browser --external @angular/platform-server --external @angular/ssr --external zone.js --external debug --external @absolutejs/native-linux-x64 --external @absolutejs/native-linux-arm64 --external @absolutejs/native-darwin-x64 --external @absolutejs/native-darwin-arm64 && bun build src/cli/index.ts --outfile dist/cli/index.js --target=bun && tsc --emitDeclarationOnly --project tsconfig.build.json && mkdir -p dist/dev && cp -r src/dev/client dist/dev/client",
+		"build": "rm -rf dist && bun build src/index.ts src/build.ts src/angular/index.ts src/angular/components/index.ts src/react/index.ts src/react/hooks/index.ts src/svelte/index.ts src/vue/index.ts src/vue/components/index.ts --outdir dist --sourcemap --target=bun --external react --external react-dom --external vue --external @vue/compiler-sfc --external vue/server-renderer --external svelte --external svelte/compiler --external svelte/server --external elysia --external @elysiajs/static --external @angular/compiler-cli --external @angular/core --external @angular/common --external @angular/platform-browser --external @angular/platform-server --external @angular/ssr --external zone.js --external debug --external sharp --external @absolutejs/native-linux-x64 --external @absolutejs/native-linux-arm64 --external @absolutejs/native-darwin-x64 --external @absolutejs/native-darwin-arm64 && bun build src/cli/index.ts --outfile dist/cli/index.js --target=bun && tsc --emitDeclarationOnly --project tsconfig.build.json && mkdir -p dist/dev && cp -r src/dev/client dist/dev/client && mkdir -p dist/svelte/components && cp src/svelte/components/*.svelte dist/svelte/components/",
 		"build:native": "./native/build.sh",
 		"db:push": "drizzle-kit push",
 		"db:studio": "drizzle-kit studio",
@@ -174,5 +189,5 @@
 		"typecheck": "bun run vue-tsc --noEmit"
 	},
 	"types": "./dist/src/index.d.ts",
-	"version": "0.19.0-beta.176"
+	"version": "0.19.0-beta.178"
 }

package/types/build.ts

@@ -1,5 +1,6 @@
 import { build } from '../src/core/build';
 import { devBuild } from '../src/core/devBuild';
+import type { ImageConfig } from './image';
 import type { SitemapConfig } from './sitemap';
 
 export type BuildOptions = {
@@ -55,6 +56,8 @@ export type BuildConfig = {
 	};
 	// Static site generation — pre-render routes at build time
 	static?: StaticConfig;
+	// Image optimization — on-demand resizing, format conversion, caching
+	images?: ImageConfig;
 	// Sitemap generation — auto-discovers page routes on server start
 	sitemap?: SitemapConfig;
 };

package/types/image.ts

@@ -0,0 +1,91 @@
+export type ImageFormat = 'webp' | 'avif' | 'jpeg' | 'png';
+
+export type RemotePattern = {
+	protocol?: 'http' | 'https';
+	hostname: string;
+	port?: string;
+	pathname?: string;
+};
+
+export type ImageLoaderParams = {
+	src: string;
+	width: number;
+	quality: number;
+};
+
+export type ImageLoader = (params: ImageLoaderParams) => string;
+
+export type ImageConfig = {
+	/** Breakpoints for device-width responsive images (default: [640, 750, 828, 1080, 1200, 1920, 2048, 3840]) */
+	deviceSizes?: number[];
+	/** Breakpoints for fixed-width images (default: [16, 32, 48, 64, 96, 128, 256, 384]) */
+	imageSizes?: number[];
+	/** Output formats in preference order (default: ['webp']). Add 'avif' for smaller files at slower encode. */
+	formats?: ImageFormat[];
+	/** Minimum cache TTL in seconds (default: 60) */
+	minimumCacheTTL?: number;
+	/** Allowed remote image origins */
+	remotePatterns?: RemotePattern[];
+	/** Default quality 1-100 (default: 75) */
+	quality?: number;
+	/** Custom URL builder — overrides the default optimization endpoint */
+	loader?: ImageLoader;
+	/** Optimization endpoint path (default: '/_absolute/image') */
+	path?: string;
+	/** Globally disable image optimization — serve images as-is */
+	unoptimized?: boolean;
+};
+
+export type ImageProps = {
+	/** Image source URL or path */
+	src: string;
+	/** Alt text for accessibility (required) */
+	alt: string;
+	/** Intrinsic width in pixels (required unless fill) */
+	width?: number;
+	/** Intrinsic height in pixels (required unless fill) */
+	height?: number;
+	/** Fill parent container with position: absolute */
+	fill?: boolean;
+	/** Quality 1-100 (default: 75) */
+	quality?: number;
+	/** Responsive sizes attribute (e.g., "(max-width: 768px) 100vw, 50vw") */
+	sizes?: string;
+	/** Custom URL builder for this image */
+	loader?: ImageLoader;
+	/** Bypass optimization for this image */
+	unoptimized?: boolean;
+	/** Loading strategy (default: "lazy") */
+	loading?: 'lazy' | 'eager';
+	/** Add <link rel="preload"> and set loading="eager" + fetchPriority="high" */
+	priority?: boolean;
+	/** Placeholder while loading: "blur" uses blurDataURL, "empty" shows nothing, or pass a data URI */
+	placeholder?: 'blur' | 'empty' | string;
+	/** Base64 blur placeholder data URI (auto-generated for build-time images) */
+	blurDataURL?: string;
+	/** CSS class name */
+	className?: string;
+	/** Inline styles */
+	style?: Record<string, string | number>;
+	/** Callback when image loads */
+	onLoad?: (() => void) | ((event: Event) => void);
+	/** Callback on load error */
+	onError?: (() => void) | ((event: Event) => void);
+	/** CORS setting */
+	crossOrigin?: 'anonymous' | 'use-credentials' | '';
+	/** Referrer policy */
+	referrerPolicy?:
+		| ''
+		| 'no-referrer'
+		| 'no-referrer-when-downgrade'
+		| 'origin'
+		| 'origin-when-cross-origin'
+		| 'same-origin'
+		| 'strict-origin'
+		| 'strict-origin-when-cross-origin'
+		| 'unsafe-url';
+	/** Fetch priority hint */
+	fetchPriority?: 'high' | 'low' | 'auto';
+	/** Override the final src attribute on the rendered <img> */
+	overrideSrc?: string;
+};

package/types/index.ts

@@ -2,6 +2,7 @@ export * from './angular';
 export * from './build';
 export * from './cli';
 export * from './client';
+export * from './image';
 export * from './messages';
 export * from './telemetry';
 export * from './tool';