@carlonicora/nextjs-jsonapi 2.2.0 → 2.2.2

package/src/features/user/components/forms/UserAvatarEditor.tsx

@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
 import { DropzoneOptions } from "react-dropzone";
 import { FileInput, FileUploader } from "../../../../components";
 import { Button } from "../../../../shadcnui";
+import { isRemoteImageSrc } from "../../../../utils";
 import { UserInterface } from "../../data";
 
 type UserAvatarEditorProps = {
@@ -28,6 +29,8 @@ export function UserAvatarEditor({ user, file, setFile, resetImage, setResetImag
     }
   }, [files]);
 
+  const avatarSrc = file ? URL.createObjectURL(file) : user?.avatar || "";
+
   const dropzone = {
     multiple: false,
     maxSize: 100 * 1024 * 1024,
@@ -48,10 +51,11 @@ export function UserAvatarEditor({ user, file, setFile, resetImage, setResetImag
         <FileInput className="bg-muted text-muted-foreground flex h-full w-full flex-col items-center justify-center">
           {!resetImage && (file || user?.avatar) ? (
             <Image
-              src={file ? URL.createObjectURL(file) : user?.avatar || ""}
+              src={avatarSrc}
               alt={t(`common.avatar`)}
               width={200}
               height={200}
+              unoptimized={isRemoteImageSrc(avatarSrc)}
             />
           ) : (
             <UploadIcon className="my-4 h-8 w-8" />

package/src/utils/index.ts

@@ -12,6 +12,7 @@ export { getTableComponents, getTableOptions, TableOptions } from "./table-optio
 export { entityObjectSchema, userObjectSchema, type EntityObject, type UserObject } from "./schemas";
 
 export { getInitials } from "./getInitials";
+export { isRemoteImageSrc } from "./isRemoteImageSrc";
 export {
   validatePartitaIva,
   validateCodiceFiscale,

package/src/utils/isRemoteImageSrc.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { isRemoteImageSrc } from "./isRemoteImageSrc";
+
+describe("isRemoteImageSrc", () => {
+  it("returns true for an https URL", () => {
+    expect(isRemoteImageSrc("https://cdn.discordapp.com/avatars/123/abc.png")).toBe(true);
+  });
+
+  it("returns true for an http URL", () => {
+    expect(isRemoteImageSrc("http://minio.narr8.test:9000/bucket/key.png")).toBe(true);
+  });
+
+  it("returns false for a blob URL", () => {
+    expect(isRemoteImageSrc("blob:http://narr8.test:3951/2f8c-4a")).toBe(false);
+  });
+
+  it("returns false for a data URL", () => {
+    expect(isRemoteImageSrc("data:image/png;base64,iVBORw0KGgo=")).toBe(false);
+  });
+
+  it("returns false for an app-relative path", () => {
+    expect(isRemoteImageSrc("/logo.webp")).toBe(false);
+  });
+
+  it("returns false for an empty or missing src", () => {
+    expect(isRemoteImageSrc("")).toBe(false);
+    expect(isRemoteImageSrc(undefined)).toBe(false);
+  });
+});

package/src/utils/isRemoteImageSrc.ts

@@ -0,0 +1,16 @@
+/**
+ * True when an image src is an absolute remote URL.
+ *
+ * `next/image` THROWS when it is given an absolute URL whose hostname is not
+ * listed in `images.remotePatterns`, which takes down the whole page through
+ * the nearest error boundary. Avatars can come from OAuth providers
+ * (Discord, Google, ...), so their hostname is user-controlled and can never
+ * be reliably enumerated in config. Pass `unoptimized` for these srcs.
+ *
+ * `blob:` and `data:` srcs are excluded: `next/image` already marks those
+ * unoptimized on its own.
+ */
+export function isRemoteImageSrc(src?: string | null): boolean {
+  if (!src) return false;
+  return src.startsWith("http://") || src.startsWith("https://");
+}

package/dist/JsonApiRequest-YAPUG4ND.js

@@ -1,26 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-
-
-
-
-
-
-
-
-
-var _chunkQWCAOLBDjs = require('./chunk-QWCAOLBD.js');
-require('./chunk-7QVYU63E.js');
-
-
-
-
-
-
-
-
-
-
-
-exports.JsonApiDelete = _chunkQWCAOLBDjs.JsonApiDelete; exports.JsonApiGet = _chunkQWCAOLBDjs.JsonApiGet; exports.JsonApiPatch = _chunkQWCAOLBDjs.JsonApiPatch; exports.JsonApiPost = _chunkQWCAOLBDjs.JsonApiPost; exports.JsonApiPut = _chunkQWCAOLBDjs.JsonApiPut; exports.buildUrl = _chunkQWCAOLBDjs.buildUrl; exports.configureJsonApi = _chunkQWCAOLBDjs.configureJsonApi; exports.getApiUrl = _chunkQWCAOLBDjs.getApiUrl; exports.getAppUrl = _chunkQWCAOLBDjs.getAppUrl; exports.getTrackablePages = _chunkQWCAOLBDjs.getTrackablePages;
-//# sourceMappingURL=JsonApiRequest-YAPUG4ND.js.map