Serve the Playground client.js library on playground.wordpress.net

[adamziel]

This is an attempt to develop a strategy for consuming Playground.

• Using the latest @wp-playground/client package from unpkg.com might break the existing sites when the methods change.
• Using a fixed version might break the existing sites if the remote API changes.
• Versioning the remote.html API seems like an overly complex maintenance burden.

Let's just have Playground ship its own API client that's compatible with the current version of Playground. It still doesn't address breaking API changes, but that is a separate discussion involving defining stable and unstable APIs.

This will involve an adjustment to the playground.wordpress.net build pipeline:

wordpress-playground/packages/playground/website/project.json

Lines 12 to 25 in 6f4f269

	"build:wasm-wordpress-net": {
	"executor": "nx:run-commands",
	"options": {
	"commands": [
	"rimraf --no-preserve-root ./wasm-wordpress-net",
	"mkdir ./wasm-wordpress-net",
	"cp -r ./blueprints/blueprint-schema.json ./wasm-wordpress-net/",
	"cp -r ./remote/* ./wasm-wordpress-net/",
	"cp -r ./website/* ./wasm-wordpress-net/",
	"cat ./remote/.htaccess > ./wasm-wordpress-net/.htaccess"
	],
	"cwd": "dist/packages/playground",
	"parallel": false
	},

Done is:

• Running nx build:wasm-wordpress-net playground-website yields a build where the client.js library is exposed
• Any references to client.js coming from unpkg in this repo are updated to talk about https://playground.wordpress.net/client.js instead.

[seanmorris]

@adamziel Need clarification on recommended caching strategy:

The .htaccess file shipped in the remote package ensures the browsers won't cache client.js once its contents change

[seanmorris]

https://github.com/WordPress/wordpress-playground/pull/773/files#diff-34bb410e41a181987ce50ed5bbfc11bddfc830fdd514c98ac8dc1a072e9dd778R19

[adamziel]

Documenting a bit from a conversation: I will create a file on playground.wordpress.net, load it in the browser, update it, and confirm the Apache caching strategy for static files is intact and the new version is automatically used by the browsers.

[seanmorris]

Capturing for reference. These are the headers sent by unpkg for the URL https://unpkg.com/@wp-playground/client@0.3.1/index.js

Access-Control-Allow-Origin: *
Age: 165293
Cache-Control: public, max-age=31536000
Cf-Cache-Status: HIT
Cf-Ray: 82cc6a26995d41b4-EWR
Content-Encoding: br
Content-Type: application/javascript; charset=utf-8
Date: Mon, 27 Nov 2023 18:25:35 GMT
Etag: W/"438bf-jeo2sIU5OdkBr/TOSmhwdCRQ1TY"
Fly-Request-Id: 01HG42TRM8ZHS39QRFHPVT6SH5-lga
Last-Modified: Sat, 26 Oct 1985 08:15:00 GMT
Server: cloudflare
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
Vary: Accept-Encoding
Via: 1.1 fly.io
X-Content-Type-Options: nosniff

[adamziel]

With #989 in place, this is now done.