@lonik/oh-image 1.2.8 → 2.0.0

package/dist/plugin.d.ts

@@ -2,7 +2,7 @@ import { FormatEnum } from "sharp";
 import { Plugin } from "vite";
 
 //#region src/plugin/types.d.ts
-interface PluginConfig extends Required<Pick<ImageOptions, "placeholder" | "bps" | "format">> {
+interface PluginConfig extends Required<Pick<ImageOptions, "placeholder" | "breakpoints" | "format">> {
   /** Directory name where processed images will be output during build */
   distDir: string;
 }
@@ -16,7 +16,27 @@ interface ImageOptions {
   /** Whether to generate a placeholder image for lazy loading */
   placeholder?: boolean;
   /** Breakpoints array - widths in pixels for responsive srcSet generation */
-  bps?: number[];
+  breakpoints?: number[];
+  /** Blur the image */
+  blur?: number | null;
+  /** Flip the image vertically */
+  flip?: boolean | null;
+  /** Flop the image horizontally */
+  flop?: boolean | null;
+  /** Rotate the image */
+  rotate?: number | null;
+  /** Sharpen the image */
+  sharpen?: number | null;
+  /** Apply median filter */
+  median?: number | null;
+  /** Apply gamma correction */
+  gamma?: number | null;
+  /** Negate the image */
+  negate?: boolean | null;
+  /** Normalize the image */
+  normalize?: boolean | null;
+  /** Apply threshold */
+  threshold?: number | null;
 }
 //#endregion
 //#region src/plugin/plugin.d.ts

package/dist/plugin.js

@@ -16,7 +16,19 @@ function queryToOptions(processKey, uri) {
 		parseBooleans: true,
 		parseNumbers: true,
 		arrayFormat: "comma",
-		types: { bps: "number[]" }
+		types: {
+			breakpoints: "number[]",
+			blur: "number",
+			flip: "boolean",
+			flop: "boolean",
+			rotate: "number",
+			sharpen: "number",
+			median: "number",
+			gamma: "number",
+			negate: "boolean",
+			normalize: "boolean",
+			threshold: "number"
+		}
 	});
 	if (processKey in parsed) return {
 		shouldProcess: true,
@@ -94,7 +106,17 @@ function createImageEntries() {
 				width: entry.width,
 				height: entry.height,
 				format: entry.format,
-				origin: entry.origin
+				origin: entry.origin,
+				blur: entry.blur,
+				flip: entry.flip,
+				flop: entry.flop,
+				rotate: entry.rotate,
+				sharpen: entry.sharpen,
+				median: entry.median,
+				gamma: entry.gamma,
+				negate: entry.negate,
+				normalize: entry.normalize,
+				threshold: entry.threshold
 			};
 			this.set(identifier, mainEntry);
 		},
@@ -113,7 +135,16 @@ function createImageEntries() {
 				height: placeholderHeight,
 				format: main.format,
 				blur: PLACEHOLDER_BLUR_QUALITY,
-				origin: main.origin
+				origin: main.origin,
+				flip: main.flip,
+				flop: main.flop,
+				rotate: main.rotate,
+				sharpen: main.sharpen,
+				median: main.median,
+				gamma: main.gamma,
+				negate: main.negate,
+				normalize: main.normalize,
+				threshold: main.threshold
 			};
 			this.set(identifier, placeholderEntry);
 		},
@@ -133,6 +164,15 @@ async function processImage(path, options) {
 	});
 	if (options.format) processed = processed.toFormat(options.format);
 	if (options.blur) processed = processed.blur(options.blur);
+	if (options.flip) processed = processed.flip();
+	if (options.flop) processed = processed.flop();
+	if (options.rotate) processed = processed.rotate(options.rotate);
+	if (options.sharpen) processed = processed.sharpen(options.sharpen);
+	if (options.median) processed = processed.median(options.median);
+	if (options.gamma) processed = processed.gamma(options.gamma);
+	if (options.negate) processed = processed.negate();
+	if (options.normalize) processed = processed.normalize();
+	if (options.threshold) processed = processed.threshold(options.threshold);
 	return await processed.toBuffer();
 }
 
