README

此包已弃用。融合原型 Component、ContentComponent、Augmenter 和 Editable 已集成到 Neos 本身的核心 https://neos.readthedocs.io/en/stable/References/NeosFusionReference.html。助手 AtomicFusion:classNames 已提取，可在此处找到 https://github.com/PackageFactory/atomic-fusion-classnames。此包将保持可用状态，以供依赖它的现有设置使用，但不会添加任何错误修复或新功能。

用于使用 Neos.Fusion 实现组件架构的原型和助手

Fusion-Prototypes

• PackageFactory.AtomicFusion:Component: 创建组件，将所有属性添加到 props 上下文，然后评估 renderer
• PackageFactory.AtomicFusion:ClassNames: 从融合键创建条件类名
• PackageFactory.AtomicFusion:Editable: 为属性创建可编辑的标签
• PackageFactory.AtomicFusion:Content: 内联可编辑内容节点的组件基原型
• PackageFactory.AtomicFusion:Augmenter: 向渲染的子元素添加 HTML 属性

EEL-Helpers

• AtomicFusion.classNames: 将所有参数渲染为 classNames，并在需要时应用条件

使用方法

1. 组件定义

prototype(Vendor.Site:Component) < prototype(PackageFactory.AtomicFusion:Component) {
    
    #
    # all fusion properties except renderer are evaluated and passed 
    # are made available to the renderer as object ``props`` in the context
    # 
    title = ''
    description = ''
    bold = false

    #
    # the renderer path is evaluated with the props in the context
    # that way regardless off nesting the props can be accessed
    # easily via ${props.__name__}
    # 
    renderer = Neos.Fusion:Tag {
    
        #
        # all arguments of the AtomicFusion.classNames eelHelper are evaluated 
        # and the following rules are applied
        # 
        # - falsy: (null, '', [], {}) -> not rendered
        # - array: all items that are scalar and truthy are rendered as class-name
        # - object: keys that have a truthy values are rendered as class-name
        # - scalar: is cast to string and rendered as class-name
        # 
        attributes.class =  ${AtomicFusion.classNames('component' , {'component--bold': props.bold})} 
        
        content = Neos.Fusion:Array {
            headline = Neos.Fusion:Tag {
                tagName = 'h1'
                content = ${props.title}
            }

            description = Neos.Fusion:Tag {
                content = ${props.description}
            }
        }
    }
}

2. 内容映射

#
# Map node content to a presentational component 
# 
# instead of Neos.Neos:Content PackageFactory.AtomicFusion:Content 
# is used base prototype that adds the needed contentElementWrapping for the backend
#
prototype(Vendor.Site:ExampleContent) < prototype(PackageFactory.AtomicFusion:Content) {
	renderer = Vendor.Site:Component {
	
		# 
		# pass boolean property 'bold' from the
		# node to the component
		#
		bold = ${q(node).property('bold')}	
	
		#
		# use the editable component to pass an editable 
		# but use a span instead a div tag in the backend
		#
		title = PackageFactory.AtomicFusion:Editable {
			property = 'title'
			block = false
		}
		
		#
		# use the editable component to pass an editable 
		# tag for the property 'description'
		#
		description = PackageFactory.AtomicFusion:Editable {
			property = 'description'
		}
	}
}

3. 内容增强

Augmenter 组件可以用作处理器或独立的原型

#
# Standalone-Augmenter
# 
augmentedContent = PackageFactory.AtomicFusion:Augmenter {

    #
    # The content that shall be augmented. 
    #
    content = Neos.Fusion:Tag {
        tagName = 'h2'
        content = 'Lorem Ipsum'
    }
    
    #
    # If more than one tag is found the content is wrapped in the 
    # fallback-Tag before augmentation wich has "div" as default   
    # 
    fallbackTagName = 'div'
        
    #
    # All other fusion properties are added to the html-content
    # as html-attributes.
    # 
    class="foo" 
    data-example="data"

}

#
# Processor-Augmenter
#
augmentedContent = Neos.Fusion:Tag {
    tagName = 'h2'
    content = 'Lorem Ipsum'
    @process.augment = PackageFactory.AtomicFusion:Augmenter {
        class = "foo"
        data-example="data"
    }
}

类名映射

Atomic Fusion 带来融合原型和 EEL 助手，以优化基于特定条件的创建 classNames 的常见需求。

#
# the properties of the fusion protoype PackageFactory.AtomicFusion:ClassNames 
# are evaluated nd the keys of all non-false properties are returned
# 
attributes.class = PackageFactory.AtomicFusion:ClassNames {
    component = true
    component--bold = ${props.bold} 
}

#
# all arguments of the AtomicFusion:classNames eelHelper are evaluated 
# and the following rules are applied
# 
# - falsy: (null, '', [], {}) -> not rendered
# - array: all items that are scalar and truthy are rendered as class-name
# - object: keys that have a truthy values are rendered as class-name
# - scalar: is cast to string and rendered as class-name
# 
attributes.class = ${AtomicFusion.classNames(
    "component",
    {"component--bold": props.bold, "component--highlight": props.highlight}         
)}

安装

PackageFactory.AtomicFusion 通过 packagist 提供。只需运行 composer require packagefactory/atomicfusion。

我们使用语义版本控制，每次重大更改都会增加主要版本号。

许可证

请参阅 LICENSE 文件