react-file-preview-engine 0.1.7 → 0.1.8

package/README.md

@@ -302,7 +302,9 @@ You can explore the actual renderer definitions in the [`defaultRenderers` const
 
 ## API Reference
 
-### FilePreviewer Props
+### FilePreviewer Component
+
+Here is the full API for the `<FilePreviewer>` component, these properties can be set on an instance of FilePreviewer:
 
 | Prop                | Type                            | Required | Default                                                                                                                     | Description                                                           |
 | ------------------- | ------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
@@ -324,7 +326,7 @@ You can explore the actual renderer definitions in the [`defaultRenderers` const
 ### DivProps
 
 ```typescript
-import { DetailedHTMLProps, HTMLAttributes } from "react";
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
 
 type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 ```
@@ -360,6 +362,6 @@ type Renderer<T extends object = {}> = {
 };
 ```
 
-## Author
+## License
 
-[Sahil Aggarwal](https://github.com/SahilAggarwal2004)
+This project is licensed under the [MIT License](LICENSE).

package/dist/chunks/chunk-YEB7RW6X.js

@@ -0,0 +1,238 @@
+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

@@ -0,0 +1,6 @@
+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

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

package/dist/index.d.ts

@@ -1,6 +1,3 @@
-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 };
+export { default } from './components.js';
+import 'react';
+import './types.js';

package/dist/index.js

@@ -1,238 +1 @@
-import React2, { 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());
-  });
-};
-function Loader({ children, text }) {
-  return /* @__PURE__ */ React2.createElement("div", { className: "rfpe-loader" }, /* @__PURE__ */ React2.createElement("div", { className: "rfpe-loader-spinner" }), children != null ? children : /* @__PURE__ */ React2.createElement("div", { className: "rfpe-loader-text" }, text));
-}
-
-// 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__ */ React2.createElement("audio", { className: "rfpe-audio", controls: true, autoPlay, onCanPlay: onLoad, onError, "aria-label": fileName || "Audio preview" }, /* @__PURE__ */ React2.createElement("source", { src, type: mimeType }));
-  }
-};
-var fallbackRenderer = {
-  Component({ mimeType, fileName, iconProps, onLoad }) {
-    const extension = useMemo(() => getFileExtension(mimeType, fileName), [mimeType, fileName]);
-    useEffect(() => {
-      onLoad();
-    }, []);
-    return /* @__PURE__ */ React2.createElement("div", __spreadValues({}, composeProps("rfpe-icon", iconProps)), /* @__PURE__ */ React2.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__ */ React2.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__ */ React2.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__ */ React2.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__ */ React2.createElement("div", { className: "rfpe-text" }, data);
-  }
-};
-var videoRenderer = {
-  canRender: ({ mimeType }) => mimeType.startsWith("video/"),
-  Component({ src, mimeType, fileName, autoPlay, onLoad, onError }) {
-    return /* @__PURE__ */ React2.createElement("video", { className: "rfpe-video", controls: true, autoPlay, onCanPlay: onLoad, onError, "aria-label": fileName || "Video preview" }, /* @__PURE__ */ React2.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/index.tsx
-var { additionalContext: defaultContext, customRenderers: defaultRenderers2, props: defaultProps } = defaults;
-function FilePreviewer({
-  src,
-  mimeType,
-  fileName = "",
-  autoPlay = false,
-  loader = /* @__PURE__ */ React2.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__ */ React2.createElement(React2.Fragment, null, isLoading && loader, /* @__PURE__ */ React2.createElement("div", __spreadValues({}, composeProps("rfpe-container", containerProps, { style: { visibility: isLoading ? "hidden" : "visible" } })), /* @__PURE__ */ React2.createElement(ActiveRenderer.Component, __spreadValues({ key: fileKey }, context))));
-}
-
-export { FilePreviewer as default };
+export { FilePreviewer as default } from './chunks/chunk-YEB7RW6X.js';

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, DetailedHTMLProps, HTMLAttributes, JSX } from 'react';
+import { ReactNode, DetailedHTMLProps, HTMLAttributes } from 'react';
 
 type LoaderProps = {
     children?: ReactNode;
@@ -19,7 +19,7 @@ type RenderContext<T extends object = {}> = {
 type Renderer<T extends object = {}> = {
     name?: string;
     canRender?(ctx: RenderContext<T>): boolean;
-    Component(ctx: RenderContext<T>): JSX.Element;
+    Component(ctx: RenderContext<T>): ReactNode;
 };
 type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 type FetchType = "text" | "arrayBuffer" | "blob" | "json";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-file-preview-engine",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "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>",
@@ -14,34 +14,35 @@
     "url": "https://github.com/SahilAggarwal2004/react-file-preview-engine/issues"
   },
   "type": "module",
-  "files": [
-    "dist"
-  ],
   "exports": {
     ".": "./dist/index.js",
     "./types": "./dist/types.js"
   },
   "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "sideEffects": [
     "**/*.css"
   ],
+  "types": "dist/index.d.ts",
   "dependencies": {
     "mime": "^4.1.0",
     "react-file-icon": "^1.6.0"
   },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
   "devDependencies": {
     "@release-it/conventional-changelog": "^10.0.4",
     "@types/react": "^19.2.7",
     "@types/react-file-icon": "^1.0.4",
+    "prettier-package-json": "^2.8.0",
     "release-it": "^19.2.2",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   },
-  "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-  },
   "keywords": [
     "arraybuffer",
     "audio-preview",
@@ -69,6 +70,8 @@
     "compile": "tsup",
     "dev": "tsup --watch",
     "dry-release": "release-it --ci --dry-run",
+    "prettier": "prettier-package-json --write package.json",
+    "pub": "pnpm login && pnpm publish",
     "release": "release-it --ci"
   }
 }