MagewirePHP

https://github.com/magewirephp/magewire
Admin
MagewirePHP brings reactive, server-driven UI development to Magento 2 without writing JavaScript,...
Tokens:159,876
Snippets:901
Trust Score:8.7
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Set up Magewire development environment

Source: https://github.com/magewirephp/magewire/blob/main/CONTRIBUTING.md

Clones the Magewire repository, installs PHP dependencies with Composer, and installs Node.js dependencies for Tailwind compilation. Composer install automatically wires up CaptainHook, which enforces pre-commit and commit-msg hooks.

```bash
git clone https://github.com/magewirephp/magewire.git
cd magewire
composer install
npm install
```

--------------------------------

### Install dev-dependencies

Source: https://github.com/magewirephp/magewire/blob/main/tests/Playwright/README.md

Install all dev-dependencies required for the Playwright tests.

```sh
npm install
```

--------------------------------

### Run composer update and Magento setup commands

Source: https://github.com/magewirephp/magewire/blob/main/UPGRADING.md

After updating the composer constraint, run these commands to update dependencies and recompile Magento. The commands are composer update, setup:upgrade, setup:di:compile, and cache:flush.

```bash
composer update magewirephp/magewire --with-all-dependencies
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento cache:flush
```

--------------------------------

### Install module via Composer path repository

Source: https://github.com/magewirephp/magewire/blob/main/CONTRIBUTING.md

Composer configuration to install the module into a real Magento 2 project via a path repository during development.

```json
{
  "repositories": [
    { "type": "path", "url": "/path/to/magewire" }
  ],
  "require": { "magewirephp/magewire": "*" }
}
```

--------------------------------

### Run Playwright E2E tests

Source: https://github.com/magewirephp/magewire/blob/main/CONTRIBUTING.md

Commands to set up and run Playwright end-to-end tests. Requires Magento with Sample Data installed; fixtures provide guest, customer, admin, and API browser contexts.

```bash
cd tests/Playwright
cp .env.example .env    # configure BASE_URL + credentials
npm install && npx playwright install
npx playwright test                          # headless
npx playwright test --ui                     # interactive
npx playwright test tests/example.spec.ts    # single file
```

--------------------------------

### Navigate to Playwright tests directory

Source: https://github.com/magewirephp/magewire/blob/main/tests/Playwright/README.md

Navigate into the Playwright tests directory before installing dependencies or running tests.

```sh
cd tests/Playwright
```

--------------------------------

### Breaking change commit message example

Source: https://github.com/magewirephp/magewire/blob/main/CONTRIBUTING.md

Example of a breaking change commit message. Append ! after the type/scope and add a BREAKING CHANGE: footer. Release-please uses these to cut version bumps and generate CHANGELOG.md.

```text
feat(component)!: drop deprecated mount() signature

BREAKING CHANGE: Components must now implement boot() instead of mount().
```

--------------------------------

### Conventional Commits message examples

Source: https://github.com/magewirephp/magewire/blob/main/CONTRIBUTING.md

Examples of Conventional Commits messages. The format is <type>(<scope>): <subject>, with common types including feat, fix, chore, docs, refactor, test, perf, and ci. These messages are enforced by the commit-msg hook and used by release-please to cut version bumps and generate CHANGELOG.md.

```text
feat(compiler): add @render.parent directive
fix(snapshot): handle null property reassignment
chore(portman): bump Livewire to 3.7.12
```

--------------------------------

### Update composer constraint to ^3.0

Source: https://github.com/magewirephp/magewire/blob/main/UPGRADING.md

Change the magewirephp/magewire version constraint in composer.json from ^1.13 to ^3.0. This is a diff-style example showing the before and after lines.

```diff
- "magewirephp/magewire": "^1.13"
+ "magewirephp/magewire": "^3.0"
```

--------------------------------

### Run pre-PR code style checks

Source: https://github.com/magewirephp/magewire/blob/main/CONTRIBUTING.md

Run these commands before opening a pull request to ensure code style compliance. The commands lint and format hand-written code with mago, build with portman, and fix generated code in dist/ with php-cs-fixer.

```bash
mago lint
mago format
vendor/bin/portman build
vendor/bin/php-cs-fixer fix dist/
```

--------------------------------

### Create .env config file

Source: https://github.com/magewirephp/magewire/blob/main/tests/Playwright/README.md

Create a .env config file in the root Playwright folder. Set BASE_URL to the base-url of your Magento instance.

```text
BASE_URL=https://local.test/

ENVIRONMENT=local
ACCOUNT_FIRSTNAME=Veronica
ACCOUNT_LASTNAME=Costello
ACCOUNT_EMAIL=roni_cost@example.com
ACCOUNT_PASSWORD=roni_cost3@example.com
```

--------------------------------

### Opt into v1 backwards compatibility with #[HandleBackwardsCompatibility] attribute

Source: https://github.com/magewirephp/magewire/blob/main/UPGRADING.md

Add this attribute to a component class to enable the v1 BC layer. Without it, new v3 semantics apply. The attribute flips a 'bc' memo flag in the component snapshot.

```php
use Magewirephp\Magewire\Features\SupportMagewireBackwardsCompatibility\Attributes\HandleBackwardsCompatibility;

#[HandleBackwardsCompatibility]
class MyComponent extends \Magewirephp\Magewire\Component
{
    // v1-style code keeps working
}
```

--------------------------------

### Run tests

Source: https://github.com/magewirephp/magewire/blob/main/tests/Playwright/README.md

Run the Playwright tests.

```sh
npm run test
```

--------------------------------

### Run tests manually with UI

Source: https://github.com/magewirephp/magewire/blob/main/tests/Playwright/README.md

Run tests manually with the Playwright UI (optional).

```sh
npx playwright test --ui
```

--------------------------------

### Change wire:model to wire:model.live for v1 live behavior

Source: https://github.com/magewirephp/magewire/blob/main/UPGRADING.md

Livewire v3 defers wire:model updates by default. Use wire:model.live to restore v1 live behavior. The BC attribute maps plain wire:model back to live semantics for tagged components.

```diff
- <input wire:model="query" />
+ <input wire:model.live="query" />
```
Tokens:
Raw