Uses npm for website, hosts playground runner on https://isolated-playground.github.io for better isolation. (#5034)

.github/workflows/website.yml

@@ -44,15 +44,15 @@ jobs:
 
       - name: Install website node modules
         working-directory: website
-        run: yarn install --frozen-lockfile
+        run: npm ci
 
       - name: Install most recent version of monaco-editor
         working-directory: website
-        run: yarn add monaco-editor
+        run: npm install monaco-editor
 
       - name: Build website
         working-directory: website
-        run: yarn run build
+        run: npm run build
 
       - name: Setup Pages
         uses: actions/configure-pages@v5

website/package.json

@@ -25,7 +25,7 @@
 		"mini-css-extract-plugin": "^2.6.1",
 		"mobx": "^5.15.4",
 		"mobx-react": "^6.2.2",
-		"monaco-editor": "^0.53.0",
+		"monaco-editor": "^0.55.0-dev-20251008",
 		"react": "^17.0.2",
 		"react-bootstrap": "^2.4.0",
 		"react-dom": "^17.0.2",

website/src/website/pages/playground/Preview.tsx

@@ -9,6 +9,30 @@ import {
 } from "../../../shared";
 import { Button } from "react-bootstrap";
 
+const jsSrc = `
+try {
+	const baseUrl = ${JSON.stringify(document.baseURI.toString())};
+	const base = document.createElement('base');
+	base.href = baseUrl;
+	document.head.appendChild(base);
+
+	const scriptRuntime = document.createElement('script');
+	scriptRuntime.src = './runtime.js';
+	document.head.appendChild(scriptRuntime);
+
+	const script = document.createElement('script');
+	script.src = './playgroundRunner.js';
+	document.head.appendChild(script);
+
+	const link = document.createElement('link');
+	link.href = './playgroundRunner.css';
+	link.rel = 'stylesheet';
+	document.head.appendChild(link);
+} catch (e) {
+ 	console.error(e);
+}
+`;
+
 @observer
 export class Preview extends React.Component<{
 	model: PlaygroundModel;
@@ -54,7 +78,9 @@ export class Preview extends React.Component<{
 					sandbox="allow-scripts allow-modals"
 					frameBorder={0}
 					ref={this.handleIframe}
-					src="./playgroundRunner.html"
+					src={`https://isolated-playground.github.io/?jsSrcBase64=${btoa(
+						jsSrc
+					)}`}
 				/>
 			</div>
 		);

website/webpack.config.ts

@@ -90,11 +90,6 @@ module.exports = {
 			filename: "playground.html",
 			templateContent: getHtml(),
 		}),
-		new HtmlWebpackPlugin({
-			chunks: ["playgroundRunner"],
-			filename: "playgroundRunner.html",
-			templateContent: getHtml(),
-		}),
 		new HtmlWebpackPlugin({
 			chunks: ["index"],
 			filename: "docs.html",