@player-ui/external-action-plugin 0.4.0 → 0.4.1-next.0

package/dist/external-action-plugin.dev.js

@@ -138,13 +138,21 @@ class ExternalActionPlugin {
           const { value: state } = toState;
           if (state.state_type === "EXTERNAL") {
             setTimeout(() => __async(this, null, function* () {
-              var _a, _b;
+              const shouldTransition = (currentState2) => {
+                var _a, _b;
+                return currentState2.status === "in-progress" && ((_b = (_a = currentState2.controllers.flow.current) == null ? void 0 : _a.currentState) == null ? void 0 : _b.value) === state;
+              };
               const currentState = player.getState();
-              if (currentState.status === "in-progress" && ((_b = (_a = currentState.controllers.flow.current) == null ? void 0 : _a.currentState) == null ? void 0 : _b.value) === state) {
+              if (shouldTransition(currentState)) {
                 try {
                   const transitionValue = yield this.handler(state, currentState.controllers);
                   if (transitionValue !== void 0) {
-                    currentState.controllers.flow.transition(transitionValue);
+                    const latestState = player.getState();
+                    if (shouldTransition(latestState)) {
+                      latestState.controllers.flow.transition(transitionValue);
+                    } else {
+                      player.logger.warn(`External state resolved with [${transitionValue}], but Player already navigated away from [${toState.name}]`);
+                    }
                   }
                 } catch (error) {
                   if (error instanceof Error) {

package/dist/external-action-plugin.prod.js

@@ -1 +1 @@
-!function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports.ExternalActionPlugin=e():t.ExternalActionPlugin=e()}(this,(function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){"use strict";n.r(e),n.d(e,"ExternalActionPlugin",(function(){return r}));class r{constructor(t){this.name="ExternalActionPlugin",this.handler=t}apply(t){t.hooks.flowController.tap(this.name,(e=>{e.hooks.flow.tap(this.name,(e=>{e.hooks.transition.tap(this.name,((e,n)=>{const{value:r}=n;"EXTERNAL"===r.state_type&&setTimeout((()=>{return e=this,n=null,o=function*(){var e,n;const o=t.getState();if("in-progress"===o.status&&(null==(n=null==(e=o.controllers.flow.current)?void 0:e.currentState)?void 0:n.value)===r)try{const t=yield this.handler(r,o.controllers);void 0!==t&&o.controllers.flow.transition(t)}catch(i){i instanceof Error&&o.fail(i)}},new Promise(((t,r)=>{var i=t=>{try{u(o.next(t))}catch(e){r(e)}},l=t=>{try{u(o.throw(t))}catch(e){r(e)}},u=e=>e.done?t(e.value):Promise.resolve(e.value).then(i,l);u((o=o.apply(e,n)).next())}));var e,n,o}),0)}))}))}))}}}])}));
+!function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports.ExternalActionPlugin=e():t.ExternalActionPlugin=e()}(this,(function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){"use strict";n.r(e),n.d(e,"ExternalActionPlugin",(function(){return r}));class r{constructor(t){this.name="ExternalActionPlugin",this.handler=t}apply(t){t.hooks.flowController.tap(this.name,(e=>{e.hooks.flow.tap(this.name,(e=>{e.hooks.transition.tap(this.name,((e,n)=>{const{value:r}=n;"EXTERNAL"===r.state_type&&setTimeout((()=>{return e=this,o=null,i=function*(){const e=t=>{var e,n;return"in-progress"===t.status&&(null==(n=null==(e=t.controllers.flow.current)?void 0:e.currentState)?void 0:n.value)===r},o=t.getState();if(e(o))try{const i=yield this.handler(r,o.controllers);if(void 0!==i){const r=t.getState();e(r)?r.controllers.flow.transition(i):t.logger.warn(`External state resolved with [${i}], but Player already navigated away from [${n.name}]`)}}catch(i){i instanceof Error&&o.fail(i)}},new Promise(((t,n)=>{var r=t=>{try{a(i.next(t))}catch(e){n(e)}},l=t=>{try{a(i.throw(t))}catch(e){n(e)}},a=e=>e.done?t(e.value):Promise.resolve(e.value).then(r,l);a((i=i.apply(e,o)).next())}));var e,o,i}),0)}))}))}))}}}])}));

package/dist/index.cjs.js

