@smartbear/fake-ap - npm Package Compare versions

Comparing version 2.1.4 to 3.0.0

CHANGELOG.md

@@ -5,2 +5,6 @@ # Changelog
 
+## [3.0.0]
+
+- **BREAKING CHANGE:** The Dialogs and Flags components are now provided by the package and need to be rendered in a React component
+
 ## [2.1.4]
@@ -7,0 +11,0 @@

lib/components/Dialogs/index.js

@@ -10,2 +10,4 @@ "use strict";
 
+var _createPortal = _interopRequireDefault(require("../../utils/create-portal"));
+
 var _styled = require("./styled");
@@ -105,11 +107,3 @@
 
-  if (!dialog) {
-    return null;
-  }
-
-  if (!dialog.url) {
-    return null;
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_styled.DialogsContainer, null, /*#__PURE__*/_react.default.createElement("iframe", {
+  const component = dialog !== null && dialog !== void 0 && dialog.url ? /*#__PURE__*/_react.default.createElement(_styled.DialogsContainer, null, /*#__PURE__*/_react.default.createElement("iframe", {
     src: dialog.url,
@@ -119,3 +113,4 @@ style: styles.iframe,
     "data-testid": "ap-dialog"
-  }));
+  })) : null;
+  return (0, _createPortal.default)(component, 'ap_dialogs');
 };
@@ -122,0 +117,0 @@

lib/components/Flags/index.js

@@ -10,2 +10,4 @@ "use strict";
 
+var _createPortal = _interopRequireDefault(require("../../utils/create-portal"));
+
 var _icons = require("./icons");
@@ -107,3 +109,3 @@
 
-  return /*#__PURE__*/_react.default.createElement(_styled.FlagsContainer, {
+  return (0, _createPortal.default)( /*#__PURE__*/_react.default.createElement(_styled.FlagsContainer, {
     "data-testid": "ap-flags"
@@ -114,3 +116,3 @@ }, flags.map(flag => /*#__PURE__*/_react.default.createElement(Flag, _extends({
     closeFlag: () => closeFlag(flag.id)
-  }))));
+  })))), 'ap_flags');
 };
@@ -117,0 +119,0 @@

lib/config.js

@@ -19,3 +19,3 @@ "use strict";
     _defineProperty(this, "setConfig", config => {
-      var _config$clientKey, _config$sharedSecret, _config$userId, _config$context, _config$dialogUrls, _config$locale, _config$mountDialogs, _config$mountFlags, _config$initialState;
+      var _config$clientKey, _config$sharedSecret, _config$userId, _config$context, _config$dialogUrls, _config$locale, _config$initialState;
 
@@ -40,4 +40,2 @@ if (typeof config.notImplementedAction === 'function') {
       this.locale = (_config$locale = config.locale) !== null && _config$locale !== void 0 ? _config$locale : this.locale;
-      this.mountDialogs = (_config$mountDialogs = config.mountDialogs) !== null && _config$mountDialogs !== void 0 ? _config$mountDialogs : this.mountDialogs;
-      this.mountFlags = (_config$mountFlags = config.mountFlags) !== null && _config$mountFlags !== void 0 ? _config$mountFlags : this.mountFlags;
       this.initialState = (_config$initialState = config.initialState) !== null && _config$initialState !== void 0 ? _config$initialState : this.initialState;
@@ -66,4 +64,2 @@ });
       this.locale = null;
-      this.mountDialogs = true;
-      this.mountFlags = true;
       this.initialState = '';
@@ -70,0 +66,0 @@ });

lib/fake-ap.js

@@ -6,6 +6,16 @@ "use strict";
 });
+Object.defineProperty(exports, "APDialogs", {
+  enumerable: true,
+  get: function () {
+    return _Dialogs.default;
+  }
+});
+Object.defineProperty(exports, "APFlags", {
+  enumerable: true,
+  get: function () {
+    return _Flags.default;
+  }
+});
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _config = _interopRequireDefault(require("./config"));
@@ -43,4 +53,2 @@
 
-var _mountComponent = require("./utils/mount-component");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -83,10 +91,2 @@
     this.configure(options);
-
-    if (_config.default.mountDialogs) {
-      (0, _mountComponent.mountComponentWhenDocumentIsReady)( /*#__PURE__*/_react.default.createElement(_Dialogs.default, null), 'ap_dialogs');
-    }
-
-    if (_config.default.mountFlags) {
-      (0, _mountComponent.mountComponentWhenDocumentIsReady)( /*#__PURE__*/_react.default.createElement(_Flags.default, null), 'ap_flags');
-    }
   }
