Bundle the core files of the Monaco Editor

Author: t-hamano

.distignore

@@ -2,6 +2,7 @@
 /.github
 /.wordpress-org
 /artifacts
+/bin
 /node_modules
 /test
 /vendor
@@ -10,13 +11,14 @@
 .eslintignore
 .eslintrc.js
 .gitignore
+.prettierrc.js
 .stylelintrc.js
 .wp-env.json
 composer.json
 composer.lock
 jest-puppeteer.config.js
-package-lock.json
 package.json
+package-lock.json
 phpcs.ruleset.xml
 README.md
 webpack.config.js

.gitignore

@@ -3,4 +3,4 @@ build/
 node_modules/
 vendor/
 .wp-env.override.json
-/artifacts/
+artifacts/

README.md

@@ -155,6 +155,14 @@ $ npm run build
 
 ## Resources
 
+### monaco-editor
+* License: MIT License
+* Source: https://github.com/microsoft/monaco-editor
+
+### react-notifications-component
+* License: MIT License
+* Source: https://github.com/teodosii/react-notifications-component
+
 ### emmet-monaco-es
 * License: MIT License
 * Source: https://github.com/troy351/emmet-monaco-es

bin/delete-sourcemaps.js

@@ -0,0 +1,36 @@
+/**
+ * Remove commented lines in the source map URL from Monaco Editor core files.
+ */
+
+const path = require( 'path' );
+const fs = require( 'fs' );
+
+function deleteMaps( dir ) {
+	fs.readdir( dir, function ( dirError, files ) {
+		files.forEach( ( file ) => {
+			const target = path.join( dir, file );
+			const stats = fs.statSync( target );
+
+			if ( stats.isDirectory() ) {
+				deleteMaps( target );
+			} else {
+				const extname = path.extname( target );
+
+				if ( extname === '.js' ) {
+					fs.readFile( target, 'utf8', ( fileError, data ) => {
+						const lines = data.split( '\n' );
+						const lastLine = lines[ lines.length - 1 ];
+						const hasSourceMappingLine =
+							lastLine.includes( 'sourceMappingURL' ) && lines.length > 1;
+
+						if ( hasSourceMappingLine ) {
+							fs.writeFileSync( target, lines.slice( 0, lines.length - 1 ).join( '\n' ) );
+						}
+					} );
+				}
+			}
+		} );
+	} );
+}
+
+[ './build/lib/' ].map( deleteMaps );

classes/class-admin.php

@@ -108,7 +108,7 @@ public function admin_enqueue_scripts( $hook_suffix ) {
 			CHBE_NAMESPACE . '-admin',
 			'chbeObj',
 			array(
-				'assetPath'           => CHBE_URL,
+				'pluginUrl'           => CHBE_URL,
 				'version'             => CHBE_VERSION,
 				'editorSettings'      => Settings::get_editor_settings(),
 				'editorOptions'       => Settings::get_editor_options(),

classes/class-block-editor.php

@@ -55,6 +55,7 @@ public function enqueue_editor_scripts() {
 			CHBE_NAMESPACE,
 			'chbeObj',
 			array(
+				'pluginUrl'      => CHBE_URL,
 				'editorSettings' => Settings::get_editor_settings(),
 				'editorOptions'  => Settings::get_editor_options(),
 				'fontFamily'     => Settings::get_font_families(),

classes/class-classic-editor.php

@@ -84,6 +84,7 @@ public function admin_enqueue_scripts( $hook_suffix ) {
 			CHBE_NAMESPACE,
 			'chbeObj',
 			array(
+				'pluginUrl'      => CHBE_URL,
 				'editorSettings' => Settings::get_editor_settings(),
 				'editorOptions'  => Settings::get_editor_options(),
 				'fontFamily'     => Settings::get_font_families(),

classes/class-theme-plugin-editor.php

@@ -99,6 +99,7 @@ public function admin_enqueue_scripts( $hook_suffix ) {
 			CHBE_NAMESPACE,
 			'chbeObj',
 			array(
+				'pluginUrl'      => CHBE_URL,
 				'editorSettings' => Settings::get_editor_settings(),
 				'editorOptions'  => Settings::get_editor_options(),
 				'fontFamily'     => Settings::get_font_families(),

package-lock.json

@@ -7,7 +7,8 @@
 		"open": "wp-env start && opener http://localhost:8888",
 		"stop": "wp-env stop",
 		"start": "wp-scripts start src/admin src/block-editor src/classic-editor src/theme-plugin-editor --output-path build",
-		"build": "npm run clean && wp-scripts build src/admin src/block-editor src/classic-editor src/theme-plugin-editor --output-path build",
+		"build": "npm run clean && wp-scripts build src/admin src/block-editor src/classic-editor src/theme-plugin-editor --output-path build && npm run copy-lib",
+		"copy-lib": "cpx -C \"node_modules/monaco-editor/min/**\" \"build/lib/monaco-editor/min\" && node bin/delete-sourcemaps.js",
 		"clean": "rimraf build",
 		"lint": "npm run lint:php && npm run lint:style && npm run lint:js",
 		"lint:php": "composer lint",
@@ -17,6 +18,7 @@
 		"test:e2e": "wp-scripts test-e2e --config test/e2e/jest.config.js"
 	},
 	"devDependencies": {
+		"@deboxsoft/cpx": "^1.5.0",
 		"@wordpress/e2e-test-utils": "^7.5.0",
 		"@wordpress/env": "^4.7.0",
 		"@wordpress/scripts": "^23.1.0",
@@ -29,6 +31,7 @@
 	"dependencies": {
 		"@wordpress/icons": "^9.0.0",
 		"emmet-monaco-es": "^4.6.2",
+		"monaco-editor": "^0.28.1",
 		"react-notifications-component": "^4.0.1",
 		"webfontloader": "^1.6.28"
 	}