Add ability to import individual SKY UX modules

lib/sky-pages-module-generator.js

@@ -94,12 +94,14 @@ function getSource(skyAppConfig) {
     'SkyAppRuntimeModule'
   ];
 
+  let skyuxModules = skyAppConfig.skyux.skyuxModules || [];
+
   let runtimeModuleImports = [
     'CommonModule',
     'HttpModule',
     'FormsModule',
     'ReactiveFormsModule',
-    'SkyModule',
+    ...skyuxModules,
     'AppExtrasModule',
     'SkyAppRuntimeModule'
   ];
@@ -157,7 +159,9 @@ BBAuth.mock = true;
 ${nodeModuleImports.join('\n')}
 
 import '${skyAppConfig.runtime.skyPagesOutAlias}/src/main';
-import { SkyModule } from '${skyAppConfig.runtime.skyuxPathAlias}/core';
+import {
+  ${skyuxModules.join(',\n' + codegen.indent(1))}
+} from '${skyAppConfig.runtime.skyuxPathAlias}/core';
 import {
   AppExtrasModule
 } from '${skyAppConfig.runtime.skyPagesOutAlias}/src/app/app-extras.module';

runtime/config.ts

@@ -76,6 +76,7 @@ export interface SkyuxConfig {
   };
   omnibar?: any;
   useHashRouting?: boolean;
+  skyuxModules?: string[];
 }
 
 @Injectable()

skyuxconfig-schema.json

@@ -218,6 +218,10 @@
     "useHashRouting": {
       "description": "Allows your SPA to use Angular's hash location strategy.",
       "type": "boolean"
+    },
+    "skyuxModules": {
+      "description": "The individual SKY UX modules that should be imported into the application.  Use this property for performance optimization when your application only uses a small subset of SKY UX components.",
+      "type": "array"
     }
   }
 }

skyuxconfig.json

@@ -10,5 +10,8 @@
   "params": {
     "envid": true,
     "svcid": true
-  }
+  },
+  "skyuxModules": [
+    "SkyModule"
+  ]
 }

test/sky-pages-module-generator.spec.js

