- How does LivewireMesh differ from AlpineJS for Livewire integration?
- LivewireMesh eliminates AlpineJS as a middle layer by using Livewire’s native hooks (`useEntangle`, `useWire`) for direct React-Livewire communication. This reduces abstraction, improves performance, and enables granular UI components (e.g., custom inputs) to sync with Livewire’s server-driven logic without Alpine’s event system.
- Can I use LivewireMesh with Laravel Mix instead of Vite?
- LivewireMesh requires Vite for asset compilation by default, but the [INSTALL.md](https://github.com/EthanBarlo/LivewireMesh/blob/main/INSTALL.md) includes manual Livewire bundling instructions for Laravel Mix. However, Vite is recommended for optimal TypeScript support and dynamic imports. Migration from Mix may require additional configuration.
- What Laravel/Livewire versions does LivewireMesh support?
- LivewireMesh officially supports **Livewire 4+** (v0.6.0+) and Laravel 9+. While it may work with Livewire 3.x, backward compatibility isn’t guaranteed. Always check the [release notes](https://github.com/EthanBarlo/LivewireMesh/releases) for version-specific changes, especially if using older stacks.
- How do I handle form validation errors in React components with LivewireMesh?
- Use the `useErrorBag` hook to expose Laravel validation errors to React. Errors are automatically synced with Livewire’s `$errors` property, but cross-layer issues (e.g., flash messages) may need custom handling. For complex forms, combine `useEntangle` with `wire:model` for seamless validation state management.
- Is LivewireMesh suitable for replacing entire Livewire components with React?
- While possible, LivewireMesh is optimized for **granular UI components** (e.g., custom inputs, tables, or charts) rather than full-page replacements. Replacing entire Livewire components with React may introduce state management complexity, especially if the component relies heavily on Livewire’s server-side logic or emits events.
- How do I debug issues when React and Livewire states are out of sync?
- Enable LivewireMesh’s debug logs (check the [docs](https://github.com/EthanBarlo/LivewireMesh) for configuration) to trace state changes. Common culprits include missing `useEntangle` bindings, race conditions in `useWire` method calls, or dynamic component mounting issues. Verify TypeScript types for `useEntangle<T>` to catch runtime mismatches early.
- What’s the performance impact of dynamic asset loading in LivewireMesh?
- Dynamic imports (introduced in v0.6.1) improve reliability for dynamic components but may increase cold-start latency. Benchmark against AlpineJS or Inertia.js for critical paths. For static components, preload assets or use Vite’s `preload` directive. The tradeoff is worth it for projects with mixed React/Livewire workflows.
- Can I use LivewireMesh without TypeScript?
- LivewireMesh’s generic hooks (e.g., `useEntangle<number>()`) require TypeScript for type safety, but you can use runtime validation (e.g., `zod`) as a fallback. Without TypeScript, you’ll lose compile-time checks for prop types, increasing runtime errors. The package assumes a TypeScript-first approach aligned with Vite’s ecosystem.
- How do I migrate from AlpineJS to LivewireMesh in an existing project?
- Start by identifying AlpineJS components that interact with Livewire (e.g., `x-model`, `x-on:livewire`). Replace them with Mesh equivalents: use `useEntangle` for two-way binding, `useWire` for Livewire methods, and `wire:model` for form inputs. Test incrementally—begin with non-critical components to validate the migration path.
- Are there alternatives to LivewireMesh for React-Livewire integration?
- Alternatives include **Inertia.js** (full-stack React with Laravel backend), **AlpineJS + Livewire** (lighter but less integrated), or **MingleJS** (inspired LivewireMesh but less mature). Inertia.js is better for SPAs, while AlpineJS offers simplicity. LivewireMesh is unique in its **direct Livewire hooks integration**, making it ideal for hybrid React/Livewire apps without full SPA overhead.