cozy-external-bridge 0.9.0 → 0.11.0

package/README.md

@@ -14,7 +14,7 @@ Add the `useExternalBridge` hook and it will :
 import { useExternalBridge } from 'cozy-external-bridge/container'
 
 const App = () => {
-  useExternalBridge('https://chat.twake.app')
+  const { isReady, urlToLoad } = useExternalBridge('https://chat.twake.app')
 }
 ```
 

package/dist/container/helpers.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.handleRequestParentOrigin = exports.getIframe = exports.extractUrl = void 0;
+exports.handleParentOriginRequest = exports.getIframe = exports.extractUrl = void 0;
 
 var getIframe = function getIframe() {
   var iframe = document.getElementById('embeddedApp');
@@ -28,7 +28,7 @@ var extractUrl = function extractUrl(url) {
 
 exports.extractUrl = extractUrl;
 
-var handleRequestParentOrigin = function handleRequestParentOrigin(event, origin) {
+var handleParentOriginRequest = function handleParentOriginRequest(event, origin) {
   // We do not care about message from other origin that our iframe
   if (event.origin !== origin) {
     return;
@@ -40,4 +40,4 @@ var handleRequestParentOrigin = function handleRequestParentOrigin(event, origin
   }
 };
 
-exports.handleRequestParentOrigin = handleRequestParentOrigin;
+exports.handleParentOriginRequest = handleParentOriginRequest;

package/dist/container/index.js

@@ -1,94 +1,31 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useExternalBridge = void 0;
 
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var Comlink = _interopRequireWildcard(require("comlink"));
-
-var _react = require("react");
-
-var _reactRouterDom = require("react-router-dom");
-
-var _cozyClient = require("cozy-client");
-
-var _cozyFlags = _interopRequireDefault(require("cozy-flags"));
+var _useBuildUrlToLoad2 = require("./useBuildUrlToLoad");
 
-var _cozyMinilog = _interopRequireDefault(require("cozy-minilog"));
+var _useListenBridgeRequests = require("./useListenBridgeRequests");
 
-var _constants = require("./constants");
-
-var _helpers = require("./helpers");
-
-var _hooks = require("./hooks");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var log = (0, _cozyMinilog.default)('🌉 [Container bridge]');
+var _useListenParentOriginRequest = require("./useListenParentOriginRequest");
 
 var useExternalBridge = function useExternalBridge(origin) {
-  var client = (0, _cozyClient.useClient)();
-  var navigate = (0, _reactRouterDom.useNavigate)();
-  (0, _hooks.useInitialRedirection)();
-  (0, _hooks.useParentOrigin)(origin);
-  (0, _react.useEffect)(function () {
-    if (!client) return;
-    var exposedMethods = {
-      // Proof of concepts of Twake <-> Cozy communication
-      getContacts: function () {
-        var _getContacts = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-          var _ref, data;
-
-          return _regenerator.default.wrap(function _callee$(_context) {
-            while (1) {
-              switch (_context.prev = _context.next) {
-                case 0:
-                  _context.next = 2;
-                  return client.query((0, _cozyClient.Q)('io.cozy.contacts'));
-
-                case 2:
-                  _ref = _context.sent;
-                  data = _ref.data;
-                  return _context.abrupt("return", data);
+  var _useBuildUrlToLoad = (0, _useBuildUrlToLoad2.useBuildUrlToLoad)(origin),
+      urlToLoad = _useBuildUrlToLoad.urlToLoad;
 
-                case 5:
-                case "end":
-                  return _context.stop();
-              }
-            }
-          }, _callee);
-        }));
+  var _useListenParentOrigi = (0, _useListenParentOriginRequest.useListenParentOriginRequest)(origin),
+      isParentOriginRequestListenerReady = _useListenParentOrigi.isReady;
 
-        function getContacts() {
-          return _getContacts.apply(this, arguments);
-        }
+  var _useListenBridgeReque = (0, _useListenBridgeRequests.useListenBridgeRequests)(origin),
+      isBridgeListenerReady = _useListenBridgeReque.isReady;
 
-        return getContacts;
-      }(),
-      getFlag: function getFlag(key) {
-        return (0, _cozyFlags.default)(key);
-      },
-      // Proof of concepts of Twake <-> Cozy URL synchronization
-      updateHistory: function updateHistory(newUrl) {
-        var url = (0, _helpers.extractUrl)(newUrl);
-        log.debug("Navigating to ".concat(url, " because received ").concat(newUrl, " from embedded app"));
-        navigate(_constants.BRIDGE_ROUTE_PREFIX + url, {
-          replace: true
-        });
-      }
-    };
-    Comlink.expose(exposedMethods, Comlink.windowEndpoint((0, _helpers.getIframe)().contentWindow, self, origin));
-    log.debug('Bridge initialized');
-  }, [navigate, client, origin]);
+  var isReady = isParentOriginRequestListenerReady && isBridgeListenerReady;
+  return {
+    isReady: isReady,
+    urlToLoad: urlToLoad
+  };
 };
 
 exports.useExternalBridge = useExternalBridge;

package/dist/container/useBuildUrlToLoad.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBuildUrlToLoad = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _reactRouterDom = require("react-router-dom");
+
+var _cozyMinilog = _interopRequireDefault(require("cozy-minilog"));
+
+var _constants = require("./constants");
+
+var log = (0, _cozyMinilog.default)('🌉 [Container bridge]');
+
+// When we load the container app, we want to forward
+// the relevant part of the URL to the iframe
+var useBuildUrlToLoad = function useBuildUrlToLoad(origin) {
+  var location = (0, _reactRouterDom.useLocation)();
+
+  var _useState = (0, _react.useState)(undefined),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      urlToLoad = _useState2[0],
+      setUrlToLoad = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (location.pathname.startsWith(_constants.BRIDGE_ROUTE_PREFIX)) {
+      var destUrl = new URL(origin);
+      destUrl.pathname = location.pathname.replace(_constants.BRIDGE_ROUTE_PREFIX, '');
+      destUrl.hash = location.hash;
+      destUrl.search = location.search;
+      log.debug('Setting iframe to', destUrl.toString(), 'after modification');
+      setUrlToLoad(destUrl.toString());
+    } else {
+      log.debug('Setting iframe to', origin);
+      setUrlToLoad(origin);
+    }
+  }, []);
+  return {
+    urlToLoad: urlToLoad
+  };
+};
+
+exports.useBuildUrlToLoad = useBuildUrlToLoad;

package/dist/container/{hooks.spec.ts → useBuildUrlToLoad.spec.ts}

@@ -1,8 +1,7 @@
 import { renderHook } from '@testing-library/react-hooks'
 import { useLocation } from 'react-router-dom'
 
-import { getIframe } from './helpers'
-import { useInitialRedirection } from './hooks'
+import { useBuildUrlToLoad } from './useBuildUrlToLoad'
 
 jest.mock('react-router-dom', () => ({
   useLocation: jest.fn()
@@ -13,9 +12,8 @@ jest.mock('./helpers', () => ({
 }))
 
 const mockedUseLocation = useLocation as jest.Mock
-const mockedGetIframe = getIframe as jest.Mock
 
-describe('useInitialRedirection', () => {
+describe('useBuildUrlToLoad', () => {
   afterEach(() => {
     jest.clearAllMocks()
   })
@@ -24,24 +22,26 @@ describe('useInitialRedirection', () => {
     const mockLocation = { pathname: 'assistant', hash: '', search: '' }
     mockedUseLocation.mockReturnValue(mockLocation)
 
-    const mockIframe = { src: 'https://alice-chat.mycozy.cloud' }
-    mockedGetIframe.mockReturnValue(mockIframe)
-
-    renderHook(() => useInitialRedirection())
+    const { result } = renderHook(() =>
+      useBuildUrlToLoad('https://alice-chat.mycozy.cloud')
+    )
 
-    expect(mockIframe.src).toBe('https://alice-chat.mycozy.cloud')
+    expect(result.current).toStrictEqual({
+      urlToLoad: 'https://alice-chat.mycozy.cloud'
+    })
   })
 
   it('should modify iframe.src when pathname start with bridge prefix', () => {
     const mockLocation = { pathname: '/bridge/welcome', hash: '', search: '' }
     mockedUseLocation.mockReturnValue(mockLocation)
 
-    const mockIframe = { src: 'https://alice-chat.mycozy.cloud' }
-    mockedGetIframe.mockReturnValue(mockIframe)
-
-    renderHook(() => useInitialRedirection())
+    const { result } = renderHook(() =>
+      useBuildUrlToLoad('https://alice-chat.mycozy.cloud')
+    )
 
-    expect(mockIframe.src).toBe('https://alice-chat.mycozy.cloud/welcome')
+    expect(result.current).toStrictEqual({
+      urlToLoad: 'https://alice-chat.mycozy.cloud/welcome'
+    })
   })
 
   it('should modify iframe.src when pathname start with bridge prefix and allow bridge keyword in iframe url', () => {
@@ -52,13 +52,12 @@ describe('useInitialRedirection', () => {
     }
     mockedUseLocation.mockReturnValue(mockLocation)
 
-    const mockIframe = { src: 'https://alice-chat.mycozy.cloud' }
-    mockedGetIframe.mockReturnValue(mockIframe)
-
-    renderHook(() => useInitialRedirection())
-
-    expect(mockIframe.src).toBe(
-      'https://alice-chat.mycozy.cloud/welcome/bridge'
+    const { result } = renderHook(() =>
+      useBuildUrlToLoad('https://alice-chat.mycozy.cloud')
     )
+
+    expect(result.current).toStrictEqual({
+      urlToLoad: 'https://alice-chat.mycozy.cloud/welcome/bridge'
+    })
   })
 })

package/dist/container/useListenBridgeRequests.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useListenBridgeRequests = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var Comlink = _interopRequireWildcard(require("comlink"));
+
+var _react = require("react");
+
+var _reactRouterDom = require("react-router-dom");
+
+var _cozyClient = require("cozy-client");
+
+var _cozyFlags = _interopRequireDefault(require("cozy-flags"));
+
+var _cozyMinilog = _interopRequireDefault(require("cozy-minilog"));
+
+var _constants = require("./constants");
+
+var _helpers = require("./helpers");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var log = (0, _cozyMinilog.default)('🌉 [Container bridge]');
+
+var useListenBridgeRequests = function useListenBridgeRequests(origin) {
+  var client = (0, _cozyClient.useClient)();
+  var navigate = (0, _reactRouterDom.useNavigate)();
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isReady = _useState2[0],
+      setIsReady = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (!client) return;
+    var exposedMethods = {
+      // Proof of concepts of Twake <-> Cozy communication
+      getContacts: function () {
+        var _getContacts = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+          var _ref, data;
+
+          return _regenerator.default.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return client.query((0, _cozyClient.Q)('io.cozy.contacts'));
+
+                case 2:
+                  _ref = _context.sent;
+                  data = _ref.data;
+                  return _context.abrupt("return", data);
+
+                case 5:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }));
+
+        function getContacts() {
+          return _getContacts.apply(this, arguments);
+        }
+
+        return getContacts;
+      }(),
+      getFlag: function getFlag(key) {
+        return (0, _cozyFlags.default)(key);
+      },
+      // Proof of concepts of Twake <-> Cozy URL synchronization
+      updateHistory: function updateHistory(newUrl) {
+        var url = (0, _helpers.extractUrl)(newUrl);
+        log.debug("Navigating to ".concat(url, " because received ").concat(newUrl, " from embedded app"));
+        navigate(_constants.BRIDGE_ROUTE_PREFIX + url, {
+          replace: true
+        });
+      }
+    };
+    Comlink.expose(exposedMethods, Comlink.windowEndpoint((0, _helpers.getIframe)().contentWindow, self, origin));
+    log.debug('Listening to bridge requests');
+    setIsReady(true);
+  }, [navigate, client, origin]);
+  return {
+    isReady: isReady
+  };
+};
+
+exports.useListenBridgeRequests = useListenBridgeRequests;

package/dist/container/useListenParentOriginRequest.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useListenParentOriginRequest = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _cozyClient = require("cozy-client");
+
+var _cozyMinilog = _interopRequireDefault(require("cozy-minilog"));
+
+var _helpers = require("./helpers");
+
+var log = (0, _cozyMinilog.default)('🌉 [Container bridge]');
+
+// Allow the iframe to request the origin of the parent window
+var useListenParentOriginRequest = function useListenParentOriginRequest(origin) {
+  var client = (0, _cozyClient.useClient)();
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isReady = _useState2[0],
+      setIsReady = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (!client) return;
+
+    var parentOriginRequestHandler = function parentOriginRequestHandler(event) {
+      return (0, _helpers.handleParentOriginRequest)(event, origin);
+    };
+
+    window.addEventListener('message', parentOriginRequestHandler);
+    log.debug('Listening to parent origin request');
+    setIsReady(true);
+    return function () {
+      window.removeEventListener('message', parentOriginRequestHandler);
+    };
+  }, [client, origin]);
+  return {
+    isReady: isReady
+  };
+};
+
+exports.useListenParentOriginRequest = useListenParentOriginRequest;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cozy-external-bridge",
   "description": "Library allows communication between a container app and an app embedded in an iframe",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "author": {
     "name": "Cozy Cloud",
     "url": "https://github.com/cozy"
@@ -68,5 +68,5 @@
     "lint": "cd ../.. && yarn eslint --ext js,jsx,ts packages/cozy-external-bridge"
   },
   "types": "dist/index.d.ts",
-  "gitHead": "32b4cd0c82173f5b7703066949011d74810f273e"
+  "gitHead": "3d9296d0eb4bd53f20569f9197947a7e6f04a1f4"
 }

package/dist/container/hooks.js

@@ -1,53 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useParentOrigin = exports.useInitialRedirection = void 0;
-
-var _react = require("react");
-
-var _reactRouterDom = require("react-router-dom");
-
-var _cozyClient = require("cozy-client");
-
-var _constants = require("./constants");
-
-var _helpers = require("./helpers");
-
-// Initial redirection is necessary when we load a page from a direct link
-// to load the iframe to the direct link
-var useInitialRedirection = function useInitialRedirection() {
-  var location = (0, _reactRouterDom.useLocation)();
-  (0, _react.useEffect)(function () {
-    if (location.pathname.startsWith(_constants.BRIDGE_ROUTE_PREFIX)) {
-      var iframe = (0, _helpers.getIframe)();
-      var destUrl = new URL(iframe.src);
-      destUrl.pathname = location.pathname.replace(_constants.BRIDGE_ROUTE_PREFIX, '');
-      destUrl.hash = location.hash;
-      destUrl.search = location.search;
-      iframe.src = destUrl.toString();
-    }
-  }, []);
-}; // Allow the iframe to request the origin of the parent window
-
-
-exports.useInitialRedirection = useInitialRedirection;
-
-var useParentOrigin = function useParentOrigin(origin) {
-  var client = (0, _cozyClient.useClient)();
-  (0, _react.useEffect)(function () {
-    if (!client) return;
-
-    var requestParentOriginHandler = function requestParentOriginHandler(event) {
-      return (0, _helpers.handleRequestParentOrigin)(event, origin);
-    };
-
-    window.addEventListener('message', requestParentOriginHandler);
-    return function () {
-      window.removeEventListener('message', requestParentOriginHandler);
-    };
-  }, [client, origin]);
-};
-
-exports.useParentOrigin = useParentOrigin;