Migration

# vérifiez si votre version n'est plus à jour et notez
# quelle est la dernière version.
composer outdated

# Mettez à jour votre bundle en conséquence
composer require pentatrion/vite-bundle:^7.0

# Important ! Mettez à jour votre package npm vite-plugin-symfony
# avec la même version majeure et mineure.
npm i vite-plugin-symfony@^7.0
# ou
yarn upgrade vite-plugin-symfony@^7.0

Si vous faites une mise à jour vers une nouvelle version majeure, vous aurez également quelques lignes de code à modifier.

v8.0 vers v8.1

Si vous utilisez symfony/ux-svelte il vous faudra migrer sous Svelte 5.x.

si vous désirez rester sur Svelte 3.x ou Svelte 4.x vous devrez effectuer ces 2 modifications de code

// ./assets/controllers.json
{
    "controllers": {
        "@symfony/ux-svelte": {
            "svelte": {
                "main": "stimulus/helpers/svelte4/render_controller"
            }
        },

    },
    "entrypoints": []
}

// ./assets/bootstrap.ts
import {
  registerSvelteControllerComponents,
  type SvelteModule,
} from "vite-plugin-symfony/stimulus/helpers/svelte4";

v7.x vers v8.x

Si vous n'utilisez pas Stimulus où que vos contrôleurs Stimulus se trouvent dans le dossier ./assets/controllers vous pouvez faire la mise à jour sans rien changer.

Si vos contrôleurs Stimulus se trouvent dans un autre dossier.

.
├── assets
│   ├── my-stimulus-controllers
│   │   └── welcome_controller.ts
│   ├── bootstrap.ts
│   └── controllers.json
├── src
└── vite.config.ts

vous devrez mettre à jour cette option dans vite-plugin-symfony en spécifiant le chemin relatif à la racine de votre projet (le root de votre config vite).

// vite.config.ts
import { defineConfig } from "vite";

import symfonyPlugin from "vite-plugin-symfony";

export default defineConfig({
  plugins: [
    symfonyPlugin({
      stimulus: {
        controllersDir: "./assets/my-stimulus-controllers", 
      },
    }),
  ],
});

v6.x vers v7.x

Nouvelle route

La version 7 ajoute une nouvelle route pour le profileur Symfony et vous rencontrerez probablement une erreur avec celle-ci (An error occurred while loading the web debug toolbar. Open the web profiler.) tant que vous n'aurez pas mis à jour votre recette.

Mettez à jour votre recette

composer recipes:update pentatrion/vite-bundle

Elle va remplacer votre fichier ./config/routes/dev/pentatrion_vite.yaml par celui-ci ./config/routes/pentatrion_vite.yaml qui utilise when@dev et ajoutera une nouvelle route.

Si vous souhaitez faire cette mise à jour manuellement

supprimez votre fichier config/routes/dev/pentatrion_vite.yaml et ajoutez celui-ci à la place. Si vous avez une configuration multiple voir plus bas

# config/routes/pentatrion_vite.yaml
when@dev:
    _pentatrion_vite:
        prefix: /build
        resource: "@PentatrionViteBundle/Resources/config/routing.yaml"

    _profiler_vite:
        path: /_profiler/vite
        defaults:
            _controller: Pentatrion\ViteBundle\Controller\ProfilerController::info

crossorigin

l'option crossorigin pour vite-bundle est à true par défaut (l'anciennement sa valeur par défaut était false). Normalement vous n'auriez pas à changer ce comportement vers false. Si vous rencontrez des problèmes avec cette option, n'hésitez pas à ouvrir une issue.

# config/packages/pentatrion_vite.yaml
pentatrion_vite:
  crossorigin: true

Stimulus

Si vous utilisez Stimulus, des changements seront à apporter sur votre fichier bootstrap.js avec l'apparition du suffixe ?stimulus et l'activation de l'option eager à true pour import.meta.glob.

import { registerControllers } from "vite-plugin-symfony/stimulus/helpers";

registerControllers( 
  app, 
  import.meta.glob('./controllers/*_(lazy)\?controller.[jt]s(x)\?') 
) 

registerControllers( 
  app, 
  import.meta.glob('./controllers/*_controller.js', { 
    query: "?stimulus", 
    eager: true, 
  }) 
) 

la configuration plus fine des contrôleurs (notamment le comportement lazy) se fera à travers les import.meta. voir Stimulus reference.

CDN

si vous utilisez un CDN pensez à bien remplir les options, base et build.outDir.

// vite.config.js
import { defineConfig } from "vite";

export default defineConfig(({ mode }) => {
  return {
    base:
      mode === "development"
        ? "/build/"
        : "http://cdn.custom-domain.com",

    publicDir: false,

    build: {
      outDir: "./public/build",
      rollupOptions: {
        input: {
          app: "./assets/app.js",
        },
      },
    },
  };
});

Si vous n'avez pas des configurations multiples c'est déja terminé...

Configurations multiples

Sinon vous aurez besoin de mettre à jour votre fichier config/routes/pentatrion_vite.yaml.

# config/routes/pentatrion_vite.yaml
when@dev:
    # retirer la route par défaut
    _pentatrion_vite: 
        prefix: /build // [!code --]
        resource: "@PentatrionViteBundle/Resources/config/routing.yaml"

    # et remettre votre routes personnalisées comme avant
    _pentatrion_vite_config1: 
        path: /build-1/{path} # comme l'option base de config1 //
        defaults: 
            _controller: Pentatrion\ViteBundle\Controller\ViteController::proxyBuild // [!code ++]
            configName: config1 // [!code ++]
        requirements: 
            path: ".+"

    _pentatrion_vite_config2: 
        path: /build-2/{path} # comme l'option base de config2 //
        defaults: 
            _controller: Pentatrion\ViteBundle\Controller\ViteController::proxyBuild // [!code ++]
            configName: config2 // [!code ++]
        requirements: 
            path: ".+"

    _profiler_vite:
        path: /_profiler/vite
        defaults:
            _controller: Pentatrion\ViteBundle\Controller\ProfilerController::info

v5.x vers v6.x

RenderAssetTagEvent

Si vous avez créé une classe qui écoutait l'événement Pentatrion\ViteBundle\Event\RenderAssetTagEvent. L'instance $event possède des méthodes différentes qui permettent un contrôle plus complet de la génération des balises html. Consultez le code source de RenderAssetTagEvent et Tag.

// src/EventSubscriber/ScriptNonceSubscriber.php
namespace App\EventSubscriber;

use Pentatrion\ViteBundle\Event\RenderAssetTagEvent;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;

class ScriptNonceSubscriber implements EventSubscriberInterface
{
    public function onRenderAssetTag(RenderAssetTagEvent $event)
    {
        $tag = $event->getTag();
        if ($tag->isInternal()) {
            return;
        }
        if ($tag->isScriptTag() && $event->isBuild()) {
            $tag->setAttribute('nonce', 'lookup nonce');
        }
        $tag->setAttribute('foo', 'bar-modified');
    }

    public static function getSubscribedEvents()
    {
        return [
            RenderAssetTagEvent::class => 'onRenderAssetTag',
        ];
    }
}

Injection de dépendances

Si vous injectiez des services associés au bundle dans vos propres services quelques ajustements seront nécessaires.

use Twig\Extension\AbstractExtension;
use Pentatrion\ViteBundle\Asset\EntrypointRenderer; 
use Pentatrion\ViteBundle\Asset\EntrypointsLookup; 
use Pentatrion\ViteBundle\Service\EntrypointRenderer; 
use Pentatrion\ViteBundle\Service\EntrypointsLookupCollection; 

class YourTwigExtension extends AbstractExtension
{
    public function __contruct(
        private EntrypointsLookup $entrypointsLookup, 
        private EntrypointsLookupCollection $entrypointsLookupCollection, 
        private EntrypointRenderer $entrypointRenderer
    ) {
        $entrypointsLookup = $entrypointsLookupCollection->getEntrypointsLookup(); 
        // ...
    }


}

Configurations multiples

L'utilisation du terme build était inadaptée pour parler des différentes configurations il a été remplacé par config.

Il vous faudra donc faire quelques remplacements dans votre configuration.

Dans le fichier pentatrion_vite.yaml, les options default_build et builds ont été remplacées par default_config et configs.

# config/packages/pentatrion_vite.yaml
pentatrion_vite:
    default_build: config1 // [!code --]
    default_config: config1 // [!code ++]

    builds: 
    configs: 
        config1:
            build_directory: build-1
            # ...

        config2:
            build_directory: build-2
            # ...

# config/services.yaml
services:
    pentatrion_vite.asset_strategy_build1: 
    pentatrion_vite.asset_strategy_config1: 
        parent: Pentatrion\ViteBundle\Asset\ViteAssetVersionStrategy
        calls:
            - [setBuildName, ['config1']] 
            - [setConfig, ['config1']] 

# config/routes/dev/pentatrion_vite.yaml
_pentatrion_vite_build1:
    path: /build-1/{path} #same as your build1 base
    defaults:
        _controller: Pentatrion\ViteBundle\Controller\ViteController::proxyBuild
        buildName: build1 // [!code --]
        configName: config1 // [!code ++]
    requirements:
        path: ".+"

# config/packages/framework.yaml
framework:
    assets:
        packages:
            build1:
                # same name as your service defined above
                version_strategy: 'pentatrion_vite.asset_strategy_build1'
                version_strategy: 'pentatrion_vite.asset_strategy_config1'

v4.x vers v5.x

Veuillez à mettre à jour votre Bundle pentatrion/vite-bundle à la version 5.x avec composer mais aussi votre paquet node vite-plugin-symfony vers une version 5.x.

Si vous utilisez la fonction Twig vite_mode, les 3 valeurs possibles sont désormais : "dev" | "build" | null.

C'est terminé !

Migration Vite-Bundle de la v0.2.x à la v1.x

Dans la version v0.2.x, vous devez spécifier vos points d'entrée dans un tableau dans votre fichier vite.config.js. dans v1.x, vous devez spécifier vos points d'entrée dans un objet.

-input: ["./assets/app.js"],
+input: {
+  app: "./assets/app.js"
+},

de cette façon, vous devez spécifier le point d'entrée nommé dans vos fonctions Twig.

-{{ vite_entry_script_tags('app.js') }}
+{{ vite_entry_script_tags('app') }}
-{{ vite_entry_link_tags('app.js') }}
+{{ vite_entry_link_tags('app') }}

Dans la v1.x, votre symfonyPlugin est une fonction et provient du paquet vite-plugin-symfony.

+ import symfonyPlugin from 'vite-plugin-symfony';

    // ...
    plugins: [
-       symfonyPlugin,
+       symfonyPlugin(),
    ],