machy8/webloader

Simple, easy to use, php bundler for javascript and css

v2.0.1 2021-12-26 13:58 UTC

Requires

• php: >=8.0
• nette/neon: ^2.4|^3.0

Requires (Dev)

• machy8/google-closure-compiler: ^1.0
• nette/di: ^3.0
• nette/tester: ^2.4
• phpstan/phpstan: ^1.2
• symplify/config-transformer: ^10.0
• symplify/easy-coding-standard: ^10.0
• tracy/tracy: ^2.8
• tubalmartin/cssmin: ^4.1

Suggests

• machy8/google-closure-compiler: PHP client for the Google Closure Compiler API in one file
• tedivm/jshrink: Javascript Minifier built in PHP
• tubalmartin/cssmin: A PHP port of the YUI CSS compressor

BSD-3-Clause

• javascript
• css
• webloader
• frontend
• module-bundler
• build-tool

README

📦 Simple, easy to use, php bundler for javascript and css.

In a nutshell

• Configurable: in one file (example bellow or in docs)
• Files collections and containers: makes assets organizing incredibly simple
• Filters: callable in two different ways
• Path placeholders: reusable paths to files, less writing
• Allows you to load remote and local files
• If you have some critical css, you can load it directly into the page with minimal configuration required
• Prepared for read only deployment - webloader is able to compile all files collections at once
• Debugger bar for Tracy

Requirements

• PHP 8.0+
• If you use Nette Framework - v2.4+

Installation

 composer require machy8/webloader

Docs

• Files collections
• Files collections containers
• Filters
• Placeholders
• Tracy bridge

Quick start

Let's say we have two css files (styla-a.css and style-b.css) and we want to bundle them into one file which name will be my-bundle. This bundle will be stored in a webtemp dir (must be accessible from a browser).

The recommended way to configure Web Loader is through neon configuration files. The first step is to create a bundle.neon.

my-bundle:
    cssFiles:
        - path/to/style-a.css
        - path/to/style-b.css

Next step is to init Web Loader, set the output dir path and tell him to create bundles from bundle.neon.

$webloader = new \WebLoader\Engine('path/to/webtemp');
$webloader->createFilesCollectionsFromConfig('path/to/bundle.neon');

The last step is to call files collections render to render css files collection named my-bundle.

echo $webloader->getFilesCollectionRender()->css('my-bundle');

The PHP file after the last edit will looks like this:

$webloader = new \WebLoader\Engine('path/to/output/dir');
$webloader->createFilesCollectionsFromConfig('path/to/bundle.neon');

echo $webloader->getFilesCollectionRender()->css('my-bundle');

The output will be similiar to the following code:

<link type="text/css" rel="stylesheet" href="/path/to/webtemp/my-bundle.css?v=1512829634">

Quick start (for Nette Framework)

For the Nette Framework it is very similar. First of all, register Web Loader extension.

extensions:
    webloader: WebLoader\Bridges\Nette\WebLoaderExtension

Next step is to add Web Loader section with my-bundle collection configuration inside.

webloader:
    filesCollections:
        my-bundle:
            cssFiles:
                - path/to/style-a.css
                - path/to/style-b.css

In your presenter, inject the engine...

/**
 * @var Engine
 */
private $webLoader;


public function __construct(\WebLoader\Engine $engine)
{
    $this->webLoader = $engine;
}

and set template parameters (for example in the beforeRender method).

public function beforeRender()
{
    $this->template->webloaderFilesCollectionRender = $this->webLoader->getFilesCollectionRender();
}

The last step is to call the render in a latte template.

{$webloaderFilesCollectionRender->css('my-bundle')|noescape}