Merge pull request #73 from sitegeist/task/avoidNestedComponentsInFav…

…orOfAtPrivateProps TASK: Use @Private instead of nested components
sitegeist · Sep 27, 2024 · ec1d163 · ec1d163
2 parents 1aa673e + 781b7fb
commit ec1d163
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 136 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,22 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+# Composer uses 4 spaces itself
+[composer.json]
+indent_size = 4
+
+# PHP should follow the PSR-2 standard
+[*.php]
+indent_size = 4
+
+# fusion uses 4 spaces itself
+[*.fusion]
+indent_size = 4
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -13,13 +13,9 @@ jobs:
         strategy:
             fail-fast: false
             matrix:
-                php-versions: ['8.0', '8.1']
+                php-versions: ['8.0', '8.1', '8.2', '8.3']
                 neos-versions: ['8.3']
-                include:
-                  - php-versions: '7.4'
-                    neos-versions: '7.3'
-                  - php-versions: '8.0'
-                    neos-versions: '8.0'
+
         runs-on: ubuntu-latest
 
         steps:

diff --git a/Resources/Private/Fusion/Prototypes/Image.fusion b/Resources/Private/Fusion/Prototypes/Image.fusion
@@ -128,42 +128,36 @@ prototype(Sitegeist.Kaleidoscope:Image) < prototype(Neos.Fusion:Component) {
     attributes = Neos.Fusion:DataStructure
     renderDimensionAttributes = true
 
-    renderer = Neos.Fusion:Component {
-        @if.hasImageSource = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')}
+    @private {
+        # detect scalable sources
         isScalableSource = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ScalableImageSourceInterface')}
 
         # apply format, width and height to the imageSource
         imageSource = ${props.imageSource}
-        [email protected] = ${props.width ? value.withWidth(props.width) : value}
-        [email protected] = ${props.height ? value.withHeight(props.height) : 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}
         [email protected] = ${props.quality ? value.withQuality(props.quality) : value}
-
-        srcset = ${props.srcset}
-        sizes = ${props.sizes}
-        loading = ${props.loading}
-        alt =  ${props.alt}
-        title = ${props.title}
-        class = ${props.class}
-        attributes = ${props.attributes}
-        renderDimensionAttributes = ${props.renderDimensionAttributes}
-
-        renderer = afx`
-            <img
-                src={props.imageSource.src()}
-                srcset={props.imageSource.srcset(props.srcset)}
-                [email protected]={props.isScalableSource && props.srcset}
-                sizes={props.sizes}
-                [email protected]={props.isScalableSource && props.sizes}
-                [email protected]={Type.isArray(value) ? Array.join(value, ', ') : value}
-                loading={props.loading}
-                class={props.class}
-                alt={props.alt || props.imageSource.alt() || ''}
-                title={props.title || props.imageSource.title()}
-                width={props.renderDimensionAttributes ? props.imageSource.width() : null}
-                height={props.renderDimensionAttributes ? props.imageSource.height() : null}
-                {...props.attributes}
-            />
-        `
     }
+
+    renderer = afx`
+        <img
+            @if={private.imageSource}
+            src={private.imageSource.src()}
+            srcset={private.imageSource.srcset(props.srcset)}
+            [email protected]={private.isScalableSource && props.srcset}
+            sizes={props.sizes}
+            [email protected]={private.isScalableSource && props.sizes}
+            [email protected]={Type.isArray(value) ? Array.join(value, ', ') : value}
+            loading={props.loading}
+            class={props.class}
+            alt={props.alt || private.imageSource.alt() || ''}
+            title={props.title || private.imageSource.title()}
+            width={props.renderDimensionAttributes ? private.imageSource.width() : null}
+            height={props.renderDimensionAttributes ? private.imageSource.height() : null}
+            {...props.attributes}
+        />
+    `
 }
diff --git a/Resources/Private/Fusion/Prototypes/Picture.fusion b/Resources/Private/Fusion/Prototypes/Picture.fusion
@@ -80,67 +80,53 @@ prototype(Sitegeist.Kaleidoscope:Picture) < prototype(Neos.Fusion:Component) {
         __quality = ${this.quality}
     }
 
-    renderer = Neos.Fusion:Component {
-        @if.hasImageSource = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')}
-
+    @private {
         # apply format, width and height to the imageSource
         imageSource = ${props.imageSource}
-        [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.quality ? value.setQuality(props.quality) : value}
-
-        srcset = ${props.srcset}
-        sizes = ${props.sizes}
-        loading = ${props.loading}
-        sources = ${props.sources}
-        formats = ${props.formats}
-        alt = ${props.alt}
-        title = ${props.title}
-        class = ${props.class}
-        attributes = ${props.attributes}
-        imgAttributes = ${props.imgAttributes}
-        content = ${props.content}
-        renderDimensionAttributes = ${props.renderDimensionAttributes}
+        [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}
+        [email protected] = ${props.quality ? value.withQuality(props.quality) : value}
+    }
 
-        renderer = afx`
-            <picture class={props.class} {...props.attributes}>
-                {props.content}
-                <Neos.Fusion:Loop items={props.sources} itemName="source" @if.has={props.sources}>
-                    <Sitegeist.Kaleidoscope:Source
-                        imageSource={source.imageSource ? source.imageSource : props.imageSource}
-                        type={source.type}
-                        media={source.media}
-                        format={source.format}
-                        width={source.width}
-                        height={source.height}
-                        quality={source.quality}
-                        srcset={source.srcset ? source.srcset : props.srcset}
-                        sizes={source.sizes ? source.sizes : props.sizes}
-                        renderDimensionAttributes={props.renderDimensionAttributes}
-                    />
-                </Neos.Fusion:Loop>
-                <Neos.Fusion:Loop
-                    @if.has={props.imageSource && props.formats}
-                    items={Type.isArray(props.formats) ? props.formats : String.split(props.formats, ',')}
-                    itemName="format"
-                >
-                    <Sitegeist.Kaleidoscope:Source
-                        imageSource={props.imageSource}
-                        format={String.trim(format)}
-                    />
-                </Neos.Fusion:Loop>
-                <Sitegeist.Kaleidoscope:Image
-                    imageSource={props.imageSource}
-                    sizes={props.sizes}
-                    srcset={props.srcset}
-                    loading={props.loading}
-                    alt={props.alt}
-                    title={props.title}
-                    attributes={props.imgAttributes}
+    renderer = afx`
+        <picture class={props.class} {...props.attributes} @if.has={private.imageSource}>
+            {props.content}
+            <Neos.Fusion:Loop items={props.sources} itemName="source" @if.has={props.sources}>
+                <Sitegeist.Kaleidoscope:Source
+                    imageSource={source.imageSource ? source.imageSource : private.imageSource}
+                    type={source.type}
+                    media={source.media}
+                    format={source.format}
+                    width={source.width}
+                    height={source.height}
+                    srcset={source.srcset ? source.srcset : props.srcset}
+                    sizes={source.sizes ? source.sizes : props.sizes}
                     renderDimensionAttributes={props.renderDimensionAttributes}
                 />
-            </picture>
-        `
-    }
+            </Neos.Fusion:Loop>
+            <Neos.Fusion:Loop
+                @if.has={private.imageSource && props.formats}
+                items={Type.isArray(props.formats) ? props.formats : String.split(props.formats, ',')}
+                itemName="format"
+            >
+                <Sitegeist.Kaleidoscope:Source
+                    imageSource={private.imageSource}
+                    format={String.trim(format)}
+                />
+            </Neos.Fusion:Loop>
+            <Sitegeist.Kaleidoscope:Image
+                imageSource={private.imageSource}
+                sizes={props.sizes}
+                srcset={props.srcset}
+                loading={props.loading}
+                alt={props.alt}
+                title={props.title}
+                attributes={props.imgAttributes}
+                renderDimensionAttributes={props.renderDimensionAttributes}
+            />
+        </picture>
+    `
 }
diff --git a/Resources/Private/Fusion/Prototypes/Source.fusion b/Resources/Private/Fusion/Prototypes/Source.fusion
@@ -5,54 +5,54 @@ 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}
+
     quality = null
