マウントデータ

ブラウザからディレクトリをマウントする

ブラウザから Playground にディレクトリをマウントするには、window.showDirectoryPicker API を使用できます。この API を使用する前に、ブラウザの互換性を確認してください。

window.showDirectoryPicker().then(function (directoryHandle) {
	window.parent.postMessage({
		type: 'mount-directory-handle',
		directoryHandle,
		mountpoint: '/wordpress/wp-content/uploads/markdown/',
	});
});

ブラウザの OPFS ストレージをマウントする

ブラウザ内で利用可能な OPFS ストレージをマウントすることもできます。内部的には、PHP リクエストが処理されるたびに、メモリファイルシステムが OPFS に同期されます。WordPress のインストール時に 3000 個以上のファイルの同期が発生して起動プロセスが遅くなるのを防ぐため、以下に示すように、起動後に OPFS のマウントを遅延させることをお勧めします。

const hasWordPressSiteInOPFS = false; // roll your logic to track this
const blueprint = {
	preferredVersions: {
		php: '8.4',
		wp: 'latest',
	},
	features: {
		networking: true,
	},
	login: true,
	steps: [], // add steps
};

try {
	const mountDescriptor: MountDescriptor = {
		device: {
			type: 'opfs',
			path: `my-unique-prefix/my-site`,
		},
		mountpoint: '/wordpress',
		initialSyncDirection: hasWordPressSiteInOPFS ? 'opfs-to-memfs' : 'memfs-to-opfs',
	};

	const client = await startPlaygroundWeb({
		iframe: document.getElementById('wp'),
		remoteUrl: 'https://playground.wordpress.net/remote.html',
		blueprint: blueprint,
		shouldInstallWordPress: !hasWordPressSiteInOPFS,
		mounts: hasWordPressSiteInOPFS ? [mountDescriptor] : [],
	});

	if (!hasWordPressSiteInOPFS) {
		await client.mountOpfs(mountDescriptor);
	}

	await client.isReady();
	return client;
} catch (error) {
	// handle error here
}

データの永続性に関する保証については、「ストレージの割り当て量と削除基準」（https://developer.mozilla.org/ja/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria）をご確認ください。