From 750080bf04378358f0d46b48d0bebb2ddcfc04e5 Mon Sep 17 00:00:00 2001
From: Martin Ficzel <ficzel@sitegeist.de>
Date: Thu, 2 Nov 2023 09:54:07 +0100
Subject: [PATCH] TASK: Use @private instead of nested components

---
 .../Private/Fusion/Prototypes/Image.fusion    |  5 +-
 .../Private/Fusion/Prototypes/Picture.fusion  |  8 ++-
 .../Private/Fusion/Prototypes/Source.fusion   | 67 +++++++++----------
 3 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/Resources/Private/Fusion/Prototypes/Image.fusion b/Resources/Private/Fusion/Prototypes/Image.fusion
index bdd8b06..cbcbd36 100644
--- a/Resources/Private/Fusion/Prototypes/Image.fusion
+++ b/Resources/Private/Fusion/Prototypes/Image.fusion
@@ -134,8 +134,9 @@ prototype(Sitegeist.Kaleidoscope:Image) < prototype(Neos.Fusion:Component) {
         # apply format, width and height to the imageSource
         imageSource = ${props.imageSource}
         imageSource.@if.hasImageSource = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')}
-        imageSource.@process.applyWidth = ${props.width ? value.withWidth(props.width) : value}
-        imageSource.@process.applyHeight = ${props.height ? value.withHeight(props.height) : value}
+        imageSource.@process.applyDimensions = ${(props.width && props.height) ? value.withDimensions(props.width, props.height) : value}
+        imageSource.@process.applyWidth = ${(props.width && !props.height) ? value.withWidth(props.width) : value}
+        imageSource.@process.applyHeight = ${(props.height && !props.width) ? value.withHeight(props.height) : value}
         imageSource.@process.applyFormat = ${props.format ? value.withFormat(props.format) : value}
     }
 
diff --git a/Resources/Private/Fusion/Prototypes/Picture.fusion b/Resources/Private/Fusion/Prototypes/Picture.fusion
index b51f54c..1bf606d 100644
--- a/Resources/Private/Fusion/Prototypes/Picture.fusion
+++ b/Resources/Private/Fusion/Prototypes/Picture.fusion
@@ -81,9 +81,11 @@ prototype(Sitegeist.Kaleidoscope:Picture) < prototype(Neos.Fusion:Component) {
     @private {
         # apply format, width and height to the imageSource
         imageSource = ${props.imageSource}
-        imageSource.@if.has = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')}        imageSource.@process.applyWidth = ${props.width ? value.setWidth(props.width) : value}
-        imageSource.@process.applyHeight = ${props.height ? value.setHeight(props.height) : value}
-        imageSource.@process.applyFormat = ${props.format ? value.setFormat(props.format) : value}
+        imageSource.@if.has = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')}
+        imageSource.@process.applyDimensions = ${(props.width && props.height) ? value.withDimensions(props.width, props.height) : value}
+        imageSource.@process.applyWidth = ${(props.width && !props.height) ? value.withWidth(props.width) : value}
+        imageSource.@process.applyHeight = ${(props.height && !props.width) ? value.withHeight(props.height) : value}
+        imageSource.@process.applyFormat = ${props.format ? value.withFormat(props.format) : value}
     }
 
     renderer = afx`
diff --git a/Resources/Private/Fusion/Prototypes/Source.fusion b/Resources/Private/Fusion/Prototypes/Source.fusion
index 3939ed7..605f6e2 100644
--- a/Resources/Private/Fusion/Prototypes/Source.fusion
+++ b/Resources/Private/Fusion/Prototypes/Source.fusion
@@ -5,51 +5,50 @@ prototype(Sitegeist.Kaleidoscope:Source) < prototype(Neos.Fusion:Component) {
     }
 
     imageSource = null
+    imageSource.@process.contextFallback = ${value || __imageSource}
+
     srcset = null
+    srcset.@process.contextFallback = ${value || __srcset}
+
     sizes = null
+    sizes.@process.contextFallback = ${value || __sizes}
+
     width = null
+    width.@process.contextFallback = ${value || __width}
+
     height = null
+    height.@process.contextFallback = ${value || __height}
+
     format = null
+    format.@process.contextFallback = ${value || __format}
+
     type = null
     media = null
     renderDimensionAttributes = true
 
-    renderer = Neos.Fusion:Component {
-
-        @context {
-            imageSource = ${props.imageSource || __imageSource}
-            format = ${props.format || __format}
-            width = ${props.width || __width}
-            height = ${props.height || __height}
-            srcset = ${props.srcset || __srcset}
-            sizes = ${props.sizes || __sizes}
-        }
+    @private {
+        isScalableSource = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ScalableImageSourceInterface')}
 
-        @if.hasImageSource = ${imageSource && Type.instance(imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')}
-        isScalableSource = ${imageSource && Type.instance(imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ScalableImageSourceInterface')}
-
-        imageSource = ${imageSource}
-        imageSource.@process.applyWidth = ${width ? value.withWidth(width) : value}
-        imageSource.@process.applyHeight = ${height ? value.withHeight(height) : value}
+        imageSource = ${props.imageSource}
+        imageSource.@if.hasImageSource = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')}
+        imageSource.@process.applyDimensions = ${(width && height) ? value.withDimensions(width, height) : value}
+        imageSource.@process.applyWidth = ${(width && !height) ? value.withWidth(width) : value}
+        imageSource.@process.applyHeight = ${(height && !width) ? value.withHeight(height) : value}
         imageSource.@process.applyFormat = ${format ? value.withFormat(format) : value}
 
-        type = ${format ? 'image/' + format : props.type}
-        srcset = ${srcset}
-        sizes = ${sizes}
-        media = ${props.media}
-        renderDimensionAttributes = ${props.renderDimensionAttributes}
-
-        renderer = afx`
-            <source @if.has={props.imageSource}
-                srcset={props.imageSource.srcset(props.srcset)}
-                sizes={props.sizes}
-                sizes.@if.isScalable={props.sizes && props.isScalableSource}
-                sizes.@process.join={Type.isArray(value) ? Array.join(value, ', ') : value}
-                type={props.type}
-                media={props.media}
-                width={props.renderDimensionAttributes ? props.imageSource.currentWidth : null}
-                height={props.renderDimensionAttributes ? props.imageSource.currentHeight : null}
-            />
-        `
+        type = ${props.format ? 'image/' + props.format : props.type}
     }
+
+    renderer = afx`
+        <source @if.has={private.imageSource}
+            srcset={private.imageSource.srcset(props.srcset)}
+            sizes={props.sizes}
+            sizes.@if.isScalable={props.sizes && private.isScalableSource}
+            sizes.@process.join={Type.isArray(value) ? Array.join(value, ', ') : value}
+            type={private.type}
+            media={props.media}
+            width={props.renderDimensionAttributes ? private.imageSource.currentWidth : null}
+            height={props.renderDimensionAttributes ? private.imageSource.currentHeight : null}
+        />
+    `
 }