bigpipe-util 0.2.10 → 0.2.12

package/CHANGELOG.md

@@ -4,10 +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.12 - 2026-01-12
+### Added
+- Added `Pagelet.js`, `BigPipe.js`
+
+## v0.2.11 - 2025-12-27
+### Added
+- Added `incrementRequests` method to AsyncRequest.js
+- Added submitter to form data in onSubmit handler
+
 ## v0.2.10 - 2025-05-15
-- Added `onAfterLoad.js`, `waitForLoad.js`
 
 ### Added
+- Added `onAfterLoad.js`, `waitForLoad.js`
 - Added `timeout` to open dialog with a delay in method `showFromModel`
 
 ## v0.2.8 - 2025-05-02

package/README.md

@@ -42,11 +42,11 @@ window.require = (modulePath) => {
 ### 4. Add these lines to the page footer:
 ```html
 <script>
-    (new (require("bigpipe-util/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';
@@ -119,6 +119,6 @@ We welcome contributions! If you'd like to help improve this project, feel free
 
 ## 📜 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.
 
 [blog]: https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919

package/bigpipe.svg

@@ -1,13 +1,13 @@
 <svg width="254.23999568394254" height="64.8" viewBox="0 0 254.23999568394254 64.8" xmlns="http://www.w3.org/2000/svg">
-    <g transform="matrix(3.0856473041983374,0,0,3.0856473041983374,-6.171373325690784,-6.1698442238608315)" fill="#0C056D">
+    <g transform="matrix(3.0856473041983374,0,0,3.0856473041983374,-6.171373325690784,-6.1698442238608315)" fill="#478be6">
         <g xmlns="http://www.w3.org/2000/svg">
             <path d="M2.2427,8.9287a.5.5,0,0,1,0-.8574l10-6a.4971.4971,0,0,1,.5146,0l10,6a.5.5,0,0,1,0,.8574l-10,6a.5.5,0,0,1-.5146,0Zm20,3.1426L12.5,17.917,2.7573,12.0713a.5.5,0,0,0-.5146.8574l10,6a.5.5,0,0,0,.5146,0l10-6a.5.5,0,0,0-.5146-.8574Zm0,4L12.5,21.917,2.7573,16.0713a.5.5,0,0,0-.5146.8574l10,6a.5.5,0,0,0,.5146,0l10-6a.5.5,0,0,0-.5146-.8574Z"></path>
         </g>
     </g>
-    <g transform="matrix(2.500000066227385,0,0,2.500000066227385,81.99999920527138,0.49999675485814166)" fill="#0C056D">
+    <g transform="matrix(2.500000066227385,0,0,2.500000066227385,81.99999920527138,0.49999675485814166)" fill="#478be6">
         <path d="M8.92 12.24 c1.48 0.4 2.88 1.72 2.88 3.66 c0 2.54 -1.6 4.1 -5.08 4.1 l-5.52 0 l0 -14 l5.22 0 c2.9 0 4.36 1.64 4.36 3.52 c0 1.48 -0.96 2.32 -1.86 2.72 z M6.14 8.56 l-2.02 0 l0 2.82 l2.02 0 c1.24 0 1.74 -0.58 1.74 -1.42 c0 -0.9 -0.58 -1.4 -1.74 -1.4 z M6.56 17.44 c1.6 0 2.32 -0.66 2.32 -1.9 c0 -1.06 -0.72 -1.8 -2.44 -1.8 l-2.32 0 l0 3.7 l2.44 0 z M16.62 6 l0 14 l-2.92 0 l0 -14 l2.92 0 z M32.2 12.559999999999999 c0.62 4.7 -2.44 7.64 -6.22 7.64 c-3.98 0 -7.26 -2.94 -7.26 -7.2 s3.36 -7.2 7.26 -7.2 c1.86 0 3.5 0.6 4.7 1.66 l-1.76 1.98 c-0.74 -0.52 -1.74 -0.9 -2.76 -0.9 c-2.54 0 -4.4 1.86 -4.4 4.46 s1.8 4.46 4.22 4.46 c1.84 0 3.12 -0.66 3.52 -2.42 l-3.3 0 l0 -2.48 l6 0 z"></path>
     </g>
-    <g transform="matrix(2.5714285714285716,0,0,2.5714285714285716,166.91428559167045,-0.4285714285714306)" fill="#0C056D">
+    <g transform="matrix(2.5714285714285716,0,0,2.5714285714285716,166.91428559167045,-0.4285714285714306)" fill="#478be6">
         <path d="M5.46 6 c3.14 0 4.8 1.94 4.8 4.3 c0 2.42 -1.66 4.34 -4.8 4.34 l-3.68 0 l0 5.36 l-0.58 0 l0 -14 l4.26 0 z M5.54 14.04 c2.52 0 4.14 -1.46 4.14 -3.74 c0 -2.32 -1.62 -3.72 -4.14 -3.72 l-3.76 0 l0 7.46 l3.76 0 z M12.74 6 l0 14 l-0.58 0 l0 -14 l0.58 0 z M19.400000000000002 6 c3.14 0 4.8 1.94 4.8 4.3 c0 2.42 -1.66 4.34 -4.8 4.34 l-3.68 0 l0 5.36 l-0.58 0 l0 -14 l4.26 0 z M19.48 14.04 c2.52 0 4.14 -1.46 4.14 -3.74 c0 -2.32 -1.62 -3.72 -4.14 -3.72 l-3.76 0 l0 7.46 l3.76 0 z M26.680000000000003 19.42 l7.28 0 l0 0.58 l-7.68 0 l-0.18 0 l0 -14 l0.58 0 l7.1 0 l0 0.58 l-7.1 0 l0 6.1 l5.66 0 l0 0.58 l-5.66 0 l0 6.16 z"></path>
     </g>
 </svg>

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

package/src/BigPipe.js

@@ -0,0 +1,170 @@
+export const BIGPIPE_PHASE = Object.freeze({
+  WAITING: 0,
+  READY_FOR_JS: 1,
+  LOADING_JS: 2,
+  COMPLETE: 3
+});
+
+export const RESOURCE_PHASE = Object.freeze({
+  PENDING: 0,
+  LOADING: 1,
+  LOADED: 2
+});
+
+let instance = null;
+
+export default class BigPipe {
+  pageletResources = new Map();
+  pagelets = new Map();
+  phase = BIGPIPE_PHASE.WAITING;
+
+  constructor() {
+    if (instance) {
+      return instance;
+    }
+    instance = this;
+  }
+
+  onPageletArrive(pageletData) {
+    const Pagelet = require("./Pagelet").default;
+
+    if (pageletData.is_last) {
+      this.setPhase(BIGPIPE_PHASE.READY_FOR_JS);
+    }
+
+    const pagelet = new Pagelet(pageletData);
+    this.registerPagelet(pagelet);
+    pagelet.start();
+  }
+
+  fileLoaded(filename) {
+    const resource = this.pageletResources.get(filename);
+    if (resource) {
+      resource.onComplete();
+    }
+  }
+
+  registerPagelet(pagelet) {
+    this.pagelets.set(pagelet.id, pagelet);
+  }
+
+  areAllPageletsReady() {
+    if (this.pagelets.size === 0) {
+      return false;
+    }
+
+    return Array.from(this.pagelets.values()).every(
+      pagelet => pagelet.phase >= 3
+    );
+  }
+
+  pageletDisplayed() {
+    if (!this.areAllPageletsReady()) {
+      return;
+    }
+
+    if (this.phase === BIGPIPE_PHASE.READY_FOR_JS) {
+      this.loadJSResources();
+    }
+  }
+
+  setPhase(newPhase) {
+    this.phase = newPhase;
+  }
+
+  loadJSResources() {
+    this.setPhase(BIGPIPE_PHASE.LOADING_JS);
+
+    const jsResources = this.getResourcesByType('js');
+
+    jsResources.forEach(resource => {
+      resource.startLoading();
+    });
+
+    this.notifyPageletsWithoutResources();
+
+    if (jsResources.length === 0) {
+      this.notifyAllPagelets();
+    }
+  }
+
+  getResourcesByType(type) {
+    return Array.from(this.pageletResources.values())
+      .filter(resource => resource.type === type);
+  }
+
+  notifyPageletsWithoutResources() {
+    this.pagelets.forEach(pagelet => {
+      if (pagelet.jsResources.size === 0) {
+        pagelet.onJsFinished();
+      }
+    });
+  }
+
+  notifyAllPagelets() {
+    this.pagelets.forEach(pagelet => {
+      pagelet.onJsFinished();
+    });
+  }
+
+  extractFilename(filePath) {
+    const match = /([^/]+)$/.exec(filePath);
+    return match ? match[1] : filePath;
+  }
+
+  pageletResourceFactory(file, type) {
+    const name = this.extractFilename(file);
+
+    let resource = this.pageletResources.get(name);
+    if (!resource) {
+      resource = this.createResource(file, name, type);
+      this.pageletResources.set(name, resource);
+    }
+
+    return resource;
+  }
+
+  createResource(file, name, type) {
+    const self = this;
+
+    return {
+      file,
+      name,
+      type,
+      phase: RESOURCE_PHASE.PENDING,
+      callbacks: [],
+
+      startLoading() {
+        if (this.phase !== RESOURCE_PHASE.PENDING) {
+          return;
+        }
+
+        this.phase = RESOURCE_PHASE.LOADING;
+
+        if (type === 'css') {
+          const link = document.createElement('link');
+          link.rel = 'stylesheet';
+          link.href = file;
+          link.onload = () => self.fileLoaded(name);
+          link.onerror = () => self.fileLoaded(name);
+          document.head.appendChild(link);
+        } else if (type === 'js') {
+          const script = document.createElement('script');
+          script.src = file;
+          script.onload = () => self.fileLoaded(name);
+          script.onerror = () => self.fileLoaded(name);
+          document.body.appendChild(script);
+        }
+      },
+
+      onComplete() {
+        this.phase = RESOURCE_PHASE.LOADED;
+        this.callbacks.forEach(callback => callback(this));
+      },
+
+      attachToPagelet(callback) {
+        this.callbacks.push(callback);
+      }
+    };
+  }
+}

package/src/Pagelet.js

@@ -0,0 +1,131 @@
+import BigPipe, { RESOURCE_PHASE } from "./BigPipe";
+import ServerJS from "./ServerJS";
+import AsyncDOM from "./async/AsyncDOM";
+
+const serverJS = new ServerJS();
+const asyncDOM = new AsyncDOM();
+const bigPipe = new BigPipe();
+
+export const PAGELET_PHASE = Object.freeze({
+  ARRIVE_START: 0,
+  LOADING_CSS: 1,
+  DISPLAY_START: 2,
+  DISPLAY_END: 3,
+  ARRIVE_END: 4
+});
+
+function areAllResourcesLoaded(resources) {
+  if (resources.size === 0) {
+    return true;
+  }
+  return Array.from(resources.values()).every(
+    resource => resource.phase === RESOURCE_PHASE.LOADED
+  );
+}
+
+export default class Pagelet {
+  cssResources = new Map();
+
+  jsResources = new Map();
+
+  id = "";
+
+  phase = PAGELET_PHASE.ARRIVE_START;
+
+  constructor(pageletData) {
+    this.bigPipe = bigPipe;
+    this.id = pageletData.id;
+    this.phase = PAGELET_PHASE.ARRIVE_START;
+    this.domops = pageletData.domops;
+    this.jsmods = pageletData.jsmods;
+    this.css = pageletData.css;
+    this.js = pageletData.js;
+    this.cssResources = new Map();
+    this.jsResources = new Map();
+  }
+
+  isComplete() {
+    return this.phase === PAGELET_PHASE.ARRIVE_END;
+  }
+
+  setPhase(phase) {
+    this.phase = phase;
+  }
+
+  start() {
+    if (this.phase !== PAGELET_PHASE.ARRIVE_START) {
+      return;
+    }
+
+    if (this.css.length > 0) {
+      this.css.forEach((cssFile) => {
+        const cssResource = this.bigPipe.pageletResourceFactory(cssFile, 'css');
+        this.attachCssResource(cssResource);
+      });
+    }
+
+    if (this.js.length > 0) {
+      this.js.forEach((jsFile) => {
+        const jsResource = this.bigPipe.pageletResourceFactory(jsFile, 'js');
+        this.attachJsResource(jsResource);
+      });
+    }
+
+    if (this.cssResources.size > 0) {
+      this.setPhase(PAGELET_PHASE.LOADING_CSS);
+      this.cssResources.forEach((resource) => {
+        resource.startLoading();
+      });
+    } else {
+      this.setContent();
+      this.onJsFinished();
+    }
+  }
+
+  attachCssResource(resource) {
+    resource.attachToPagelet(() => this.onCssFinished(resource));
+    this.cssResources.set(resource.file, resource);
+  }
+
+  attachJsResource(resource) {
+    resource.attachToPagelet(() => this.onJsFinished());
+    this.jsResources.set(resource.file, resource);
+  }
+
+  onJsFinished() {
+    if (this.isComplete()) {
+      return;
+    }
+
+    if (!areAllResourcesLoaded(this.jsResources)) {
+      return;
+    }
+
+    this.processJsMods();
+
+    this.setPhase(PAGELET_PHASE.ARRIVE_END);
+  }
+
+  processJsMods() {
+    serverJS.handle(this.jsmods);
+  }
+
+  onCssFinished() {
+    if (!areAllResourcesLoaded(this.cssResources)) {
+      return;
+    }
+
+    this.setContent();
+  }
+
+  setContent() {
+    this.setPhase(PAGELET_PHASE.DISPLAY_START);
+
+    if (this.domops) {
+      asyncDOM.invoke(this.domops);
+    }
+
+    this.setPhase(PAGELET_PHASE.DISPLAY_END);
+    this.bigPipe.pageletDisplayed(this);
+  }
+}

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");
 
@@ -131,12 +136,16 @@ export default function Primer() {
           }
         })
         .setErrorHandler(function () {
-          eventTarget.classList.add("async-saving");
+          eventTarget.classList.remove("async-saving");
 
           activeControls.forEach(function (control) {
             control.removeAttribute("readonly");
           });
 
+          if (submitter) {
+            submitter.disabled = false;
+          }
+
           if (eventTarget) {
             const loader = eventTarget.querySelector(".small-loader");
 

package/src/ServerJS.js

@@ -2,7 +2,7 @@ import replaceTransportMarkers from "./core/replaceTransportMarkers";
 
 function handler(dependencies, guard, context) {
   return dependencies.map(function (args) {
-    guard.apply(context, args);
+    return guard.apply(context, args);
   });
 }
 

package/src/async/AsyncDOM.js

@@ -11,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;
       }
@@ -46,6 +46,7 @@ export default class AsyncDOM {
           break;
         case "replace":
           DOM.replace(node, content.__html);
+          break;
       }
     }
   }

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) {
@@ -150,7 +154,7 @@ export default class AsyncRequest {
     const handler = this.getHandler();
     const errorHandler = this.getErrorHandler();
     const initialHandler = this.getInitialHandler();
-    const getFinallyHandler = this.getFinallyHandler();
+    const finallyHandler = this.getFinallyHandler();
 
     initialHandler();
 
@@ -164,7 +168,7 @@ export default class AsyncRequest {
         let response;
         try {
           const safeJson = self._unshieldResponseText(this.responseText);
-          response = eval("(" + safeJson + ")");
+          response = JSON.parse(safeJson);
         } catch (e) {
           throw new Error("Failed to handle response: " + e.message + "\n" + this.responseText);
         }
@@ -176,12 +180,12 @@ export default class AsyncRequest {
         errorHandler(this);
       }
 
-      getFinallyHandler(this);
+      finallyHandler(this);
     }
 
     request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
 
-    requests++;
+    incrementRequests();
 
     if (data instanceof FormData) {
       data.append('__req', requests);

package/src/core/replaceTransportMarkers.js

@@ -18,7 +18,7 @@ export default function replaceTransportMarkers(markerValue, markers, key) {
       } else if (marker.__set) {
         markers[key] = new Set(marker.__set);
       } else {
-        for (let value in marker) {
+        for (const value in marker) {
           replaceTransportMarkers(markerValue, marker, value);
         }
       }