Playground npm package

[adamziel]

Description

It would be great to build custom apps with WordPress Playground like this:

import { Playground } from '@wordpress/playground';

function MyApp() {
    const playground = useRef( null );
    
    function login() {
        await playground.navigate( '/wp-login.php' );
        await playground.navigate( '/wp-login.php', {
		method: 'POST',
		data: {
			log: 'admin',
			pwd: 'password',
			rememberme: 'forever',
		}
        } );
    }
    
    return (
        <div>
            <h2>My custom app</h2>
            <button onClick={ login }>Login as admin</button>
            <Playground 
                 php="7.4"
                 wp="6.0"
                 plugins={{"gutenberg": "latest"}}
                 onNavigate={ handleNewUrl }
                 ref={ playground } />
        </div>
    );
}

Technically, all these features are already implemented. There's just no package with neat API to import.

[dgwyer]

1000% yes to this!

[eliot-akira]

Just a thought.. I wonder if it'd be useful (or practical) to export lower-level primitives of the Playground, without dependency on React or the UI layer in general.

The reason I ask is, when I was experimenting with the "dual pane" idea, I had to create a new entry point for Rollup in src/wordpress-playground that's different from index.tsx, to be able to remix existing features from other files in the folder/package.

In pseudo-code, I picture something like:

import { bootWordPress } from '@wordpress/playground/boot'
import { login } from '@wordpress/playground/wp-macros'

const workerThread = await bootWordPress(config)

await login(workerThread, 'admin', 'password')

That might make it easier for people to build their own playground interfaces, for example using Web Components.

[adamziel]

@eliot-akira a generic Playground client package is now available!

import { connectPlayground } from '@wp-playground/client';

const client = await connectPlayground(
    document.getElementById('wp')! as HTMLIFrameElement,
    `https://wasm.wordpress.net/remote.html`
);
await client.isReady();
await client.goTo('/wp-admin/');

const result = await client.run({
    code: '<?php echo "Hi!"; ',
});
console.log(new TextDecoder().decode(result.body));

Boarding a plane now, I’ll write another comment here later on.

Edit: I forgot to follow-up and what I had to say :D

[eliot-akira]

Wonderful! I saw the pull request for Playground Public API, separating the functional layers of PHP WASM, the API with convenient wrapper for WebWorker interaction, and the UI as its own module that uses the API. It really clarified the separation of concerns, and defined the building blocks that the public can use to create their own playgrounds.

And the related code refactoring to use NX for package build orchestration, it makes a lot of sense. Looked like a huge overhaul to bring all the work so far into a new level of logical organization.

It's been so educational to watch the evolution of this project.

[adamziel]

I'm glad you like it! Does it help with the dual-pane use-case you've mentioned?