packagefactory/atomicfusion

Prototypes that help implementing atomic-design and a component-architecture in Neos.Fusion

Monday, April 30, 2018
by grebaldi
Repository
8 Watchers
15 Stars
14,371 Installations

PHP
1 Dependents
0 Suggesters
5 Forks
3 Open issues
22 Versions
22 % Grown

The README.md

DEPRECATED PackageFactory.AtomicFusion

This package is deprecated. The fusion prototypes Component, ContentComponent, Augmenter and Editable were integrated into the core of Neos itself https://neos.readthedocs.io/en/stable/References/NeosFusionReference.html. The AtomicFusion:classNames helper was extracted and can be found here https://github.com/PackageFactory/atomic-fusion-classnames. This package will stay available for existing setups that depend on it but no bugfixes nor features will be added here., _(*1)

Prototypes and Helpers for implementing a component-architecture with Neos.Fusion, _(*2)

Fusion-Prototypes

PackageFactory.AtomicFusion:Component: create component that adds all properties to the props context and afterwards evaluates the renderer
PackageFactory.AtomicFusion:ClassNames: create conditional class-names from fusion-keys
PackageFactory.AtomicFusion:Editable: create and editable tag for a property
PackageFactory.AtomicFusion:Content: component base-prototype for inline editable content nodes
PackageFactory.AtomicFusion:Augmenter: add html-attributes to the rendered children

EEL-Helpers

AtomicFusion.classNames: render all arguments as classNames and apply conditions if needed

Usage

1. Component definition

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. Content Mapping

#
# 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. Content Augmentation

The Augmenter-component can be used as processor or as a standalone prototype, _(*3)

#
# 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"
    }
}

ClassName-Mapping

Atomic Fusion brings an fusion-prototype and an eel-helper to optimize the common need of creating classNames based on certain conditions., _(*4)

#
# 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}         
)}

Installation

PackageFactory.AtomicFusion is available via packagist. Just run composer require packagefactory/atomicfusion., _(*5)

We use semantic-versioning so every breaking change will increase the major-version number., _(*6)

License

see LICENSE file, _(*7)

The Versions

30/04 2018

dev-master

9999999-dev

Prototypes that help implementing atomic-design and a component-architecture in Neos.Fusion

neos-package atomicfusion

Prototypes that help implementing atomic-design and a component-architecture in Neos.Fusion

packagefactory/atomicfusion

The README.md

DEPRECATED PackageFactory.AtomicFusion

Fusion-Prototypes

EEL-Helpers

Usage

1. Component definition

2. Content Mapping

3. Content Augmentation

ClassName-Mapping

Installation

License

The Versions

dev-master

The Requires

by Martin Ficzel

by Wilhelm Behncke

v3.0.0

The Requires

by Martin Ficzel

by Wilhelm Behncke

dev-feature/fusionObjectName

The Requires

by Martin Ficzel

by Wilhelm Behncke

v2.5.0

The Requires

by Martin Ficzel

by Wilhelm Behncke

dev-feature/split-component-evaluate

The Requires

by Martin Ficzel

by Wilhelm Behncke

v2.4.0

The Requires

by Martin Ficzel

by Wilhelm Behncke

v2.3.0

The Requires

by Martin Ficzel

by Wilhelm Behncke

dev-feature/addClassNamesHelper

The Requires

by Martin Ficzel

by Wilhelm Behncke

v2.2.0

The Requires

by Martin Ficzel

by Wilhelm Behncke

v2.1.2

The Requires

by Martin Ficzel

by Wilhelm Behncke

dev-feature/addAugmenterPrototype

The Requires

by Martin Ficzel

by Wilhelm Behncke

v2.1.1

The Requires

by Martin Ficzel

by Wilhelm Behncke

dev-task/editable-node-prop

The Requires

by Martin Ficzel

by Wilhelm Behncke

v2.1.0

The Requires

by Martin Ficzel

by Wilhelm Behncke

v2.0.3

The Requires

by Martin Ficzel

by Wilhelm Behncke

v2.0.2

The Requires

by Martin Ficzel

by Wilhelm Behncke

v2.0.1