Merge pull request #1028 from AmadeusITGroup/feat/dynamic-content

feat: prefetch dynamic content

.gitignore

@@ -115,4 +115,4 @@ dist
 .yarn/unplugged
 .yarn/build-state.yml
 .yarn/install-state.gz
-.pnp.*
+.pnp.*

examples/my-ngsw-app/package.json

@@ -6,7 +6,7 @@
     "start": "ng serve",
     "start:prod": "npm run build:prod && npm run server",
     "start:prod:ci": "npm run build:prod && npm run server:ci",
-    "server": "http-server -p 8080 -c-1 dist",
+    "server": "http-server -p 8080 -c-1 dist --cors",
     "server:ci": "nohup http-server -p 8080 -c-1 dist &",
     "build": "ng build",
     "build:prod": "npm run clean && ng build --configuration production && npm run generate:prefetch",

src/index.ts

@@ -97,7 +97,8 @@ export default createBuilder<PrefetchBuilderSchema>(async (options, context): Pr
   const variables = {
     resourceArray: JSON.stringify(resourceArray),
     prefetchConfig: JSON.stringify(filterOptions(options, configOptions)),
-    staticsFullPath: options.staticsFullPath
+    staticsFullPath: options.staticsFullPath,
+    localizationPattern: options.localizationPattern
   };
   const prefetchJs = Mustache.render(prefetchTemplate, variables);
 

src/schema.json

@@ -32,8 +32,13 @@
       },
       "staticsFullPath": {
         "type": "string",
-        "description": "By default the prefetched resources are hosted next to the `ngxPrefetch.js` file, on the same server. If it is not the case, you can configure the full path of the resources that will be prefetched. It is also possible to set this value by runtime. Instead of setting it in the Builder's options, you can search and replace for `{STATICS_FULL_PATH}` on the server side in order to inject a path.",
+        "description": "By default the prefetched static resources are hosted next to the `ngxPrefetch.js` file, on the same server. If it is not the case, you can configure the full path of the static resources that will be prefetched. It is also possible to set this value at runtime. Instead of setting it in the Builder's options, you can search for `{STATICS_FULL_PATH}` and replace it on the server side in order to inject a path.",
         "default": "{STATICS_FULL_PATH}"
+      },
+      "localizationPattern": {
+        "type": "string",
+        "description": "Pattern for the path of the localization file. By default, the pattern corresponds to the JSON file in a folder called localizations.",
+        "default": "/localizations/${language}.json"
       }
     },
     "additionalProperties": false,

src/schema.ts

@@ -14,6 +14,9 @@ export interface PrefetchBuilderSchema extends JsonObject {
   /** Flag for creating a production (minified) version of the js file or a development one. */
   production: boolean;
 
-  /** By default the prefetched resources are hosted next to the `ngxPrefetch.js` file, on the same server. If it is not the case, you can configure the full path of the resources that will be prefetched. It is also possible to set this value by runtime. Instead of setting it in the Builder's options, you can search and replace for `{STATICS_FULL_PATH}` on the server side in order to inject a path. */
+  /** By default the prefetched static resources are hosted next to the `ngxPrefetch.js` file, on the same server. If it is not the case, you can configure the full path of the static resources that will be prefetched. It is also possible to set this value at runtime. Instead of setting it in the Builder's options, you can search for `{STATICS_FULL_PATH}` and replace it on the server side in order to inject a path. */
   staticsFullPath: string;
+
+  /** Pattern for the path of the localization file. By default, the pattern corresponds to the JSON file in a folder called localizations. */
+  localizationPattern: string;
 }

src/templates/prefetch.mustache

@@ -23,19 +23,40 @@
   }
 
   var resList = {{{resourceArray}}};
-  var fullPath = '{{{staticsFullPath}}}';
+  var staticsFullPath = '{{{staticsFullPath}}}';
   var staticsFullPathKey = 'STATICS_FULL_PATH';
   // for testing
-  if (fullPath === `{${staticsFullPathKey}}`) { fullPath = '.'; }
+  if (staticsFullPath === `{${staticsFullPathKey}}`) { staticsFullPath = '.'; }
 
   var language = '{LANG}';
   var languageKey = 'LANG';
+  var locPattern = `{{{localizationPattern}}}`;
   if (language !== `{${languageKey}}`) {
-    resList.push(`/localizations/${language}.json`);
+    resList.push(locPattern);
+  }
+
+  var dynamicContentPath = '{DYNAMIC_CONTENT_PATH}';
+  var dynamicContentPathKey = 'DYNAMIC_CONTENT_PATH';
+
+  var dynamicContentFiles = '{DYNAMIC_CONTENT_FILES}';
+  var dynamicContentFilesKey = 'DYNAMIC_CONTENT_FILES';
+
+  var hasDynamicContent = (dynamicContentPath !== `{${dynamicContentPathKey}}`) && (dynamicContentFiles !== `{${dynamicContentFilesKey}}`);
+
+  if (hasDynamicContent) {
+    try {
+      dynamicContentFiles = JSON.parse(dynamicContentFiles);
+    } catch (e) {
+      console.error(`Could not parse dynamic content files: '${dynamicContentFiles}'`);
+    }
   }
 
   resList.forEach(function(resource) {
     if (typeof resource === 'string') {
+      var fullPath = staticsFullPath;
+      if (hasDynamicContent && dynamicContentFiles.includes(resource.slice(1))) {
+        fullPath = dynamicContentPath + '/';
+      }
       var splitRes = resource.split('.');
       var extension = splitRes[splitRes.length - 1];
       appendLink(fullPath + resource, getResType(extension));

testing/basic.spec.ts

@@ -4,7 +4,7 @@ import {lazyAndPrefetchAssetGroups, prefetchInputAssetGroup} from './mocks';
 describe('Prefetch builder', () => {
   describe('getResArray', () => {
     test('should output all urls for prefetch install mode', () => {
-      
+
       const expectedArray = [
         '/assets/icons/icon-128x128.png',
         '/assets/icons/icon-144x144.png',
@@ -26,7 +26,7 @@ describe('Prefetch builder', () => {
     });
 
     test('should output only urls for for prefetch install mode', () => {
-      
+
       const expectedArray = [
         '/favicon.ico',
         '/index.html',
@@ -53,7 +53,8 @@ describe('Prefetch builder', () => {
         },
         crossorigin: true,
         production: true,
-        staticsFullPath: '{STATICS_FULL_PATH}'
+        staticsFullPath: '{STATICS_FULL_PATH}',
+        localizationPattern: '/localizations/${language}.json'
       };
 
       const expectedBuilderConfig = {
@@ -69,4 +70,4 @@ describe('Prefetch builder', () => {
       expect(filterOptions(inputOptions, ['crossorigin', 'resourceTypes'])).toEqual(expectedBuilderConfig);
     });
   });
-});
+});