Use transparent CORS proxy in Blueprint Builder (#2089)

## Motivation for the change, related issues The Blueprint builder doesn't use the CORS proxy transparently like the web app does. The reason is that the builder does not pass a CORS proxy URL to `startPlaygroundWeb()`. ## Implementation details This PR does a liberal conversion of builder.js to builder.ts and imports the virtual vite module `virtual:cors-proxy-url` to obtain the right CORS proxy URL depending on target. ## Testing Instructions (or ideally a Blueprint) - `npm run build` - Serve `dist/packages/playground/wasm-wordpress-net` via a local web server - Navigate to the Blueprint builder on the server - Run the following Blueprint and confirm that the Nautilus theme is installed and activated: ```json { "landingPage": "/wp-admin/themes.php", "steps": [ { "step": "login", "username": "admin" }, { "step": "installTheme", "themeZipFile": { "resource": "url", "url": "https://codeload.github.com/ndiego/nautilus/zip/refs/heads/main" } } ] } ``` - Play with Blueprint Builder and confirm that all appears to be in working order.
WordPress · Dec 17, 2024 · 8f9ef64 · 8f9ef64
1 parent ef3d482
commit 8f9ef64
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 18 deletions.
diff --git a/packages/playground/website/builder/builder.html b/packages/playground/website/builder/builder.html
@@ -11,7 +11,9 @@
 		<script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/ace.min.js"></script>
 		<script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/ext-language_tools.js"></script>
 		<link rel="stylesheet" type="text/css" href="style.css" />
-		<script src="builder.js" type="module"></script>
+		<script type="module">
+			import('./builder');
+		</script>
 	</head>
 	<body>
 		<div class="playground-wrapper">

diff --git a/...ges/playground/website/builder/builder.js → ...ges/playground/website/builder/builder.ts b/...ges/playground/website/builder/builder.js → ...ges/playground/website/builder/builder.ts
@@ -1,9 +1,10 @@
-const importStartPlaygroundWeb = import(
-	'https://playground.wordpress.net/client/index.js'
-);
-const fetchBlueprintSchema = fetch(
-	'https://playground.wordpress.net/blueprint-schema.json'
-).then((r) => r.json());
+// @ts-nocheck -- This is a minimal conversion from JS to TS for build purposes.
+// @TODO: Make this TS checked
+import { startPlaygroundWeb } from '@wp-playground/client';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import schema from '../../blueprints/public/blueprint-schema.json';
+// @ts-ignore
+import { corsProxyUrl } from 'virtual:cors-proxy-url';
 
 const deref = (obj, root) => {
 	if (!obj || typeof obj !== 'object' || !('$ref' in obj)) {
@@ -165,7 +166,6 @@ const getPrevSiblings = (editor, { column, row }) => {
 };
 
 const getStepProperties = async (stepType) => {
-	const schema = await fetchBlueprintSchema;
 	const reader = getSchemaReader(schema);
 	return reader.definitions.StepDefinition.oneOf
 		.filter((s) => s.properties.step['const'] === stepType)
@@ -175,7 +175,6 @@ const getStepProperties = async (stepType) => {
 };
 
 const completeStepProperty = async (stepType, prefix) => {
-	const schema = await fetchBlueprintSchema;
 	return schema.definitions.StepDefinition.oneOf
 		.filter((s) => s.properties.step['const'] === stepType)
 		.map((s) => Object.keys(s.properties))
@@ -185,7 +184,6 @@ const completeStepProperty = async (stepType, prefix) => {
 };
 
 const getStepSubProperties = async (stepType, resType, property) => {
-	const schema = await fetchBlueprintSchema;
 	const reader = getSchemaReader(schema);
 	return reader.definitions.StepDefinition.oneOf
 		.filter((s) => s.properties.step['const'] === stepType)
@@ -209,7 +207,6 @@ const completeStepSubProperty = async (
 	if (!resType && !subKey) {
 		return ['resource'];
 	}
-	const schema = await fetchBlueprintSchema;
 	const reader = getSchemaReader(schema);
 	return reader.definitions.StepDefinition.oneOf
 		.filter((s) => s.properties.step['const'] === stepType)
@@ -229,31 +226,27 @@ const completeStepSubProperty = async (
 };
 
 const completeStep = async (prefix) => {
-	const schema = await fetchBlueprintSchema;
 	const reader = getSchemaReader(schema);
 	return reader.definitions.StepDefinition.oneOf
 		.map((s) => s.properties.step['const'])
 		.filter((s) => s.substr(0, prefix.length) === prefix);
 };
 
 const completePhpVersion = async (prefix) => {
-	const schema = await fetchBlueprintSchema;
 	const reader = getSchemaReader(schema);
 	return reader.definitions.SupportedPHPVersion.enum.filter(
 		(s) => s.substr(0, prefix.length) === prefix
 	);
 };
 
 const completeRootKey = async (prefix) => {
-	const schema = await fetchBlueprintSchema;
 	const reader = getSchemaReader(schema);
 	return Object.keys(reader.definitions.Blueprint.properties).filter(
 		(s) => s[0] !== '$' && s.substr(0, prefix.length) === prefix
 	);
 };
 
 const completeFeature = async (prefix) => {
-	const schema = await fetchBlueprintSchema;
 	const reader = getSchemaReader(schema);
 	return Object.keys(
 		reader.definitions.Blueprint.properties.features.properties
@@ -311,7 +304,7 @@ const getCompletions = async (editor, session, pos, prefix, callback) => {
 				);
 				const json = await res.json();
 				json?.plugins.forEach((p) => {
-					var doc = new DOMParser().parseFromString(
+					const doc = new DOMParser().parseFromString(
 						p.name,
 						'text/html'
 					);
@@ -364,7 +357,7 @@ const getCompletions = async (editor, session, pos, prefix, callback) => {
 				);
 				const json = await res.json();
 				json?.themes.forEach((p) => {
-					var doc = new DOMParser().parseFromString(
+					const doc = new DOMParser().parseFromString(
 						p.name,
 						'text/html'
 					);
@@ -524,7 +517,6 @@ function getCurrentBlueprint(editor) {
 }
 
 let lastRun = 0;
-const startPlaygroundWeb = (await importStartPlaygroundWeb).startPlaygroundWeb;
 const runBlueprint = async (editor) => {
 	const currentRun = ++lastRun;
 	// Trash the old iframe and create a new one
@@ -552,6 +544,7 @@ const runBlueprint = async (editor) => {
 			iframe: playgroundIframe,
 			remoteUrl: `https://playground.wordpress.net/remote.html`,
 			blueprint: blueprintCopy,
+			corsProxy: corsProxyUrl,
 		});
 	} catch (error) {
 		if (currentRun === lastRun) {

diff --git a/packages/playground/website/tsconfig.app.json b/packages/playground/website/tsconfig.app.json
@@ -24,6 +24,8 @@
 		"src/**/*.jsx",
 		"src/**/*.ts",
 		"src/**/*.tsx",
+		"builder/**/*.ts",
+		"builder/**/*.tsx",
 		"demos/github.ts",
 		"demos/time-traveling.tsx",
 		"demos/peer.ts",