sinso/webcomponents
最新稳定版本：0.5.1
Composer 安装命令：
composer require sinso/webcomponents
包简介
Render Web Components
README 文档
README
This extension provides tools to render Web Components with TYPO3.
TypoScript based rendering
tt_content.tx_myext_mycontentelement = WEBCOMPONENT tt_content.tx_myext_mycontentelement { tagName = my-web-component properties { title.data = header greeting = Hello World! } } Generates the output:
<my-web-component title="This is the title from the content element record" greeting="Hello World!" ></my-web-component> Component class based rendering
You can populate the web component with PHP:
tt_content.tx_myext_mycontentelement = WEBCOMPONENT tt_content.tx_myext_mycontentelement.component = Acme\MyExt\Components\MyContentElement <?php namespace Acme\MyExt\Components; use Sinso\Webcomponents\DataProviding\ComponentInterface; use Sinso\Webcomponents\Dto\ComponentRenderingData; use Sinso\Webcomponents\Dto\InputData; class MyContentElement implements ComponentInterface { public function provide(InputData $inputData): ComponentRenderingData { $record = $inputData->record; $properties = [ 'title' => $record['header'], 'greeting' => 'Hello World!', ]; return (new ComponentRenderingData()) ->withTagProperties($properties) ->withTagName('my-web-component'); } } Abort rendering
The component classes can use the \Sinso\Webcomponents\DataProviding\Traits\Assert trait to abort rendering, for example if the record is not available:
<?php namespace Acme\MyExt\Components; use Sinso\Webcomponents\DataProviding\ComponentInterface; use Sinso\Webcomponents\DataProviding\Helpers\FileReferencesHelper; use Sinso\Webcomponents\DataProviding\Traits\Assert; use Sinso\Webcomponents\Dto\ComponentRenderingData; use Sinso\Webcomponents\Dto\InputData; use TYPO3\CMS\Core\Resource\FileReference; class Image implements ComponentInterface { use Assert; public function __construct( private readonly FileReferencesHelper $fileReferencesHelper, ) {} public function provide(InputData $inputData): ComponentRenderingData { $record = $inputData->record; $image = $this->fileReferencesHelper->loadFileReference($record, 'image'); // rendering will stop here if no image is found $this->assert($image instanceof FileReference, 'No image found for record ' . $record['uid']); return (new ComponentRenderingData()) ->withTagProperty('imageUrl', $image->getPublicUrl()) ->withTagName('my-image'); } } Render a web component in Fluid
<html xmlns:wc="http://typo3.org/ns/Sinso/Webcomponents/ViewHelpers" data-namespace-typo3-fluid="true" > <wc:render component="Acme\MyExt\Components\LocationOverview" inputData="{'header': 'This is the header'}" /> </html> 统计信息
- 总下载量： 8.16k
- 月度下载量： 0
- 日度下载量： 0
- 收藏数： 4
- 点击次数： 1
- 依赖项目数： 0
- 推荐数： 0
其他信息
- 授权协议： Unknown
- 更新时间： 2026-01-04