@directus/extensions-sdk 9.14.2 → 9.15.1

package/dist/esm/cli/utils/logger.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
+import readline from 'readline';
 import chalk from 'chalk';
-export default function log(message, type) {
+export function log(message, type) {
     if (type === 'info') {
         console.log(`${chalk.bold.gray('[Info]')} ${message}`);
     }
@@ -14,3 +15,10 @@ export default function log(message, type) {
         console.log(message);
     }
 }
+export function clear() {
+    const repeatCount = process.stdout.rows - 2;
+    const blank = repeatCount > 0 ? '\n'.repeat(repeatCount) : '';
+    console.log(blank);
+    readline.cursorTo(process.stdout, 0, 0);
+    readline.clearScreenDown(process.stdout);
+}

package/dist/esm/cli/utils/to-object.d.ts

@@ -0,0 +1,2 @@
+export default function toObject(val: string): Record<string, string> | null;
+//# sourceMappingURL=to-object.d.ts.map

package/dist/esm/cli/utils/to-object.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"to-object.d.ts","sourceRoot":"","sources":["../../../../src/cli/utils/to-object.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAe3E"}

package/dist/esm/cli/utils/to-object.js

@@ -0,0 +1,14 @@
+export default function toObject(val) {
+    const arr = val.split(',');
+    const obj = {};
+    for (const v of arr) {
+        const sub = v.match(/^([^:]+):(.+)$/);
+        if (sub) {
+            obj[sub[1]] = sub[2];
+        }
+        else {
+            return null;
+        }
+    }
+    return obj;
+}

package/dist/esm/index.d.ts

@@ -1,3 +1,3 @@
-export { defineInterface, defineDisplay, defineLayout, defineModule, definePanel, defineHook, defineEndpoint, getFieldsFromTemplate, getRelationType, } from '@directus/shared/utils';
+export { defineInterface, defineDisplay, defineLayout, defineModule, definePanel, defineHook, defineEndpoint, defineOperationApp, defineOperationApi, getFieldsFromTemplate, getRelationType, } from '@directus/shared/utils';
 export { useStores, useApi, useExtensions, useSync, useCollection, useItems, useLayout, useFilterFields, } from '@directus/shared/composables';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,eAAe,EACf,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,cAAc,EACd,qBAAqB,EACrB,eAAe,GACf,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACN,SAAS,EACT,MAAM,EACN,aAAa,EACb,OAAO,EACP,aAAa,EACb,QAAQ,EACR,SAAS,EACT,eAAe,GACf,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,eAAe,EACf,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,GACf,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACN,SAAS,EACT,MAAM,EACN,aAAa,EACb,OAAO,EACP,aAAa,EACb,QAAQ,EACR,SAAS,EACT,eAAe,GACf,MAAM,8BAA8B,CAAC"}

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { defineInterface, defineDisplay, defineLayout, defineModule, definePanel, defineHook, defineEndpoint, getFieldsFromTemplate, getRelationType, } from '@directus/shared/utils';
+export { defineInterface, defineDisplay, defineLayout, defineModule, definePanel, defineHook, defineEndpoint, defineOperationApp, defineOperationApi, getFieldsFromTemplate, getRelationType, } from '@directus/shared/utils';
 export { useStores, useApi, useExtensions, useSync, useCollection, useItems, useLayout, useFilterFields, } from '@directus/shared/composables';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@directus/extensions-sdk",
-  "version": "9.14.2",
+  "version": "9.15.1",
   "description": "A toolkit to develop extensions to extend Directus.",
   "main": "dist/cjs/index.js",
   "repository": "directus/directus",
@@ -25,7 +25,7 @@
   "author": "Nicola Krumschmidt",
   "gitHead": "24621f3934dc77eb23441331040ed13c676ceffd",
   "dependencies": {
-    "@directus/shared": "9.14.2",
+    "@directus/shared": "9.15.1",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
@@ -53,6 +53,6 @@
     "build:esm": "tsc --project ./tsconfig.json --module ES2015 --outDir ./dist/esm",
     "build:cjs": "tsc --project ./tsconfig.json --module CommonJS --outDir ./dist/cjs",
     "cleanup": "rimraf ./dist",
-    "dev": "npm run build -w --preserveWatchOutput --incremental"
+    "dev": "pnpm build -- -w --preserveWatchOutput --incremental"
   }
 }

