bigpipe-util 0.2.12 → 0.2.14

package/README.md

@@ -1,124 +1,124 @@
-<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.
-
-
-## 👀 Demo App
-Try the app with [live demo](http://bigpipe.xf.cz).
-
-## 📕 Full documentation
-https://richarddobron.github.io/bigpipe-php/
-
-## ℹ️ Requirements
-* PHP 7.1 or higher
-* Webpack
-
-## 📦 Installation
-Follow these steps to install and set up:
-
-### 1. Install composer package:
-```shell
-$ composer require richarddobron/bigpipe
-```
-
-### 2. Install npm package:
-```shell
-$ npm install bigpipe-util
-```
-
-### 3. Add the following to /path/to/resources/js/app.js:
-```javascript
-import Primer from 'bigpipe-util/src/Primer';
-
-Primer();
-
-window.require = (modulePath) => {
-  return modulePath.startsWith('bigpipe-util/')
-    ? require('bigpipe-util/' + modulePath.substring(13) + '.js').default
-    : require('./' + modulePath).default;
-};
-```
-
-### 4. Add these lines to the page footer:
-```html
-<script>
-    (new (require("bigpipe-util/src/ServerJS"))).handle(<?=json_encode(\dobron\BigPipe\BigPipe::jsmods())?>);
-</script>
-```
-
-## 🛜 Request API
-
-```javascript
-import AsyncRequest from 'bigpipe-util/src/AsyncRequest';
-
-const request = (new AsyncRequest('/ajax/remove.php'))
-  // or .setURI('/ajax/remove.php')
-  .setMethod('POST')
-  .setData({
-    param: 'value',
-  })
-  .setInitialHandler(() => {
-      // pre-request callback function
-  })
-  .setHandler((jsonResponse) => {
-      // A function to be called if the request succeeds
-  })
-  .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) {
-  request.abort();
-}
-```
-
-# ⚡️ What all can be Ajaxifed?
-
-## 🔗 Links
-```html
-<a href="#"
-   ajaxify="/ajax/remove.php"
-   rel="async">Remove Item</a>
-```
-
-## 📝 Forms
-```html
-<form action="/submit.php"
-      method="POST"
-      rel="async">
-    <input name="user">
-    <input type="submit" name="Done">
-</form>
-```
-
-## 💬 Dialogs
-```html
-<a href="#"
-   ajaxify="/ajax/modal.php"
-   rel="dialog">Open Modal</a>
-```
-
-## 🌟 Inspiration
-
-BigPipe is inspired by Facebook's BigPipe. For more details
-read their blog post: [Pipelining web pages for high performance][blog].
-
-## 💡 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.
-
-## 🤝 Contributing
-
-We welcome contributions! If you'd like to help improve this project, feel free to open an issue or submit a pull request.
-
-## 📜 License
-
-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
+<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.
+
+
+## 👀 Demo App
+Try the app with [live demo](http://bigpipe.xf.cz).
+
+## 📕 Full documentation
+https://richarddobron.github.io/bigpipe-php/
+
+## ℹ️ Requirements
+* PHP 7.1 or higher
+* Webpack
+
+## 📦 Installation
+Follow these steps to install and set up:
+
+### 1. Install composer package:
+```shell
+$ composer require richarddobron/bigpipe
+```
+
+### 2. Install npm package:
+```shell
+$ npm install bigpipe-util
+```
+
+### 3. Add the following to /path/to/resources/js/app.js:
+```javascript
+import Primer from 'bigpipe-util/dist/Primer';
+
+Primer();
+
+window.require = (modulePath) => {
+  return modulePath.startsWith('bigpipe-util/')
+    ? require('bigpipe-util/' + modulePath.substring(13) + '.js').default
+    : require('./' + modulePath).default;
+};
+```
+
+### 4. Add these lines to the page footer:
+```html
+<script>
+    (new (require("bigpipe-util/dist/ServerJS"))).handle(<?=json_encode(\dobron\BigPipe\BigPipe::jsmods())?>);
+</script>
+```
+
+## 🛜 Request API
+
+```javascript
+import AsyncRequest from 'bigpipe-util/dist/AsyncRequest';
+
+const request = (new AsyncRequest('/ajax/remove.php'))
+  // or .setURI('/ajax/remove.php')
+  .setMethod('POST')
+  .setData({
+    param: 'value',
+  })
+  .setInitialHandler(() => {
+      // pre-request callback function
+  })
+  .setHandler((jsonResponse) => {
+      // A function to be called if the request succeeds
+  })
+  .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) {
+  request.abort();
+}
+```
+
+# ⚡️ What all can be Ajaxifed?
+
+## 🔗 Links
+```html
+<a href="#"
+   ajaxify="/ajax/remove.php"
+   rel="async">Remove Item</a>
+```
+
+## 📝 Forms
+```html
+<form action="/submit.php"
+      method="POST"
+      rel="async">
+    <input name="user">
+    <input type="submit" name="Done">
+</form>
+```
+
+## 💬 Dialogs
+```html
+<a href="#"
+   ajaxify="/ajax/modal.php"
+   rel="dialog">Open Modal</a>
+```
+
+## 🌟 Inspiration
+
+BigPipe is inspired by Facebook's BigPipe. For more details
+read their blog post: [Pipelining web pages for high performance][blog].
+
+## 💡 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.
+
+## 🤝 Contributing
+
+We welcome contributions! If you'd like to help improve this project, feel free to open an issue or submit a pull request.
+
+## 📜 License
+
+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/{src → dist}/BigPipe.js

@@ -1,170 +1,148 @@
-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);
-      }
-    };
-  }
-}
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RESOURCE_PHASE = exports.PAGELET_PHASE = exports.BIGPIPE_PHASE = void 0;
+const BIGPIPE_PHASE = exports.BIGPIPE_PHASE = Object.freeze({
+  WAITING: 0,
+  READY_FOR_JS: 1,
+  LOADING_JS: 2,
+  COMPLETE: 3
+});
+const RESOURCE_PHASE = exports.RESOURCE_PHASE = Object.freeze({
+  PENDING: 0,
+  LOADING: 1,
+  LOADED: 2
+});
+const PAGELET_PHASE = exports.PAGELET_PHASE = Object.freeze({
+  ARRIVE_START: 0,
+  LOADING_CSS: 1,
+  DISPLAY_START: 2,
+  DISPLAY_END: 3,
+  ARRIVE_END: 4
+});
+let instance = null;
+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 >= PAGELET_PHASE.ARRIVE_END);
+  }
+  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);
+      }
+    };
+  }
+}
+exports.default = BigPipe;

