Skip to content

Add class to abstract Fast Refresh functionality #18

@claytoncollie

Description

@claytoncollie

Is your enhancement related to a problem? Please describe.

Most projects use Fast Refresh and Hot Module Reloading to build faster. These projects also have some boilerplate code that could be moved to the wp-framework to reduce the amount of code we need to maintain. The code is a rough guide and should be tweaked to follow this projects standards.

Abstract Class

<?php
namespace ProjectName;

/**
 * Development environment detection and tooling setup
 */
class DevelopmentEnvironment {

    /**
     * Check if we're in a development environment
     */
    public static function is_development(): bool {
        static $is_dev = null;
        
        if ( $is_dev === null ) {
            $is_local_env = in_array( wp_get_environment_type(), [ 'local', 'development' ], true );
            $is_local_url = strpos( home_url(), '.test' ) !== false || strpos( home_url(), '.local' ) !== false;
            $is_dev = $is_local_env || $is_local_url;
        }
        
        return $is_dev;
    }

    /**
     * Setup fast refresh for a plugin
     * 
     * @param string $plugin_dir Full path to plugin directory
     * @param string $dist_url Plugin's dist URL
     * @param string $dist_path Plugin's dist path
     * @param array $options Additional options for setup
     */
    public static function setup_fast_refresh( 
        string $plugin_dir, 
        string $dist_url, 
        string $dist_path,
        array $options = []
    ): void {
        
        if ( ! self::is_development() ) {
            return;
        }

        $fast_refresh_file = $plugin_dir . '/dist/fast-refresh.php';
        
        if ( ! file_exists( $fast_refresh_file ) ) {
            return;
        }

        require_once $fast_refresh_file;

        // Check if TenUpToolkit is available
        if ( ! function_exists( 'TenUpToolkit\set_dist_url_path' ) ) {
            // Log warning or provide fallback
            if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) {
                error_log( 'TenUpToolkit\set_dist_url_path not available for fast refresh in ' . basename( $plugin_dir ) );
            }
            return;
        }

        $plugin_name = $options['plugin_name'] ?? basename( $plugin_dir );
        
        \TenUpToolkit\set_dist_url_path( $plugin_name, $dist_url, $dist_path );
  
    }

    /**
     * Setup additional development tools
     */
    private static function setup_additional_dev_tools( string $plugin_dir, array $options ): void {
        // Add hooks for development-only features
        add_action( 'wp_enqueue_scripts', function() use ( $plugin_dir, $options ) {
            // Development-only scripts
            if ( isset( $options['dev_scripts'] ) ) {
                foreach ( $options['dev_scripts'] as $script ) {
                    wp_enqueue_script( $script['handle'], $script['src'], $script['deps'] ?? [], $script['version'] ?? '1.0.0', true );
                }
            }
        }, 999 );

        // Development-only admin notices
        if ( isset( $options['show_dev_notice'] ) && $options['show_dev_notice'] ) {
            add_action( 'admin_notices', function() use ( $plugin_dir ) {
                echo '<div class="notice notice-info"><p>';
                echo sprintf( 
                    'Development mode active for %s - Fast refresh enabled', 
                    esc_html( basename( $plugin_dir ) )
                );
                echo '</p></div>';
            });
        }
    }

    /**
     * Get development configuration for a plugin
     */
    public static function get_dev_config( array $defaults = [] ): array {
        $config = wp_parse_args( $defaults, [
            'fast_refresh' => true,
            'dev_scripts' => [],
            'show_dev_notice' => false,
            'enable_debug_logging' => true,
        ]);

        return $config;
    }
}

And the class inside the project

<?php

use TenupFramework\DevelopmentEnvironment;

DevelopmentEnvironment::setup_fast_refresh(
    __DIR__,
    PROJECT_DIST_URL,
    PROJECT_DIST_PATH,
    [
        'plugin_name' => 'project-name',
        'show_dev_notice' => true, // Optional: show dev mode notice
        'dev_scripts' => [ // Optional: additional dev scripts
            [
                'handle' => 'carousel-dev-tools',
                'src' => PROJECT_DIST_URL . 'dev-tools.js',
                'deps' => ['wp-blocks'],
            ]
        ]
    ]
);

OR

<?php
// Most plugins would just need this one line:
\TenupFramework\DevelopmentEnvironment::setup_fast_refresh( 
    __DIR__, 
    PROJECT_DIST_URL, 
    PROJECT_DIST_PATH 
);

Designs

No response

Describe alternatives you've considered

Should this code be inside the 10up toolkit project?

Code of Conduct

  • I agree to follow this project's Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels
    No fields configured for 🔨 Ready for Implementation.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions