Add terminal to playground site #161

swissspidy · 2023-03-18T13:06:27Z

…nto wp-cli

adamziel · 2023-03-27T13:17:31Z

Thank you @swissspidy ! GitHub is going through some outage and mostly not accepting my comments so I'll review it tomorrow

adamziel · 2023-03-28T16:37:39Z

packages/php-wasm/compile/build-assets/php_wasm.c

@@ -200,7 +200,7 @@ const char WASM_HARDCODED_INI[] =
 	"always_populate_raw_post_data = -1\n"
 	"upload_max_filesize = 2000M\n"
 	"post_max_size = 2000M\n"
-	"disable_functions = proc_open,popen,curl_exec,curl_multi_exec\n"
+	"disable_functions = proc_open,popen,curl_exec,curl_multi_exec,shell_exec,proc_close\n"


Suggested change

"disable_functions = proc_open,popen,curl_exec,curl_multi_exec,shell_exec,proc_close\n"

"disable_functions = proc_open,popen,curl_exec,curl_multi_exec,proc_close\n"

It's possible to provide a custom JavaScript handler for shell_exec so let's only soft-disable it in php.ini. This way it's possible to re-enable it in runtime.

Is the same possible also for proc_open? Overriding that one would be needed for making Behat tests work.

Not at the moment. shell_exec was easier to handle because it returns the output as a string. proc_open returns a resource and exposes low-level process calls and will require more effort. Definitely possible to support, though.

adamziel · 2023-03-28T16:41:16Z

packages/php-wasm/compile/build.js

+		WITH_LIBXML: 'yes',
+		WITH_MBSTRING: 'yes',


Building with libxml adds 1MB to the bundle size, but I realize it's critical for this PR to be useful 🤔

I need to think a bit more about this. Emscripten seems to support runtime dynamic linking, but it's a small project in itself I don't want to block this PR on it. Maybe an additional MB wouldn't be that bad for now.

adamziel · 2023-03-28T16:43:05Z

Only got so far today. I'll continue reviewing tomorrow.

adamziel · 2023-03-29T15:23:44Z

packages/playground/compile-wordpress/Dockerfile

@@ -22,6 +22,32 @@ RUN wget -O wp.zip $WP_ZIP_URL && \
    unzip -q wp.zip && \
    rm wp.zip

+# Run extra steps for the develop branch


The more these Dockerfiles grow the more I want to migrate to a Makefile down the road. Nothing blocking here, just sharing.

adamziel · 2023-03-29T15:27:01Z

packages/playground/compile-wordpress/Dockerfile

@@ -37,40 +63,57 @@ RUN git clone https://github.com/WordPress/sqlite-database-integration.git \
    # Required by the SQLite integration plugin:
    cp wordpress/wp-config-sample.php wordpress/wp-config.php

+# Enable the SQLite support for the src folder in wordpress-develop:
+
+RUN if [[ -d wordpress-develop-trunk ]] ; then \


This RUN is mostly the same as the one above, perhaps merging them and exporting a PATH_PREFIX inside of an if/else would make it shorter? I'm happy to fiddle with that if you invite me to your fork.

You should already have access according to the "Allow edits by maintainers" checkbox, so feel free to make any edits

adamziel · 2023-03-29T15:30:40Z

packages/playground/compile-wordpress/Dockerfile

@@ -129,15 +174,44 @@ RUN ls -la && \
    exit 'WordPress installation failed'; \
    fi

+# === Run WordPress Installer  for the src install ===
+#RUN if [[ -d wordpress-develop-trunk ]] ; then \


Is this code path used in wordpress-develop build? If so, https://github.com/WordPress/wordpress-playground/pull/161/files#r1152126565 it could likely be merged with the RUN above into a single RUN. Again, I'm happy to play with it.

adamziel · 2023-03-29T15:33:28Z

packages/playground/compile-wordpress/build.js

