PHPackages                             fccn/webapp-tools-web-components - 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. fccn/webapp-tools-web-components

ActiveLibrary[Templating & Views](/categories/templating)

fccn/webapp-tools-web-components
================================

Collection of twig templates with web utilities

1.0.0(7y ago)038MITPHPPHP >=5.5.0

Since Apr 12Pushed 7y ago2 watchersCompare

[ Source](https://github.com/fccn/wt-web-components)[ Packagist](https://packagist.org/packages/fccn/webapp-tools-web-components)[ RSS](/packages/fccn-webapp-tools-web-components/feed)WikiDiscussions master Synced 2mo ago

READMEChangelog (1)Dependencies (7)Versions (2)Used By (0)

Webapp tools - web components
=============================

[](#webapp-tools---web-components)

This presents a collection of web components to integrate with the [FCCN's webapp skeleton](https://github.com/fccn/webapp-skeleton.git) project. The following components are provided:

- External libraries loader - loads external javascript libraries installed by composer and npm.
- Language Switcher Action - Controller action for switching the site language

Installation
------------

[](#installation)

You can install this collection in your project using composer:

```
composer require fccn/webapp-tools-web-components

```

Configuration
-------------

[](#configuration)

The site configuration loader from the [Webapp Tools - common](https://github.com/fccn/wt-common) project is used to centralize the configuration of each of component. You need to add a specific set of key-value pairs to the site configuration file, as described in the sections below.

Some of the web components provide twig views to render HTML content. All the twig template files are located in the **templates** folder. To load them in your project you need to register a twig namespace for this directory. When integrating with the [FCCN's webapp skeleton project](https://github.com/fccn/webapp-skeleton.git) you need to add the following line to the *templates\_path* variable in the site configuration:

```
$templates_path =  array(
  ...
  'web_components' => $fs_root.'/vendor/fccn/webapp-tools/web-components/templates' #add this line
  ...
  );

```

### External libraries loader

[](#external-libraries-loader)

For cleaner paths it is advised to create variables for the node modules and vendor folders in the configuration file:

```
 $node_mods_path = $fs_root.'/node_modules/';
 $vendor_path = $fs_root.'/vendor/';
```

You can than add the following key-value pairs to the config file's *$c* array:

```
//---- External libraries loader --------------------
"ext_libs_loader_service_name" => 'loader',  #name of the loader service in Slim container
"ext_libs" => array(
  //add libraries with the format name => path like for example:
  "headjs" => $node_mods_path."/headjs/dist/1.0.0/head.min.js",

  );
```

The example below shows how to create a new Slim service for the external library loader

```
$app = new Slim\App();
$c = $app->container();

//setup ext libs loader
$cnt_name = \Fccn\Lib\SiteConfig::getInstance()->get('ext_libs_loader_service_name');
$c[$cnt_name] = function($cnt){
  $loader = \Fccn\WebComponents\ExtLibsLoader::getInstance();
  return $loader;
}
```

You can associate a URL path for loading external libraries using the provided controller action - LoadExternalJSAction. The example below shows how to set the */script/lib/{libname}* path to the action controller:

```
$app = new Slim\App();

#set route for load library action
$app->get('/script/lib/{libname}', Fccn\WebComponents\LoadExternalJsAction::class);
```

Usage
-----

[](#usage)

### External libraries loader

[](#external-libraries-loader-1)

To load the external library just point to the URL you have configured in the Slim routes with the name of the library.

Testing
-------

[](#testing)

This project uses codeception for testing. To run the tests call `composer test` on the root of the project folder.

Contributing
------------

[](#contributing)

Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.

Versioning
----------

[](#versioning)

We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/fccn/wt-translate/tags).

License
-------

[](#license)

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details

###  Health Score

24

—

LowBetter than 32% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity7

Limited adoption so far

Community4

Small or concentrated contributor base

Maturity54

Maturing project, gaining track record

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

Unknown

Total

1

Last Release

2589d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/6efba5d9e65dd75d8c1abb0fc271d6516d58df27c558da0e14ef1ed0a8b1cf35?d=identicon)[pcosta](/maintainers/pcosta)

---

Tags

twigutilitiesfccnwebapp-tools

###  Code Quality

TestsCodeception

### Embed Badge

![Health badge](/badges/fccn-webapp-tools-web-components/health.svg)

```
[![Health](https://phpackages.com/badges/fccn-webapp-tools-web-components/health.svg)](https://phpackages.com/packages/fccn-webapp-tools-web-components)
```

###  Alternatives

[twig/extra-bundle

A Symfony bundle for extra Twig extensions

91292.0M315](/packages/twig-extra-bundle)[twig/intl-extra

A Twig extension for Intl

36663.2M221](/packages/twig-intl-extra)[twig/string-extra

A Twig extension for Symfony String

21946.0M133](/packages/twig-string-extra)[twig/cssinliner-extra

A Twig extension to allow inlining CSS

23018.5M55](/packages/twig-cssinliner-extra)[symfony/ux-twig-component

Twig components for Symfony

21814.8M162](/packages/symfony-ux-twig-component)[dms/twig-extension-bundle

DMS Twig Extension Bundle, leverages Fabien Potencier's extra twig extensions for your website.

19296.3k](/packages/dms-twig-extension-bundle)

PHPackages © 2026

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