@directus/extensions-sdk 10.0.0 → 10.1.1

package/dist/cli/commands/build.js

@@ -6,6 +6,7 @@ import { nodeResolve } from '@rollup/plugin-node-resolve';
 import replaceDefault from '@rollup/plugin-replace';
 import terserDefault from '@rollup/plugin-terser';
 import virtualDefault from '@rollup/plugin-virtual';
+import vueDefault from '@vitejs/plugin-vue';
 import chalk from 'chalk';
 import fse from 'fs-extra';
 import ora from 'ora';
@@ -13,8 +14,7 @@ import path from 'path';
 import { rollup, watch as rollupWatch } from 'rollup';
 import esbuildDefault from 'rollup-plugin-esbuild';
 import stylesDefault from 'rollup-plugin-styles';
-import vueDefault from 'rollup-plugin-vue';
-import { getLanguageFromPath, isLanguage } from '../utils/languages.js';
+import { getFileExt } from '../utils/file.js';
 import { clear, log } from '../utils/logger.js';
 import tryParseJson from '../utils/try-parse-json.js';
 import generateBundleEntrypoint from './helpers/generate-bundle-entrypoint.js';
@@ -48,11 +48,13 @@ export default async function build(options) {
             process.exit(1);
         }
         const extensionOptions = extensionManifest[EXTENSION_PKG_KEY];
