Compiling first steps: through the simple example

_tuts/README.md

@@ -0,0 +1,5 @@
+# Hello there!
+
+The files in this directory cannot be modified directly: we use an internal tool
+to manage them. If you find an issue with the code, you can open an issue on the
+repository. In fact, that would be awesome :).

_tuts/actions-add-button.diff

@@ -0,0 +1,17 @@
+diff --git a/templates/product/index.html.twig b/templates/product/index.html.twig
+index f448d8d..76db29a 100644
+--- a/templates/product/index.html.twig
++++ b/templates/product/index.html.twig
+@@ -10,6 +10,12 @@
+             <div class="col-xs-12 col-9">
+
+                 <div data-controller="counter">
++                    <button class="btn btn-primary btn-sm">
++                        Click me!
++                    </button>
++
++                    <br>
++
+                     I have been clicked
+                     <span data-counter-target="count">0</span>
+                     times!

_tuts/actions-add-data-action.diff

@@ -0,0 +1,35 @@
+diff --git a/assets/controllers/counter_controller.js b/assets/controllers/counter_controller.js
+index 1a95704..b814859 100644
+--- a/assets/controllers/counter_controller.js
++++ b/assets/controllers/counter_controller.js
+@@ -5,10 +5,10 @@ export default class extends Controller {
+
+     connect() {
+         this.count = 0;
++    }
+
+-        this.element.addEventListener('click', () => {
+-            this.count++;
+-            this.countTarget.innerText = this.count;
+-        });
++    increment() {
++        this.count++;
++        this.countTarget.innerText = this.count;
+     }
+ }
+diff --git a/templates/product/index.html.twig b/templates/product/index.html.twig
+index 76db29a..8eccd2e 100644
+--- a/templates/product/index.html.twig
++++ b/templates/product/index.html.twig
+@@ -10,7 +10,10 @@
+             <div class="col-xs-12 col-9">
+
+                 <div data-controller="counter">
+-                    <button class="btn btn-primary btn-sm">
++                    <button
++                        data-action="click->counter#increment"
++                        class="btn btn-primary btn-sm"
++                    >
+                         Click me!
+                     </button>
+

_tuts/actions-remove-connect.diff

