Code editor

[adamziel]

Description

Adds a code editor with a live preview.

The architecture works as follows:

• The CodeMirror editor is set up to edit files from a specific WordPress filesystem directory. Note that filesystem lives in the browser memory.
• Every code change is saved to a disk directory, say, my-plugin/src.
• Code changes trigger a bundling process using the browser versions of Rollup and Babel.
• The resulting bundle consists of AMD (Asynchronous Modules). It was the most convenient format for our purposes here. This means each module declaration is wrapped in define('moduleName', ['dependency1', 'dependency2', ...], function moduleFactory(dep1, dep2) { });.
• The bundle ships with a custom module loader that understands all the define() and require() calls even for JSON and CSS modules.
• The resulting JavaScript bundle is:
  • stored in, say, my-plugin/build alongside non-JavaScript changes (like an updated index.php)
  • live eval()'d in the WordPress iframe to trigger live reloading when appropriate

The editor+bundler setup is heavyweight (~3.5MB JavaScript code minified) and thus is shipped as a separate chunk using esbuild's code splitting.

Usage

const { WordPressPluginIDE, createBlockPluginFixture } = await import(
	'../wordpress-plugin-ide/index.js'
);
// createBlockPluginFixture defines files to create on the disk to boostrap
// a create-block plugin
render(
	<WordPressPluginIDE
		plugin={createBlockPluginFixture}  // Create the plugin in the FileSystem and edit its files
		workerThread={workerThread}
		initialEditedFile="edit.js"
		onBundleReady={(bundleContents: string) => {
			if (doneFirstBoot) {
				(wpFrame.contentWindow as any).eval(bundleContents);
			} else {
				doneFirstBoot = true;
				wpFrame.src = workerThread.pathToInternalUrl(
					query.get('url') || '/'
				);
			}
		}}
	/>,
	document.getElementById('code-editor')!
);

Screenshots