BUGFIX: Neos.NodeTypes prototypes are now ContentComponents

Neos.NodeTypes.AssetList/Resources/Private/Fusion/Root.fusion

@@ -1,4 +1,29 @@
-prototype(Neos.NodeTypes.AssetList:AssetList) < prototype(Neos.Neos:Content) {
-  templatePath = "resource://Neos.NodeTypes.AssetList/Private/Templates/NodeTypes/AssetList.html"
+prototype(Neos.NodeTypes.AssetList:AssetList) < prototype(Neos.Neos:ContentComponent) {
   assets = ${q(node).property('assets')}
+
+  attributes = Neos.Fusion:DataStructure
+  attributes.class = ''
+  # The following is used to automatically append a class attribute that reflects the underlying node type of a Fusion object,
+  # for example "neos-nodetypes-form", "neos-nodetypes-headline", "neos-nodetypes-html", "neos-nodetypes-image", "neos-nodetypes-menu" and "neos-nodetypes-text"
+  # You can disable the following line with:
+  # prototype(Neos.NodeTypes.AssetList:AssetList) {
+  #   [email protected] >
+  # }
+  # in your site's Fusion if you don't need that behavior.
+  [email protected] = ${Array.push(value, String.toLowerCase(String.pregReplace(node.nodeTypeName.value, '/[[:^alnum:]]/', '-')))}
+
+  @if.render = ${this.assets || renderingMode.isEdit}
+
+  renderer = afx`
+    <ul {...props.attributes}>
+      <li @if.inEditMode={!props.assets && renderingMode.isEdit}>
+        {Translation.id('content.emptyAssetList').package('Neos.NodeTypes.AssetList').source('NodeTypes/AssetList')}
+      </li>
+      <Neos.Fusion:Loop items={props.assets} itemName="asset">
+        <li>
+          <Neos.Fusion:Link.Resource href.resource={asset.resource}>{asset.resource.filename}</Neos.Fusion:Link.Resource>
+        </li>
+      </Neos.Fusion:Loop>
+    </ul>
+  `
 }

Neos.NodeTypes.ColumnLayouts/Resources/Private/Fusion/Root.fusion

@@ -1,23 +1,39 @@
 # Basic implementation of a flexible MultiColumn element, not exposed directly but inherited by all specific MultiColumn content elements
-prototype(Neos.NodeTypes.ColumnLayouts:MultiColumn) < prototype(Neos.Neos:Content) {
-    templatePath = 'resource://Neos.NodeTypes.ColumnLayouts/Private/Templates/NodeTypes/MultiColumn.html'
-    layout = ${q(node).property('layout')}
-    attributes.class = ${'container columns-' + q(node).property('layout')}
-    columns = Neos.Fusion:Loop {
-        @context.columnLayout = ${q(node).property('layout')}
-        items = ${q(node).children('[instanceof Neos.Neos:ContentCollection]')}
-        itemRenderer = Neos.NodeTypes.ColumnLayouts:MultiColumnItem
-        itemName = 'node'
-        iterationName = 'columnIteration'
-    }
+prototype(Neos.NodeTypes.ColumnLayouts:MultiColumn) < prototype(Neos.Neos:ContentComponent) {
+  layout = ${q(node).property('layout')}
+
+  attributes = Neos.Fusion:DataStructure
+  attributes.class = ${'container columns-' + q(node).property('layout')}
+  # The following is used to automatically append a class attribute that reflects the underlying node type of a Fusion object,
+  # for example "neos-nodetypes-form", "neos-nodetypes-headline", "neos-nodetypes-html", "neos-nodetypes-image", "neos-nodetypes-menu" and "neos-nodetypes-text"
+  # You can disable the following line with:
+  # prototype(Neos.NodeTypes.ColumnLayouts:MultiColumn) {
+  #   [email protected] >
+  # }
+  # in your site's Fusion if you don't need that behavior.
+  [email protected] = ${Array.push(value, String.toLowerCase(String.pregReplace(node.nodeTypeName.value, '/[[:^alnum:]]/', '-')))}
+
+  columns = Neos.Fusion:Loop {
+    @context.columnLayout = ${q(node).property('layout')}
+    items = ${q(node).children('[instanceof Neos.Neos:ContentCollection]')}
+    itemRenderer = Neos.NodeTypes.ColumnLayouts:MultiColumnItem
+    itemName = 'node'
+    iterationName = 'columnIteration'
+  }
+
+  renderer = afx`
+    <div {...props.attributes}>
+      {props.columns}
+    </div>
+  `
 }
 
 # Abstract render definition for a single content column in a multi column element
 prototype(Neos.NodeTypes.ColumnLayouts:MultiColumnItem) < prototype(Neos.Neos:ContentCollection) {
-    nodePath = '.'
-    attributes = Neos.Fusion:DataStructure {
-        class = 'column'
-    }
+  nodePath = '.'
+  attributes = Neos.Fusion:DataStructure {
+    class = 'column'
+  }
 }
 
 # Two Column Fusion Object
@@ -27,8 +43,8 @@ prototype(Neos.NodeTypes.ColumnLayouts:TwoColumn) < prototype(Neos.NodeTypes.Col
 prototype(Neos.NodeTypes.ColumnLayouts:TwoColumn.RawContentMode) < prototype(Neos.Neos:ContentComponent) {
   renderer = afx`
     <div style="display:grid; grid-template-columns: 1fr 1fr; grid-gap: 16px;">
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column0').get(0)} /></div>
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column1').get(0)} /></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column0').get(0)}/></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column1').get(0)}/></div>
     </div>
   `
 }
@@ -40,9 +56,9 @@ prototype(Neos.NodeTypes.ColumnLayouts:ThreeColumn) < prototype(Neos.NodeTypes.C
 prototype(Neos.NodeTypes.ColumnLayouts:ThreeColumn.RawContentMode) < prototype(Neos.Neos:ContentComponent) {
   renderer = afx`
     <div style="display:grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 16px;">
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column0').get(0)} /></div>
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column1').get(0)} /></div>
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column2').get(0)} /></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column0').get(0)}/></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column1').get(0)}/></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column2').get(0)}/></div>
     </div>
   `
 }
@@ -54,10 +70,10 @@ prototype(Neos.NodeTypes.ColumnLayouts:FourColumn) < prototype(Neos.NodeTypes.Co
 prototype(Neos.NodeTypes.ColumnLayouts:FourColumn.RawContentMode) < prototype(Neos.Neos:ContentComponent) {
   renderer = afx`
     <div style="display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 16px;">
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column0').get(0)} /></div>
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column1').get(0)} /></div>
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column2').get(0)} /></div>
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column3').get(0)} /></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column0').get(0)}/></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column1').get(0)}/></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column2').get(0)}/></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column3').get(0)}/></div>
     </div>
   `
 }

Neos.NodeTypes.ContentReferences/Resources/Private/Fusion/Root.fusion

@@ -1,6 +1,5 @@
 # "Insert content references" Fusion Object
-prototype(Neos.NodeTypes.ContentReferences:ContentReferences) < prototype(Neos.Neos:Content) {
-  templatePath = 'resource://Neos.NodeTypes.ContentReferences/Private/Templates/NodeTypes/ContentReferences.html'
+prototype(Neos.NodeTypes.ContentReferences:ContentReferences) < prototype(Neos.Neos:ContentComponent) {
   @context.referenceNodesArray = ${q(node).property('references')}
   referenceNodes = Neos.Fusion:Loop {
     items = ${referenceNodesArray}
@@ -16,7 +15,28 @@ prototype(Neos.NodeTypes.ContentReferences:ContentReferences) < prototype(Neos.N
       renderer.editable.condition = false
     }
   }
-  hasReferences = ${!!referenceNodesArray}
+
+  attributes = Neos.Fusion:DataStructure
+  attributes.class = ''
+  # The following is used to automatically append a class attribute that reflects the underlying node type of a Fusion object,
+  # for example "neos-nodetypes-form", "neos-nodetypes-headline", "neos-nodetypes-html", "neos-nodetypes-image", "neos-nodetypes-menu" and "neos-nodetypes-text"
+  # You can disable the following line with:
+  # prototype(Neos.NodeTypes.ContentReferences:ContentReferences) {
+  #   [email protected] >
+  # }
+  # in your site's Fusion if you don't need that behavior.
+  [email protected] = ${Array.push(value, String.toLowerCase(String.pregReplace(node.nodeTypeName.value, '/[[:^alnum:]]/', '-')))}
+
+  renderer = afx`
+    <div {...props.attributes}>
+      <p @if.showEditHint={!props.referenceNodes && renderingMode.isEdit}>
+        {Translation.id('content.noReferencesSelected').package('Neos.NodeTypes.ContentReferences').source('NodeTypes/ContentReferences')}
+      </p>
+      <Neos.Fusion:Fragment @if.referencesSelected={props.referenceNodes}>{props.referenceNodes}</Neos.Fusion:Fragment>
+    </div>
+
+  `
+
   @cache {
     mode = 'cached'
     entryIdentifier {

Neos.NodeTypes.Form/Classes/Service/DataSource/FormDefinitionDataSource.php

@@ -12,6 +12,7 @@
  */
 
 use Neos\ContentRepository\Core\Projection\ContentGraph\Node;
+use Neos\Form\Persistence\YamlPersistenceManager;
 use Neos\Neos\Service\DataSource\AbstractDataSource;
 use Neos\Flow\Annotations as Flow;
 
@@ -23,18 +24,15 @@ class FormDefinitionDataSource extends AbstractDataSource
      */
     protected static $identifier = 'neos-nodetypes-form-definitions';
 
-    /**
-     * @Flow\Inject
-     * @var \Neos\Form\Persistence\YamlPersistenceManager
-     */
-    protected $yamlPersistenceManager;
+    #[Flow\Inject]
+    protected YamlPersistenceManager $yamlPersistenceManager;
 
     /**
      * @param Node|null $node
-     * @param array $arguments
-     * @return \Neos\Flow\Persistence\QueryResultInterface
+     * @param array<mixed> $arguments
+     * @return array<int|string, array{label: mixed}>
      */
-    public function getData(Node $node = null, array $arguments = [])
+    public function getData(Node $node = null, array $arguments = []): array
     {
         $formDefinitions['']['label'] = '';
         $forms = $this->yamlPersistenceManager->listForms();

Neos.NodeTypes.Form/Resources/Private/Fusion/Root.fusion

@@ -1,9 +1,34 @@
 # Form Fusion Object
-prototype(Neos.NodeTypes.Form:Form) < prototype(Neos.Neos:Content) {
+prototype(Neos.NodeTypes.Form:Form) < prototype(Neos.Neos:ContentComponent) {
   templatePath = 'resource://Neos.NodeTypes.Form/Private/Templates/NodeTypes/Form.html'
-  presetName = 'default'
+  formPresetName = 'default'
   formIdentifier = ${q(node).property('formIdentifier')}
   overrideConfiguration = Neos.Fusion:DataStructure
+
+  attributes = Neos.Fusion:DataStructure
+  attributes.class = ''
+  # The following is used to automatically append a class attribute that reflects the underlying node type of a Fusion object,
+  # for example "neos-nodetypes-form", "neos-nodetypes-headline", "neos-nodetypes-html", "neos-nodetypes-image", "neos-nodetypes-menu" and "neos-nodetypes-text"
+  # You can disable the following line with:
+  # prototype(Neos.NodeTypes.Form:Form) {
+  #   [email protected] >
+  # }
+  # in your site's Fusion if you don't need that behavior.
+  [email protected] = ${Array.push(value, String.toLowerCase(String.pregReplace(node.nodeTypeName.value, '/[[:^alnum:]]/', '-')))}
+
+  renderer = afx`
+    <div {...props.attributes}>
+      <p @if.showEditHint={!props.formIdentifier && renderingMode.isEdit}>
+        {Translation.id('content.noValidFormIdentifier').package('Neos.NodeTypes.Form').source('NodeTypes/Form')}
+      </p>
+      <Neos.Fusion:Template @if.hasForm={props.formIdentifier}
+                            templatePath={props.templatePath}
+                            formIdentifier={props.formIdentifier}
+                            presetName={props.formPresetName}
+                            overrideConfiguration={props.overrideConfiguration}/>
+    </div>
+  `
+
   @cache {
     mode = 'uncached'
     context {
@@ -12,3 +37,4 @@ prototype(Neos.NodeTypes.Form:Form) < prototype(Neos.Neos:Content) {
     }
   }
 }
+

Neos.NodeTypes.Form/Resources/Private/Templates/NodeTypes/Form.html

@@ -1,11 +1,2 @@
 {namespace form=Neos\Form\ViewHelpers}
-<div{attributes -> f:format.raw()}>
-	<f:if condition="{formIdentifier}">
-		<f:then>
-			<form:render persistenceIdentifier="{formIdentifier}" presetName="{presetName}" overrideConfiguration="{overrideConfiguration}" />
-		</f:then>
-		<f:else>
-			<p>{f:translate(id: 'content.noValidFormIdentifier', package: 'Neos.NodeTypes.Form', source: 'NodeTypes/Form')}</p>
-		</f:else>
-	</f:if>
-</div>
+<form:render persistenceIdentifier="{formIdentifier}" presetName="{presetName}" overrideConfiguration="{overrideConfiguration}" />

Neos.NodeTypes.Html/Resources/Private/Fusion/Html.fusion

@@ -7,7 +7,7 @@ prototype(Neos.NodeTypes.Html:Html) < prototype(Neos.Neos:ContentComponent) {
   # The following is used to automatically append a class attribute that reflects the underlying node type of a Fusion object,
   # for example "neos-nodetypes-form", "neos-nodetypes-headline", "neos-nodetypes-html", "neos-nodetypes-image", "neos-nodetypes-menu" and "neos-nodetypes-text"
   # You can disable the following line with:
-  # prototype(Neos.Neos:Content) {
+  # prototype(Neos.NodeTypes.Html:Html) {
   #   [email protected] >
   # }
   # in your site's Fusion if you don't need that behavior.

Neos.NodeTypes.Navigation/Resources/Private/Fusion/Root.fusion

@@ -1,7 +1,5 @@
 # Navigation Fusion Object - uses Neos.Neos:Menu and is rendering menus inserted as content elements
 prototype(Neos.NodeTypes.Navigation:Navigation) < prototype(Neos.Neos:Menu) {
-  templatePath = 'resource://Neos.NodeTypes.Navigation/Private/Templates/NodeTypes/Navigation.html'
-
   startingPoint = ${q(node).property('startingPoint') ? q(node).property('startingPoint') : documentNode}
 
   itemCollection = ${Array.isEmpty(q(node).property('selection') ? q(node).property('selection') : {}) ? null : q(node).property('selection')}
@@ -26,6 +24,16 @@ prototype(Neos.NodeTypes.Navigation:Navigation) < prototype(Neos.Neos:Menu) {
 
   node = ${node}
 
+  renderer >
+  renderer = afx`
+    <nav {...props.attributes}>
+      <p @if.showEditHint={!private.items && renderingMode.isEdit}>
+        {Translation.id('content.emptyMenu').package('Neos.NodeTypes.Navigation').source('NodeTypes/Navigation')}
+      </p>
+      <Neos.Neos:MenuItemListRenderer @if.hasItems={private.items} items={private.items} />
+    </nav>
+  `
+
   @process.contentElementWrapping = Neos.Neos:ContentElementWrapping
 
   @cache {

Neos.NodeTypes/Resources/Private/Fusion/Content/Headline.fusion

@@ -0,0 +1,22 @@
+prototype(Neos.NodeTypes:Headline) < prototype(Neos.Neos:ContentComponent) {
+  title = Neos.Neos:Editable {
+    property = 'title'
+  }
+
+  attributes = Neos.Fusion:DataStructure
+  attributes.class = ''
+  # The following is used to automatically append a class attribute that reflects the underlying node type of a Fusion object,
+  # for example "neos-nodetypes-form", "neos-nodetypes-headline", "neos-nodetypes-html", "neos-nodetypes-image", "neos-nodetypes-menu" and "neos-nodetypes-text"
+  # You can disable the following line with:
+  # prototype(Neos.NodeTypes:Headline) {
+  #   [email protected] >
+  # }
+  # in your site's Fusion if you don't need that behavior.
+  [email protected] = ${Array.push(value, String.toLowerCase(String.pregReplace(node.nodeTypeName.value, '/[[:^alnum:]]/', '-')))}
+
+  renderer = afx`
+    <div {...props.attributes}>
+      {props.title}
+    </div>
+  `
+}