helpers/lazy-imports.js

/**
@license
Copyright (c) 2022 trading_peter
This program is available under Apache License Version 2.0
*/

/**
 * Used to import other scripts dynamically based on a route change from the-router for example.
 * Do this by defining lazyMap for the importer and then calling `import` with the new path segments.
 *
 * ## Example lazyMp
 *
 * ```js
 * [
 *    {
 *      match: /^user$/,  // Would match /user/
 *      imports: [ 'user-element-1.html', 'user-element-2.html' ],
 *      map: [
 *        {
 *          match: /^settings$/,  // Would match /user/settings
 *          imports: [ 'settings.html' ]
 *        }
 *      ]
 *     }
 * ]
 * ```
 *
 * Use the _lazyImport method to start processing the map.
 * _lazyImport needs an array of strings that describe the path segments it should
 * match the map and sub maps against.
 *
 * So, if for example your route is /user/settings you need to split
 * the path to [ 'user', 'settings' ] and feed it to the _lazyImport function.
*/
export const LazyImports = class {
  constructor(lazyMap) {
    this.lazyMap = lazyMap;
  }

  import(segments) {
    if (typeof segments === 'object' && !Array.isArray(segments)) {
      segments = Object.values(segments).filter(v => v !== undefined);
    }

    if (!this.lazyMap || !Array.isArray(segments)) return;

    const imports = [];
    this.__processLazyMap(this.lazyMap, segments, 0, imports);

    const promises = imports.map(url => {
      return import(url);
    });

    return promises.length === 1 ? promises[0] : Promise.all(promises);
  }

  __processLazyMap(map, segments, level, list) {
    const segment = segments[level];
    if (segment === undefined) return [];

    map.forEach(entry => {
      if (!entry.match.test(segment)) return;

      if (Array.isArray(entry.imports)) {
        if (entry.match.test(segment)) {
          list.push(...entry.imports);
        }
      }

      if (Array.isArray(entry.map)) {
        this.__processLazyMap(entry.map, segments, level + 1, list);
      }
    });
  }
}