Skip to content

Commit

Permalink
Add network support via fetch() (#724)
Browse files Browse the repository at this point in the history
## Description

This pull request introduces network support to the WordPress Playground
via the JavaScript fetch() API. By adding this support, the playground
will have the ability to execute HTTP requests, paving the way for
enhanced interactions with various APIs and services.

The implementation involves creating a custom transport that delegates
HTTP requests to the fetch() API. This custom transport handles network
requests, thus enabling communication outside the local environment.

Local testing will be a bit challenging until I deploy the updated
plugin-proxy.php to playground.wordpress.net

<img width="1241" alt="CleanShot 2023-10-26 at 00 29 07@2x"
src="https://github.com/WordPress/wordpress-playground/assets/205419/72ae0da5-daa1-4934-9c1f-774524a0ff5c">

## How does it work?

A new Requests transport for WordPress asks JavaScript to run fetch()
via `post_message_to_js()`. JavaScript runs the request and returns the
response ľ see
#732 for more
details of that mechanism

## Testing Instructions:

Testing this feature locally might be challenging until the updated
plugin-proxy.php is deployed to the playground environment. Here are
some basic steps to test the changes:

1. Open local Playground
2. Set up an mu-plugin that calls `wp_safe_remote_get()` to domain not
on this list: ['api.wordpress.org', 'w.org', 's.w.org']
3. Ensure that the requests are handled correctly and the expected
responses are received.
4. Test various types of requests (GET, POST, etc.) and verify the
correct response.
5. Check the functionality with different APIs (e.g., REST API, external
APIs).

cc @akirk @dmsnell @ellatrix
  • Loading branch information
adamziel committed Nov 8, 2023
1 parent 6e2a5bd commit a5fff02
Show file tree
Hide file tree
Showing 18 changed files with 1,589 additions and 1,456 deletions.
3 changes: 2 additions & 1 deletion packages/docs/site/docs/08-query-api/01-index.md
Expand Up @@ -24,8 +24,9 @@ You can go ahead and try it out. The Playground will automatically install the t
| Option | Default Value | Description |
| ---------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `php` | `8.0` | Loads the specified PHP version. Supported values: `5.6`, `7.0`, `7.1`, `7.2`, `7.3`, `7.4`, `8.0`, `8.1`, `8.2`, `latest` |
| `wp` | `latest` | Loads the specified WordPress version. Supported values: `5.9`, `6.0`, `6.1`, `6.2`, `6.3`, `latest`, `nightly`, `beta` |
| `wp` | `latest` | Loads the specified WordPress version. Supported values: `5.9`, `6.0`, `6.1`, `6.2`, `6.3`, `latest`, `nightly`, `beta` |
| `php-extension-bundle` | | Loads a bundle of PHP extensions. Supported bundles: `kitchen-sink` (for gd, mbstring, iconv, libxml, xml, dom, simplexml, xmlreader, xmlwriter) |
| `networking` | `yes` or `no` | Enables or disables the networking support for Playground. Defaults to `yes` |
| `plugin` | | Installs the specified plugin. Use the plugin name from the plugins directory URL, e.g. for a URL like `https://wordpress.org/plugins/wp-lazy-loading/`, the plugin name would be `wp-lazy-loading`. You can pre-install multiple plugins by saying `plugin=coblocks&plugin=wp-lazy-loading&…`. Installing a plugin automatically logs the user in as an admin |
| `theme` | | Installs the specified theme. Use the theme name from the themes directory URL, e.g. for a URL like `https://wordpress.org/themes/disco/`, the theme name would be `disco`. Installing a theme automatically logs the user in as an admin |
| `url` | `/wp-admin/` | Load the specified initial page displaying WordPress |
Expand Down
9 changes: 9 additions & 0 deletions packages/docs/site/docs/09-blueprints-api/03-data-format.md
Expand Up @@ -22,6 +22,9 @@ import BlueprintExample from '@site/src/components/Blueprints/BlueprintExample.m
"wp": "5.9"
},
"phpExtensionBundles": ["kitchen-sink"],
"features": {
"networking": true
},
"steps": [
{
"step": "login",
Expand Down Expand Up @@ -55,3 +58,9 @@ The `preferredVersions` property, unsurprisingly, declares the preferred of PHP
The `phpExtensionBundles` property is an array of PHP extension bundles to load. The following bundles are supported:

- `kitchen-sink`: Installs `gd`, `mbstring`, `iconv`, `libxml`, `xml`, `dom`, `simplexml`, `xmlreader`, `xmlwriter`

## Features

The `features` property is used to enable or disable certain features of the Playground. It can contain the following properties:

- `networking`: Defaults to `true`. Enables or disables the networking support for Playground. If enabled, `wp_safe_remote_get` and similar WordPress functions will actually use `fetch()` to make HTTP requests. If disabled, they will immediately fail instead.
2 changes: 1 addition & 1 deletion packages/php-wasm/universal/src/lib/universal-php.ts
Expand Up @@ -416,7 +416,7 @@ export interface IsomorphicLocalPHP extends RequestHandler {

export type MessageListener = (
data: string
) => Promise<string> | Promise<Uint8Array> | Promise<void> | string | void;
) => Promise<string | Uint8Array | void> | string | void;
interface EventEmitter {
on(event: string, listener: (...args: any[]) => void): this;
emit(event: string, ...args: any[]): boolean;
Expand Down

0 comments on commit a5fff02

Please sign in to comment.