WordPress Class Webpack Encore

class-webpack-encore.php

<?php
/**
 * Helper for the loading of script and style assets.
 *
 * Inspired from: https://phatkoala.uk/webpack-encore-for-wordpress
 * Description: Manage your theme's assets.
 */

if ( ! defined( 'ABSPATH' )  ) {
	echo 'ABS PATH IS NOT DEFINED';
	exit; // Exit if accessed directly
}

/**
 * Class WebpackEncore
 */
class WebpackEncore {
	/**
	 * @var WebpackEncore|null
	 */
	private static $instance;

	/**
	 * @var array
	 */
	private $assets = [ ];

	/**
	 * @var array
	 */
	private $entries = [ ];

	/**
	 * Returns an instance.
	 */
	public static function getInstance() {
		if ( is_null( self::$instance ) ) {
			self::$instance = new self();
		}

		return self::$instance;
	}

	/**
	 * WebpackEncore constructor.
	 */
	protected function __construct() {
		add_action( 'init', array( $this, 'init' ) );
	}

	/**
	 * Initialises the WebpackEncore class.
	 */
	public function init() {
		$this->load( get_template_directory(), get_template_directory_uri() );

		if ( is_child_theme() ) {
			$this->load( get_stylesheet_directory(), get_stylesheet_directory_uri() );
		}
	}

	/**
	 * @param string $directory
	 * @param string $uri
	 */
	public function load( $directory, $uri ) {
		$this->loadManifest( $directory, $uri );
		$this->loadEntryPoints( $directory, $uri );
	}

	/**
	 * Loads the contents of the manifest.json file.
	 *
	 * @param string $directory
	 * @param string $uri
	 * @return bool
	 */
	public function loadManifest( $directory, $uri ) {
		$file = sprintf( '%s/assets/dist/manifest.json', $directory );
		if ( ! file_exists( $file ) ) {
			return false;
		}

		foreach ( json_decode( file_get_contents( $file ), true ) as $original => $compiled ) {
			$this->assets[ sprintf( '%s/assets/src/js/%s', $uri, $original ) ] = sprintf( '%s/assets/dist%s', $uri, $compiled );
		}

		return true;
	}

	/**
	 * Loads the contents of the entrypoints.json file.
	 *
	 * @param string $directory
	 * @param string $uri
	 * @return bool
	 */
	public function loadEntryPoints( $directory, $uri ) {
		$file = sprintf( '%s/assets/dist/entrypoints.json', $directory );
		if ( ! file_exists( $file ) ) {
			return false;
		}

		foreach ( json_decode( file_get_contents( $file ), true ) as $entryPoints ) {
			foreach ( $entryPoints as $entryName => $entryPoint ) {
				foreach ( $entryPoint as $key => $assets ) {
					foreach ( $assets as $asset ) {
						$this->entries[$entryName][$key][] = sprintf( '%s', $asset );
					}
				}
			}
		}

		return true;
	}

	/**
	 * Gets the CSS files from an entry.
	 *
	 * @param string $entry
	 * @return array
	 */
	public function entry_css( $entry ) {
		return $this->entry( $entry, 'css' );
	}

	/**
	 * Gets the JS files from an entry.
	 *
	 * @param string $entry
	 * @return array
	 */
	public function entry_js( $entry ) {
		return $this->entry( $entry, 'js' );
	}

	/**
	 * Returns the entries array.
	 *
	 * @param string $entry
	 * @param string $key
	 * @return array
	 */
	public function entry( $entry, $key ) {
		$entries = [ ];

		if ( isset( $this->entries[$entry][$key] ) ) {
			foreach ( $this->entries[$entry][$key] as $asset ) {
				$entries[] = $asset;
			}
		}

		return $entries;
	}

	/**
	 * Enqueues the CSS assets.
	 *
	 * @param string $entry
	 */
	public function enqueue_entry_css( $entry ) {
		foreach ( $this->entry( $entry, 'css' ) as $key => $asset ) {
			wp_enqueue_style( sprintf( '%s-%d', $entry, $key ), $asset, [ ], null );
		}
	}

	/**
	 * Enqueues the JS assets.
	 *
	 * @param string
	 */
	public function enqueue_entry_js( $entry )
	{
		foreach ( $this->entry( $entry, 'js' ) as $key => $asset ) {
			wp_enqueue_script( sprintf( '%s-%d', $entry, $key ), $asset, [ ], null, true );
		}
	}
}

functions.php

require( trailingslashit( get_template_directory() ) . 'inc/class-webpack-encore.php' );

class Site_Setup {
	/**
	 * Class constructor.
	 */
	public function __construct() {
		$this->load_hooks();
		$this->webpackEncore = WebpackEncore::getInstance();
	}

	public function load_hooks() {
		add_action( 'wp_enqueue_scripts',     array( $this, 'assets' ) );
	}

	/**
	 * Enqueue assets
	 */
	public function assets() {
		$this->webpackEncore->enqueue_entry_css( 'app' );
		$this->webpackEncore->enqueue_entry_js( 'app' );
		$this->webpackEncore->enqueue_entry_js( 'skip-link-focus' );

		if ( is_single() ) {
			$this->webpackEncore->enqueue_entry_js( 'print-friendly' );
		}
	}
}