Updating documenation for newly merged recipes

symfony/recipes#1213

Author: weaverryan

src/React/doc/index.rst

@@ -25,19 +25,11 @@ Then install the bundle using Composer and Symfony Flex:
 
     $ composer require symfony/ux-react
 
-Next, in ``webpack.config.js``, enable React support:
+The Flex recipe will automatically set things up for you, like adding
+``.enableReactPreset()`` to your ``webpack.config.js`` file and adding code
+to load your React components inside ``assets/app.js``.
 
-.. code-block:: javascript
-
-    // webpack.config.js
-    // ...
-
-    Encore
-        // ...
-        .enableReactPreset()
-    ;
-
-Install a package to help React:
+Next, install a package to help React:
 
 .. code-block:: terminal
 
@@ -48,45 +40,33 @@ Install a package to help React:
     $ yarn add @babel/preset-react --dev --force
     $ yarn watch
 
-Finally, to load your React components, add the following lines to ``assets/app.js``:
+That's it! Any files inside ``assets/react/controllers/`` can now be rendered as
+React components.
+
+Usage
+-----
+
+The Flex recipe will have already added the ``registerReactControllerComponents()``
+code to your ``assets/app.js`` file:
 
 .. code-block:: javascript
 
     // assets/app.js
     import { registerReactControllerComponents } from '@symfony/ux-react';
 
-    // Registers React controller components to allow loading them from Twig
-    //
-    // React controller components are components that are meant to be rendered
-    // from Twig. These component then rely on other components that won't be called
-    // directly from Twig.
-    //
-    // By putting only controller components in `react/controllers`, you ensure that
-    // internal components won't be automatically included in your JS built file if
-    // they are not necessary.
-    registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));
-
-That's it! Create an ``assets/react/controllers/`` directory and start creating your
-React components.
-
-Usage
------
-
-UX React works by using a system of **React controller components**: React components that
-are registered using ``registerReactControllerComponents`` and that are meant to be rendered
-from Twig.
+    registerReactControllerComponents(require.context('./react/controllers', true, /\\.(j|t)sx?$/));
 
-When using the ``registerReactControllerComponents`` configuration shown previously, all
-React components located in the directory ``assets/react/controllers`` are registered as
-React controller components.
+This will load all React components located in the ``assets/react/controllers``
+directory. These are known as **React controller components**: top-level
+components that are meant to be rendered from Twig.
 
-You can then render any React controller component in Twig using the ``react_component``.
+You can render any React controller component in Twig using the ``react_component()``.
 
 For example:
 
 .. code-block:: javascript
 
