Lint

packages/playground/website-extras/src/php-playground/components/Layout.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { AsyncWritableFilesystem } from '@wp-playground/components';
 import clsx from 'clsx';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import type { ImperativePanelHandle } from 'react-resizable-panels';
@@ -16,6 +17,53 @@ import { TerminalWrapper } from './terminal/Terminal';
 import { useAppSelector } from '../hooks';
 import AddressBar from '../../components/address-bar';
 import { DEFAULT_WORKSPACE_DIR } from '../constants';
+import type { PlaygroundClient } from '@wp-playground/remote';
+
+/**
+ * Wraps a PlaygroundClient to satisfy AsyncWritableFilesystem interface
+ * which requires EventTarget methods.
+ */
+class ClientFilesystemWrapper
+	extends EventTarget
+	implements AsyncWritableFilesystem
+{
+	private client: PlaygroundClient;
+
+	constructor(client: PlaygroundClient) {
+		super();
+		this.client = client;
+	}
+	isDir(path: string) {
+		return this.client.isDir(path);
+	}
+	fileExists(path: string) {
+		return this.client.fileExists(path);
+	}
+	readFileAsBuffer(path: string) {
+		return this.client.readFileAsBuffer(path);
+	}
+	readFileAsText(path: string) {
+		return this.client.readFileAsText(path);
+	}
+	listFiles(path: string) {
+		return this.client.listFiles(path);
+	}
+	writeFile(path: string, data: string | Uint8Array) {
+		return this.client.writeFile(path, data);
+	}
+	mkdir(path: string) {
+		return this.client.mkdir(path);
+	}
+	rmdir(path: string, options?: { recursive?: boolean }) {
+		return this.client.rmdir(path, options);
+	}
+	mv(source: string, destination: string) {
+		return this.client.mv(source, destination);
+	}
+	unlink(path: string) {
+		return this.client.unlink(path);
+	}
+}
 
 export const Layout = () => {
 	const [isHelpOpen, setHelpOpen] = useState(false);
@@ -36,6 +84,13 @@ export const Layout = () => {
 	);
 	const editorHostRef = useRef<EditorHostHandle | null>(null);
 
+	const filesystem = useMemo(() => {
+		if (!playgroundClient) {
+			return null;
+		}
+		return new ClientFilesystemWrapper(playgroundClient);
+	}, [playgroundClient]);
+
 	useEffect(() => {
 		const previousTitle = document.title;
 		document.title = 'WordPress PHP Playground';
@@ -75,9 +130,9 @@ export const Layout = () => {
 			<PanelGroup direction="horizontal" id="app" className={styles.app}>
 				<Panel minSize={16} defaultSize={16} collapsible>
 					<div className={styles.editorPane}>
-						{bootStatus === 'ready' && playgroundClient ? (
+						{bootStatus === 'ready' && filesystem ? (
 							<FileExplorerSidebar
-								filesystem={playgroundClient}
+								filesystem={filesystem}
 								currentPath={currentPath}
 								selectedDirPath={selectedDirPath}
 								setSelectedDirPath={setSelectedDirPath}

packages/playground/website/src/components/site-manager/site-file-browser/index.tsx

@@ -502,28 +502,60 @@ export function SiteFileBrowser({
 	);
 }
 
+/**
+ * Wraps a PlaygroundClient to satisfy AsyncWritableFilesystem interface
+ * which requires EventTarget methods.
+ */
+class ClientFilesystemWrapper
+	extends EventTarget
+	implements AsyncWritableFilesystem
+{
+	private client: PlaygroundClient;
+
+	constructor(client: PlaygroundClient) {
+		super();
+		this.client = client;
+	}
+	isDir(path: string) {
+		return this.client.isDir(path);
+	}
+	fileExists(path: string) {
+		return this.client.fileExists(path);
+	}
+	readFileAsBuffer(path: string) {
+		return this.client.readFileAsBuffer(path);
+	}
+	readFileAsText(path: string) {
+		return this.client.readFileAsText(path);
+	}
+	listFiles(path: string) {
+		return this.client.listFiles(path);
+	}
+	writeFile(path: string, data: string | Uint8Array) {
+		return this.client.writeFile(path, data);
+	}
+	mkdir(path: string) {
+		return this.client.mkdir(path);
+	}
+	rmdir(path: string, options?: { recursive?: boolean }) {
+		return this.client.rmdir(path, options);
+	}
+	mv(source: string, destination: string) {
+		return this.client.mv(source, destination);
+	}
+	unlink(path: string) {
+		return this.client.unlink(path);
+	}
+}
+
 function useFilesystem(
 	client: PlaygroundClient | null
 ): AsyncWritableFilesystem | null {
 	return useMemo(() => {
 		if (!client) {
 			return null;
 		}
-		return {
-			isDir: (path: string) => client.isDir(path),
-			fileExists: (path: string) => client.fileExists(path),
-			readFileAsBuffer: (path: string) => client.readFileAsBuffer(path),
-			readFileAsText: (path: string) => client.readFileAsText(path),
-			listFiles: (path: string) => client.listFiles(path),
-			writeFile: (path: string, data: string | Uint8Array) =>
-				client.writeFile(path, data),
-			mkdir: (path: string) => client.mkdir(path),
-			rmdir: (path: string, options?: { recursive?: boolean }) =>
-				client.rmdir(path, options),
-			mv: (source: string, destination: string) =>
-				client.mv(source, destination),
-			unlink: (path: string) => client.unlink(path),
-		};
+		return new ClientFilesystemWrapper(client);
 	}, [client]);
 }
 

tsconfig.base.json

@@ -1,120 +1,89 @@
 {
-  "compileOnSave": false,
-  "compilerOptions": {
-    "rootDir": ".",
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "bundler",
-    "esModuleInterop": true,
-    "importHelpers": true,
-    "resolveJsonModule": true,
-    "jsx": "react",
-    "target": "ES2021",
-    "module": "esnext",
-    "lib": [
-      "ES2022",
-      "esnext.disposable",
-      "dom"
-    ],
-    "skipLibCheck": true,
-    "skipDefaultLibCheck": true,
-    "noPropertyAccessFromIndexSignature": false,
-    "baseUrl": ".",
-    "paths": {
-      "@php-wasm/cli": [
-        "packages/php-wasm/cli/src/main.ts"
-      ],
-      "@php-wasm/fs-journal": [
-        "packages/php-wasm/fs-journal/src/index.ts"
-      ],
-      "@php-wasm/logger": [
-        "packages/php-wasm/logger/src/index.ts"
-      ],
-      "@php-wasm/node": [
-        "packages/php-wasm/node/src/index.ts"
-      ],
-      "@php-wasm/node-polyfills": [
-        "packages/php-wasm/node-polyfills/src/index.ts"
-      ],
-      "@php-wasm/private": [
-        "packages/php-wasm/private/src/index.ts"
-      ],
-      "@php-wasm/progress": [
-        "packages/php-wasm/progress/src/index.ts"
-      ],
-      "@php-wasm/scopes": [
-        "packages/php-wasm/scopes/src/index.ts"
-      ],
-      "@php-wasm/stream-compression": [
-        "packages/php-wasm/stream-compression/src/index.ts"
-      ],
-      "@php-wasm/universal": [
-        "packages/php-wasm/universal/src/index.ts"
-      ],
-      "@php-wasm/universal/mime-types": [
-        "packages/php-wasm/universal/src/lib/mime-types.json"
-      ],
-      "@php-wasm/util": [
-        "packages/php-wasm/util/src/index.ts"
-      ],
-      "@php-wasm/web": [
-        "packages/php-wasm/web/src/index.ts"
-      ],
-      "@php-wasm/web-service-worker": [
-        "packages/php-wasm/web-service-worker/src/index.ts"
-      ],
-      "@php-wasm/xdebug-bridge": [
-        "packages/php-wasm/xdebug-bridge/src/index.ts"
-      ],
-      "@wp-playground/blueprints": [
-        "packages/playground/blueprints/src/index.ts"
-      ],
-      "@wp-playground/cli": [
-        "packages/playground/cli/src/cli.ts"
-      ],
-      "@wp-playground/client": [
-        "packages/playground/client/src/index.ts"
-      ],
-      "@wp-playground/common": [
-        "packages/playground/common/src/index.ts"
-      ],
-      "@wp-playground/components": [
-        "packages/playground/components/src/index.ts"
-      ],
-      "@wp-playground/nx-extensions": [
-        "packages/nx-extensions/src/index.ts"
-      ],
-      "@wp-playground/remote": [
-        "packages/playground/remote/src/index.ts"
-      ],
-      "@wp-playground/storage": [
-        "packages/playground/storage/src/index.ts"
-      ],
-      "@wp-playground/sync": [
-        "packages/playground/sync/src/index.ts"
-      ],
-      "@wp-playground/unit-test-utils": [
-        "packages/playground/unit-test-utils/src/index.ts"
-      ],
-      "@wp-playground/website": [
-        "packages/playground/website/src/index.ts"
-      ],
-      "@wp-playground/website-extras": [
-        "packages/playground/website-extras/src/php-playground/main.tsx"
-      ],
-      "@wp-playground/wordpress": [
-        "packages/playground/wordpress/src/index.ts"
-      ],
-      "@wp-playground/wordpress-builds": [
-        "packages/playground/wordpress-builds/src/index.ts"
-      ],
-      "isomorphic-git": [
-        "./isomorphic-git"
-      ]
-    }
-  },
-  "exclude": [
-    "node_modules",
-    "tmp"
-  ]
-}
+	"compileOnSave": false,
+	"compilerOptions": {
+		"rootDir": ".",
+		"sourceMap": true,
+		"declaration": false,
+		"moduleResolution": "bundler",
+		"esModuleInterop": true,
+		"importHelpers": true,
+		"resolveJsonModule": true,
+		"jsx": "react",
+		"target": "ES2021",
+		"module": "esnext",
+		"lib": ["ES2022", "esnext.disposable", "dom"],
+		"skipLibCheck": true,
+		"skipDefaultLibCheck": true,
+		"noPropertyAccessFromIndexSignature": false,
+		"baseUrl": ".",
+		"paths": {
+			"@php-wasm/cli": ["packages/php-wasm/cli/src/main.ts"],
+			"@php-wasm/fs-journal": [
+				"packages/php-wasm/fs-journal/src/index.ts"
+			],
+			"@php-wasm/logger": ["packages/php-wasm/logger/src/index.ts"],
+			"@php-wasm/node": ["packages/php-wasm/node/src/index.ts"],
+			"@php-wasm/node-polyfills": [
+				"packages/php-wasm/node-polyfills/src/index.ts"
+			],
+			"@php-wasm/private": ["packages/php-wasm/private/src/index.ts"],
+			"@php-wasm/progress": ["packages/php-wasm/progress/src/index.ts"],
+			"@php-wasm/scopes": ["packages/php-wasm/scopes/src/index.ts"],
+			"@php-wasm/stream-compression": [
+				"packages/php-wasm/stream-compression/src/index.ts"
+			],
+			"@php-wasm/universal": ["packages/php-wasm/universal/src/index.ts"],
+			"@php-wasm/universal/mime-types": [
+				"packages/php-wasm/universal/src/lib/mime-types.json"
+			],
+			"@php-wasm/util": ["packages/php-wasm/util/src/index.ts"],
+			"@php-wasm/web": ["packages/php-wasm/web/src/index.ts"],
+			"@php-wasm/web-service-worker": [
+				"packages/php-wasm/web-service-worker/src/index.ts"
+			],
+			"@php-wasm/xdebug-bridge": [
+				"packages/php-wasm/xdebug-bridge/src/index.ts"
+			],
+			"@wp-playground/blueprints": [
+				"packages/playground/blueprints/src/index.ts"
+			],
+			"@wp-playground/cli": ["packages/playground/cli/src/cli.ts"],
+			"@wp-playground/client": [
+				"packages/playground/client/src/index.ts"
+			],
+			"@wp-playground/common": [
+				"packages/playground/common/src/index.ts"
+			],
+			"@wp-playground/components": [
+				"packages/playground/components/src/index.ts"
+			],
+			"@wp-playground/nx-extensions": [
+				"packages/nx-extensions/src/index.ts"
+			],
+			"@wp-playground/remote": [
+				"packages/playground/remote/src/index.ts"
+			],
+			"@wp-playground/storage": [
+				"packages/playground/storage/src/index.ts"
+			],
+			"@wp-playground/sync": ["packages/playground/sync/src/index.ts"],
+			"@wp-playground/unit-test-utils": [
+				"packages/playground/unit-test-utils/src/index.ts"
+			],
+			"@wp-playground/website": [
+				"packages/playground/website/src/index.ts"
+			],
+			"@wp-playground/website-extras": [
+				"packages/playground/website-extras/src/php-playground/main.tsx"
+			],
+			"@wp-playground/wordpress": [
+				"packages/playground/wordpress/src/index.ts"
+			],
+			"@wp-playground/wordpress-builds": [
+				"packages/playground/wordpress-builds/src/index.ts"
+			],
+			"isomorphic-git": ["./isomorphic-git"]
+		}
+	},
+	"exclude": ["node_modules", "tmp"]
+}