@okam/directus-next-component 2.1.1 → 2.1.2

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## 2.1.2 (2026-04-09)
+
+### 🩹 Fixes
+
+- **directus-next-component:** safer directus URL creation ([#470](https://github.com/OKAMca/stack/pull/470))
+- resolve dependabot security alerts and clean up published package dependencies ([#441](https://github.com/OKAMca/stack/pull/441))
+
+### ❤️ Thank You
+
+- Claude Opus 4.6 (1M context)
+- Marie-Maxime Tanguay @marie-maxime
+- Pierre-Olivier Clerson @poclerson
+
 ## 2.1.0 (2026-04-06)
 
 ### 🩹 Fixes

package/index.d.ts

@@ -8,7 +8,7 @@ export { default as DirectusVideo } from './components/DirectusVideo';
 export type { TDirectusVideoProps } from './components/DirectusVideo/interface';
 export { logger as DirectusNextComponent } from './logger';
 export type * from './types';
-export { getDirectusFile, useDirectusFile } from './utils/getDirectusFile';
+export { getDirectusFile, getDirectusUrl, useDirectusFile } from './utils/getDirectusFile';
 export { getDirectusLink, useDirectusLink } from './utils/getDirectusLink';
 export { getMetadata, useMetadata } from './utils/getDirectusMetadata';
 export { getDirectusSearchParams } from './utils/getDirectusSearchParams';

package/index.js

@@ -16,6 +16,7 @@ exports.DirectusLink = index$2;
 exports.DirectusVideo = index$3;
 exports.DirectusNextComponent = logger.logger;
 exports.getDirectusFile = index$4.getDirectusFile;
+exports.getDirectusUrl = index$4.getDirectusUrl;
 exports.useDirectusFile = index$4.useDirectusFile;
 exports.getDirectusLink = index$5.getDirectusLink;
 exports.useDirectusLink = index$5.useDirectusLink;

package/index.mjs

@@ -3,7 +3,7 @@ import { default as default3 } from "./components/DirectusImg/index.mjs";
 import { default as default4 } from "./components/DirectusLink/index.mjs";
 import { default as default5 } from "./components/DirectusVideo/index.mjs";
 import { logger } from "./logger.mjs";
-import { getDirectusFile, useDirectusFile } from "./utils/getDirectusFile/index.mjs";
+import { getDirectusFile, getDirectusUrl, useDirectusFile } from "./utils/getDirectusFile/index.mjs";
 import { getDirectusLink, useDirectusLink } from "./utils/getDirectusLink/index.mjs";
 import { getMetadata, useMetadata } from "./utils/getDirectusMetadata/index.mjs";
 import { getDirectusSearchParams } from "./utils/getDirectusSearchParams/index.mjs";
@@ -17,6 +17,7 @@ export {
   getDirectusFile,
   getDirectusLink,
   getDirectusSearchParams,
+  getDirectusUrl,
   getMetadata,
   getNavigationItems,
   useDirectusFile,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okam/directus-next-component",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "repository": {
     "url": "https://github.com/OKAMca/stack.git"
   },

package/utils/getDirectusFile/index.d.ts

@@ -1,6 +1,20 @@
 import { TFiles } from '@okam/directus-next';
 import { Nullable } from '@okam/stack-ui';
+/**
+ * Creates a Directus asset URL from a Directus file
+ * @param file Directus file to create the asset URL from
+ * @param baseUrl Override Directus asset URL creation. By default, this falls back to `NEXT_PUBLIC_IMG_DOMAIN`, `NEXT_PUBLIC_IMG_PORT` and `NEXT_PUBLIC_IMG_PROTOCOL`
+ * @param searchParams Additional search params to append to the URL
+ * @returns Directus asset URL
+ */
 export declare function getDirectusUrl(file: Nullable<TFiles>, baseUrl?: URL, searchParams?: Record<string, Nullable<string>>): URL | null;
+/**
+ * Wrapper for {@link getDirectusUrl} to format a Directus file into `next/image` `Image` props
+ * @param file Directus file to create the asset URL from
+ * @param baseUrl Override Directus asset URL creation. By default, this falls back to `NEXT_PUBLIC_IMG_DOMAIN`, `NEXT_PUBLIC_IMG_PORT` and `NEXT_PUBLIC_IMG_PROTOCOL`
+ * @param searchParams Additional search params to append to the URL
+ * @returns Props ready to be passed to `next/image` `Image` component
+ */
 export declare function getDirectusFile(file: Nullable<TFiles>, baseUrl?: URL, searchParams?: Record<string, Nullable<string>>): {
     tags?: unknown;
     location?: string | null;

package/utils/getDirectusFile/index.js

@@ -1,39 +1,41 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const radashi = require("radashi");
 const logger = require("../../logger.js");
 const IMG_DOMAIN = process.env.NEXT_PUBLIC_IMG_DOMAIN;
 const IMG_PORT = process.env.NEXT_PUBLIC_IMG_PORT;
 const IMG_PROTOCOL = process.env.NEXT_PUBLIC_IMG_PROTOCOL ?? "https";
-function setSearchParams(url, searchParams) {
-  Object.entries(searchParams).forEach(([key, value]) => {
-    if (value == null || value === "")
-      return;
-    url.searchParams.set(key, value);
-  });
-}
 function getDirectusUrl(file, baseUrl, searchParams) {
   const { id, filename_download, filenameDownload } = file ?? {};
-  const { protocol = IMG_PROTOCOL, port = IMG_PORT, hostname = IMG_DOMAIN } = baseUrl ?? {};
-  if (hostname == null || hostname === "" || id == null || id === "")
+  const protocol = (baseUrl?.protocol ?? IMG_PROTOCOL).replace(/:$/, "");
+  const hostname = baseUrl?.hostname ?? IMG_DOMAIN;
+  const port = baseUrl?.port ?? IMG_PORT;
+  if (radashi.isEmpty(hostname) || radashi.isEmpty(id)) {
+    logger.logger.log("Invalid props or environment variables", "warn", { hostname, props: file });
     return null;
+  }
   try {
     const url = new URL(`/assets/${id}/${filename_download ?? filenameDownload ?? ""}`, `${protocol}://${hostname}`);
-    if (port != null && port !== "")
+    if (!radashi.isEmpty(port))
       url.port = port;
-    if (searchParams != null)
-      setSearchParams(url, searchParams);
+    if (!radashi.isNullish(searchParams)) {
+      for (const [key, value] of Object.entries(searchParams)) {
+        if (!radashi.isEmpty(value))
+          url.searchParams.set(key, value);
+      }
+    }
     return url;
   } catch (error) {
-    logger.logger.log("Couldn't create URL", "warn", { error });
+    logger.logger.log("Couldn't create URL", "warn", { error, props: file });
     return null;
   }
 }
 function getDirectusFile(file, baseUrl, searchParams) {
   const { description, width, height, title, id, ...rest } = file ?? {};
-  if (file == null || id == null || id === "")
+  if (radashi.isEmpty(file) || radashi.isEmpty(id))
     return null;
   const url = getDirectusUrl(file, baseUrl, searchParams);
-  if (url == null)
+  if (radashi.isNullish(url))
     return null;
   return {
     src: url.href,

package/utils/getDirectusFile/index.mjs

@@ -1,37 +1,39 @@
+import { isEmpty, isNullish } from "radashi";
 import { logger } from "../../logger.mjs";
 const IMG_DOMAIN = process.env.NEXT_PUBLIC_IMG_DOMAIN;
 const IMG_PORT = process.env.NEXT_PUBLIC_IMG_PORT;
 const IMG_PROTOCOL = process.env.NEXT_PUBLIC_IMG_PROTOCOL ?? "https";
-function setSearchParams(url, searchParams) {
-  Object.entries(searchParams).forEach(([key, value]) => {
-    if (value == null || value === "")
-      return;
-    url.searchParams.set(key, value);
-  });
-}
 function getDirectusUrl(file, baseUrl, searchParams) {
   const { id, filename_download, filenameDownload } = file ?? {};
-  const { protocol = IMG_PROTOCOL, port = IMG_PORT, hostname = IMG_DOMAIN } = baseUrl ?? {};
-  if (hostname == null || hostname === "" || id == null || id === "")
+  const protocol = (baseUrl?.protocol ?? IMG_PROTOCOL).replace(/:$/, "");
+  const hostname = baseUrl?.hostname ?? IMG_DOMAIN;
+  const port = baseUrl?.port ?? IMG_PORT;
+  if (isEmpty(hostname) || isEmpty(id)) {
+    logger.log("Invalid props or environment variables", "warn", { hostname, props: file });
     return null;
+  }
   try {
     const url = new URL(`/assets/${id}/${filename_download ?? filenameDownload ?? ""}`, `${protocol}://${hostname}`);
-    if (port != null && port !== "")
+    if (!isEmpty(port))
       url.port = port;
-    if (searchParams != null)
-      setSearchParams(url, searchParams);
+    if (!isNullish(searchParams)) {
+      for (const [key, value] of Object.entries(searchParams)) {
+        if (!isEmpty(value))
+          url.searchParams.set(key, value);
+      }
+    }
     return url;
   } catch (error) {
-    logger.log("Couldn't create URL", "warn", { error });
+    logger.log("Couldn't create URL", "warn", { error, props: file });
     return null;
   }
 }
 function getDirectusFile(file, baseUrl, searchParams) {
   const { description, width, height, title, id, ...rest } = file ?? {};
-  if (file == null || id == null || id === "")
+  if (isEmpty(file) || isEmpty(id))
     return null;
   const url = getDirectusUrl(file, baseUrl, searchParams);
-  if (url == null)
+  if (isNullish(url))
     return null;
   return {
     src: url.href,