php-wasm-builder

v0.0.0

Published

18 days ago

Builds php-wasm, php-cgi-wasm & dependencies.

Downloads

0High
0Medium
0Low

seanmorris

php wasm php-wasm vrzno

php-wasm

PHP in WebAssembly, npm not required.

find php-wasm on npm | github | unpkg | reddit | discord

🚀 v0.0.8 - Preparing for Lift-off

Adding ESM & CDN Module support!
Adding stdin.
Buffering stdout/stderr in javascript.
Fixing <script type = "text/php"> support.
Adding fetch support for src on above.
Adding support for libzip, iconv, & html-tidy
Adding support for NodeFS & IDBFS.
In-place builds.
Updating PHP to 8.2.11
Building with Emscripten 3.1.43
Modularizing dependencies.
Compressing assets.

changelog

☀️ Examples

[React + php-web/php-cgi-worker demo]

🍎 Quickstart

Inline PHP

Include the php-tags.js script from a CDN:

<script async type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/php-wasm/php-tags.jsdelivr.mjs"></script>

And run some PHP right in the page!

<script type = "text/php" data-stdout = "#output">
<?php phpinfo();
</script>
<div id = "output"></div>

Inline php can use standard input, output and error with data- attributes. Just set the value of the attribute to a selector that will match that tag.

<script async type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/php-wasm/php-tags.jsdelivr.mjs"></script>

<script id = "input" type = "text/plain">Hello, world!</script>

<script type = "text/php" data-stdin = "#input" data-stdout = "#output" data-stderr = "#error">
	<?php echo file_get_contents('php://stdin');
</script>

<div id = "output"></div>
<div id = "error"></div>

The src attribute can be used on <script type = "text/php"> tags, as well as their input elements. For example:

<html>
    <head>
        <script async type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/php-wasm/php-tags.jsdelivr.mjs"></script>
        <script id = "input" src = "/test-input.json" type = "text/json"></script>
        <script type = "text/php" src = "/test.php" data-stdin = "#input" data-stdout = "#output" data-stderr = "#error"></script>
    </head>
    <body>
        <div id = "output"></div>
        <div id = "error"></div>
    </body>
</html>

CDNs

JSDelivr

<script async type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/php-wasm/php-tags.jsdelivr.mjs"></script>

Unpkg

<script async type = "text/javascript" src = "https://www.unpkg.com/php-wasm/php-tags.unpkg.mjs"></script>

🛠️ Install & Use

Install with npm:

$ npm install php-wasm

Include the module in your preferred format:

Common JS

const { PhpWeb } = require('php-wasm/PhpWeb.js');
const php = new PhpWeb;

ESM

import { PhpWeb } from 'php-wasm/PhpWeb.mjs';
const php = new PhpWeb;

From a CDN:

Note: This does not require npm.

jsdelivr

const { PhpWeb } = await import('https://cdn.jsdelivr.net/npm/php-wasm/PhpWeb.mjs');
const php = new PhpWeb;

unpkg

const { PhpWeb } = await import('https://www.unpkg.com/php-wasm/php-wasm/PhpWeb.mjs');
const php = new PhpWeb;

Pre-Packaged Static Assets:

You won't need to use this if you build in-place or use a CDN.

The php-wasm package comes with pre-built binaries out of the box so you can get started quickly.

You'll need to add the following postinstall script entry to your package.json to ensure the static assets are available to your web application. Make sure to replace public/ with the path to your public document root if necessary.

{
  "scripts": {
    "postinstall": [
      "cp node_modules/php-wasm/php-web.* public/"
    ]
  },
}

If you're using a more advanced bundler, use the vendor's documentation to learn how to move the files matching the following pattern to your public directory:

./node_modules/php-wasm/php-web.*

🥤 Running PHP & Taking Output

Create a PHP instance:

const { PhpWeb } = await import('https://cdn.jsdelivr.net/npm/php-wasm/PhpWeb.mjs');
const php = new PhpWeb;

Add your output listeners:

// Listen to STDOUT
php.addEventListener('output', (event) => {
	console.log(event.detail);
});

// Listen to STDERR
php.addEventListener('error', (event) => {
	console.log(event.detail);
});

Provide some input data on STDIN if you need to:

php.inputString('This is a string of data provided on STDIN.');

Be sure to wait until your WASM is fully loaded, then run some PHP:

