Support building for additional remote origins (#122)

## Motivation for the change, related issues

Since we are running a Playground instance for A8C, we want to be able
to build `@wp-playground/client` to support that remote origin.

This PR:
- Supports specifying additional supported remote Playground origins
during build
- Updates the A8C package-for-self-hosting workflow to build
`@wp-playground/client` to support the origin
`https://wordpress-playground.atomicsites.blog`

## Implementation details

This PR:
- Adds an `additional-remote-origins.ts` module with a default empty
origin list.
- Adds a build-time to the Vite config to replace this module with a
custom list of origins specified via the ADDITIONAL_REMOTE_ORIGINS
environment variable.
- Defines the ADDITIONAL_REMOTE_ORIGINS environment variable in the
package-for-self-hosting workflow.

## Testing Instructions (or ideally a Blueprint)

- CI
- Test locally
- Run `ADDITIONAL_REMOTE_ORIGINS=https://test-this-pr npx nx build
playground-client`
- Grep `dist/packages/playground/client` for
"https://test-this-pr,http://another-remote-origin"
- Note that the origins are added to the built script as separate
strings in an array
- Run `ADDITIONAL_REMOTE_ORIGINS=this-origin-is-invalid nx build
playground-client`
    - Note that there is a build error due to invalid origin

Author: brandonpayton

.github/workflows/ci.yml

@@ -138,7 +138,13 @@ jobs:
               with:
                   submodules: true
             - uses: ./.github/actions/prepare-playground
-            - run: npx nx affected --target=build --parallel=3 --verbose
+            - run: |
+                  if ADDITIONAL_REMOTE_ORIGINS=invalid-origin npx nx build playground-client; then
+                    echo "The Playground client build should have failed due to an invalid additional origin."
+                    echo "The build does not appear to be applying ADDITIONAL_REMOTE_ORIGINS."
+                    exit 1
+                  fi
+                  npx nx affected --target=build --parallel=3 --verbose
 
     # Deploy documentation job
     deploy_docs:

.github/workflows/publish-self-hosted-package-release.yml

@@ -67,6 +67,8 @@ jobs:
                   git fetch --depth 1 origin tag "$LATEST_PACKAGE_VERSION_TAG" --no-tags
                   git checkout "$LATEST_PACKAGE_VERSION_TAG"
             - name: Build JS packages for self-hosting
+              env:
+                  ADDITIONAL_REMOTE_ORIGINS: 'https://wordpress-playground.atomicsites.blog'
               shell: bash
               run: npx nx run-many --all --target=package-for-self-hosting -- --hostingBaseUrl="$HOSTING_BASE_URL"
             - name: Build source tarball

packages/playground/client/src/additional-remote-origins.ts

@@ -0,0 +1,3 @@
+// This is a placeholder during development
+// and may be replaced during build by a vite plugin.
+export const additionalRemoteOrigins = [];

packages/playground/client/src/index.ts

@@ -31,6 +31,7 @@ import { consumeAPI } from '@php-wasm/web';
 import { ProgressTracker } from '@php-wasm/progress';
 import type { MountDescriptor, PlaygroundClient } from '@wp-playground/remote';
 import { collectPhpLogs, logger } from '@php-wasm/logger';
+import { additionalRemoteOrigins } from './additional-remote-origins';
 
 export interface StartPlaygroundOptions {
 	iframe: HTMLIFrameElement;
@@ -196,6 +197,7 @@ const validRemoteOrigins = [
 	'https://localhost',
 	'http://127.0.0.1',
 	'https://127.0.0.1',
+	...additionalRemoteOrigins,
 ];
 /**
  * Assert that the remote origin is likely compatible with this client library.

packages/playground/client/tsconfig.lib.json

@@ -10,5 +10,12 @@
 		"../blueprints/src/lib/steps/activate-plugin.ts",
 		"../blueprints/src/lib/compile.ts"
 	],
-	"exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+	"exclude": [
+		"src/**/*.spec.ts",
+		"src/**/*.test.ts",
+		// Avoid generating types for this file during the build.
+		// The module is not included in bundled build output,
+		// so its type definition should be excluded as well.
+		"src/additional-remote-origins.ts"
+	]
 }

packages/playground/client/vite.config.ts

@@ -9,6 +9,24 @@ import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { buildVersionPlugin } from '../../vite-extensions/vite-build-version';
 
+function validateOrigin(origin: string) {
+	try {
+		const url = new URL(origin);
+		if (url.href === `${origin}/`) {
+			return true;
+		}
+	} catch {
+		// Let exceptions fall through to the error below
+	}
+
+	throw new Error(`Invalid origin: '${origin}'`);
+}
+
+const additionalRemoteOriginsModulePath = join(
+	__dirname,
+	'src/additional-remote-origins.ts'
+);
+
 export default defineConfig({
 	cacheDir: '../../../node_modules/.vite/playground-client',
 	plugins: [
@@ -28,6 +46,32 @@ export default defineConfig({
 		// involve the remote-config virtual module, the bundler still needs to know
 		// what to do when it sees `import from "virtual:remote-config"`.
 		buildVersionPlugin('remote-config'),
+
+		// This plugin allows us to add additional remote origins during build.
+		// We could use a virtual module instead, but if we do, we'll need to
+		// add it to the vite config of every package that imports it, in order
+		// to load those packages in the vite dev server.
+		// By using this build transform, we only need to update this vite config.
+		{
+			name: 'replace-additional-remote-origins-during-build',
+			transform(code: string, id: string) {
+				if (id !== additionalRemoteOriginsModulePath) {
+					return code;
+				}
+				if (!process.env['ADDITIONAL_REMOTE_ORIGINS']) {
+					return code;
+				}
+
+				const additionalRemoteOrigins = process.env[
+					'ADDITIONAL_REMOTE_ORIGINS'
+				]
+					.split(',')
+					.filter(validateOrigin);
+				return `export const additionalRemoteOrigins = ${JSON.stringify(
+					additionalRemoteOrigins
+				)};`;
+			},
+		},
 	],
 
 	// Configuration for building your library.

packages/vite-extensions/vite-list-assets-required-for-offline-mode.ts

@@ -12,7 +12,7 @@ const patternsToNotCache = [
 	'/README.md',
 	'/.DS_Store',
 	'/index.cjs',
-	'/index.d.ts',
+	/\/.*\.d\.ts$/, // No type declarations are needed at runtime.
 	/\/lib\/.*/, // Remote lib files
 	/\/test-fixtures\/.*/, // Test fixtures
 	'/index.js',