Symfony UX

Vous pouvez utiliser les composants de Symfony UX dans votre application. Les composants symfony/ux-react, symfony/ux-vue et symfony/ux-svelte nécessitent toutefois quelques ajustements. Voir leur sections dédiées.

UX packages	Compatibility	UX packages	Compatibility
ux-autocomplete	✅	ux-svelte	✅ (*)
ux-chartjs	✅	ux-swup	✅
ux-cropperjs	✅	ux-toggle	✅
ux-dropzone	✅	ux-translator	✅
ux-lazy	✅	ux-turbo	Pas encore testé (**)
ux-live-component	✅	ux-twig	✅
ux-notify	✅	ux-typed	✅
ux-react	✅ (*)	ux-vue	✅ (*)

(*) demande quelques modifications au niveau des imports (voir ci-dessous) (**) en théorie il n'y a aucune raison que ce ne soit pas compatible, vos retours sont les bienvenus.

Prérequis

composer require symfony/stimulus-bundle

# désinstallez le package @symfony/stimulus-bridge
# uniquement compatible webpack
npm rm @symfony/stimulus-bridge

symfony/ux-vue

Installation

composer require symfony/ux-vue
npm i --force

Après l'installation de la recette Flex de symfony/ux-vue vous aurez besoin de corriger ces lignes.

assets/bootstrap.js

import { registerVueControllerComponents } from '@symfony/ux-vue'; 
registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue$/)); 

import { startStimulusApp, registerControllers } from "vite-plugin-symfony/stimulus/helpers"
import { registerVueControllerComponents } from "vite-plugin-symfony/stimulus/helpers/vue"

// register Vue components before startStimulusApp
registerVueControllerComponents(import.meta.glob('./vue/controllers/**/*.vue')) 

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

assets/bootstrap.ts

import { registerVueControllerComponents } from '@symfony/ux-vue'; 
registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue$/)); 

import { startStimulusApp, registerControllers } from "vite-plugin-symfony/stimulus/helpers"
import { registerVueControllerComponents, type VueModule } from "vite-plugin-symfony/stimulus/helpers/vue"

// register Vue components before startStimulusApp
registerVueControllerComponents(import.meta.glob<VueModule>("./vue/controllers/**/*.vue")); 

const app = startStimulusApp();
registerControllers(
  app,
  import.meta.glob<StimulusControllerInfosImport>(
    "./controllers/*_controller.ts",
    {
      query: "?stimulus",
      eager: true,
    },
  ),
);

// vite.config.js
import { defineConfig } from 'vite'

import symfonyPlugin from 'vite-plugin-symfony';
import vuePlugin from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vuePlugin(), 
    symfonyPlugin({
      stimulus: true
    }),
  ],
  build: {
    rollupOptions: {
      input: {
        "app": "./assets/app.js",
      }
    },
  },
});

{# your-template.html.twig #}
<div {{ vue_component('Hello', { 'name': 'Vite & Stimulus' }) }}></div>

<!-- assets/vue/controllers/Hello.vue -->
<template>
    <div>Hello {{ name }}!</div>
</template>

<script setup>
    defineProps({
        name: String
    });
</script>

Documentation : Symfony doc, Symfony UX.

symfony/ux-react

Installation

composer require symfony/ux-react
npm i --force

Après avoir installé la recette Flex depuis symfony/ux-react, vous devrez corriger ces lignes.

assets/bootstrap.js

import { registerReactControllerComponents } from '@symfony/ux-react'; 
registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/)); 

import { startStimulusApp, registerControllers } from "vite-plugin-symfony/stimulus/helpers"
import { registerReactControllerComponents } from "vite-plugin-symfony/stimulus/helpers/react"

registerReactControllerComponents(import.meta.glob('./react/controllers/**/*.[jt]s(x)\?')); 

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

assets/bootstrap.ts

import { registerReactControllerComponents } from '@symfony/ux-react'; 
registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/)); 

import { startStimulusApp, registerControllers } from "vite-plugin-symfony/stimulus/helpers"
import { registerReactControllerComponents, type ReactModule } from "vite-plugin-symfony/stimulus/helpers/react"

