init

.gitignore

@@ -0,0 +1,8 @@
+/composer.lock
+/composer.phar
+/phpunit.xml
+/.phpunit.result.cache
+/phpunit.phar
+/config/Migrations/schema-dump-default.lock
+/vendor/
+/.idea/

README.md

@@ -0,0 +1,110 @@
+# ViteHelper plugin for CakePHP
+
+The plugin provides a Helper Class for CakePHP to facilitate the use of [Vite JS](https://vitejs.dev/).
+
+When running the Vite dev server, the Helper provides the right script tags for hot module replacement and page reloading.
+
+In production mode, the Helper loads the bundled files. `@vitejs/plugin-legacy` is supported, which will
+insert `nomodule`-tags for older browsers, e.g. older iOS devices, which do not support js modules.
+
+In your php-template, include this in your html head: \
+`<?= $this->Vite->getHeaderTags() ?>`
+
+Just before the closing `</body>` tag, insert this line: \
+`<?= $this->Vite->getBodyTags() ?>`
+
+## Installation
+
+You can install this plugin into your CakePHP application using [composer](https://getcomposer.org).
+
+The recommended way to install composer packages is:
+
+```
+composer require passchn/cakephp-vite
+```
+
+Load the plugin in your Application.php:
+
+```
+bin/cake plugin load ViteHelper
+```
+
+Load the Helper in your AppView.php:
+```
+$config = [
+    'my-option' => 'example',
+];
+
+$this->loadHelper('ViteHelper.Vite', $config);
+```
+
+### Configuration
+
+Available options:
+* forceProductionMode (bool): Defaults to `false`
+* devHostNeedle (string): defaults to `.test`
+* devPort (int): defaults to `3000`
+* jsSrcDirectory (string): defaults to `webroot_src`
+* mainTs (string): defaults to `main.js`
+* manifestDir (string): defaults to `manifest.json`
+
+## Vite JS bundler / Dev server
+
+Install Vite e.g. via yarn:
+````
+yarn add -D vite
+````
+
+It is recommended to add the legacy plugin:
+```
+yarn add -D @vitejs/plugin-legacy
+```
+
+### Configuration
+
+Vite comes with useful default configuration build in, however,
+in a php environment, some changes have to be made.
+
+The recommended configuration needs to be saved in the CakePHP
+root folder (not /webroot) as `vite.config.js` (or `.ts` if you are using TypeScript).
+
+```
+import { defineConfig } from 'vite';
+import legacy from '@vitejs/plugin-legacy';
+
+export default defineConfig({
+    plugins: [
+        legacy({
+            targets: ['defaults', 'not IE 11'],
+        }),
+    ],
+    build: {
+        emptyOutDir: false,
+        outDir: './webroot/',
+        assetsDir: 'build',
+        manifest: true,
+        rollupOptions: {
+            input: './webroot_src/main.js',
+        },
+    },
+    server: {
+        hmr: {
+            protocol: 'ws',
+            host: 'localhost',
+            port: 3000,
+        },
+    },
+});
+```
+
+A difference to other dev servers, e.g. webpack or gulp is that you won't access your
+local site via the port where Vite is serving. This does not work with php.
+
+Therefore, the `server.hmr` config will enable you to use hot module replacement via the websocket protocol.
+
+The `build` options define where the bundled js and css will end up.
+These need to match the `$config` array when loading the ViteHelper.
+
+More about configuring Vite can be found here:
+[vitejs.dev/config](https://vitejs.dev/config/)
+

composer.json

@@ -0,0 +1,15 @@
+{
+    "name": "passchn/cakephp-vite",
+    "description": "ViteJS plugin for CakePHP",
+    "type": "cakephp-plugin",
+    "license": "MIT",
+    "require": {
+        "php": ">=7.4",
+        "cakephp/cakephp": "^4.3"
+    },
+    "autoload": {
+        "psr-4": {
+            "ViteHelper\\": "src/"
+        }
+    }
+}

src/Plugin.php

@@ -0,0 +1,31 @@
+<?php
+declare(strict_types=1);
+
+namespace ViteHelper;
+
+use Cake\Core\BasePlugin;
+use Cake\Core\PluginApplicationInterface;
+use Cake\Http\MiddlewareQueue;
+use Cake\Routing\RouteBuilder;
+use Cake\Console\CommandCollection;
+
+/**
+ * Plugin for ViteHelper
+ */
+class Plugin extends BasePlugin
+{
+    /**
+     * Add commands for the plugin.
+     *
+     * @param \Cake\Console\CommandCollection $commands The command collection to update.
+     * @return \Cake\Console\CommandCollection
+     */
+    public function console(CommandCollection $commands) : CommandCollection
+    {
+        // Add your commands here
+
+        $commands = parent::console($commands);
+
+        return $commands;
+    }
+}