Download the PHP package mrottow/vite-wordpress without Composer
On this page you can find all versions of the php package mrottow/vite-wordpress. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download mrottow/vite-wordpress
More information about mrottow/vite-wordpress
Files in mrottow/vite-wordpress
Package vite-wordpress
Short Description A collection of back-end utilities for ViteWordpress.
License MIT
Informations about the package vite-wordpress
Vite PHP utilities for WordPress
Backend Utilities for vite-wordpress to integrate Vite's development server and HMR into WordPress, as well as manage the manifest file.
Features
- Manifest Resolver: Parse and manage Vite's manifest file for registering assets in WordPress for production.
- Dev Server & HMR Integration: Integrates Vite's HMR (Hot Module Replacement) and dev server into WordPress during development.
- Supports frontend block development
- Supports Elementor editor development
- Automatic Script Injection: Automatically injects Vite client scripts into WordPress during development.
- Automatic Source Files Injection:
- Automatically changes src urls from enqueued scripts/styles to source files for HMR during development.
- Automatically changes render template paths from dynamic blocks in block.json to source files for HMR during development.
Requirements
- PHP 7.4 or higher
- WordPress 6.0 or higher
- A valid ViteJS configuration using vite-wordpress
Installation
-
Add the library to your project:
- Include the autoloader in your WordPress theme or plugin:
Usage
Dev Server
The DevServer
class integrates the Vite development server with WordPress for HMR.
Example (uses default settings):
With custom settings:
When using the vite-wordpress ViteJS plugin, if files have been built using vite build
, are enqueued and the development server is running via the vite
command:
- DevServer automatically detects all enqueued scripts & templates from the project through hooks &
vite-wordpress
server configurations. - It resolves scripts to source files served by the development server.
- It resolves templates to source files from the
srcDir
folder. - It updates script tags from the project to use as modules and injects Vite's client to enable HMR (Hot Module Replacement).
- Using Vite's client and module support, it can also include CSS source files that are imported into JavaScript files.
It works for both JS and CSS entries.
It's compatible with a traditional setup with vite-wordpress without the need for a manifest or hashed files.
However, when using a manifest, the Manifest Resolver will assist in resolving the files through the manifest offering better precision for a more complex assets folder & file structure.
Manifest Resolver
The ManifestResolver
class handles reading and accessing the Vite manifest file and additionally integrates into the dev server.
You can use the ManifestResolver
instance, which needs to be wrapped in a function or helper class to work within hooks. Alternatively, you can use the Manifest
facade, which handles this for you.
Example using the facade:
Example using the instance:
The manifest resolver is built off an interface so you're able to create your own implementation to include into the dev server.
Configuration
ManifestResolver
Method | Default | Description |
---|---|---|
set_manifest($path) |
` | Sets the path to the manifest.jsonor manifest.php` file. |
|
set_src($dir) |
'src' |
(optional) Sets the source directory for the assets. |
DevServer
Method | Default | Description |
---|---|---|
set_server_host($host) |
get_site_url() |
(optional) Sets the Vite dev server host. |
set_server_port($port) |
5173 |
(optional) Sets the Vite dev server port. |
set_client_hook($priority) |
5 |
(optional) Sets the priority for the Vite client hook. |
Example
An example within a WordPress plugin can be found here: https://github.com/mrOttoW/vite-wordpress-plugin-block-example