ux svelte implementation

docs/src/fr/guide/stimulus-symfony-ux.md

@@ -76,6 +76,9 @@ const app = startStimulusApp(
 <h1 {{ stimulus_controller('hello') }}></h1>
 ```
 
+## Exemples
+
+Le dépôt de développement [lhapaipai/symfony-vite-dev](https://github.com/lhapaipai/symfony-vite-dev) contient un dossier `playground/stimulus` regroupant une implémentation complète de Stimulus avec Symfony UX.
 
 ## Explications
 
@@ -160,7 +163,7 @@ Chargez plutôt ces contrôleurs avec le fichier `controllers.json`
 
 ## Symfony UX
 
-| UX packages                    | Compatibilité |
+| UX packages                    | Compatibility |
 |--------------------------------|---------------|
 | ux-autocomplete                | ✅            |
 | ux-chartjs                     | ✅            |
@@ -169,15 +172,15 @@ Chargez plutôt ces contrôleurs avec le fichier `controllers.json`
 | ux-lazy                        | ✅            |
 | ux-live-component              | Not Tested    |
 | ux-notify                      | Not Tested    |
-| ux-react                       | Wip           |
-| ux-svelte                      | Wip           |
+| ux-react                       | ✅ (*) hmr : js->(ok) css->(fail) |
+| ux-svelte                      | ✅ (*) hmr : js->(refresh page but state lost) css->(ok)           |
 | ux-swup                        | ✅            |
 | ux-toggle                      | ✅            |
 | ux-translator                  | ✅            |
-| ux-turbo (not tested)          | NOT Tested    |
+| ux-turbo (not tested)          | Not Tested    |
 | ux-twig                        | ✅            |
 | ux-typed                       | ✅            |
-| ux-vue                         | ✅ (*)        |
+| ux-vue                         | ✅ (*) hmr : js->(ok) css->(ok) |
 
 (*) demande quelques modifications de code
 
@@ -196,3 +199,168 @@ registerVueControllerComponents(require.context('./vue/controllers', true, /\.vu
 registerVueControllerComponents(import.meta.glob('./vue/controllers/**/*.vue')) // [!code ++]
 
 const app = startStimulusApp(import.meta.glob('./controllers/*_(lazy)\?controller.[jt]s(x)\?'));
+```
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite'
+
+import symfonyPlugin from 'vite-plugin-symfony';
+import vuePlugin from "@vitejs/plugin-vue";
+
+export default defineConfig({
+  plugins: [
+    vuePlugin(), // [!code ++]
+    symfonyPlugin({
+      stimulus: true
+    }),
+  ],
+  build: {
+    rollupOptions: {
+      input: {
+        "app": "./assets/app.js",
+      }
+    },
+  },
+});
+```
+
+
+### symfony/ux-react
+
+Après avoir installé la recette Flex depuis `symfony/ux-react`, vous devrez corriger ces lignes.
+
+```js
+// assets/bootstrap.js
+import { startStimulusApp } from "vite-plugin-symfony/stimulus/helpers"
+
+import { registerReactControllerComponents } from '@symfony/ux-react'; // [!code --]
+import { registerReactControllerComponents } from "vite-plugin-symfony/stimulus/helpers" // [!code ++]
+
+registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/)); // [!code --]
+registerReactControllerComponents(import.meta.glob('./react/controllers/**/*.[jt]s(x)\?')); // [!code ++]
+
+
+const app = startStimulusApp(import.meta.glob('./controllers/*_(lazy)\?controller.[jt]s(x)\?'));
+```
+
+Étant donné que le composant React est déjà importé paresseusement, vous devez définir fetch `eager` (sinon votre composant deviendra **vraiment trop paresseux**).
+
+```json
+{
+    "controllers": {
+        "@symfony/ux-react": { // [!code --]
+        "vite-plugin-symfony": { // [!code ++]
+            "react": {
+                "enabled": true,
+                "fetch": "lazy" // [!code --]
+                "fetch": "eager" // [!code ++]
+            }
+        },
+
+    },
+    "entrypoints": []
+}
+```
+```js
+// vite.config.js
+import { defineConfig } from 'vite'
+
+import symfonyPlugin from 'vite-plugin-symfony';
+import reactPlugin from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [
+    reactPlugin(), // [!code ++]
+    symfonyPlugin({
+      stimulus: true
+    }),
+  ],
+  build: {
+    rollupOptions: {
+      input: {
+        "app": "./assets/app.js",
+      }
+    },
+  },
+});
+```
+```twig
+{{ vite_entry_link_tags('app') }}
+{{ vite_entry_script_tags('app', {
+    dependency: 'react' // [!code ++]
+  }) }}
+```
+
+### symfony/ux-svelte
+
+Après avoir installé la recette Flex depuis `symfony/ux-svelte`, vous devrez corriger ces lignes.
+
+
+```js
+// assets/bootstrap.js
+import { startStimulusApp } from "vite-plugin-symfony/stimulus/helpers"
+
+import { registerSvelteControllerComponents } from '@symfony/ux-svelte'; // [!code --]
+import { registerSvelteControllerComponents } from "vite-plugin-symfony/stimulus/helpers" // [!code ++]
+
+registerSvelteControllerComponents(require.context('./svelte/controllers', true, /\.svelte$/)); // [!code --]
+registerSvelteControllerComponents(import.meta.glob('./svelte/controllers/**/*.svelte')); // [!code ++]
+
+
+const app = startStimulusApp(import.meta.glob('./controllers/*_(lazy)\?controller.[jt]s(x)\?'));
+```
+
+Étant donné que le composant Svelte est déjà importé paresseusement, vous devez définir fetch `eager` (sinon votre composant deviendra **vraiment trop paresseux**).
+
+```json
+{
+    "controllers": {
+        "@symfony/ux-svelte": { // [!code --]
+        "vite-plugin-symfony": { // [!code ++]
+            "svelte": {
+                "enabled": true,
+                "fetch": "lazy" // [!code --]
+                "fetch": "eager" // [!code ++]
+            }
+        },
+
+    },
+    "entrypoints": []
+}
+```
+
+```js
+// 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(), // [!code ++]
+    symfonyPlugin({
+      stimulus: true
+    }),
+  ],
+  build: {
+    rollupOptions: {
+      input: {
+        "app": "./assets/app.js",
+      }
+    },
+  },
+});
+```
+
+```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(),
+}
+```

docs/src/guide/stimulus-symfony-ux.md

@@ -75,6 +75,9 @@ const app = startStimulusApp(
 <h1 {{ stimulus_controller('hello') }}></h1>
 ```
 
