Merge branch 'main' into in-browser-messages

# Conflicts:
#	src/components/Personalization/createApplyPropositions.js
#	src/components/Personalization/createComponent.js
#	src/components/Personalization/createPendingNotificationsHandler.js
#	src/components/Personalization/createViewChangeHandler.js
#	src/components/Personalization/event.js
#	src/components/Personalization/index.js
#	test/unit/specs/components/Personalization/createComponent.spec.js
#	test/unit/specs/components/Personalization/createPendingNotificationsHandler.spec.js
#	test/unit/specs/components/Personalization/createViewChangeHandler.spec.js
#	test/unit/specs/components/Personalization/topLevel/buildAlloy.js

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/alloy",
-  "version": "2.19.0-beta.0",
+  "version": "2.19.0-beta.3",
   "description": "Adobe Experience Platform Web SDK",
   "main": "libEs5/index.js",
   "module": "libEs6/index.js",
@@ -70,7 +70,7 @@
     "uuid": "^3.3.2"
   },
   "devDependencies": {
-    "@adobe/alloy": "^2.19.0-beta.0",
+    "@adobe/alloy": "^2.19.0-beta.3",
     "@babel/cli": "^7.12.8",
     "@babel/core": "^7.2.2",
     "@babel/plugin-proposal-object-rest-spread": "^7.3.2",

sandbox/public/routes.json

@@ -0,0 +1,9 @@
+{
+  "routes": [
+    {
+      "route": "/*",
+      "serve": "/index.html",
+      "statusCode": 200
+    }
+  ]
+}

src/components/Personalization/createApplyPropositions.js

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { isNonEmptyArray, isObject } from "../../utils";
+import { isNonEmptyArray, isObject, defer } from "../../utils";
 import {
   DOM_ACTION,
   HTML_CONTENT_ITEM,
@@ -79,6 +79,11 @@ export default ({
   };
 
   return ({ propositions = [], metadata = {}, viewName }) => {
+    // We need to immediately call concat so that subsequent sendEvent
+    // calls will wait for applyPropositions to complete before executing.
+    const displayNotificationsDeferred = defer();
+    pendingDisplayNotifications.concat(displayNotificationsDeferred.promise);
+
     const propositionsToExecute = preparePropositions({
       propositions,
       metadata
@@ -97,7 +102,7 @@ export default ({
           ...additionalPropositions
         ]);
 
-        pendingDisplayNotifications.concat(render());
+        render().then(displayNotificationsDeferred.resolve);
 
         return {
           propositions: returnedPropositions

src/components/Personalization/createComponent.js

@@ -10,10 +10,11 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { noop } from "../../utils";
+import { noop, flatMap } from "../../utils";
 import createPersonalizationDetails from "./createPersonalizationDetails";
 import { AUTHORING_ENABLED } from "./constants/loggerMessage";
 import validateApplyPropositionsOptions from "./validateApplyPropositionsOptions";
+import { PropositionEventType } from "../../constants/propositionEventType";
 
 export default ({
   getPageLocation,
@@ -27,7 +28,8 @@ export default ({
   showContainers,
   applyPropositions,
   setTargetMigration,
-  pendingNotificationsHandler,
+  mergeDecisionsMeta,
+  pendingDisplayNotifications,
   onDecisionHandler,
   subscribeMessageFeed
 }) => {
@@ -68,9 +70,9 @@ export default ({
           logger
         });
 
-        const handlerPromises = [];
+        const decisionsMetaPromises = [];
         if (personalizationDetails.shouldAddPendingDisplayNotifications()) {
-          handlerPromises.push(pendingNotificationsHandler({ event }));
+          decisionsMetaPromises.push(pendingDisplayNotifications.clear());
         }
 
         if (personalizationDetails.shouldFetchData()) {
@@ -87,7 +89,7 @@ export default ({
           });
         } else if (personalizationDetails.shouldUseCachedData()) {
           // eslint-disable-next-line consistent-return
-          handlerPromises.push(
+          decisionsMetaPromises.push(
             viewChangeHandler({
               personalizationDetails,
               event,
@@ -96,9 +98,19 @@ export default ({
             })
           );
         }
-        // We can wait for personalization to be applied and for
-        // the fetch data request to complete in parallel.
-        return Promise.all(handlerPromises);
+
+        // This promise.all waits for both the pending display notifications to be resolved
+        // (i.e. the top of page call to finish rendering) and the view change handler to
+        // finish rendering anything for this view.
+        return Promise.all(decisionsMetaPromises).then(decisionsMetas => {
+          // We only want to call mergeDecisionsMeta once, but we can get the propositions
+          // from two places: the pending display notifications and the view change handler.
+          mergeDecisionsMeta(
+            event,
+            flatMap(decisionsMetas, dms => dms),
+            [PropositionEventType.DISPLAY]
+          );
+        });
       },
       onClick({ event, clickedElement }) {
         onClickHandler({ event, clickedElement });

src/components/Personalization/createFetchDataHandler.js

@@ -69,15 +69,12 @@ export default ({
           [...pagePropositions, ...currentViewPropositions],
           nonRenderedPropositions
         ));
-        render()
-          .then(decisionsMeta => {
-            showContainers();
-            handleNotifications(decisionsMeta);
-          })
-          .catch(e => {
-            showContainers();
-            throw e;
-          });
+        render().then(handleNotifications);
+
+        // Render could take a long time especially if one of the renders
+        // is waiting for html to appear on the page. We show the containers
+        // immediately, and whatever renders quickly will not have flicker.
+        showContainers();
       } else {
         ({ returnedPropositions, returnedDecisions } = processPropositions(
           [],

src/components/Personalization/createViewChangeHandler.js

@@ -10,10 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { PropositionEventType } from "../../constants/propositionEventType";
-
-export default ({ mergeDecisionsMeta, processPropositions, viewCache }) => {
-  return ({ personalizationDetails, event, onResponse }) => {
+export default ({ processPropositions, viewCache }) => {
+  return ({ personalizationDetails, onResponse }) => {
     let returnedPropositions;
     let returnedDecisions;
     const viewName = personalizationDetails.getViewName();
@@ -25,28 +23,21 @@ export default ({ mergeDecisionsMeta, processPropositions, viewCache }) => {
       };
     });
 
-    return viewCache
-      .getView(viewName)
-      .then(propositions => {
-        let render;
-        if (personalizationDetails.isRenderDecisions()) {
-          ({
-            render,
-            returnedPropositions,
-            returnedDecisions
-          } = processPropositions(propositions));
-          return render();
-        }
-        ({ returnedPropositions, returnedDecisions } = processPropositions(
-          [],
-          propositions
-        ));
-        return [];
-      })
-      .then(decisionsMeta => {
-        mergeDecisionsMeta(event, decisionsMeta, [
-          PropositionEventType.DISPLAY
-        ]);
-      });
+    return viewCache.getView(viewName).then(propositions => {
+      let render;
+      if (personalizationDetails.isRenderDecisions()) {
+        ({
+          render,
+          returnedPropositions,
+          returnedDecisions
+        } = processPropositions(propositions));
+        return render();
+      }
+      ({ returnedPropositions, returnedDecisions } = processPropositions(
+        [],
+        propositions
+      ));
+      return [];
+    });
   };
 };

src/components/Personalization/event.js

@@ -19,6 +19,11 @@ export const mergeDecisionsMeta = (
   propositionEventTypes,
   propositionAction
 ) => {
+  // Do not send a display notification with no decisions. Even empty view changes
+  // should include a proposition.
+  if (decisionsMeta.length === 0) {
+    return;
+  }
   const propositionEventType = {};
 
   propositionEventTypes.forEach(type => {

src/components/Personalization/index.js

@@ -31,7 +31,6 @@ import remapHeadOffers from "./dom-actions/remapHeadOffers";
 import createPreprocess from "./dom-actions/createPreprocess";
 import injectCreateProposition from "./handlers/injectCreateProposition";
 import createAsyncArray from "./utils/createAsyncArray";
-import createPendingNotificationsHandler from "./createPendingNotificationsHandler";
 import * as schema from "./constants/schema";
 import processDefaultContent from "./handlers/processDefaultContent";
 import { isPageWideSurface } from "./utils/surfaceUtils";
@@ -91,10 +90,6 @@ const createPersonalization = ({ config, logger, eventManager }) => {
   });
 
   const pendingDisplayNotifications = createAsyncArray();
-  const pendingNotificationsHandler = createPendingNotificationsHandler({
-    pendingDisplayNotifications,
-    mergeDecisionsMeta
-  });
   const fetchDataHandler = createFetchDataHandler({
     prehidingStyle,
     showContainers,
@@ -112,7 +107,6 @@ const createPersonalization = ({ config, logger, eventManager }) => {
     getClickMetasBySelector
   });
   const viewChangeHandler = createViewChangeHandler({
-    mergeDecisionsMeta,
     processPropositions,
     viewCache
   });
@@ -149,7 +143,8 @@ const createPersonalization = ({ config, logger, eventManager }) => {
     showContainers,
     applyPropositions,
     setTargetMigration,
-    pendingNotificationsHandler,
+    mergeDecisionsMeta,
+    pendingDisplayNotifications,
     onDecisionHandler,
     subscribeMessageFeed
   });

test/unit/specs/components/Personalization/createComponent.spec.js

@@ -24,6 +24,8 @@ describe("Personalization", () => {
   let event;
   let personalizationComponent;
   let setTargetMigration;
+  let mergeDecisionsMeta;
+  let pendingDisplayNotifications;
   let subscribeMessageFeed;
   let cacheUpdate;
 
@@ -38,6 +40,8 @@ describe("Personalization", () => {
       viewCache,
       showContainers,
       setTargetMigration,
+      mergeDecisionsMeta,
+      pendingDisplayNotifications,
       subscribeMessageFeed
     });
   };
@@ -64,6 +68,11 @@ describe("Personalization", () => {
     cacheUpdate = jasmine.createSpyObj("cacheUpdate", ["update", "cancel"]);
     viewCache.createCacheUpdate.and.returnValue(cacheUpdate);
     setTargetMigration = jasmine.createSpy("setTargetMigration");
+    mergeDecisionsMeta = jasmine.createSpy("mergeDecisionsMeta");
+    pendingDisplayNotifications = jasmine.createSpyObj(
+      "pendingDisplayNotifications",
+      ["clear"]
+    );
     subscribeMessageFeed = jasmine.createSpy("subscribeMessageFeed");
 
     build();

test/unit/specs/components/Personalization/createFetchDataHandler.spec.js

@@ -13,6 +13,7 @@ governing permissions and limitations under the License.
 import createFetchDataHandler from "../../../../../src/components/Personalization/createFetchDataHandler";
 import injectCreateProposition from "../../../../../src/components/Personalization/handlers/injectCreateProposition";
 import flushPromiseChains from "../../../helpers/flushPromiseChains";
+import defer from "../../../../../src/utils/defer";
 
 describe("Personalization::createFetchDataHandler", () => {
   let prehidingStyle;
@@ -149,4 +150,42 @@ describe("Personalization::createFetchDataHandler", () => {
       viewName: "myviewname"
     });
   });
+
+  it("should show containers immediately", async () => {
+    personalizationDetails.isRenderDecisions.and.returnValue(true);
+    const renderDeferred = defer();
+    processPropositions = () => {
+      return {
+        render: () => renderDeferred.promise,
+        returnedPropositions: [
+          {
+            id: "handle2",
+            scope: "__view__",
+            items: ["item1"],
+            renderAttempted: true
+          }
+        ],
+        returnedDecisions: []
+      };
+    };
+    run();
+    response.getPayloadsByType.and.returnValue([
+      {
+        id: "handle2",
+        scope: "__view__",
+        items: ["item1"]
+      }
+    ]);
+    cacheUpdate.update.and.returnValue([]);
+    expect(showContainers).not.toHaveBeenCalled();
+    returnResponse();
+    expect(showContainers).toHaveBeenCalled();
+    expect(collect).not.toHaveBeenCalled();
+    renderDeferred.resolve([{ id: "handle2" }]);
+    await flushPromiseChains();
+    expect(collect).toHaveBeenCalledOnceWith({
+      decisionsMeta: [{ id: "handle2" }],
+      viewName: undefined
+    });
+  });
 });