react-file-preview-engine 0.1.8 → 1.0.0

package/README.md

@@ -50,6 +50,7 @@ This is the minimal setup. The previewer automatically infers the MIME type from
 ```tsx
 import React from "react";
 import FilePreviewer from "react-file-preview-engine";
+import "react-file-preview-engine/style.css";
 
 export default function App() {
   return <FilePreviewer src="https://example.com/sample.pdf" fileName="sample.pdf" />;
@@ -63,6 +64,7 @@ You can preview files selected by the user without uploading them first. The eng
 ```tsx
 import React, { useState } from "react";
 import FilePreviewer from "react-file-preview-engine";
+import "react-file-preview-engine/style.css";
 
 export default function App() {
   const [file, setFile] = useState<File>();
@@ -83,6 +85,7 @@ If you already know the MIME type, you can pass it directly. This ensures the en
 ```tsx
 import React from "react";
 import FilePreviewer from "react-file-preview-engine";
+import "react-file-preview-engine/style.css";
 
 export default function App() {
   return <FilePreviewer src={new Blob(["Hello world"], { type: "text/plain" })} mimeType="text/plain" fileName="hello.txt" />;
@@ -96,6 +99,7 @@ You can listen to lifecycle events triggered by the active renderer.
 ```tsx
 import React from "react";
 import FilePreviewer from "react-file-preview-engine";
+import "react-file-preview-engine/style.css";
 
 export default function App() {
   return (
@@ -120,6 +124,7 @@ For audio and video files, you can enable auto play.
 ```tsx
 import React from "react";
 import FilePreviewer from "react-file-preview-engine";
+import "react-file-preview-engine/style.css";
 
 export default function App() {
   return <FilePreviewer src="https://example.com/video.mp4" fileName="video.mp4" autoPlay={true} />;
@@ -133,6 +138,7 @@ You can customize the loader, container props, and icon props without modifying
 ```tsx
 import React from "react";
 import FilePreviewer from "react-file-preview-engine";
+import "react-file-preview-engine/style.css";
 
 export default function App() {
   return (
@@ -154,6 +160,7 @@ When a renderer reports an error, the previewer switches to `errorRenderer`.
 ```tsx
 import React from "react";
 import FilePreviewer from "react-file-preview-engine";
+import "react-file-preview-engine/style.css";
 
 const errorRenderer = {
   Component() {
@@ -189,6 +196,7 @@ This example adds support for markdown files.
 ```tsx
 import React, { useEffect, useState } from "react";
 import FilePreviewer from "react-file-preview-engine";
+import "react-file-preview-engine/style.css";
 import type { Renderer } from "react-file-preview-engine/types";
 import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
@@ -242,6 +250,7 @@ You can extend renderers with custom configuration using `additionalContext`. Th
 ```tsx
 import React, { useEffect, useMemo, useState } from "react";
 import FilePreviewer from "react-file-preview-engine";
+import "react-file-preview-engine/style.css";
 import type { Renderer } from "react-file-preview-engine/types";
 import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";

package/dist/index.d.mts

@@ -0,0 +1,20 @@
+import { i as FilePreviewerProps } from "./types-DHt-OXXj.mjs";
+import React from "react";
+
+//#region src/components.d.ts
+declare function FilePreviewer<T extends object = {}>({
+  src,
+  mimeType,
+  fileName,
+  autoPlay,
+  loader,
+  customRenderers,
+  additionalContext,
+  errorRenderer,
+  containerProps,
+  iconProps,
+  onLoad,
+  onError
+}: FilePreviewerProps<T>): React.JSX.Element;
+//#endregion
+export { FilePreviewer as default };

package/dist/index.mjs

@@ -0,0 +1,237 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { FileIcon, defaultStyles } from "react-file-icon";
+import Mime from "mime/lite";
+//#region src/constants.ts
+const defaults = {
+	additionalContext: {},
+	customRenderers: [],
+	props: {}
+};
+const fileExtensionRegex = /\.([^.]+)$/;
+//#endregion
+//#region src/hooks.ts
+function useResolvedSrc(src) {
+	const objectUrlRef = useRef(null);
+	const revokeObjectURL = () => {
+		if (!objectUrlRef.current) return;
+		URL.revokeObjectURL(objectUrlRef.current);
+		objectUrlRef.current = null;
+	};
+	const resolvedSrc = useMemo(() => {
+		revokeObjectURL();
+		if (typeof src === "string") return src;
+		const url = src instanceof File || src instanceof Blob ? URL.createObjectURL(src) : src instanceof ArrayBuffer ? URL.createObjectURL(new Blob([src])) : "";
+		if (url) objectUrlRef.current = url;
+		return url;
+	}, [src]);
+	useEffect(() => revokeObjectURL, []);
+	return resolvedSrc;
+}
+//#endregion
+//#region src/lib/utils.ts
+const composeClass = (baseClass, props) => `${baseClass}${props?.className ? " " + props.className : ""}`;
+const composeProps = (baseClass, props, overrideProps) => {
+	const mergedProps = {
+		...props,
+		...overrideProps
+	};
+	return {
+		...mergedProps,
+		style: {
+			...props?.style,
+			...overrideProps?.style
+		},
+		className: composeClass(baseClass, mergedProps)
+	};
+};
+async function fetchResource(src, type, signal) {
+	const res = await fetch(src, { signal });
+	if (!res.ok) throw new Error();
+	return res[type]();
+}
+const getFileExtension = (mimeType, fileName) => Mime.getExtension(mimeType) || fileName?.match(fileExtensionRegex)?.[1] || "";
+const getFileType = (mimeType, fileName) => mimeType || fileName && Mime.getType(fileName) || "";
+//#endregion
+//#region src/lib/rendererRegistry.tsx
+const audioRenderer = {
+	canRender: ({ mimeType }) => mimeType.startsWith("audio/"),
+	Component({ src, mimeType, fileName, autoPlay, onLoad, onError }) {
+		return /* @__PURE__ */ React.createElement("audio", {
+			className: "rfpe-audio",
+			controls: true,
+			autoPlay,
+			onCanPlay: onLoad,
+			onError,
+			"aria-label": fileName || "Audio preview"
+		}, /* @__PURE__ */ React.createElement("source", {
+			src,
+			type: mimeType
+		}));
+	}
+};
+const fallbackRenderer = { Component({ mimeType, fileName, iconProps, onLoad }) {
+	const extension = useMemo(() => getFileExtension(mimeType, fileName), [mimeType, fileName]);
+	useEffect(() => {
+		onLoad();
+	}, []);
+	return /* @__PURE__ */ React.createElement("div", composeProps("rfpe-icon", iconProps), /* @__PURE__ */ React.createElement(FileIcon, {
+		extension,
+		...defaultStyles[extension]
+	}));
+} };
+const defaultRenderers$1 = [
+	{
+		canRender: ({ mimeType }) => mimeType === "text/plain",
+		Component({ src, onLoad, onError }) {
+			const [data, setData] = useState("");
+			useEffect(() => {
+				const controller = new AbortController();
+				fetchResource(src, "text", controller.signal).then((data) => {
+					setData(data);
+					onLoad();
+				}).catch(onError);
+				return () => controller.abort();
+			}, [src]);
+			return /* @__PURE__ */ React.createElement("div", { className: "rfpe-text" }, data);
+		}
+	},
+	{
+		canRender: ({ mimeType }) => mimeType === "application/pdf",
+		Component({ src, onLoad, onError }) {
+			const [data, setData] = useState("");
+			useEffect(() => {
+				const controller = new AbortController();
+				let objectUrl;
+				fetchResource(src, "arrayBuffer", controller.signal).then((buffer) => {
+					const blob = new Blob([buffer], { type: "application/pdf" });
+					objectUrl = URL.createObjectURL(blob);
+					setData(objectUrl);
+					onLoad();
+				}).catch(onError);
+				return () => {
+					controller.abort();
+					if (objectUrl) URL.revokeObjectURL(objectUrl);
+				};
+			}, [src]);
+			return /* @__PURE__ */ React.createElement("iframe", {
+				className: "rfpe-iframe",
+				src: data
+			});
+		}
+	},
+	{
+		canRender: ({ mimeType }) => mimeType === "text/html",
+		Component({ src, onLoad, onError }) {
+			const [data, setData] = useState("");
+			useEffect(() => {
+				const controller = new AbortController();
+				fetchResource(src, "text", controller.signal).then((data) => {
+					setData(data);
+					onLoad();
+				}).catch(onError);
+				return () => controller.abort();
+			}, [src]);
+			return /* @__PURE__ */ React.createElement("iframe", {
+				className: "rfpe-iframe",
+				src: `data:text/html; charset=utf-8,${encodeURIComponent(data)}`,
+				sandbox: ""
+			});
+		}
+	},
+	{
+		canRender: ({ mimeType }) => mimeType.startsWith("image/"),
+		Component({ src, fileName, onLoad, onError }) {
+			return /* @__PURE__ */ React.createElement("img", {
+				className: "rfpe-image",
+				src,
+				alt: fileName || "Image preview",
+				onLoad,
+				onError
+			});
+		}
+	},
+	audioRenderer,
+	{
+		canRender: ({ mimeType }) => mimeType.startsWith("video/"),
+		Component({ src, mimeType, fileName, autoPlay, onLoad, onError }) {
+			return /* @__PURE__ */ React.createElement("video", {
+				className: "rfpe-video",
+				controls: true,
+				autoPlay,
+				onCanPlay: onLoad,
+				onError,
+				"aria-label": fileName || "Video preview"
+			}, /* @__PURE__ */ React.createElement("source", {
+				src,
+				type: mimeType
+			}));
+		}
+	}
+];
+function resolveRenderer(customRenderers, ctx) {
+	return customRenderers.concat(defaultRenderers$1).find((r) => r.canRender?.(ctx)) ?? fallbackRenderer;
+}
+//#endregion
+//#region src/components.tsx
+const { additionalContext: defaultContext, customRenderers: defaultRenderers, props: defaultProps } = defaults;
+function FilePreviewer({ src, mimeType, fileName = "", autoPlay = false, loader = /* @__PURE__ */ React.createElement(Loader, null), customRenderers = defaultRenderers, additionalContext = defaultContext, errorRenderer = fallbackRenderer, containerProps = defaultProps, iconProps = defaultProps, onLoad, onError }) {
+	const resolvedSrc = useResolvedSrc(src);
+	const fileType = useMemo(() => getFileType(mimeType, fileName), [mimeType, fileName]);
+	const fileKey = `${resolvedSrc}|${fileType}|${fileName}`;
+	const [state, setState] = useState({
+		key: fileKey,
+		status: "loading"
+	});
+	if (state.key !== fileKey) setState({
+		key: fileKey,
+		status: "loading"
+	});
+	const isLoading = state.status === "loading";
+	const handleLoad = () => {
+		setState((prev) => {
+			if (prev.key !== fileKey || prev.status !== "loading") return prev;
+			onLoad?.();
+			return {
+				key: fileKey,
+				status: "ready"
+			};
+		});
+	};
+	const handleError = () => {
+		setState((prev) => {
+			if (prev.key !== fileKey || prev.status === "error") return prev;
+			onError?.();
+			return {
+				key: fileKey,
+				status: "error"
+			};
+		});
+	};
+	const context = {
+		src: resolvedSrc,
+		mimeType: fileType,
+		fileName,
+		autoPlay,
+		iconProps,
+		onLoad: handleLoad,
+		onError: handleError,
+		...additionalContext
+	};
+	const renderer = useMemo(() => resolveRenderer(customRenderers, context), [
+		resolvedSrc,
+		fileType,
+		fileName,
+		autoPlay,
+		additionalContext
+	]);
+	const ActiveRenderer = state.status === "error" ? errorRenderer : renderer;
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, isLoading && loader, /* @__PURE__ */ React.createElement("div", composeProps("rfpe-container", containerProps, { style: { visibility: isLoading ? "hidden" : "visible" } }), /* @__PURE__ */ React.createElement(ActiveRenderer.Component, {
+		key: fileKey,
+		...context
+	})));
+}
+function Loader({ children, text }) {
+	return /* @__PURE__ */ React.createElement("div", { className: "rfpe-loader" }, /* @__PURE__ */ React.createElement("div", { className: "rfpe-loader-spinner" }), children ?? /* @__PURE__ */ React.createElement("div", { className: "rfpe-loader-text" }, text));
+}
+//#endregion
+export { FilePreviewer as default };

package/dist/style.css

@@ -0,0 +1,63 @@
+@layer rfpe {
+  :where(.rfpe-container) {
+    justify-content: center;
+    align-items: center;
+    max-width: 100vw;
+    height: 100%;
+    display: flex;
+  }
+
+  :where(.rfpe-icon) {
+    width: 50px;
+  }
+}
+
+.rfpe-audio {
+  width: 100%;
+}
+
+.rfpe-iframe {
+  background-color: #fff;
+}
+
+.rfpe-iframe, .rfpe-image, .rfpe-video {
+  width: 100%;
+  height: 100%;
+}
+
+.rfpe-image, .rfpe-video {
+  object-fit: contain;
+}
+
+.rfpe-text {
+  white-space: pre-wrap;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.rfpe-loader {
+  align-items: center;
+  gap: .5rem;
+  display: inline-flex;
+}
+
+.rfpe-loader-spinner {
+  box-sizing: border-box;
+  aspect-ratio: 1;
+  border: 2px solid #000;
+  border-color: #000 #0000;
+  border-radius: 50%;
+  width: 22px;
+  animation: .6s infinite rfpe-spin-fast;
+}
+
+.rfpe-loader-text {
+  font-size: .875rem;
+}
+
+@keyframes rfpe-spin-fast {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/types-DHt-OXXj.d.mts

@@ -0,0 +1,48 @@
+import { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
+
+//#region src/types.d.ts
+type LoaderProps = {
+  children?: ReactNode;
+  text?: string;
+};
+type EventHandler = () => void;
+type RenderBehaviour = {
+  autoPlay: boolean;
+  iconProps: DivProps;
+  onLoad: EventHandler;
+  onError: EventHandler;
+};
+type RenderContext<T extends object = {}> = {
+  src: string;
+  mimeType: string;
+  fileName: string;
+} & RenderBehaviour & T;
+type Renderer<T extends object = {}> = {
+  name?: string;
+  canRender?(ctx: RenderContext<T>): boolean;
+  Component(ctx: RenderContext<T>): ReactNode;
+};
+type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+type FetchType = "text" | "arrayBuffer" | "blob" | "json";
+type FilePreviewerProps<T extends object> = {
+  src: FileSource;
+  loader?: ReactNode;
+  customRenderers?: Renderer<T>[];
+  additionalContext?: T;
+  errorRenderer?: Renderer<T>;
+  containerProps?: DivProps;
+} & MimeTypeSource & Partial<RenderBehaviour>;
+type FileSource = string | File | Blob | ArrayBuffer;
+type MimeTypeSource = {
+  mimeType: string;
+  fileName?: string;
+} | {
+  fileName: string;
+  mimeType?: string;
+};
+type State = {
+  key: string;
+  status: "loading" | "ready" | "error";
+};
+//#endregion
+export { FileSource as a, RenderBehaviour as c, State as d, FilePreviewerProps as i, RenderContext as l, EventHandler as n, LoaderProps as o, FetchType as r, MimeTypeSource as s, DivProps as t, Renderer as u };

package/dist/types.d.mts

@@ -0,0 +1,2 @@
+import { a as FileSource, c as RenderBehaviour, d as State, i as FilePreviewerProps, l as RenderContext, n as EventHandler, o as LoaderProps, r as FetchType, s as MimeTypeSource, t as DivProps, u as Renderer } from "./types-DHt-OXXj.mjs";
+export { DivProps, EventHandler, FetchType, FilePreviewerProps, FileSource, LoaderProps, MimeTypeSource, RenderBehaviour, RenderContext, Renderer, State };

package/dist/types.mjs

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-file-preview-engine",
-  "version": "0.1.8",
+  "version": "1.0.0",
   "description": "A renderer-driven React file preview engine with extensible architecture for images, video, audio, pdf, html, and custom formats.",
   "license": "MIT",
   "author": "Sahil Aggarwal <aggarwalsahil2004@gmail.com>",
@@ -15,17 +15,17 @@
   },
   "type": "module",
   "exports": {
-    ".": "./dist/index.js",
-    "./types": "./dist/types.js"
+    ".": "./dist/index.mjs",
+    "./style.css": "./dist/style.css",
+    "./types": "./dist/types.mjs"
   },
-  "main": "dist/index.js",
   "files": [
     "dist"
   ],
   "sideEffects": [
     "**/*.css"
   ],
-  "types": "dist/index.d.ts",
+  "types": "./dist/index.d.mts",
   "dependencies": {
     "mime": "^4.1.0",
     "react-file-icon": "^1.6.0"
@@ -35,12 +35,12 @@
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@release-it/conventional-changelog": "^10.0.4",
-    "@types/react": "^19.2.7",
+    "@release-it/conventional-changelog": "^10.0.6",
+    "@types/react": "^19.2.14",
     "@types/react-file-icon": "^1.0.4",
     "prettier-package-json": "^2.8.0",
-    "release-it": "^19.2.2",
-    "tsup": "^8.5.1",
+    "release-it": "^19.2.4",
+    "tsdown": "^0.21.2",
     "typescript": "^5.9.3"
   },
   "keywords": [
@@ -67,8 +67,8 @@
   ],
   "scripts": {
     "build": "pnpm i && pnpm run compile",
-    "compile": "tsup",
-    "dev": "tsup --watch",
+    "compile": "tsdown",
+    "dev": "tsdown --watch",
     "dry-release": "release-it --ci --dry-run",
     "prettier": "prettier-package-json --write package.json",
     "pub": "pnpm login && pnpm publish",

package/dist/chunks/chunk-YEB7RW6X.js

@@ -1,238 +0,0 @@
-import React, { useMemo, useState, useRef, useEffect } from 'react';
-import { FileIcon, defaultStyles } from 'react-file-icon';
-import Mime from 'mime/lite';
-
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-
-// src/constants.ts
-var defaults = { additionalContext: {}, customRenderers: [], props: {} };
-var fileExtensionRegex = /\.([^.]+)$/;
-function useResolvedSrc(src) {
-  const objectUrlRef = useRef(null);
-  const revokeObjectURL = () => {
-    if (!objectUrlRef.current) return;
-    URL.revokeObjectURL(objectUrlRef.current);
-    objectUrlRef.current = null;
-  };
-  const resolvedSrc = useMemo(() => {
-    revokeObjectURL();
-    if (typeof src === "string") return src;
-    const url = src instanceof File || src instanceof Blob ? URL.createObjectURL(src) : src instanceof ArrayBuffer ? URL.createObjectURL(new Blob([src])) : "";
-    if (url) objectUrlRef.current = url;
-    return url;
-  }, [src]);
-  useEffect(() => revokeObjectURL, []);
-  return resolvedSrc;
-}
-var composeClass = (baseClass, props) => `${baseClass}${(props == null ? void 0 : props.className) ? " " + props.className : ""}`;
-var composeProps = (baseClass, props, overrideProps) => {
-  const mergedProps = __spreadValues(__spreadValues({}, props), overrideProps);
-  return __spreadProps(__spreadValues({}, mergedProps), {
-    style: __spreadValues(__spreadValues({}, props == null ? void 0 : props.style), overrideProps == null ? void 0 : overrideProps.style),
-    className: composeClass(baseClass, mergedProps)
-  });
-};
-function fetchResource(src, type, signal) {
-  return __async(this, null, function* () {
-    const res = yield fetch(src, { signal });
-    if (!res.ok) throw new Error();
-    return res[type]();
-  });
-}
-var getFileExtension = (mimeType, fileName) => {
-  var _a;
-  return Mime.getExtension(mimeType) || ((_a = fileName == null ? void 0 : fileName.match(fileExtensionRegex)) == null ? void 0 : _a[1]) || "";
-};
-var getFileType = (mimeType, fileName) => mimeType || fileName && Mime.getType(fileName) || "";
-
-// src/lib/rendererRegistry.tsx
-var audioRenderer = {
-  canRender: ({ mimeType }) => mimeType.startsWith("audio/"),
-  Component({ src, mimeType, fileName, autoPlay, onLoad, onError }) {
-    return /* @__PURE__ */ React.createElement("audio", { className: "rfpe-audio", controls: true, autoPlay, onCanPlay: onLoad, onError, "aria-label": fileName || "Audio preview" }, /* @__PURE__ */ React.createElement("source", { src, type: mimeType }));
-  }
-};
-var fallbackRenderer = {
-  Component({ mimeType, fileName, iconProps, onLoad }) {
-    const extension = useMemo(() => getFileExtension(mimeType, fileName), [mimeType, fileName]);
-    useEffect(() => {
-      onLoad();
-    }, []);
-    return /* @__PURE__ */ React.createElement("div", __spreadValues({}, composeProps("rfpe-icon", iconProps)), /* @__PURE__ */ React.createElement(FileIcon, __spreadValues({ extension }, defaultStyles[extension])));
-  }
-};
-var htmlRenderer = {
-  canRender: ({ mimeType }) => mimeType === "text/html",
-  Component({ src, onLoad, onError }) {
-    const [data, setData] = useState("");
-    useEffect(() => {
-      const controller = new AbortController();
-      fetchResource(src, "text", controller.signal).then((data2) => {
-        setData(data2);
-        onLoad();
-      }).catch(onError);
-      return () => controller.abort();
-    }, [src]);
-    return /* @__PURE__ */ React.createElement("iframe", { className: "rfpe-iframe", src: `data:text/html; charset=utf-8,${encodeURIComponent(data)}`, sandbox: "" });
-  }
-};
-var imageRenderer = {
-  canRender: ({ mimeType }) => mimeType.startsWith("image/"),
-  Component({ src, fileName, onLoad, onError }) {
-    return /* @__PURE__ */ React.createElement("img", { className: "rfpe-image", src, alt: fileName || "Image preview", onLoad, onError });
-  }
-};
-var pdfRenderer = {
-  canRender: ({ mimeType }) => mimeType === "application/pdf",
-  Component({ src, onLoad, onError }) {
-    const [data, setData] = useState("");
-    useEffect(() => {
-      const controller = new AbortController();
-      let objectUrl;
-      fetchResource(src, "arrayBuffer", controller.signal).then((buffer) => {
-        const blob = new Blob([buffer], { type: "application/pdf" });
-        objectUrl = URL.createObjectURL(blob);
-        setData(objectUrl);
-        onLoad();
-      }).catch(onError);
-      return () => {
-        controller.abort();
-        if (objectUrl) URL.revokeObjectURL(objectUrl);
-      };
-    }, [src]);
-    return /* @__PURE__ */ React.createElement("iframe", { className: "rfpe-iframe", src: data });
-  }
-};
-var textRenderer = {
-  canRender: ({ mimeType }) => mimeType === "text/plain",
-  Component({ src, onLoad, onError }) {
-    const [data, setData] = useState("");
-    useEffect(() => {
-      const controller = new AbortController();
-      fetchResource(src, "text", controller.signal).then((data2) => {
-        setData(data2);
-        onLoad();
-      }).catch(onError);
-      return () => controller.abort();
-    }, [src]);
-    return /* @__PURE__ */ React.createElement("div", { className: "rfpe-text" }, data);
-  }
-};
-var videoRenderer = {
-  canRender: ({ mimeType }) => mimeType.startsWith("video/"),
-  Component({ src, mimeType, fileName, autoPlay, onLoad, onError }) {
-    return /* @__PURE__ */ React.createElement("video", { className: "rfpe-video", controls: true, autoPlay, onCanPlay: onLoad, onError, "aria-label": fileName || "Video preview" }, /* @__PURE__ */ React.createElement("source", { src, type: mimeType }));
-  }
-};
-var defaultRenderers = [textRenderer, pdfRenderer, htmlRenderer, imageRenderer, audioRenderer, videoRenderer];
-function resolveRenderer(customRenderers, ctx) {
-  var _a;
-  return (_a = customRenderers.concat(defaultRenderers).find((r) => {
-    var _a2;
-    return (_a2 = r.canRender) == null ? void 0 : _a2.call(r, ctx);
-  })) != null ? _a : fallbackRenderer;
-}
-
-// src/styles.css
-function injectStyle(css) {
-  if (typeof document === "undefined") return;
-  const head = document.head || document.getElementsByTagName("head")[0];
-  const style = document.createElement("style");
-  style.type = "text/css";
-  if (head.firstChild) {
-    head.insertBefore(style, head.firstChild);
-  } else {
-    head.appendChild(style);
-  }
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-injectStyle("@layer rfpe {\n  :where(.rfpe-container) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    max-width: 100lvw;\n    max-width: 100vw;\n  }\n  :where(.rfpe-icon) {\n    width: 50px;\n  }\n}\n.rfpe-audio {\n  width: 100%;\n}\n.rfpe-iframe {\n  background-color: white;\n}\n.rfpe-iframe,\n.rfpe-image,\n.rfpe-video {\n  width: 100%;\n  height: 100%;\n}\n.rfpe-image,\n.rfpe-video {\n  object-fit: contain;\n}\n.rfpe-text {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  white-space: pre-wrap;\n}\n.rfpe-loader {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.rfpe-loader-spinner {\n  box-sizing: border-box;\n  width: 22px;\n  aspect-ratio: 1;\n  border-radius: 50%;\n  border: 2px solid transparent;\n  border-top-color: black;\n  border-bottom-color: black;\n  animation: rfpe-spin-fast 0.6s ease infinite;\n}\n.rfpe-loader-text {\n  font-size: 0.875rem;\n}\n@keyframes rfpe-spin-fast {\n  to {\n    transform: rotate(360deg);\n  }\n}\n");
-
-// src/components.tsx
-var { additionalContext: defaultContext, customRenderers: defaultRenderers2, props: defaultProps } = defaults;
-function FilePreviewer({
-  src,
-  mimeType,
-  fileName = "",
-  autoPlay = false,
-  loader = /* @__PURE__ */ React.createElement(Loader, null),
-  customRenderers = defaultRenderers2,
-  additionalContext = defaultContext,
-  errorRenderer = fallbackRenderer,
-  containerProps = defaultProps,
-  iconProps = defaultProps,
-  onLoad,
-  onError
-}) {
-  const resolvedSrc = useResolvedSrc(src);
-  const fileType = useMemo(() => getFileType(mimeType, fileName), [mimeType, fileName]);
-  const fileKey = `${resolvedSrc}|${fileType}|${fileName}`;
-  const [state, setState] = useState({ key: fileKey, status: "loading" });
-  if (state.key !== fileKey) setState({ key: fileKey, status: "loading" });
-  const isLoading = state.status === "loading";
-  const handleLoad = () => {
-    setState((prev) => {
-      if (prev.key !== fileKey || prev.status !== "loading") return prev;
-      onLoad == null ? void 0 : onLoad();
-      return { key: fileKey, status: "ready" };
-    });
-  };
-  const handleError = () => {
-    setState((prev) => {
-      if (prev.key !== fileKey || prev.status === "error") return prev;
-      onError == null ? void 0 : onError();
-      return { key: fileKey, status: "error" };
-    });
-  };
-  const context = __spreadValues({ src: resolvedSrc, mimeType: fileType, fileName, autoPlay, iconProps, onLoad: handleLoad, onError: handleError }, additionalContext);
-  const renderer = useMemo(() => resolveRenderer(customRenderers, context), [resolvedSrc, fileType, fileName, autoPlay, additionalContext]);
-  const ActiveRenderer = state.status === "error" ? errorRenderer : renderer;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, isLoading && loader, /* @__PURE__ */ React.createElement("div", __spreadValues({}, composeProps("rfpe-container", containerProps, { style: { visibility: isLoading ? "hidden" : "visible" } })), /* @__PURE__ */ React.createElement(ActiveRenderer.Component, __spreadValues({ key: fileKey }, context))));
-}
-function Loader({ children, text }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "rfpe-loader" }, /* @__PURE__ */ React.createElement("div", { className: "rfpe-loader-spinner" }), children != null ? children : /* @__PURE__ */ React.createElement("div", { className: "rfpe-loader-text" }, text));
-}
-
-export { FilePreviewer };

package/dist/components.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { FilePreviewerProps } from './types.js';
-
-declare function FilePreviewer<T extends object = {}>({ src, mimeType, fileName, autoPlay, loader, customRenderers, additionalContext, errorRenderer, containerProps, iconProps, onLoad, onError, }: FilePreviewerProps<T>): React.JSX.Element;
-
-export { FilePreviewer as default };

package/dist/components.js

@@ -1 +0,0 @@
-export { FilePreviewer as default } from './chunks/chunk-YEB7RW6X.js';

package/dist/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './components.js';
-import 'react';
-import './types.js';

package/dist/index.js

@@ -1 +0,0 @@
-export { FilePreviewer as default } from './chunks/chunk-YEB7RW6X.js';

package/dist/types.d.ts

@@ -1,47 +0,0 @@
-import { ReactNode, DetailedHTMLProps, HTMLAttributes } from 'react';
-
-type LoaderProps = {
-    children?: ReactNode;
-    text?: string;
-};
-type EventHandler = () => void;
-type RenderBehaviour = {
-    autoPlay: boolean;
-    iconProps: DivProps;
-    onLoad: EventHandler;
-    onError: EventHandler;
-};
-type RenderContext<T extends object = {}> = {
-    src: string;
-    mimeType: string;
-    fileName: string;
-} & RenderBehaviour & T;
-type Renderer<T extends object = {}> = {
-    name?: string;
-    canRender?(ctx: RenderContext<T>): boolean;
-    Component(ctx: RenderContext<T>): ReactNode;
-};
-type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-type FetchType = "text" | "arrayBuffer" | "blob" | "json";
-type FilePreviewerProps<T extends object> = {
-    src: FileSource;
-    loader?: ReactNode;
-    customRenderers?: Renderer<T>[];
-    additionalContext?: T;
-    errorRenderer?: Renderer<T>;
-    containerProps?: DivProps;
-} & MimeTypeSource & Partial<RenderBehaviour>;
-type FileSource = string | File | Blob | ArrayBuffer;
-type MimeTypeSource = {
-    mimeType: string;
-    fileName?: string;
-} | {
-    fileName: string;
-    mimeType?: string;
-};
-type State = {
-    key: string;
-    status: "loading" | "ready" | "error";
-};
-
-export type { DivProps, EventHandler, FetchType, FilePreviewerProps, FileSource, LoaderProps, MimeTypeSource, RenderBehaviour, RenderContext, Renderer, State };

package/dist/types.js

@@ -1 +0,0 @@
-