Run examples with php wasm (#1097)

* Run examples with php wasm
* make examples editable
* load wasm only when running code
* handle empty code

Co-authored-by: lwlinux <1053317536@qq.com>

include/footer.inc

@@ -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/to-top@2x.png"></a>
 

js/interactive-examples.js

@@ -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();