diff --git a/config/unicaen-vue.global.php.dist b/config/unicaen-vue.global.php.dist new file mode 100644 index 0000000000000000000000000000000000000000..544be366a9b9831759b9d79519995875c50333ef --- /dev/null +++ b/config/unicaen-vue.global.php.dist @@ -0,0 +1,12 @@ +<?php + +return [ + /* Configuration globale d'UnicaenVue */ + 'unicaen-vue' => [ + // Chemin relatif de publication des fichiers compilés (à partir de la racine du projet) + 'dist-path' => 'public/dist', + + // URL relative d'accès, par rapport au répertoire public + 'dist-url' => 'dist', + ], +]; \ No newline at end of file diff --git a/config/unicaen-vue.local.php.dist b/config/unicaen-vue.local.php.dist index b0e5c0ea06cfdb6c3adff26ae5b312a804fb9457..fd2f29df101f8226fd726685643bf882c3c8a857 100644 --- a/config/unicaen-vue.local.php.dist +++ b/config/unicaen-vue.local.php.dist @@ -2,9 +2,12 @@ return [ /* Configuration d'UnicaenVue */ - /* Fichier utile uniquement en mode DEV, pas en test ou en prod où Node.js ne sera pas installé */ + // utile uniquement en mode DEV, pas en test ni en prod où Node ne sera pas utilisé 'unicaen-vue' => [ + // URL d'accès au serveur Node pour le hot-loading (inutile en prod ou en test) 'host' => 'http://localhost:5133', + + // Activation du hot-loading ou non TRUE en mode développement, FALSE pour du test ou de la prod 'hot-loading' => true, ], ]; \ No newline at end of file diff --git a/doc/install.md b/doc/install.md index c98135090b8d039e62b792dae99a4af92ba65092..78ac73250074749dd599dc70e805c3bc6d8ab457 100644 --- a/doc/install.md +++ b/doc/install.md @@ -18,7 +18,25 @@ UnicaenVue est disponible via le Packagist, comme les autres bibliothèques Unic Lancez `composer update` -## 2. Node.js +## 2. Module Laminas + +UnicaenVue est un module Laminas. + +Il faut donc l'ajouter à la liste des modules de votre application. + +```php +$modules = [ + ... + 'UnicaenVue', + ... +]; +``` + +Il faut aussi dupliquer dans config/autoload et paramétrer les fichiers de configuration suivants : + - [unicaen-vue.local.php](../config/unicaen-vue.local.php.dist) + - [unicaen-vue.global.php](../config/unicaen-vue.global.php.dist) + +## 3. Node.js UnicaenVue est aussi un module Node. @@ -51,7 +69,7 @@ Voici un exemple complet de fichier package.json : Lancez `npx npm update` depuis le répertoire racine de votre application. -## 3. Vite +## 4. Vite Un fichier de configuration pour Vite est également à ajouter dans le répertoire racine du projet, dans le fichier `vite.config.js`. @@ -72,6 +90,7 @@ export default unicaenVue.defineConfig({ root: 'front', build: { // Répertoire où seront placés les fichiers issus du build et à ajouter au GIT + // à mettre en cohérence avec la config côté PHP (unicaen-vue/dist-path) outDir: path.resolve(__dirname, 'public/dist'), }, server: { @@ -87,7 +106,7 @@ export default unicaenVue.defineConfig({ Il n'est pas nécessaire de le modifier, à moins que vous ne souhaitiez ajouter des modules à Vite ou personnaliser votre configuration. -## 4. Répertoire front & fichier main.js +## 5. Répertoire front & fichier main.js Créez un nouveau répertoire `front` à la racine de votre projet. Ce répertorie contiendra tous vos composants Vue. @@ -102,7 +121,7 @@ import vueApp from 'unicaen-vue/js/Client/main' vueApp.init(vues); ``` -## 5. Lancement du front depuis le layout +## 6. Lancement du front depuis le layout Enfin, dernière étape, vous devez démarrer la partie "front". Pour cela, vous devrez ajouter Vite au layout de votre application, dans le HEAD : @@ -119,8 +138,15 @@ Pour cela, vous devrez ajouter Vite au layout de votre application, dans le HEAD ``` -lancer Vite +lancer Vite en mode dev pour bénéficier du hot-loading: + + - `npx vite dev` C'est prêt!!! Il ne reste plus qu'à créer votre premier composant. -Un premier tuto est disponible [ici](tuto1.md) \ No newline at end of file + +Un premier tuto est disponible [ici](tuto1.md) + +Une fois vos développements terminés, compilez et commitez le tout : + +- `npx vite build` pour compiler \ No newline at end of file diff --git a/src/View/Helper/ViteViewHelper.php b/src/View/Helper/ViteViewHelper.php index 80087765aa853f9f181b75861f1b818fdc86e17d..5844bf1aaa477bdff2f5a94eac32a3cd810b631b 100755 --- a/src/View/Helper/ViteViewHelper.php +++ b/src/View/Helper/ViteViewHelper.php @@ -13,8 +13,10 @@ use Laminas\View\Helper\AbstractHtmlElement; class ViteViewHelper extends AbstractHtmlElement { private $config = [ - 'host' => 'http://localhost:5133', + 'host' => 'http://localhost:5133', 'hot-loading' => true, + 'dist-path' => 'public/dist', + 'dist-url' => 'dist', ]; @@ -73,9 +75,9 @@ class ViteViewHelper extends AbstractHtmlElement public function getConfig(string $param) { - if (array_key_exists($param, $this->config)){ + if (array_key_exists($param, $this->config)) { return $this->config[$param]; - }else{ + } else { return null; } } @@ -103,10 +105,10 @@ class ViteViewHelper extends AbstractHtmlElement public function vite(string $entry): string { - $h = "\n" . $this->jsTag($entry) + $h = "\n" . $this->jsTag($entry) . "\n" . $this->jsPreloadImports($entry) . "\n" . $this->cssTag($entry); - $h .= '<script> window.__unicaenVueBaseUrl = '.json_encode($this->getView()->url('home')).'; </script>'; + $h .= '<script> window.__unicaenVueBaseUrl = ' . json_encode($this->getView()->url('home')) . '; </script>'; return $h; } @@ -173,7 +175,7 @@ class ViteViewHelper extends AbstractHtmlElement protected function getManifest(): array { - $content = file_get_contents(getcwd() . '/public/dist/manifest.json'); + $content = file_get_contents(getcwd() . '/' . $this->config['dist-path'] . '/manifest.json'); return json_decode($content, true); } @@ -185,7 +187,7 @@ class ViteViewHelper extends AbstractHtmlElement $manifest = $this->getManifest(); return isset($manifest[$entry]) - ? $this->getView()->basePath('/dist/' . $manifest[$entry]['file']) + ? $this->getView()->basePath('/' . $this->config['dist-url'] . '/' . $manifest[$entry]['file']) : ''; } @@ -193,12 +195,12 @@ class ViteViewHelper extends AbstractHtmlElement protected function importsUrls(string $entry): array { - $urls = []; + $urls = []; $manifest = $this->getManifest(); if (!empty($manifest[$entry]['imports'])) { foreach ($manifest[$entry]['imports'] as $imports) { - $urls[] = $this->getView()->basePath('/dist/' . $manifest[$imports]['file']); + $urls[] = $this->getView()->basePath('/' . $this->config['dist-url'] . '/' . $manifest[$imports]['file']); } } @@ -209,12 +211,12 @@ class ViteViewHelper extends AbstractHtmlElement protected function cssUrls(string $entry): array { - $urls = []; + $urls = []; $manifest = $this->getManifest(); if (!empty($manifest[$entry]['css'])) { foreach ($manifest[$entry]['css'] as $file) { - $urls[] = $this->getView()->basePath('/dist/' . $file); + $urls[] = $this->getView()->basePath('/' . $this->config['dist-url'] . '/' . $file); } } diff --git a/src/View/Helper/ViteViewHelperFactory.php b/src/View/Helper/ViteViewHelperFactory.php index 01b001e7f9806e41578f13eb177c3483b2406856..655fc4bfab474fca260f2c0131c07ca94f5f6382 100644 --- a/src/View/Helper/ViteViewHelperFactory.php +++ b/src/View/Helper/ViteViewHelperFactory.php @@ -27,6 +27,8 @@ class ViteViewHelperFactory $viteConfig = $config['unicaen-vue'] ?? []; $viteConfig['host'] = $viteConfig['host'] ?? 'http://localhost:5133'; $viteConfig['hot-loading'] = $viteConfig['hot-loading'] ?? false; + $viteConfig['dist-path'] = $viteConfig['dist-path'] ?? 'public/dist'; + $viteConfig['dist-url'] = $viteConfig['dist-url'] ?? 'dist'; $viewHelper = new ViteViewHelper($viteConfig);