Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ If you find a bug or have a feature request, please [open an issue](https://gith

For information on setting up your development environment for contributing code, see the [Code Contributions](./docs/code-contributions.md).

For testing Studio with local WordPress Playground packages, see [Testing with Local Playground](./docs/testing-with-local-playground.md).

We are truly grateful for any pull requests you open, and we assure you of our welcoming and respectful approach. We will review and consider all pull requests, valuing the diverse contributions, but we don’t guarantee that all proposed changes will be merged into the core.

The most desirable pull requests are:
Expand Down
110 changes: 110 additions & 0 deletions docs/testing-with-local-playground.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
# Testing with Local Playground Packages

When developing features that require changes to WordPress Playground packages (`@wp-playground/*` or `@php-wasm/*`), you can test Studio with locally built Playground packages.

## Prerequisites

Clone the WordPress Playground repository alongside the Studio repository:

```
Code/
├── studio/
└── wordpress-playground/
```

**Important:** Make sure to initialize git submodules:

```bash
cd /path/to/wordpress-playground
git submodule update --init --recursive
```

## Setup Steps

### 1. Build Playground packages

```bash
cd /path/to/wordpress-playground
npm install
npm run build
```

### 2. Update Studio's package.json

Replace the existing Playground dependencies with local file references. Find and update these entries in `package.json`:

```json
{
"dependencies": {
"@php-wasm/fs-journal": "file:../wordpress-playground/dist/packages/php-wasm/fs-journal",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it also make sense to reorganize nodes in the package.json to make the replacement easier?

"@php-wasm/logger": "file:../wordpress-playground/dist/packages/php-wasm/logger",
"@php-wasm/node": "file:../wordpress-playground/dist/packages/php-wasm/node",
"@php-wasm/node-polyfills": "file:../wordpress-playground/dist/packages/php-wasm/node-polyfills",
"@php-wasm/progress": "file:../wordpress-playground/dist/packages/php-wasm/progress",
"@php-wasm/scopes": "file:../wordpress-playground/dist/packages/php-wasm/scopes",
"@php-wasm/stream-compression": "file:../wordpress-playground/dist/packages/php-wasm/stream-compression",
"@php-wasm/universal": "file:../wordpress-playground/dist/packages/php-wasm/universal",
"@php-wasm/util": "file:../wordpress-playground/dist/packages/php-wasm/util",
"@wp-playground/blueprints": "file:../wordpress-playground/dist/packages/playground/blueprints",
"@wp-playground/cli": "file:../wordpress-playground/dist/packages/playground/cli",
"@wp-playground/common": "file:../wordpress-playground/dist/packages/playground/common",
"@wp-playground/wordpress": "file:../wordpress-playground/dist/packages/playground/wordpress"
}
}
```

Note: Some of these packages may not exist in Studio's current `package.json` - add them as new entries.

### 3. Update Playground's node_modules symlinks

Playground's built packages import other packages from `node_modules`. By default, these point to source directories, but we need them to point to the built `dist/` packages.

Run this from the wordpress-playground root:

```bash
cd /path/to/wordpress-playground
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if we added this script to tools/scripts/ in the Playground repository, and made it available as NPM command in package.json?

@adamziel any thoughts?


for pkg in node-polyfills logger util progress fs-journal stream-compression scopes universal node web web-service-worker cli xdebug-bridge; do
if [ -d "dist/packages/php-wasm/$pkg" ]; then
rm -rf "node_modules/@php-wasm/$pkg" && ln -s "../../dist/packages/php-wasm/$pkg" "node_modules/@php-wasm/$pkg"
fi
done

for pkg in cli blueprints wordpress common storage client remote components wordpress-builds; do
if [ -d "dist/packages/playground/$pkg" ]; then
rm -rf "node_modules/@wp-playground/$pkg" && ln -s "../../dist/packages/playground/$pkg" "node_modules/@wp-playground/$pkg"
fi
done
```

### 4. Install dependencies in Studio

```bash
cd /path/to/studio
npm install
```

### 5. Start Studio

```bash
npm start
```

## Development Workflow

After making changes to Playground:

1. Rebuild the changed package(s):
```bash
cd /path/to/wordpress-playground
npx nx build playground-cli # or other package name
```

2. Restart Studio (type `rs` in the terminal or restart `npm start`)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't make the rs command work, and I needed to restart npm start.


## Reverting to npm Packages

To go back to using the published npm packages:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we also include instructions showing how to revert changes in Playground repo?


1. Restore the original version numbers in `package.json` (use `git checkout package.json`)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I needed to revert package-lock.json, too. In the other case, it kept installing symlinked packages.

2. Run `npm install`