Add Stimulus

app/javascript/controllers/hello_controller.js

@@ -1,7 +1,18 @@
-import { Controller } from "@hotwired/stimulus"
+// Visit The Stimulus Handbook for more details
+// https://stimulusjs.org/handbook/introduction
+//
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
 
 export default class extends Controller {
+  static targets = [ "output" ]
+
   connect() {
-    this.element.textContent = "Hello World!"
+    this.outputTarget.textContent = 'Hello, Stimulus!'
   }
 }

app/javascript/controllers/index.js

@@ -1,14 +1,9 @@
-import { Application } from "@hotwired/stimulus"
+// Load all the controllers within this directory and all subdirectories. 
+// Controller files must be named *_controller.js.
 
-const application = Application.start()
+import { Application } from "stimulus"
-
+import { definitionsFromContext } from "stimulus/webpack-helpers"
-// Configure Stimulus development experience
-application.warnings = true
-application.debug    = false
-window.Stimulus      = application
 
-// Import and register all your controllers within this directory and all subdirectories
+const application = Application.start()
-// Controller files must be named *_controller.js or *_controller.ts
+const context = require.context("controllers", true, /_controller\.js$/)
-import { definitionsFromContext } from "@hotwired/stimulus"
-const context = require.context("controllers", true, /_controller\.(js|ts)$/)
 application.load(definitionsFromContext(context))

app/javascript/packs/application.js

@@ -15,3 +15,5 @@ import "@hotwired/turbo-rails"
 Rails.start()
 ActiveStorage.start()
 initAll()
+
+import "controllers"

package.json

@@ -10,6 +10,8 @@
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "5.4.0",
     "govuk-frontend": "^3.13.0",
+    "stimulus": "^2.0.0",
+    "stimulus-use": "^0.26.0",
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12"
   },

yarn.lock

@@ -972,6 +972,30 @@
     webpack-cli "^3.3.12"
     webpack-sources "^1.4.3"
 
+"@stimulus/core@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@stimulus/core/-/core-2.0.0.tgz#140c85318d6a8a8210c0faf182223b8459348877"
+  integrity sha512-ff70GafKtzc8zQ1/cG+UvL06GcifPWovf2wBEdjLMh9xO2GOYURO3y2RYgzIGYUIBefQwyfX2CLfJdZFJrEPTw==
+  dependencies:
+    "@stimulus/mutation-observers" "^2.0.0"
+
+"@stimulus/multimap@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@stimulus/multimap/-/multimap-2.0.0.tgz#420cfa096ed6538df4a91dbd2b2842c1779952b2"
+  integrity sha512-pMBCewkZCFVB3e5mEMoyO9+9aKzHDITmf3OnPun51YWxlcPdHcwbjqm1ylK63fsoduIE+RowBpFwFqd3poEz4w==
+
+"@stimulus/mutation-observers@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@stimulus/mutation-observers/-/mutation-observers-2.0.0.tgz#3dbe37453bda47a6c795a90204ee8d77a799fb87"
+  integrity sha512-kx4VAJdPhIGBQKGIoUDC2tupEKorG3A+ckc2b1UiwInKTMAC1axOHU8ebcwhaJIxRqIrs8//4SJo9YAAOx6FEg==
+  dependencies:
+    "@stimulus/multimap" "^2.0.0"
+
+"@stimulus/webpack-helpers@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@stimulus/webpack-helpers/-/webpack-helpers-2.0.0.tgz#54296d2a2dffd4f962d2e802d99a3fdd84b8845f"
+  integrity sha512-D6tJWsAC024MwGEIKlUVYU8Ln87mlrmiwHvYAjipg+s8H4eLxUMQ3PZkWyPevfipH+oR3leuHsjYsK1gN5ViQA==
+
 "@types/glob@^7.1.1":
   version "7.1.4"
   resolved "https://registry.npmjs.org/@types/glob/-/glob-7.1.4.tgz"
@@ -3219,6 +3243,11 @@ homedir-polyfill@^1.0.1:
   dependencies:
     parse-passwd "^1.0.0"
 
+hotkeys-js@>=3:
+  version "3.8.7"
+  resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.8.7.tgz#c16cab978b53d7242f860ca3932e976b92399981"
+  integrity sha512-ckAx3EkUr5XjDwjEHDorHxRO2Kb7z6Z2Sxul4MbBkN8Nho7XDslQsgMJT+CiJ5Z4TgRxxvKHEpuLE3imzqy4Lg==
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz"
@@ -6121,6 +6150,21 @@ static-extend@^0.1.1:
   resolved "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz"
   integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
 
+stimulus-use@^0.26.0:
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/stimulus-use/-/stimulus-use-0.26.0.tgz#eb3f874bf2ec1ff213589cb5fbe2d314fe5d2741"
+  integrity sha512-p9uqV/STRR3QJb9r1ijPiPOmF+vQtcvs8/9D4eDF2OdWOafr0prG/Cd9lZNzamGrejhOqh90mOgrK+RTBP9HLA==
+  dependencies:
+    hotkeys-js ">=3"
+
+stimulus@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/stimulus/-/stimulus-2.0.0.tgz#713c8b91a72ef90914b90955f0e705f004403047"
+  integrity sha512-xipy7BS5TVpg4fX6S8LhrYZp7cmHGjmk09WSAiVx1gF5S5g43IWsuetfUhIk8HfHUG+4MQ9nY0FQz4dRFLs/8w==
+  dependencies:
+    "@stimulus/core" "^2.0.0"
+    "@stimulus/webpack-helpers" "^2.0.0"
+
 stream-browserify@^2.0.1:
   version "2.0.2"
   resolved "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz"