PHPackages                             formatd/componentloader - 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. formatd/componentloader

ActiveNeos-package[Utility & Helpers](/categories/utility)

formatd/componentloader
=======================

Automatic JavaScript loading for Fusion Components

v1.0.3(2y ago)02.7k↓33.3%1MITTypeScript

Since Sep 25Pushed 2y ago1 watchersCompare

[ Source](https://github.com/Format-D/FormatD.ComponentLoader)[ Packagist](https://packagist.org/packages/formatd/componentloader)[ RSS](/packages/formatd-componentloader/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (4)Dependencies (1)Versions (5)Used By (1)

FormatD.ComponentLoader
-----------------------

[](#formatdcomponentloader)

An easy way to load Javascript for fusion components

### Compatibility

[](#compatibility)

Versioning scheme:

```
 1.0.0
 | | |
 | | Bugfix Releases (non breaking)
 | Neos Compatibility Releases (non breaking)
 Feature Releases (breaking)

```

Releases and compatibility:

Package-VersionNeos CMS Version1.0.x7.x and newer### Usage

[](#usage)

The `FormatD.ComponentLoader:WindowComponentRegistry` is placed automatically in the head of Neos.Neos:Page.

Create an typescript-include-alias for `@packages` which directs to the composer packages folder.

#### Use the prototypes in your components

[](#use-the-prototypes-in-your-components)

```
prototype(Vendor.Website:MyComponent) < prototype(FormatD.ComponentLoader:Component) {
     ...
}

```

#### Create a component manager:

[](#create-a-component-manager)

```
import { AbstractComponentManager } from "@packages/Application/FormatD.ComponentLoader/Resources/Private/TypeScript/AbstractComponentManager"

export default class MyComponentManager extends AbstractComponentManager {
	initialize(domSection: HTMLElement) {
		console.log("Hello World")
	}
}
```

#### Include the corresponding files

[](#include-the-corresponding-files)

```
import {componentLoader} from "@packages/Application/FormatD.ComponentLoader/Resources/Private/TypeScript/ComponentLoader";

componentLoader.addDefaultImport('Vendor.Website:MyComponent', () => import('../private/Fusion/MyComponent'));
//...
componentLoader.initialize()
```

The optional callback can be used to initialize custom js not managed by the component manager

```
componentLoader.initialize(async (domSection, reason) => {
	if (domSection.querySelector('myElement')) {
		// add stuff here
	}
});
```

###  Health Score

26

—

LowBetter than 43% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity19

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity46

Maturing project, gaining track record

 Bus Factor2

2 contributors hold 50%+ of commits

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 ~66 days

Total

4

Last Release

767d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/bb327c5b80466d2d0236e188879eb7bfefe44330e56fe7cc27b5417a5b9689ea?d=identicon)[formatd](/maintainers/formatd)

---

Top Contributors

[![PetraWeinmueller](https://avatars.githubusercontent.com/u/42027350?v=4)](https://github.com/PetraWeinmueller "PetraWeinmueller (6 commits)")[![fdsis](https://avatars.githubusercontent.com/u/54950395?v=4)](https://github.com/fdsis "fdsis (5 commits)")[![bweinzierl](https://avatars.githubusercontent.com/u/30659291?v=4)](https://github.com/bweinzierl "bweinzierl (4 commits)")

### Embed Badge

![Health badge](/badges/formatd-componentloader/health.svg)

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

###  Alternatives

[sitegeist/monocle

An living-styleguide for Neos that is based on the actual fusion-code

45315.9k10](/packages/sitegeist-monocle)[sitegeist/kaleidoscope

Responsive-images for Neos

29352.4k10](/packages/sitegeist-kaleidoscope)[flowpack/listable

Tiny extension for listing things

35209.0k7](/packages/flowpack-listable)[kaufmanndigital/gdpr-cookieconsent

A ready-to-run package, that integrates an advanced cookie consent banner into your Neos CMS site.

2540.7k](/packages/kaufmanndigital-gdpr-cookieconsent)[neos/seo

SEO configuration and tools for Neos

13990.5k24](/packages/neos-seo)[shel/neos-colorpicker

A plugin for Neos CMS which provides a colorpicker editor

1494.4k6](/packages/shel-neos-colorpicker)

PHPackages © 2026

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