From 251dc5863ba360bf67d05dd5268eb6e0eacb801e Mon Sep 17 00:00:00 2001
From: Hugo Alliaume <kocal@live.fr>
Date: Sun, 7 Apr 2019 15:38:02 +0200
Subject: [PATCH 1/3] Frontend: add section for using JSX with Vue.js

---
 frontend/encore/vuejs.rst | 112 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 112 insertions(+)

diff --git a/frontend/encore/vuejs.rst b/frontend/encore/vuejs.rst
index a79755b2ff7..96caa12ac9d 100644
--- a/frontend/encore/vuejs.rst
+++ b/frontend/encore/vuejs.rst
@@ -40,7 +40,119 @@ updated styles still requires a page refresh.
 
 See :doc:`/frontend/encore/dev-server` for more details.
 
+JSX Support
+-----------
+
+You can enable `JSX with Vue.js`_ by configuring the 2nd parameter of ``.enableVueLoader`` method:
+
+.. code-block:: diff
+
+    // webpack.config.js
+    // ...
+
+    Encore
+        // ...
+        .addEntry('main', './assets/main.js')
+
+    -     .enableVueLoader()
+    +     .enableVueLoader(() => {}, {
+    +         useJsx: true
+    +     })
+    ;
+
+Then restart Encore. When you do, it will give you a command you can run to
+install any missing dependencies. After running that command and restarting
+Encore, you're done!
+
+Your ``.jsx`` files will now be transformed through ``@vue/babel-preset-jsx``.
+
+Using styles
+~~~~~~~~~~~~
+
+You can't use ``<style>`` in ``.jsx`` files.
+
+As a workaround, you can import ``.css``, ``.scss``, ``.less`` and ``.styl`` files manually:
+
+.. code-block:: js
+
+    // App.jsx
+
+    import './App.css'
+
+    export default {
+        name: 'App',
+        render() {
+            return (
+                <div>
+                    ...
+                </div>
+            )
+        }
+    }
+
+Note that importing styles like this make them global.
+See the next section for scoping them to your component.
+
+Using Scoped Styles
+~~~~~~~~~~~~~~~~~~~
+
+Same, you can't use `Scoped Styles`_ (``<style scoped>``) in ``.jsx`` files.
+
+As a workaround, you can use `CSS Modules`_ by suffixing import paths with ``?module``:
+
+.. code-block:: js
+
+    // Component.jsx
+
+    import styles from './Component.css?module' // suffix with "?module"
+
+    export default {
+        name: 'Component',
+        render() {
+            return (
+                <div>
+                    <h1 class={styles.title}>
+                        Hello World
+                    </h1>
+                </div>
+            )
+        }
+    }
+
+.. code-block:: css
+
+    /* Component.css */
+
+    .title {
+        color: red
+    }
+
+The output will be something like ``<h1 class="h1_a3dKp">Hello World</h1>``.
+
+Using images
+~~~~~~~~~~~~
+
+You can't use ``<img src="./image.png">`` in ``.jsx`` files.
+
+As a workaround, you can import them with ``require()`` function:
+
+.. code-block:: js
+
+    export default {
+        name: 'Component',
+        render() {
+            return (
+                <div>
+                    <img src={require("./image.png")} />
+                </div>
+            )
+        }
+    }
+
 .. _`babel-preset-react`: https://babeljs.io/docs/plugins/preset-react/
 .. _`Vue.js`: https://vuejs.org/
 .. _`vue-loader options`: https://vue-loader.vuejs.org/options.html
 .. _`Encore's index.js file`: https://github.com/symfony/webpack-encore/blob/master/index.js
+.. _`JSX with Vue.js`: https://github.com/vuejs/jsx
+.. _`Scoped Styles`: https://vue-loader.vuejs.org/guide/scoped-css.html
+.. _`CSS Modules`: https://github.com/css-modules/css-modules

From a3748d66fa65f5e197edec54822d840282243a16 Mon Sep 17 00:00:00 2001
From: Hugo Alliaume <kocal@live.fr>
Date: Sun, 7 Apr 2019 16:22:36 +0200
Subject: [PATCH 2/3] Apply 1st code review

---
 frontend/encore/vuejs.rst | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/encore/vuejs.rst b/frontend/encore/vuejs.rst
