Add JavaScript flag support

Jonny Bull · Jonny Bull · commit a8277cba27e5 · 2021-10-08T15:10:52.000+01:00
diff --git a/README.md b/README.md
@@ -66,6 +66,25 @@ if ( flagpole_flag_enabled( 'flag_key' ) ) {
 
 Replace `flag_key` with the key used in the register function to check if it is enabled.
 
+It is also possible to use the same function in JavaScript and get the same results:
+
+```javascript
+if ( flagpole_flag_enabled( 'flag_key' ) ) {
+	/* flag_key is enabled! */
+}
+```
+
+However, checking the Flagpole function exists before expecting it to return a value is recommended. This prevents JavaScript files from breaking if the plugin is not enabled on your project.
+
+```javascript
+const flagEnabled = typeof( flagpole_flag_enabled ) === 'function' && flagpole_flag_enabled( 'flag_key' );
+
+if ( flagEnabled ) {
+	/* flag_key is enabled! */
+}
+```
+
+
 #### Flag options/arguments
 
 
diff --git a/flagpole.php b/flagpole.php
@@ -25,6 +25,7 @@
 }
 
 use Flagpole\Flagpole;
+use Flagpole\JavaScript;
 
 // Define plugin paths and url for global usage.
 define( 'FLAGPOLE_PLUGIN_PATH', plugin_dir_path( __FILE__ ) );
@@ -100,6 +101,8 @@ function flagpole_admin_imports( $hook ) {
 require plugin_dir_path( __FILE__ ) . 'includes/api/api.general.php';
 require plugin_dir_path( __FILE__ ) . 'includes/api/api.shortcode.php';
 
+require_once( plugin_dir_path( __FILE__ ) . 'includes/javascript/class-javascript.php' );
+
 /**
  * AJAX Action toggling features from the WP admin area.
  */
@@ -176,8 +179,12 @@ function flagpole_create_group() {
 	$validation = array_filter( $validation );
 
 	if ( $validation ) {
-		$result = Flagpole::init()->create_group( $validation['group-key'], $validation['group-name'],
-			$validation['group-desc'], $validation['group-private'] );
+		$result = Flagpole::init()->create_group(
+			$validation['group-key'],
+			$validation['group-name'],
+			$validation['group-desc'],
+			$validation['group-private']
+		);
 
 		flagpole_operation_redirect( $result );
 	}
@@ -338,3 +345,5 @@ function flagpole_operation_redirect( $error_code = false, $redirect = true ) {
 add_shortcode( 'debugFlagpole_flags', 'flagpole_shortcode_debug_flags' );
 add_shortcode( 'debugFlagpole_groups', 'flagpole_shortcode_debug_groups' );
 add_shortcode( 'debugFlagpole_db', 'flagpole_shortcode_debug_db' );
+
+( new JavaScript() )->init();
diff --git a/includes/javascript/class-javascript.php b/includes/javascript/class-javascript.php
@@ -0,0 +1,62 @@
+<?php
+/**
+ * JavaScript Class
+ *
+ * Inserts feature flag object and a corresponding flagpole_flag_enabled function into the <head>.
+ *
+ * @package flagpole
+ */
+
+namespace Flagpole;
+
+/**
+ * Class Flagpole_JavaScript.
+ *
+ * @package FeatureFlags
+ */
+class JavaScript {
+	/**
+	 * Initialise filters.
+	 */
+	public function init() {
+		add_action( 'wp_head', array( $this, 'print_flagpole_js' ) );
+	}
+
+	/**
+	 * Reduces the full array of flagpole flag objects into an array of enabled array keys.
+	 * Returns an empty array if the 'flagpole_flag_enabled' PHP function is not present.
+	 *
+	 * @param array $flag_list The defined flags.
+	 * @return array The keys of enabled flags.
+	 */
+	private function enabled_flag_filter( array $flag_list ) {
+		$filtered_list = array();
+
+		foreach ( $flag_list as $flag ) {
+			if ( flagpole_flag_enabled( $flag->key ) ) {
+				$filtered_list[] = $flag->key;
+			}
+		}
+
+		return $filtered_list;
+	}
+
+	/**
+	 * Prints a flagpole_flag_enabled function.
+	 * The function returns 'true' if the flag is in our list of enabled flags.
+	 * Otherwise, it returns false.
+	 *
+	 * @return void
+	 */
+	public function print_flagpole_js() {
+		$available_flags = self::enabled_flag_filter( Flagpole::init()->get_flags() );
+		?>
+		<script>
+			var flagpole_flag_enabled = function( ff ) {
+				const flist = <?= wp_json_encode( $available_flags ); ?>;
+				return flist.indexOf( ff ) !== -1;
+			}
+		</script>
+		<?php
+	}
+}
