PHPackages                             packagefactory/atomicfusion - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. packagefactory/atomicfusion

Abandoned → [packagefactory/atomicfusion-classnames](/?search=packagefactory%2Fatomicfusion-classnames)ArchivedNeos-package[Utility & Helpers](/categories/utility)

packagefactory/atomicfusion
===========================

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

v3.0.0(8y ago)1440.4k6[2 issues](https://github.com/PackageFactory/atomic-fusion/issues)[1 PRs](https://github.com/PackageFactory/atomic-fusion/pulls)3GPL-3.0PHP

Since Dec 7Pushed 6y ago6 watchersCompare

[ Source](https://github.com/PackageFactory/atomic-fusion)[ Packagist](https://packagist.org/packages/packagefactory/atomicfusion)[ RSS](/packages/packagefactory-atomicfusion/feed)WikiDiscussions master Synced 2mo ago

READMEChangelog (10)Dependencies (1)Versions (22)Used By (3)

DEPRECATED PackageFactory.AtomicFusion
======================================

[](#deprecated-packagefactoryatomicfusion)

**This package is deprecated. The fusion prototypes `Component`, `ContentComponent`, `Augmenter` and `Editable` were integrated into the core of Neos itself . The `AtomicFusion:classNames` helper was extracted and can be found here . This package will stay available for existing setups that depend on it but no bugfixes nor features will be added here.**

> Prototypes and Helpers for implementing a component-architecture with Neos.Fusion

### Fusion-Prototypes

[](#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

[](#eel-helpers)

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

Usage
-----

[](#usage)

### 1. Component definition

[](#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

[](#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

[](#3-content-augmentation)

The Augmenter-component can be used as processor or as a standalone prototype

```
#
# 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

[](#classname-mapping)

Atomic Fusion brings an fusion-prototype and an eel-helper to optimize the common need of creating classNames based on certain conditions.

```
#
# 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
------------

[](#installation)

PackageFactory.AtomicFusion is available via packagist. Just run `composer require packagefactory/atomicfusion`.

We use semantic-versioning so every breaking change will increase the major-version number.

License
-------

[](#license)

see [LICENSE file](LICENSE)

###  Health Score

39

—

LowBetter than 86% of packages

Maintenance17

Infrequent updates — may be unmaintained

Popularity31

Limited adoption so far

Community24

Small or concentrated contributor base

Maturity72

Established project with proven stability

 Bus Factor1

Top contributor holds 87.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~36 days

Recently: every ~71 days

Total

15

Last Release

2935d ago

Major Versions

v1.1.0 → v2.0.02017-01-20

v2.5.0 → v3.0.02018-04-30

### Community

Maintainers

![](https://www.gravatar.com/avatar/1159e78bff9c03cc5ed626447ca5072097107f58af459a9b8bac8d933ba8298c?d=identicon)[wilhelm.behncke](/maintainers/wilhelm.behncke)

![](https://www.gravatar.com/avatar/829b4ccb51e8cff3c1e4b59d60cfe8d1b86f6d77fc31a6b3fc99227f432542ca?d=identicon)[mficzel](/maintainers/mficzel)

---

Top Contributors

[![mficzel](https://avatars.githubusercontent.com/u/1309380?v=4)](https://github.com/mficzel "mficzel (109 commits)")[![grebaldi](https://avatars.githubusercontent.com/u/2522299?v=4)](https://github.com/grebaldi "grebaldi (9 commits)")[![jonnitto](https://avatars.githubusercontent.com/u/4510166?v=4)](https://github.com/jonnitto "jonnitto (2 commits)")[![mstruebing](https://avatars.githubusercontent.com/u/12071529?v=4)](https://github.com/mstruebing "mstruebing (2 commits)")[![dimaip](https://avatars.githubusercontent.com/u/837032?v=4)](https://github.com/dimaip "dimaip (1 commits)")[![PRGfx](https://avatars.githubusercontent.com/u/3868790?v=4)](https://github.com/PRGfx "PRGfx (1 commits)")

### Embed Badge

![Health badge](/badges/packagefactory-atomicfusion/health.svg)

```
[![Health](https://phpackages.com/badges/packagefactory-atomicfusion/health.svg)](https://phpackages.com/packages/packagefactory-atomicfusion)
```

###  Alternatives

[neos/fusion-form

Fusion Form

19724.3k31](/packages/neos-fusion-form)[packagefactory/atomicfusion-proptypes

Fusion port of react-propTypes for the fusion-prototypes PackageFactory.AtomicFusion:Component and Neos.Fusion:Component

12200.0k4](/packages/packagefactory-atomicfusion-proptypes)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)