// enregistrez vos composants React avant startStimulusApp
registerReactControllerComponents( 
  import.meta.glob<ReactModule>("./react/controllers/**/*.[jt]s(x)?"), 
); 

const app = startStimulusApp();
registerControllers(
  app,
  import.meta.glob<StimulusControllerInfosImport>(
    "./controllers/*_controller.ts",
    {
      query: "?stimulus",
      eager: true,
    },
  ),
);

Parce que registerReactControllerComponents a été invoqué avec import.meta.glob en mode lazy, vous devez définir dans votre controllers.json fetch eager (sinon vous aurez des imbrications de promesses).

{
    "controllers": {
        "@symfony/ux-react": {
            "react": {
                "enabled": true,
                "fetch": "eager"
            }
        },

    },
    "entrypoints": []
}

// vite.config.js
import { defineConfig } from 'vite'

import symfonyPlugin from 'vite-plugin-symfony';
import reactPlugin from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    reactPlugin(), 
    symfonyPlugin({
      stimulus: true
    }),
  ],
  build: {
    rollupOptions: {
      input: {
        "app": "./assets/app.js",
      }
    },
  },
});

{# base.html.twig #}
{{ vite_entry_link_tags('app') }}
{{ vite_entry_script_tags('app', {
    dependency: 'react'
  }) }}

{# your-template.html.twig #}
<div {{ react_component('Hello', { 'fullName': 'Vite & Stimulus' }) }}></div>

// assets/react/controllers/Hello.jsx
import React from 'react';

export default function (props) {
    return <div>Hello {props.fullName}</div>;
}

Documentation : Symfony doc, Symfony UX React.

symfony/ux-svelte

Installation

composer require symfony/ux-svelte
npm i --force

Après avoir installé la recette Flex depuis symfony/ux-svelte, vous devrez corriger ces lignes.

assets/bootstrap.js

import { registerSvelteControllerComponents } from '@symfony/ux-svelte'; 
registerSvelteControllerComponents(require.context('./svelte/controllers', true, /\.svelte$/)); 

import { startStimulusApp, registerControllers } from "vite-plugin-symfony/stimulus/helpers"
import { registerSvelteControllerComponents } from "vite-plugin-symfony/stimulus/helpers/svelte"
registerSvelteControllerComponents(import.meta.glob('./svelte/controllers/**/*.svelte')); 

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

assets/bootstrap.ts

import { registerSvelteControllerComponents } from '@symfony/ux-svelte'; 
registerSvelteControllerComponents(require.context('./svelte/controllers', true, /\.svelte$/)); 

import { startStimulusApp, registerControllers } from "vite-plugin-symfony/stimulus/helpers"
import { registerSvelteControllerComponents, type SvelteModule } from "vite-plugin-symfony/stimulus/helpers/svelte"

registerSvelteControllerComponents( 
  import.meta.glob<SvelteModule>("./svelte/controllers/**/*.svelte"), 
); 

const app = startStimulusApp();
registerControllers(
  app,
  import.meta.glob<StimulusControllerInfosImport>(
    "./controllers/*_controller.ts",
    {
      query: "?stimulus",
      eager: true,
    },
  ),
);

Parce que registerSvelteControllerComponents a été invoqué avec import.meta.glob en mode lazy, vous devez définir dans votre controllers.json fetch eager (sinon vous aurez des imbrications de promesses).

{
    "controllers": {
        "@symfony/ux-svelte": {
            "svelte": {
                "enabled": true,
                "fetch": "eager"
            }
        },

    },
    "entrypoints": []
}

// vite.config.js
import { defineConfig } from 'vite'

import symfonyPlugin from 'vite-plugin-symfony';
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [
    svelte(), 
    symfonyPlugin({
      stimulus: true
    }),
  ],
  build: {
    rollupOptions: {
      input: {
        "app": "./assets/app.js",
      }
    },
  },
});

// svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

export default {
  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
  // for more information about preprocessors
  preprocess: vitePreprocess(),
}

{# your-template.html.twig #}
<div {{ svelte_component('Hello', { 'name': 'Vite & Stimulus' }) }}></div>

<!-- assets/svelte/controllers/Hello.svelte -->
<script>
    export let name = "Svelte";
</script>

<div>Hello {name}</div>

Documentation : Symfony doc, Symfony UX Svelte.