@@ -98,7 +98,2 @@
 
-  unmount() {
-    (0, _mountComponent.unmountComponent)('ap_dialogs');
-    (0, _mountComponent.unmountComponent)('ap_flags');
-  }
-
 }
@@ -105,0 +100,0 @@

lib/index.js

@@ -6,2 +6,14 @@ "use strict";
 });
+Object.defineProperty(exports, "APDialogs", {
+  enumerable: true,
+  get: function () {
+    return _fakeAp.APDialogs;
+  }
+});
+Object.defineProperty(exports, "APFlags", {
+  enumerable: true,
+  get: function () {
+    return _fakeAp.APFlags;
+  }
+});
 Object.defineProperty(exports, "BackendRequestAdapter", {
@@ -21,3 +33,3 @@ enumerable: true,
 
-var _fakeAp = _interopRequireDefault(require("./fake-ap"));
+var _fakeAp = _interopRequireWildcard(require("./fake-ap"));
 
@@ -30,3 +42,7 @@ var _requestAdapter = _interopRequireDefault(require("./request-adapter"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 _default = _fakeAp.default;
 exports.default = _default;

package.json

 {
   "name": "@smartbear/fake-ap",
-  "version": "2.1.4",
+  "version": "3.0.0",
   "description": "A fake AP module to help develop and test Atlassian Connect applications.",
@@ -33,3 +33,3 @@ "homepage": "https://github.com/SmartBear/fake-ap",
     "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/react": "^12.1.4",
+    "@testing-library/react": "^13.0.0",
     "babel-loader": "^8.2.4",
@@ -36,0 +36,0 @@ "babel-plugin-module-resolver": "^4.1.0",

README.md

@@ -55,2 +55,47 @@ # Fake AP
 
+### Setup the dialogs and flags React components
+
+To display modal dialogs and flags (using `AP.dialog.create` and `AP.flag.create`), Fake AP provides two React components that you should mount or render.
+These components are React portals, which means you can safely insert them anywhere in your React component tree as they will be rendered in another element outside.
+
+For instance, given the following HTML:
+
+```html
+<body>
+  <div id="root" />
+</body>
+```
+
+You can mount a React component with Fake AP like this:
+
+```javascript
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { APDialogs, APFlags } from '@smartbear/fake-ap'
+
+const root = ReactDOM.createRoot(document.getElementById('root'))
+
+root.render(
+  <div>
+    <APDialogs />
+    <APFlags />
+    <div>Some content</div>
+  </div>
+)
+```
+
+This will render the following document:
+
+```html
+<body>
+  <div id="root">
+    Some content
+  </div>
+  <div id="ap_dialogs" />
+  <div id="ap_flags" />
+</body>
+```
+
+The `ap_dialogs` and `ap_flags` element will contain the working Fake AP components.
+
 ### Use the fake AP
@@ -98,4 +143,2 @@
 | `missingConfigurationAction` | `throw new Error()` | The method called when a configuration is missing                 |
-| `mountDialogs`               | `true`              | `false` to prevent mounting the React component for dialogs       |
-| `mountFlags`                 | `true`              | `false` to prevent mounting the React component for flags         |
 
@@ -138,3 +181,3 @@ **Note:** when using `AP.configure`, all previous configuration is kept, only conflicting configuration is replaced. All new configuration is added.
 
-To use dialogs (`AP.context.create`), you need to provide the dialog keys and URLs as they are describe in the descriptor:
+To use dialogs (`AP.dialog.create`), you need to provide the dialog keys and URLs as they are describe in the descriptor:
 
@@ -299,17 +342,2 @@ ```javascript
 
-### Disabling dialogs and flags
-
-To make dialogs and flags work, Fake AP will create and mount React components in the document body. If you do not want this to happen (to keep your DOM clean during unit tests for instance), you can disable dialogs and flags:
-
-```javascript
-const AP = new FakeAP({
-  mountDialogs: false,
-  mountFlags: false
-})
-```
-
-No error will be raised, but nothing will happen since the components will not exist.
-
-**Note: this can only be configured when creating the Fake AP. `AP.configure` will have no effect here since the components are already mounted.**
-
 ## Implemented methods
@@ -316,0 +344,0 @@ - `AP.context`:

No alert changes

Improved metrics

Total package byte prevSize

77217

increased by0.41%

Number of lines in readme file

421

increased by7.12%

Worsened metrics

Lines of code

1166

decreased by-1.52%

No dependency changes