From d974457f894947b0496462a49d7643e7d1653c49 Mon Sep 17 00:00:00 2001 From: baarkerlounger Date: Wed, 15 Sep 2021 16:15:52 +0100 Subject: [PATCH] Add Stimulus --- .../controllers/hello_controller.js | 15 ++++++- app/javascript/controllers/index.js | 17 +++---- app/javascript/packs/application.js | 2 + package.json | 2 + yarn.lock | 44 +++++++++++++++++++ 5 files changed, 67 insertions(+), 13 deletions(-) diff --git a/app/javascript/controllers/hello_controller.js b/app/javascript/controllers/hello_controller.js index 5975c0789..6671d28a4 100644 --- a/app/javascript/controllers/hello_controller.js +++ b/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: +// +//
+//

+//
+ +import { Controller } from "stimulus" export default class extends Controller { + static targets = [ "output" ] + connect() { - this.element.textContent = "Hello World!" + this.outputTarget.textContent = 'Hello, Stimulus!' } } diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index 4b51d5be3..6f53d84bb 100644 --- a/app/javascript/controllers/index.js +++ b/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() - -// Configure Stimulus development experience -application.warnings = true -application.debug = false -window.Stimulus = application +import { Application } from "stimulus" +import { definitionsFromContext } from "stimulus/webpack-helpers" -// Import and register all your controllers within this directory and all subdirectories -// Controller files must be named *_controller.js or *_controller.ts -import { definitionsFromContext } from "@hotwired/stimulus" -const context = require.context("controllers", true, /_controller\.(js|ts)$/) +const application = Application.start() +const context = require.context("controllers", true, /_controller\.js$/) application.load(definitionsFromContext(context)) diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 53ae39dda..dc909ede8 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -15,3 +15,5 @@ import "@hotwired/turbo-rails" Rails.start() ActiveStorage.start() initAll() + +import "controllers" diff --git a/package.json b/package.json index 4a3ba390c..1bf8be47c 100644 --- a/package.json +++ b/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" }, diff --git a/yarn.lock b/yarn.lock index b7dd73218..003e61009 100644 --- a/yarn.lock +++ b/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"