Zest

Vite front end dev environment integration

Zest provides a simplified and opinionated PHP oriented entry point to the Vite development environment.

---

Installation

This package requires PHP 8.4 or higher.

Install via Composer:

composer require decodelabs/zest

Usage

Zest aims to provide a simple automated way to integrate the Vite dev server into your PHP application.

All terminal commands assume you have Effigy installed and working.

cd my-project
effigy zest init

This command will initialise a Vite config file, install everything you initially need in a package.json file and run the dev server. ctrl+c to quit the server.

From then on:

# Run the dev server
effigy zest dev

# Or build the static files
effigy zest build

Build will trigger automatically when the dev server is closed.

Existing projects

If installing in an existing vite project, make sure to install the Zest plugin:

npm install -D @decodelabs/vite-plugin-zest

Then add it to your Vite config:

import zest from '@decodelabs/vite-plugin-zest'
import { defineConfig } from 'vite'

export default defineConfig({
    plugins: [
        zest({
            buildOnExit: true
        })
    ],
})

View consumption

To make use of Zest, you will need to consume the generated assets from the manifest in your views. As it stands, there are no pre-built view adapters (there are many different view libraries out there!!), however you can adapt the one you use like this:

use DecodeLabs\Monarch;
use DecodeLabs\Zest\Manifest;

class ViewPlugin {

    public function apply(View $view): void {
        $manifest = Manifest::load(
            Monarch::getPaths()->root . '/my-theme/manifest.json'
        );

        foreach ($manifest->getCssData() as $file => $attr) {
            /**
             * @var string $file - path to file
             * @var array $attr - array of tag attributes
             */
            $view->addCss($file, $attr);
        }

        foreach ($manifest->getHeadJsData() as $file => $attr) {
            $view->addHeadJs($file, $attr);
        }

        foreach ($manifest->getBodyJsData() as $file => $attr) {
            $view->addFootJs($file, $attr);
        }

        if ($manifest->isHot()) {
            $view->addBodyClass('zest-dev preload');
        }
    }
}

Licensing

Zest is licensed under the MIT License. See LICENSE for the full license text.