Run examples with php wasm

Author: soyuka

include/footer.inc

@@ -105,6 +105,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,58 @@
+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: ';
+  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;
+}
+
+async function main() {
+  const buffer = [];
+	const {ccall} = await phpBinary({
+    print(data) {
+      if (!data) {
+        return;
+      }
+
+      if (buffer.length) {
+        buffer.push('\n');
+      }
+      buffer.push(data);
+    }
+  })
+
+  console.log("PHP wasm %s loaded.", ccall("phpw_exec", "string", ["string"], ["phpversion();"]));
+  let lastOutput = null
+
+	document.querySelectorAll('.example').forEach((example) => {
+		const button = document.createElement('button');
+		const phpcode = example.querySelector('.phpcode');
+
+		button.innerText = 'Run code';
+		button.onclick = function() {
+      if (lastOutput && lastOutput.parentNode) {
+        lastOutput.parentNode.removeChild(lastOutput)
+      }
+
+      ccall("phpw_run", null, ["string"], ['?>' + phpcode.innerText]);
+      lastOutput = createOutput(buffer.join(''))
+      phpcode.parentNode.appendChild(lastOutput);
+      buffer.length = 0;
+		};
+
+		phpcode.parentNode.insertBefore(button, phpcode);
+	});
+
+}
+
+main()