From ff15c19bf7bda3924f1dadae3bccf7a77b2e11f9 Mon Sep 17 00:00:00 2001
From: Pookie717 <PookieMage717@outlook.com>
Date: Fri, 14 Oct 2022 11:59:15 -1000
Subject: [PATCH] Rewrite /scope:.+/<URL> to just <URL>
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Related to https://github.com/WordPress/wordpress-wasm/issues/42

This commit implements the URL rewrite with:

* A liveServer middleware for local dev
* A .htaccess file for apache production setups

Documenting this behavior in a visible place will be critical for mass
adoption of this project.

Nested iframes with src="about:srcdoc" are not controlled by the
parent's frame ServiceWorker. This is a bug in Chrome and potentially
other Chromium-based browser.

This is problematic because WordPress site editor is rendered in one
such iframe and it loads a bunch of stylesheets using a link tag like:

    <link rel="stylesheet" href="/scope:<scope>/<URL>" />

The /scope:<scope>/ part of the URL does not actually exist on the
server – it's a WordPress instance scope introduced to make WASM
WordPress usable in multiple browser tabs. Learn more at https://github.com/WordPress/wordpress-wasm/pull/31

The point is – these stylesheet requests bypass the ServiceWorker and
are actually sent to the server where they get a 404 response. This
effectively breaks the site editor.

We cannot re-route these requests in a ServiceWorker, but we can do it
on the server. That's what this commit is.

Unfortunately this commit won't solve the problem in setups based on nginx
and other server software – let's follow it up with a documentation
update.
---
 dist-web/.htaccess |  4 ++++
 liveServer.js      | 22 ++++++++++++++++++++++
 package.json       |  3 +--
 3 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 dist-web/.htaccess
 create mode 100644 liveServer.js

diff --git a/dist-web/.htaccess b/dist-web/.htaccess
new file mode 100644
index 00000000..aa15d6f4
--- /dev/null
+++ b/dist-web/.htaccess
@@ -0,0 +1,4 @@
+AddType application/wasm .wasm
+
+RewriteEngine on
+RewriteRule ^scope:.*?/(.*)$ $1 
diff --git a/liveServer.js b/liveServer.js
new file mode 100644
index 00000000..8c613bb4
--- /dev/null
+++ b/liveServer.js
@@ -0,0 +1,22 @@
+const liveServer = require('live-server');
+
+liveServer.start({
+	port: 8777,
+	root: __dirname + '/dist-web',
+	open: '/wordpress-browser.html',
+	file: 'wordpress-browser.html',
+	middleware: [
+		(req, res, next) => {
+			if (req.url.startsWith('/scope:')) {
+				req.url = '/' + req.url.split('/').slice(2).join('/');
+			}
+			next();
+		},
+	],
+});
+
+liveServer.start({
+	port: 8778,
+	root: __dirname + '/dist-web',
+	open: false
+});
diff --git a/package.json b/package.json
index 4098174b..9c571670 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,7 @@
     "dev:web": "npm-run-all --parallel dev:web:*",
     "dev:web:app": "npm run build:web:app -- --watch",
     "dev:web:html": "chokidar --initial --silent \"./src/web/*.html\" -c \"cp src/web/*.html dist-web/\"",
-    "dev:web:serve": "npx live-server ./dist-web --port=8777 --open=wordpress.html",
-    "dev:web:serve-iframe-worker": "npx live-server ./dist-web --port=8778 --no-browser",
+    "dev:web:serve": "node liveServer.js",
     "dev:node": "node ./src/node/command.mjs",
     "build": "npm run build:web",
     "build:web": "npm-run-all --parallel build:web:*",