Snippets

Brian Gottier WP Enqueue React

Created by Brian Gottier
<?php

// Production
if( strpos( __DIR__, $options['devIdentifier'] ) === FALSE )
{
	// The /build/static/js/ directory
	$buildJsDir = realpath( __DIR__ . '/../react-app/build/static/js/' ) . '/';

	// The /build/static/js/ URL prefix
	$buildJsUrlPrefix = '/wp-content/plugins/simple-invoicing-w-stripe/react-app/build/static/js/';

	// Get all files
	$jsFiles = scandir( $buildJsDir );

	// Runtime main
	$runtimeMainFiles = preg_grep( '|^runtime~main.*js$|', $jsFiles );
	$runtimeMainFile = current($runtimeMainFiles);
	$path = $buildJsDir . $runtimeMainFile;
	$url = $buildJsUrlPrefix . $runtimeMainFile;
	wp_enqueue_script(
		'reactRuntimeMain', 
		$url, 
		[], 
		filemtime($path), 
		TRUE
	);
	
	// Chunk
	$chunkFiles = preg_grep( '|^(?!main).*chunk\.js$|', $jsFiles );
	$chunkFile = current($chunkFiles);
	$path = $buildJsDir . $chunkFile;
	$url = $buildJsUrlPrefix . $chunkFile;
	wp_enqueue_script(
		'reactChunk', 
		$url, 
		['reactRuntimeMain'], 
		filemtime($path),
		TRUE
	);

	// Main Chunk
	$mainChunkFiles = preg_grep( '|^main.*chunk\.js$|', $jsFiles );
	$mainChunkFile = current($mainChunkFiles);
	$path = $buildJsDir . $mainChunkFile;
	$url = $buildJsUrlPrefix . $mainChunkFile;
	wp_enqueue_script(
		'reactMainChunk', 
		$url, 
		['reactRuntimeMain','reactChunk'], 
		filemtime($path),
		TRUE
	);
}

// Development
else
{
	// Bundle
	wp_enqueue_script(
		'reactBundle', 
		'https://localhost:3000/static/js/bundle.js', 
		[], 
		1, 
		TRUE
	);

	// Chunk
	wp_enqueue_script(
		'reactChunk', 
		'https://localhost:3000/static/js/0.chunk.js', 
		[], 
		1, 
		TRUE
	);

	// Main Chunk
	wp_enqueue_script(
		'reactMainChunk', 
		'https://localhost:3000/static/js/main.chunk.js', 
		['reactBundle','reactChunk'], 
		1, 
		TRUE
	);
}

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.