Skip to content

Commit

Permalink
Run examples with php wasm (#1097)
Browse files Browse the repository at this point in the history
* Run examples with php wasm
* make examples editable
* load wasm only when running code
* handle empty code

Co-authored-by: lwlinux <[email protected]>
  • Loading branch information
soyuka and lwlwilliam authored Dec 3, 2024
1 parent 3194688 commit 79d4f79
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 0 deletions.
7 changes: 7 additions & 0 deletions include/footer.inc
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,13 @@ if (!empty($_SERVER['BASE_PAGE'])
echo '<script src="/cached.php?t=' . @filemtime($path) . '&amp;f=/js/' . $filename . '"></script>' . "\n";
}
?>
<?php
$jsfiles = ["interactive-examples.js"];
foreach ($jsfiles as $filename) {
$path = dirname(__DIR__) . '/js/' . $filename;
echo '<script type="module" src="/cached.php?t=' . @filemtime($path) . '&amp;f=/js/' . $filename . '"></script>' . "\n";
}
?>

<a id="toTop" href="javascript:;"><span id="toTopHover"></span><img width="40" height="40" alt="To Top" src="/images/[email protected]"></a>

Expand Down
79 changes: 79 additions & 0 deletions js/interactive-examples.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import phpBinary from "/js/php-web.mjs";

function createOutput(output) {
const container = document.createElement("div");
container.classList.add("screen", "example-contents");
const title = document.createElement("p");
title.innerText = "Output (PHP "+ PHP.version +"):";
container.appendChild(title);
const div = document.createElement("div");
div.classList.add("examplescode");
container.appendChild(div);
const pre = document.createElement("pre");
pre.classList.add("examplescode");
pre.innerText = output;
div.appendChild(pre);
return container;
}

class PHP {
static buffer = [];
static runPhp = null;
static version = '';
static async loadPhp() {
if (PHP.runPhp) {
return PHP.runPhp;
}

const { ccall } = await phpBinary({
print(data) {
if (!data) {
return;
}

if (PHP.buffer.length) {
PHP.buffer.push("\n");
}
PHP.buffer.push(data);
},
});

PHP.version = ccall("phpw_exec", "string", ["string"], ["phpversion();"]),
console.log("PHP wasm %s loaded.", PHP.version);
PHP.runPhp = (code) => ccall("phpw_run", null, ["string"], ["?>" + code]);
return PHP.runPhp;
}
}

async function main() {
let lastOutput = null;

document.querySelectorAll(".example .example-contents").forEach((example) => {
const button = document.createElement("button");
button.setAttribute("type", "button");
const phpcode = example.querySelector(".phpcode");
if (phpcode === null) {
return;
}

const code = phpcode.querySelector("code");
code.setAttribute("contentEditable", true);

button.innerText = "Run code";
button.onclick = async function () {
if (lastOutput && lastOutput.parentNode) {
lastOutput.remove();
}

const runPhp = await PHP.loadPhp();
runPhp(phpcode.innerText);
lastOutput = createOutput(PHP.buffer.join(""));
phpcode.parentNode.appendChild(lastOutput);
PHP.buffer.length = 0;
};

phpcode.before(button);
});
}

main();
16 changes: 16 additions & 0 deletions js/php-web.mjs

Large diffs are not rendered by default.

Binary file added js/php-web.wasm
Binary file not shown.

0 comments on commit 79d4f79

Please sign in to comment.