PHP Web Component

Monday, 30 December 2019

“WebAssembly becomes the fourth language for the Web which allows code to run in the browser“

I’ve been enjoying learning a little bit more about WebAssembly. The journey has been long and a bit sporadic as my first introduction to the concepts were with Emscripten shortly after the release of asm.js. Since then, the scope of the project seems to have widened and the landscape has grown — it’s more than the browser [1, 2, 3, 4].

With that said, here are a few projects that have caught my attention for use in that environment:

• AssemblyScript in WebAssembly Studio
• Yew, and isomorphic rendering with Percy
• Blazor. The default blazorwasm builds from .NET have been a quick way to get up and running for exploring this way of producing web applications from Microsoft. In my tests, I re-created the SurveyPrompt Razor component as a custom element and then published the result on GitHub Pages: https://kherrick.github.io/postview/
• The codecs in Squoosh
• Python inside Iodide
• and PHP in the browser using PIB

…wait, PHP in the browser. I’ve always wanted that.

So just for fun I decided to clone PIB, build with the latest versions, and wrap it up as Web Component called <x-php>. In my opinion, the most exciting part is defining the contents of the PHP script inside of an actual HTML script tag and passing it along inside of the default slot. The MIME type I chose for the type attribute is debatable, but it seems to work in the browsers I’ve tested it in.

Try it out live in the browser or in an HTML document:

<x-php>
  <script type="text/php">
  <?php
    $it = new RecursiveIteratorIterator(
      new RecursiveDirectoryIterator('.')
    );

    foreach ($it as $name => $entry) {
      echo "$name <br/>";
    }
  </script>
</x-php>
<script>
  window.__XPHP_REMOTE_PACKAGE_BASE =
  'https://kherrick.github.io/x-php/assets/'
</script>
<script
  src="https://kherrick.github.io/x-php/dist/esm/XPHP.js"
  type="module"
></script>