package/dist/Pagelet.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PAGELET_PHASE", {
+  enumerable: true,
+  get: function () {
+    return _BigPipe.PAGELET_PHASE;
+  }
+});
+exports.default = void 0;
+var _BigPipe = _interopRequireWildcard(require("./BigPipe"));
+var _ServerJS = _interopRequireDefault(require("./ServerJS"));
+var _AsyncDOM = _interopRequireDefault(require("./async/AsyncDOM"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const serverJS = new _ServerJS.default();
+const asyncDOM = new _AsyncDOM.default();
+const bigPipe = new _BigPipe.default();
+function areAllResourcesLoaded(resources) {
+  if (resources.size === 0) {
+    return true;
+  }
+  return Array.from(resources.values()).every(resource => resource.phase === _BigPipe.RESOURCE_PHASE.LOADED);
+}
+class Pagelet {
+  cssResources = new Map();
+  jsResources = new Map();
+  id = '';
+  phase = _BigPipe.PAGELET_PHASE.ARRIVE_START;
+  constructor(pageletData) {
+    this.bigPipe = bigPipe;
+    this.id = pageletData.id;
+    this.phase = _BigPipe.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 === _BigPipe.PAGELET_PHASE.ARRIVE_END;
+  }
+  setPhase(phase) {
+    this.phase = phase;
+  }
+  start() {
+    if (this.phase !== _BigPipe.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(_BigPipe.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(_BigPipe.PAGELET_PHASE.ARRIVE_END);
+  }
+  processJsMods() {
+    serverJS.handle(this.jsmods);
+  }
+  onCssFinished() {
+    if (!areAllResourcesLoaded(this.cssResources)) {
+      return;
+    }
+    this.setContent();
+  }
+  setContent() {
+    this.setPhase(_BigPipe.PAGELET_PHASE.DISPLAY_START);
+    if (this.domops) {
+      asyncDOM.invoke(this.domops);
+    }
+    this.setPhase(_BigPipe.PAGELET_PHASE.DISPLAY_END);
+    this.bigPipe.pageletDisplayed(this);
+  }
+}
+exports.default = Pagelet;