@@ -141,7 +181,7 @@ async function processImage(path, options) {
 const DEFAULT_IMAGE_FORMAT = "webp";
 const DEFAULT_CONFIGS = {
 	distDir: "oh-images",
-	bps: [
+	breakpoints: [
 		16,
 		48,
 		96,
@@ -229,7 +269,17 @@ function ohImage(options) {
 						width: mergedOptions.width,
 						height: mergedOptions.height,
 						format: mergedOptions.format,
-						origin
+						origin,
+						blur: mergedOptions.blur,
+						flip: mergedOptions.flip,
+						flop: mergedOptions.flop,
+						rotate: mergedOptions.rotate,
+						sharpen: mergedOptions.sharpen,
+						median: mergedOptions.median,
+						gamma: mergedOptions.gamma,
+						negate: mergedOptions.negate,
+						normalize: mergedOptions.normalize,
+						threshold: mergedOptions.threshold
 					});
 					const src = {
 						width: metadata.width,
@@ -237,24 +287,43 @@ function ohImage(options) {
 						src: mainIdentifier,
 						srcSets: ""
 					};
-					if (parsed.options?.placeholder) {
+					if (mergedOptions.placeholder) {
 						const placeholderIdentifier = identifier.placeholder(DEFAULT_IMAGE_FORMAT);
 						imageEntries.createPlaceholderEntry(placeholderIdentifier, {
 							width: metadata.width,
 							height: metadata.height,
 							format: DEFAULT_IMAGE_FORMAT,
-							origin
+							origin,
+							flip: mergedOptions.flip,
+							flop: mergedOptions.flop,
+							rotate: mergedOptions.rotate,
+							sharpen: mergedOptions.sharpen,
+							median: mergedOptions.median,
+							gamma: mergedOptions.gamma,
+							negate: mergedOptions.negate,
+							normalize: mergedOptions.normalize,
+							threshold: mergedOptions.threshold
 						});
 						src.placeholderUrl = placeholderIdentifier;
 					}
-					if (mergedOptions.bps) {
+					if (mergedOptions.breakpoints) {
 						const srcSets = [];
-						for (const breakpoint of mergedOptions.bps) {
+						for (const breakpoint of mergedOptions.breakpoints) {
 							const srcSetIdentifier = identifier.srcSet(DEFAULT_IMAGE_FORMAT, breakpoint);
 							imageEntries.createSrcSetEntry(srcSetIdentifier, {
 								width: breakpoint,
 								format: DEFAULT_IMAGE_FORMAT,
-								origin
+								origin,
+								blur: mergedOptions.blur,
+								flip: mergedOptions.flip,
+								flop: mergedOptions.flop,
+								rotate: mergedOptions.rotate,
+								sharpen: mergedOptions.sharpen,
+								median: mergedOptions.median,
+								gamma: mergedOptions.gamma,
+								negate: mergedOptions.negate,
+								normalize: mergedOptions.normalize,
+								threshold: mergedOptions.threshold
 							});
 							srcSets.push(`${srcSetIdentifier} ${breakpoint}w`);
 						}

package/dist/react.d.ts

@@ -2,8 +2,15 @@ import { ImgHTMLAttributes } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/react/types.d.ts
+interface ImageLoaderOptions {
+  src: string;
+  width?: number | null | undefined;
+  height?: number | null | undefined;
+  isPlaceholder?: boolean;
+}
+type ImageLoader = (options: ImageLoaderOptions) => string;
 type ImageSrcType = string | ImageSrc;
-interface ImageProps extends Partial<Pick<ImgHTMLAttributes<HTMLImageElement>, "fetchPriority" | "decoding" | "loading" | "height" | "width" | "srcSet" | "className" | "sizes" | "style">> {
+interface ImageProps extends Partial<Pick<ImgHTMLAttributes<HTMLImageElement>, "fetchPriority" | "decoding" | "loading" | "srcSet" | "className" | "sizes" | "style">> {
   /** Alternative text for the image, required for accessibility. Use an empty string for decorative images. */
   alt: string;
   /** Configures the Image component to load the image immediately. */
@@ -17,6 +24,10 @@ interface ImageProps extends Partial<Pick<ImgHTMLAttributes<HTMLImageElement>, "
    * styles such that the image fills its containing element.
    */
   fill?: boolean;
+  loader?: ImageLoader | null;
+  width?: number | undefined;
+  height?: number | undefined;
+  breakpoints?: number[];
 }
 //#endregion
 //#region src/react/image.d.ts
@@ -51,4 +62,58 @@ declare function Image(props: ImageProps): react_jsx_runtime0.JSX.Element;
  */
 declare function useImgLoaded(src: string | undefined): [(img: HTMLImageElement | null) => void, boolean];
 //#endregion
-export { Image, type ImageProps, useImgLoaded };
+//#region src/react/loaders/cloudflare-context.d.ts
+interface CloudflareLoaderOptions {
+  path: string;
+  placeholder: boolean;
+  format: string;
+  params?: Record<string, string>;
+  placeholderParams?: Record<string, string>;
+  breakpoints?: number[];
+}
+declare function useCloudflareContext(): CloudflareLoaderOptions;
+declare function CloudflareLoaderProvider({
+  children,
+  ...props
+}: {
+  children: React.ReactNode;
+} & Partial<CloudflareLoaderOptions>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/react/loaders/cloudflare-loader.d.ts
+declare function useCloudflareLoader(options?: Partial<CloudflareLoaderOptions>): ImageLoader;
+//#endregion
+//#region src/react/loaders/imgproxy-context.d.ts
+interface ImgproxyLoaderOptions {
+  path: string;
+  placeholder: boolean;
+  format: string;
+  params?: Record<string, string>;
+  placeholderParams?: Record<string, string>;
+  breakpoints?: number[];
+  paramsSeparator?: string;
+}
+declare function useImgproxyContext(): ImgproxyLoaderOptions;
+declare function ImgproxyLoaderProvider({
+  children,
+  ...props
+}: {
+  children: React.ReactNode;
+} & Partial<ImgproxyLoaderOptions>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/react/loaders/imgproxy-loader.d.ts
+declare function useImgproxyLoader(options?: Partial<ImgproxyLoaderOptions>): ImageLoader;
+//#endregion
+//#region src/react/image-context.d.ts
+interface ImageContextValue extends Pick<ImageProps, "loading"> {
+  breakpoints: number[];
+  loader: ImageLoader | null;
+}
+declare function useImageContext(): ImageContextValue;
+declare function ImageProvider({
+  children,
+  ...props
+}: {
+  children: React.ReactNode;
+} & Partial<ImageContextValue>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { type CloudflareLoaderOptions, CloudflareLoaderProvider, Image, type ImageLoader, type ImageLoaderOptions, type ImageProps, ImageProvider, type ImageSrcType, type ImgproxyLoaderOptions, ImgproxyLoaderProvider, useCloudflareContext, useCloudflareLoader, useImageContext, useImgLoaded, useImgproxyContext, useImgproxyLoader };

package/dist/react.js

@@ -1,5 +1,5 @@
 import * as ReactDOM from "react-dom";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/react/use-img-loaded.ts
@@ -79,30 +79,168 @@ function useImgLoaded(src) {
 }
 
 //#endregion
-//#region src/react/image.tsx
-const preload = "preload" in ReactDOM && typeof ReactDOM.preload === "function" ? ReactDOM.preload : null;
-function resolveOptions(props) {
-	const { src, ...rest } = props;
-	const resolved = { ...rest };
-	if (typeof src === "object") {
-		resolved.src = src.src;
-		resolved.width ??= src.width;
-		resolved.height ??= src.height;
-		resolved.srcSet ??= src.srcSets;
-		resolved.placeholderUrl ??= src.placeholderUrl;
-	} else resolved.src = src;
-	if (props.asap) {
-		resolved.decoding = "async";
-		resolved.loading = "eager";
-		resolved.fetchPriority = "high";
-		if (preload) preload(resolved.src, {
-			as: "image",
-			fetchPriority: "high"
-		});
-	}
-	if (props.fill) resolved.sizes ||= "100vw";
+//#region src/react/prop-resolvers.ts
+/**
+* RegExpr to determine whether a src in a srcset is using width descriptors.
+* Should match something like: "100w, 200w".
+*/
+const VALID_WIDTH_DESCRIPTOR_SRCSET = /^((\s*\d+w\s*(,|$)){1,})$/;
+function resolveOptions(prop, defaultOptions) {
+	const resolved = {
+		...defaultOptions,
+		...prop
+	};
+	resolved.decoding = resolveDecoding(resolved);
+	resolved.fetchPriority = resolveFetchPriority(resolved);
+	resolved.loading = resolveLoading(resolved);
+	resolved.srcSet = resolveSrcSet(resolved);
+	resolved.sizes = resolveSizes(resolved, resolved.srcSet, resolved.loading);
+	resolved.placeholderUrl = resolvePlaceholderURL(resolved);
+	resolved.height = resolveHeight(resolved);
+	resolved.width = resolveWidth(resolved);
+	resolved.src = resolveSrc(resolved);
 	return resolved;
 }
+function resolveDecoding(prop) {
+	return prop.asap ? "async" : prop.decoding;
+}
+function resolveFetchPriority(prop) {
+	if (prop.asap) return "high";
+	return prop.fetchPriority ?? "auto";
+}
+function resolveSrcSet(prop) {
+	if (prop.srcSet) return prop.srcSet;
+	if (typeof prop.src === "object") return prop.src.srcSets;
+	if (!prop.breakpoints) return;
+	const baseSrc = prop.src;
+	const entries = [];
+	for (const breakpoint of prop.breakpoints) if (prop.loader) entries.push(`${prop.loader({
+		src: baseSrc,
+		width: breakpoint,
+		height: prop.height,
+		isPlaceholder: false
+	})} ${breakpoint}w`);
+	if (entries.length === 0) return;
+	return entries.join(", ");
+}
+function resolveLoading(prop) {
+	if (!prop.asap && prop.loading !== void 0) return prop.loading;
+	return prop.asap ? "eager" : "lazy";
+}
+function resolveSizes(prop, resolvedSrcSet, resolvedLoading) {
+	const loading = resolvedLoading ?? resolveLoading(prop);
+	const srcSet = resolvedSrcSet ?? prop.srcSet;
+	let sizes = prop.sizes;
+	if (prop.fill) sizes ||= "100vw";
+	if (sizes) {
+		if (loading === "lazy") sizes = "auto, " + sizes;
+	} else if (srcSet && VALID_WIDTH_DESCRIPTOR_SRCSET.test(srcSet) && loading === "lazy") sizes = "auto, 100vw";
+	return sizes;
+}
+function resolveSrc(prop) {
+	if (typeof prop.src === "object") return prop.src.src;
+	if (prop.loader) return prop.loader({
+		src: prop.src,
+		width: prop.width,
+		height: prop.height
+	});
+	return prop.src;
+}
+function resolveWidth(prop) {
+	if (prop.width) return prop.width;
+	if (typeof prop.src === "object") return prop.src.width;
+}
+function resolveHeight(prop) {
+	if (prop.height) return prop.height;
+	if (typeof prop.src === "object") return prop.src.height;
+}
+function resolvePlaceholderURL(prop) {
+	if (prop.placeholderUrl) return prop.placeholderUrl;
+	if (typeof prop.src === "object") return prop.src.placeholderUrl;
+	if (prop.loader) return prop.loader({
+		isPlaceholder: true,
+		src: prop.src,
+		width: prop.width,
+		height: prop.height
+	});
+}
+
+//#endregion
+//#region src/react/prop-asserts.ts
+function assertProps(prop) {
+	try {
+		assertLoadingProp(prop);
+		assertDecodingProp(prop);
+		assertFetchPriorityProp(prop);
+		assertBreakpointsProp(prop);
+		assertFillProp(prop);
+		assertDimensionsProp(prop);
+	} catch (err) {
+		const message = err instanceof Error ? err.message : err;
+		console.warn(message);
+	}
+}
+function assert(assertion, message) {
+	if (import.meta.env.DEV) {
+		if (assertion()) throw new Error(message || void 0);
+	}
+}
+function assertLoadingProp(prop) {
+	assert(() => prop.loading && prop.asap, import.meta.env.DEV && `Do not use \`loading\` on a asap image — asap images are always eagerly loaded.`);
+}
+function assertDecodingProp(prop) {
+	assert(() => prop.decoding && prop.asap, import.meta.env.DEV && `Do not use \`decoding\` on a asap image — asap images always use async decoding.`);
+}
+function assertFetchPriorityProp(prop) {
+	assert(() => prop.fetchPriority && prop.asap, import.meta.env.DEV && `Do not use \`fetchPriority\` on a asap image — asap images always use high fetch priority.`);
+}
+function assertBreakpointsProp(prop) {
+	assert(() => prop.breakpoints && typeof prop.src === "object", import.meta.env.DEV && `Do not use \`breakpoints\` when \`src\` is an imported image — the image's built-in srcSets are used instead.`);
+	assert(() => prop.breakpoints && typeof prop.src === "string" && !prop.loader, import.meta.env.DEV && `Do not use \`breakpoints\` without a \`loader\` — breakpoints require a loader to generate srcSet entries.`);
+}
+function assertFillProp(prop) {
+	assert(() => prop.fill && (prop.width !== void 0 || prop.height !== void 0), import.meta.env.DEV && `Do not use \`width\` or \`height\` with \`fill\` — fill mode makes the image fill its container.`);
+}
+function assertDimensionsProp(prop) {
+	assert(() => typeof prop.src === "string" && !prop.fill && prop.width === void 0 && prop.height === void 0, import.meta.env.DEV && `Image is missing \`width\` and \`height\` props. Either provide dimensions, use \`fill\`, or use an imported image source.`);
+}
+
+//#endregion
+//#region src/react/image-context.tsx
+const ImageContext = createContext({
+	breakpoints: [
+		16,
+		48,
+		96,
+		128,
+		384,
+		640,
+		750,
+		828,
+		1080,
+		1200,
+		1920
+	],
+	loading: "lazy",
+	loader: null
+});
+function useImageContext() {
+	return useContext(ImageContext);
+}
+function ImageProvider({ children, ...props }) {
+	const ctx = useImageContext();
+	return /* @__PURE__ */ jsx(ImageContext.Provider, {
+		value: {
+			...ctx,
+			...props
+		},
+		children
+	});
+}
+
+//#endregion
+//#region src/react/image.tsx
+const preload = "preload" in ReactDOM && typeof ReactDOM.preload === "function" ? ReactDOM.preload : null;
 function getPlaceholderStyles(props) {
 	if (!props.placeholderUrl) return {};
 	return {
@@ -121,7 +259,8 @@ function getFillStyles(props) {
 	};
 }
 function Image(props) {
-	const options = resolveOptions(props);
+	assertProps(props);
+	const options = resolveOptions(props, useImageContext());
 	const [imgRef, isLoaded] = useImgLoaded(options.src);
 	const placeholderStyles = isLoaded ? {} : getPlaceholderStyles(options);
 	const fillStyles = getFillStyles(options);
@@ -130,6 +269,10 @@ function Image(props) {
 		...fillStyles,
 		...props.style
 	};
+	if (preload && options.asap) preload(options.src, {
+		as: "image",
+		fetchPriority: "high"
+	});
 	return /* @__PURE__ */ jsx("img", {
 		ref: imgRef,
 		className: props.className,
@@ -147,4 +290,126 @@ function Image(props) {
 }
 
 //#endregion
-export { Image, useImgLoaded };
+//#region src/react/loaders/image-loader-utils.ts
+function normalizeLoaderParams(params, separator) {
+	return Object.entries(params).map(([key, value]) => `${key}${separator}${value}`);
+}
+function isAbsoluteUrl(src) {
+	return /^https?:\/\//.test(src);
+}
+function assertPath(path) {
+	assert(() => !path?.trim(), import.meta.env.DEV && `Path is required`);
+	assert(() => {
+		try {
+			new URL(path);
+			return !isAbsoluteUrl(path);
+		} catch {
+			return true;
+		}
+	}, import.meta.env.DEV && `Path is invalid url: ${path}`);
+}
+
+//#endregion
+//#region src/react/loaders/cloudflare-context.tsx
+const CloudflareContext = createContext({
+	path: "",
+	placeholder: true,
+	format: "auto",
+	placeholderParams: { quality: "low" }
+});
+function useCloudflareContext() {
+	return useContext(CloudflareContext);
+}
+function CloudflareLoaderProvider({ children, ...props }) {
+	const ctx = useCloudflareContext();
+	return /* @__PURE__ */ jsx(CloudflareContext.Provider, {
+		value: {
+			...ctx,
+			...props
+		},
+		children
+	});
+}
+
+//#endregion
+//#region src/react/loaders/cloudflare-loader.ts
+function useCloudflareLoader(options) {
+	const resolvedOptions = {
+		...useCloudflareContext(),
+		...options
+	};
+	assertPath(resolvedOptions.path);
+	return (imageOptions) => {
+		const parts = [];
+		const format = resolvedOptions.format;
+		if (format) parts.push(`format=${format}`);
+		if (imageOptions.width) parts.push(`width=${imageOptions.width}`);
+		if (imageOptions.height) parts.push(`height=${imageOptions.height}`);
+		if (resolvedOptions.params) parts.push(...normalizeLoaderParams(resolvedOptions.params, "="));
+		if (imageOptions.isPlaceholder) {
+			if (resolvedOptions.placeholderParams) {
+				const placeholderParams = normalizeLoaderParams(resolvedOptions.placeholderParams, "=");
+				parts.push(...placeholderParams);
+			}
+		} else if (resolvedOptions.params) {
+			const params = normalizeLoaderParams(resolvedOptions.params, "=");
+			parts.push(...params);
+		}
+		const processingOptions = parts.join(",");
+		return `${resolvedOptions.path}/cdn-cgi/image/${processingOptions}/${imageOptions.src}`;
+	};
+}
+
+//#endregion
+//#region src/react/loaders/imgproxy-context.tsx
+const ImgproxyContext = createContext({
+	path: "",
+	placeholder: true,
+	format: "webp",
+	placeholderParams: { quality: "1" }
+});
+function useImgproxyContext() {
+	return useContext(ImgproxyContext);
+}
+function ImgproxyLoaderProvider({ children, ...props }) {
+	const ctx = useImgproxyContext();
+	return /* @__PURE__ */ jsx(ImgproxyContext.Provider, {
+		value: {
+			...ctx,
+			...props
+		},
+		children
+	});
+}
+
+//#endregion
+//#region src/react/loaders/imgproxy-loader.ts
+function useImgproxyLoader(options) {
+	const resolvedOptions = {
+		...useImgproxyContext(),
+		...options
+	};
+	assertPath(resolvedOptions.path);
+	return (imageOptions) => {
+		const parts = [];
+		const format = resolvedOptions.format;
+		const paramsSeparator = resolvedOptions.paramsSeparator ?? "/";
+		if (format) parts.push(`format:${format}`);
+		if (imageOptions.width) parts.push(`width:${imageOptions.width}`);
+		if (imageOptions.height) parts.push(`height:${imageOptions.height}`);
+		if (imageOptions.isPlaceholder) {
+			if (resolvedOptions.placeholderParams) {
+				const placeholderParams = normalizeLoaderParams(resolvedOptions.placeholderParams, ":");
+				parts.push(...placeholderParams);
+			}
+		} else if (resolvedOptions.params) {
+			const params = normalizeLoaderParams(resolvedOptions.params, ":");
+			parts.push(...params);
+		}
+		const processingOptions = parts.join(paramsSeparator);
+		return `${resolvedOptions.path}/${processingOptions}/plain/${imageOptions.src}`;
+	};
+}
+
+//#endregion
+export { CloudflareLoaderProvider, Image, ImageProvider, ImgproxyLoaderProvider, useCloudflareContext, useCloudflareLoader, useImageContext, useImgLoaded, useImgproxyContext, useImgproxyLoader };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lonik/oh-image",
   "type": "module",
-  "version": "1.2.8",
+  "version": "2.0.0",
   "description": "A React component library for optimized image handling.",
   "author": "Luka Onikadze <lukonik@gmail.com>",
   "license": "MIT",
@@ -41,6 +41,7 @@
     "play:build": "vite build",
     "play:preview": "vite preview",
     "test": "vitest",
+    "coverage": "vitest --coverage",
     "typecheck": "tsc --noEmit",
     "release": "bumpp && pnpm publish",
     "prepublishOnly": "pnpm run build"
@@ -60,10 +61,13 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@vitejs/plugin-react": "^5.1.2",
+    "@vitest/coverage-v8": "4.0.18",
     "bumpp": "^10.3.2",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.0",
     "globals": "^17.3.0",
     "happy-dom": "^20.6.0",
     "tsdown": "^0.18.1",