@directus/extensions-sdk 9.14.2 → 9.15.1

package/src/cli/commands/create.ts

@@ -3,10 +3,17 @@ import chalk from 'chalk';
 import fse from 'fs-extra';
 import execa from 'execa';
 import ora from 'ora';
-import { EXTENSION_TYPES, EXTENSION_PKG_KEY, EXTENSION_LANGUAGES } from '@directus/shared/constants';
-import { isAppExtension, isExtension } from '@directus/shared/utils';
+import {
+	EXTENSION_TYPES,
+	EXTENSION_PKG_KEY,
+	EXTENSION_LANGUAGES,
+	HYBRID_EXTENSION_TYPES,
+	API_OR_HYBRID_EXTENSION_TYPES,
+	APP_OR_HYBRID_EXTENSION_TYPES,
+} from '@directus/shared/constants';
+import { isIn } from '@directus/shared/utils';
 import { ExtensionType } from '@directus/shared/types';
-import log from '../utils/logger';
+import { log } from '../utils/logger';
 import { isLanguage, languageToShort } from '../utils/languages';
 import renameMap from '../utils/rename-map';
 import { Language } from '../types';
@@ -21,9 +28,9 @@ type CreateOptions = { language: string };
 export default async function create(type: string, name: string, options: CreateOptions): Promise<void> {
 	const targetPath = path.resolve(name);
 
-	if (!isExtension(type)) {
+	if (!isIn(type, EXTENSION_TYPES)) {
 		log(
-			`Extension type ${chalk.bold(type)} does not exist. Available extension types: ${EXTENSION_TYPES.map((t) =>
+			`Extension type ${chalk.bold(type)} is not supported. Available extension types: ${EXTENSION_TYPES.map((t) =>
 				chalk.bold.magenta(t)
 			).join(', ')}.`,
 			'error'
@@ -57,7 +64,7 @@ export default async function create(type: string, name: string, options: Create
 		process.exit(1);
 	}
 
-	const spinner = ora(`Scaffolding Directus extension...`).start();
+	const spinner = ora(chalk.bold('Scaffolding Directus extension...')).start();
 
 	await fse.ensureDir(targetPath);
 
@@ -65,14 +72,19 @@ export default async function create(type: string, name: string, options: Create
 	await fse.copy(path.join(TEMPLATE_PATH, type, options.language), targetPath);
 	await renameMap(targetPath, (name) => (name.startsWith('_') ? `.${name.substring(1)}` : null));
 
+	const entryPath = isIn(type, HYBRID_EXTENSION_TYPES) ? { app: 'dist/app.js', api: 'dist/api.js' } : 'dist/index.js';
+	const sourcePath = isIn(type, HYBRID_EXTENSION_TYPES)
+		? { app: `src/app.${languageToShort(options.language)}`, api: `src/api.${languageToShort(options.language)}` }
+		: `src/index.${languageToShort(options.language)}`;
+
 	const packageManifest = {
 		name: `directus-extension-${name}`,
 		version: '1.0.0',
 		keywords: ['directus', 'directus-extension', `directus-custom-${type}`],
 		[EXTENSION_PKG_KEY]: {
 			type,
-			path: 'dist/index.js',
-			source: `src/index.${languageToShort(options.language)}`,
+			path: entryPath,
+			source: sourcePath,
 			host: `^${pkg.version}`,
 		},
 		scripts: {
@@ -92,7 +104,7 @@ export default async function create(type: string, name: string, options: Create
 Your ${type} extension has been created at ${chalk.green(targetPath)}
 
 To start developing, run:
-  ${chalk.blue('cd')} c
+  ${chalk.blue('cd')} ${name}
   ${chalk.blue('npm run')} dev
 
 and then to build for production, run:
@@ -101,25 +113,16 @@ and then to build for production, run:
 }
 
 async function getPackageDeps(type: ExtensionType, language: Language) {
-	if (isAppExtension(type)) {
-		return {
-			'@directus/extensions-sdk': pkg.version,
-			...(language === 'typescript'
-				? {
-						typescript: `^${await getPackageVersion('typescript')}`,
-				  }
-				: {}),
-			vue: `^${await getPackageVersion('vue')}`,
-		};
-	} else {
-		return {
-			'@directus/extensions-sdk': pkg.version,
-			...(language === 'typescript'
-				? {
-						'@types/node': `^${await getPackageVersion('@types/node')}`,
-						typescript: `^${await getPackageVersion('typescript')}`,
-				  }
-				: {}),
-		};
-	}
+	return {
+		'@directus/extensions-sdk': pkg.version,
+		...(language === 'typescript'
+			? {
+					...(isIn(type, API_OR_HYBRID_EXTENSION_TYPES)
+						? { '@types/node': `^${await getPackageVersion('@types/node')}` }
+						: {}),
+					typescript: `^${await getPackageVersion('typescript')}`,
+			  }
+			: {}),
+		...(isIn(type, APP_OR_HYBRID_EXTENSION_TYPES) ? { vue: `^${await getPackageVersion('vue')}` } : {}),
+	};
 }

package/src/cli/run.ts

@@ -19,11 +19,11 @@ program
 program
 	.command('build')
 	.description('Bundle a Directus extension to a single entrypoint')
-	.option('-t, --type <type>', 'overwrite the extension type read from package manifest')
-	.option('-i, --input <file>', 'overwrite the entrypoint read from package manifest')
-	.option('-o, --output <file>', 'overwrite the output file read from package manifest')
-	.option('-l, --language <language>', 'overwrite the language to use')
-	.option('-f, --force', 'ignore the package manifest')
+	.option('-t, --type <type>', 'specify the extension type instead of reading from package manifest')
+	.option('-i, --input <file>', 'specify the entrypoint instead of reading from package manifest')
+	.option('-o, --output <file>', 'specify the output file instead of reading from package manifest')
+	.option('-l, --language <language>', '[DEPRECATED]')
+	.option('-f, --force', '[DEPRECATED]')
 	.option('-w, --watch', 'watch and rebuild on changes')
 	.option('--no-minify', 'disable minification')
 	.option('--sourcemap', 'include source maps in output')

package/src/cli/types.ts

@@ -1,4 +1,12 @@
 import { EXTENSION_LANGUAGES } from '@directus/shared/constants';
+import { Plugin, RollupOptions, OutputOptions as RollupOutputOptions } from 'rollup';
 
 export type Language = typeof EXTENSION_LANGUAGES[number];
 export type LanguageShort = 'js' | 'ts';
+
+export type Config = {
+	plugins?: Plugin[];
+};
+
+export type RollupConfig = { rollupOptions: RollupOptions; rollupOutputOptions: RollupOutputOptions };
+export type RollupMode = 'browser' | 'node';

package/src/cli/utils/load-config.ts

@@ -1,12 +1,13 @@
 import path from 'path';
 import fse from 'fs-extra';
+import { Config } from '../types';
 
 const CONFIG_FILE_NAMES = ['extension.config.js', 'extension.config.mjs', 'extension.config.cjs'];
 
 // This is needed to work around Typescript always transpiling import() to require() for CommonJS targets.
 const _import = new Function('url', 'return import(url)');
 
-export default async function loadConfig(): Promise<Record<string, any>> {
+export default async function loadConfig(): Promise<Config> {
 	for (const fileName of CONFIG_FILE_NAMES) {
 		if (await fse.pathExists(fileName)) {
 			const configFile = await _import(

package/src/cli/utils/logger.ts

@@ -1,8 +1,9 @@
 /* eslint-disable no-console */
 
+import readline from 'readline';
 import chalk from 'chalk';
 
-export default function log(message: string, type?: 'info' | 'warn' | 'error'): void {
+export function log(message: string, type?: 'info' | 'warn' | 'error'): void {
 	if (type === 'info') {
 		console.log(`${chalk.bold.gray('[Info]')} ${message}`);
 	} else if (type === 'warn') {
@@ -13,3 +14,12 @@ export default function log(message: string, type?: 'info' | 'warn' | 'error'):
 		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/src/cli/utils/to-object.ts

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

package/src/index.ts

@@ -6,6 +6,8 @@ export {
 	definePanel,
 	defineHook,
 	defineEndpoint,
+	defineOperationApp,
+	defineOperationApi,
 	getFieldsFromTemplate,
 	getRelationType,
 } from '@directus/shared/utils';

package/templates/common/typescript/tsconfig.json

@@ -22,7 +22,8 @@
 		"forceConsistentCasingInFileNames": true,
 		"allowSyntheticDefaultImports": true,
 		"isolatedModules": true,
-		"rootDir": "./src"
+		"rootDir": "./src",
+		"sourceMap": true
 	},
 	"include": ["./src/**/*.ts"]
 }

package/templates/operation/javascript/src/api.js

@@ -0,0 +1,6 @@
+export default {
+	id: 'custom',
+	handler: ({ text }) => {
+		console.log(text);
+	},
+};

package/templates/operation/javascript/src/app.js

@@ -0,0 +1,23 @@
+export default {
+	id: 'custom',
+	name: 'Custom',
+	icon: 'box',
+	description: 'This is my custom operation!',
+	overview: ({ text }) => [
+		{
+			label: 'Text',
+			text: text,
+		},
+	],
+	options: [
+		{
+			field: 'text',
+			name: 'Text',
+			type: 'string',
+			meta: {
+				width: 'full',
+				interface: 'input',
+			},
+		},
+	],
+};

package/templates/operation/typescript/src/api.ts

@@ -0,0 +1,12 @@
+import { defineOperationApi } from '@directus/extensions-sdk';
+
+type Options = {
+	text: string;
+};
+
+export default defineOperationApi<Options>({
+	id: 'custom',
+	handler: ({ text }) => {
+		console.log(text);
+	},
+});

package/templates/operation/typescript/src/app.ts

@@ -0,0 +1,25 @@
+import { defineOperationApp } from '@directus/extensions-sdk';
+
+export default defineOperationApp({
+	id: 'custom',
+	name: 'Custom',
+	icon: 'box',
+	description: 'This is my custom operation!',
+	overview: ({ text }) => [
+		{
+			label: 'Text',
+			text: text,
+		},
+	],
+	options: [
+		{
+			field: 'text',
+			name: 'Text',
+			type: 'string',
+			meta: {
+				width: 'full',
+				interface: 'input',
+			},
+		},
+	],
+});

package/templates/operation/typescript/src/shims.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+	import { DefineComponent } from 'vue';
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}