PHPackages                             bedita/web-tools - 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. bedita/web-tools

ActiveCakephp-plugin[Utility & Helpers](/categories/utility)

bedita/web-tools
================

Tools for CakePHP apps that use BEdita API

v6.0.5(3mo ago)374.7k↑31.9%3[1 issues](https://github.com/bedita/web-tools/issues)[3 PRs](https://github.com/bedita/web-tools/pulls)2LGPL-3.0-or-laterPHPPHP >=8.3CI passing

Since Dec 14Pushed 2mo ago3 watchersCompare

[ Source](https://github.com/bedita/web-tools)[ Packagist](https://packagist.org/packages/bedita/web-tools)[ RSS](/packages/bedita-web-tools/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (14)Versions (77)Used By (2)

BEdita/WebTools plugin for CakePHP web apps using BEdita API
============================================================

[](#beditawebtools-plugin-for-cakephp-web-apps-using-bedita-api)

[![Github Actions](https://github.com/bedita/web-tools/workflows/php/badge.svg)](https://github.com/bedita/web-tools/actions?query=workflow%3Aphp)[![codecov](https://camo.githubusercontent.com/0a07d022fad7291868d35bba6e5d7cfef7bb180bd0f851c5c9692708669ecf43/68747470733a2f2f636f6465636f762e696f2f67682f6265646974612f7765622d746f6f6c732f6272616e63682f6d61737465722f67726170682f62616467652e737667)](https://codecov.io/gh/bedita/web-tools)[![phpstan](https://camo.githubusercontent.com/fe840de72b9c500418bd5dfedb0536641b3fa0139a7917f58997fe8dcc9f794e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048505374616e2d6c6576656c253230302d627269676874677265656e2e737667)](https://phpstan.org)[![psalm](https://camo.githubusercontent.com/c9399531f83db9ad38eace5e32a5d3e3382a79f64223deea86d32c3355952ecf/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7073616c6d2d6c6576656c253230382d627269676874677265656e2e737667)](https://camo.githubusercontent.com/c9399531f83db9ad38eace5e32a5d3e3382a79f64223deea86d32c3355952ecf/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7073616c6d2d6c6576656c253230382d627269676874677265656e2e737667)\]() [![Scrutinizer Code Quality](https://camo.githubusercontent.com/55ba409623be44dd50040c56065d323e60a467535f05c0aeb2b5a79e00cb6fa2/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f6265646974612f7765622d746f6f6c732f6261646765732f7175616c6974792d73636f72652e706e673f623d6d6173746572)](https://scrutinizer-ci.com/g/bedita/web-tools/?branch=master)[![image](https://camo.githubusercontent.com/40c949a420a273e07f50ed632a36cb489949120b44db14bef15527fb9025b49e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6265646974612f7765622d746f6f6c732e7376673f6c6162656c3d737461626c65)](https://packagist.org/packages/bedita/web-tools)[![image](https://camo.githubusercontent.com/6f7210299df22dae4106ca9b3c58b3cabb91055c03a04eda8afc387df37ce79d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6265646974612f7765622d746f6f6c732e737667)](https://github.com/bedita/web-tools/blob/master/LICENSE.LGPL)

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

[](#installation)

First, if `vendor` directory has not been created, you have to install composer dependencies using:

```
composer install
```

You can install this plugin into your CakePHP application using [composer](http://getcomposer.org).

The recommended way to install composer packages is:

```
composer require bedita/web-tools
```

Helpers
-------

[](#helpers)

### WebComponents

[](#webcomponents)

This helper provides some methods to setup Custom Elements with some app variables in order to initialize client side JavaScript components. It aims to avoid the generation of inline JS dictionaries or variables using declarative assignments to HTML nodes. String and numeric values are added as node attributes, while objects and arrays using inline scripts.

#### Example

[](#example)

Create a js file in the `webroot/js` which contains the Custom Element definition:

**webroot/js/components/awesome-video.js**

```
class AwesomeVideo extends HTMLElement {
    connectedCallback() {
        this.video = document.createElement('video');
        this.video.src = this.getAttribute('src');
        this.appendChild(this.video);
    }
}

customElements.define('awesome-video', AwesomeVideo);
```

Now you can initialize the element in a twig template:

**templates/Pages/document.twig**

```
{{ WebComponents.element('awesome-video', { src: attach.uri }, 'components/awesome-video') }}
```

You can also extends native tags in order to setup simple interactions with the `is` method:

**webroot/js/components/awesome-table.js**

```
class AwesomeTable extends HTMLElement {
    connectedCallback() {
        this.addEventListener('click', (event) => {
            let th = event.target.closest('[sort-by]');
            if (th) {
                this.sortBy(th.getAttribute('sort-by'));
            }
        }):
    }

    sortBy(field) {
        // ...
    }
}

customElements.define('awesome-table', AwesomeTable, { extends: 'table' });
```

**templates/Pages/users.twig**

```

        Email
        Name

        {% for user in users %}

                {{ user.attributes.email }}
                {{ user.attributes.name }}

        {% endfor %}

```

Load assets with AssetRevisions
-------------------------------

[](#load-assets-with-assetrevisions)

`AssetRevisions` with the help of an asset strategy can easily resolve the common issue of loading built versioned assets as `js` and `css`.

Through `\BEdita\WebTools\View\Helper\HtmlHelper` you can transparently link built assets placed in a custom folder or raw assets living in `webroot/js` or `webroot/css`.

### Define which strategy to use

[](#define-which-strategy-to-use)

The best place to define which strategy your app will use is the `Application::bootstrap()`

```
use BEdita\WebTools\Utility\AssetRevisions;
use BEdita\WebTools\Utility\Asset\Strategy\EntrypointsStrategy;

public function bootstrap(): void
{
    parent::bootstrap();

    AssetsRevisions::setStrategy(new EntrypointsStrategy());

    // you can also set the path where to find the manifest (default is webroot/build/entrypoints.json)
    // AssetsRevisions::setStrategy(
    //     new EntrypointsStrategy(['manifestPath' => '/custom/path/entrypoints.json']);
    // );
}
```

There are two assets strategies out of the box:

- `EntrypointsStrategy` based on the `entrypoints.json` file generated by [Webpack Encore](https://github.com/symfony/webpack-encore)
- `RevManifestStrategy` based on `rev-manifest.json` file generated by [gulp-rev](https://github.com/sindresorhus/gulp-rev)

Anyway you are free to define your own strategy implementing `AssetStrategyInterface`.

### Use HtmlHelper to load assets

[](#use-htmlhelper-to-load-assets)

Once a strategy is set you can link assets using `\BEdita\WebTools\View\Helper\HtmlHelper` and its methods `script()`, `css()` and `assets()`, for example:

```