PHP in WebAssembly, npm not required.
find php-wasm on npm | github | unpkg | reddit | discord
- Adding ESM & CDN Module support!
- Adding stdin.
- Buffering stdout/stderr in javascript.
- Fixing
<script type = "text/php">support. - Adding fetch support for
srcon 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.
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><script async type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/php-wasm/php-tags.jsdelivr.mjs"></script><script async type = "text/javascript" src = "https://www.unpkg.com/php-wasm/php-tags.unpkg.mjs"></script>Install with npm:
$ npm install php-wasmInclude the module in your preferred format:
const { PhpWeb } = require('php-wasm/PhpWeb.js');
const php = new PhpWeb;import { PhpWeb } from 'php-wasm/PhpWeb.mjs';
const php = new PhpWeb;Note: This does not require npm.
const { PhpWeb } = await import('https://cdn.jsdelivr.net/npm/php-wasm/PhpWeb.mjs');
const php = new PhpWeb;const { PhpWeb } = await import('https://www.unpkg.com/php-wasm/php-wasm/PhpWeb.mjs');
const php = new PhpWeb;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.*
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.
});
});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'}});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'}});To use the the in-place builder, first install php-wasm globally:
Requires docker, docker-compose & make.
$ npm install -g php-wasmCreate the build environment (can be run from anywhere):
$ php-wasm imageOptionally clean up files from a previous build:
$ php-wasm cleanThen 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$ cd ~/my-project
$ php-wasm build nodeBuild ESM modules with:
$ php-wasm build web mjs
$ php-wasm build node mjsThis 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.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=1Use 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.
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;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.
Special thanks to Alex Haussmann