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 1mo ago

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

14

—

LowBetter than 2% of packages

Maintenance32

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://www.gravatar.com/avatar/70bb7e63bfb56f0c29dbd236984655da2a8ebdfcfac1cd578c4fba176e94abb2?d=identicon)[WebMamba](/maintainers/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

[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[whitecube/nova-flexible-content

Flexible Content & Repeater Fields for Laravel Nova.

8053.0M25](/packages/whitecube-nova-flexible-content)[mopa/bootstrap-bundle

Easy integration of twitters bootstrap into symfony2

7042.9M33](/packages/mopa-bootstrap-bundle)[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3871.2M](/packages/limenius-react-bundle)[nicmart/string-template

StringTemplate is a very simple string template engine for php. I've written it to have a thing like sprintf, but with named and nested substutions.

2101.7M30](/packages/nicmart-string-template)[symfony/ux-icons

Renders local and remote SVG icons in your Twig templates.

555.8M69](/packages/symfony-ux-icons)

PHPackages © 2026

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