+        const format = extensionManifest.type === 'module' ? 'esm' : 'cjs';
         if (extensionOptions.type === 'bundle') {
             await buildBundleExtension({
                 entries: extensionOptions.entries,
                 outputApp: extensionOptions.path.app,
                 outputApi: extensionOptions.path.api,
+                format,
                 watch,
                 sourcemap,
                 minify,
@@ -64,6 +66,7 @@ export default async function build(options) {
                 inputApi: extensionOptions.source.api,
                 outputApp: extensionOptions.path.app,
                 outputApi: extensionOptions.path.api,
+                format,
                 watch,
                 sourcemap,
                 minify,
@@ -74,6 +77,7 @@ export default async function build(options) {
                 type: extensionOptions.type,
                 input: extensionOptions.source,
                 output: extensionOptions.path,
+                format,
                 watch,
                 sourcemap,
                 minify,
@@ -115,6 +119,7 @@ export default async function build(options) {
                 entries: entries.data,
                 outputApp: splitOutput.app,
                 outputApi: splitOutput.api,
+                format: 'esm',
                 watch,
                 sourcemap,
                 minify,
@@ -136,6 +141,7 @@ export default async function build(options) {
                 inputApi: splitInput.api,
                 outputApp: splitOutput.app,
                 outputApi: splitOutput.api,
+                format: 'esm',
                 watch,
                 sourcemap,
                 minify,
@@ -146,6 +152,7 @@ export default async function build(options) {
                 type,
                 input,
                 output,
+                format: 'esm',
                 watch,
                 sourcemap,
                 minify,
@@ -153,7 +160,7 @@ export default async function build(options) {
         }
     }
 }
-async function buildAppOrApiExtension({ type, input, output, watch, sourcemap, minify, }) {
+async function buildAppOrApiExtension({ type, input, output, format, watch, sourcemap, minify, }) {
     if (!(await fse.pathExists(input)) || !(await fse.stat(input)).isFile()) {
         log(`Entrypoint ${chalk.bold(input)} does not exist.`, 'error');
         process.exit(1);
@@ -162,16 +169,11 @@ async function buildAppOrApiExtension({ type, input, output, watch, sourcemap, m
         log(`Output file can not be empty.`, 'error');
         process.exit(1);
     }
-    const language = getLanguageFromPath(input);
-    if (!isLanguage(language)) {
-        log(`Language ${chalk.bold(language)} is not supported.`, 'error');
-        process.exit(1);
-    }
     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 });
+    const rollupOptions = getRollupOptions({ mode, input, sourcemap, minify, plugins });
+    const rollupOutputOptions = getRollupOutputOptions({ mode, output, format, sourcemap });
     if (watch) {
         await watchExtension({ rollupOptions, rollupOutputOptions });
     }
@@ -179,7 +181,7 @@ async function buildAppOrApiExtension({ type, input, output, watch, sourcemap, m
         await buildExtension({ rollupOptions, rollupOutputOptions });
     }
 }
-async function buildHybridExtension({ inputApp, inputApi, outputApp, outputApi, watch, sourcemap, minify, }) {
+async function buildHybridExtension({ inputApp, inputApi, outputApp, outputApi, format, watch, sourcemap, minify, }) {
     if (!(await fse.pathExists(inputApp)) || !(await fse.stat(inputApp)).isFile()) {
         log(`App entrypoint ${chalk.bold(inputApp)} does not exist.`, 'error');
         process.exit(1);
@@ -196,22 +198,11 @@ async function buildHybridExtension({ inputApp, inputApi, outputApp, outputApi,
         log(`API output file can not be empty.`, 'error');
         process.exit(1);
     }
-    const languageApp = getLanguageFromPath(inputApp);
-    const languageApi = getLanguageFromPath(inputApi);
-    if (!isLanguage(languageApp)) {
-        log(`App language ${chalk.bold(languageApp)} is not supported.`, 'error');
-        process.exit(1);
-    }
-    if (!isLanguage(languageApi)) {
-        log(`API language ${chalk.bold(languageApi)} 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,
@@ -219,13 +210,12 @@ async function buildHybridExtension({ inputApp, inputApi, outputApp, outputApi,
     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 rollupOutputOptionsApp = getRollupOutputOptions({ mode: 'browser', output: outputApp, format, sourcemap });
+    const rollupOutputOptionsApi = getRollupOutputOptions({ mode: 'node', output: outputApi, format, sourcemap });
     const rollupOptionsAll = [
         { rollupOptions: rollupOptionsApp, rollupOutputOptions: rollupOutputOptionsApp },
         { rollupOptions: rollupOptionsApi, rollupOutputOptions: rollupOutputOptionsApi },
@@ -237,7 +227,7 @@ async function buildHybridExtension({ inputApp, inputApi, outputApp, outputApi,
         await buildExtension(rollupOptionsAll);
     }
 }
-async function buildBundleExtension({ entries, outputApp, outputApi, watch, sourcemap, minify, }) {
+async function buildBundleExtension({ entries, outputApp, outputApi, format, watch, sourcemap, minify, }) {
     if (outputApp.length === 0) {
         log(`App output file can not be empty.`, 'error');
         process.exit(1);
@@ -246,52 +236,6 @@ async function buildBundleExtension({ entries, outputApp, outputApi, watch, sour
         log(`API output file can not be empty.`, 'error');
         process.exit(1);
     }
-    const languagesApp = new Set();
-    const languagesApi = new Set();
-    for (const entry of entries) {
-        if (isTypeIn(entry, HYBRID_EXTENSION_TYPES)) {
-            const inputApp = entry.source.app;
-            const inputApi = entry.source.api;
-            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 languageApp = getLanguageFromPath(inputApp);
-            const languageApi = getLanguageFromPath(inputApi);
-            if (!isLanguage(languageApp)) {
-                log(`App language ${chalk.bold(languageApp)} is not supported.`, 'error');
-                process.exit(1);
-            }
-            if (!isLanguage(languageApi)) {
-                log(`API language ${chalk.bold(languageApi)} is not supported.`, 'error');
-                process.exit(1);
-            }
-            languagesApp.add(languageApp);
-            languagesApi.add(languageApi);
-        }
-        else {
-            const input = entry.source;
-            if (!(await fse.pathExists(input)) || !(await fse.stat(input)).isFile()) {
-                log(`Entrypoint ${chalk.bold(input)} does not exist.`, 'error');
-                process.exit(1);
-            }
-            const language = getLanguageFromPath(input);
-            if (!isLanguage(language)) {
-                log(`Language ${chalk.bold(language)} is not supported.`, 'error');
-                process.exit(1);
-            }
-            if (isIn(entry.type, APP_EXTENSION_TYPES)) {
-                languagesApp.add(language);
-            }
-            else {
-                languagesApi.add(language);
-            }
-        }
-    }
     const config = await loadConfig();
     const plugins = config.plugins ?? [];
     const entrypointApp = generateBundleEntrypoint('app', entries);
@@ -299,7 +243,6 @@ async function buildBundleExtension({ entries, outputApp, outputApi, watch, sour
     const rollupOptionsApp = getRollupOptions({
         mode: 'browser',
         input: { entry: entrypointApp },
-        language: Array.from(languagesApp),
         sourcemap,
         minify,
         plugins,
@@ -307,13 +250,12 @@ async function buildBundleExtension({ entries, outputApp, outputApi, watch, sour
     const rollupOptionsApi = getRollupOptions({
         mode: 'node',
         input: { entry: entrypointApi },
-        language: Array.from(languagesApi),
         sourcemap,
         minify,
         plugins,
     });
-    const rollupOutputOptionsApp = getRollupOutputOptions({ mode: 'browser', output: outputApp, sourcemap });
-    const rollupOutputOptionsApi = getRollupOutputOptions({ mode: 'node', output: outputApi, sourcemap });
+    const rollupOutputOptionsApp = getRollupOutputOptions({ mode: 'browser', output: outputApp, format, sourcemap });
+    const rollupOutputOptionsApi = getRollupOutputOptions({ mode: 'node', output: outputApi, format, sourcemap });
     const rollupOptionsAll = [
         { rollupOptions: rollupOptionsApp, rollupOutputOptions: rollupOutputOptionsApp },
         { rollupOptions: rollupOptionsApi, rollupOutputOptions: rollupOutputOptionsApi },
@@ -388,18 +330,17 @@ async function watchExtension(config) {
         });
     }
 }
-function getRollupOptions({ mode, input, language, sourcemap, minify, plugins, }) {
-    const languages = Array.isArray(language) ? language : [language];
+function getRollupOptions({ mode, input, sourcemap, minify, plugins, }) {
     return {
         input: typeof input !== 'string' ? 'entry' : input,
         external: mode === 'browser' ? APP_SHARED_DEPS : API_SHARED_DEPS,
         plugins: [
             typeof input !== 'string' ? virtual(input) : null,
-            mode === 'browser' ? vue({ preprocessStyles: true }) : null,
-            languages.includes('typescript') ? esbuild({ include: /\.tsx?$/, sourceMap: sourcemap }) : null,
+            mode === 'browser' ? vue({ isProduction: true }) : null,
+            esbuild({ include: /\.tsx?$/, sourceMap: sourcemap }),
             mode === 'browser' ? styles() : null,
             ...plugins,
-            nodeResolve({ browser: mode === 'browser' }),
+            nodeResolve({ browser: mode === 'browser', preferBuiltins: mode === 'node' }),
             commonjs({ esmExternals: mode === 'browser', sourceMap: sourcemap }),
             json(),
             replace({
@@ -410,12 +351,25 @@ function getRollupOptions({ mode, input, language, sourcemap, minify, plugins, }
             }),
             minify ? terser() : null,
         ],
+        onwarn(warning, warn) {
+            if (warning.code === 'CIRCULAR_DEPENDENCY' && warning.ids?.every((id) => /\bnode_modules\b/.test(id)))
+                return;
+            warn(warning);
+        },
     };
 }
-function getRollupOutputOptions({ mode, output, sourcemap, }) {
+function getRollupOutputOptions({ mode, output, format, sourcemap, }) {
+    const fileExtension = getFileExt(output);
+    let outputFormat = format;
+    if (mode === 'browser' || fileExtension === 'mjs') {
+        outputFormat = 'esm';
+    }
+    else if (fileExtension === 'cjs') {
+        outputFormat = 'cjs';
+    }
     return {
         file: output,
-        format: mode === 'browser' ? 'es' : 'cjs',
+        format: outputFormat,
         exports: 'auto',
         inlineDynamicImports: true,
         sourcemap,

package/dist/cli/commands/create.js

@@ -91,6 +91,7 @@ function getPackageManifest(name, options, deps) {
         icon: 'extension',
         version: '1.0.0',
         keywords: ['directus', 'directus-extension', `directus-custom-${options.type}`],
+        type: 'module',
         [EXTENSION_PKG_KEY]: options,
         scripts: {
             build: 'directus-extension build',

package/dist/cli/commands/helpers/generate-bundle-entrypoint.js

@@ -5,14 +5,29 @@ import path from 'path';
 export default function generateBundleEntrypoint(mode, entries) {
     const types = [...(mode === 'app' ? APP_EXTENSION_TYPES : API_EXTENSION_TYPES), ...HYBRID_EXTENSION_TYPES];
     const entriesForTypes = entries.filter((entry) => isIn(entry.type, types));
-    const imports = entriesForTypes.map((entry, i) => `import e${i} from './${pathToRelativeUrl(path.resolve(isTypeIn(entry, HYBRID_EXTENSION_TYPES)
-        ? mode === 'app'
-            ? entry.source.app
-            : entry.source.api
-        : entry.source))}';`);
-    const exports = types.map((type) => `export const ${pluralize(type)} = [${entriesForTypes
-        .map((entry, i) => entry.type === type ? (mode === 'app' ? `e${i}` : `{name:'${entry.name}',config:e${i}}`) : null)
-        .filter((e) => e !== null)
-        .join(',')}];`);
+    const imports = entriesForTypes.map((entry, index) => {
+        let entryPath;
+        if (isTypeIn(entry, HYBRID_EXTENSION_TYPES)) {
+            entryPath = mode === 'app' ? entry.source.app : entry.source.api;
+        }
+        else {
+            entryPath = entry.source;
+        }
+        return `import e${index} from './${pathToRelativeUrl(path.resolve(entryPath))}';`;
+    });
+    const exports = types.map((type) => {
+        const entries = entriesForTypes.reduce((result, entry, index) => {
+            if (entry.type !== type)
+                return result;
+            if (mode === 'app') {
+                result.push(`e${index}`);
+            }
+            else {
+                result.push(`{name:'${entry.name}',config:e${index}}`);
+            }
+            return result;
+        }, []);
+        return `export const ${pluralize(type)} = [${entries.join(',')}];`;
+    });
     return `${imports.join('')}${exports.join('')}`;
 }

package/dist/cli/commands/helpers/load-config.d.ts

@@ -1,3 +1,2 @@
 import type { Config } from '../../types.js';
-export declare const CONFIG_FILE_NAMES: string[];
 export default function loadConfig(): Promise<Config>;

package/dist/cli/commands/helpers/load-config.js

@@ -1,15 +1,14 @@
+import { JAVASCRIPT_FILE_EXTS } from '@directus/constants';
 import { pathToRelativeUrl } from '@directus/utils/node';
 import fse from 'fs-extra';
 import path from 'path';
 import { fileURLToPath } from 'url';
-export 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)');
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 export default async function loadConfig() {
-    for (const fileName of CONFIG_FILE_NAMES) {
+    for (const ext of JAVASCRIPT_FILE_EXTS) {
+        const fileName = `extension.config.${ext}`;
         if (await fse.pathExists(fileName)) {
-            const configFile = await _import(pathToRelativeUrl(path.resolve(fileName), __dirname));
+            const configFile = await import(pathToRelativeUrl(path.resolve(fileName), __dirname));
             return configFile.default;
         }
     }

package/dist/cli/types.d.ts

@@ -10,3 +10,4 @@ export type RollupConfig = {
     rollupOutputOptions: RollupOutputOptions;
 };
 export type RollupMode = 'browser' | 'node';
+export type Format = 'esm' | 'cjs';

package/dist/cli/utils/file.d.ts

@@ -0,0 +1 @@
+export declare function getFileExt(path: string): string;

package/dist/cli/utils/file.js

@@ -0,0 +1,3 @@
+export function getFileExt(path) {
+    return path.substring(path.lastIndexOf('.') + 1);
+}

package/dist/cli/utils/languages.js

@@ -1,4 +1,5 @@
 import { EXTENSION_LANGUAGES } from '@directus/constants';
+import { getFileExt } from './file.js';
 export function isLanguage(language) {
     return EXTENSION_LANGUAGES.includes(language);
 }
@@ -11,7 +12,7 @@ export function languageToShort(language) {
     }
 }
 export function getLanguageFromPath(path) {
-    const fileExtension = path.substring(path.lastIndexOf('.') + 1);
+    const fileExtension = getFileExt(path);
     if (fileExtension === 'js') {
         return 'javascript';
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@directus/extensions-sdk",
-  "version": "10.0.0",
+  "version": "10.1.1",
   "description": "A toolkit to develop extensions to extend Directus",
   "homepage": "https://directus.io",
   "type": "module",
@@ -25,8 +25,7 @@
   },
   "files": [
     "dist",
-    "templates",
-    "!**/*.test.{js,d.ts}"
+    "templates"
   ],
   "dependencies": {
     "@rollup/plugin-commonjs": "24.1.0",
@@ -35,7 +34,7 @@
     "@rollup/plugin-replace": "5.0.2",
     "@rollup/plugin-terser": "0.4.1",
     "@rollup/plugin-virtual": "3.0.1",
-    "@vue/compiler-sfc": "3.2.47",
+    "@vitejs/plugin-vue": "4.2.3",
     "chalk": "5.2.0",
     "commander": "10.0.1",
     "esbuild": "0.17.17",
@@ -46,19 +45,20 @@
     "rollup": "3.20.7",
     "rollup-plugin-esbuild": "5.0.0",
     "rollup-plugin-styles": "4.0.0",
-    "rollup-plugin-vue": "6.0.0",
-    "@directus/composables": "10.0.0",
-    "@directus/constants": "10.0.0",
-    "@directus/types": "10.0.0",
-    "@directus/utils": "10.0.0"
+    "vite": "4.3.1",
+    "vue": "3.3.2",
+    "@directus/composables": "10.0.2",
+    "@directus/constants": "10.1.0",
+    "@directus/types": "10.0.1",
+    "@directus/utils": "10.0.2"
   },
   "devDependencies": {
     "@directus/tsconfig": "0.0.7",
     "@types/fs-extra": "11.0.1",
     "@types/inquirer": "9.0.3",
-    "@vitest/coverage-c8": "0.30.1",
+    "@vitest/coverage-c8": "0.31.0",
     "typescript": "5.0.4",
-    "vitest": "0.30.1"
+    "vitest": "0.31.0"
   },
   "engines": {
     "node": ">=12.20.0"
@@ -68,7 +68,7 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "tsc --build",
+    "build": "tsc --project tsconfig.prod.json",
     "dev": "tsc --watch",
     "test": "vitest --watch=false"
   }