[UX Vue] Add lines for components lazy-loading

[Kocal]

Q	A
License	MIT
Doc issue/PR	symfony/symfony-docs#...

Hi, this PR follows symfony/ux#1177 (comment).

The added lines were removed from the documentation, but I really think we should still document the lazy-loading behavior of Vue controller components (thanks to 'lazy' parameter).

cc @weaverryan

[github-actions]

Thanks for the PR 😍

How to test these changes in your application

1. Define the SYMFONY_ENDPOINT environment variable:

   # On Unix-like (BSD, Linux and macOS)
   export SYMFONY_ENDPOINT=https://raw.githubusercontent.com/symfony/recipes/flex/pull-1246/index.json
   # On Windows
   SET SYMFONY_ENDPOINT=https://raw.githubusercontent.com/symfony/recipes/flex/pull-1246/index.json

2. Install the package(s) related to this recipe:

   composer req 'symfony/flex:^1.16'
   composer req 'symfony/ux-vue:^2.9'

3. Don't forget to unset the SYMFONY_ENDPOINT environment variable when done:

   # On Unix-like (BSD, Linux and macOS)
   unset SYMFONY_ENDPOINT
   # On Windows
   SET SYMFONY_ENDPOINT=

Diff between recipe versions

In order to help with the review stage, I'm in charge of computing the diff between the various versions of patched recipes.
I'm going keep this comment up to date with any updates of the attached patch.

symfony/ux-vue

2.8 vs 2.9

diff --git a/symfony/ux-vue/2.9/assets/vue/controllers/Hello.vue b/symfony/ux-vue/2.9/assets/vue/controllers/Hello.vue
new file mode 100644
index 0000000..2812aa4
--- /dev/null
+++ b/symfony/ux-vue/2.9/assets/vue/controllers/Hello.vue
@@ -0,0 +1,9 @@
+<template>
+    <div>Hello {{ name }}!</div>
+</template>
+
+<script setup>
+    defineProps({
+        name: String
+    });
+</script>
diff --git a/symfony/ux-vue/2.8/manifest.json b/symfony/ux-vue/2.9/manifest.json
index 9010c6f..fbbef85 100644
--- a/symfony/ux-vue/2.8/manifest.json
+++ b/symfony/ux-vue/2.9/manifest.json
@@ -1,5 +1,61 @@
 {
     "bundles": {
         "Symfony\\UX\\Vue\\VueBundle": ["all"]
-    }
+    },
+    "copy-from-recipe": {
+        "assets/": "assets/"
+    },
+    "conflict": {
+        "symfony/webpack-encore-bundle": "<2.0",
+        "symfony/flex": "<1.20.0 || >=2.0.0,<2.3.0"
+    },
+    "add-lines": [
+        {
+            "file": "webpack.config.js",
+            "content": "\n    .enableVueLoader()",
+            "position": "after_target",
+            "target": ".splitEntryChunks()"
+        },
+        {
+            "file": "assets/app.js",
+            "content": "import { registerVueControllerComponents } from '@symfony/ux-vue';",
+            "position": "top",
+            "warn_if_missing": true
+        },
+        {
+            "file": "assets/app.js",
+            "content": "registerVueControllerComponents(require.context('./vue/controllers', true, /\\.vue$/));",
+            "position": "bottom",
+            "warn_if_missing": true,
+            "requires": "symfony/webpack-encore-bundle"
+        },
+        {
+            "file": "assets/app.js",
+            "content": "// If you prefer to lazy-load your Vue.js controller components, in order to reduce the JavaScript bundle the smallest as possible",
+            "position": "bottom",
+            "warn_if_missing": true,
+            "requires": "symfony/webpack-encore-bundle"
+        },
+        {
+            "file": "assets/app.js",
+            "content": "// and degrade performances as little as possible, you can use the following line instead:",
+            "position": "bottom",
+            "warn_if_missing": true,
+            "requires": "symfony/webpack-encore-bundle"
+        },
+        {
+            "file": "assets/app.js",
+            "content": "registerVueControllerComponents(require.context('./vue/controllers', true, /\\.vue$/, 'lazy'));",
+            "position": "bottom",
+            "warn_if_missing": true,
+            "requires": "symfony/webpack-encore-bundle"
+        },
+        {
+            "file": "assets/app.js",
+            "content": "registerVueControllerComponents();",
+            "position": "bottom",
+            "warn_if_missing": true,
+            "requires": "symfony/asset-mapper"
+        }
+    ]
 }

[weaverryan]

Thanks for opening - but I think I'd rather mention this in the docs - vs adding 4 lines to the user's app.js