Add a pathToRelativeUrl util function (#15578)

api/src/extensions.ts

@@ -20,6 +20,7 @@ import {
 	generateExtensionsEntry,
 	getLocalExtensions,
 	getPackageExtensions,
+	pathToRelativeUrl,
 	resolvePackage,
 } from '@directus/shared/utils/node';
 import {
@@ -226,10 +227,7 @@ class ExtensionManager {
 			logger.info('Watching extensions for changes...');
 
 			const localExtensionPaths = (env.SERVE_APP ? EXTENSION_TYPES : API_OR_HYBRID_EXTENSION_TYPES).flatMap((type) => {
-				const typeDir = path.posix.join(
-					path.relative('.', env.EXTENSIONS_PATH).split(path.sep).join(path.posix.sep),
-					pluralize(type)
-				);
+				const typeDir = path.posix.join(pathToRelativeUrl(env.EXTENSIONS_PATH), pluralize(type));
 
 				return isIn(type, HYBRID_EXTENSION_TYPES)
 					? [path.posix.join(typeDir, '*', 'app.js'), path.posix.join(typeDir, '*', 'api.js')]
@@ -380,9 +378,7 @@ class ExtensionManager {
 	}
 
 	private async registerOperations(): Promise<void> {
-		const internalPaths = await globby(
-			path.posix.join(path.relative('.', __dirname).split(path.sep).join(path.posix.sep), 'operations/*/index.(js|ts)')
-		);
+		const internalPaths = await globby(path.posix.join(pathToRelativeUrl(__dirname), 'operations/*/index.(js|ts)'));
 
 		const internalOperations = internalPaths.map((internalPath) => {
 			const dirs = internalPath.split(path.sep);

packages/extensions-sdk/src/cli/utils/load-config.ts

@@ -1,6 +1,7 @@
 import path from 'path';
 import fse from 'fs-extra';
 import { Config } from '../types';
+import { pathToRelativeUrl } from '@directus/shared/utils/node';
 
 const CONFIG_FILE_NAMES = ['extension.config.js', 'extension.config.mjs', 'extension.config.cjs'];
 
@@ -10,9 +11,7 @@ const _import = new Function('url', 'return import(url)');
 export default async function loadConfig(): Promise<Config> {
 	for (const fileName of CONFIG_FILE_NAMES) {
 		if (await fse.pathExists(fileName)) {
-			const configFile = await _import(
-				path.relative(__dirname, path.join(process.cwd(), fileName)).split(path.sep).join(path.posix.sep)
-			);
+			const configFile = await _import(pathToRelativeUrl(path.resolve(fileName), __dirname));
 
 			return configFile.default;
 		}

packages/shared/src/utils/node/generate-extensions-entry.ts

@@ -2,6 +2,7 @@ import path from 'path';
 import { HYBRID_EXTENSION_TYPES } from '../../constants';
 import { AppExtension, AppExtensionType, Extension, HybridExtension, HybridExtensionType } from '../../types';
 import { isTypeIn } from '../array-helpers';
+import { pathToRelativeUrl } from './path-to-relative-url';
 
 export function generateExtensionsEntry(type: AppExtensionType | HybridExtensionType, extensions: Extension[]): string {
 	const filteredExtensions = extensions.filter(
@@ -11,16 +12,12 @@ export function generateExtensionsEntry(type: AppExtensionType | HybridExtension
 	return `${filteredExtensions
 		.map(
 			(extension, i) =>
-				`import e${i} from './${path
-					.relative(
-						'.',
-						path.resolve(
-							extension.path,
-							isTypeIn(extension, HYBRID_EXTENSION_TYPES) ? extension.entrypoint.app : extension.entrypoint
-						)
+				`import e${i} from './${pathToRelativeUrl(
+					path.resolve(
+						extension.path,
+						isTypeIn(extension, HYBRID_EXTENSION_TYPES) ? extension.entrypoint.app : extension.entrypoint
 					)
-					.split(path.sep)
-					.join(path.posix.sep)}';\n`
+				)}';\n`
 		)
 		.join('')}export default [${filteredExtensions.map((_, i) => `e${i}`).join(',')}];`;
 }

packages/shared/src/utils/node/index.ts

@@ -2,4 +2,5 @@ export * from './ensure-extension-dirs';
 export * from './generate-extensions-entry';
 export * from './get-extensions';
 export * from './list-folders';
+export * from './path-to-relative-url';
 export * from './resolve-package';

packages/shared/src/utils/node/list-folders.test.ts

@@ -7,8 +7,8 @@ describe('', () => {
 	let childDir: DirResult;
 
 	beforeEach(() => {
-		rootDir = dirSync({ unsafeCleanup: true, tmpdir: './' } as any);
-		childDir = dirSync({ tmpdir: rootDir.name } as any);
+		rootDir = dirSync({ unsafeCleanup: true, tmpdir: './' });
+		childDir = dirSync({ tmpdir: rootDir.name });
 	});
 
 	afterEach(() => {

packages/shared/src/utils/node/path-to-relative-url.test.ts

@@ -0,0 +1,19 @@
+import path from 'path';
+import { describe, expect, it } from 'vitest';
+import { pathToRelativeUrl } from './path-to-relative-url';
+
+describe('pathToRelativeUrl', () => {
+	const filePath = path.resolve(path.join('foo', 'bar.txt'));
+
+	it('returns a URL relative to the current working directory', async () => {
+		const relativeUrl = pathToRelativeUrl(filePath);
+
+		expect(relativeUrl).toBe('foo/bar.txt');
+	});
+
+	it('returns a URL relative to the given path if it is passed as the second argument', async () => {
+		const relativeUrl = pathToRelativeUrl(filePath, __dirname);
+
+		expect(relativeUrl).toBe('../../../foo/bar.txt');
+	});
+});

packages/shared/src/utils/node/path-to-relative-url.ts

@@ -0,0 +1,5 @@
+import path from 'path';
+
+export function pathToRelativeUrl(filePath: string, root = '.') {
+	return path.relative(root, filePath).split(path.sep).join(path.posix.sep);
+}