package/src/cli/commands/build.ts

@@ -18,69 +18,183 @@ import typescript from 'rollup-plugin-typescript2';
 import { terser } from 'rollup-plugin-terser';
 import styles from 'rollup-plugin-styles';
 import vue from 'rollup-plugin-vue';
-import { EXTENSION_PKG_KEY, EXTENSION_TYPES, APP_SHARED_DEPS, API_SHARED_DEPS } from '@directus/shared/constants';
-import { isAppExtension, isExtension, validateExtensionManifest } from '@directus/shared/utils';
-import { ExtensionManifestRaw, ExtensionType } from '@directus/shared/types';
-import log from '../utils/logger';
+import {
+	EXTENSION_PKG_KEY,
+	EXTENSION_TYPES,
+	APP_SHARED_DEPS,
+	API_SHARED_DEPS,
+	APP_EXTENSION_TYPES,
+	HYBRID_EXTENSION_TYPES,
+} from '@directus/shared/constants';
+import { isIn, isTypeIn, validateExtensionManifest } from '@directus/shared/utils';
+import { ApiExtensionType, AppExtensionType, ExtensionManifestRaw } from '@directus/shared/types';
+import { log, clear } from '../utils/logger';
 import { getLanguageFromPath, isLanguage } from '../utils/languages';
-import { Language } from '../types';
+import { Language, RollupConfig, RollupMode } from '../types';
 import loadConfig from '../utils/load-config';
