MagewirePHP
repository·main·Indexed 42 days ago
https://github.com/magewirephp/magewireA library for Magento 2 that enables reactive, server-driven UI development using only PHP. Inspired by Laravel Livewire, it allows developers to build dynamic frontend components—such as real-time search, product forms, and filters—without writing custom JavaScript. Version 3.0 is a rewrite based on Livewire v3, requiring PHP >=8.2.
What's inside Magewire
- MagewirePHP is a library for Magento 2 that enables reactive, server-driven UI development using only PHP. Inspired by Laravel Livewire, it allows developers to build dynamic frontend components (such as real-time search, product forms, filters, modals, and configurators) without writing custom JavaScript. The component logic is maintained in PHP and is fully integrated with Magento's architecture.
Magewire 3.0 vs Upstream Livewire v3 Differences
mainIf you are familiar with Laravel Livewire v3, note these Magewire-specific implementation details:
- Component Discovery: Magewire does not use
Livewire::component(). Components are discovered via Magento layout XML (e.g.,<block class="..."/>) and resolved byResolveComponents. - Service Registration: Mechanisms and Features are registered via area-scoped Magento DI (
etc/frontend/di.xmloretc/adminhtml/di.xml), not via global service providers. - The app() Bridge: Calls to
app('livewire')orapp('redirect')are supported;Containersmaps these to Magento DI bindings. - Update Endpoint: AJAX updates are POSTed to
magewire/update(a custom router), not/livewire/update. - Template Compiler: The compiler is opt-in per directive area and can be extended via DI
virtualTypesto allow themes to add custom directive namespaces.
- Component Discovery: Magewire does not use
Handle Breaking Changes in wire:model and Entangle
mainIn Magewire 3.0, updates are deferred by default. If you require the immediate update behavior found in v1, you must use specific modifiers.
wire:model
To make
wire:modellive (updating on every input/change), use the.livemodifier:- <input wire:model="query" /> + <input wire:model.live="query" />Entangle
Similarly,
@entanglenow defers updates. To match v1 behavior, use the.liveor.blurmodifiers:@entangle('prop').live // or @entangle('prop').blurNote: If you have applied the
#[HandleBackwardsCompatibility]attribute to your component, plainwire:modeland@entangle('prop')will be mapped back to their v1 live semantics automatically.<input wire:model.live="query" />Upgrading from Magewire 1.x
mainMagewire 1.x is no longer actively maintained and only receives security-related updates. For new features and regular bug fixes, you should upgrade to the latest major version.
Key migration areas include:
- Dependency changes
- The
#[HandleBackwardsCompatibility]attribute (opt-in) - Changes to
wire:modelsemantics
For detailed migration steps, refer to the
UPGRADING.mdfile in the repository.Enable Backwards Compatibility for Magewire 1.x Components
mainMost Magewire 1.x components can continue working using a Backwards Compatibility (BC) layer. You must opt-in per-component by applying the
#[HandleBackwardsCompatibility]attribute to your component class.Without this attribute, the component will use Magewire 3.0 semantics. When applied, it flips a
bcmemo flag in the component snapshot to maintain v1 behavior.use Magewirephp\Magewire\Features\SupportMagewireBackwardsCompatibility\Attributes\HandleBackwardsCompatibility; #[HandleBackwardsCompatibility] class MyComponent extends \Magewirephp\Magewire\Component { // v1-style code keeps working }Upgrade from Magewire 1.x to 3.0
mainMagewire 3 is a full rewrite based on a port of Laravel Livewire v3. To upgrade from 1.x, follow these steps:
1. Update Requirements
- PHP: Upgrade to
>=8.2. - Magento: Any 2.x version.
2. Update Composer Dependencies
Change your
composer.jsonconstraint for Magewire:- "magewirephp/magewire": "^1.13" + "magewirephp/magewire": "^3.0"Note on dependencies:
rakit/validationis replaced bymagewirephp/validation. This is a drop-in fork using the sameRakit\Validation\namespace. If you explicitly requirerakit/validationin your owncomposer.json, remove it.magento/frameworkis no longer a required dependency of Magewire.
3. Run Magento Upgrade Commands
After updating composer, execute the following to refresh the environment:
composer update magewirephp/magewire --with-all-dependencies bin/magento setup:upgrade bin/magento setup:di:compile bin/magento cache:flush- PHP: Upgrade to
Use multiple paginators in a Magewire component
mainWhen using the
WithPaginationtrait, you can manage multiple independent paginated sets within a single Magewire component by providing a unique name to the pagination methods.- Default Paginator: Methods like
getPage()andnextPage()without arguments operate on the default paginator. - Named Paginators: Methods like
getPage('name'),nextPage('name'), andpreviousPage('name')allow you to control a specific paginated instance identified by the string'name'.
// Using the default paginator $page = $this->getPage(); $this->nextPage(); // Using a named paginator $itemPage = $this->getPage('item-page'); $this->nextPage('item-page'); $this->previousPage('item-page');- Default Paginator: Methods like
Implement pagination lifecycle hooks
mainMagewire provides lifecycle hooks that are triggered when a page changes. The naming convention for these hooks depends on whether you are using the default paginator or a named one:
- Default Paginator: Use the
updatedPage(int $page)method. - Named Paginators: Use the kebab-cased name of the paginator in the method name:
updated{KebabCasedName}(int $page). For example, a paginator nameditem-pagetriggersupdatedItemPage(int $page).
// Triggered when the default page changes public function updatedPage(int $page): void { // logic here } // Triggered when the 'item-page' changes public function updatedItemPage(int $page): void { // logic here }- Default Paginator: Use the
Configure Portman transformations and renaming
mainThe
transformationssection allows you to modify the code structure during the porting process. This is primarily used for namespace remapping and cleaning up incompatible methods.- Namespace Renaming: Map an existing namespace to a new one using the
renamekey. For example, mappingLivewire\toMagewirephp\Magewire\. - Class Renaming: Within a namespace transformation, you can target specific classes and use
renameto change their names. - Method Removal: Use
remove-methodsto strip out methods that are incompatible with the target environment (e.g., removing Laravel-specific routing methods when porting to Magento). This can be applied to specific classes within thechildrenarray of a namespace transformation. - Docblock Modification: Use
file-doc-blockto overwrite the file-level docblock for a specific namespace, which is useful for updating copyright information.
'transformations' => [ 'Livewire\' => [ 'rename' => 'Magewirephp\Magewire\', 'children' => [ 'LivewireManager' => [ 'rename' => 'MagewireManager', 'remove-methods' => [ 'setProvider', 'provide', ] ] ] ], 'Magewirephp\Magewire\' => [ 'file-doc-block' => '/** * Magewire copyright © Willem Poortman 2024-present. */', ] ]- Namespace Renaming: Map an existing namespace to a new one using the
Configure Portman post-processors
mainThe
post-processorsconfiguration allows you to enable or disable automated code styling and refactoring tools that run after the transformation process is complete.Supported keys:
rector: Boolean to enable/disable Rector for automated refactoring.php-cs-fixer: Boolean to enable/disable PHP CS Fixer for code style enforcement.
'post-processors' => [ 'rector' => false, 'php-cs-fixer' => false ]Configure Portman directory settings
mainThe
directoriesconfiguration defines how Portman identifies, filters, and processes source files. It is divided intosource,augmentation, andoutputsections.source: Defines the input files. You can specify a path (e.g.,portman/lib/Livewire) and provide acomposerconfiguration block to map the package name, version, and base path. Useglobto define file patterns andignoreto exclude specific files or directories using glob patterns.augmentation: Specifies additional directories or packages to include in the process.output: Defines the destination directory for the processed files (e.g.,dist).
return [ 'directories' => [ 'source' => [ 'portman/lib/Livewire' => [ 'composer' => [ 'name' => 'livewire/livewire', 'version' => '~3.7.15', 'version-lock' => '3.7.15', 'base-path' => 'src' ], 'glob' => '**/*.php', 'ignore' => [ 'Exceptions/*', 'Features/SupportEvents/TestsEvents.php', ] ] ], 'augmentation' => [ 'portman/Livewire' ], 'output' => 'dist' ], ];Replace LayoutRenderLifecycle with RenderLifecycleManager
mainTheLayoutRenderLifecycleclass is deprecated. Developers should migrate to usingRenderLifecycleManagerfor managing layout rendering lifecycles. For implementation details regarding the new manager, refer to theLayoutLifecycleManageror theRenderLifecycleManagerdocumentation.