I'm currently using TYPO3 (12.4.7) with the EXT:Headless to create decoupled CMS for a NEXT.js frontend. I was able to make headless output work on a global base and it works like a charme with standard content elements. It was also possible to extend our internal Extbase Extensions to render the JSON output via Fluid Templates (and f:spaceless, f:json ViewHelpers).
The last piece of the puzzle would be the Flux-Extension. Best case would be to go the Flux-way of a template file in a provider extension with a Configuration, Preview and Main Section. The Main section would be the JSON-rendering part. But the content property of the flux elements is just empty. I can't find any documentation or issues, feature requests or something else on this topic. On the other hand I would not think, that this requirement should be too exotic. What am I missing out?
packages/provider/Ressources/Private/Templates/Content/SimpleText.html
<div
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
>
<f:layout name="Default" />
<f:section name="Configuration">
<flux:form
id="simpleText"
description="Fließtext mit Überschrift"
label="Text-Element"
>
<flux:field.input name="headline" label="Überschrift" />
<flux:field.text
name="copy"
label="Text"
required="true"
enableRichText="true"
/>
<flux:field.inline.fal
name="image"
label="Bild"
collapseAll="1"
localizationMode="select"
multiple="0"
maxItems="1"
minItems="1"
expandSingle="true"
allowedExtensions="jpg,jpeg,png" />
</flux:form>
</f:section>
<f:section name="Preview">
<f:if condition="{headline}">
<h2 style="margin-top: 0; margin-bottom: 1rem">{headline}</h2>
</f:if>
<f:if condition="{copy}">
<p style="margin-top: 0; margin-bottom: 1rem">
{copy -> f:format.stripTags()}
</p>
</f:if>
</f:section>
<f:section name="Main">
<f:spaceless>
<f:format.json value="{
headline: headline,
copy: copy->f:format.raw()
}"/>
</f:spaceless>
</f:section>
</div>
And the resulting Output
"content": {
"colPos0": [
{
"id": 6,
"type": "header",
"colPos": 0,
"categories": "",
"appearance": {
"layout": "default",
"frameClass": "default",
"spaceBefore": "",
"spaceAfter": ""
},
"content": {
"header": "Headline",
"subheader": "",
"headerLayout": 0,
"headerPosition": "",
"headerLink": ""
}
},
{
"id": 9,
"type": "provider_simpletext",
"colPos": 0,
"categories": "",
"appearance": {
"layout": "default",
"frameClass": "default",
"spaceBefore": "",
"spaceAfter": ""
}
}
]
}
I tried FlexForm DataProcessing for the fields, which would work in general, but would require to take care of all fields (like FAL relations) manually and would somehow contradict the use of Flux (and would not be consistent with the way, we provide Fluid rendered JSON from Extensions). So this would be a possible solution, but is not preferred.