@@ -3,6 +3,11 @@ import { spawn } from 'child_process';
 import yargs from 'yargs';

 const presets = {
+  develop: {


Nit: formatting. Running nx format and npm run lint should fix it automatically.

This will keep coming up in other PRs so I should just add a pre-commit hook. I really dislike lint-staged because of how many times it put me in a detached HEAD state, but Husky alone should suffice since nx is smart enough to ignore unchanged files.

adamziel · 2023-03-29T15:33:40Z

packages/playground/compile-wordpress/build.js

@@ -3,6 +3,11 @@ import { spawn } from 'child_process';
 import yargs from 'yargs';

 const presets = {
+  develop: {
+    KEEP_THEME: 'twentytwentythree',
+    WP_ZIP_URL: 'https://github.com/WordPress/wordpress-develop/archive/refs/heads/trunk.zip',


adamziel · 2023-03-29T15:50:40Z

packages/playground/website/src/components/playground-viewport/CodeMirror.tsx

+        return null;
+      }
+
+      const extensions = {


For posterity: Later on this and #168 may converge into a single CodeMirror. For now, let's ship both.

adamziel · 2023-03-29T15:52:13Z

packages/playground/website/src/components/terminal-button/index.tsx

+
+              function proc_open( $command, $descriptor_spec, $pipes ) { return false; }
+
+              define('STDIN', fopen('php://stdin', 'rb'));


Future idea: provide php.define( name, value ) and php.defineStdio()

adamziel · 2023-03-29T15:54:29Z

packages/playground/website/src/components/terminal-button/index.tsx

+              scriptPath: '/wordpress/run-tests.php'
+            });
+
+            const decodedOutput = new TextDecoder().decode(output.body);


Next iteration idea: Stream the output live. This will require a function like php.outputMode( 'file' | 'callback' )

adamziel · 2023-03-29T15:58:29Z

packages/playground/website/src/components/terminal-button/index.tsx

+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import css from './style.module.css';
+import {PlaygroundClient} from '@wp-playground/playground-remote';
+import {Terminal} from 'xterm';


64kb uncompressed, maybe import asynchronously? Vite will handle code splitting when it finds import('xterm')

adamziel · 2023-03-29T15:59:31Z

packages/playground/website/src/components/terminal-button/index.tsx

+        contentLabel='This is a dialog window which overlays the main content of the page.'
+        onRequestClose={closeModal}
+        style={{
+          content: {


Note to self: Extract a generic PlaygroundModal component to avoid duplicating these styles.

adamziel · 2023-03-29T15:59:59Z

packages/playground/website/src/components/terminal-button/style.module.css

@@ -0,0 +1,22 @@
+.btn {


Note to self: Extract a generic Button component to avoid copying and pasting the same CSS

adamziel · 2023-03-29T16:00:23Z

packages/playground/website/src/lib/hooks.ts

@@ -37,15 +37,11 @@ interface UsePlaygroundOptions {
 	onConnected?: (playground: PlaygroundClient) => Promise<void>;
 	onConnectionTimeout?: () => void;
 	timeout?: number;
-	php?: string;


adamziel · 2023-03-29T16:23:51Z

It reads well, thank you @swissspidy! I left some notes for now and some future ideas. I'm happy to tackle any of these, too. I tried running the PR locally but Vite complained about the missing wp-develop.js. I commented the import and then it gave me an FS Error 44 – must be something with paths. Perhaps I just need to rebuild WordPress.

Not sure what exactly you had in mind with editor.html, but I did some cleanup now at least to make the PR more reviewable.

From reading the code, that's exactly what I had in mind. Thank you! Having a separate entrypoint keeps the code editor in the repo, enables using it on demand, and helps incubate it over time.

swissspidy · 2023-03-29T16:57:49Z

Thanks for your thorough review!

I'm happy to tackle any of these, too.

I'll be on vacation soon, so I'll take any help I can get with this :)

I commented the import and then it gave me an FS Error 44 – must be something with paths.

Docroot is right now hardcoded to /wordpress/build, so this would need reverting. And yeah maybe a rebuild too 🤷

adamziel · 2023-03-30T08:30:11Z

I'll be on vacation soon, so I'll take any help I can get with this :)

Oh yay, have fun! Would you please invite me to your fork? Otherwise I'll have to start a new PR to be able to make changes.

Docroot is right now hardcoded to /wordpress/build, so this would need reverting. And yeah maybe a rebuild too 🤷

Oh that's right, thank you

swissspidy · 2023-03-30T08:37:01Z

Would you please invite me to your fork?

Done!

@swissspidy

Adds `wp-cli` support in the browser! ![CleanShot 2024-01-22 at 15 13 38@2x](https://github.com/WordPress/wordpress-playground/assets/205419/4f0a352f-8e2f-4961-b0c4-a9e88804931e) This PR brings parts of #161 by @swissspidy into `trunk` to enable using `wp-cli` in the browser. ## Codebase changes * `setSapiName` method for PHP. `wp-cli` expects to see the exact string `"cli"` as the SAPI name. * All PHP versions are now built with phar support. * `js_open_process` is asynchronous via Asyncify. This is to enable calling `setSpawnHandler(handler)` from the parent site to set a handler in an asynchronous web worker. Unfortunately, using the Comlink messaging library is challenging with complex objects like spawn handlers so this PR ships a workaround where spawn handlers are passed as strings and `eval()`-ed in the worker. This shouldn't have any security implications as Playground enables evaluating arbitrary code by definition. * `proc_open` waits for the process to spawn, and `proc_close` waits for the process to die. This is necessary to support the `wp-cli` behavior of piping its output through a pager program (like `cat` or `less -S`). ## Follow-up work * Remove `eval()` from `setSpawnHandler(handler)`. Setting spawn handler works in Node.js where PHP runs synchronously in the same process, but these spawn handlers are challenging to transfer over `postMessage` as they're essentially composite EventEmitters that need to accept input inside the Worker process, handle it in the client process, and transmit it back to the worker process. Intuitively, it would be pretty easy if we used `MessagePort` directly. It seems like `Comlink` as an abstraction layer makes things much easier to a point, since we can magically call functions on objects living in another thread, but there's a boundary beyond which Comlink makes these API interactions more difficult. cc @danielbachhuber @schlessera

swissspidy · 2024-01-22T16:38:28Z

Superseded by ae8ec6a

swissspidy and others added 30 commits March 18, 2023 14:05

Initial terminal commit

cdebaa8

Add wp-cli phar

412a82a

Add wp-cli.phar to wp.data

8998613

debugging wp-cli phar access/output

18e035f

Try allow running arbitrary commands

b6f6fd2

Actually run commands

774d6b4

fake cat command

91cfe71

Make it work

e14ef90

Merge branch 'trunk' into wp-cli

3e3975d

Add phpunit.phar

6080a88

Merge branch 'wp-cli' of github.com:swissspidy/wordpress-playground i…

12a4ce2

…nto wp-cli

Fix phpunit.phar and add beaht

7302a23

Switch to phpunit version 9

8d68252

Remove shebang lines from phar files

ce03350

Enable libxml for php in the browser

3b14063

Disable shell_exec and proc_close

80f37ab

Slightly improve styling

e242187

Rebuild php 8.1

391f6fb

Remove now obsolete wp-cli.phar

b27d61a

Add hacky phpunit support

a4b1f6f

Compile all php versions with libxml

3526780

Add basic code editor

07edc73

Merge branch 'trunk' into wp-cli

5642b34

Change documentRoot for wp develop

8f51beb

Develop version

33106af

Work around Asyncify issue

2dafbda

Make develop branch working

727db2a

Move editor and terminal to modals

8f356fa

update terminal

d3b7d2a

Dockerfile for wordpress-develop

da45339

adamziel reviewed Mar 28, 2023

View reviewed changes

adamziel reviewed Mar 29, 2023

View reviewed changes

adamziel mentioned this pull request May 15, 2023

wp-now: Make it possible to use WP-CLI WordPress/playground-tools#25

Open

adamziel mentioned this pull request Nov 24, 2023

Support popular PHP libraries and tools #766

Open

adamziel mentioned this pull request Jan 18, 2024

Support wp-cli in the browser #957

Merged

swissspidy closed this Jan 22, 2024

This was referenced Feb 29, 2024

Spawning PHP sub-processes in Web Workers #1069

Merged

PHP sub-processes: Source stderr output from php://stderr, not /tmp/stderr #1071

Open

swissspidy deleted the wp-cli branch March 10, 2024 05:13

WordPress deleted a comment Mar 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add terminal to playground site #161

Add terminal to playground site #161

swissspidy commented Mar 18, 2023 •

edited

Loading

adamziel commented Mar 27, 2023

adamziel Mar 28, 2023 •

edited

Loading

swissspidy Mar 28, 2023

adamziel Mar 29, 2023 •

edited

Loading

adamziel Mar 28, 2023

adamziel commented Mar 28, 2023

adamziel Mar 29, 2023

adamziel Mar 29, 2023

swissspidy Mar 29, 2023

adamziel Mar 29, 2023

adamziel Mar 29, 2023

adamziel Mar 29, 2023

adamziel Mar 29, 2023

adamziel Mar 29, 2023

adamziel Mar 29, 2023 •

edited

Loading

adamziel Mar 29, 2023

adamziel Mar 29, 2023

adamziel Mar 29, 2023

adamziel Mar 29, 2023

adamziel Mar 29, 2023

adamziel commented Mar 29, 2023

swissspidy commented Mar 29, 2023

adamziel commented Mar 30, 2023 •

edited

Loading

swissspidy commented Mar 30, 2023

swissspidy commented Jan 22, 2024

	"disable_functions = proc_open,popen,curl_exec,curl_multi_exec,shell_exec,proc_close\n"
	"disable_functions = proc_open,popen,curl_exec,curl_multi_exec,proc_close\n"


		function proc_open( $command, $descriptor_spec, $pipes ) { return false; }

		define('STDIN', fopen('php://stdin', 'rb'));

Add terminal to playground site #161

Add terminal to playground site #161

Conversation

swissspidy commented Mar 18, 2023 • edited Loading

adamziel commented Mar 27, 2023

adamziel Mar 28, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adamziel Mar 29, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adamziel commented Mar 28, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adamziel Mar 29, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adamziel commented Mar 29, 2023

swissspidy commented Mar 29, 2023

adamziel commented Mar 30, 2023 • edited Loading

swissspidy commented Mar 30, 2023

swissspidy commented Jan 22, 2024

swissspidy commented Mar 18, 2023 •

edited

Loading

adamziel Mar 28, 2023 •

edited

Loading

adamziel Mar 29, 2023 •

edited

Loading

adamziel Mar 29, 2023 •

edited

Loading

adamziel commented Mar 30, 2023 •

edited

Loading