smic / webcomponents
Render Web Components
Installs: 13
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 3
Forks: 0
Open Issues: 6
Type:typo3-cms-extension
Requires
- ext-json: *
- typo3/cms-core: ^11.0 || ^12.0
- dev-main
- 0.2.0
- 0.1.0
- dev-topic/rendering
- dev-topic/evaluate-and-render
- dev-topic/component-will-be-rendered-args
- dev-topic/php-version
- dev-topic/phpstan-php-version
- dev-topic/ssr
- dev-topic/component-rendering-helper-exception
- dev-topic/content-as
- dev-topic/ctype-attribute
- dev-topic/component-rendering-data-interface
- dev-topic/content-blocks-int
- dev-topic/content-blocks
- dev-topic/interface
- dev-ver/0-1
- dev-topic/improve-rendering
- dev-topic/basic-rendering
This package is auto-updated.
Last update: 2024-11-05 10:31:19 UTC
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\DataProviding\Traits\ContentObjectRendererTrait; use Sinso\Webcomponents\Dto\ComponentRenderingData; use Sinso\Webcomponents\Dto\InputData; class MyContentElement implements ComponentInterface { use ContentObjectRendererTrait; public function provide(InputData $inputData): ComponentRenderingData { $record = $inputData->record; $properties = [ 'title' => $record['header'], 'greeting' => 'Hello World!', ]; $componentRenderingData = new ComponentRenderingData(); $componentRenderingData->setTagName('my-web-component'); $componentRenderingData->setTagProperties($properties); } }
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\Traits\Assert; use Sinso\Webcomponents\DataProviding\Traits\ContentObjectRendererTrait; use Sinso\Webcomponents\DataProviding\Traits\FileReferences; use Sinso\Webcomponents\Dto\ComponentRenderingData; use Sinso\Webcomponents\Dto\InputData; use TYPO3\CMS\Core\Resource\FileReference; class Image implements ComponentInterface { use Assert; use ContentObjectRendererTrait; use FileReferences; public function provide(InputData $inputData): ComponentRenderingData { $record = $inputData->record; $image = $this->loadFileReference($record, 'image'); // rendering will stop here if no image is found $this->assert($image instanceof FileReference, 'No image found for record ' . $record['uid']); $componentRenderingData = new ComponentRenderingData(); $componentRenderingData->setTagName('my-image'); $componentRenderingData->setTagProperties(['imageUrl' => $image->getPublicUrl()]); } }
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>