Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mindplay-dk/php-vite
a lightweight PHP-backend integration package for Vite
https://github.com/mindplay-dk/php-vite
php vite
Last synced: 6 days ago
JSON representation
a lightweight PHP-backend integration package for Vite
- Host: GitHub
- URL: https://github.com/mindplay-dk/php-vite
- Owner: mindplay-dk
- License: mpl-2.0
- Created: 2024-04-24T08:27:38.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2024-10-08T10:43:15.000Z (4 months ago)
- Last Synced: 2025-01-08T14:30:16.842Z (13 days ago)
- Topics: php, vite
- Language: PHP
- Homepage:
- Size: 29.3 KB
- Stars: 34
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - PHP-Vite - Integration for PHP, Composer package, no framework dependencies. (Integrations with Backends / PHP)
- awesome-vite - PHP-Vite - Integration for PHP, Composer package, no framework dependencies. (Integrations with Backends / PHP)
README
# PHP-Vite
[](https://packagist.org/packages/mindplay/php-vite)
[](https://github.com/mindplay-dk/php-vite/actions/workflows/ci.yml)
[](https://opensource.org/license/mpl-2-0)
This library provides a lightweight [backend integration](https://vitejs.dev/guide/backend-integration.html)
for your PHP-based MPA, SPA, or PWA based on [Vite](https://vitejs.dev/).
It parses the [build manifest](https://vitejs.dev/config/build-options#build-manifest) (the `.vite/manifest.json` file)
and produces the required `` and `<link>` tags to load (and preload) scripts, CSS files, and other assets.
## Basic Usage
A commented MPA example is available [here](https://github.com/mindplay-dk/php-vite-mpa) -
please refer to this for examples of configuring Vite, NPM, TypeScript, and Composer.
In the following steps, we'll cover usage of the library API only.
#### 1. Load the `manifest.json` file created by Vite:
```php
$vite = new Manifest(
manifest_path: $your_root_dir . '/public/dist/.vite/manifest.json',
base_path: '/dist/',
dev: false
);
```
The `manifest_path` points to the Vite `manifest.json` file created for the production build.
In this example, `dev` is `false`, so we'll be creating tags for the production assets.
The `base_path` is relative to your public web root - it is the root folder from which Vite's production assets are served, and/or the root folder from which Vite serves assets dynamically in development mode.
Note that, in development mode (when `dev` is set to `true`) the `manifest.json` file is unused, and not required.
> 💡 *For a detailed description of the constructor arguments, please refer to the `Manifest` constructor argument doc-blocks.*
#### 2. Create the `Tags` for an entry point script:
```php
$tags = $vite->createTags("index.ts");
```
Your entry point scripts are defined in Vite's [`build.rollupOptions`](https://vitejs.dev/config/build-options#build-rollupoptions) using RollUp's [`input`](https://rollupjs.org/configuration-options/#input) setting.
Note that, if you have **multiple entry point scripts** on **the same page**, you should pass them in a *single* call - for example:
```php
$tags = $vite->createTags("index.ts", "consent-banner.ts");
```
Making multiple calls for different entry points *may* result in duplicate tags for any shared static imports - you will most likely need just *one* instance of `Tags` on a single page.
#### 3. Emit from `Tags` in your HTML template:
Your `Tags` instance contains the preload and CSS tags, which should be emitted in
your `<head>` tag, as well as the `js` tags, which should be emitted immediately before
the `</body>` end tag.
For example:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vite App</title>
<link rel="icon" href="<?= $vite->getURL("php.svg") ?>" />
<?= $tags->preload ?>
<?= $tags->css ?>
</head>
<body>
<div id="app"></div>
<?= $tags->js ?>
</body>
</html>
```
## Preloading Assets
The service preloads any statically imported scripts and CSS files by default.
In addition, you can configure it to preload other statically imported assets as well -
for convenience, there are two methods to automatically configure preloading of all
common image and font asset types:
```php
$manifest->preloadImages();
$manifest->preloadFonts();
```
You can also configure it to preload any other asset types - for example, to configure
preloading of `.json` assets, you could add the following:
```php
$manifest->preload(
ext: "json",
mime_type: "application/json",
preload_as: "fetch"
);
```
Then create your tags as covered in the documentation above.
## Creating URLs
For advanced use cases, you can also directly get the URL for an asset published by Vite:
```php
$my_url = $manifest->getURL("consent-banner.ts");
```
You can use this feature to, for example:
* Create your own custom preload tags (e.g. with media queries)
* Conditionally load a script based on user interactions or user state, etc.