+## Examples
+
+The development repository [lhapaipai/symfony-vite-dev](https://github.com/lhapaipai/symfony-vite-dev) contains a `playground/stimulus` directory containing a complete implementation of Stimulus with Symfony UX.
 
 ## Explanations
 
@@ -170,15 +173,15 @@ Instead, load these controllers with the `controllers.json` file .
 | ux-lazy                        | ✅            |
 | ux-live-component              | Not Tested    |
 | ux-notify                      | Not Tested    |
-| ux-react                       | Wip           |
-| ux-svelte                      | Wip           |
+| ux-react                       | ✅ (*) hmr : js->(ok) css->(fail) |
+| ux-svelte                      | ✅ (*) hmr : js->(refresh page but state lost) css->(ok)           |
 | ux-swup                        | ✅            |
 | ux-toggle                      | ✅            |
 | ux-translator                  | ✅            |
 | ux-turbo (not tested)          | Not Tested    |
 | ux-twig                        | ✅            |
 | ux-typed                       | ✅            |
-| ux-vue                         | ✅ (*)        |
+| ux-vue                         | ✅ (*) hmr : js->(ok) css->(ok) |
 
 (*) requires some code changes
 
@@ -199,6 +202,30 @@ registerVueControllerComponents(import.meta.glob('./vue/controllers/**/*.vue'))
 const app = startStimulusApp(import.meta.glob('./controllers/*_(lazy)\?controller.[jt]s(x)\?'));
 ```
 
+```js
+// vite.config.js
+import { defineConfig } from 'vite'
+
+import symfonyPlugin from 'vite-plugin-symfony';
+import vuePlugin from "@vitejs/plugin-vue";
+
+export default defineConfig({
+  plugins: [
+    vuePlugin(), // [!code ++]
+    symfonyPlugin({
+      stimulus: true
+    }),
+  ],
+  build: {
+    rollupOptions: {
+      input: {
+        "app": "./assets/app.js",
+      }
+    },
+  },
+});
+```
+
 ### symfony/ux-react
 
 After installing the Flex recipe from `symfony/ux-react` you will need to correct these lines.
@@ -234,3 +261,103 @@ Because React component is already imported lazily, you need to set fetch `eager
     "entrypoints": []
 }
 ```
+```js
+// vite.config.js
+import { defineConfig } from 'vite'
+
+import symfonyPlugin from 'vite-plugin-symfony';
+import reactPlugin from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [
+    reactPlugin(), // [!code ++]
+    symfonyPlugin({
+      stimulus: true
+    }),
+  ],
+  build: {
+    rollupOptions: {
+      input: {
+        "app": "./assets/app.js",
+      }
+    },
+  },
+});
+```
+```twig
+{{ vite_entry_link_tags('app') }}
+{{ vite_entry_script_tags('app', {
+    dependency: 'react' // [!code ++]
+  }) }}
+```
+
+### symfony/ux-svelte
+
+After installing the Flex recipe from `symfony/ux-svelte` you will need to correct these lines.
+
+```js
+// assets/bootstrap.js
+import { startStimulusApp } from "vite-plugin-symfony/stimulus/helpers"
+
+import { registerSvelteControllerComponents } from '@symfony/ux-svelte'; // [!code --]
+import { registerSvelteControllerComponents } from "vite-plugin-symfony/stimulus/helpers" // [!code ++]
+
+registerSvelteControllerComponents(require.context('./svelte/controllers', true, /\.svelte$/)); // [!code --]
+registerSvelteControllerComponents(import.meta.glob('./svelte/controllers/**/*.svelte')); // [!code ++]
+
+
+const app = startStimulusApp(import.meta.glob('./controllers/*_(lazy)\?controller.[jt]s(x)\?'));
+```
+
+Because Svelte component is already imported lazily, you need to set fetch `eager` (otherwise your component will become **really too lazy**).
+```json
+{
+    "controllers": {
+        "@symfony/ux-svelte": { // [!code --]
+        "vite-plugin-symfony": { // [!code ++]
+            "svelte": {
+                "enabled": true,
+                "fetch": "lazy" // [!code --]
+                "fetch": "eager" // [!code ++]
+            }
+        },
+
+    },
+    "entrypoints": []
+}
+```
+
+```js
+// 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(), // [!code ++]
+    symfonyPlugin({
+      stimulus: true
+    }),
+  ],
+  build: {
+    rollupOptions: {
+      input: {
+        "app": "./assets/app.js",
+      }
+    },
+  },
+});
+```
+
+```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(),
+}
+```

playground/stimulus/assets/bootstrap.js

@@ -1,9 +1,13 @@
-import { startStimulusApp, registerVueControllerComponents, registerReactControllerComponents} from "vite-plugin-symfony/stimulus/helpers"
+import {
+  startStimulusApp,
+  registerVueControllerComponents,
+  registerReactControllerComponents,
+  registerSvelteControllerComponents
+} from "vite-plugin-symfony/stimulus/helpers"
 
-// registerVueControllerComponents(import.meta.glob('./vue/controllers/**/*.vue'))
-const context = import.meta.glob('./react/controllers/**/*.[jt]s(x)\?');
-console.log('context', context)
-registerReactControllerComponents(context);
+registerVueControllerComponents(import.meta.glob('./vue/controllers/**/*.vue'))
+registerReactControllerComponents(import.meta.glob('./react/controllers/**/*.[jt]s(x)\?'));
+registerSvelteControllerComponents(import.meta.glob('./svelte/controllers/**/*.svelte'));
 const app = startStimulusApp(import.meta.glob('./controllers/*_(lazy)\?controller.[jt]s(x)\?'));