+import toObject from '../utils/to-object';
 
 type BuildOptions = {
-	type: string;
-	input: string;
-	output: string;
-	language: string;
-	force: boolean;
-	watch: boolean;
-	minify: boolean;
-	sourcemap: boolean;
+	type?: string;
+	input?: string;
+	output?: string;
+	watch?: boolean;
+	minify?: boolean;
+	sourcemap?: boolean;
 };
 
 export default async function build(options: BuildOptions): Promise<void> {
-	const packagePath = path.resolve('package.json');
-	let extensionManifest: ExtensionManifestRaw = {};
+	const watch = options.watch ?? false;
+	const sourcemap = options.sourcemap ?? false;
+	const minify = options.minify ?? false;
+
+	if (!options.type && !options.input && !options.output) {
+		const packagePath = path.resolve('package.json');
+		let extensionManifest: ExtensionManifestRaw = {};
+
+		if (!(await fse.pathExists(packagePath))) {
+			log(`Current directory is not a valid package.`, 'error');
+			process.exit(1);
+		} else {
+			extensionManifest = await fse.readJSON(packagePath);
+
+			if (!validateExtensionManifest(extensionManifest)) {
+				log(`Current directory is not a valid Directus extension.`, 'error');
+				process.exit(1);
+			}
+		}
+
+		const extensionOptions = extensionManifest[EXTENSION_PKG_KEY];
+
+		if (!isTypeIn(extensionOptions, EXTENSION_TYPES)) {
+			log(
+				`Extension type ${chalk.bold(
+					extensionOptions.type
+				)} is not supported. Available extension types: ${EXTENSION_TYPES.map((t) => chalk.bold.magenta(t)).join(
+					', '
+				)}.`,
+				'error'
+			);
+			process.exit(1);
+		}
 
-	if (!(await fse.pathExists(packagePath))) {
-		log(`Current directory is not a package.`, !options.force ? 'error' : 'warn');
-		if (!options.force) process.exit(1);
+		if (isTypeIn(extensionOptions, HYBRID_EXTENSION_TYPES)) {
+			await buildHybridExtension({
+				inputApp: extensionOptions.source.app,
+				inputApi: extensionOptions.source.api,
+				outputApp: extensionOptions.path.app,
+				outputApi: extensionOptions.path.api,
+				watch,
+				sourcemap,
+				minify,
+			});
+		} else {
+			await buildAppOrApiExtension({
+				type: extensionOptions.type,
+				input: extensionOptions.source,
+				output: extensionOptions.path,
+				watch,
+				sourcemap,
+				minify,
+			});
+		}
 	} else {
-		extensionManifest = await fse.readJSON(packagePath);
+		const type = options.type;
+		const input = options.input;
+		const output = options.output;
 
-		if (!validateExtensionManifest(extensionManifest)) {
-			log(`Current directory is not a Directus extension.`, !options.force ? 'error' : 'warn');
-			if (!options.force) process.exit(1);
+		if (!type) {
+			log(`Extension type has to be specified using the ${chalk.blue('[-t, --type <type>]')} option.`, 'error');
+			process.exit(1);
+		} else if (!isIn(type, EXTENSION_TYPES)) {
+			log(
+				`Extension type ${chalk.bold(type)} is not supported. Available extension types: ${EXTENSION_TYPES.map((t) =>
+					chalk.bold.magenta(t)
+				).join(', ')}.`,
+				'error'
+			);
+			process.exit(1);
 		}
-	}
 
-	const extensionOptions = extensionManifest[EXTENSION_PKG_KEY];
+		if (!input) {
+			log(`Extension entrypoint has to be specified using the ${chalk.blue('[-i, --input <file>]')} option.`, 'error');
+			process.exit(1);
+		}
+		if (!output) {
+			log(
+				`Extension output file has to be specified using the ${chalk.blue('[-o, --output <file>]')} option.`,
+				'error'
+			);
+			process.exit(1);
+		}
 
-	const type = options.type || extensionOptions?.type;
+		if (isIn(type, HYBRID_EXTENSION_TYPES)) {
+			const inputObject = toObject(input);
+			const outputObject = toObject(output);
 
-	if (!type || !isExtension(type)) {
-		log(
-			`Extension type ${chalk.bold(type)} does not exist. Available extension types: ${EXTENSION_TYPES.map((t) =>
-				chalk.bold.magenta(t)
-			).join(', ')}.`,
-			'error'
-		);
-		process.exit(1);
-	}
+			if (!inputObject || !inputObject.app || !inputObject.api) {
+				log(
+					`Input option needs to be of the format ${chalk.blue('[-i app:<app-entrypoint>,api:<api-entrypoint>]')}.`,
+					'error'
+				);
+				process.exit(1);
+			}
+			if (!outputObject || !outputObject.app || !outputObject.api) {
+				log(
+					`Output option needs to be of the format ${chalk.blue('[-o app:<app-output-file>,api:<api-output-file>]')}.`,
+					'error'
+				);
+				process.exit(1);
+			}
 
-	const input = options.input || (extensionOptions as { source: string })?.source;
-	const output = options.output || (extensionOptions as { path: string })?.path;
+			await buildHybridExtension({
+				inputApp: inputObject.app,
+				inputApi: inputObject.api,
+				outputApp: outputObject.app,
+				outputApi: outputObject.api,
+				watch,
+				sourcemap,
+				minify,
+			});
+		} else {
+			await buildAppOrApiExtension({
+				type,
+				input,
+				output,
+				watch,
+				sourcemap,
+				minify,
+			});
+		}
+	}
+}
 
-	if (!input || !(await fse.pathExists(input)) || !(await fse.stat(input)).isFile()) {
+async function buildAppOrApiExtension({
+	type,
+	input,
+	output,
+	watch,
+	sourcemap,
+	minify,
+}: {
+	type: AppExtensionType | ApiExtensionType;
+	input: string;
+	output: string;
+	watch: boolean;
+	sourcemap: boolean;
+	minify: boolean;
+}) {
+	if (!(await fse.pathExists(input)) || !(await fse.stat(input)).isFile()) {
 		log(`Entrypoint ${chalk.bold(input)} does not exist.`, 'error');
 		process.exit(1);
 	}
 
-	if (!output) {
-		log(`Output file must be a valid path.`, 'error');
+	if (output.length === 0) {
+		log(`Output file ${chalk.bold(output)} must be a valid path.`, 'error');
 		process.exit(1);
 	}
 
-	const language = options.language || getLanguageFromPath(input);
+	const language = getLanguageFromPath(input);
 
 	if (!isLanguage(language)) {
 		log(`Language ${chalk.bold(language)} is not supported.`, 'error');
@@ -88,61 +202,199 @@ export default async function build(options: BuildOptions): Promise<void> {
 	}
 
 	const config = await loadConfig();
+	const plugins = config.plugins ?? [];
+
+	const mode = isIn(type, APP_EXTENSION_TYPES) ? 'browser' : 'node';
+
+	const rollupOptions = getRollupOptions({ mode, input, language, sourcemap, minify, plugins });
+	const rollupOutputOptions = getRollupOutputOptions({ mode, output, sourcemap });
+
+	if (watch) {
+		await watchExtension({ rollupOptions, rollupOutputOptions });
+	} else {
+		await buildExtension({ rollupOptions, rollupOutputOptions });
+	}
+}
+
+async function buildHybridExtension({
+	inputApp,
+	inputApi,
+	outputApp,
+	outputApi,
+	watch,
+	sourcemap,
+	minify,
+}: {
+	inputApp: string;
+	inputApi: string;
+	outputApp: string;
+	outputApi: string;
+	watch: boolean;
+	sourcemap: boolean;
+	minify: boolean;
+}) {
+	if (!(await fse.pathExists(inputApp)) || !(await fse.stat(inputApp)).isFile()) {
+		log(`App entrypoint ${chalk.bold(inputApp)} does not exist.`, 'error');
+		process.exit(1);
+	}
+	if (!(await fse.pathExists(inputApi)) || !(await fse.stat(inputApi)).isFile()) {
+		log(`API entrypoint ${chalk.bold(inputApi)} does not exist.`, 'error');
+		process.exit(1);
+	}
 
-	const spinner = ora('Building Directus extension...').start();
+	if (outputApp.length === 0) {
+		log(`App output file ${chalk.bold(outputApp)} must be a valid path.`, 'error');
+		process.exit(1);
+	}
+	if (outputApi.length === 0) {
+		log(`API output file ${chalk.bold(outputApi)} must be a valid path.`, 'error');
+		process.exit(1);
+	}
 
-	const rollupOptions = getRollupOptions(type, language, input, config.plugins, options);
-	const rollupOutputOptions = getRollupOutputOptions(type, output, options);
+	const languageApp = getLanguageFromPath(inputApp);
+	const languageApi = getLanguageFromPath(inputApi);
 
-	if (options.watch) {
+	if (!isLanguage(languageApp)) {
+		log(`App language ${chalk.bold(languageApp)} is not supported.`, 'error');
+		process.exit(1);
+	}
+	if (!isLanguage(languageApi)) {
+		log(`API language ${chalk.bold(languageApp)} is not supported.`, 'error');
+		process.exit(1);
+	}
+
+	const config = await loadConfig();
+	const plugins = config.plugins ?? [];
+
+	const rollupOptionsApp = getRollupOptions({
+		mode: 'browser',
+		input: inputApp,
+		language: languageApp,
+		sourcemap,
+		minify,
+		plugins,
+	});
+	const rollupOptionsApi = getRollupOptions({
+		mode: 'node',
+		input: inputApi,
+		language: languageApi,
+		sourcemap,
+		minify,
+		plugins,
+	});
+	const rollupOutputOptionsApp = getRollupOutputOptions({ mode: 'browser', output: outputApp, sourcemap });
+	const rollupOutputOptionsApi = getRollupOutputOptions({ mode: 'node', output: outputApi, sourcemap });
+
+	const rollupOptionsAll = [
+		{ rollupOptions: rollupOptionsApp, rollupOutputOptions: rollupOutputOptionsApp },
+		{ rollupOptions: rollupOptionsApi, rollupOutputOptions: rollupOutputOptionsApi },
+	];
+
+	if (watch) {
+		await watchExtension(rollupOptionsAll);
+	} else {
+		await buildExtension(rollupOptionsAll);
+	}
+}
+
+async function buildExtension(config: RollupConfig | RollupConfig[]) {
+	const configs = Array.isArray(config) ? config : [config];
+
+	const spinner = ora(chalk.bold('Building Directus extension...')).start();
+
+	const result = await Promise.all(
+		configs.map(async (c) => {
+			try {
+				const bundle = await rollup(c.rollupOptions);
+
+				await bundle.write(c.rollupOutputOptions);
+				await bundle.close();
+			} catch (error) {
+				return formatRollupError(error as RollupError);
+			}
+
+			return null;
+		})
+	);
+
+	const resultErrors = result.filter((r) => r !== null);
+
+	if (resultErrors.length > 0) {
+		spinner.fail(chalk.bold('Failed'));
+
+		log(resultErrors.join('\n\n'));
+
+		process.exit(1);
+	} else {
+		spinner.succeed(chalk.bold('Done'));
+	}
+}
+
+async function watchExtension(config: RollupConfig | RollupConfig[]) {
+	const configs = Array.isArray(config) ? config : [config];
+
+	const spinner = ora(chalk.bold('Building Directus extension...'));
+
+	let buildCount = 0;
+
+	for (const c of configs) {
 		const watcher = rollupWatch({
-			...rollupOptions,
-			output: rollupOutputOptions,
+			...c.rollupOptions,
+			output: c.rollupOutputOptions,
 		});
 
 		watcher.on('event', async (event) => {
 			switch (event.code) {
-				case 'ERROR': {
-					spinner.fail(chalk.bold('Failed'));
-					handleRollupError(event.error);
-					spinner.start(chalk.bold('Watching files for changes...'));
+				case 'BUNDLE_START':
+					if (buildCount === 0) {
+						clear();
+						spinner.start();
+					}
+
+					buildCount++;
 					break;
-				}
 				case 'BUNDLE_END':
 					await event.result.close();
-					spinner.succeed(chalk.bold('Done'));
-					spinner.start(chalk.bold('Watching files for changes...'));
+
+					buildCount--;
+
+					if (buildCount === 0) {
+						spinner.succeed(chalk.bold('Done'));
+						log(chalk.bold.green('Watching files for changes...'));
+					}
 					break;
-				case 'BUNDLE_START':
-					spinner.text = 'Building Directus extension...';
+				case 'ERROR': {
+					buildCount--;
+
+					spinner.fail(chalk.bold('Failed'));
+					log(formatRollupError(event.error));
+
+					if (buildCount > 0) {
+						spinner.start();
+					}
 					break;
+				}
 			}
 		});
-	} else {
-		try {
-			const bundle = await rollup(rollupOptions);
-
-			await bundle.write(rollupOutputOptions);
-
-			await bundle.close();
-
-			spinner.succeed(chalk.bold('Done'));
-		} catch (error) {
-			spinner.fail(chalk.bold('Failed'));
-			handleRollupError(error as RollupError);
-			process.exitCode = 1;
-		}
 	}
 }
 
-function getRollupOptions(
-	type: ExtensionType,
-	language: Language,
-	input: string,
-	plugins: Plugin[] = [],
-	options: BuildOptions
-): RollupOptions {
-	if (isAppExtension(type)) {
+function getRollupOptions({
+	mode,
+	input,
+	language,
+	sourcemap,
+	minify,
+	plugins,
+}: {
+	mode: RollupMode;
+	input: string;
+	language: Language;
+	sourcemap: boolean;
+	minify: boolean;
+	plugins: Plugin[];
+}): RollupOptions {
+	if (mode === 'browser') {
 		return {
 			input,
 			external: APP_SHARED_DEPS,
@@ -152,7 +404,7 @@ function getRollupOptions(
 				styles(),
 				...plugins,
 				nodeResolve({ browser: true }),
-				commonjs({ esmExternals: true, sourceMap: options.sourcemap }),
+				commonjs({ esmExternals: true, sourceMap: sourcemap }),
 				json(),
 				replace({
 					values: {
@@ -160,7 +412,7 @@ function getRollupOptions(
 					},
 					preventAssignment: true,
 				}),
-				options.minify ? terser() : null,
+				minify ? terser() : null,
 			],
 		};
 	} else {
@@ -171,7 +423,7 @@ function getRollupOptions(
 				language === 'typescript' ? typescript({ check: false }) : null,
 				...plugins,
 				nodeResolve(),
-				commonjs({ sourceMap: options.sourcemap }),
+				commonjs({ sourceMap: sourcemap }),
 				json(),
 				replace({
 					values: {
@@ -179,19 +431,27 @@ function getRollupOptions(
 					},
 					preventAssignment: true,
 				}),
-				options.minify ? terser() : null,
+				minify ? terser() : null,
 			],
 		};
 	}
 }
 
-function getRollupOutputOptions(type: ExtensionType, output: string, options: BuildOptions): RollupOutputOptions {
-	if (isAppExtension(type)) {
+function getRollupOutputOptions({
+	mode,
+	output,
+	sourcemap,
+}: {
+	mode: RollupMode;
+	output: string;
+	sourcemap: boolean;
+}): RollupOutputOptions {
+	if (mode === 'browser') {
 		return {
 			file: output,
 			format: 'es',
 			inlineDynamicImports: true,
-			sourcemap: options.sourcemap,
+			sourcemap,
 		};
 	} else {
 		return {
@@ -199,30 +459,35 @@ function getRollupOutputOptions(type: ExtensionType, output: string, options: Bu
 			format: 'cjs',
 			exports: 'default',
 			inlineDynamicImports: true,
-			sourcemap: options.sourcemap,
+			sourcemap,
 		};
 	}
 }
 
-function handleRollupError(error: RollupError): void {
-	const pluginPrefix = error.plugin ? `(plugin ${error.plugin}) ` : '';
-	log('\n' + chalk.red.bold(`${pluginPrefix}${error.name}: ${error.message}`));
+function formatRollupError(error: RollupError): string {
+	let message = '';
+
+	message += `${chalk.bold.red(`[${error.name}]`)} ${error.message}${
+		error.plugin ? ` (plugin ${error.plugin})` : ''
+	}\n`;
 
 	if (error.url) {
-		log(chalk.cyan(error.url), 'error');
+		message += '\n' + chalk.green(error.url);
 	}
 
 	if (error.loc) {
-		log(`${(error.loc.file || error.id)!} (${error.loc.line}:${error.loc.column})`);
+		message += '\n' + chalk.green(`${error.loc.file ?? error.id}:${error.loc.line}:${error.loc.column}`);
 	} else if (error.id) {
-		log(error.id);
+		message += '\n' + chalk.green(error.id);
 	}
 
 	if (error.frame) {
-		log(chalk.dim(error.frame));
+		message += '\n' + chalk.dim(error.frame);
 	}
 
 	if (error.stack) {
-		log(chalk.dim(error.stack));
+		message += '\n' + chalk.dim(error.stack);
 	}
+
+	return message;
 }