-    // assets/react/controllers/MyComponent.jsx
+    // assets/react/controllers/Hello.jsx
     import React from 'react';
 
     export default function (props) {
@@ -99,7 +79,7 @@ For example:
     {% extends 'base.html.twig' %}
 
     {% block body %}
-        <div {{ react_component('MyComponent', { 'fullName': number }) }}>
+        <div {{ react_component('Hello', { 'fullName': number }) }}>
             Loading... <i class="fas fa-cog fa-spin fa-3x"></i>
         </div>
 

src/Svelte/doc/index.rst

@@ -33,26 +33,11 @@ Then install the bundle using Composer and Symfony Flex:
     $ yarn install --force
     $ yarn watch
 
-You also need to add the following lines at the end to your ``assets/app.js`` file:
+The Flex recipe will automatically set things up for you, like adding
+``.enableSvelte()`` to your ``webpack.config.js`` file and adding code
+to load your Vue components inside ``assets/app.js``.
 
-.. code-block:: javascript
-
-    // assets/app.js
-    import { registerSvelteControllerComponents } from '@symfony/ux-svelte';
-
-    // Registers Svelte controller components to allow loading them from Twig
-    //
-    // Svelte controller components are components that are meant to be rendered
-    // from Twig. These component can then rely on other components that won't be
-    // called directly from Twig.
-    //
-    // By putting only controller components in `svelte/controllers`, you ensure that
-    // internal components won't be automatically included in your JS built file if
-    // they are not necessary.
-    registerSvelteControllerComponents(require.context('./svelte/controllers', true, /\.svelte$/));
-
-To make sure Svelte components can be loaded by Webpack Encore, you need to add and configure
-the `svelte-loader`_ library in your project :
+Next, install a package to help Svelte:
 
 .. code-block:: terminal
 
@@ -61,32 +46,33 @@ the `svelte-loader`_ library in your project :
     # or use yarn
     $ yarn add svelte svelte-loader --dev
 
-Enable it in your ``webpack.config.js`` file :
+That's it! Any files inside ``assets/svelte/controllers/`` can now be rendered as
+Svelte components.
+
+Usage
+-----
+
+The Flex recipe will have already added the ``registerSvelteControllerComponents()``
+code to your ``assets/app.js`` file:
 
 .. code-block:: javascript
 
-    // webpack.config.js
-    Encore
-        // ...
-        .enableSvelte()
-    ;
+    // assets/app.js
+    import { registerSvelteControllerComponents } from '@symfony/ux-svelte';
 
-Usage
------
+    registerSvelteControllerComponents(require.context('./svelte/controllers', true, /\\.(j|t)sx?$/));
 
-UX Svelte works by using a system of **Svelte controller components**: Svelte components that
-are registered using ``registerSvelteControllerComponents()`` and that are meant to be rendered
-from Twig.
+This will load all Svelte components located in the ``assets/svelte/controllers``
+directory. These are known as **Svelte controller components**: top-level
+components that are meant to be rendered from Twig.
 
-When using the ``registerSvelteControllerComponents()`` configuration shown previously, all
-Svelte components located in the directory ``assets/svelte/controllers`` are registered as
-Svelte controller components.
+You can render any Svelte controller component in Twig using the ``svelte_component()``.
 
-You can then render any Svelte controller component in Twig using the ``svelte_component()`` function:
+For example:
 
 .. code-block:: javascript
 
-    // assets/svelte/controllers/MyComponent.svelte
+    // assets/svelte/controllers/Hello.svelte
     <script>
         export let name = "Svelte";
     </script>
@@ -97,7 +83,7 @@ You can then render any Svelte controller component in Twig using the ``svelte_c
 .. code-block:: html+twig
 
     {# templates/home.html.twig #}
-    <div {{ svelte_component('MyComponent', { 'name': app.user.fullName }) }}></div>
+    <div {{ svelte_component('Hello', { 'name': app.user.fullName }) }}></div>
 
 If your Svelte component has a transition that you want to play on initial render, you can use
 the third argument ``intro`` of the ``svelte_component()`` function like you would do with the

src/Vue/doc/index.rst

@@ -25,19 +25,11 @@ Then install the bundle using Composer and Symfony Flex:
 
     $ composer require symfony/ux-vue
 
-Next, in ``webpack.config.js``, enable Vue.js support:
+The Flex recipe will automatically set things up for you, like adding
+``.enableVueLoader()`` to your ``webpack.config.js`` file and adding code
+to load your Vue components inside ``assets/app.js``.
 
-.. code-block:: javascript
-
-    // webpack.config.js
-    // ...
-
-    Encore
-        // ...
-        .enableVueLoader()
-    ;
-
-Install a package to help Vue:
+Next, install a package to help Vue:
 
 .. code-block:: terminal
 
@@ -48,48 +40,31 @@ Install a package to help Vue:
     $ yarn add vue-loader --dev --force
     $ yarn watch
 
-Finally, to load your Vue components, add the following lines to ``assets/app.js``:
+That's it! Any files inside ``assets/vue/controllers/`` can now be rendered as
+Vue components.
+
+Usage
+-----
+
+The Flex recipe will have already added the ``registerVueControllerComponents()``
+code to your ``assets/app.js`` file:
 
 .. code-block:: javascript
 
     // assets/app.js
     import { registerVueControllerComponents } from '@symfony/ux-vue';
 
-    // Registers Vue.js controller components to allow loading them from Twig
-    //
-    // Vue.js controller components are components that are meant to be rendered
-    // from Twig. These component can then rely on other components that won't be
-    // called directly from Twig.
-    //
-    // By putting only controller components in `vue/controllers`, you ensure that
-    // internal components won't be automatically included in your JS built file if
-    // they are not necessary.
-    registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue$/));
-
-    // If you prefer to lazy-load your Vue.js controller components, in order to keep the JavaScript bundle the smallest as possible,
-    // and improve performance, you can use the following line instead:
-    //registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue$/, 'lazy'));
-
-That's it! Create an ``assets/vue/controllers/`` directory and start creating your
-Vue components.
-
-Usage
------
-
-UX Vue.js works by using a system of **Vue.js controller components**: Vue.js components that
-are registered using ``registerVueControllerComponents`` and that are meant to be rendered
-from Twig.
+    registerVueControllerComponents(require.context('./vue/controllers', true, /\\.(j|t)sx?$/));
 
-When using the ``registerVueControllerComponents`` configuration shown previously, all
-Vue.js components located in the directory ``assets/vue/controllers`` are registered as
-Vue.js controller components.
+This will load all Vue components located in the ``assets/vue/controllers``
+directory. These are known as **Vue controller components**: top-level
+components that are meant to be rendered from Twig.
 
-You can then render any Vue.js controller component in Twig using the ``vue_component``.
-For example:
+You can render any Vue controller component in Twig using the ``vue_component()``.
 
 .. code-block:: javascript
 
-    // assets/vue/controllers/MyComponent.vue
+    // assets/vue/controllers/Hello.vue
     <template>
         <div>Hello {{ name }}!</div>
     </template>
@@ -103,7 +78,7 @@ For example:
 .. code-block:: html+twig
 
     {# templates/home.html.twig #}
-    <div {{ vue_component('MyComponent', { 'name': app.user.fullName }) }}></div>
+    <div {{ vue_component('Hello', { 'name': app.user.fullName }) }}></div>
 
 Events
 ~~~~~~