Plugin: Add a dev plugin

.github/workflows/release-build.yaml

@@ -28,6 +28,10 @@ jobs:
         working-directory: './plugin'
         run:  zip -r ../plugin.zip . [email protected]
 
+      - name: Build Dev plugin
+        working-directory: './dev-plugin'
+        run:  zip -r ../plugin-dev.zip . [email protected]
+
       - name: Setup Node for theme
         uses: actions/setup-node@v2
         with:
@@ -58,6 +62,17 @@ jobs:
           asset_name: wpcloud-station-plugin.zip
           asset_content_type: application/zip
 
+      - name: Upload Dev Plugin Artifact
+        id: upload-dev-plugin-asset
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{steps.get_release.outputs.upload_url }}
+          asset_path: ./plugin-dev.zip
+          asset_name: wpcloud-station-plugin-dev.zip
+          asset_content_type: application/zip
+
       - name: Upload Theme Artifact
         id: upload-theme-asset
         uses: actions/upload-release-asset@v1

.wp-env.json

@@ -1,13 +1,16 @@
 {
 	"core": "WordPress/WordPress",
-	"plugins": [ "./plugin" ],
-	"themes": [ "./theme" ],
 	"config": {
 		"WP_DEBUG": true,
 		"WP_DEBUG_LOG": true,
 		"WP_DEBUG_DISPLAY": true,
 		"SCRIPT_DEBUG": true,
 		"WP_DEVELOPMENT_MODE": "all",
 		"WP_ENVIRONMENT_TYPE": "local"
+	},
+	"mappings" : {
+		"wp-content/themes/wpcloud-station" : "./theme",
+		"wp-content/plugins/wpcloud-station" : "./plugin",
+		"wp-content/plugins/wpcloud-station-dev" : "./dev-plugin"
 	}
 }

dev-plugin/.distignore

@@ -0,0 +1,43 @@
+# A set of files you probably don't want in your WordPress.org distribution
+.babelrc
+.deployignore
+.distignore
+.editorconfig
+.eslintignore
+.eslintrc
+.git
+.gitignore
+.github
+.gitlab-ci.yml
+.travis.yml
+*.DS_Store
+.*~
+Thumbs.db
+behat.yml
+bitbucket-pipelines.yml
+bin*
+.circleci/config.yml
+composer.json
+composer.lock
+dependencies.yml
+Gruntfile.js
+package.json
+package-lock.json
+phpunit.xml
+phpunit.xml.dist
+multisite.xml
+multisite.xml.dist
+.phpcs.xml
+phpcs.xml
+.phpcs.xml.dist
+phpcs.xml.dist
+README.md
+webpack.config.js
+wp-cli.local.yml
+yarn.lock
+tests*
+vendor
+node_modules*
+*.sql
+*.tar.gz
+*.zip

dev-plugin/admin/init.php

@@ -0,0 +1,59 @@
+<?php
+/**
+ * WP Cloud Station Dev
+ *
+ * @package wpcloud-station-dev
+ */
+
+declare( strict_types = 1 );
+
+/**
+ * Initialize dev settings
+ */
+function wpcloud_station_dev_settings_init(): void {
+	register_setting( 'wpcloud', 'wpcloud_station_dev_settings' );
+
+	add_settings_section(
+		'wpcloud_station_dev_settings',
+		__( 'WP Cloud Dev Settings', 'wpcloud' ),
+		null,
+		'wpcloud'
+	);
+	add_settings_field(
+		'wpcloud_station_dev_field_dev_log',
+		__( 'Dev Log', 'wpcloud' ),
+		'wpcloud_station_dev_field_dev_log_render',
+		'wpcloud',
+		'wpcloud_station_dev_settings'
+	);
+}
+add_action( 'admin_init', 'wpcloud_station_dev_settings_init' );
+
+/**
+ * Initialize submenu page
+ */
+function wpcloud_station_dev_options_page(): void {
+	add_submenu_page(
+		'wpcloud',
+		__( 'WP Cloud Dev', 'wpcloud' ),
+		__( 'WP Cloud Dev', 'wpcloud' ),
+		'manage_options',
+		'wpcloud-station-dev',
+		'wpcloud_station_dev_admin_options_controller'
+	);
+}
+add_action( 'admin_menu', 'wpcloud_options_page' );
+/**
+ * Controller for the admin options page
+ */
+function wpcloud_station_dev_admin_options_controller(): void {
+	require_once plugin_dir_path( __FILE__ ) . 'options.php';
+}
+
+
+function wpcloud_station_dev_field_dev_log_render(): void {
+	$options = get_option( 'wpcloud_station_dev_settings' );
+	?>
+	<input type="checkbox" name="wpcloud_station_dev_settings[dev_log]" value="1" <?php checked( $options['dev_log'] ?? 0, 1 ); ?> />
+	<?php
+}