@@ -21,7 +21,7 @@ describe('SKY UX Builder module generator', () => {
   it('should return a source string', () => {
     const source = generator.getSource({
       runtime: runtimeUtils.getDefaultRuntime(),
-      skyux: {}
+      skyux: runtimeUtils.getDefaultSkyux()
     });
     expect(source).toBeDefined();
   });
@@ -31,7 +31,7 @@ describe('SKY UX Builder module generator', () => {
 
     let source = generator.getSource({
       runtime: runtimeUtils.getDefaultRuntime(),
-      skyux: {}
+      skyux: runtimeUtils.getDefaultSkyux()
     });
 
     expect(source).toContain(expectedImport);
@@ -42,7 +42,7 @@ describe('SKY UX Builder module generator', () => {
 
     let source = generator.getSource({
       runtime: runtimeUtils.getDefaultRuntime(),
-      skyux: {}
+      skyux: runtimeUtils.getDefaultSkyux()
     });
 
     let moduleExports = getModuleList('exports', source);
@@ -55,7 +55,7 @@ describe('SKY UX Builder module generator', () => {
 
     let source = generator.getSource({
       runtime: runtimeUtils.getDefaultRuntime(),
-      skyux: {}
+      skyux: runtimeUtils.getDefaultSkyux()
     });
 
     let moduleImports = getModuleList('imports', source);
@@ -66,7 +66,7 @@ describe('SKY UX Builder module generator', () => {
   it('should add the NotFoundComponent if it does not exist', () => {
     const source = generator.getSource({
       runtime: runtimeUtils.getDefaultRuntime(),
-      skyux: {}
+      skyux: runtimeUtils.getDefaultSkyux()
     });
     expect(source).toContain("template: '<sky-error errorType=\"notfound\"></sky-error>'");
   });
@@ -81,7 +81,7 @@ describe('SKY UX Builder module generator', () => {
           }
         ]
       }),
-      skyux: {}
+      skyux: runtimeUtils.getDefaultSkyux()
     });
     expect(source).toContain('NotFoundComponent');
     expect(source).not.toContain("template: '<sky-error errorType=\"notfound\"></sky-error>'");
@@ -92,7 +92,7 @@ describe('SKY UX Builder module generator', () => {
       runtime: runtimeUtils.getDefaultRuntime({
         skyPagesOutAlias: '..'
       }),
-      skyux: {}
+      skyux: runtimeUtils.getDefaultSkyux()
     });
 
     expect(source).toContain(
@@ -107,11 +107,34 @@ describe('SKY UX Builder module generator', () => {
       runtime: runtimeUtils.getDefaultRuntime({
         skyuxPathAlias: 'custom'
       }),
-      skyux: {}
+      skyux: runtimeUtils.getDefaultSkyux()
     });
 
     expect(source).toContain(
-      `import { SkyModule } from 'custom/core';`
+      `import {
+  SkyModule
+} from 'custom/core';`
+    );
+  });
+
+  it('should import individual SKY UX modules from config', () => {
+    const source = generator.getSource({
+      runtime: runtimeUtils.getDefaultRuntime(),
+      skyux: runtimeUtils.getDefaultSkyux({
+        skyuxModules: [
+          'SkyAlertModule',
+          'SkyErrorModule',
+          'SkyModalModule'
+        ]
+      })
+    });
+
+    expect(source).toContain(
+      `import {
+  SkyAlertModule,
+  SkyErrorModule,
+  SkyModalModule
+} from '@blackbaud/skyux/dist/core';`
     );
   });
 
@@ -128,17 +151,17 @@ describe('SKY UX Builder module generator', () => {
 
     let source = generator.getSource({
       runtime: runtimeUtils.getDefaultRuntime(),
-      skyux: {}
+      skyux: runtimeUtils.getDefaultSkyux()
     });
 
     expect(source).not.toContain(expectedImport);
     expect(source).not.toContain(expectedProvider);
 
     source = generator.getSource({
       runtime: runtimeUtils.getDefaultRuntime(),
-      skyux: {
+      skyux: runtimeUtils.getDefaultSkyux({
         auth: true
-      }
+      })
     });
 
     expect(source).toContain(expectedImport);
@@ -151,7 +174,7 @@ describe('SKY UX Builder module generator', () => {
 
     let source = generator.getSource({
       runtime: runtimeUtils.getDefaultRuntime(),
-      skyux: {}
+      skyux: runtimeUtils.getDefaultSkyux()
     });
 
     let moduleImports = getModuleList('imports', source);
@@ -168,9 +191,9 @@ describe('SKY UX Builder module generator', () => {
 
     let source = generator.getSource({
       runtime: runtimeUtils.getDefaultRuntime(),
-      skyux: {
+      skyux: runtimeUtils.getDefaultSkyux({
         help: {}
-      }
+      })
     });
 
     let moduleImports = getModuleList('imports', source);
@@ -186,7 +209,7 @@ describe('SKY UX Builder module generator', () => {
     const expectedImport = `routing`;
     let sourceWithRouting = generator.getSource({
       runtime: runtimeUtils.getDefaultRuntime(),
-      skyux: {}
+      skyux: runtimeUtils.getDefaultSkyux()
     });
 
     let moduleImports = getModuleList('imports', sourceWithRouting);
@@ -198,7 +221,7 @@ describe('SKY UX Builder module generator', () => {
         runtime: runtimeUtils.getDefaultRuntime({
           includeRouteModule: false
         }),
-        skyux: {}
+        skyux: runtimeUtils.getDefaultSkyux()
       });
 
     moduleImports = getModuleList('imports', sourceWithoutRouting);
@@ -211,7 +234,7 @@ describe('SKY UX Builder module generator', () => {
       runtime: runtimeUtils.getDefaultRuntime({
         command: 'build'
       }),
-      skyux: {}
+      skyux: runtimeUtils.getDefaultSkyux()
     });
 
     expect(source).toContain(
@@ -224,7 +247,7 @@ enableProdMode();`);
       runtime: runtimeUtils.getDefaultRuntime({
         command: 'e2e'
       }),
-      skyux: {}
+      skyux: runtimeUtils.getDefaultSkyux()
     });
 
     expect(source).toContain(
@@ -243,7 +266,7 @@ BBAuth.mock = true;`);
           ]
         }]
       }),
-      skyux: {}
+      skyux: runtimeUtils.getDefaultSkyux()
     };
 
     const routeGeneratorGetRoutes = routeGenerator.getRoutes;
@@ -268,7 +291,7 @@ BBAuth.mock = true;`);
           ]
         }]
       }),
-      skyux: {}
+      skyux: runtimeUtils.getDefaultSkyux()
     };
 
     spyOn(skyPagesConfigUtil, 'spaPath').and.callFake((path1, path2) => {
@@ -308,7 +331,7 @@ BBAuth.mock = true;`);
   it('should use Hash routing if specified in the skyuxconfig', () => {
     const source = generator.getSource({
       runtime: runtimeUtils.getDefaultRuntime(),
-      skyux: { useHashRouting: true }
+      skyux: runtimeUtils.getDefaultSkyux({ useHashRouting: true })
     });
 
     expect(source).toContain('routing = RouterModule.forRoot(routes, { useHash: true });');
@@ -317,7 +340,7 @@ BBAuth.mock = true;`);
   it('should not use Hash routing if option is not specified in the skyuxconfig', () => {
     const source = generator.getSource({
       runtime: runtimeUtils.getDefaultRuntime(),
-      skyux: {}
+      skyux: runtimeUtils.getDefaultSkyux()
     });
 
     expect(source).toContain('routing = RouterModule.forRoot(routes, { useHash: false });');
@@ -330,9 +353,7 @@ BBAuth.mock = true;`);
 
     let source = generator.getSource({
       runtime: runtime,
-      skyux: {
-
-      }
+      skyux: runtimeUtils.getDefaultSkyux()
     });
 
     expect(source).toContain(`provide: SkyPactService`);

utils/runtime-test-utils.js

@@ -42,6 +42,9 @@ module.exports = {
       params: [
         'envid',
         'svcid'
+      ],
+      skyuxModules: [
+        'SkyModule'
       ]
     }, skyux);
   }