@@ -34,13 +34,21 @@ class ExternalActionPlugin {
           const { value: state } = toState;
           if (state.state_type === "EXTERNAL") {
             setTimeout(() => __async(this, null, function* () {
-              var _a, _b;
+              const shouldTransition = (currentState2) => {
+                var _a, _b;
+                return currentState2.status === "in-progress" && ((_b = (_a = currentState2.controllers.flow.current) == null ? void 0 : _a.currentState) == null ? void 0 : _b.value) === state;
+              };
               const currentState = player.getState();
-              if (currentState.status === "in-progress" && ((_b = (_a = currentState.controllers.flow.current) == null ? void 0 : _a.currentState) == null ? void 0 : _b.value) === state) {
+              if (shouldTransition(currentState)) {
                 try {
                   const transitionValue = yield this.handler(state, currentState.controllers);
                   if (transitionValue !== void 0) {
-                    currentState.controllers.flow.transition(transitionValue);
+                    const latestState = player.getState();
+                    if (shouldTransition(latestState)) {
+                      latestState.controllers.flow.transition(transitionValue);
+                    } else {
+                      player.logger.warn(`External state resolved with [${transitionValue}], but Player already navigated away from [${toState.name}]`);
+                    }
                   }
                 } catch (error) {
                   if (error instanceof Error) {

package/dist/index.esm.js

@@ -30,13 +30,21 @@ class ExternalActionPlugin {
           const { value: state } = toState;
           if (state.state_type === "EXTERNAL") {
             setTimeout(() => __async(this, null, function* () {
-              var _a, _b;
+              const shouldTransition = (currentState2) => {
+                var _a, _b;
+                return currentState2.status === "in-progress" && ((_b = (_a = currentState2.controllers.flow.current) == null ? void 0 : _a.currentState) == null ? void 0 : _b.value) === state;
+              };
               const currentState = player.getState();
-              if (currentState.status === "in-progress" && ((_b = (_a = currentState.controllers.flow.current) == null ? void 0 : _a.currentState) == null ? void 0 : _b.value) === state) {
+              if (shouldTransition(currentState)) {
                 try {
                   const transitionValue = yield this.handler(state, currentState.controllers);
                   if (transitionValue !== void 0) {
-                    currentState.controllers.flow.transition(transitionValue);
+                    const latestState = player.getState();
+                    if (shouldTransition(latestState)) {
+                      latestState.controllers.flow.transition(transitionValue);
+                    } else {
+                      player.logger.warn(`External state resolved with [${transitionValue}], but Player already navigated away from [${toState.name}]`);
+                    }
                   }
                 } catch (error) {
                   if (error instanceof Error) {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@player-ui/external-action-plugin",
-  "version": "0.4.0",
+  "version": "0.4.1-next.0",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
   "peerDependencies": {
-    "@player-ui/player": "0.4.0"
+    "@player-ui/player": "0.4.1-next.0"
   },
   "dependencies": {
     "@babel/runtime": "7.15.4"
@@ -52,6 +52,14 @@
     {
       "name": "Kelly Harrop",
       "url": "https://github.com/kharrop"
+    },
+    {
+      "name": "Alejandro Fimbres",
+      "url": "https://github.com/lexfm"
+    },
+    {
+      "name": "Rafael Campos",
+      "url": "https://github.com/rafbcampos"
     }
   ],
   "bundle": "./dist/external-action-plugin.prod.js"

package/src/index.ts

@@ -1,4 +1,9 @@
-import type { Player, PlayerPlugin, InProgressState } from '@player-ui/player';
+import type {
+  Player,
+  PlayerPlugin,
+  InProgressState,
+  PlayerFlowState,
+} from '@player-ui/player';
 import type { NavigationFlowExternalState } from '@player-ui/types';
 
 export type ExternalStateHandler = (
@@ -22,16 +27,18 @@ export class ExternalActionPlugin implements PlayerPlugin {
       flowController.hooks.flow.tap(this.name, (flow) => {
         flow.hooks.transition.tap(this.name, (fromState, toState) => {
           const { value: state } = toState;
-
           if (state.state_type === 'EXTERNAL') {
             setTimeout(async () => {
-              const currentState = player.getState();
-
-              if (
+              /** Helper for ensuring state is still current relative to external state this is handling */
+              const shouldTransition = (
+                currentState: PlayerFlowState
+              ): currentState is InProgressState =>
                 currentState.status === 'in-progress' &&
                 currentState.controllers.flow.current?.currentState?.value ===
-                  state
-              ) {
+                  state;
+
+              const currentState = player.getState();
+              if (shouldTransition(currentState)) {
                 try {
                   const transitionValue = await this.handler(
                     state,
@@ -39,7 +46,15 @@ export class ExternalActionPlugin implements PlayerPlugin {
                   );
 
                   if (transitionValue !== undefined) {
-                    currentState.controllers.flow.transition(transitionValue);
+                    // Ensure the Player is still in the same state after waiting for transitionValue
+                    const latestState = player.getState();
+                    if (shouldTransition(latestState)) {
+                      latestState.controllers.flow.transition(transitionValue);
+                    } else {
+                      player.logger.warn(
+                        `External state resolved with [${transitionValue}], but Player already navigated away from [${toState.name}]`
+                      );
+                    }
                   }
                 } catch (error) {
                   if (error instanceof Error) {