bigpipe-util 0.2.8 → 0.2.11

package/CHANGELOG.md

@@ -4,6 +4,19 @@ All notable changes to `bigpipe-util` will be documented in this file.
 
 Updates should follow the [Keep a CHANGELOG](http://keepachangelog.com/) principles.
 
+## v0.2.11 - 2025-12-27
+- Added `incrementRequests` method to AsyncRequest.js
+- Added submitter to form data in onSubmit handler
+
+### Added
+- Added `timeout` to open dialog with a delay in method `showFromModel`
+
+## v0.2.10 - 2025-05-15
+- Added `onAfterLoad.js`, `waitForLoad.js`
+
+### Added
+- Added `timeout` to open dialog with a delay in method `showFromModel`
+
 ## v0.2.8 - 2025-05-02
 
 ### Added

package/README.md

@@ -3,30 +3,30 @@
 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.
 
 
-## Demo App
+## 👀 Demo App
 Try the app with [live demo](http://bigpipe.xf.cz).
 
-## Full documentation
+## 📕 Full documentation
 https://richarddobron.github.io/bigpipe-php/
 
-## Requirements
+## ℹ️ Requirements
 * PHP 7.1 or higher
 * Webpack
 
-## Installation
+## 📦 Installation
+Follow these steps to install and set up:
 
-These steps are required:
-1. Install composer package:
+### 1. Install composer package:
 ```shell
 $ composer require richarddobron/bigpipe
 ```
 
-2. Install npm package:
+### 2. Install npm package:
 ```shell
 $ npm install bigpipe-util
 ```
 
-3. Add this lines to /path/to/resources/js/app.js:
+### 3. Add the following to /path/to/resources/js/app.js:
 ```javascript
 import Primer from 'bigpipe-util/src/Primer';
 
@@ -39,23 +39,14 @@ window.require = (modulePath) => {
 };
 ```
 
-4. Create file /path/to/resources/js/ServerJS.js
-   - this step is optional, but if you skip it, use this in next step:
-   ```require("bigpipe-util/ServerJS")```
-```javascript
-import ServerJSImpl from 'bigpipe-util/src/ServerJS';
-export default class ServerJS extends ServerJSImpl {
-}
-```
-
-5. Add this lines to page footer:
+### 4. Add these lines to the page footer:
 ```html
 <script>
-    (new (require("ServerJS"))).handle(<?=json_encode(\dobron\BigPipe\BigPipe::jsmods())?>);
+    (new (require("bigpipe-util/src/ServerJS"))).handle(<?=json_encode(\dobron\BigPipe\BigPipe::jsmods())?>);
 </script>
 ```
 
-## Request API
+## 🛜 Request API
 
 ```javascript
 import AsyncRequest from 'bigpipe-util/src/AsyncRequest';
@@ -85,16 +76,16 @@ if (OH_NOES_WE_NEED_TO_CANCEL_RIGHT_NOW_OR_ELSE) {
 }
 ```
 
-# What all can be Ajaxifed?
+# ⚡️ What all can be Ajaxifed?
 
-## Links
+## 🔗 Links
 ```html
 <a href="#"
    ajaxify="/ajax/remove.php"
    rel="async">Remove Item</a>
 ```
 
-## Forms
+## 📝 Forms
 ```html
 <form action="/submit.php"
       method="POST"
@@ -104,31 +95,30 @@ if (OH_NOES_WE_NEED_TO_CANCEL_RIGHT_NOW_OR_ELSE) {
 </form>
 ```
 
-## Dialogs
+## 💬 Dialogs
 ```html
 <a href="#"
    ajaxify="/ajax/modal.php"
    rel="dialog">Open Modal</a>
 ```
 
-## Inspiration
+## 🌟 Inspiration
 
-BigPipe is inspired by the concept behind Facebook's BigPipe. For more details
+BigPipe is inspired by Facebook's BigPipe. For more details
 read their blog post: [Pipelining web pages for high performance][blog].
 
-## Motivation
+## 💡 Motivation
 
 There is a large number of PHP projects for which moving to modern frameworks like Laravel Livewire, React, Vue.js (and many more!) could be very challenging.
 
 The purpose of this library is to rapidly reduce the continuously repetitive code to work with the DOM and improve the communication barrier between PHP and JavaScript.
 
-## Credits
+## 🤝 Contributing
 
-- [Richard Dobroň][link-author]
+We welcome contributions! If you'd like to help improve this project, feel free to open an issue or submit a pull request.
 
-## License
+## 📜 License
 
-The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
+The MIT License (MIT). Please see [License File](LICENSE) for more information.
 
-[link-author]: https://github.com/richardDobron
 [blog]: https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919

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.8",
+  "version": "0.2.11",
   "keywords": [
     "bigpipe",
     "xhr",

package/src/Primer.js

@@ -83,13 +83,18 @@ export default function Primer() {
       eventTarget.getAttribute("rel") === "async") {
       event.preventDefault();
 
+      const formData = new FormData(eventTarget);
       const submitter = event.submitter || eventTarget.querySelector("button[type='submit']");
       const activeControls = eventTarget.querySelectorAll("input:not([readonly]),select:not([readonly]),textarea:not([readonly])");
 
+      if (submitter.name) {
+        formData.append(submitter.name, submitter.value);
+      }
+
       (new AsyncRequest(eventTarget.getAttribute("ajaxify") || eventTarget.getAttribute("action")))
         .setMethod(eventTarget.method || "POST")
         .setRelative(eventTarget)
-        .setData(new FormData(eventTarget))
+        .setData(formData)
         .setInitialHandler(function () {
           eventTarget.classList.add("async-saving");
 
@@ -111,7 +116,7 @@ export default function Primer() {
             }
           }
         })
-        .setHandler(function (response) {
+        .setHandler(function () {
           eventTarget.classList.remove("async-saving");
 
           activeControls.forEach(function (control) {

package/src/async/AsyncDOM.js

@@ -3,11 +3,7 @@ import DOM from "../core/DOM";
 export default class AsyncDOM {
   invoke(domOps, element) {
     for (let i = 0; i < domOps.length; ++i) {
-      let domOp = domOps[i],
-        type = domOp[0],
-        selector = domOp[1],
-        enableTarget = domOp[2],
-        content = domOp[3];
+      let [type, selector, enableTarget, content] = domOps[i];
 
       let node = enableTarget && element || null;
 
@@ -15,7 +11,7 @@ export default class AsyncDOM {
         node = (node || document.documentElement).querySelector(selector);
       }
 
-      if (!node) {
+      if (__DEV__ && !node) {
         console.error(`Selector '${selector}' does not match anything!`)
         continue;
       }

package/src/async/AsyncRequest.js

@@ -3,6 +3,10 @@ import AsyncResponse from "./AsyncResponse";
 
 let requests = 0;
 
+export function incrementRequests() {
+  return requests++;
+}
+
 function serialize(obj, prefix) {
   const str = [];
   for(const p in obj) {
@@ -181,7 +185,7 @@ export default class AsyncRequest {
 
     request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
 
-    requests++;
+    incrementRequests();
 
     if (data instanceof FormData) {
       data.append('__req', requests);

package/src/core/Dialog.js

@@ -42,47 +42,40 @@ export default class Dialog {
 
     dialogId++;
 
-    const renderDialog = () => {
-      const dialog = this._show({
-        el: document.getElementById(this.id),
-        animate: options.animate !== null && options.animate !== undefined ? options.animate : false,
-        keyboard: options.keyboard !== null && options.keyboard !== undefined ? options.keyboard : true,
-        backdrop: options.backdrop !== null && options.backdrop !== undefined ? options.backdrop : true,
-        transition: options.transition !== null && options.transition !== undefined ? options.transition : 0,
-        backdropTransition: options.backdropTransition !== null && options.backdropTransition !== undefined ? options.backdropTransition : 0,
-      }, options.controller, args);
-
-      return stack.push(dialog);
-    };
-
-    if (options.timeout && typeof options.timeout === 'number') {
-      return new Promise(resolve => setTimeout(() => resolve(renderDialog()), options.timeout));
-    }
-
-    return renderDialog();
+    return this._maybeWithTimeout(options.timeout, () => this._show({
+      el: document.getElementById(this.id),
+      animate: this._getOption(options, 'animate', false),
+      keyboard: this._getOption(options, 'keyboard', true),
+      backdrop: this._getOption(options, 'backdrop', true),
+      transition: this._getOption(options, 'transition', 0),
+      backdropTransition: this._getOption(options, 'backdropTransition', 0)
+    }, options.controller, args));
   }
 
   showFromModel(model, args) {
-    const renderDialog = () => {
-      const dialog = this._show({
-        title: model.title || '',
-        content: model.body,
-        footer: model.footer || false,
-        animate: model.animate !== null && model.animate !== undefined ? model.animate : false,
-        keyboard: model.keyboard !== null && model.keyboard !== undefined ? model.keyboard : true,
-        backdrop: model.backdrop !== null && model.backdrop !== undefined ? model.backdrop : true,
-        transition: model.transition !== null && model.transition !== undefined ? model.transition : 0,
-        backdropTransition: model.backdropTransition !== null && model.backdropTransition !== undefined ? model.backdropTransition : 0,
-      }, model.controller, args);
-
-      return stack.push(dialog);
-    };
-
-    if (model.timeout && typeof model.timeout === 'number') {
-      return new Promise(resolve => setTimeout(() => resolve(renderDialog()), model.timeout));
+    return this._maybeWithTimeout(model.timeout, () => this._show({
+      title: model.title || '',
+      content: model.body,
+      footer: model.footer || false,
+      animate: this._getOption(model, 'animate', false),
+      keyboard: this._getOption(model, 'keyboard', true),
+      backdrop: this._getOption(model, 'backdrop', true),
+      transition: this._getOption(model, 'transition', 0),
+      backdropTransition: this._getOption(model, 'backdropTransition', 0)
+    }, model.controller, args));
+  }
+
+  _maybeWithTimeout(timeout, callback) {
+    if (typeof timeout === 'number') {
+      return new Promise(resolve => setTimeout(() => resolve(callback()), timeout));
     }
+    return callback();
+  }
 
-    return renderDialog();
+  _getOption(obj, key, defaultVal) {
+    return obj[key] !== null && obj[key] !== undefined
+      ? obj[key]
+      : defaultVal;
   }
 
   _show(options, controller, args) {
@@ -91,6 +84,7 @@ export default class Dialog {
     }
 
     const _modal = new Modal(options);
+    stack.push(_modal);
 
     if (controller) {
       if (typeof controller === 'string') {
@@ -128,7 +122,7 @@ export default class Dialog {
     let shown = false;
 
     backdrops.forEach((backdrop, index) => {
-      if (shown || index > 0 && index === backdrops.length - 1) {
+      if (shown || (index > 0 && index === backdrops.length - 1)) {
         backdrop.style.display = 'none';
       } else {
         backdrop.style.zIndex = zIndex - 1;
@@ -138,9 +132,10 @@ export default class Dialog {
     });
   }
 
-  _makeDialog(content, dialogClassName) {
+  _makeDialog(content, className = '') {
     this.id = `js_${dialogId.toString(16)}`;
-    return `<div id="${this.id}" class="modal fade ${dialogClassName || ''}" tabindex="-1" role="dialog">
+    return `
+      <div id="${this.id}" class="modal fade ${className}" tabindex="-1" role="dialog">
   ${content}
 </div>`;
   }

package/src/core/onAfterLoad.js

@@ -0,0 +1,13 @@
+import EventListener from 'fbjs/lib/EventListener';
+
+export default function onAfterLoad(callback) {
+  if (document.readyState === 'complete') {
+    setTimeout(callback, 0);
+  } else {
+    const event = EventListener.capture(window, 'load', () => {
+      event.remove();
+
+      callback();
+    });
+  }
+}

package/src/core/waitForLoad.js

@@ -0,0 +1,57 @@
+import onAfterLoad from "./onAfterLoad";
+
+let loadingCounter = 0;
+let originalCursor = '';
+
+export default function waitForLoad(elementOnClicked, event, callback = () => {
+}) {
+  const boundCallback = callback.bind(elementOnClicked, event);
+  const body = document.body;
+
+  if (document.readyState === 'complete') {
+    return boundCallback();
+  }
+
+  const type = (event || window.event).type;
+  loadingCounter++;
+
+  if (loadingCounter === 1) {
+    originalCursor = body.style.cursor;
+    body.style.cursor = 'progress';
+  }
+
+  switch (type) {
+    case 'load':
+    case 'focus':
+      onAfterLoad(boundCallback);
+      return;
+
+    case 'click':
+      elementOnClicked.style.cursor = 'progress';
+
+      onAfterLoad(() => {
+        loadingCounter--;
+
+        if (loadingCounter === 0) {
+          body.style.cursor = originalCursor;
+        }
+
+        elementOnClicked.style.cursor = '';
+
+        const result = boundCallback();
+        const href = elementOnClicked.getAttribute('href');
+
+        if (
+          elementOnClicked.tagName.toLowerCase() === 'a' &&
+          result !== false &&
+          href
+        ) {
+          window.location.href = href;
+        } else {
+          elementOnClicked.click();
+        }
+      });
+  }
+
+  return false;
+}