PHPackages                             webmamba/one-file-twig-component-bundle - 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. webmamba/one-file-twig-component-bundle

ActiveSymfony-bundle[Templating & Views](/categories/templating)

webmamba/one-file-twig-component-bundle
=======================================

Let you create your Twig Component with template, CSS, an, and Javascript in one file

00PHP

Since Jan 11Pushed 1y ago1 watchersCompare

[ Source](https://github.com/WebMamba/OneFileTwigComponentBundle)[ Packagist](https://packagist.org/packages/webmamba/one-file-twig-component-bundle)[ RSS](/packages/webmamba-one-file-twig-component-bundle/feed)WikiDiscussions main Synced today

READMEChangelogDependenciesVersions (1)Used By (0)

OneFileTwigComponent Bundle
===========================

[](#onefiletwigcomponent-bundle)

Caution

This Bundle not really aim for to be production ready and run on professional website, it's more like a POC.

This Bundle allow you to define Twig Component with his HTML, CSS, and Javascript in one file.

```

    Counter
    Click
    count 0

    h3 {
        color: yellow;
    }

    import { Controller } from "@hotwired/stimulus"

    export default class extends Controller {
        connect() {
            this.count = 0;
        }

        static targets = ['count'];

        increment() {
            this.count++;
            this.countTarget.textContent = this.count;
        }
    }

```

This Bundle make also your CSS and your Javascript scoped to this component, so by using this bundle your sure that your CSS or Javascript will conflic with the rest of the page.

Install
-------

[](#install)

In your Symfony application install the bundle :

```
composer require webmamba/one-file-twig-component-bundle
```

then add the bundle to your `config/bundles.php`:

```
return [
    //
    Webmamba\OneFileTwigComponentBundle\OneFileTwigComponentBundle::class => ['all' => true],
];
```

you need to tweak a bit the `assets/bootstrap.js`:

```
import { startStimulusApp } from '@symfony/stimulus-bundle';
import Clipboard from 'stimulus-clipboard';

const app = startStimulusApp();

app.register('clipboard', Clipboard);

const elements = document.querySelectorAll('[data-ux-component-controller-files]');

console.log(elements);

elements.forEach((element) => {
    let file = element.getAttribute('data-ux-component-controller-files');
    let id = element.getAttribute('data-ux-component-id');

    import(file).then((result) => {
        app.register(id, result.default) ;
    });
});
```

and last step add the following config lines in your `config/packages/twig.yaml`

```
twig:
  // ...
  paths: '%kernel.project_dir%/var/component-assets': ~
```

Congrats 🍾 the bundle is now fully installed.

How to use it ?
---------------

[](#how-to-use-it-)

You can now go on any component template you want and run the following :

```
Hello world

{# The CSS you need #}

{# the JavaScript your need #}

```

Why it's not on Symfony UX ?
----------------------------

[](#why-its-not-on-symfony-ux-)

I am not happy with the implementation right now. Few issue :

- We don't leverage AssetMapper
- I listen to the kernel.response event to modify the importmap
- We should have more cache
- We should have a command or something so when we deploy we compile all the CSS and Javascript from the TwigComponents template
- ...

How could you help ?
--------------------

[](#how-could-you-help-)

You think you have a better implemenatation, you know how to fix the issues above, or anything, do a pull request or an issue. Everything here is open to discution. Thanks! See you soon!

###  Health Score

13

—

LowBetter than 1% of packages

Maintenance30

Infrequent updates — may be unmaintained

Popularity0

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity16

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% 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.

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/32077734?v=4)[Matheo D.](/maintainers/WebMamba)[@WebMamba](https://github.com/WebMamba)

---

Top Contributors

[![WebMamba](https://avatars.githubusercontent.com/u/32077734?v=4)](https://github.com/WebMamba "WebMamba (2 commits)")

### Embed Badge

![Health badge](/badges/webmamba-one-file-twig-component-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/webmamba-one-file-twig-component-bundle/health.svg)](https://phpackages.com/packages/webmamba-one-file-twig-component-bundle)
```

###  Alternatives

[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3851.2M](/packages/limenius-react-bundle)[area17/laravel-auto-head-tags

Laravel Auto Head Tags helps you build the list of head elements for your app

4616.1k](/packages/area17-laravel-auto-head-tags)[ktquez/laravel-tinymce

TinyMCE editor for Laravel and Lumen Framework

2525.4k](/packages/ktquez-laravel-tinymce)[jelix/wikirenderer

WikiRenderer is a library to generate HTML or anything else from wiki content.

1712.3k1](/packages/jelix-wikirenderer)[webkinder/sproutset

A Composer package for handling responsive images in Roots Bedrock + Sage + Blade projects.

282.2k](/packages/webkinder-sproutset)

PHPackages © 2026

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