renaming function and giving it a default value

README.md

@@ -45,7 +45,7 @@ import RouteData from '@jack-henry/web-component-router/lib/route-data.js';
  *     These should match to named path segments. Each camel case name
  *     is converted to a hyphenated name to be assigned to the element.
  * @param {boolean=} requiresAuthentication (optional - defaults true)
- * @param {function():Promise<undefined>=} importFunction Optionally allows you to dynamically import the component for a given route.  The route-mixin.js will call your importFunction on routeEnter if the component does not exist in the dom.
+ * @param {function():Promise<undefined>=} beforeEnter Optionally allows you to dynamically import the component for a given route.  The route-mixin.js will call your beforeEnter on routeEnter if the component does not exist in the dom.
  */
 const routeData = new RouteData(
     'Name of this route',
@@ -121,19 +121,19 @@ const routeConfig = {
         tagName: 'APP-USER-PAGE',
         path: '/users/:userId([0-9]{1,6})',
         params: ['userId'],
-        importFunction: () => import('../app-user-page.js')
+        beforeEnter: () => import('../app-user-page.js')
     }, {
         id: 'app-user-account',
         tagName: 'APP-ACCOUNT-PAGE',
         path: '/users/:userId([0-9]{1,6})/accounts/:accountId([0-9]{1,6})',
         params: ['userId', 'accountId'],
-        importFunction: () => import('../app-account-page.js')
+        beforeEnter: () => import('../app-account-page.js')
     }, {
       id: 'app-about',
       tagName: 'APP-ABOUT',
       path: '/about',
       authenticated: false,
-      importFunction: () => import('../app-about.js')
+      beforeEnter: () => import('../app-about.js')
     }]
 };
 

lib/route-data.js

@@ -8,9 +8,9 @@ class RouteData {
    * @param {!Array<string>=} namedParameters list in camelCase. Will be
    *     converted to a map of camelCase and hyphenated.
    * @param {boolean=} requiresAuthentication
-   * @param {function():Promise<undefined>=} importFunction
+   * @param {function():Promise<undefined>=} beforeEnter
    */
-  constructor(id, tagName, path, namedParameters, requiresAuthentication, importFunction) {
+  constructor(id, tagName, path, namedParameters, requiresAuthentication, beforeEnter) {
     namedParameters = namedParameters || [];
     /** @type {!Object<string, string>} */
     const params = {};
@@ -30,7 +30,7 @@ class RouteData {
     this.element = undefined;
     this.requiresAuthentication = requiresAuthentication !== false;
 
-    this.importFunction = importFunction;
+    this.beforeEnter = beforeEnter || (() => Promise.resolve());
   }
 }
 

lib/routing-mixin.js

@@ -42,11 +42,7 @@ function routingMixin(Superclass) {
           if (nextNodeData.tagName.indexOf('-') > 0) {
             let Elem = customElements && customElements.get(nextNodeData.tagName.toLowerCase());
             if (!Elem) {
-              // if the nextNodeData has an import function, use it to load the element
-              if (nextNodeData.importFunction && typeof nextNodeData.importFunction === 'function') {
-                await nextNodeData.importFunction();
-              }
-
+              await nextNodeData.beforeEnter();
               // When code splitting, it's possible that the element created is not yet in the registry.
               // Wait until it is before creating it
               await customElements.whenDefined(nextNodeData.tagName.toLowerCase());

router.js

@@ -23,7 +23,7 @@
  *  params: (Array<string>|undefined),
  *  authenticated: (boolean|undefined),
  *  subRoutes: (Array<RouteConfig>|undefined),
- *  importFunction: (function():Promise<undefined>|undefined)
+ *  beforeEnter: (function():Promise<undefined>|undefined)
  * }} RouteConfig
  */
 let RouteConfig;
@@ -85,7 +85,7 @@ class Router {
   /** @param {!RouteConfig} routeConfig */
   buildRouteTree(routeConfig) {
     const authenticated = [true, false].includes(routeConfig.authenticated) ?  routeConfig.authenticated : true;
-    const node = new RouteTreeNode(new RouteData(routeConfig.id, routeConfig.tagName, routeConfig.path, routeConfig.params || [], authenticated, routeConfig.importFunction));
+    const node = new RouteTreeNode(new RouteData(routeConfig.id, routeConfig.tagName, routeConfig.path, routeConfig.params || [], authenticated, routeConfig.beforeEnter));
     if (routeConfig.subRoutes) {
       routeConfig.subRoutes.forEach(route => {
         node.addChild(this.buildRouteTree(route));

test/router-spec.js

@@ -111,7 +111,7 @@ describe('Router', () => {
         path: '/users/:userId([0-9]{1,6})',
         requiresAuthentication: true,
         params: ['userId'],
-        importFunction: () => Promise.resolve(),
+        beforeEnter: () => Promise.resolve(),
     }, {
         id: 'app-user-account',
         tagName: 'APP-ACCOUNT-PAGE',
@@ -136,9 +136,7 @@ describe('Router', () => {
         if (testSubRouteData[index].params) {
           expect(Object.keys(data.attributes)).toEqual(testSubRouteData[index].params);
         }
-        if (testSubRouteData[index].importFunction) {
-          expect(data.importFunction).not.toBe(undefined);
-        }
+        expect(data.beforeEnter).not.toBe(undefined);
         ['id', 'tagName', 'path', 'requiresAuthentication'].forEach((prop) => {
           expect(data[prop]).toBe(testSubRouteData[index][prop]);
         });

test/utils/test-route-config.js

@@ -7,7 +7,7 @@ const testRouteConfig = {
         tagName: 'APP-USER-PAGE',
         path: '/users/:userId([0-9]{1,6})',
         params: ['userId'],
-        importFunction: () => Promise.resolve(),
+        beforeEnter: () => Promise.resolve(),
     }, {
         id: 'app-user-account',
         tagName: 'APP-ACCOUNT-PAGE',