dev-plugin/admin/options.php

@@ -0,0 +1,29 @@
+<?php
+/**
+ * File description goes here.
+ *
+ * @package YourPackageName
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	die( '-1' );
+}
+
+
+?>
+<style>
+	.wp-cloud-settings {
+		.description {
+			width: 400px;
+		}
+	}
+</style>
+<div class="wrap wp-cloud-settings">
+	<h1>WP Cloud Dev</h1>
+	<form action="options.php" method="post">
+			<?php
+			settings_fields( 'wpcloud' );
+			do_settings_sections( 'wpcloud' );
+			submit_button( 'Save Settings' );
+			?>
+	</form>

dev-plugin/assets/js/logger.js

@@ -0,0 +1,131 @@
+window.onload = () => {
+	console.log('Station Dev Logger loaded');
+
+	let evtSrc = null;
+
+	function displayEvent({ event, data }) {
+
+		let eventMessage = `\x1B[94m[WPCLOUD DEV::\x1B[1m${event}]\x1B[m`;
+		logMessage = eventMessage.padEnd(40, ' ');
+
+		// Log API events
+		if (event.startsWith('API')) {
+			const { method, path } = data;
+			const showMethod = event.endsWith('REQUEST') ? method : ' >>>';
+			logMessage += `\x1B[92m${showMethod.padEnd(4, ' ')}\x1B[m ${path}`;
+
+			if (event.endsWith('RESPONSE')) {
+				code = data.response.code;
+				const { message, result } = data.response;
+
+				if (code >= 300) {
+					logMessage += `\x1B[31m - ${code} ${message} \x1B[m`;
+				} else {
+					logMessage += `\x1B[32m - ${code} ${ message }\x1B[m`;
+				}
+
+				if (result) {
+					logMessage += ' data:';
+					console.log(logMessage, result );
+					return
+				}
+				console.log(logMessage);
+			} else {
+				if ('POST' === method) {
+					console.log(logMessage, data.body)
+				} else {
+					console.log(logMessage)
+				}
+			}
+
+			return;
+		}
+
+		// Log PAGE_VIEW events
+		if ('PAGE_VIEW' === event) {
+			logMessage += `${data.url}`
+			console.log(logMessage);
+			return;
+		}
+
+		// default case
+		console.log(logMessage, data);
+	}
+
+	function logToIdxDb(data) {
+		const dbOpen = window.indexedDB.open("WpCloudLog", 1);
+
+		dbOpen.onsuccess = () => {
+			const db = dbOpen.result;
+			const transaction = db.transaction(["entries"], "readwrite");
+			const objectStore = transaction.objectStore("entries");
+			objectStore.add(data);
+		}
+		dbOpen.onerror = console.log.error;
+	}
+
+	function connectToServer(callback) {
+		console.log('connection to server');
+		evtSrc = new EventSource('/wpcloud-station-dev/sse');
+		evtSrc.addEventListener('wpcloud_event', callback);
+		return true;
+	}
+
+	function tailEvents() {
+		console.log('tailing events');
+		return connectToServer( (e) => {
+			const data = JSON.parse(e.data);
+			if (data) {
+				displayEvent(JSON.parse(data));
+			}
+		} );
+	}
+
+	function recordEvents() {
+		const dbOpen = window.indexedDB.open("WpCloudLog", 1);
+
+		dbOpen.onerror = console.error
+
+		dbOpen.onupgradeneeded = (e) => {
+			console.log('creating object store')
+			const db = e.target.result;
+			const os = db.createObjectStore("entries", { keyPath: "timestamp" })
+
+			os.createIndex("event", "event", { unique: false });
+			os.createIndex("timestamp", "timestamp", { unique: true });
+		}
+
+		return connectToServer( (e) => {
+			const data = JSON.parse(e.data);
+			if (data) logToIdxDb(JSON.parse(data));
+		} );
+	}
+
+	function replayLog(flush = true) {
+		const dbOpen = window.indexedDB.open("WpCloudLog", 1);
+		dbOpen.onsuccess = () => {
+			const db = dbOpen.result;
+			const os = db.transaction('entries', 'readwrite').objectStore('entries');
+
+			os.openCursor().onsuccess = (e) => {
+				const cursor = e.target.result;
+				if (!cursor) {
+					return;
+				}
+				displayEvent(cursor.value);
+				if (flush) {
+					cursor.delete();
+				}
+
+				cursor.continue();
+			}
+		}
+	}
+
+	window.wpcloudDevLog = {
+		tail : tailEvents,
+		record: recordEvents,
+		replay: replayLog,
+		eventSource: () => evtSrc
+	}
+};

dev-plugin/controllers/wpcloud-dev-sse-controller.php

@@ -0,0 +1,56 @@
+<?php
+/**
+ * WP Cloud Dev Log.
+ *
+ * @package wpcloud-dev
+ */
+
+// phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped
+// phpcs:disable WordPress.PHP.DevelopmentFunctions.error_log_error_log
+
+require_once rtrim( $_SERVER['DOCUMENT_ROOT'], '/' ) . '/wp-load.php'; // phpcs:ignore
+require_once rtrim( $_SERVER['DOCUMENT_ROOT'], '/' ) . '/wp-includes/user.php'; // phpcs:ignore
+require_once '../includes/class-wpcloud-dev-log.php'; // phpcs:ignore
+
+if ( ! current_user_can( 'administrator' ) ) { // phpcs:ignore
+	header( 'HTTP/1.0 403 Forbidden', true, 403 );
+}
+
+header( 'X-Accel-Buffering: no' );
+header( 'Content-Type: text/event-stream' );
+header( 'Cache-Control: no-cache' );
+
+
+$wait = 1;
+while ( true ) {
+	sleep( $wait );
+
+	$events = WPCLOUD_Dev_Log::flush_log();
+
+	foreach ( $events as $event ) {
+		echo 'event: wpcloud_event' . PHP_EOL;
+		echo 'id: ' . wp_get_session_token() . PHP_EOL;
+		echo 'data: ' . wp_json_encode( $event ) . PHP_EOL;
+		echo PHP_EOL;
+	}
+
+	if ( empty( $events ) ) {
+		echo 'event: wpcloud_event' . PHP_EOL;
+		echo 'id: ' . wp_get_session_token() . PHP_EOL;
+		echo 'data: ""' . PHP_EOL;
+		echo PHP_EOL;
+	}
+
+	if ( ob_get_contents() ) {
+		ob_end_flush();
+	}
+	flush();
+
+	if ( connection_aborted() ) {
+		error_log( 'Connection aborted' );
+		if ( ! WPCLOUD_Dev_Log::unlink_log() ) {
+			error_log( 'Failed to unlink log file' );
+		}
+		break;
+	}
+}