PHPackages packagefactory/atomicfusion-afx - 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. [Templating & Views](/categories/templating) 4. / 5. packagefactory/atomicfusion-afx Abandoned → [neos/fusion-afx](/?search=neos%2Ffusion-afx)ArchivedNeos-package[Templating & Views](/categories/templating) packagefactory/atomicfusion-afx =============================== JSX inspired compact syntax for Neos.Fusion v5.0.1(8y ago)129.3k1[1 issues](https://github.com/PackageFactory/atomic-fusion-afx/issues)GPL-3.0PHP Since Apr 25Pushed 7y agoCompare [ Source](https://github.com/PackageFactory/atomic-fusion-afx)[ Packagist](https://packagist.org/packages/packagefactory/atomicfusion-afx)[ RSS](/packages/packagefactory-atomicfusion-afx/feed)WikiDiscussions master Synced today READMEChangelog (10)Dependencies (3)Versions (15)Used By (0) DEPRECATED PackageFactory.AtomicFusion.AFX ========================================== [](#deprecated-packagefactoryatomicfusionafx) **This package is deprecated in favor of . This package will stay available for existing setups that depend on it but no bugfixes nor features will be added here.** > JSX inspired compact syntax for Neos.Fusion This package provides a fusion preprocessor that expands a compact xml-ish syntax to pure fusion code. This allows to write compact components that do'nt need a seperate template file and enables unplanned extensibility for the defined prototypes because the generated fusion-code can be overwritten and controlled from the outside if needed. Installation ------------ [](#installation) PackageFactory.AtomicFusion.AFX is available via packagist. Just add `"packagefactory/atomicfusion-afx" : "~3.0.0"`to the require-section of the composer.json or run `composer require packagefactory/atomicfusion-afx`. **We use semantic-versioning so every breaking change will increase the major-version number.** Usage ----- [](#usage) With this package the following fusion code ``` prototype(PackageFactory.AtomicFusion.AFX:Example) < prototype(PackageFactory.AtomicFusion:Component) { title = 'title text' subtitle = 'subtitle line' imageUri = 'https://dummyimage.com/600x400/000/fff' # # The code afx`...` is converted to the fusion code below at parse time. # Attention: Currently there is no way to escape closing-backticks inside the Expression. # renderer = afx` {props.title} {props.subtitle} ` } ``` Will be transpiled, parsed and then cached and evaluated as beeing equivalent to the following fusion-code ``` prototype(PackageFactory.AtomicFusion.AFX:Example) < prototype(PackageFactory.AtomicFusion:Component) { title = 'title text' subtitle = 'subtitle line' imageUri = 'https://dummyimage.com/600x400/000/fff' renderer = Neos.Fusion:Tag { tagName = 'div' content = Neos.Fusion:Array { headline = Neos.Fusion:Tag { tagName = 'h1' content = ${props.title} attributes.class = 'headline' } subheadline = Neos.Fusion:Tag { tagName = 'h2' content = ${props.subtitle} attributes.subheadline = 'subheadline' @if.hasSubtitle = ${props.subtitle ? true : false} } image = PackageFactory.AtomicFusion.AFX:Image { uri = ${props.imageUri} } } } } ``` AFX Language Rules ------------------ [](#afx-language-rules) All whitepaces around the outer elements are ignored. Whitepaces that are connected to a newline are considered irrelevant and are ignored. ### HTML-Tags (Tags without Namespace) [](#html-tags-tags-without-namespace) HTML-Tags are converted to `Neos.Fusion:Tag` Objects. All attributes of the afx-tag are rendered as tag-attributes. The following html: ``` {props.headline} ``` Is transpiled to: ``` Neos.Fusion:Tag { tagName = 'h1' attributes.class = 'headline' content = ${props.headline} @if.hasHeadline = ${props.headline ? true : false} } ``` If a tag is self-closing and has no content it will be rendered as self closing fusion-tag:. ``` ``` Is transpiled to: ``` Neos.Fusion:Tag { tagName = 'br' selfClosingTag = true } ``` ### Fusion-Object-Tags (namespaced Tags) [](#fusion-object-tags-namespaced-tags) All namespaced-tags are interpreted as prototype-names and all attributes are passed as top-level fusion-properties. The following html: ``` {props.headline} ``` Is transpiled as: ``` Vendor.Site:Prototype { type = 'headline' content = ${props.headline} @if.hasHeadline= ${props.headline ? true : false} } ``` ### Tag-Children [](#tag-children) The handling of child-nodes below an afx-node is differs based on the number of childNodes that are found. #### Single tag-children [](#single-tag-children) If a AFX-tag contains exactly one child this child is rendered directly into the `content`-attribute. The child is then interpreted as string, eel-expression, html- or fusion-object-tag. The following AFX-Code: ``` {props.title} ``` Is transpiled as: ``` Neos.Fusion:Tag { tagName = 'h1' content = {props.title} } ``` #### Multiple tag-children [](#multiple-tag-children) If an AFX-tag contains more than one child the content is are rendered as `Neos.Fusion:Array` into the `content`-attribute. The children are interpreted as string, eel-expression, html- or fusion-object-tag. The following AFX-Code: ``` {props.title}: {props.subtitle} ``` Is transpiled as: ``` Neos.Fusion:Tag { tagName = 'h1' content = Neos.Fusion:Array { item_1 = {props.title} item_2 = ': ' item_3 = ${props.subtitle} } } ``` The `@key`-property of tag-children inside alters the name of the fusion-attribute to recive render the array-child into. If no `@key`-property is given `index_x` is used starting by `x=1`. ``` {props.title} {props.description} ``` Is transpiled as: ``` Vendor.Site:Prototype { text = Neos.Fusion:Array { title = Neos.Fusion:Tag { tagName = 'h2' content = ${props.title} } description = Neos.Fusion:Tag { tagName = 'p' content = ${props.description} } } } ``` ### Meta-Attributes [](#meta-attributes) In general all meta-attributes start with an @-sign. The `@children`-attribute defined the property that is used to render the content/children of the current tag into. The default property name for the children is `content`. The `@key`-attribute can be used to define the property name of an item among its siblings if an array is rendered. If no `@key` is defined `index_x` is used starting at `x=1. All other meta attributes are directly added to the generated prototype and can be used for @if or @process statements. ### Whitespace and Newlines [](#whitespace-and-newlines) AFX is not html and makes some simplifications to the code to optimize the generated fusion and allow a structured notation of the component hierarchy. The following rules are applied for that: 1. **Newlines and Whitespace-Characters that are connected to a newline are considered irrelevant and are ignored** ``` {'eelExpression 1'} {'eelExpression 2'} ``` Is transpiled as: ``` Neos.Fusion:Tag { tagName = 'h1' contents = Neos.Fusion:Array { item_1 = ${'eelExpression 1'} item_2 = ${'eelExpression 2'} } } ``` 2. **Spaces between Elements on a single line are considered meaningful and are preserved** ``` {'eelExpression 1'} {'eelExpression 2'} ``` Is transpiled as: ``` Neos.Fusion:Tag { tagName = 'h1' contents = Neos.Fusion:Array { item_1 = ${'eelExpression 1'} item_2 = ' ' item_3 = ${'eelExpression 2'} } } ``` Examples -------- [](#examples) ### Rendering of Collections with `Neos.Fusion:Collection` [](#rendering-of-collections-with-neosfusioncollection) For rendering of lists or menus a presentational-component usually will recieve arrays of preprocessed data as prop. To iterate over such an array the `Neos.Fusion:Collection`can be used in afx. ``` prototype(PackageFactory.AtomicFusion.AFX:IterationExample) < prototype(PackageFactory.AtomicFusion:Component) { # array {[href:'http://www.example_1.com', title:'Title 1'], [href:'http://example_2.com', title:'Title 2']} items = null renderer = afx` {item.title} ` } ``` ### Augmentation of Child-Components with `PackageFactory.AtomicFusion:Augmenter` [](#augmentation-of-child-components-with-packagefactoryatomicfusionaugmenter) The `PackageFactory.AtomicFusion:Augmenter` can be used to add additional attributes to rendered content. This allows some rendering flexibility without extending the api of the component. This is a useful pattern to avoid unneeded tag-wrapping in cases where only additional classes are needed. ``` prototype(PackageFactory.AtomicFusion.AFX:SliderExample) < prototype(Packagefactory.AtomicFusion:Component) { images = ${[]} renderer = afx` ` } ``` The example iterates over a list of images and uses the `PackageFactory.AtomicFusion.AFX:ImageExample` to render each one while the `PackageFactory.AtomicFusion:Augmenter` adds a class- and data-attribute from outside. License ------- [](#license) see [LICENSE file](LICENSE) ### Health Score 35 — LowBetter than 77% of packages Maintenance18 Infrequent updates — may be unmaintained Popularity26 Limited adoption so far Community10 Small or concentrated contributor base Maturity71 Established project with proven stability Bus Factor1 Top contributor holds 98.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 ~30 days Recently: every ~78 days Total 13 Last Release 2985d ago Major Versions v1.0.2 → v2.0.02017-05-30 v2.0.1 → v3.0.02017-06-19 3.0.x-dev → v4.0.02017-07-17 v4.0.0 → v5.0.02017-11-13 ### 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 (87 commits)")[![mstruebing](https://avatars.githubusercontent.com/u/12071529?v=4)](https://github.com/mstruebing "mstruebing (1 commits)") --- Tags archiveddeprecated ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/packagefactory-atomicfusion-afx/health.svg) ``` [![Health](https://phpackages.com/badges/packagefactory-atomicfusion-afx/health.svg)](https://phpackages.com/packages/packagefactory-atomicfusion-afx) ``` ### Alternatives [neos/fusion-afx JSX inspired compact syntax for Neos.Fusion 25969.3k59](/packages/neos-fusion-afx)[limenius/react-bundle Client and Server-side react rendering in a Symfony Bundle 3861.2M](/packages/limenius-react-bundle)[neos/neos An open source Content Application Platform based on Flow. A set of core Content Management features is resting within a larger context that allows you to build a perfectly customized experience for your users. 1131.0M737](/packages/neos-neos)[area17/laravel-auto-head-tags Laravel Auto Head Tags helps you build the list of head elements for your app 4616.0k](/packages/area17-laravel-auto-head-tags)[sandstorm/neostwofactorauthentication 1225.7k](/packages/sandstorm-neostwofactorauthentication)[jelix/wikirenderer WikiRenderer is a library to generate HTML or anything else from wiki content. 1712.2k1](/packages/jelix-wikirenderer) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)