+    [email protected] = ${value || __quality}
+
     type = null
     media = null
     renderDimensionAttributes = true
 
-    renderer = Neos.Fusion:Component {
-
-        @context {
-            imageSource = ${props.imageSource || __imageSource}
-            format = ${props.format || __format}
-            quality = ${props.quality || __quality}
-            width = ${props.width || __width}
-            height = ${props.height || __height}
-            srcset = ${props.srcset || __srcset}
-            sizes = ${props.sizes || __sizes}
-        }
-
-        @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}
-        [email protected] = ${format ? value.withFormat(format) : value}
-        [email protected] = ${quality ? value.withQuality(quality) : 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}
-            />
-        `
+    @private {
+        isScalableSource = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ScalableImageSourceInterface')}
+
+        imageSource = ${props.imageSource}
+        [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}
+        [email protected] = ${props.quality ? value.withQuality(props.quality) : value}
+
+        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}
+        />
+    `
 }
diff --git a/composer.json b/composer.json
@@ -4,8 +4,8 @@
     "name": "sitegeist/kaleidoscope",
     "license": "GPL-3.0-or-later",
     "require": {
-        "neos/neos": "^7.0 || ^8.0 || ^9.0 || dev-master",
-        "neos/fusion-afx": "^7.0 || ^8.0 || ^9.0 || dev-master",
+        "neos/neos": "^8.3 || ^9.0 || dev-master",
+        "neos/fusion-afx": "^8.3 || ^9.0 || dev-master",
         "neos/media": "*",
         "neos/imagine": "*"
     },