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

package/dist/svelte/components/Head.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import type { Metadata, RobotsDirective } from '../../../types/metadata';
+
+	let {
+		title = 'AbsoluteJS',
+		description = 'A page created using AbsoluteJS',
+		icon = '/assets/ico/favicon.ico',
+		font,
+		cssPath,
+		canonical,
+		openGraph,
+		twitter,
+		robots,
+		meta
+	}: Metadata = $props();
+
+	const robotsContent = (r: RobotsDirective) => {
+		const directives: string[] = [];
+		if (r.index === false) directives.push('noindex');
+		if (r.index === true) directives.push('index');
+		if (r.follow === false) directives.push('nofollow');
+		if (r.follow === true) directives.push('follow');
+		if (r.noarchive) directives.push('noarchive');
+		if (r.nosnippet) directives.push('nosnippet');
+		if (r.noimageindex) directives.push('noimageindex');
+		if (r.maxSnippet !== undefined)
+			directives.push(`max-snippet:${r.maxSnippet}`);
+		if (r.maxImagePreview)
+			directives.push(`max-image-preview:${r.maxImagePreview}`);
+		if (r.maxVideoPreview !== undefined)
+			directives.push(`max-video-preview:${r.maxVideoPreview}`);
+		return directives.join(', ');
+	};
+
+	const cssPaths = $derived(
+		cssPath ? (Array.isArray(cssPath) ? cssPath : [cssPath]) : []
+	);
+</script>
+
+<svelte:head>
+	<meta charset="utf-8" />
+	<title>{title}</title>
+	<meta name="description" content={description} />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<link rel="icon" href={icon} />
+
+	{#if canonical}
+		<link rel="canonical" href={canonical} />
+	{/if}
+
+	{#if openGraph}
+		<meta property="og:title" content={openGraph.title ?? title} />
+		<meta
+			property="og:description"
+			content={openGraph.description ?? description}
+		/>
+		{#if openGraph.url}
+			<meta property="og:url" content={openGraph.url} />
+		{/if}
+		{#if openGraph.image}
+			<meta property="og:image" content={openGraph.image} />
+		{/if}
+		{#if openGraph.imageAlt}
+			<meta property="og:image:alt" content={openGraph.imageAlt} />
+		{/if}
+		{#if openGraph.imageWidth}
+			<meta
+				property="og:image:width"
+				content={String(openGraph.imageWidth)}
+			/>
+		{/if}
+		{#if openGraph.imageHeight}
+			<meta
+				property="og:image:height"
+				content={String(openGraph.imageHeight)}
+			/>
+		{/if}
+		{#if openGraph.type}
+			<meta property="og:type" content={openGraph.type} />
+		{/if}
+		{#if openGraph.siteName}
+			<meta property="og:site_name" content={openGraph.siteName} />
+		{/if}
+		{#if openGraph.locale}
+			<meta property="og:locale" content={openGraph.locale} />
+		{/if}
+	{/if}
+
+	{#if twitter}
+		{#if twitter.card}
+			<meta name="twitter:card" content={twitter.card} />
+		{/if}
+		<meta name="twitter:title" content={twitter.title ?? title} />
+		<meta
+			name="twitter:description"
+			content={twitter.description ?? description}
+		/>
+		{#if twitter.image}
+			<meta name="twitter:image" content={twitter.image} />
+		{/if}
+		{#if twitter.imageAlt}
+			<meta name="twitter:image:alt" content={twitter.imageAlt} />
+		{/if}
+		{#if twitter.site}
+			<meta name="twitter:site" content={twitter.site} />
+		{/if}
+		{#if twitter.creator}
+			<meta name="twitter:creator" content={twitter.creator} />
+		{/if}
+	{/if}
+
+	{#if robots}
+		{@const content = robotsContent(robots)}
+		{#if content}
+			<meta name="robots" {content} />
+		{/if}
+	{/if}
+
+	{#if meta}
+		{#each meta as tag}
+			{#if tag.property}
+				<meta property={tag.property} content={tag.content} />
+			{:else if tag.httpEquiv}
+				<meta http-equiv={tag.httpEquiv} content={tag.content} />
+			{:else if tag.name}
+				<meta name={tag.name} content={tag.content} />
+			{/if}
+		{/each}
+	{/if}
+
+	{#if font}
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link
+			rel="preconnect"
+			href="https://fonts.gstatic.com"
+			crossOrigin="anonymous"
+		/>
+		<link
+			href={`https://fonts.googleapis.com/css2?family=${font}:wght@100..900&display=swap`}
+			rel="stylesheet"
+		/>
+	{/if}
+
+	{#each cssPaths as path}
+		<link rel="stylesheet" href={path} type="text/css" />
+	{/each}
+</svelte:head>

package/dist/svelte/components/Image.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+	import type { ImageProps } from '../../../types/image';
+	import {
+		DEFAULT_QUALITY,
+		buildOptimizedUrl,
+		generateBlurSvg,
+		generateSrcSet
+	} from '../../utils/imageProcessing';
+
+	let {
+		src,
+		alt,
+		width,
+		height,
+		fill,
+		quality = DEFAULT_QUALITY,
+		sizes,
+		loader,
+		unoptimized,
+		loading,
+		priority,
+		placeholder,
+		blurDataURL,
+		className,
+		style,
+		onLoad,
+		onError,
+		crossOrigin,
+		referrerPolicy,
+		fetchPriority,
+		overrideSrc
+	}: ImageProps = $props();
+
+	const resolvedSrc = $derived.by(() => {
+		if (overrideSrc) return overrideSrc;
+		if (unoptimized) return src;
+		if (loader) return loader({ src, width: width ?? 0, quality });
+		if (!width) return buildOptimizedUrl(src, 0, quality);
+		return buildOptimizedUrl(src, width, quality);
+	});
+
+	const srcSet = $derived(
+		unoptimized
+			? undefined
+			: generateSrcSet(src, width, sizes, undefined, loader ?? undefined)
+	);
+
+	const resolvedSizes = $derived(sizes ?? (fill ? '100vw' : undefined));
+
+	const resolvedLoading = $derived(priority ? 'eager' : (loading ?? 'lazy'));
+
+	const resolvedFetchPriority = $derived(priority ? 'high' : fetchPriority);
+
+	const hasBlur = $derived(
+		placeholder === 'blur' ||
+			(typeof placeholder === 'string' &&
+				placeholder !== 'empty' &&
+				placeholder.startsWith('data:'))
+	);
+
+	const blurBackground = $derived.by(() => {
+		if (!hasBlur) return undefined;
+		if (
+			typeof placeholder === 'string' &&
+			placeholder !== 'blur' &&
+			placeholder.startsWith('data:')
+		) {
+			return generateBlurSvg(placeholder);
+		}
+		if (blurDataURL) return generateBlurSvg(blurDataURL);
+		return undefined;
+	});
+
+	const imgStyle = $derived.by(() => {
+		const base: Record<string, string | number> = {
+			...(style ?? {}),
+			color: 'transparent'
+		};
+		if (blurBackground) {
+			base.backgroundImage = blurBackground;
+			base.backgroundSize = 'cover';
+			base.backgroundPosition = 'center';
+			base.backgroundRepeat = 'no-repeat';
+		}
+		if (fill) {
+			base.position = 'absolute';
+			base.height = '100%';
+			base.width = '100%';
+			base.inset = 0;
+			base.objectFit = 'cover';
+		}
+		return Object.entries(base)
+			.map(([k, v]) => `${k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}:${v}`)
+			.join(';');
+	});
+
+	const handleLoad = (e: Event) => {
+		if (blurBackground) {
+			(e.target as HTMLImageElement).style.backgroundImage = 'none';
+		}
+		if (onLoad) (onLoad as (event: Event) => void)(e);
+	};
+
+	const handleError = (e: Event) => {
+		if (onError) (onError as (event: Event) => void)(e);
+	};
+</script>
+
+{#if priority}
+	<svelte:head>
+		<link
+			rel="preload"
+			as="image"
+			href={resolvedSrc}
+			imagesrcset={srcSet}
+			imagesizes={resolvedSizes}
+			crossorigin={crossOrigin}
+		/>
+	</svelte:head>
+{/if}
+
+{#if fill}
+	<span style="position:relative;overflow:hidden;display:block;width:100%;height:100%">
+		<img
+			{alt}
+			src={resolvedSrc}
+			srcset={srcSet}
+			sizes={resolvedSizes}
+			loading={resolvedLoading}
+			class={className}
+			style={imgStyle}
+			crossorigin={crossOrigin}
+			referrerpolicy={referrerPolicy}
+			fetchpriority={resolvedFetchPriority}
+			decoding="async"
+			onload={handleLoad}
+			onerror={handleError}
+		/>
+	</span>
+{:else}
+	<img
+		{alt}
+		src={resolvedSrc}
+		srcset={srcSet}
+		sizes={resolvedSizes}
+		{width}
+		{height}
+		loading={resolvedLoading}
+		class={className}
+		style={imgStyle}
+		crossorigin={crossOrigin}
+		referrerpolicy={referrerPolicy}
+		fetchpriority={resolvedFetchPriority}
+		decoding="async"
+		onload={handleLoad}
+		onerror={handleError}
+	/>
+{/if}

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/package.json

@@ -78,13 +78,13 @@
 			"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": "./src/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",
@@ -175,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/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",
+		"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",
@@ -189,5 +189,5 @@
 		"typecheck": "bun run vue-tsc --noEmit"
 	},
 	"types": "./dist/src/index.d.ts",
-	"version": "0.19.0-beta.177"
+	"version": "0.19.0-beta.178"
 }