cozy-external-bridge 0.8.0 → 0.9.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.handleRequestParentOrigin = 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')) {

package/dist/container/hooks.js

@@ -0,0 +1,53 @@
+"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;

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 { useInitialRedirection } from './hooks'
+
+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(() => useInitialRedirection())
+
+    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(() => useInitialRedirection())
+
+    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(() => useInitialRedirection())
+
+    expect(mockIframe.src).toBe(
+      'https://alice-chat.mycozy.cloud/welcome/bridge'
+    )
+  })
+})

package/dist/container/index.js

@@ -21,68 +21,25 @@ 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 _cozyMinilog = _interopRequireDefault(require("cozy-minilog"));
 
-  if (iframe === null) {
-    throw new Error('No iframe found');
-  }
+var _constants = require("./constants");
 
-  return iframe;
-}; // Initial redirection is necessary when we load a page from a direct link
-// to load the iframe to the direct link
+var _helpers = require("./helpers");
 
+var _hooks = require("./hooks");
 
-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;
+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); }
 
-    var requestParentOriginHandler = function requestParentOriginHandler(event) {
-      return (0, _helpers.handleRequestParentOrigin)(event, origin);
-    };
+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; }
 
-    window.addEventListener('message', requestParentOriginHandler);
-    return function () {
-      window.removeEventListener('message', requestParentOriginHandler);
-    };
-  }, [client, origin]);
-};
+var log = (0, _cozyMinilog.default)('🌉 [Container bridge]');
 
 var useExternalBridge = function useExternalBridge(origin) {
   var client = (0, _cozyClient.useClient)();
   var navigate = (0, _reactRouterDom.useNavigate)();
-  useInitialRedirection();
-  useParentOrigin(origin);
+  (0, _hooks.useInitialRedirection)();
+  (0, _hooks.useParentOrigin)(origin);
   (0, _react.useEffect)(function () {
     if (!client) return;
     var exposedMethods = {
@@ -123,13 +80,14 @@ var useExternalBridge = function useExternalBridge(origin) {
       // 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, {
+        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(getIframe().contentWindow, self, origin));
+    Comlink.expose(exposedMethods, Comlink.windowEndpoint((0, _helpers.getIframe)().contentWindow, self, origin));
+    log.debug('Bridge initialized');
   }, [navigate, client, origin]);
 };
 

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.9.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": "32b4cd0c82173f5b7703066949011d74810f273e"
 }