Submitted by richard999 on Tuesday, April 19, 2022 - 12:52.

Language

Efficiently insert/replace content and work with the DOM. It is also possible to easily call JavaScript modules from PHP.

This library currently implements a 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.

Demo App

Try the app with a live demo or check how to install it.

Requirements

PHP 7.1 or higher
Node 8, 10+.
Webpack

Installation

These steps are required:

Install composer package:

$ composer require richarddobron/bigpipe

Install npm package:

 $ npm install bigpipe-util

Add these lines to /path/to/resources/js/app.js:

 
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; };

Create file /path/to/resources/js/ServerJS.js
- this step is optional, but if you skip it, use this in the next step: require("bigpipe-util/ServerJS")
  1. import ServerJSImpl from 'bigpipe-util/src/ServerJS';
  2. export default
  3. class ServerJS extends ServerJSImpl { }
Add these lines to the page footer:
1. <script>
2. (new (require("ServerJS"))).handle(<?=json_encode(\dobron\BigPipe\BigPipe::jsmods())?>);
3. </script>

DOMOPS API

setContent: Sets the content of an element.
appendContent: Insert content as the last child of the specified element.
prependContent: Insert content as the first child of the specified element.
insertAfter: Insert content after specified element.
insertBefore: Insert content before the specified element.
remove: Remove the specified element and its children.
replace: Replace the specified elements with content.
eval: Evaluates JavaScript code represented as a string.

 
$response = new \dobron\BigPipe\AsyncResponse();
$response->setContent('div#content', $newContent);
$response->send();

Refresh & Redirecting

 
$response = new \dobron\BigPipe\AsyncResponse();
$response->reload(250); // reload page with 250ms delay 
// or 
$response->redirect('/onboarding', 500); // redirect with 500ms delay 
$response->send();

Payload

 
$response = new \dobron\BigPipe\AsyncResponse(); 
$response->setPayload([ 
          'username' => $_POST['username'], 
          'status' => 'unavailable', 
          'message' => 'Username is unavailable.', ]); 
$response->send();

BigPipe API

require: Call JavaScript module method. You can call a specific class method or a regular function with the custom arguments.

Example PHP code:

$asyncResponse = new \dobron\BigPipe\AsyncResponse(); 
$asyncResponse->bigPipe()->require("require('SecretModule').run()", 
        [ 'first argument',
        'second argument', 
        ... ]); 
$asyncResponse->send(); 

Example JavaScript code:

class SecretModule { run(first, second) { // ... } }

transport: Through transport markers, you can send HTML content but also transform the content into JavaScript objects (such as Map, Set, or Element).

Example PHP code:

$asyncResponse = new \dobron\BigPipe\AsyncResponse(); 
$asyncResponse->bigPipe()->require("require('Chart').setup()", [ 
        'element' => \dobron\BigPipe\TransportMarker::transportElement('chart-div'), 
        'dataPoints' => $asyncResponse->transport()->transportSet([
                 ['x' => 10, 'y' => 71], 
                 ['x' => 20, 'y' => 55], 
                 ['x' => 30, 'y' => 50], 
                 ['x' => 40, 'y' => 65], 
                 ]), 
         ]); 
$asyncResponse->send(); 

What all can be Ajaxifed?

Links

<a ajaxify="/ajax/remove.php" href="#" rel="async">Remove Item</a>

Forms

 
<form action="/submit.php" method="POST" rel="async">
        <input name="user" /> 
        <input name="Done" type="submit" />
</form>
 

Dialogs

<a ajaxify="/ajax/modal.php" href="#" rel="dialog">Open Modal</a>

Inspiration

BigPipe is inspired by the concept behind Facebook's BigPipe. For more details read their blog post: Pipelining web pages for high performance.

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.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Call JavaScript From PHP & Efficiently Insert/Replace content and work with the DOM