# loki/magento2-components

> Core module for defining Alpine.js components with advanced AJAX features

`composer require loki/magento2-components`

Canonical URL: https://packagento.com/loki/magento2-components

## At a glance

- **Vendor**: loki (https://packagento.com/loki.md)
- **Latest version**: 2.5.2 — released 2026-06-19
- **Pricing**: Free
- **Package type**: Magento 2 module
- **Status**: active, accepting new buyers

## Installation

Packagento is licence-gated, so even free packages need a licence on a project before Composer can resolve them.

1. **Sign in or create an account** at https://packagento.com/customer/account/.

2. **Add the package to your account.** Open https://packagento.com/loki/magento2-components and complete the free checkout. A licence is minted automatically.

3. **Create or pick a project, then activate the licence on it.**
   - Projects represent the Magento installs you deploy to. Manage them at https://packagento.com/projects/.
   - Activate the new licence on the project you'll deploy this package to. Activation is what generates the Composer credentials scoped to that project.

4. **Add the project credentials to your Magento codebase.**

   Grab the project's public + private key from https://packagento.com/projects/ (open the project, then its Credentials tab), and add them to `auth.json`:

   ```json
   {
     "http-basic": {
       "packagento.com": {
         "username": "ppk_live_...",
         "password": "psk_live_..."
       }
     }
   }
   ```

   Add the Packagento Composer repository to `composer.json`:

   ```json
   {
     "repositories": [
       { "type": "composer", "url": "https://packagento.com" }
     ]
   }
   ```

5. **Install and apply.**

   ```bash
   composer require loki/magento2-components:*
   bin/magento setup:upgrade
   bin/magento setup:di:compile
   bin/magento cache:flush
   ```

## What it does

Core module for defining Alpine.js components with advanced AJAX features

## README

**This is the main Magento 2 module for Loki Components, as is being used by the Loki Checkout suite. Loki Components are a combination of Alpine.js (JavaScript) and PHP (Magento): The package offers enhanced Alpine.js components that automate AJAX calls to be handled in the backend, complete with filtering, validation, updating multiple HTML elements at once, and much more.**

### Installation
Install this package via composer:

```bash
composer require loki/magento2-components
```

Next, enable this module:
```bash
bin/magento module:enable Loki_Components
```
### Usage
See [loki-extensions.com/docs/components](https://loki-extensions.com/docs/components)

## Changelog

All notable changes to this project will be documented in this file.

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

### [Unreleased]

### [2.5.2] - 19 June 2026
#### Fixed
- Autorefresh `form_key` in admin-pages
- Rewrite admin controller to interface and apply custom CSRF
- Fix for missing form key in admin

### [2.5.1] - 16 June 2026
#### Fixed
- Change Alpine.store('LokiComponents').formKey yet again to MageCookies

### [2.5.0] - 12 June 2026
#### Added
- Replace LokiComponentFormKey with Alpine.store form key

#### Fixed
- Autorefresh form key via AJAX calls
- When a CSRF exception occurs, display it as a regular error message

### [2.4.1] - 11 June 2026
#### Fixed
- Allow for lazy-loading by simply setting `lazy_load` in the block arguments

### [2.4.0] - 09 June 2026
#### Security
- Implement tight security filtering by default
- Implement recursionDepth limit (10) in filters and validators
- Render a maximum number of targets of 100 by default (DI-configurable)
- Sign AJAX queue `handles`, `pageHandles` and `request` properties to prevent client-side tampering
- Double-check that component/block name in AJAX call is a string
- Restrict targets and handles to be valid strings

#### Fixed
- Add pageHandles to AJAX calls
- Allow for empty component update to be passing validation
- Additional Playwright tests
- Throw a exception when form key is not valid
- Do not allow GET requests anymore
- Make sure PositiveNumber filter always returns number

### [2.3.2] - 04 June 2026
#### Fixed
- Fix loading custom page layouts in AJAX calls

### [2.3.1] - 02 June 2026
#### Fixed
- Optimize layout loader (isolated vs singleton)
- Remove obsolete proxies

### [2.3.0] - 01 June 2026
#### Added 
- Allow component update to load different XML layout handles
- Offer a DI-type for other modules to change layout handles before using them
- Trigger an event `loki-components.ajax.done` when done with queue

#### Fixed
- Move layout proxy from frontend to global DI
- Add `getLayout()` method to ComponentInterface
- Make sure layout-singleton is lazy-loaded to prevent premature updates
- Unfortunately, we can never 100% guarantee that block is loaded into ViewModel
- Do not use `static` singleton
- Only skip AJAX if flag `skipAjax` is set
- Make no AJAX call when there are only component updates with value `false`

### [2.2.60] - 21 May 2026
#### Fixed
- Allow for better UI of help-toggling
- Non-`Loki_Components` icons were not rendering

### [2.2.59] - 15 May 2026
#### Fixed
- Prevent type-error when LengthValidator is populated from XML layout

### [2.2.58] - 08 May 2026
#### Fixed
- Extract messages into separate `loki_messages` handler for usage elsewhere

### [2.2.57] - 07 May 2026
#### Fixed
- Simplify modal behaviour without reactivity
- Issue with input[type=number] and selectionStart

### [2.2.56] - 06 May 2026
#### Fixed
- When activeElement is not an input, set it to false
- When focusing upon activeElement, jump to end of input value

### [2.2.55] - 06 May 2026
#### Fixed
- Add `remove_spaces` filter
- Move references to modal to nextClick just to be sure

### [2.2.54] - 04 May 2026
#### Fixed
- Allow ImageRenderer::icon() to be passed full asset ID
- Skip HTML attributes that wrongfully have an array-value

### [2.2.53] - 22 April 2026
#### Fixed
- Add message to RedirectException
- Make sure LengthValidator also reads from `min` and `max`
- Allow setting `allow_rendering` via XML layout
- Allow for `icon()` to be passed HTML properties for SVG

### [2.2.52] - 08 April 2026
#### Fixed
- Merge all JS attributes of Address into Location

### [2.2.51] - 28 March 2026
#### Fixed
- Add ReturnTypeWillChange to jsonSerialize to fix 2.4.5 compile issue
- Move TransferableAncestorBlockProperties from components to base

_(Changelog truncated for .md surface. Full history on https://packagento.com/loki/magento2-components.)_

## Recent Versions

| Version | Released |
|---|---|
| 2.5.2 | 2026-06-19 |
| 2.5.1 | 2026-06-16 |
| 2.5.0 | 2026-06-12 |
| 2.4.1 | 2026-06-11 |
| 2.4.0 | 2026-06-09 |
| 2.3.2 | 2026-06-04 |
| 2.3.1 | 2026-06-02 |
| 2.3.0 | 2026-06-01 |
| 2.2.60 | 2026-05-21 |
| 2.2.59 | 2026-05-15 |

Showing 10 of 118 versions. Full release history on https://packagento.com/loki/magento2-components.

## Dependencies

### Require

| Package | Constraint |
|---|---|
| ext-json | * |
| ext-pcre | * |
| laminas/laminas-http | ^2.16 |
| loki/magento2-base | ^1.1 |
| loki/magento2-css-utils | ^1.0 |
| magento/framework | ^103.0 |
| magento/module-backend | ^102.0 |
| magento/module-config | ^101.2 |
| magento/module-customer | ^103.0 |
| magento/module-quote | ^101.2 |
| magento/module-store | ^101.1 |
| psr/log | ^1.0 \| ^2.0 \| ^3.0 |
| yireo/magento2-csp-utilities | ^1.0 |

### Require (dev)

| Package | Constraint |
|---|---|
| phpunit/phpunit | ^9.0\|^10.0 |
| yireo/magento2-integration-test-helper | ~0.0 |

## Quality

Latest release (2.5.2) fails the Packagento QA pipeline. Verdicts below are per-cell (Magento line × PHP version) for the matrixed tools, and run-once for the static / security tiers.


### Compatibility

Each Magento line is installed on its supported PHP versions, then the module is built (DI compile + static-content deploy). Cells show passed / failed / untested; staircase gaps render as `–`.

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | Pass | Pass | – | – |
| 2.4.8 | – | Pass | Pass | – |
| 2.4.9 | – | – | Pass | Pass |


### Code Quality

Advisory checks against the module's source. Never affect the Compatibility verdict — a phpcs finding can't make a module incompatible.

#### Static Analysis

Coding standards (phpcs), mess detection (phpmd), copy-pasted code (cpd), PHP cross-version compatibility, composer.json validity. Each runs once for the whole module.

| Tool | Status | Findings | Summary |
|---|---|---|---|
| PHPCS | Warning | 68 | 68 warnings (ruleset: Magento2) — 10 auto-fixable with phpcbf |
| PHPMD | Warning | 9 | 9 rule violations (ExcessiveParameterList:4, UnusedFormalParameter:3, EmptyCatchBlock:1, CyclomaticComplexity:1) |
| Cpd | Warning | 1 | 1 duplicated chunk spanning 30 total lines (min-lines=5, min-tokens=70) |
| Composer validate | Info | 1 | valid; 1 advisory note (composer validate --strict) |

#### PHPStan

Type-checks the module against a real Magento install. Re-runs per Magento + PHP version because resolvable symbols differ between releases.

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | 4 | 4 | – | – |
| 2.4.8 | – | 4 | 4 | – |
| 2.4.9 | – | – | 4 | 4 |


### Tests

Unit and integration suites run per Magento + PHP cell. Test failures speak to the module's behaviour, not its compatibility with a line, so they're reported here separately.

#### Unit Tests

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | N/A | N/A | – | – |
| 2.4.8 | – | N/A | N/A | – |
| 2.4.9 | – | – | N/A | N/A |

#### Integration Tests

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | 9 | 9 | – | – |
| 2.4.8 | – | Pass | Pass | – |
| 2.4.9 | – | – | not tested | Error |


### Security

Dependency-advisory audit (composer audit) plus a source malware scan. A malware detection fails the version outright.

| Tool | Status | Findings | Summary |
|---|---|---|---|
| Composer audit | Pass | 0 |  |
| Malware scan | Pass | 0 |  |

## Licence and pricing

Free. A licence is still minted on checkout and bound to your project for Composer access — no payment step.

Refundable within 14 days of first purchase via https://packagento.com/account/refunds/.

## Install via Claude Code or any MCP client

The Packagento MCP server can run the licence + project + Composer steps above in one tool call:

```
purchase_and_install_packages(
  composer_names=["loki/magento2-components"],
  project_id="proj_xxx"
)
```

This handles cart, checkout, licence minting, project activation, and writes auth.json credentials. Connect a client with `claude mcp add packagento https://mcp.packagento.com`. Full setup at https://packagento.com/docs/mcp-setup.

## Vendor

loki is a Magento 2 vendor on Packagento. See https://packagento.com/loki.md for their full catalogue.