feat(ui-devkit): Update solution not to require extension id

vendure-ecommerce · Jan 19, 2023 · d266c61 · d266c61
1 parent 2c86f20
commit d266c61
Show file tree

Hide file tree

Showing 3 changed files with 130 additions and 161 deletions.
diff --git a/packages/ui-devkit/src/compiler/scaffold.ts b/packages/ui-devkit/src/compiler/scaffold.ts
@@ -11,9 +11,9 @@ import {
 } from './constants';
 import { getAllTranslationFiles, mergeExtensionTranslations } from './translations';
 import {
-    AdminUiExtension,
     AdminUiExtensionLazyModule,
     AdminUiExtensionSharedModule,
+    AdminUiExtensionWithId,
     Extension,
     GlobalStylesExtension,
     SassVariableOverridesExtension,
@@ -24,7 +24,6 @@ import {
     copyUiDevkit,
     isAdminUiExtension,
     isGlobalStylesExtension,
-    isModulePathMappingExtension,
     isSassVariableOverridesExtension,
     isStaticAssetExtension,
     isTranslationExtension,
@@ -36,11 +35,12 @@ import {
 export async function setupScaffold(outputPath: string, extensions: Extension[]) {
     deleteExistingExtensionModules(outputPath);
 
-    const modulePathMappingExtension = extensions.find(isModulePathMappingExtension);
-    copyAdminUiSource(outputPath, modulePathMappingExtension?.modulePathMapping);
-
     const adminUiExtensions = extensions.filter(isAdminUiExtension);
     const normalizedExtensions = normalizeExtensions(adminUiExtensions);
+
+    const modulePathMapping = generateModulePathMapping(normalizedExtensions);
+    copyAdminUiSource(outputPath, modulePathMapping);
+
     await copyExtensionModules(outputPath, normalizedExtensions);
 
     const staticAssetExtensions = extensions.filter(isStaticAssetExtension);
@@ -72,11 +72,30 @@ function deleteExistingExtensionModules(outputPath: string) {
     fs.removeSync(path.join(outputPath, MODULES_OUTPUT_DIR));
 }
 
+/**
+ * Generates a module path mapping object for all extensions with a "pathAlias"
+ * property declared (if any).
+ */
+function generateModulePathMapping(extensions: Array<AdminUiExtensionWithId>) {
+    const extensionsWithAlias = extensions.filter(e => e.pathAlias);
+    if (extensionsWithAlias.length === 0) {
+        return undefined;
+    }
+
+    return extensionsWithAlias.reduce((acc, e) => {
+        // for imports from the index file if there is one
+        acc[e.pathAlias as string] = [`src/extensions/${e.id}`];
+        // direct access to files / deep imports
+        acc[`${e.pathAlias as string}/*`] = [`src/extensions/${e.id}/*`];
+        return acc;
+    }, {} as Record<string, string[]>);
+}
+
 /**
  * Copies all files from the extensionPaths of the configured extensions into the
  * admin-ui source tree.
  */
-async function copyExtensionModules(outputPath: string, extensions: Array<Required<AdminUiExtension>>) {
+async function copyExtensionModules(outputPath: string, extensions: Array<AdminUiExtensionWithId>) {
     const extensionRoutesSource = generateLazyExtensionRoutes(extensions);
     fs.writeFileSync(path.join(outputPath, EXTENSION_ROUTES_FILE), extensionRoutesSource, 'utf8');
     const sharedExtensionModulesSource = generateSharedExtensionModule(extensions);
@@ -144,9 +163,9 @@ export async function copyGlobalStyleFile(outputPath: string, stylePath: string)
     await fs.copyFile(stylePath, styleOutputPath);
 }
 
-function generateLazyExtensionRoutes(extensions: Array<Required<AdminUiExtension>>): string {
+function generateLazyExtensionRoutes(extensions: Array<AdminUiExtensionWithId>): string {
     const routes: string[] = [];
-    for (const extension of extensions as Array<Required<AdminUiExtension>>) {
+    for (const extension of extensions as Array<AdminUiExtensionWithId>) {
         for (const module of extension.ngModules) {
             if (module.type === 'lazy') {
                 routes.push(`  {
@@ -161,7 +180,7 @@ function generateLazyExtensionRoutes(extensions: Array<Required<AdminUiExtension
     return `export const extensionRoutes = [${routes.join(',\n')}];\n`;
 }
 
-function generateSharedExtensionModule(extensions: Array<Required<AdminUiExtension>>) {
+function generateSharedExtensionModule(extensions: Array<AdminUiExtensionWithId>) {
     return `import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 ${extensions
@@ -198,11 +217,11 @@ function getModuleFilePath(
  * Copies the Admin UI sources & static assets to the outputPath if it does not already
  * exist there.
  */
-function copyAdminUiSource(outputPath: string, modulePathMapping: Record<string, string> | undefined) {
+function copyAdminUiSource(outputPath: string, modulePathMapping: Record<string, string[]> | undefined) {
     const tsconfigFilePath = path.join(outputPath, 'tsconfig.json');
     const indexFilePath = path.join(outputPath, '/src/index.html');
     if (fs.existsSync(tsconfigFilePath) && fs.existsSync(indexFilePath)) {
-        addModulePathMappingIfDefined(tsconfigFilePath, modulePathMapping);
+        configureModulePathMapping(tsconfigFilePath, modulePathMapping);
         return;
     }
 
@@ -220,7 +239,7 @@ function copyAdminUiSource(outputPath: string, modulePathMapping: Record<string,
     fs.removeSync(outputPath);
     fs.ensureDirSync(outputPath);
     fs.copySync(scaffoldDir, outputPath);
-    addModulePathMappingIfDefined(tsconfigFilePath, modulePathMapping);
+    configureModulePathMapping(tsconfigFilePath, modulePathMapping);
 
     // copy source files from admin-ui package
     const outputSrc = path.join(outputPath, 'src');
@@ -231,20 +250,16 @@ function copyAdminUiSource(outputPath: string, modulePathMapping: Record<string,
 /**
  * Adds module path mapping to the bundled tsconfig.json file if defined as a UI extension.
  */
-function addModulePathMappingIfDefined(
+function configureModulePathMapping(
     tsconfigFilePath: string,
-    modulePathMapping: Record<string, string> | undefined,
+    modulePathMapping: Record<string, string[]> | undefined,
 ) {
     if (!modulePathMapping) {
         return;
     }
 
     const tsconfig = require(tsconfigFilePath);
-    const tsPaths = Object.entries(modulePathMapping).reduce((acc, [key, value]) => {
-        acc[key] = [`src/extensions/${value}`];
-        return acc;
-    }, {} as Record<string, string[]>);
-    tsconfig.compilerOptions.paths = tsPaths;
+    tsconfig.compilerOptions.paths = modulePathMapping;
     fs.writeFileSync(tsconfigFilePath, JSON.stringify(tsconfig, null, 2));
 }