TASK: Use @Private instead of nested components

sitegeist · Nov 2, 2023 · 750080b · 750080b
1 parent 25e1ee2
commit 750080b
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 39 deletions.
diff --git 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}
         [email protected] = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')}
-        [email protected] = ${props.width ? value.withWidth(props.width) : value}
-        [email protected] = ${props.height ? value.withHeight(props.height) : value}
+        [email protected] = ${(props.width && props.height) ? value.withDimensions(props.width, props.height) : value}
+        [email protected] = ${(props.width && !props.height) ? value.withWidth(props.width) : value}
+        [email protected] = ${(props.height && !props.width) ? value.withHeight(props.height) : value}
         [email protected] = ${props.format ? value.withFormat(props.format) : value}
     }
 

diff --git 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}
-        [email protected] = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')}        [email protected] = ${props.width ? value.setWidth(props.width) : value}
-        [email protected] = ${props.height ? value.setHeight(props.height) : value}
-        [email protected] = ${props.format ? value.setFormat(props.format) : value}
+        [email protected] = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')}
+        [email protected] = ${(props.width && props.height) ? value.withDimensions(props.width, props.height) : value}
+        [email protected] = ${(props.width && !props.height) ? value.withWidth(props.width) : value}
+        [email protected] = ${(props.height && !props.width) ? value.withHeight(props.height) : value}
+        [email protected] = ${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
@@ -5,51 +5,50 @@ prototype(Sitegeist.Kaleidoscope:Source) < prototype(Neos.Fusion:Component) {
     }
 
     imageSource = null
+    [email protected] = ${value || __imageSource}
+
     srcset = null
+    [email protected] = ${value || __srcset}
+
     sizes = null
+    [email protected] = ${value || __sizes}
+
     width = null
+    [email protected] = ${value || __width}
+
     height = null
+    [email protected] = ${value || __height}
+
     format = null
+    [email protected] = ${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}
-        [email protected] = ${width ? value.withWidth(width) : value}
-        [email protected] = ${height ? value.withHeight(height) : value}
+        imageSource = ${props.imageSource}
+        [email protected] = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')}
+        [email protected] = ${(width && height) ? value.withDimensions(width, height) : value}
+        [email protected] = ${(width && !height) ? value.withWidth(width) : value}
+        [email protected] = ${(height && !width) ? value.withHeight(height) : value}
         [email protected] = ${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}
-                [email protected]={props.sizes && props.isScalableSource}
-                [email protected]={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}
+            [email protected]={props.sizes && private.isScalableSource}
+            [email protected]={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}
+        />
+    `
 }