Add Javascript and TypeScript build for jetpack-wpcom-mu (#34158)

* Jetpack Mu WPcom: Migrate Error Handling
* First pass at migrating an ETK feature.
* Update script paths
* Add initial JS build code for jetpack-mu-wpcom
* changelog
* Loosen dependencies
* Add build/ to .gitignore
* Add clean script
* Add dependencies for error-reporting
* Update versions
* Changelog
* Add build scripts
* Try using PKG_DIR
* Add build/ directory to production output
* Import namespaced class
* Bail early if ETK has enqueued its script
* Switch to more direct webpack build
* Remove @wordpress/scripts and dependencies
* Ignore the .cache directory
* Update to using base dir and file to enqueue scripts
* Remove JS/TS file exclusion and update build dir path
* Ensure we set up production builds correctly
* Add docs for new build commands
* Better reflect folder structure
* Reset change pnpm-lock.yaml
* Update pnpm lock file
* Update mu-wpcom-plugin
* Launchpad: Add `new_prompt` query param to Write first post task (#34160)
* Add answer_prompt query param to write 3 posts task.
* changelog
* Switch to write first post task for write sites.
* Update site option name
* Simplify base path into a var
* Update query arg
* Remove semicolon
* Update project version
* Update comment for accuracy.
* use add_query_arg
* String true
* Add trailing slash
* Update build docs
* Update pnpm-lock.yaml
* Update composer.lock

---------

Co-authored-by: Konstantin Obenland <obenland@gmx.de>
Co-authored-by: Caroline Moore <calobee@gmail.com>
Co-authored-by: Mikael Korpela <mikael@ihminen.org>
Co-authored-by: Brandon Kraft <public@brandonkraft.com>
Co-authored-by: okmttdhr <okmttdhr@users.noreply.github.com>

projects/packages/jetpack-mu-wpcom/.gitattributes

@@ -1,11 +1,12 @@
 # Files not needed to be distributed in the package.
-.gitattributes    export-ignore
-.github/          export-ignore
-package.json      export-ignore
+.gitattributes       export-ignore
+.github/             export-ignore
+package.json         export-ignore
 
 # Files to include in the mirror repo, but excluded via gitignore
 # Remember to end all directories with `/**` to properly tag every file.
 # /src/js/example.min.js  production-include
+src/build/**      production-include
 
 # Files to exclude from the mirror repo, but included in the monorepo.
 # Remember to end all directories with `/**` to properly tag every file.

projects/packages/jetpack-mu-wpcom/.gitignore

@@ -1,3 +1,5 @@
+.cache/
+src/build/
 vendor/
 node_modules/
 wordpress/

projects/packages/jetpack-mu-wpcom/README.md

@@ -14,6 +14,31 @@ If you plan on using this package in your WordPress plugin, we would recommend t
 
 Need to report a security vulnerability? Go to [https://automattic.com/security/](https://automattic.com/security/) or directly to our security bug bounty site [https://hackerone.com/automattic](https://hackerone.com/automattic).
 
+## Build System
+
+_Note: `cd` to `projects/packages/jetpack-mu-wpcom` before running these commands_
+
+- `npm run build-js`<br>
+  Compiles the plugins for development - the files are not minified and we produce a source map.
+
+- `npm run build-production-js`<br>
+  Compiles the plugins for production - we produce minified files without source maps.
+
+- `npm run clean`<br>
+  Removes all build files.
+
+The entry point is:
+
+- **Plugin**: `projects/packages/jetpack-mu-wpcom/src/features/{{feature-name}}/index.js`
+
+The output is:
+
+- **Plugin**: `/projects/packages/jetpack-mu-wpcom/src/build/{{feature-name}}/{{feature-name}}.js`
+
+### Adding files to the build system
+
+If you're adding a new feature that includes Javascript or Typescript, you will need to add the primary source file to the `entry` section in `projects/packages/jetpack-mu-wpcom/webpack.config.js`, where we'll use the key as the core file name, and the value as the primary input file for that module.
+
 ## License
 
 jetpack-mu-wpcom is licensed under [GNU General Public License v2 (or later)](./LICENSE.txt)

projects/packages/jetpack-mu-wpcom/changelog/add-js-build-for-jetpack-wpcom-mu

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add initial JS and TS build logic

projects/packages/jetpack-mu-wpcom/changelog/migrate-etk-error-handling

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added Editor error handling from ETK

projects/packages/jetpack-mu-wpcom/composer.json

@@ -26,8 +26,8 @@
 		"test-php": [
 			"@composer phpunit"
 		],
-		"build-production": "echo 'Add your build step to composer.json, please!'",
-		"build-development": "echo 'Add your build step to composer.json, please!'",
+		"build-production": "pnpm run build-production-js",
+		"build-development": "pnpm run build-js",
 		"post-install-cmd": "WorDBless\\Composer\\InstallDropin::copy",
 		"post-update-cmd": "WorDBless\\Composer\\InstallDropin::copy"
 	},

projects/packages/jetpack-mu-wpcom/package.json

@@ -16,10 +16,24 @@
 	"author": "Automattic",
 	"scripts": {
 		"build": "echo 'Not implemented.'",
-		"build-js": "echo 'Not implemented.'",
+		"build-js": "pnpm clean && webpack",
 		"build-production": "echo 'Not implemented.'",
-		"build-production-js": "echo 'Not implemented.'",
-		"clean": "true"
+		"build-production-js": "NODE_ENV=production BABEL_ENV=production pnpm build-js",
+		"clean": "rm -rf src/build/"
 	},
-	"devDependencies": {}
+	"optionalDependencies": {
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0"
+	},
+	"devDependencies": {
+		"@automattic/jetpack-webpack-config": "workspace:*",
+		"typescript": "^5.0.4",
+		"webpack": "5.76.0",
+		"webpack-cli": "4.9.1"
+	},
+	"dependencies": {
+		"@sentry/browser": "7.80.1",
+		"@wordpress/api-fetch": "6.42.0",
+		"@wordpress/hooks": "3.45.0"
+	}
 }

projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php

@@ -16,6 +16,8 @@ class Jetpack_Mu_Wpcom {
 
 	const PACKAGE_VERSION = '5.2.0-alpha';
 	const PKG_DIR         = __DIR__ . '/../';
+	const BASE_DIR        = __DIR__ . '/';
+	const BASE_FILE       = __FILE__;
 
 	/**
 	 * Initialize the class.
@@ -65,6 +67,8 @@ public static function load_features() {
 		require_once __DIR__ . '/features/100-year-plan/enhanced-ownership.php';
 		require_once __DIR__ . '/features/100-year-plan/locked-mode.php';
 
+		require_once __DIR__ . '/features/error-reporting/error-reporting.php';
+
 		require_once __DIR__ . '/features/media/heif-support.php';
 
 		require_once __DIR__ . '/features/block-patterns/block-patterns.php';