react-file-preview-engine 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.mjs +25 -10
  2. package/package.json +6 -4
package/dist/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { useEffect, useMemo, useRef, useState } from "react";
2
- import { FileIcon, defaultStyles } from "react-file-icon";
3
2
  import Mime from "mime/lite";
3
+ import { FileIcon, defaultStyles } from "react-file-icon";
4
4
  //#region src/constants.ts
5
5
  const defaults = {
6
6
  additionalContext: {},
@@ -52,12 +52,27 @@ async function fetchResource(src, type, signal) {
52
52
  const getFileExtension = (mimeType, fileName) => Mime.getExtension(mimeType) || fileName?.match(fileExtensionRegex)?.[1] || "";
53
53
  const getFileType = (mimeType, fileName) => mimeType || fileName && Mime.getType(fileName) || "";
54
54
  //#endregion
55
+ //#region src/style.module.css
56
+ var style_module_default = {
57
+ "audio": "rfpe-audio",
58
+ "container": "rfpe-container",
59
+ "icon": "rfpe-icon",
60
+ "iframe": "rfpe-iframe",
61
+ "image": "rfpe-image",
62
+ "loader": "rfpe-loader",
63
+ "loader-spinner": "rfpe-loader-spinner",
64
+ "loader-text": "rfpe-loader-text",
65
+ "spin-fast": "rfpe-spin-fast",
66
+ "text": "rfpe-text",
67
+ "video": "rfpe-video"
68
+ };
69
+ //#endregion
55
70
  //#region src/lib/rendererRegistry.tsx
56
71
  const audioRenderer = {
57
72
  canRender: ({ mimeType }) => mimeType.startsWith("audio/"),
58
73
  Component({ src, mimeType, fileName, autoPlay, onLoad, onError }) {
59
74
  return /* @__PURE__ */ React.createElement("audio", {
60
- className: "rfpe-audio",
75
+ className: style_module_default["audio"],
61
76
  controls: true,
62
77
  autoPlay,
63
78
  onCanPlay: onLoad,
@@ -74,7 +89,7 @@ const fallbackRenderer = { Component({ mimeType, fileName, iconProps, onLoad })
74
89
  useEffect(() => {
75
90
  onLoad();
76
91
  }, []);
77
- return /* @__PURE__ */ React.createElement("div", composeProps("rfpe-icon", iconProps), /* @__PURE__ */ React.createElement(FileIcon, {
92
+ return /* @__PURE__ */ React.createElement("div", composeProps(style_module_default["icon"], iconProps), /* @__PURE__ */ React.createElement(FileIcon, {
78
93
  extension,
79
94
  ...defaultStyles[extension]
80
95
  }));
@@ -92,7 +107,7 @@ const defaultRenderers$1 = [
92
107
  }).catch(onError);
93
108
  return () => controller.abort();
94
109
  }, [src]);
95
- return /* @__PURE__ */ React.createElement("div", { className: "rfpe-text" }, data);
110
+ return /* @__PURE__ */ React.createElement("div", { className: style_module_default["text"] }, data);
96
111
  }
97
112
  },
98
113
  {
@@ -114,7 +129,7 @@ const defaultRenderers$1 = [
114
129
  };
115
130
  }, [src]);
116
131
  return /* @__PURE__ */ React.createElement("iframe", {
117
- className: "rfpe-iframe",
132
+ className: style_module_default["iframe"],
118
133
  src: data
119
134
  });
120
135
  }
@@ -132,7 +147,7 @@ const defaultRenderers$1 = [
132
147
  return () => controller.abort();
133
148
  }, [src]);
134
149
  return /* @__PURE__ */ React.createElement("iframe", {
135
- className: "rfpe-iframe",
150
+ className: style_module_default["iframe"],
136
151
  src: `data:text/html; charset=utf-8,${encodeURIComponent(data)}`,
137
152
  sandbox: ""
138
153
  });
@@ -142,7 +157,7 @@ const defaultRenderers$1 = [
142
157
  canRender: ({ mimeType }) => mimeType.startsWith("image/"),
143
158
  Component({ src, fileName, onLoad, onError }) {
144
159
  return /* @__PURE__ */ React.createElement("img", {
145
- className: "rfpe-image",
160
+ className: style_module_default["image"],
146
161
  src,
147
162
  alt: fileName || "Image preview",
148
163
  onLoad,
@@ -155,7 +170,7 @@ const defaultRenderers$1 = [
155
170
  canRender: ({ mimeType }) => mimeType.startsWith("video/"),
156
171
  Component({ src, mimeType, fileName, autoPlay, onLoad, onError }) {
157
172
  return /* @__PURE__ */ React.createElement("video", {
158
- className: "rfpe-video",
173
+ className: style_module_default["video"],
159
174
  controls: true,
160
175
  autoPlay,
161
176
  onCanPlay: onLoad,
@@ -225,13 +240,13 @@ function FilePreviewer({ src, mimeType, fileName = "", autoPlay = false, loader
225
240
  additionalContext
226
241
  ]);
227
242
  const ActiveRenderer = state.status === "error" ? errorRenderer : renderer;
228
- 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, {
243
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, isLoading && loader, /* @__PURE__ */ React.createElement("div", composeProps(style_module_default["container"], containerProps, { style: { visibility: isLoading ? "hidden" : "visible" } }), /* @__PURE__ */ React.createElement(ActiveRenderer.Component, {
229
244
  key: fileKey,
230
245
  ...context
231
246
  })));
232
247
  }
233
248
  function Loader({ children, text }) {
234
- 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));
249
+ return /* @__PURE__ */ React.createElement("div", { className: style_module_default["loader"] }, /* @__PURE__ */ React.createElement("div", { className: style_module_default["loader-spinner"] }), children ?? /* @__PURE__ */ React.createElement("div", { className: style_module_default["loader-text"] }, text));
235
250
  }
236
251
  //#endregion
237
252
  export { FilePreviewer as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-file-preview-engine",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "A renderer-driven React file preview engine with extensible architecture for images, video, audio, pdf, html, and custom formats.",
5
5
  "license": "MIT",
6
6
  "author": "Sahil Aggarwal <aggarwalsahil2004@gmail.com>",
@@ -35,13 +35,15 @@
35
35
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
36
36
  },
37
37
  "devDependencies": {
38
+ "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
38
39
  "@release-it/conventional-changelog": "^10.0.6",
40
+ "@tsdown/css": "^0.21.7",
39
41
  "@types/react": "^19.2.14",
40
- "@types/react-file-icon": "^1.0.4",
42
+ "@types/react-file-icon": "^1.0.5",
41
43
  "prettier-package-json": "^2.8.0",
42
44
  "release-it": "^19.2.4",
43
- "tsdown": "^0.21.2",
44
- "typescript": "^5.9.3"
45
+ "tsdown": "^0.21.7",
46
+ "typescript": "^6.0.2"
45
47
  },
46
48
  "keywords": [
47
49
  "arraybuffer",