bigpipe-util 0.2.1 → 0.2.3

package/CHANGELOG.md

@@ -4,23 +4,29 @@ All notable changes to `bigpipe-util` will be documented in this file.
 
 Updates should follow the [Keep a CHANGELOG](http://keepachangelog.com/) principles.
 
-## v0.1.1 - 2022-03-27
+## v0.2.2 - 2022-08-03
 
-### Added
-- Part of BigPipe implementation for Webpack.
+### Fixed
+- calls for modules without constructor
+- dialog opening when using instant closing
 
-## v0.1.2 - 2022-04-14
+## v0.2.1 - 2022-06-02
 
 ### Added
-- Dialogs support.
+- Prevent links from being double-clicked
+- Support for keyboard (close by escape)
 
-## v0.1.3 - 2022-04-27
+### Fixed
+- Closing dialogs with [esc] in the correct order
+
+## v0.2.0 - 2022-05-17
 
 ### Added
-- Method to close only current dialog
+- Shield to prevent "JSON Hijacking"
+- Invalid node checking for AsyncDOM
 
 ### Fixed
-- Dialog z-index
+- Backdrop for 2+ opened dialogs
 
 ## v0.1.4 - 2022-05-06
 
@@ -31,20 +37,20 @@ Updates should follow the [Keep a CHANGELOG](http://keepachangelog.com/) princip
 ### Fixed
 - Arguments for non-method require calls
 
-## v0.2.0 - 2022-05-17
+## v0.1.3 - 2022-04-27
 
 ### Added
-- Shield to prevent "JSON Hijacking"
-- Invalid node checking for AsyncDOM
+- Method to close only current dialog
 
 ### Fixed
-- Backdrop for 2+ opened dialogs
+- Dialog z-index
 
-## v0.2.1 - 2022-06-02
+## v0.1.2 - 2022-04-14
 
 ### Added
-- Prevent links from being double-clicked
-- Support for keyboard (close by escape)
+- Dialogs support.
 
-### Fixed
-- Closing dialogs with [esc] in the correct order
+## v0.1.1 - 2022-03-27
+
+### Added
+- Part of BigPipe implementation for Webpack.

package/README.md

@@ -1,4 +1,4 @@
-<img src="bigpipe.svg">
+<img src="bigpipe.svg" alt="BigPipe logo">
 
 This library currently implements small part of [Facebook BigPipe][blog] so far, but the advantage is to efficiently insert/replace content and work with the DOM. It is also possible to easily call JavaScript modules from PHP.
 
@@ -8,7 +8,6 @@ Try the app with [live demo](http://bigpipe.xf.cz).
 
 ## Requirements
 * PHP 7.1 or higher
-* Node 8, 10+.
 * Webpack
 
 ## Installation
@@ -58,7 +57,7 @@ export default class ServerJS extends ServerJSImpl {
 ```javascript
 import AsyncRequest from 'bigpipe-util/src/AsyncRequest';
 
-const request = AsyncRequest('/ajax/remove.php')
+const request = (new AsyncRequest('/ajax/remove.php'))
   // or .setURI('/ajax/remove.php')
   .setMethod('POST')
   .setData({
@@ -73,6 +72,9 @@ const request = AsyncRequest('/ajax/remove.php')
   .setErrorHandler((xhr) => {
       // A function to be called if the request fails
   })
+  .setFinallyHandler((xhr) => {
+      // after request callback function
+  })
   .send();
 
 if (OH_NOES_WE_NEED_TO_CANCEL_RIGHT_NOW_OR_ELSE) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bigpipe-util",
   "description": "This library currently implements small part of Facebook BigPipe so far, but the advantage is to efficiently insert/replace content and work with the DOM. It is also possible to easily call JavaScript modules from PHP.",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "keywords": [
     "bigpipe",
     "xhr",

package/src/ServerJS.js

@@ -21,7 +21,8 @@ export default class ServerJS {
         replaceTransportMarkers(this._relativeTo, marker);
       }
 
-      const context = new (window.require(modulePath));
+      const factory = window.require(modulePath);
+      const context = typeof factory === 'function' ? new factory : factory;
 
       if (!context[method]) {
         throw new TypeError(`Module ${modulePath} has no method "${method}"`);

package/src/async/AsyncRequest.js

@@ -26,166 +26,181 @@ function validateResponseHandler(handler) {
   return valid;
 }
 
-export default function AsyncRequest(uri) {
-  this.method = "POST";
-  this.uri = "";
-  this.relative = null;
-  this.data = {};
-  this.headers = {};
-  this.initialHandler = emptyFunction;
-  this.handler = null;
-  this.errorHandler = emptyFunction;
-
-  if (uri !== undefined) {
-    this.setURI(uri);
+export default class AsyncRequest {
+  constructor(uri) {
+    this.method = "POST";
+    this.uri = "";
+    this.relative = null;
+    this.data = {};
+    this.headers = {};
+    this.initialHandler = emptyFunction;
+    this.handler = null;
+    this.finallyHandler = emptyFunction;
+    this.errorHandler = emptyFunction;
+
+    if (uri !== undefined) {
+      this.setURI(uri);
+    }
   }
-}
 
-AsyncRequest.prototype.setMethod = function (method) {
-  this.method = method.toString().toUpperCase();
-  return this;
-};
+  setMethod(method) {
+    this.method = method.toString().toUpperCase();
+    return this;
+  }
 
-AsyncRequest.prototype.getMethod = function () {
-  return this.method;
-};
+  getMethod() {
+    return this.method;
+  }
 
-AsyncRequest.prototype.setRelative = function (relative) {
-  this.relative = relative;
-  return this;
-};
+  setRelative(relative) {
+    this.relative = relative;
+    return this;
+  }
 
-AsyncRequest.prototype.getRelative = function () {
-  return this.relative;
-};
+  getRelative() {
+    return this.relative;
+  }
 
-AsyncRequest.prototype.setData = function (obj) {
-  this.data = obj;
-  return this;
-};
+  setData(obj) {
+    this.data = obj;
+    return this;
+  }
 
-AsyncRequest.prototype.getData = function () {
-  return this.data;
-};
+  getData() {
+    return this.data;
+  }
 
-AsyncRequest.prototype.setRequestHeader = function (name, value) {
-  this.headers[name] = value;
-  return this;
-};
+  setRequestHeader(name, value) {
+    this.headers[name] = value;
+    return this;
+  }
 
-AsyncRequest.prototype.setURI = function (uri) {
-  this.uri = uri;
+  setURI(uri) {
+    this.uri = uri;
 
-  return this;
-};
-AsyncRequest.prototype.getURI = function () {
-  return this.uri;
-};
+    return this;
+  }
+  getURI() {
+    return this.uri;
+  }
 
-AsyncRequest.prototype.setInitialHandler = function (fn) {
-  this.initialHandler = fn;
-  return this;
-};
+  setInitialHandler(fn) {
+    this.initialHandler = fn;
+    return this;
+  }
 
-AsyncRequest.prototype.getInitialHandler = function () {
-  return this.initialHandler || emptyFunction;
-};
+  getInitialHandler() {
+    return this.initialHandler || emptyFunction;
+  }
 
-AsyncRequest.prototype.setHandler = function (fn) {
-  if (validateResponseHandler(fn)) {
-    this.handler = fn;
+  setHandler(fn) {
+    if (validateResponseHandler(fn)) {
+      this.handler = fn;
+    }
+    return this;
   }
-  return this;
-};
 
-AsyncRequest.prototype.getHandler = function () {
-  return this.handler || emptyFunction;
-};
+  setFinallyHandler(fn) {
+    this.finallyHandler = fn;
+    return this;
+  }
 
-AsyncRequest.prototype.setErrorHandler = function (fn) {
-  if (validateResponseHandler(fn)) {
-    this.errorHandler = fn;
+  getFinallyHandler() {
+    return this.finallyHandler || emptyFunction;
   }
-  return this;
-};
 
-AsyncRequest.prototype.getErrorHandler = function () {
-  return this.errorHandler || emptyFunction;
-};
+  getHandler() {
+    return this.handler || emptyFunction;
+  }
 
-AsyncRequest.prototype.abort = function () {
-  const transport = this.transport;
+  setErrorHandler(fn) {
+    if (validateResponseHandler(fn)) {
+      this.errorHandler = fn;
+    }
+    return this;
+  }
 
-  if (transport) {
-    transport.abort();
+  getErrorHandler() {
+    return this.errorHandler || emptyFunction;
   }
-};
 
-AsyncRequest.prototype._unshieldResponseText = function (text) {
-  const shield = "for (;;);";
-  const shieldLength = shield.length;
+  abort() {
+    const transport = this.transport;
 
-  if (text.length <= shieldLength) {
-    throw new Error("Response too short on async to " + this.getURI());
+    if (transport) {
+      transport.abort();
+    }
   }
 
-  return text.substring(shieldLength);
-};
+  _unshieldResponseText(text) {
+    const shield = "for (;;);";
+    const shieldLength = shield.length;
 
-AsyncRequest.prototype.send = function () {
-  const {uri, method} = this;
-  let { data } = this;
+    if (text.length <= shieldLength) {
+      throw new Error("Response too short on async to " + this.getURI());
+    }
 
-  const handler = this.getHandler();
-  const errorHandler = this.getErrorHandler();
-  const initialHandler = this.getInitialHandler();
+    return text.substring(shieldLength);
+  }
 
-  initialHandler();
+  send() {
+    const {uri, method} = this;
+    let { data } = this;
 
-  const request = new XMLHttpRequest();
-  const self = this;
+    const handler = this.getHandler();
+    const errorHandler = this.getErrorHandler();
+    const initialHandler = this.getInitialHandler();
+    const getFinallyHandler = this.getFinallyHandler();
 
-  request.open(method, uri, true);
+    initialHandler();
 
-  request.onload = function () {
-    if (this.status >= 200 && this.status < 400) {
-      let response;
-      try {
-        const safeJson = self._unshieldResponseText(this.responseText);
-        response = eval("(" + safeJson + ")");
-      } catch (e) {
-        throw new Error("Failed to handle response: " + e.message + "\n" + this.responseText);
-      }
+    const request = new XMLHttpRequest();
+    const self = this;
 
-      (new AsyncResponse).handle(response, self.relative);
+    request.open(method, uri, true);
 
-      handler(response);
-    } else {
-      errorHandler(this);
+    request.onload = function () {
+      if (this.status >= 200 && this.status < 400) {
+        let response;
+        try {
+          const safeJson = self._unshieldResponseText(this.responseText);
+          response = eval("(" + safeJson + ")");
+        } catch (e) {
+          throw new Error("Failed to handle response: " + e.message + "\n" + this.responseText);
+        }
+
+        (new AsyncResponse).handle(response, self.relative);
+
+        handler(response);
+      } else {
+        errorHandler(this);
+      }
+
+      getFinallyHandler(this);
     }
-  };
 
-  request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+    request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
 
-  requests++;
+    requests++;
 
-  if (this.data instanceof FormData) {
-    this.data.append('__req', requests);
-  } else {
-    data.__req = requests;
-    data = serialize(data);
+    if (data instanceof FormData) {
+      data.append('__req', requests);
+    } else {
+      data.__req = requests;
+      data = serialize(data);
 
-    if (method === "POST") {
-      request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+      if (method === "POST") {
+        request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+      }
     }
-  }
 
-  Object.keys(this.headers).forEach((name) => {
-    request.setRequestHeader(name, this.headers[name]);
-  });
+    Object.keys(this.headers).forEach((name) => {
+      request.setRequestHeader(name, this.headers[name]);
+    });
 
-  request.onerror = errorHandler;
-  request.send(data);
+    request.onerror = errorHandler;
+    request.send(data);
 
-  return request;
+    return request;
+  }
 };

package/src/core/Dialog.js

@@ -3,16 +3,16 @@ import DOM from "./DOM";
 
 const DEFAULT_Z_INDEX = 1040;
 
-const stack = [];
-let modalId = 1;
+let stack = [];
+let dialogId = 1;
 let zIndex;
 let originalBodyPad = null;
 
-Modal.prototype._handleKeydownEvent = function(e) {
-  if (e.which === 27 && this._options.keyboard) {
+Modal.prototype._handleKeydownEvent = function(event) {
+  if (event.which === 27 && this._options.keyboard) {
     const currentModal = stack[stack.length - 1];
     if (currentModal.el.isEqualNode(this.el)) {
-      this.emit('dismiss', this, e, null);
+      this.emit('dismiss', this, event, null);
       this.hide();
     }
   }
@@ -34,9 +34,9 @@ export default class Dialog {
   render(options, args) {
     DOM.appendContent(document.body, this._makeDialog(options.content));
 
-    modalId++;
+    dialogId++;
 
-    const _dialog = this._show({
+    const dialog = this._show({
       el: document.getElementById(this.id),
       animate: false,
       keyboard: options.keyboard ?? true,
@@ -45,11 +45,13 @@ export default class Dialog {
       backdropTransition: options.backdropTransition ?? 0,
     }, options.controller, args);
 
-    stack.push(_dialog);
+    stack.push(dialog);
+
+    return dialog;
   }
 
   showFromModel(model, args) {
-    const _dialog = this._show({
+    const dialog = this._show({
       title: model.title || '',
       content: model.body,
       footer: model.footer || false,
@@ -60,7 +62,9 @@ export default class Dialog {
       backdropTransition: model.backdropTransition ?? 0,
     }, model.controller, args);
 
-    stack.push(_dialog);
+    stack.push(dialog);
+
+    return dialog;
   }
 
   _show(options, controller, args) {
@@ -71,7 +75,13 @@ export default class Dialog {
     const _modal = new Modal(options);
 
     if (controller) {
-      (new (window.require(controller))(_modal, ...args));
+      if (typeof controller === 'string') {
+        controller = new (window.require(controller));
+      }
+
+      if (typeof controller === 'function') {
+        controller(_modal, ...args);
+      }
     }
 
     const self = this;
@@ -81,7 +91,9 @@ export default class Dialog {
       el.style.zIndex = zIndex;
       setTimeout(() => document.querySelector('.modal-backdrop').style.zIndex = zIndex - 1);
     }).on('showBackdrop', this._fixBackdrop).on('hidden', function ({el}) {
-      stack.pop();
+      stack = stack.filter((modal) => {
+        return ! modal.el.isEqualNode(el);
+      });
 
       if (stack.length) {
         document.body.classList.add('modal-open');
@@ -111,7 +123,7 @@ export default class Dialog {
   }
 
   _makeDialog(content) {
-    this.id = `js_${modalId.toString(16)}`;
+    this.id = `js_${dialogId.toString(16)}`;
     return `<div id="${this.id}" class="modal fade" tabindex="-1" role="dialog">
   ${content}
 </div>`;