cozy-external-bridge 0.8.0 → 0.10.0

package/README.md

@@ -4,7 +4,7 @@ This library allows communication between a container app and an app embedded in
 
 ## For container app
 
-Just add the `useExternalBridge` hook and it will :
+Add the `useExternalBridge` hook and it will :
 
 - allow history syncing
 - expose a `getContacts` method
@@ -18,6 +18,20 @@ const App = () => {
 }
 ```
 
+You also need to manage routing if embedded app use history syncing :
+
+```
+<HashRouter>
+  <Routes>
+    <Route element={<AppLayout />}>
+      <Route path="/" element={<OutletWrapper Component={App} />}>
+        <Route path="bridge/*" />
+      </Route>
+    </Route>
+  </Routes>
+</HashRouter>
+```
+
 ## For embedded app
 
 Import `dist/embedded/bundle.js` script. It exposes method in `window._cozyBridge`.

package/dist/container/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BRIDGE_ROUTE_PREFIX = void 0;
+var BRIDGE_ROUTE_PREFIX = '/bridge';
+exports.BRIDGE_ROUTE_PREFIX = BRIDGE_ROUTE_PREFIX;

package/dist/container/helpers.js

@@ -3,7 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.handleRequestParentOrigin = exports.extractUrl = void 0;
+exports.handleParentOriginRequest = exports.getIframe = exports.extractUrl = void 0;
+
+var getIframe = function getIframe() {
+  var iframe = document.getElementById('embeddedApp');
+
+  if (iframe === null) {
+    throw new Error('No iframe found');
+  }
+
+  return iframe;
+};
+
+exports.getIframe = getIframe;
 
 var extractUrl = function extractUrl(url) {
   if (url.startsWith('http')) {
@@ -16,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;
@@ -28,4 +40,4 @@ var handleRequestParentOrigin = function handleRequestParentOrigin(event, origin
   }
 };
 
-exports.handleRequestParentOrigin = handleRequestParentOrigin;
+exports.handleParentOriginRequest = handleParentOriginRequest;

package/dist/container/hooks.spec.ts

@@ -0,0 +1,64 @@
+import { renderHook } from '@testing-library/react-hooks'
+import { useLocation } from 'react-router-dom'
+
+import { getIframe } from './helpers'
+import { useRedirectOnLoad } from './useRedirectOnLoad'
+
+jest.mock('react-router-dom', () => ({
+  useLocation: jest.fn()
+}))
+
+jest.mock('./helpers', () => ({
+  getIframe: jest.fn()
+}))
+
+const mockedUseLocation = useLocation as jest.Mock
+const mockedGetIframe = getIframe as jest.Mock
+
+describe('useInitialRedirection', () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should not modify iframe.src when pathname does not start with bridge prefix', () => {
+    const mockLocation = { pathname: 'assistant', hash: '', search: '' }
+    mockedUseLocation.mockReturnValue(mockLocation)
+
+    const mockIframe = { src: 'https://alice-chat.mycozy.cloud' }
+    mockedGetIframe.mockReturnValue(mockIframe)
+
+    renderHook(() => useRedirectOnLoad())
+
+    expect(mockIframe.src).toBe('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(() => useRedirectOnLoad())
+
+    expect(mockIframe.src).toBe('https://alice-chat.mycozy.cloud/welcome')
+  })
+
+  it('should modify iframe.src when pathname start with bridge prefix and allow bridge keyword in iframe url', () => {
+    const mockLocation = {
+      pathname: '/bridge/welcome/bridge',
+      hash: '',
+      search: ''
+    }
+    mockedUseLocation.mockReturnValue(mockLocation)
+
+    const mockIframe = { src: 'https://alice-chat.mycozy.cloud' }
+    mockedGetIframe.mockReturnValue(mockIframe)
+
+    renderHook(() => useRedirectOnLoad())
+
+    expect(mockIframe.src).toBe(
+      'https://alice-chat.mycozy.cloud/welcome/bridge'
+    )
+  })
+})

package/dist/container/index.js

@@ -1,136 +1,29 @@
 "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 _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; }
-
-/* eslint-disable no-console */
-var getIframe = function getIframe() {
-  var iframe = document.getElementById('embeddedApp');
+var _useListenBridgeRequests = require("./useListenBridgeRequests");
 
-  if (iframe === null) {
-    throw new Error('No iframe found');
-  }
+var _useListenParentOriginRequest = require("./useListenParentOriginRequest");
 
-  return iframe;
-}; // 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 current url is root url, do nothing
-    if (location.pathname === '/' && location.hash === '' && location.search === '') {
-      return;
-    }
-
-    var iframe = getIframe();
-    var destUrl = new URL(iframe.src);
-    destUrl.pathname = location.pathname;
-    destUrl.hash = location.hash;
-    destUrl.search = location.search;
-    var currentIframeUrl = new URL(iframe.src);
-
-    if (destUrl.toString() !== currentIframeUrl.toString()) {
-      iframe.src = destUrl.toString();
-    }
-  }, []);
-}; // Allow the iframe to request the origin of the parent window
-
-
-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]);
-};
+var _useRedirectOnLoad = require("./useRedirectOnLoad");
 
 var useExternalBridge = function useExternalBridge(origin) {
-  var client = (0, _cozyClient.useClient)();
-  var navigate = (0, _reactRouterDom.useNavigate)();
-  useInitialRedirection();
-  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);
+  (0, _useRedirectOnLoad.useRedirectOnLoad)();
 
-                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);
-        console.log('🟢 Replacing route:', url);
-        navigate(url, {
-          replace: true
-        });
-      }
-    };
-    Comlink.expose(exposedMethods, Comlink.windowEndpoint(getIframe().contentWindow, self, origin));
-  }, [navigate, client, origin]);
+  var isReady = isParentOriginRequestListenerReady && isBridgeListenerReady;
+  return {
+    isReady: isReady
+  };
 };
 
 exports.useExternalBridge = useExternalBridge;

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/dist/container/useRedirectOnLoad.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRedirectOnLoad = void 0;
+
+var _react = require("react");
+
+var _reactRouterDom = require("react-router-dom");
+
+var _cozyMinilog = _interopRequireDefault(require("cozy-minilog"));
+
+var _constants = require("./constants");
+
+var _helpers = require("./helpers");
+
+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 useRedirectOnLoad = function useRedirectOnLoad() {
+  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();
+      log.debug('Redirecting iframe to', destUrl.toString());
+    }
+  }, []);
+};
+
+exports.useRedirectOnLoad = useRedirectOnLoad;

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.8.0",
+  "version": "0.10.0",
   "author": {
     "name": "Cozy Cloud",
     "url": "https://github.com/cozy"
@@ -15,6 +15,7 @@
   "peerDependencies": {
     "cozy-client": ">=54.0.0",
     "cozy-flags": ">=4.7.0",
+    "cozy-minilog": ">=3.10.0",
     "react": ">=16.12.0",
     "react-dom": ">=16.12.0",
     "react-router-dom": ">=6.14.2"
@@ -31,6 +32,7 @@
     "babel-preset-cozy-app": "^2.8.1",
     "cozy-client": "^54.0.0",
     "cozy-flags": "^4.7.0",
+    "cozy-minilog": "^3.10.0",
     "jest": "26.6.3",
     "react": "16.12.0",
     "react-dom": "16.12.0",
@@ -66,5 +68,5 @@
     "lint": "cd ../.. && yarn eslint --ext js,jsx,ts packages/cozy-external-bridge"
   },
   "types": "dist/index.d.ts",
-  "gitHead": "40a33c2ba35543add056495d9348501e24909a70"
+  "gitHead": "7f514d6c45cce3e980d239c421e370c9f8b49498"
 }