feat(ui-devkit): Allow extensions consisting of only static assets

Relates to #391, relates to #309

packages/ui-devkit/scaffold/angular.json

@@ -25,16 +25,21 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
             "assets": [
-              "src/favicon.ico",
-              "src/vendure-ui-config.json",
-              "src/theme.min.css",
-              "src/assets",
-              "src/i18n-messages",
               {
                 "glob": "**/*.*",
                 "input": "static-assets",
                 "output": "assets"
-              }
+              },
+              "src/favicon.ico",
+              {
+                "glob": "favicon.ico",
+                "input": "static-assets",
+                "output": "/"
+              },
+              "src/vendure-ui-config.json",
+              "src/theme.min.css",
+              "src/assets",
+              "src/i18n-messages"
             ],
             "styles": [
               "src/styles/styles.scss"

packages/ui-devkit/src/compiler/compile.ts

@@ -15,6 +15,8 @@ import {
     copyUiDevkit,
     getStaticAssetPath,
     isAdminUiExtension,
+    isStaticAssetExtension,
+    isTranslationExtension,
     normalizeExtensions,
     shouldUseYarn,
 } from './utils';
@@ -87,7 +89,8 @@ function runWatchMode(
             await setupScaffold(outputPath, extensions);
             const adminUiExtensions = extensions.filter(isAdminUiExtension);
             const normalizedExtensions = normalizeExtensions(adminUiExtensions);
-            const allTranslationFiles = getAllTranslationFiles(extensions);
+            const staticAssetExtensions = extensions.filter(isStaticAssetExtension);
+            const allTranslationFiles = getAllTranslationFiles(extensions.filter(isTranslationExtension));
             buildProcess = spawn(cmd, ['run', 'start', `--port=${port}`, `--base-href=${baseHref}`], {
                 cwd: outputPath,
                 shell: true,
@@ -112,9 +115,13 @@ function runWatchMode(
                 } else {
                     watcher.add(extension.extensionPath);
                 }
-                if (extension.staticAssets) {
-                    for (const staticAssetDef of extension.staticAssets) {
-                        const assetPath = getStaticAssetPath(staticAssetDef);
+            }
+            for (const extension of staticAssetExtensions) {
+                for (const staticAssetDef of extension.staticAssets) {
+                    const assetPath = getStaticAssetPath(staticAssetDef);
+                    if (!watcher) {
+                        watcher = chokidarWatch(assetPath);
+                    } else {
                         watcher.add(assetPath);
                     }
                 }

packages/ui-devkit/src/compiler/scaffold.ts

@@ -10,11 +10,14 @@ import {
     AdminUiExtensionLazyModule,
     AdminUiExtensionSharedModule,
     Extension,
+    StaticAssetExtension,
 } from './types';
 import {
     copyStaticAsset,
     copyUiDevkit,
     isAdminUiExtension,
+    isStaticAssetExtension,
+    isTranslationExtension,
     logger,
     normalizeExtensions,
     shouldUseYarn,
@@ -23,11 +26,17 @@ import {
 export async function setupScaffold(outputPath: string, extensions: Extension[]) {
     deleteExistingExtensionModules(outputPath);
     copySourceIfNotExists(outputPath);
+
     const adminUiExtensions = extensions.filter(isAdminUiExtension);
     const normalizedExtensions = normalizeExtensions(adminUiExtensions);
     await copyExtensionModules(outputPath, normalizedExtensions);
-    const allTranslationFiles = getAllTranslationFiles(extensions);
+
+    const staticAssetExtensions = extensions.filter(isStaticAssetExtension);
+    await copyStaticAssets(outputPath, staticAssetExtensions);
+
+    const allTranslationFiles = getAllTranslationFiles(extensions.filter(isTranslationExtension));
     await mergeExtensionTranslations(outputPath, allTranslationFiles);
+
     copyUiDevkit(outputPath);
     try {
         await checkIfNgccWasRun();
@@ -58,9 +67,13 @@ async function copyExtensionModules(outputPath: string, extensions: Array<Requir
     fs.writeFileSync(path.join(outputPath, SHARED_EXTENSIONS_FILE), sharedExtensionModulesSource, 'utf8');
 
     for (const extension of extensions) {
-        const dirName = path.basename(path.dirname(extension.extensionPath));
         const dest = path.join(outputPath, MODULES_OUTPUT_DIR, extension.id);
         fs.copySync(extension.extensionPath, dest);
+    }
+}
+
+async function copyStaticAssets(outputPath: string, extensions: Array<Partial<StaticAssetExtension>>) {
+    for (const extension of extensions) {
         if (Array.isArray(extension.staticAssets)) {
             for (const asset of extension.staticAssets) {
                 await copyStaticAsset(outputPath, asset);
@@ -94,7 +107,7 @@ ${extensions
         e.ngModules
             .filter(m => m.type === 'shared')
             .map(m => `import { ${m.ngModuleName} } from '${getModuleFilePath(e.id, m)}';\n`)
-			.join(''),
+            .join(''),
     )
     .join('')}
 

packages/ui-devkit/src/compiler/translations.ts

@@ -3,7 +3,7 @@ import * as fs from 'fs-extra';
 import glob from 'glob';
 import * as path from 'path';
 
-import { Extension, Translations } from './types';
+import { Extension, TranslationExtension, Translations } from './types';
 import { logger } from './utils';
 
 /**
@@ -11,7 +11,7 @@ import { logger } from './utils';
  * configured globs.
  */
 export function getAllTranslationFiles(
-    extensions: Extension[],
+    extensions: TranslationExtension[],
 ): { [languageCode in LanguageCode]?: string[] } {
     // First collect all globs by language
     const allTranslationsWithGlobs: { [languageCode in LanguageCode]?: string[] } = {};

packages/ui-devkit/src/compiler/types.ts

@@ -1,6 +1,6 @@
 import { LanguageCode } from '@vendure/common/lib/generated-types';
 
-export type Extension = AdminUiExtension | TranslationExtension;
+export type Extension = AdminUiExtension | TranslationExtension | StaticAssetExtension;
 
 /**
  * @description
@@ -29,6 +29,19 @@ export interface TranslationExtension {
     translations: { [languageCode in LanguageCode]?: string };
 }
 
+/**
+ * @description
+ * Defines extensions which copy static assets to the custom Admin UI application source asset directory.
+ */
+export interface StaticAssetExtension {
+    /**
+     * @description
+     * Optional array of paths to static assets which will be copied over to the Admin UI app's `/static`
+     * directory.
+     */
+    staticAssets: StaticAssetDefinition[];
+}
+
 /**
  * @description
  * Defines extensions to the Admin UI application by specifying additional
@@ -42,7 +55,7 @@ export interface TranslationExtension {
  * @docsPage AdminUiExtension
  * @docsWeight 0
  */
-export interface AdminUiExtension extends Partial<TranslationExtension> {
+export interface AdminUiExtension extends Partial<TranslationExtension>, Partial<StaticAssetExtension> {
     /**
      * @description
      * An optional ID for the extension module. Only used internally for generating
@@ -62,13 +75,6 @@ export interface AdminUiExtension extends Partial<TranslationExtension> {
      * One or more Angular modules which extend the default Admin UI.
      */
     ngModules: Array<AdminUiExtensionSharedModule | AdminUiExtensionLazyModule>;
-
-    /**
-     * @description
-     * Optional array of paths to static assets which will be copied over to the Admin UI app's `/static`
-     * directory.
-     */
-    staticAssets?: StaticAssetDefinition[];
 }
 
 /**
@@ -158,7 +164,7 @@ export interface UiExtensionCompilerOptions {
      * An array of objects which configure Angular modules and/or
      * translations with which to extend the Admin UI.
      */
-    extensions: Array<AdminUiExtension | TranslationExtension>;
+    extensions: Array<AdminUiExtension | TranslationExtension | StaticAssetExtension>;
     /**
      * @description
      * Set to `true` in order to compile the Admin UI in development mode (using the Angular CLI

packages/ui-devkit/src/compiler/utils.ts

@@ -6,7 +6,13 @@ import * as fs from 'fs-extra';
 import * as path from 'path';
 
 import { STATIC_ASSETS_OUTPUT_DIR } from './constants';
-import { AdminUiExtension, Extension, StaticAssetDefinition } from './types';
+import {
+    AdminUiExtension,
+    Extension,
+    StaticAssetDefinition,
+    StaticAssetExtension,
+    TranslationExtension,
+} from './types';
 
 export const logger = {
     log: (message: string) => console.log(chalk.green(message)),
@@ -87,3 +93,11 @@ export function normalizeExtensions(extensions?: AdminUiExtension[]): Array<Requ
 export function isAdminUiExtension(input: Extension): input is AdminUiExtension {
     return input.hasOwnProperty('extensionPath');
 }
+
+export function isTranslationExtension(input: Extension): input is TranslationExtension {
+    return input.hasOwnProperty('translations');
+}
+
+export function isStaticAssetExtension(input: Extension): input is StaticAssetExtension {
+    return input.hasOwnProperty('staticAssets');
+}