index 96caa12ac9d..04977fa24e2 100644
--- a/frontend/encore/vuejs.rst
+++ b/frontend/encore/vuejs.rst
@@ -43,7 +43,7 @@ See :doc:`/frontend/encore/dev-server` for more details.
 JSX Support
 -----------
 
-You can enable `JSX with Vue.js`_ by configuring the 2nd parameter of ``.enableVueLoader`` method:
+You can enable `JSX with Vue.js`_ by configuring the 2nd parameter of the ``.enableVueLoader`` method:
 
 .. code-block:: diff
 
@@ -60,7 +60,7 @@ You can enable `JSX with Vue.js`_ by configuring the 2nd parameter of ``.enableV
     +     })
     ;
 
-Then restart Encore. When you do, it will give you a command you can run to
+Afterwards rebuild your frontend assets with Encore. When you do it will show an error message helping you
 install any missing dependencies. After running that command and restarting
 Encore, you're done!
 
@@ -90,8 +90,10 @@ As a workaround, you can import ``.css``, ``.scss``, ``.less`` and ``.styl`` fil
         }
     }
 
-Note that importing styles like this make them global.
-See the next section for scoping them to your component.
+.. note::
+
+    Importing styles this way make them global.
+    See the next section for scoping them to your component.
 
 Using Scoped Styles
 ~~~~~~~~~~~~~~~~~~~

From 54237d70c4c76e82b77c3ab38943ace99ef90945 Mon Sep 17 00:00:00 2001
From: Hugo Alliaume <kocal@live.fr>
Date: Wed, 10 Apr 2019 19:33:49 +0200
Subject: [PATCH 3/3] Apply code reviews from @OskarStark and @weaverryan

---
 frontend/encore/vuejs.rst | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/frontend/encore/vuejs.rst b/frontend/encore/vuejs.rst
index 04977fa24e2..0b1095b5f8d 100644
--- a/frontend/encore/vuejs.rst
+++ b/frontend/encore/vuejs.rst
@@ -43,7 +43,7 @@ See :doc:`/frontend/encore/dev-server` for more details.
 JSX Support
 -----------
 
-You can enable `JSX with Vue.js`_ by configuring the 2nd parameter of the ``.enableVueLoader`` method:
+You can enable `JSX with Vue.js`_ by configuring the 2nd parameter of the ``.enableVueLoader()`` method:
 
 .. code-block:: diff
 
@@ -60,7 +60,7 @@ You can enable `JSX with Vue.js`_ by configuring the 2nd parameter of the ``.ena
     +     })
     ;
 
-Afterwards rebuild your frontend assets with Encore. When you do it will show an error message helping you
+Next, run or restart Encore. When you do, you will see an error message helping you
 install any missing dependencies. After running that command and restarting
 Encore, you're done!
 
@@ -70,10 +70,9 @@ Using styles
 ~~~~~~~~~~~~
 
 You can't use ``<style>`` in ``.jsx`` files.
+As a workaround, you can import ``.css``, ``.scss``, etc, files manually:
 
-As a workaround, you can import ``.css``, ``.scss``, ``.less`` and ``.styl`` files manually:
-
-.. code-block:: js
+.. code-block:: javascript
 
     // App.jsx
 
@@ -98,11 +97,10 @@ As a workaround, you can import ``.css``, ``.scss``, ``.less`` and ``.styl`` fil
 Using Scoped Styles
 ~~~~~~~~~~~~~~~~~~~
 
-Same, you can't use `Scoped Styles`_ (``<style scoped>``) in ``.jsx`` files.
-
+You also can't use `Scoped Styles`_ (``<style scoped>``) in ``.jsx`` files.
 As a workaround, you can use `CSS Modules`_ by suffixing import paths with ``?module``:
 
-.. code-block:: js
+.. code-block:: javascript
 
     // Component.jsx
 
@@ -135,10 +133,9 @@ Using images
 ~~~~~~~~~~~~
 
 You can't use ``<img src="./image.png">`` in ``.jsx`` files.
-
 As a workaround, you can import them with ``require()`` function:
 
-.. code-block:: js
+.. code-block:: javascript
 
     export default {
         name: 'Component',