GlotPress Playground as a blueprint

glotpress.ts

import { phpVars } from '@php-wasm/common';
import { ProgressTracker } from '@php-wasm/progress';
import {
	PlaygroundClient,
	runBlueprint,
	StepDefinition,
	Blueprint,
	connectPlayground,
} from '@wp-playground/client';
const query = new URL(document.location.href).searchParams;

export async function setupPlayground(
	playground: PlaygroundClient,
	progress: ProgressTracker
) {
	await playground.onDownloadProgress(
		progress.stage(0.4, 'Preparing WordPress').loadingListener
	);

	await playground.isReady();

	const blueprint = localGlotPressBlueprint('pl_PL', 'pl/default', true, 'friends');
	await runBlueprint(playground, blueprint, progress.stage(0.6));
}

function localGlotPressBlueprint(
	lang: string,
	langWithSlug: string,
	refresh?: boolean,
	plugin?: string,
	wp = false
): Blueprint {
	const languages: Record<string, string> = {
		'wp/dev': '',
		'wp/dev/admin': 'admin-',
		'wp-plugins/glotpress/dev': 'plugins/glotpress-',
		'wp-plugins/friends/dev': 'plugins/friends-',
	};
	const filters: Record<string, string> = {
		'wp-plugins/friends/dev': '&filters[status]=current_or_waiting',
	};
	const format = 'mo';

	const js = phpVars({
		lang,
		langWithSlug,
		plugin,
	});

	return {
		steps: [
			{ step: 'login', username: 'admin', password: 'password' },
			{
				step: 'mkdir',
				path: '/wordpress/wp-content/languages/plugins',
			},
			...Object.entries(languages).map<StepDefinition>(
				([urlPath, fsPath]) => {
					const remoteUrl = escape(
						`https://translate.wordpress.org/projects/${urlPath}/${langWithSlug}/export-translations?format=${format}${
							urlPath in filters ? filters[urlPath] : ''
						}`
					);
					return {
						step: 'writeFile',
						path: `/wordpress/wp-content/languages/${fsPath}${lang}.${format}`,
						data: {
							resource: 'url',
							caption: `Downloading ${fsPath}${lang}.${format}`,
							url: `/translate-proxy?format=${format}&${
								refresh ? 'refresh&' : ''
							}url=${remoteUrl}`,
						},
					};
				}
			),
			{
				step: 'setSiteOptions',
				options: {
					WPLANG: lang,
					permalink_structure: '/%year%/%monthnum%/%day%/%postname%/',
					gp_enable_local_translation: 1,
					gp_enable_inline_translation: 1,
				},
			},
			{
				step: 'updateUserMeta',
				meta: {
					show_welcome_panel: '0',
				},
				userId: 1,
			},
			{
				step: 'writeFile',
				path: '/wordpress/wp-content/mu-plugins/gp-sqlite.php',
				data: `<?php 
					add_filter('query', function( $query ) {
						return str_replace( ' BINARY ', ' ', $query);
					} );
				`,
			},
			{
				step: 'installPlugin',
				pluginZipFile: {
					resource: 'wordpress.org/plugins',
					slug: 'glotpress-local',
				},
			},
			plugin && {
				step: 'installPlugin',
				pluginZipFile: {
					resource: 'wordpress.org/plugins',
					slug: plugin,
				},
			},
			wp && {
				step: 'runPHP',
				code: `<?php
				include 'wordpress/wp-load.php';
				$request = new WP_REST_Request();
				$request->set_param( 'name', 'WordPress');
				$request->set_param( 'path', 'wp/dev');
				$request->set_param( 'locale', ${js.lang} );
				$request->set_param( 'locale_slug', 'default' );
				print_r( GP::$rest->create_local_project( $request ) );
				`,
				progress: {
					caption: 'Making WordPress translatable',
				},
			},
			plugin && {
				step: 'runPHP',
				code: `<?php
				include 'wordpress/wp-load.php';
				$request = new WP_REST_Request();
				$request->set_param( 'name', ${js.plugin});
				$request->set_param( 'path', 'wp-plugins/' + ${js.plugin} );
				$request->set_param( 'locale', ${js.lang} );
				$request->set_param( 'locale_slug', 'default' );
				print_r( GP::$rest->create_local_project( $request ) );
				`,
				progress: {
					caption: 'Making plugins translatable',
				},
			},
			{
				step: 'goTo',
				url: '/wp-admin/?welcome=0',
			},
		],
	};
}

vite.config.js

const proxy = {
	'^/plugin-proxy.*glotpress-local.*': {
		target: 'https://github.com',
		changeOrigin: true,
		secure: true,
		followRedirects: true,
		rewrite: (path: string) => {
			return '/GlotPress/GlotPress/archive/refs/heads/local-wasm.zip';
		},
	},
	'/plugin-proxy': {
		target: 'https://downloads.wordpress.org',
		changeOrigin: true,
		secure: true,
		rewrite: (path: string) => {
			const url = new URL(path, 'http://example.com');
			if (url.searchParams.has('plugin')) {
				return `/plugin/${url.searchParams.get('plugin')}`;
			} else if (url.searchParams.has('theme')) {
				return `/theme/${url.searchParams.get('theme')}`;
			}
			throw new Error('Invalid request');
		},
	},
	'/translate-proxy': {
		target: 'https://translate.wordpress.org',
		changeOrigin: true,
		secure: true,
		followRedirects: true,
		rewrite: (path: string) => {
			const url = new URL(path, 'http://example.com');
			if (url.searchParams.has('url')) {
				const url2 = new URL(url.searchParams.get('url')!);
				return url2.toString();
			}
			throw new Error('Invalid request');
		},
	},
};