# Prompt: Rewrite `friendsoftypo3/frontend-editing` for TYPO3 v13 and v14
## Context
- **Role:** You are a Lead TYPO3 Extension Architect.
- **Input:** You have a copy of the extension `friendsoftypo3/frontend-editing` that is currently compatible with TYPO3 v12.
- **Task:** Refactor and upgrade the codebase to support **TYPO3 v13 LTS** and the upcoming **TYPO3 v14**.
- **PHP Targets:** PHP 8.3+ (Strict requirement for v14 compatibility).
- **Environment:**
- TYPO3 v13.4+ (LTS).
- TYPO3 v14.0+ (Bleeding Edge).
## Primary Goals
1. **Architecture Modernization:** Fully adopt **ES Modules** (dropping all AMD/RequireJS) and **PHP Attributes** (dropping DocBlock annotations).
2. **Compatibility:** Ensure installability and stability on TYPO3 v13 and v14 with a single codebase.
3. **Security:** Ensure the frontend editing toolbar and UI are **Content Security Policy (CSP)** compliant (no inline JS/CSS without nonces, no `eval()`).
4. **Configuration:** Migrate TypoScript inclusion to the new **Site Sets** feature (v13+).
## Constraints and Principles
- **No Legacy JS:** RequireJS/AMD is forbidden. Use native ECMAScript Modules (ESM) via `importmap`.
- **Strict Typing:** All PHP classes must use strict typing (`declare(strict_types=1);`) and property typing.
- **Attributes over Annotations:** Use PHP 8 Attributes for Dependency Injection, Validation, and Event Listening.
- **CSP Compliance:** The extension injects UI into the frontend. It must use the `PageRenderer` or `AssetCollector` API correctly to support CSP nonces.
## Step-by-Step Tasks
### A. Composer and Metadata
1. **`composer.json`**
- Set `require`: `"php": "^8.3"`.
- Set `typo3/cms-core`: `"^13.4 || ^14.0"`.
- Replace `typo3/testing-framework` with version `^8.0`.
2. **`ext_emconf.php`**
- Update constraints to match Composer.
- Ensure `clearCacheOnLoad` is set correctly for modern deployment flows.
### B. PHP Refactoring & API Migration
3. **Rector & Static Analysis**
- Apply `ssch/typo3-rector` sets for `TYPO3_13` and `TYPO3_14`.
- Apply `PHP_83` rules.
- Ensure all services in `Services.yaml` utilize `autowire` and `autoconfigure`.
4. **PSR-14 Events (Strict)**
- Verify no legacy Hooks (`$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']`) remain.
- Use `#[AsEventListener]` attributes on listener classes instead of `Services.yaml` tags where possible.
5. **Controller & Request Handling**
- Ensure all Controllers return `\Psr\Http\Message\ResponseInterface`.
- Remove any usage of `EXIT` or `die()`.
- Validate that Middleware implements `Psr\Http\Server\MiddlewareInterface` and handles the `ResponseFactory` correctly for v13+.
### C. JavaScript & Frontend Assets (Crucial)
6. **ES Modules (Import Maps)**
- Convert all `.js` files to native ES Modules (`export`/`import`).
- Register modules in `Configuration/JavaScriptModules.php`.
- **Mapping:**
- Imports from `TYPO3/CMS/*` must be replaced with `@typo3/*` mapped imports.
- Example: `import Modal from '@typo3/backend/modal.js';`
7. **CSP Compliance**
- Scan for inline JavaScript `onclick="..."` in fluid templates. **Remove them.**
- Replace inline event handlers with `EventDelegation` or attaching listeners in the ES Module `initialize()` method.
- Ensure all CSS is loaded via `AssetCollector::addCssFile()` so it receives proper nonces.
8. **Lit / Web Components (Optional but Recommended)**
- If the UI requires complex state, favor standard Web Components or Lit (if already used in Core v13) over jQuery.
### D. Configuration & TypoScript
9. **Site Sets (v13+)**
- Create `Configuration/Sets/FrontendEditing/config.yaml`.
- Migrate existing TypoScript `setup.typoscript` and `constants.typoscript` to be loadable via this Set.
- Retain `ext_typoscript_setup.txt` only as a backward-compatibility wrapper if absolutely necessary, but prioritize Sets.
10. **TCA (Table Configuration Array)**
- Ensure all TCA files are in `Configuration/TCA/*`.
- Migrate `ctrl.iconfile` to the `EXT:extension/Resources/Public/Icons/` path or registered IconIdentifier.
- Validate `renderType` fields against v13 strictness (e.g., `select` types).
### E. Quality Assurance
11. **Testing Checklist**
- **Install:** `composer require` on a fresh TYPO3 v13 setup.
- **Site Sets:** Verify "Frontend Editing" appears in the Site Configuration "Sets" tab.
- **Frontend:** Log in, view a page. Verify the toolbar loads via ESM (check browser console network tab for `.js` files, ensure no 404s).
- **CSP:** Enable `config.contentSecurityPolicy.mode = enforce`. Verify the editor still loads without console violations.
- **Editing:** Perform an inline edit and save. Verify the Ajax request uses the correct PSR-7 flow.
## Deliverables
1. **Codebase:** Cleaned, v13/14 native code.
2. **Migration Log:** `MIGRATION_v13.md` detailing the switch to ES Modules and Attributes.
3. **Config:** `JavaScriptModules.php` and `Configuration/Sets/` folder structure.
---
### Concrete Code Patterns for v13/14
**1. Event Listener with Attribute:**
```php
use TYPO3\CMS\Core\Attribute\AsEventListener;
use TYPO3\CMS\Frontend\Event\AfterLinkIsGeneratedEvent;
#[AsEventListener(identifier: 'frontend-editing/link-fixer')]
final class LinkFixerEventListener {
public function __invoke(AfterLinkIsGeneratedEvent $event): void {
// ...
}
}
```
### `Configuration/JavaScriptModules.php`
```php
<?php
return [
'dependencies' => ['core', 'backend'],
'imports' => [
'@friendsoftypo3/frontend-editing/' => 'EXT:frontend_editing/Resources/Public/JavaScript/',
],
];
```
### `Configuration/Sets/FrontendEditing/config.yaml`
```yaml
name: 'friendsoftypo3/frontend-editing'
label: 'Frontend Editing'
dependencies:
- typo3/cms-frontend
settings:
definitions:
frontend_editing:
type: bool
label: 'Enable Frontend Editing'
value: true
```