@@ -0,0 +1,18 @@
+diff --git a/assets/controllers/counter_controller.js b/assets/controllers/counter_controller.js
+index b814859..e9fd157 100644
+--- a/assets/controllers/counter_controller.js
++++ b/assets/controllers/counter_controller.js
+@@ -1,12 +1,9 @@
+ import { Controller } from 'stimulus';
+
+ export default class extends Controller {
++    count = 0;
+     static targets = ['count'];
+
+-    connect() {
+-        this.count = 0;
+-    }
+-
+     increment() {
+         this.count++;
+         this.countTarget.innerText = this.count;

_tuts/actions-use-default-action.diff

@@ -0,0 +1,13 @@
+diff --git a/templates/product/index.html.twig b/templates/product/index.html.twig
+index 8eccd2e..23bf5dd 100644
+--- a/templates/product/index.html.twig
++++ b/templates/product/index.html.twig
+@@ -11,7 +11,7 @@
+
+                 <div data-controller="counter">
+                     <button
+-                        data-action="click->counter#increment"
++                        data-action="counter#increment"
+                         class="btn btn-primary btn-sm"
+                     >
+                         Click me!

_tuts/controllerbasics-add-2nd-element.diff

@@ -0,0 +1,12 @@
+diff --git a/templates/product/index.html.twig b/templates/product/index.html.twig
+index 30c396d..4bc4499 100644
+--- a/templates/product/index.html.twig
++++ b/templates/product/index.html.twig
+@@ -4,6 +4,7 @@
+     <div class="container-fluid">
+         <div class="row">
+             <aside class="col-xs-12 col-3">
++                <div data-controller="counter"></div>
+                 {{ include('product/_categoriesSidebar.html.twig') }}
+             </aside>
+

_tuts/controllerbasics-add-first-element.diff

@@ -0,0 +1,13 @@
+diff --git a/templates/product/index.html.twig b/templates/product/index.html.twig
+index acb2341..30c396d 100644
+--- a/templates/product/index.html.twig
++++ b/templates/product/index.html.twig
+@@ -9,6 +9,8 @@
+
+             <div class="col-xs-12 col-9">
+
++                <div data-controller="counter"></div>
++
+                 <div class="row">
+                     <div class="col-3">
+                         <h1>

_tuts/controllerbasics-create-first-controller.diff

@@ -0,0 +1,13 @@
+diff --git a/assets/controllers/counter_controller.js b/assets/controllers/counter_controller.js
+new file mode 100644
+index 0000000..221f524
+--- /dev/null
++++ b/assets/controllers/counter_controller.js
+@@ -0,0 +1,7 @@
++import { Controller } from 'stimulus';
++
++export default class extends Controller {
++    connect() {
++        this.element.innerHTML = 'You have clicked me 0 times 😢';
++    }
++}

_tuts/controllerbasics-delete-hello-controller.diff

@@ -0,0 +1,22 @@
+diff --git a/assets/controllers/hello_controller.js b/assets/controllers/hello_controller.js
+deleted file mode 100644
+index 8c79f65..0000000
+--- a/assets/controllers/hello_controller.js
++++ /dev/null
+@@ -1,16 +0,0 @@
+-import { Controller } from 'stimulus';
+-
+-/*
+- * This is an example Stimulus controller!
+- *
+- * Any element with a data-controller="hello" attribute will cause
+- * this controller to be executed. The name "hello" comes from the filename:
+- * hello_controller.js -> "hello"
+- *
+- * Delete this file or adapt it for your use!
+- */
+-export default class extends Controller {
+-    connect() {
+-        this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
+-    }
+-}

_tuts/controllerbasics-increment-on-click.diff

@@ -0,0 +1,16 @@
+diff --git a/assets/controllers/counter_controller.js b/assets/controllers/counter_controller.js
+index 221f524..76f4a13 100644
+--- a/assets/controllers/counter_controller.js
++++ b/assets/controllers/counter_controller.js
+@@ -3,5 +3,11 @@ import { Controller } from 'stimulus';
+ export default class extends Controller {
+     connect() {
+         this.element.innerHTML = 'You have clicked me 0 times 😢';
++        this.count = 0;
++
++        this.element.addEventListener('click', () => {
++            this.count++;
++            this.element.innerHTML = this.count;
++        });
+     }
+ }

_tuts/installencore-add-bootstrap.diff

@@ -0,0 +1,32 @@
+diff --git a/package.json b/package.json
+index 6ef11da..c68e8b7 100644
+--- a/package.json
++++ b/package.json
+@@ -2,9 +2,10 @@
+     "devDependencies": {
+         "@symfony/stimulus-bridge": "^1.1.0",
+         "@symfony/webpack-encore": "^0.32.0",
++        "bootstrap": "^4.6.0",
+         "core-js": "^3.0.0",
+-        "stimulus": "^2.0.0",
+         "regenerator-runtime": "^0.13.2",
++        "stimulus": "^2.0.0",
+         "webpack-notifier": "^1.6.0"
+     },
+     "license": "UNLICENSED",
+diff --git a/yarn.lock b/yarn.lock
+index c493c7e..fa0382b 100644
+--- a/yarn.lock
++++ b/yarn.lock
+@@ -1440,6 +1440,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
+   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
+
++bootstrap@^4.6.0:
++  version "4.6.0"
++  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.0.tgz#97b9f29ac98f98dfa43bf7468262d84392552fd7"
++  integrity sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==
++
+ brace-expansion@^1.1.7:
+   version "1.1.11"
+   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"

_tuts/installencore-add-encore-twig-functions.diff

@@ -0,0 +1,18 @@
+diff --git a/templates/base.html.twig b/templates/base.html.twig
+index 0bcb9a0..890b300 100644
+--- a/templates/base.html.twig
++++ b/templates/base.html.twig
+@@ -7,9 +7,12 @@
+             <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+
+             <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
++            {{ encore_entry_link_tags('app') }}
+         {% endblock %}
+
+-        {% block javascripts %}{% endblock %}
++        {% block javascripts %}
++            {{ encore_entry_script_tags('app') }}
++        {% endblock %}
+     </head>
+     <body>
+         <div class="page-top">

_tuts/installencore-import-bootstrap.diff

@@ -0,0 +1,22 @@
+diff --git a/assets/styles/app.css b/assets/styles/app.css
+index bbd1985..62aec56 100644
+--- a/assets/styles/app.css
++++ b/assets/styles/app.css
+@@ -1,3 +1,4 @@
++@import '~bootstrap';
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
+
+ body {
+diff --git a/templates/base.html.twig b/templates/base.html.twig
+index d57b992..904df41 100644
+--- a/templates/base.html.twig
++++ b/templates/base.html.twig
+@@ -4,8 +4,6 @@
+         <meta charset="UTF-8">
+         <title>{% block title %}MVP Office Supplies{% endblock %}</title>
+         {% block stylesheets %}
+-            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+-
+             {{ encore_entry_link_tags('app') }}
+         {% endblock %}
+