包简介

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>

sinso/webcomponents 适用场景与选型建议

sinso/webcomponents 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 13.39k 次下载、GitHub Stars 达 6，最近一次更新时间为 2025 年 03 月 19 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 sinso/webcomponents 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 sinso/webcomponents 我们能提供哪些服务？

定制开发 / 二次开发

基于 sinso/webcomponents 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

sinso/webcomponents

包简介