buildPath = __DIR__ . '/../dist';
$this->publicPath = '/dist';
// Load manifest if it exists
$this->loadManifest();
}
/**
* Load webpack manifest for asset management
*/
private function loadManifest(): void
{
$manifestPath = $this->buildPath . '/static/js/manifest.json';
if (file_exists($manifestPath)) {
$manifest = json_decode(file_get_contents($manifestPath), true);
$this->manifest = $manifest ?: [];
}
}
/**
* Check if React build exists
*/
public function isBuilt(): bool
{
return file_exists($this->buildPath . '/static/js/bundle.js') &&
file_exists($this->buildPath . '/static/css/main.css');
}
/**
* Get JavaScript bundle URL
*/
public function getJsBundle(): string
{
if (isset($this->manifest['main.js'])) {
return $this->publicPath . '/' . $this->manifest['main.js'];
}
return $this->publicPath . '/static/js/bundle.js';
}
/**
* Get CSS bundle URL
*/
public function getCssBundle(): string
{
if (isset($this->manifest['main.css'])) {
return $this->publicPath . '/' . $this->manifest['main.css'];
}
return $this->publicPath . '/static/css/main.css';
}
/**
* Render React root element
*/
public function renderRoot(string $elementId = 'react-app', array $props = []): string
{
$propsJson = json_encode($props, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
return "";
}
/**
* Render React scripts
*/
public function renderScripts(): string
{
if (!$this->isBuilt()) {
return $this->renderFallbackScripts();
}
$jsUrl = $this->getJsBundle();
$cssUrl = $this->getCssBundle();
$scripts = [];
// CSS
if (file_exists($this->buildPath . str_replace($this->publicPath, '', $cssUrl))) {
$scripts[] = "";
}
// JavaScript
$scripts[] = "";
return implode("\n", $scripts);
}
/**
* Render fallback scripts when React is not built
*/
private function renderFallbackScripts(): string
{
return "";
}
/**
* Initialize React app with props
*/
public function initApp(string $elementId = 'react-app', array $props = []): string
{
$propsJson = json_encode($props, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
$script = <<
document.addEventListener('DOMContentLoaded', function() {
const element = document.getElementById('{$elementId}');
if (element && window.React && window.ReactDOM) {
const props = {$propsJson};
// React app will be initialized here
console.log('React app initialized with props:', props);
}
});
JS;
return $script;
}
/**
* Get React component HTML
*/
public function getComponentHtml(string $componentName, array $props = []): string
{
if (!$this->isBuilt()) {
return $this->getFallbackHtml($componentName, $props);
}
// In a real implementation, this would render the component server-side
// For now, return a placeholder that will be hydrated by React
$propsJson = json_encode($props, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
return "
Loading...
";
}
/**
* Get fallback HTML when React is not available
*/
private function getFallbackHtml(string $componentName, array $props = []): string
{
switch ($componentName) {
case 'App':
return $this->getAppFallbackHtml($props);
case 'Navigation':
return $this->getNavigationFallbackHtml($props);
case 'ContactForm':
return $this->getContactFormFallbackHtml($props);
default:
return "
Component: {$componentName}
";
}
}
/**
* Get app fallback HTML
*/
private function getAppFallbackHtml(array $props = []): string
{
return <<
🚀 SoftEdge Corporation - React Integration
Componentes React não disponíveis. Execute 'npm run build' para ativar.
HTML;
}
/**
* Check if we should use fallback mode
*/
public function shouldUseFallback(): bool
{
return !$this->isBuilt() || isset($_GET['react_fallback']);
}
/**
* Get build status information
*/
public function getBuildStatus(): array
{
return [
'is_built' => $this->isBuilt(),
'build_path' => $this->buildPath,
'public_path' => $this->publicPath,
'has_manifest' => !empty($this->manifest),
'manifest_count' => count($this->manifest),
];
}
}