[php-wasm-logger] Filter logs by severity in Logger and assign severity based on verbosity argument in CLIs (#2436)

## Motivation for the change, related issues

The former intent of this pull request was to replace the console logs
from the Xdebug bridge.
Console logs were replaced by Logger logs and a filter by severity was
added.

The CLIs verbosity argument is now related to its CLI LogVerbosity
associated with a Logger LogSeverity. This setup will filter the related
logs.

## Implementation details

The Playground CLI and Xdebug-bridge CLI now have a LogVerbosity
variable :

```typescript
const LogVerbosity = {
	Quiet: { name: 'quiet', severity: LogSeverity.Fatal },
	Normal: { name: 'normal', severity: LogSeverity.Info },
	Debug: { name: 'debug', severity: LogSeverity.Debug },
} as const;
```

The `yargs` `verbosity` option is now as follows : 

```typescript
.option('verbosity', {
	type: 'string',
	describe: 'Output logs',
	choices: Object.values(LogVerbosity).map(
		(verbosity) => verbosity.name
	),
	default: 'normal',
})
```

And the Logs are filtered based on the verbosity argument : 

```typescript
if (args.verbosity) {
    const severity = Object.values(LogVerbosity).find(
    	(v) => v.name === args.verbosity
    )!.severity;
    logger.filterBySeverity(severity);
}
```

The logger will then log the message based on if the severity level is
equal or lower than the verbosity's severity level :

```typescript
for (const handler of this.handlers) {
	if (logWithSeverity.severity.level <= this.severity.level) {
		handler(logWithSeverity, ...args);
	}
}
```

## Testing Instructions (or ideally a Blueprint)

### Normal mode

```
> nx run php-wasm-xdebug-bridge:dev

> node --no-warnings --experimental-wasm-stack-switching --experimental-wasm-jspi --loader=./packages/meta/src/node-es-module-loader/loader.mts ./packages/php-wasm/xdebug-bridge/src/cli.ts

Starting XDebug Bridge...
Connect Chrome DevTools to CDP at:
devtools://devtools/bundled/inspector.html?ws=localhost:9229

Chrome connected! Initializing Xdebug receiver...
XDebug receiver running on port 9003
Running a PHP script with Xdebug enabled...
```

### Quiet mode

```
> nx run php-wasm-xdebug-bridge:dev --verbosity quiet

> node --no-warnings --experimental-wasm-stack-switching --experimental-wasm-jspi --loader=./packages/meta/src/node-es-module-loader/loader.mts ./packages/php-wasm/xdebug-bridge/src/cli.ts --verbosity quiet

...silence...
```

### Debug mode

```
> nx run php-wasm-xdebug-bridge:dev --verbosity debug

> node --no-warnings --experimental-wasm-stack-switching --experimental-wasm-jspi --loader=./packages/meta/src/node-es-module-loader/loader.mts ./packages/php-wasm/xdebug-bridge/src/cli.ts --verbosity debug


Starting XDebug Bridge...
Connect Chrome DevTools to CDP at:
devtools://devtools/bundled/inspector.html?ws=localhost:9229

[CDP][received] {"id":1,"method":"Network.setCacheDisabled","params":{"cacheDisabled":true}}
...
[CDP][received] {"id":42,"method":"Page.startScreencast","params":{"format":"jpeg","quality":80,"maxWidth":272,"maxHeight":1778}}
Chrome connected! Initializing Xdebug receiver...
XDebug receiver running on port 9003
Running a PHP script with Xdebug enabled...
```

---------

Co-authored-by: Adam Zieliński <[email protected]>

Author: mho22

CHANGELOG.md

@@ -112,7 +112,7 @@ The `server` command supports the following optional arguments:
 -   `--login`: Automatically log the user in as an administrator.
 -   `--skip-wordpress-setup`: Do not download or install WordPress. Useful if you are mounting a full WordPress directory.
 -   `--skip-sqlite-setup`: Do not set up the SQLite database integration.
--   `--quiet`: Do not output logs and progress messages.
+-   `--verbosity`: Output logs and progress messages. Choices are "quiet", "normal" or "debug". Defaults to "normal".
 -   `--debug`: Print the PHP error log if an error occurs during boot.
 
 ## Need some help with the CLI?

packages/docs/site/docs/developers/05-local-development/04-wp-playground-cli.md

@@ -30,11 +30,11 @@ This page provides detailed information on the Playground Contributor Badge and
 Any contribution to the WordPress Playground project is highly valued. The Playground team recognizes contributions across several key areas:
 -->
 
-- 	**પ્લેગ્રાઉન્ડ કોડ:** કોડમાં ફેરફાર કરવા અને મુખ્ય પ્રોજેક્ટની સમીક્ષા કરવી.
-- 	**પ્લેગ્રાઉન્ડ UI:** વેબ અનુભવના યુઝર ઇન્ટરફેસમાં સુધારો કરવો.
-- 	**દસ્તાવેજીકરણ:** દસ્તાવેજીકરણ લખવું, અપડેટ કરવું અને સમીક્ષા કરવી.
-- 	**અનુવાદ:** પ્રોજેક્ટના કોઈપણ ભાગનું ભાષાંતર કરવું.
-- 	**બ્લુપ્રિન્ટ્સ ગેલેરી:** નવી બ્લુપ્રિન્ટ્સ બનાવવી અથવા હાલના બ્લુપ્રિન્ટ્સને સુધારવું.
+-       **પ્લેગ્રાઉન્ડ કોડ:** કોડમાં ફેરફાર કરવા અને મુખ્ય પ્રોજેક્ટની સમીક્ષા કરવી.
+-       **પ્લેગ્રાઉન્ડ UI:** વેબ અનુભવના યુઝર ઇન્ટરફેસમાં સુધારો કરવો.
+-       **દસ્તાવેજીકરણ:** દસ્તાવેજીકરણ લખવું, અપડેટ કરવું અને સમીક્ષા કરવી.
+-       **અનુવાદ:** પ્રોજેક્ટના કોઈપણ ભાગનું ભાષાંતર કરવું.
+-       **બ્લુપ્રિન્ટ્સ ગેલેરી:** નવી બ્લુપ્રિન્ટ્સ બનાવવી અથવા હાલના બ્લુપ્રિન્ટ્સને સુધારવું.
 
 <!--
 -   **Playground Code:** Making code changes and reviewing the core project.

packages/docs/site/docs/main/changelog.md

@@ -23,10 +23,10 @@ WordPress Playground is an open-source project that welcomes contributors of all
 ## How can I contribute?
 -->
 
-- કોડ? [વિકાસકર્તા વિભાગ](/contributing/code) જુઓ.
-- દસ્તાવેજીકરણ? [દસ્તાવેજીકરણ વિભાગ](/contributing/documentation) જુઓ.
-- ભૂલોની જાણ કરવી? મુખ્ય GitHub રિપોઝીટરીમાં અથવા [પ્લેગ્રાઉન્ડ સાધનો](https://github.com/WordPress/playground-tools/issues/new) માં [નવો અંક](https://github.com/WordPress/wordpress-playground/issues/new) ખોલો.
-- વિચારો, ડિઝાઇન, અથવા બીજું કંઈ? [GitHub ચર્ચા](https://github.com/WordPress/wordpress-playground/discussions) ખોલો, અને ચાલો વાત કરીએ!
+-   કોડ? [વિકાસકર્તા વિભાગ](/contributing/code) જુઓ.
+-   દસ્તાવેજીકરણ? [દસ્તાવેજીકરણ વિભાગ](/contributing/documentation) જુઓ.
+-   ભૂલોની જાણ કરવી? મુખ્ય GitHub રિપોઝીટરીમાં અથવા [પ્લેગ્રાઉન્ડ સાધનો](https://github.com/WordPress/playground-tools/issues/new) માં [નવો અંક](https://github.com/WordPress/wordpress-playground/issues/new) ખોલો.
+-   વિચારો, ડિઝાઇન, અથવા બીજું કંઈ? [GitHub ચર્ચા](https://github.com/WordPress/wordpress-playground/discussions) ખોલો, અને ચાલો વાત કરીએ!
 
 <!--
 -   Code? See the [developer section](/contributing/code).
@@ -41,9 +41,9 @@ WordPress Playground is an open-source project that welcomes contributors of all
 ## Guidelines
 -->
 
-- બધા વર્ડપ્રેસ પ્રોજેક્ટ્સની જેમ, અમે દરેક માટે સ્વાગત અને આદરપૂર્ણ વાતાવરણ સુનિશ્ચિત કરવા માંગીએ છીએ. વધુ જાણવા માટે કૃપા કરીને અમારા સમુદાયની [આચારસંહિતા] (https://make.wordpress.org/handbook/community-code-of-conduct/) વાંચો.
-- કોડ ફાળો આપનારાઓએ [કોડિંગ સિદ્ધાંતો] (/contributing/coding-standards) ની સમીક્ષા કરવી જોઈએ.
-- તમે જે પણ યોગદાન આપો છો તેના પર તમે કૉપિરાઇટ જાળવી રાખો છો. પુલ રિક્વેસ્ટ સબમિટ કરીને, તમે [વર્ડપ્રેસ પ્લેગ્રાઉન્ડ લાઇસન્સ] (https://github.com/WordPress/wordpress-playground?tab=GPL-2.0-1-ov-file#readme) હેઠળ તે કોડ રિલીઝ કરવા માટે સંમત થાઓ છો.
+-   બધા વર્ડપ્રેસ પ્રોજેક્ટ્સની જેમ, અમે દરેક માટે સ્વાગત અને આદરપૂર્ણ વાતાવરણ સુનિશ્ચિત કરવા માંગીએ છીએ. વધુ જાણવા માટે કૃપા કરીને અમારા સમુદાયની [આચારસંહિતા] (https://make.wordpress.org/handbook/community-code-of-conduct/) વાંચો.
+-   કોડ ફાળો આપનારાઓએ [કોડિંગ સિદ્ધાંતો] (/contributing/coding-standards) ની સમીક્ષા કરવી જોઈએ.
+-   તમે જે પણ યોગદાન આપો છો તેના પર તમે કૉપિરાઇટ જાળવી રાખો છો. પુલ રિક્વેસ્ટ સબમિટ કરીને, તમે [વર્ડપ્રેસ પ્લેગ્રાઉન્ડ લાઇસન્સ] (https://github.com/WordPress/wordpress-playground?tab=GPL-2.0-1-ov-file#readme) હેઠળ તે કોડ રિલીઝ કરવા માટે સંમત થાઓ છો.
 
 <!--
 -   As with all WordPress projects, we want to ensure a welcoming and respectful environment for everyone. Please read our community's [Code of Conduct](https://make.wordpress.org/handbook/community-code-of-conduct/) to learn more.
@@ -93,10 +93,10 @@ WordPress Playground and the WordPress project are strongly rooted in free and o
 As such, please be aware of the implications that your contributions will fall under:
 -->
 
-- જ્યારે તમે યોગદાન આપો છો, ત્યારે તમે GPLv2 (અથવા પછીના) લાઇસન્સ હેઠળ તમારા યોગદાનને લાઇસન્સ આપવા માટે સંમત થાઓ છો.
-- GPL લાઇસન્સ મજબૂત કોપીલેફ્ટ જોગવાઈઓ ધરાવે છે જે ખાતરી કરે છે કે બધા ડેરિવેટિવ કાર્યો ઓપન-સોર્સ અને સમાન લાઇસન્સ શરતો હેઠળ રહે છે, જેનાથી સહયોગી વિકાસ વાતાવરણને પ્રોત્સાહન મળે છે.
-- GPL લાઇસન્સ કોઈપણ ફેરફારો, બગ ફિક્સેસ અથવા નવી સુવિધાઓને મૂળ કોડબેઝમાં પાછા આપવા માટે પ્રોત્સાહિત કરે છે.
-- GPL લાઇસન્સ ખાતરી કરે છે કે પ્રોજેક્ટ મફત અને ઓપન-સોર્સ રહે, માત્ર કિંમતની દ્રષ્ટિએ જ નહીં પરંતુ સોફ્ટવેરનો ઉપયોગ, ફેરફાર અને વિતરણ કરવાની સ્વતંત્રતાના સંદર્ભમાં પણ.
+-   જ્યારે તમે યોગદાન આપો છો, ત્યારે તમે GPLv2 (અથવા પછીના) લાઇસન્સ હેઠળ તમારા યોગદાનને લાઇસન્સ આપવા માટે સંમત થાઓ છો.
+-   GPL લાઇસન્સ મજબૂત કોપીલેફ્ટ જોગવાઈઓ ધરાવે છે જે ખાતરી કરે છે કે બધા ડેરિવેટિવ કાર્યો ઓપન-સોર્સ અને સમાન લાઇસન્સ શરતો હેઠળ રહે છે, જેનાથી સહયોગી વિકાસ વાતાવરણને પ્રોત્સાહન મળે છે.
+-   GPL લાઇસન્સ કોઈપણ ફેરફારો, બગ ફિક્સેસ અથવા નવી સુવિધાઓને મૂળ કોડબેઝમાં પાછા આપવા માટે પ્રોત્સાહિત કરે છે.
+-   GPL લાઇસન્સ ખાતરી કરે છે કે પ્રોજેક્ટ મફત અને ઓપન-સોર્સ રહે, માત્ર કિંમતની દ્રષ્ટિએ જ નહીં પરંતુ સોફ્ટવેરનો ઉપયોગ, ફેરફાર અને વિતરણ કરવાની સ્વતંત્રતાના સંદર્ભમાં પણ.
 
 <!--
 -   When you contribute, you agree to license your contributions under the GPLv2 (or later) license

packages/docs/site/i18n/gu/docusaurus-plugin-content-docs/current/main/contributing/contributor-badge.md

@@ -64,15 +64,15 @@
 				"lintFilePatterns": ["packages/php-wasm/logger/**/*.ts"],
 				"maxWarnings": 0
 			}
-		}
-	},
-	"typecheck": {
-		"executor": "nx:run-commands",
-		"options": {
-			"commands": [
-				"tsc -p packages/php-wasm/logger/tsconfig.lib.json --noEmit",
-				"tsc -p packages/php-wasm/logger/tsconfig.spec.json --noEmit"
-			]
+		},
+		"typecheck": {
+			"executor": "nx:run-commands",
+			"options": {
+				"commands": [
+					"tsc -p packages/php-wasm/logger/tsconfig.lib.json --noEmit",
+					"tsc -p packages/php-wasm/logger/tsconfig.spec.json --noEmit"
+				]
+			}
 		}
 	}
 }

packages/docs/site/i18n/gu/docusaurus-plugin-content-docs/current/main/contributing/index.md

@@ -1,5 +1,5 @@
 import type { UniversalPHP, PHPRequestErrorEvent } from '../types';
-import type { Logger } from '../logger';
+import { type Logger, LogPrefix, LogSeverity } from '../logger';
 
 let lastPHPLogLength = 0;
 export const errorLogPath = '/wordpress/wp-content/debug.log';
@@ -32,6 +32,7 @@ export const collectPhpLogs = (
 			const currentLog = log.substring(lastPHPLogLength);
 			loggerInstance.logMessage({
 				message: currentLog,
+				severity: LogSeverity.Log,
 				raw: true,
 			});
 			lastPHPLogLength = log.length;
@@ -42,8 +43,9 @@ export const collectPhpLogs = (
 		if (event.error) {
 			loggerInstance.logMessage({
 				message: `${event.error.message} ${event.error.stack}`,
-				severity: 'Fatal',
-				prefix: event.source === 'request' ? 'PHP' : 'WASM Crash',
+				severity: LogSeverity.Fatal,
+				prefix:
+					event.source === 'request' ? LogPrefix.PHP : LogPrefix.WASM,
 			});
 			loggerInstance.dispatchEvent(
 				new CustomEvent(loggerInstance.fatalErrorEvent, {

packages/php-wasm/logger/project.json

@@ -1,4 +1,4 @@
-import type { Logger } from '../logger';
+import { type Logger, LogSeverity } from '../logger';
 
 /**
  * Log Windows errors.
@@ -9,7 +9,7 @@ import type { Logger } from '../logger';
 const logWindowErrorEvent = (loggerInstance: Logger, event: ErrorEvent) => {
 	loggerInstance.logMessage({
 		message: `${event.message} in ${event.filename} on line ${event.lineno}:${event.colno}`,
-		severity: 'Error',
+		severity: LogSeverity.Error,
 	});
 };
 
@@ -30,7 +30,7 @@ const logPromiseRejection = (
 	const message = event?.reason.stack ?? event.reason;
 	loggerInstance.logMessage({
 		message,
-		severity: 'Error',
+		severity: LogSeverity.Error,
 	});
 };
 

packages/php-wasm/logger/src/lib/collectors/collect-php-logs.ts

@@ -1,6 +1,5 @@
 import type { LogHandler } from '../log-handlers';
-import type { Log } from '../logger';
-import { logger } from '../logger';
+import { type Log, logger } from '../logger';
 
 export const logEventType = 'playground-log';
 

packages/php-wasm/logger/src/lib/collectors/collect-window-errors.ts

@@ -1,6 +1,5 @@
 import type { LogHandler } from '../log-handlers';
-import type { Log } from '../logger';
-import { prepareLogMessage } from '../logger';
+import { type Log, LogSeverity, prepareLogMessage } from '../logger';
 
 /**
  * Log message to the console.
@@ -23,19 +22,19 @@ export const logToConsole: LogHandler = (log: Log, ...args: any[]): void => {
 	}
 	/* eslint-disable no-console */
 	switch (log.severity) {
-		case 'Debug':
+		case LogSeverity.Debug:
 			console.debug(log.message, ...args);
 			break;
-		case 'Info':
+		case LogSeverity.Info:
 			console.info(log.message, ...args);
 			break;
-		case 'Warn':
+		case LogSeverity.Warn:
 			console.warn(log.message, ...args);
 			break;
-		case 'Error':
+		case LogSeverity.Error:
 			console.error(log.message, ...args);
 			break;
-		case 'Fatal':
+		case LogSeverity.Fatal:
 			console.error(log.message, ...args);
 			break;
 		default: