search

symfony / recipes

Symfony Recipes Repository
https://github.com/symfony/recipes/blob/flex/main/RECIPES.md
MIT License
956 stars 472 forks source link

[UX Vue] Add lines for components lazy-loading #1246

Closed Kocal closed 2 weeks ago

Kocal commented 9 months ago
Q A
License MIT
Doc issue/PR symfony/symfony-docs#...

Hi, this PR follows https://github.com/symfony/ux/issues/1177#issuecomment-1757659579.

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[bot] commented 9 months ago

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 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 @@ + + + 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" + } + ] } ```