Welcome to the new PHPX!

[attitude]

👋 Hi everyone!

I hope Discussions to be the place to connect with other members of community. Please go ahead and:

• ask questions, share your findings and what you’re wondering about
• share ideas, comment and give feedback always respectfully
• engage with other community members and help each other grow

Here's my first shot but first some history 🙌

I come back and forth to this topic for the last 8 years. First I was looking, then waiting, then trying out own solutions, then failing the hard way and now trying again. There is a pattern, you see. I need this badly. I need to have JSX in PHP. I need to have it in a way that is not too opinionated, not too verbose and not too hard to maintain. I need it to be simple and straightforward. I need it to be PHP.

I miss JSX in PHP (so much) Evidence listed below.

UIML – the first try

In 2016 I created UIML, a XML-to-HTML convertor. As I imagined it, it ought to be the User Interface Markup Language. At least it was wha I hoped. Now I am glad it didn't. It was doing too much, it was too opinionated. Nowadays even I myself have troubles understand it. From this experience comes one thing came clear to me:

![IMPORTANT]
The translocation must be predictable.

Fun fact: At that time I was toying with Riot and felt too overwhelmed with all the React stuff going on to the point when I refused to ever learn React. Fast forward, just one year after I published UIML I started working with React Native 😅

UIML example XML input:

<gallery>
    <header>Very <em>nice</em> gallery</header>
    <slides>
        <image src="123.gif" alt="123" />
        <image src="456.gif" alt="456" />
        <image src="789.gif" alt="789" />
    </slides>
</gallery>

UIML example HTML output:

<div class="gallery">
    <div class="gallery__header">
        <h1>Very <em>nice</em> gallery</h1>
        </div>
    <div class="gallery__slides">
    <div class="gallery__slides__image" src="123.gif" alt="123">
        <img class="image-media" src="123.gif" alt="123">
        <p class="image-caption">123</p>
    </div>
    <div class="gallery__slides__image" src="456.gif" alt="456">
        <img class="image-media" src="456.gif" alt="456">
        <p class="image-caption">456</p>
    </div>
    <div class="gallery__slides__image" src="789.gif" alt="789">
        <img class="image-media" src="789.gif" alt="789">
        <p class="image-caption">789</p>
    </div>
  </div>
</div>

Link: https://github.com/attitude/uiml-php

Last PHPX is not this PHPX a.k.a. same name, not the same beast

I have to admit I fell in love with React in 2017 and coming back to PHP after some time I missed the expressiveness of it. Using {{ moustaches}} or %tags to do templating suddenly felt too verbose to do so and kind of indirect. See, besides the XML-like structure of JSX to get familiar with, rest was just regular JavaScript. In PHP it always felt like shifting away from PHP to create templates that are bearable to write and not too verbose.

The PHPX I created in 2021 could transform only simple JSX tags. It got few additional features that I liked from JavaScript: the logical expressions && and || that not necessarily produce boolean values. Unless you understand JavaScript and are OK with it, this also might feel like a shift away from PHP.

One case to support this decision was when I needed to write JSX for the SPA and PHP version for the server (this was way before RSC came along), the 1:1 relationship and logic was an expected feature than a setback:

A major shortcoming was that it was not possible to mix too much of regular PHP code within the template. The parsing and tokenization was too fragile for project to grow at this implementation.

Example of previous version of PHPX

JSX code...

return <h1>{children ?? ''}</h1>

...rewritten as PHPX template:

return <h1>{$children ?? ''}</h1>;
// Note the trailing `;` --------^

...and generated transformation:

<?php

namespace Phpx\Jsx;

return Jsx::jsx('h1', [
  'children' => [
    $children ?? '',
  ],
]);

Link: http://github.com/attitude/phpx-markup-expetiment

...fast forward to 2024

---

What can PHPX do for you now: The new PHPX

This tool was born out of sudden, rather random finding of token_get_all() tokenization of malformed PHP with JSX. I realized I could skip the manual and laborious task of tokenization of code that is not quite PHP with its own tools.

Take this code for example:

<?php <img />;

This PHPX tokenized with PhpToken::Tokenize yields this results:

Token name	Source code	Token ID
T_OPEN_TAG	<?php	394
<	<	60
T_STRING	img	313
T_WHITESPACE		397
/	/	47
>	>	62
;	;	59

You can play with it live at 3v4l site

The UNKNOWN tokens were simply reported as ASCII values instead. I tried even more complicated code and it shown promising tokenization results. Through few iterations of parsing the tokens into AST I finally settled on the way that produces really promising results:

PHPX turns this pseudo code:

$headline = <h1 className="title">Hello, {$name ?? ucfirst($type)}!</h1>;

into this:

$headline = ['$', 'h1', ['className'=>"title"], ['Hello, ', ($name ?? ucfirst($type)), '!']];

The idea is to keep the PHP code as is and transform JSX-like syntax into array structures – the X stands for extension to the language, providing custom transforms to the syntax that is not (yet) available or might never be.

If this goes well, it could do for PHP what Babel did for JavaScript — it could push the platform, experiment and create more diverse options.

Here are the input and output of a more complicated PHPX code transformed int PHP shown side by side:

The format is not yet finalized. As you can see I am experimenting in RSC-like wire format for the markup that could be serialized and possibly send over network. I am also tinkering with the idea of using this format to generate RSC components and serve them to the React client.

Since the server does not require any virtual DOM, transforming PHPX into function calls of createElement() or jsx() is not really necessary. We can skip this step and generate the final tree representation of the UI, transform PHPX code into PHP and only regenerate when file changes which would require to watch for file changes or use some caching when used to transform the code on the fly (which is not entirely impossible and possibly feasible option too).

PHPX consists of two main parts:

1. Parser produces AST, a step in-between that fills the gaps of PhpToken::tokenize()
2. Compiler that transforms AST into regular PHP code

Right now it can do most of what I expect of the library like this to do:

1. it keeps PHP code intact;
2. it extends PHP and transforms JSX-like markup into array structures;
3. it preserves formatting and invisible characters;
4. it is easy to compare with the original and spot any inconsistencies (easy to debug);
5. it extends PHP of template literals so it is possible to use ?? within the interpolated strings, e.g. Hello {$value ?? 'world'};
6. it is relatively small and uses internal function to tokenize code.

What would be great to add:

1. watching for file changes
2. on-disk caching
3. safety overview
4. integration and DX in editors

Head to /tests for more examples.

What PHPX is (and what it isn't and probably never will be)

1. In should stay minimal and simple tool to transform JSX-like syntax (similar to XHP).
2. It might or it might not support plugin interface to hook into transformation in the future.
3. It will not render the UI for you but it should be straightforward to do so.
4. The inputs are not protected against XSS, it is almost 1:1 representation of your code, nothing less (hopefully) and nothing more.
5. The DX in editor is non-existent, it would require to extend PHP language syntax with PHPX but as I dived into Hack extension and official VS Code PHP extension syntax, it not entirely impossible.

While limited, it exposes the AST and provides Compiler to transform the code but there is no limitation to what you can do with the AST yourself. It is not a framework, it is a tool to transform JSX-like syntax into PHP and it became a set of tools to work with PHP code in a way that is not possible with PHP itself.

To sum it up it is still early to tell whether this is something that could be accepted by the wider audience and I am really looking forward to your views on this topic.

Happy transforming!

@martin_adamko