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.23k
- 月度下载量： 0
- 日度下载量： 0
- 收藏数： 4
- 点击次数： 1
- 依赖项目数： 0
- 推荐数： 0
其他信息
- 授权协议： Unknown
- 更新时间： 2025-03-19