wp-plugin-reactjs.php

<?php
/**
 * Plugin Name: WordPress Plugin ReactJS
 * Plugin URI: https://github.com/younes-dro/wp-plugin-reactjs
 * Description: A WordPress Plugin starter for developers who want to use ReactJS in the development of WordPress Plugins.
 * Version:1.0.0
 * Author: Younes DRO
 * Author URI: https://github.com/younes-dro/
 * License: GPL-2.0+
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: dro-wp-plugin-reactjs
 * Domain Path: /languages
 *
 * @package WP_Plugin_ReactJS
 */

/*
	Copyright 2019 Younes DRO (email : younesdro at gmail.com)
	This program is free software; you can redistribute it and/or modify
	it under the terms of the GNU General Public License as published by
	the Free Software Foundation; either version 2 of the License, or
	(at your option) any later version.

	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	GNU General Public License for more details.

	You should have received a copy of the GNU General Public License
	along with this program; if not, write to the Free Software
	Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/

// Make sure we don't expose any info if called directly.
if ( ! function_exists( 'add_action' ) ) {
	exit;
}


/**
 * Hook the 'dro_create_menu' function into the 'admin_menu' action.
 * This function is responsible for adding a submenu to the Settings menu.
 * The submenu page will contain the ID of the HTML element that hosts the JSX components.
 */
add_action( 'admin_menu', 'dro_create_menu' );

/**
 * Adds a submenu to the Tools menu.
 * The page will contain the ID of the HTML element that hosts our JSX components.
 *
 * @return void
 */
function dro_create_menu() {
	add_submenu_page(
		'tools.php',
		esc_html__( 'WP Plugin Using ReactJS', 'dro-wp-plugin-reactjs' ),
		esc_html__( 'WP Plugin React', 'dro-wp-plugin-reactjs' ),
		'manage_options',
		'dro-wp-plugin-js',
		'dro_display_menu'
	);
}


/**
 * Callback function to display the submenu page.
 * Outputs the HTML element with the ID 'main' where JSX components will be rendered.
 *
 * @return void
 */
function dro_display_menu() {
	echo '<div id="main"></div>';
}


/**
 * Hook the 'dro_enqueue_script' function into the 'admin_enqueue_scripts' action.
 * This function is responsible for enqueueing the JavaScript script generated by WebPack.
 */
add_action( 'admin_enqueue_scripts', 'dro_enqueue_script' );

/**
 * Enqueues the JavaScript script generated by WebPack for the plugin.
 *
 * @return void
 */
function dro_enqueue_script() {
    
    $is_dev = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG;


    $bundle_path = $is_dev 
        ? plugins_url( '/public/bundle.js', __FILE__ ) // Development bundle
        : plugins_url( '/dist/public/bundle.js', __FILE__ ); // Production bundle

	$version = file_exists( $bundle_path ) ? filemtime( $bundle_path ) : time();

    wp_enqueue_script(
        'dro-plugin-reactjs',
        $bundle_path,
        array( 'wp-element', 'wp-components' ),
        $version,
        true 
    );

    // Localize dynamic settings
    wp_localize_script( 'dro-plugin-reactjs', 'wpPluginReactConfig', array(
        'apiBaseUrl' => get_rest_url(), // Dynamic API Base URL
        'featureToggles' => array(
            'enableExperimentalFeature' => true, // Example toggle
        ),
        'appVersion' => '1.0.1', // Dynamic app version
    ) );	
}