From 688220153353b0f012422998fa4bebc09c212314 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Tue, 20 Jul 2021 15:22:16 +0100 Subject: [PATCH] Add StimulusJS and example controller --- app/views/layouts/darkswarm.html.haml | 1 + .../controllers/example_controller.js | 18 ++ app/webpacker/packs/application.js | 21 +- package.json | 1 + yarn.lock | 209 +++--------------- 5 files changed, 58 insertions(+), 192 deletions(-) create mode 100644 app/webpacker/controllers/example_controller.js diff --git a/app/views/layouts/darkswarm.html.haml b/app/views/layouts/darkswarm.html.haml index 2ade6f4e86..e745a20b3c 100644 --- a/app/views/layouts/darkswarm.html.haml +++ b/app/views/layouts/darkswarm.html.haml @@ -16,6 +16,7 @@ %link{href: font_path("OFN-v2.woff"), rel: "preload", as: "font", crossorigin: "anonymous"} = stylesheet_link_tag "darkswarm/all" + = javascript_pack_tag "application" = csrf_meta_tags %body{ class: body_classes, "body-scroll" => true , ng: { app: 'Darkswarm' }} diff --git a/app/webpacker/controllers/example_controller.js b/app/webpacker/controllers/example_controller.js new file mode 100644 index 0000000000..d638ca088c --- /dev/null +++ b/app/webpacker/controllers/example_controller.js @@ -0,0 +1,18 @@ +// This is what a basic Stimulus Controller looks like. To apply it to an element you can do: +// div{"data-controller": "example"} +// or: +// div{data: {controller: "example"}} + +import { Controller } from "stimulus" + +export default class extends Controller { + // connect() is a built-in lifecycle callback for Stimulus Controllers. It fires when the + // element is loaded on the page, and that also *includes* when some HTML is asynchronously + // injected into the DOM. This means initialization is not tied to the page load event, but + // will also happen dynamically if and when new DOM elements are added or removed. + connect() { + console.log("We're connected!") + } +} + +// For more info take a look at https://stimulus.hotwired.dev/handbook/introduction diff --git a/app/webpacker/packs/application.js b/app/webpacker/packs/application.js index 7c3021d7ed..fdd6b29cb2 100644 --- a/app/webpacker/packs/application.js +++ b/app/webpacker/packs/application.js @@ -1,18 +1,9 @@ /* eslint no-console:0 */ -// This file is automatically compiled by Webpack, along with any other files -// present in this directory. You're encouraged to place your actual application logic in -// a relevant structure within app/javascript and only use these pack files to reference -// that code so it'll be compiled. -// -// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate -// layout file, like app/views/layouts/application.html.erb +// StimulusJS +import { Application } from "stimulus" +import { definitionsFromContext } from "stimulus/webpack-helpers" -// Uncomment to copy all static images under ../images to the output folder and reference -// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) -// or the `imagePath` JavaScript helper below. -// -// const images = require.context('../images', true) -// const imagePath = (name) => images(name, true) - -console.log('Hello World from Webpacker') +const application = Application.start() +const context = require.context("controllers", true, /.js$/) +application.load(definitionsFromContext(context)) diff --git a/package.json b/package.json index 10043565bc..610d03defb 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "flatpickr": "^4.6.9", "moment": "^2.29.1", "shortcut-buttons-flatpickr": "^0.3.1", + "stimulus": "^2.0.0", "webpack": "^4.46.0", "webpack-cli": "^3.3.12" } diff --git a/yarn.lock b/yarn.lock index 5ffb1d24d0..a5156a4608 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1680,6 +1680,30 @@ prop-types "^15.6.1" react-lifecycles-compat "^3.0.4" +"@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== + "@storybook/addon-controls@^6.3.4": version "6.3.4" resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.3.4.tgz#7849905a0ec56fbea7608c15c08f872211b3a878" @@ -1744,21 +1768,6 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/addons@6.3.3": - version "6.3.3" - resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.3.3.tgz#040506adea1365699b039ff3c70a97a1a31fa766" - integrity sha512-EAT/MXZcAsjt9zQ15oHCyjoOVSbeas/y8+tHXFAcJKF1leZzRamg4X0hFjJWDtm0+HZWfC9qX8Rl57bIwgMRmQ== - dependencies: - "@storybook/api" "6.3.3" - "@storybook/channels" "6.3.3" - "@storybook/client-logger" "6.3.3" - "@storybook/core-events" "6.3.3" - "@storybook/router" "6.3.3" - "@storybook/theming" "6.3.3" - core-js "^3.8.2" - global "^4.4.0" - regenerator-runtime "^0.13.7" - "@storybook/addons@6.3.4": version "6.3.4" resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.3.4.tgz#016c5c3e36c78a320eb8b022cf7fe556d81577c2" @@ -1774,32 +1783,6 @@ global "^4.4.0" regenerator-runtime "^0.13.7" -"@storybook/api@6.3.3": - version "6.3.3" - resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.3.3.tgz#094b57959dc4c81f69a53d6f16373b69faeda3d8" - integrity sha512-Q8LxULCZF/ZUalamvNXLbT7x3bmH2She5TZFTyEINJF7W1UX5wluWnJ6RonAFxAK7GvLTf0wSHS7wzritJGMjg== - dependencies: - "@reach/router" "^1.3.4" - "@storybook/channels" "6.3.3" - "@storybook/client-logger" "6.3.3" - "@storybook/core-events" "6.3.3" - "@storybook/csf" "0.0.1" - "@storybook/router" "6.3.3" - "@storybook/semver" "^7.3.2" - "@storybook/theming" "6.3.3" - "@types/reach__router" "^1.3.7" - core-js "^3.8.2" - fast-deep-equal "^3.1.3" - global "^4.4.0" - lodash "^4.17.20" - memoizerific "^1.11.3" - qs "^6.10.0" - regenerator-runtime "^0.13.7" - store2 "^2.12.0" - telejson "^5.3.2" - ts-dedent "^2.0.0" - util-deprecate "^1.0.2" - "@storybook/api@6.3.4": version "6.3.4" resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.3.4.tgz#25b8b842104693000b018b3f64986e95fa032b45" @@ -1902,19 +1885,6 @@ webpack-hot-middleware "^2.25.0" webpack-virtual-modules "^0.2.2" -"@storybook/channel-postmessage@6.3.3": - version "6.3.3" - resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.3.3.tgz#b25b4837be276da2cfaa2a0c488b6c25c27c5fad" - integrity sha512-IGDUMpq+nLTeVottYPwXyaeto/Li5VBpU6jZaiGMMaggwxAeLxjKyovv/cnKBQr/HXNO8xWl+SZfptonrS9abw== - dependencies: - "@storybook/channels" "6.3.3" - "@storybook/client-logger" "6.3.3" - "@storybook/core-events" "6.3.3" - core-js "^3.8.2" - global "^4.4.0" - qs "^6.10.0" - telejson "^5.3.2" - "@storybook/channel-postmessage@6.3.4": version "6.3.4" resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.3.4.tgz#1a0000aefc9494d5585a1d2c7bdb75f540965f70" @@ -1928,15 +1898,6 @@ qs "^6.10.0" telejson "^5.3.2" -"@storybook/channels@6.3.3": - version "6.3.3" - resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.3.3.tgz#167c75f1a9e6a5ee9b50ab198651f87fe801eaf1" - integrity sha512-S20bQKlQv7Fwq+1qM4ZoBN921NvuPF3HVPKemS3REN0gSoVPjN1Ur+kRLh7Q7mAo4AWFirD+2yqA2tU5ClTGMw== - dependencies: - core-js "^3.8.2" - ts-dedent "^2.0.0" - util-deprecate "^1.0.2" - "@storybook/channels@6.3.4": version "6.3.4" resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.3.4.tgz#425b31a67e42ac66ccb03465e4ba2e2ef9c8344b" @@ -1946,30 +1907,6 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/client-api@6.3.3": - version "6.3.3" - resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.3.3.tgz#449c8971a06ea6ae4d6aef3c7ed08db52d74ac83" - integrity sha512-oKku+viz+fgxdLCBEYT31yM9khyLvrmicnQHA33MyMXUzhEwFlKO5aXHD4TF5ZeaGxZ8M1NSLAIz53O8QpPizg== - dependencies: - "@storybook/addons" "6.3.3" - "@storybook/channel-postmessage" "6.3.3" - "@storybook/channels" "6.3.3" - "@storybook/client-logger" "6.3.3" - "@storybook/core-events" "6.3.3" - "@storybook/csf" "0.0.1" - "@types/qs" "^6.9.5" - "@types/webpack-env" "^1.16.0" - core-js "^3.8.2" - global "^4.4.0" - lodash "^4.17.20" - memoizerific "^1.11.3" - qs "^6.10.0" - regenerator-runtime "^0.13.7" - stable "^0.1.8" - store2 "^2.12.0" - ts-dedent "^2.0.0" - util-deprecate "^1.0.2" - "@storybook/client-api@6.3.4": version "6.3.4" resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.3.4.tgz#7dd6dda0126012ed37fa885642973cc75366b5a8" @@ -1994,14 +1931,6 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/client-logger@6.3.3": - version "6.3.3" - resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.3.3.tgz#87aaa7b92ed2389f90317469fb99c5d066446554" - integrity sha512-eckaVBPYOLh5ZFWrcCS+JqXkIQMESpiR2IfmEBHpZFq8lHZRq/dpmfLnDM2HrGiRR5EvPn9/Hl9jIKLaVx3Yng== - dependencies: - core-js "^3.8.2" - global "^4.4.0" - "@storybook/client-logger@6.3.4": version "6.3.4" resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.3.4.tgz#c7ee70463c48bb3af704165d5456351ebb667fc2" @@ -2010,36 +1939,6 @@ core-js "^3.8.2" global "^4.4.0" -"@storybook/components@6.3.3": - version "6.3.3" - resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.3.3.tgz#eba4fabf76e84fb70e00a82ebf4ba16c4b2ff984" - integrity sha512-45XDLRTXdG2bfEILwMkENdknkyVLQrqchcVh7qm+wtZEXhbtIGoTxlXYPUST+xB6MF5AXZ0c8UTm2YMgV3v3FQ== - dependencies: - "@popperjs/core" "^2.6.0" - "@storybook/client-logger" "6.3.3" - "@storybook/csf" "0.0.1" - "@storybook/theming" "6.3.3" - "@types/color-convert" "^2.0.0" - "@types/overlayscrollbars" "^1.12.0" - "@types/react-syntax-highlighter" "11.0.5" - color-convert "^2.0.1" - core-js "^3.8.2" - fast-deep-equal "^3.1.3" - global "^4.4.0" - lodash "^4.17.20" - markdown-to-jsx "^7.1.3" - memoizerific "^1.11.3" - overlayscrollbars "^1.13.1" - polished "^4.0.5" - prop-types "^15.7.2" - react-colorful "^5.1.2" - react-popper-tooltip "^3.1.1" - react-syntax-highlighter "^13.5.3" - react-textarea-autosize "^8.3.0" - regenerator-runtime "^0.13.7" - ts-dedent "^2.0.0" - util-deprecate "^1.0.2" - "@storybook/components@6.3.4": version "6.3.4" resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.3.4.tgz#c872ec267edf315eaada505be8595c70eb6db09b" @@ -2147,13 +2046,6 @@ util-deprecate "^1.0.2" webpack "4" -"@storybook/core-events@6.3.3": - version "6.3.3" - resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.3.3.tgz#4d073a601f10f928fa27207cc9e7eb313a74fc77" - integrity sha512-Ym/Xna7GrCF0CbTkbejzuAw7LunZ158AT2AvGYMZujGBzunYG7MlfXVoS6YjUUt8vEmGHi8g6PdD6uij4IBY8A== - dependencies: - core-js "^3.8.2" - "@storybook/core-events@6.3.4": version "6.3.4" resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.3.4.tgz#f841b8659a8729d334acd9a6dcfc470c88a2be8f" @@ -2278,17 +2170,6 @@ webpack-dev-middleware "^3.7.3" webpack-virtual-modules "^0.2.2" -"@storybook/node-logger@6.3.3": - version "6.3.3" - resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.3.3.tgz#e98ea1b545442b078280886878f4943397c806aa" - integrity sha512-YmH8jZok49HPHuG/fkKgYTrHd1jxwwjhyy/cJvzW+gr3V+4rTLv0EqVe45j2LEB8+9hEw6NyMTNzn9j1eEZvIg== - dependencies: - "@types/npmlog" "^4.1.2" - chalk "^4.1.0" - core-js "^3.8.2" - npmlog "^4.1.2" - pretty-hrtime "^1.0.3" - "@storybook/node-logger@6.3.4": version "6.3.4" resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.3.4.tgz#ab7bd9f78f9ff10c9d20439734de6882233a9a75" @@ -2307,22 +2188,6 @@ dependencies: core-js "^3.8.2" -"@storybook/router@6.3.3": - version "6.3.3" - resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.3.3.tgz#2e87377be3e0ac42639c0358dd6b4bd69c9a0b43" - integrity sha512-vS04DWSod9YvFIVSxvWbSc7Bkn/1kwpg+mnOeCSZxs50e6LflZ+5tXqAvnobeEnceTH/rjtbQBVvarx0ZfDD3g== - dependencies: - "@reach/router" "^1.3.4" - "@storybook/client-logger" "6.3.3" - "@types/reach__router" "^1.3.7" - core-js "^3.8.2" - fast-deep-equal "^3.1.3" - global "^4.4.0" - lodash "^4.17.20" - memoizerific "^1.11.3" - qs "^6.10.0" - ts-dedent "^2.0.0" - "@storybook/router@6.3.4": version "6.3.4" resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.3.4.tgz#f38ec8064a9d1811a68558390727c30220fe7d72" @@ -2385,24 +2250,6 @@ prettier "~2.2.1" regenerator-runtime "^0.13.7" -"@storybook/theming@6.3.3": - version "6.3.3" - resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.3.3.tgz#4801a6a774b3e6a356e86f3c6351f79d1dc9bee7" - integrity sha512-+V6aDZhzesYgiRe5hb8AAmLIh2GzIDTU6N2ssVuJQkujv6XE9uiL2hfORRChVm/dKPgTr84vX2jnJ+1317iCEg== - dependencies: - "@emotion/core" "^10.1.1" - "@emotion/is-prop-valid" "^0.8.6" - "@emotion/styled" "^10.0.27" - "@storybook/client-logger" "6.3.3" - core-js "^3.8.2" - deep-object-diff "^1.1.0" - emotion-theming "^10.0.27" - global "^4.4.0" - memoizerific "^1.11.3" - polished "^4.0.5" - resolve-from "^5.0.0" - ts-dedent "^2.0.0" - "@storybook/theming@6.3.4": version "6.3.4" resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.3.4.tgz#69d3f912c74a7b6ba78c1c95fac3315356468bdd" @@ -10551,6 +10398,14 @@ static-extend@^0.1.1: resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c" integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow= +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" + store2@^2.12.0: version "2.12.0" resolved "https://registry.yarnpkg.com/store2/-/store2-2.12.0.tgz#e1f1b7e1a59b6083b2596a8d067f6ee88fd4d3cf"