php.addEventListener('ready', () => {
	php.run('<?php echo "Hello, world!";');
});

Get the result code of your script with then():

php.addEventListener('ready', () => {
	php.run('<?php echo "Hello, world!";').then(retVal => {
		// retVal contains the return code.
	});
});

💾 Persistent Storage (IDBFS & NodeFS)

IDBFS (Web & Worker)

To use IDBFS in PhpWeb, pass a persist object with a mountPath key.

mountPath will be used as the path to the persistent directory within the PHP environment.

const { PhpWeb } = await import('https://cdn.jsdelivr.net/npm/php-wasm/PhpWeb.mjs');
const php = new PhpWeb;

let php = new PhpWeb({persist: {mountPath: '/persist'}});

NodeFS (NodeJS Only)

To use NodeFS in PhpWeb, pass a persist object with mountPath & localPath keys.

localPath will be used as the path to the HOST directory to expose to PHP. mountPath will be used as the path to the persistent directory within the PHP environment.

const { PhpNode } = await import('https://cdn.jsdelivr.net/npm/php-wasm/PhpNode.mjs');
const php = new PhpNode;

let php = new PhpNode({persist: {mountPath: '/persist', localPath: '~/your-files'}});

🏗️ Building in-place

To use the the in-place builder, first install php-wasm globally:

Requires docker, docker-compose & make.

$ npm install -g php-wasm

Create the build environment (can be run from anywhere):

$ php-wasm image

Optionally clean up files from a previous build:

$ php-wasm clean

Build for web

Then navigate to the directory you want the files to be built in, and run php-wasm build

$ cd ~/my-project
$ php-wasm build
# php-wasm build web
#  "web" is the default here

Build for node

$ cd ~/my-project
$ php-wasm build node

ESM Modules:

Build ESM modules with:

$ php-wasm build web mjs
$ php-wasm build node mjs

This will build the following files in the current directory (or in PHP_DIST_DIR, see below for more info.)

# php-wasm build web
PhpWeb.js          # ⭐ require this module in your javascript if you want to use PHP in JS.
php-web.js         # internal interface between WASM and javscript
php-web.js.wasm    # binary php-wasm

# php-wasm build node
PhpNode.js         # ⭐ require this module in your scripts to use PHP in JS in node.
php-node.js        # internal interface between WASM and javscript
php-node.js.wasm   # binary php-wasm

# php-wasm build web mjs
PhpWeb.mjs         # ⭐ import this module in your javascript if you want to use PHP in JS.
php-tags.local.mjs # ✨ include this with a script tag in your HTML if you want to use inline PHP
php-web.mjs        # internal interface between WASM and javscript
php-web.mjs.wasm   # Binary php-wasm

# php-wasm build node mjs
PhpNode.mjs        # ⭐ import this module in your scripts to use PHP in JS in node.
php-node.mjs       # internal interface between WASM and javscript
php-node.mjs.wasm  # binary php-wasm

PhpBase.js         # All cjs builds depend on this file.
PhpBase.mjs        # All mjs builds depend on this file.

.php-wasm-rc

You can also create a .php-wasm-rc file in this directory to customize the build.

# Build to a directory other than the current one (absolute path)
PHP_DIST_DIR=~/my-project/public

# Space separated list of files/directories (absolute paths)
# to be included under the /preload directory in the final build.
PRELOAD_ASSETS=~/my-project/php-scripts ~/other-dir/example.php

# Memory to start the instance with, before growth
INITIAL_MEMORY=2048MB

# Build with assertions enabled
ASSERTIONS=0

# Select the optimization level
OPTIMIZATION=3

# Build with libXML
WITH_LIBXML=1

# Build with Tidy
WITH_TIDY=1

# Build with Iconv
WITH_ICONV=1

# Build with SQLite
WITH_SQLITE=1

# Build with VRZNO
WITH_VRZNO=1

📦 Packaging files

Use the PRELOAD_ASSETS key in your .php-wasm-rc file to define a list of files and directories to include by default.

These files will be available under /preload in the final package.

Persistent Memory

So long as php.refresh() is not called from Javascript, the instance will maintain its own persistent memory.

<?php
// Run this over and over again...
print ++$x;

🤝 php-wasm started as a fork of oraoto/PIB...

https://github.com/oraoto/pib

🍻 Licensed under the Apache License, Version 2.0

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

http://www.apache.org/licenses/LICENSE-2.0