@ryusenkei/maezae 0.3.1 → 0.4.0

package/dist/delivery.js

@@ -116,18 +116,129 @@ function createDeliveryClient(delivery, { drafts = false, at } = {}) {
 		prefetch
 	};
 }
+// ../model/src/mediaUrl.ts
+/** 配信する形式と拡張子 */
+const EXTENSIONS = {
+	"image/jpeg": "jpg",
+	"image/png": "png",
+	"image/webp": "webp",
+	"image/gif": "gif",
+	"video/mp4": "mp4",
+	"video/webm": "webm"
+};
+/** 拡張子の形式（配信しない拡張子は null） */
+const mediaMimeOf = (ext) => Object.entries(EXTENSIONS).find(([, e]) => e === ext)?.[0] ?? null;
+const IMAGE_PATH = /^\/images\/([A-Za-z0-9_-]+)\/([A-Za-z0-9_-]+)-(\d+)x(\d+)\.([a-z0-9]+)$/;
+const VIDEO_PATH = /^\/videos\/([A-Za-z0-9_-]+)\/([A-Za-z0-9_-]+)\.([a-z0-9]+)$/;
+/** 配信 URL のパスを解析（形が違えば null） */
+function parseMediaPath(pathname) {
+	const image = IMAGE_PATH.exec(pathname);
+	if (image) {
+		const [, tenant, id, width, height, ext] = image;
+		return mediaMimeOf(ext)?.startsWith("image/") ? {
+			kind: "image",
+			tenant,
+			id,
+			ext,
+			width: Number(width),
+			height: Number(height)
+		} : null;
+	}
+	const video = VIDEO_PATH.exec(pathname);
+	if (video) {
+		const [, tenant, id, ext] = video;
+		return mediaMimeOf(ext)?.startsWith("video/") ? {
+			kind: "video",
+			tenant,
+			id,
+			ext
+		} : null;
+	}
+	return null;
+}
+/** 幅・高さの上限（画素） */
+const IMAGE_SIZE_MAX = 4096;
+const FITS = [
+	"scale-down",
+	"contain",
+	"cover",
+	"crop",
+	"pad"
+];
+const FORMATS = [
+	"jpg",
+	"png",
+	"webp",
+	"avif"
+];
+/** URL に画像の変換のクエリを設定（ほかのクエリは残す） */
+function withImageParams(url, params) {
+	const u = new URL(url);
+	const { rect, ...rest } = params;
+	for (const [k, v] of Object.entries(rest)) if (v !== void 0) u.searchParams.set(k, String(v));
+	if (rect) u.searchParams.set("rect", [
+		rect.left,
+		rect.top,
+		rect.width,
+		rect.height
+	].map(Math.round).join(","));
+	return u.href;
+}
+const intIn = (v, min, max) => {
+	if (v === null) return void 0;
+	if (!/^\d+$/.test(v)) return null;
+	const n = Number(v);
+	return n >= min && n <= max ? n : null;
+};
+/** クエリから画像の変換（不正な値があれば null、変換なしは空のオブジェクト） */
+function imageParamsOf(query) {
+	const w = intIn(query.get("w"), 1, IMAGE_SIZE_MAX);
+	const h = intIn(query.get("h"), 1, IMAGE_SIZE_MAX);
+	const q = intIn(query.get("q"), 1, 100);
+	if (w === null || h === null || q === null) return null;
+	const fit = query.get("fit");
+	const fm = query.get("fm");
+	const auto = query.get("auto");
+	if (fit !== null && !FITS.includes(fit) || fm !== null && !FORMATS.includes(fm) || auto !== null && auto !== "format") return null;
+	const rectValue = query.get("rect");
+	let rect;
+	if (rectValue !== null) {
+		const parts = rectValue.split(",");
+		if (parts.length !== 4 || !parts.every((p) => /^\d+$/.test(p))) return null;
+		const [left, top, width, height] = parts.map(Number);
+		if (width < 1 || height < 1) return null;
+		rect = {
+			left,
+			top,
+			width,
+			height
+		};
+	}
+	return {
+		...w !== void 0 && { w },
+		...h !== void 0 && { h },
+		...q !== void 0 && { q },
+		...fit !== null && { fit },
+		...fm !== null && { fm },
+		...auto !== null && { auto: "format" },
+		...rect && { rect }
+	};
+}
 // ../delivery-client/src/media.ts
+/** 配信 URL の画像の切り抜き（クエリ rect、範囲なしは元の URL） */
+const deliveredImageUrl = (src, rect) => rect ? withImageParams(src, { rect }) : src;
 /**
 * 実体から表示の素材への変換（動画は代わりの画像も）
-* - base: 実体の URL の前半（URL は base/<ID>）
-* - 画像の変換: imageUrl があれば画像（動画の実体は除く）を変換の URL に、切り抜きは切り抜いた画像の URL・寸法・見せたい点
-* - imageUrl なし: 元の画像のまま（手元の開発）
+* - URL: 実体の url、なしは base/<ID>（base は実体の URL の前半）
+* - 画像の変換: imageUrl で画像（動画の実体は除く）を変換の URL に、url のある実体の既定は deliveredImageUrl、切り抜きは切り抜いた画像の URL・寸法・見せたい点
+* - url も imageUrl もない: 元の画像のまま（手元の開発）
 */
 function mediaOf(base, imageUrl) {
 	const still = (a) => {
-		const src = `${base}/${a.id}`;
+		const src = a.url ?? `${base}/${a.id}`;
+		const transform = imageUrl ?? (a.url ? deliveredImageUrl : void 0);
 		const alt = a.alt ?? "";
-		if (!imageUrl || a.kind !== "image") return {
+		if (!transform || a.kind !== "image") return {
 			src,
 			width: a.width,
 			height: a.height,
@@ -135,7 +246,7 @@ function mediaOf(base, imageUrl) {
 			...a.hotspot ? { hotspot: a.hotspot } : {}
 		};
 		if (!a.crop) return {
-			src: imageUrl(src),
+			src: transform(src),
 			width: a.width,
 			height: a.height,
 			alt,
@@ -143,7 +254,7 @@ function mediaOf(base, imageUrl) {
 		};
 		const rect = cropRect(a.width, a.height, a.crop);
 		return {
-			src: imageUrl(src, rect),
+			src: transform(src, rect),
 			width: rect.width,
 			height: rect.height,
 			alt,
@@ -196,4 +307,4 @@ function createDeliveryClock(timeZone) {
 		})
 	};
 }
-export { DELIVERY_PATH, DeliveryError, createDeliveryClient, createDeliveryClock, fieldOf, limitOf, listParams, mediaOf, optionLabels, pagePath, subPath };
+export { DELIVERY_PATH, DeliveryError, createDeliveryClient, createDeliveryClock, deliveredImageUrl, fieldOf, imageParamsOf, limitOf, listParams, mediaOf, optionLabels, pagePath, parseMediaPath, subPath, withImageParams };

package/dist/types/delivery-client/src/index.d.ts

@@ -1,5 +1,6 @@
 export { createDeliveryClient, DELIVERY_PATH, DeliveryError, subPath, type BundleResult, type Delivery, type DeliveryClient, type Prefetched } from './client.js';
-export { mediaOf, type ImageUrl, type MediaOf } from './media.js';
+export { deliveredImageUrl, mediaOf, type ImageUrl, type MediaOf } from './media.js';
+export { imageParamsOf, parseMediaPath, withImageParams, type ImageParams, type MediaPath } from '../../model/src/index.js';
 export { listParams, type ListFilter, type ListQuery, type Page } from './query.js';
 export { createDeliveryClock, fieldOf, limitOf, optionLabels, pagePath, type DeliveryClock } from './schema.js';
 export type { DeliveredAsset, FieldValue, Item, ItemOf } from './values.js';

package/dist/types/delivery-client/src/media.d.ts

@@ -1,12 +1,14 @@
 import { type CropRect, type Media } from '../../model/src/index.js';
 /** 配信する画像の URL（元の URL と、元画像の画素での切り抜きの範囲から、配信の側で変換する URL） */
 export type ImageUrl = (src: string, rect?: CropRect) => string;
+/** 配信 URL の画像の切り抜き（クエリ rect、範囲なしは元の URL） */
+export declare const deliveredImageUrl: ImageUrl;
 /** 実体から表示の素材（見つからない実体はなし） */
 export type MediaOf = (asset: unknown) => Media | undefined;
 /**
  * 実体から表示の素材への変換（動画は代わりの画像も）
- * - base: 実体の URL の前半（URL は base/<ID>）
- * - 画像の変換: imageUrl があれば画像（動画の実体は除く）を変換の URL に、切り抜きは切り抜いた画像の URL・寸法・見せたい点
- * - imageUrl なし: 元の画像のまま（手元の開発）
+ * - URL: 実体の url、なしは base/<ID>（base は実体の URL の前半）
+ * - 画像の変換: imageUrl で画像（動画の実体は除く）を変換の URL に、url のある実体の既定は deliveredImageUrl、切り抜きは切り抜いた画像の URL・寸法・見せたい点
+ * - url も imageUrl もない: 元の画像のまま（手元の開発）
  */
 export declare function mediaOf(base: string, imageUrl?: ImageUrl): MediaOf;

package/dist/types/delivery-client/src/values.d.ts

@@ -2,10 +2,11 @@ import type { Body } from '../../body/src/index.js';
 import type { ContentType, Crop, DateString, FieldDef, Hotspot } from '../../model/src/index.js';
 /** 配信 API の1件の値（項目の key と id・updated_at） */
 export type Item = Readonly<Record<string, unknown>>;
-/** 配信 API が解決した実体（hotspot・crop は元の画像に対する割合） */
+/** 配信 API が解決した実体（url は配信 URL で配信のオリジンがある CMS だけ、hotspot・crop は元の画像に対する割合） */
 export type DeliveredAsset = Readonly<{
     id: string;
     kind: 'image' | 'video';
+    url?: string;
     width: number;
     height: number;
     alt: string;

package/dist/types/model/src/index.d.ts

@@ -2,6 +2,7 @@ export { fieldZod, jsonSchemaOf, normalizeValues, zodOf, type ValueOptions } fro
 export { assetRefSchema, cropSchema, hotspotSchema, mediaSchema, type Asset, type AssetRef, type Crop, type Hotspot, type LocalImage, type Media } from './asset.js';
 export { coverPosition, coverStart, cropRect, croppedHotspot, objectPosition, stillOf, type CropRect } from './image.js';
 export { IMAGE_TYPE, VIDEO_TYPE } from './media.js';
+export { IMAGE_SIZE_MAX, imageParamsOf, mediaExtOf, mediaMimeOf, mediaPathOf, parseMediaPath, withImageParams, type ImageParams, type MediaPath } from './mediaUrl.js';
 export { diffSchema, withFixed, type ChangeKind, type ChangeLevel, type DiffOptions, type SchemaChange } from './changes.js';
 export { requiredTypeWithTrait, tableTraitsOf, typeWithTrait, type TableTraits } from './capabilities.js';
 export { appliesTo, checkFields, fieldsFor } from './check.js';

package/dist/types/model/src/mediaUrl.d.ts

@@ -0,0 +1,41 @@
+import type { CropRect } from './image.js';
+/** 形式の拡張子（配信しない形式は null） */
+export declare const mediaExtOf: (mimeType: string) => string | null;
+/** 拡張子の形式（配信しない拡張子は null） */
+export declare const mediaMimeOf: (ext: string) => string | null;
+/** 配信 URL のパスの要素（寸法は画像だけ） */
+export type MediaPath = Readonly<{
+    kind: 'image' | 'video';
+    tenant: string;
+    id: string;
+    ext: string;
+    width?: number;
+    height?: number;
+}>;
+/** 配信 URL のパス（媒体・ID の形が不正、配信しない形式なら null） */
+export declare function mediaPathOf({ kind, tenant, id, mimeType, width, height }: Readonly<{
+    kind: 'image' | 'video';
+    tenant: string;
+    id: string;
+    mimeType: string;
+    width: number;
+    height: number;
+}>): string | null;
+/** 配信 URL のパスを解析（形が違えば null） */
+export declare function parseMediaPath(pathname: string): MediaPath | null;
+/** 画像の変換のクエリ（w・h は表示の画素、rect は元の画像の画素での切り抜き、auto=format はブラウザに合わせた形式） */
+export type ImageParams = Readonly<{
+    w?: number;
+    h?: number;
+    fit?: 'scale-down' | 'contain' | 'cover' | 'crop' | 'pad';
+    rect?: CropRect;
+    q?: number;
+    fm?: 'jpg' | 'png' | 'webp' | 'avif';
+    auto?: 'format';
+}>;
+/** 幅・高さの上限（画素） */
+export declare const IMAGE_SIZE_MAX = 4096;
+/** URL に画像の変換のクエリを設定（ほかのクエリは残す） */
+export declare function withImageParams(url: string, params: ImageParams): string;
+/** クエリから画像の変換（不正な値があれば null、変換なしは空のオブジェクト） */
+export declare function imageParamsOf(query: URLSearchParams): ImageParams | null;

package/dist/types/sdk/src/delivery.d.ts

@@ -1,2 +1,2 @@
-export { createDeliveryClient, createDeliveryClock, DELIVERY_PATH, DeliveryError, fieldOf, limitOf, listParams, mediaOf, optionLabels, pagePath, subPath } from '../../delivery-client/src/index.js';
-export type { BundleResult, DeliveredAsset, Delivery, DeliveryClient, DeliveryClock, FieldValue, ImageUrl, Item, ItemOf, ListFilter, ListQuery, MediaOf, Page, Prefetched } from '../../delivery-client/src/index.js';
+export { createDeliveryClient, createDeliveryClock, deliveredImageUrl, DELIVERY_PATH, DeliveryError, fieldOf, imageParamsOf, limitOf, listParams, mediaOf, optionLabels, pagePath, parseMediaPath, subPath, withImageParams } from '../../delivery-client/src/index.js';
+export type { BundleResult, DeliveredAsset, Delivery, DeliveryClient, DeliveryClock, FieldValue, ImageParams, ImageUrl, Item, ItemOf, ListFilter, ListQuery, MediaOf, MediaPath, Page, Prefetched } from '../../delivery-client/src/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ryusenkei/maezae",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "maezae の導入先のサイト向けの SDK（配信 API の取得・本文の型・プレビューの署名）",
   "license": "UNLICENSED",
   "author": "RYUSENKEI",