ViteJS compatibility for Wordpress development as a theme

Inspired by https://github.com/blonestar/wp-theme-vite-tailwind and https://github.com/andrefelipe/vite-php-setup

Do the following commands:

npm install && composer install

Change the value of const themeName with your theme name, in file vite.config.mjs.

The list of entry files are defined in the vite.config.mjs file in the variable "entryFiles".

Require the vite.php file.

You can see there some use cases in the functions.php file on how to enqueue assets.

Run the following command:

npm run build

1. Change PHP constant "IS_VITE_DEVELOPMENT" to "true" in the theme functions.php file.
2. Compile assets listed in the variable "entryFiles" in the vite.config.mjs file.
3. Refresh pages on JS change OR inject scss directly in the page.

1. Create a build folder in the theme with the assets fully compiled and fonts, pictures (if called in the assets).
2. Change PHP constant "IS_VITE_DEVELOPMENT" to "false" in the theme functions.php file.

1. Prettify and lint all files listed in the package.json commands.