deps: Upgrade to stimulus 3.0

cmd/dcrdata/package.json

@@ -28,6 +28,8 @@
     "@babel/eslint-parser": "^7.16.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.16.11",
+    "@hotwired/stimulus": "^3.0.1",
+    "@hotwired/stimulus-webpack-helpers": "^1.0.1",
     "babel-loader": "^8.2.3",
     "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^6.5.1",
@@ -42,7 +44,6 @@
     "mousetrap": "^1.6.5",
     "sass": "^1.49.0",
     "sass-loader": "^12.4.0",
-    "stimulus": "^1.1.1",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
     "stylelint-webpack-plugin": "^3.1.1",

cmd/dcrdata/public/index.js

@@ -2,8 +2,8 @@
 import 'regenerator-runtime/runtime'
 /* global require */
 import ws from './js/services/messagesocket_service'
-import { Application } from 'stimulus'
-import { definitionsFromContext } from 'stimulus/webpack-helpers'
+import { Application } from '@hotwired/stimulus'
+import { definitionsFromContext } from '@hotwired/stimulus-webpack-helpers'
 import { darkEnabled } from './js/services/theme_service'
 import globalEventBus from './js/services/event_bus_service'
 

cmd/dcrdata/public/js/controllers/address_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import { isEmpty } from 'lodash-es'
 import dompurify from 'dompurify'
 import { getDefault } from '../helpers/module_helper'

cmd/dcrdata/public/js/controllers/agenda_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import { barChartPlotter } from '../helpers/chart_helper'
 import { getDefault } from '../helpers/module_helper'
 import humanize from '../helpers/humanize_helper'

cmd/dcrdata/public/js/controllers/agendas_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import globalEventBus from '../services/event_bus_service'
 import { darkEnabled } from '../services/theme_service'
 import { VoteMeter, ProgressMeter } from '../helpers/meters.js'

cmd/dcrdata/public/js/controllers/attackcost_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import TurboQuery from '../helpers/turbolinks_helper'
 import { getDefault } from '../helpers/module_helper'
 import globalEventBus from '../services/event_bus_service'

cmd/dcrdata/public/js/controllers/blocklist_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import globalEventBus from '../services/event_bus_service'
 import humanize from '../helpers/humanize_helper'
 

cmd/dcrdata/public/js/controllers/charts_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import { map, assign, merge } from 'lodash-es'
 import Zoom from '../helpers/zoom_helper'
 import { darkEnabled } from '../services/theme_service'
@@ -380,15 +380,15 @@ export default class extends Controller {
     // Prepare the legend element generators.
     const lm = this.legendMarkerTarget
     lm.remove()
-    lm.removeAttribute('data-target')
+    lm.removeAttribute('data-charts-target')
     legendMarker = () => {
       const node = document.createElement('div')
       node.appendChild(lm.cloneNode())
       return node.innerHTML
     }
     const le = this.legendEntryTarget
     le.remove()
-    le.removeAttribute('data-target')
+    le.removeAttribute('data-charts-target')
     legendEntry = s => {
       const node = le.cloneNode()
       node.innerHTML = s

cmd/dcrdata/public/js/controllers/clipboard_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 
 export const copyIcon = () => {
   const copyIcon = document.createElement('span')

cmd/dcrdata/public/js/controllers/connection_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import ws from '../services/messagesocket_service'
 
 export default class extends Controller {

cmd/dcrdata/public/js/controllers/homepage_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import { each } from 'lodash-es'
 import dompurify from 'dompurify'
 import humanize from '../helpers/humanize_helper'
@@ -27,7 +27,7 @@ function mempoolTableRow (tx) {
     <td class="text-start">${tx.Type}</td>
     <td class="text-end">${humanize.threeSigFigs(tx.total || 0, false, 8)}</td>
     <td class="text-nowrap text-end">${tx.size} B</td>
-    <td class="text-end pe-1 text-nowrap" data-target="time.age" data-age="${tx.time}">${humanize.timeSince(tx.time)}</td>
+    <td class="text-end pe-1 text-nowrap" data-time-target="age" data-age="${tx.time}">${humanize.timeSince(tx.time)}</td>
   </tr>`
   dompurify.sanitize(tbody, { IN_PLACE: true, FORBID_TAGS: ['svg', 'math'] })
   return tbody.firstChild

cmd/dcrdata/public/js/controllers/market_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import TurboQuery from '../helpers/turbolinks_helper'
 import { getDefault } from '../helpers/module_helper'
 import { requestJSON } from '../helpers/http'

cmd/dcrdata/public/js/controllers/mempool_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import { map, each } from 'lodash-es'
 import dompurify from 'dompurify'
 import humanize from '../helpers/humanize_helper'
@@ -29,7 +29,7 @@ function txTableRow (tx) {
         <td class="mono fs15 text-end">${humanize.decimalParts(tx.total, false, 8)}</td>
         <td class="mono fs15 text-end">${tx.size} B</td>
         <td class="mono fs15 text-end">${tx.fee_rate} DCR/kB</td>
-        <td class="mono fs15 text-end" data-target="time.age" data-age="${tx.time}">${humanize.timeSince(tx.time)}</td>
+        <td class="mono fs15 text-end" data-time-target="age" data-age="${tx.time}">${humanize.timeSince(tx.time)}</td>
     </tr>`)
 }
 
@@ -46,7 +46,7 @@ function voteTxTableRow (tx) {
         <td class="mono fs15">${tx.vote_info.vote_version}</td>
         <td class="mono fs15 text-end d-none d-sm-table-cell">${humanize.decimalParts(tx.total, false, 8)}</td>
         <td class="mono fs15 text-end">${humanize.bytes(tx.size)}</td>
-        <td class="mono fs15 text-end d-none d-sm-table-cell jsonly" data-target="time.age" data-age="${tx.time}">${humanize.timeSince(tx.time)}</td>
+        <td class="mono fs15 text-end d-none d-sm-table-cell jsonly" data-time-target="age" data-age="${tx.time}">${humanize.timeSince(tx.time)}</td>
     </tr>`)
 }
 

cmd/dcrdata/public/js/controllers/menu_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import { closeMenu, toggleSun } from '../services/theme_service'
 
 function closest (el, id) {

cmd/dcrdata/public/js/controllers/newblock_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import globalEventBus from '../services/event_bus_service'
 
 export default class extends Controller {

cmd/dcrdata/public/js/controllers/pagenavigation_controller.js

@@ -1,5 +1,5 @@
 /* global Turbolinks */
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import Url from 'url-parse'
 
 export default class extends Controller {

cmd/dcrdata/public/js/controllers/proposal_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import { MiniMeter } from '../helpers/meters.js'
 import { darkEnabled } from '../services/theme_service'
 import globalEventBus from '../services/event_bus_service'

cmd/dcrdata/public/js/controllers/rawtx_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import ws from '../services/messagesocket_service'
 import { fadeIn } from '../helpers/animation_helper'
 

cmd/dcrdata/public/js/controllers/search_controller.js

@@ -1,5 +1,5 @@
 /* global Turbolinks */
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
   execute (e) {

cmd/dcrdata/public/js/controllers/status_controller.js

@@ -1,5 +1,5 @@
 /* global Turbolinks */
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import dompurify from 'dompurify'
 import ws from '../services/messagesocket_service'
 import globalEventBus from '../services/event_bus_service'

cmd/dcrdata/public/js/controllers/ticketpool_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import ws from '../services/messagesocket_service'
 import { barChartPlotter } from '../helpers/chart_helper'
 import { getDefault } from '../helpers/module_helper'

cmd/dcrdata/public/js/controllers/time_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import humanize from '../helpers/humanize_helper'
 import globalEventBus from '../services/event_bus_service'
 

cmd/dcrdata/public/js/controllers/tx_controller.js

@@ -1,6 +1,6 @@
 import txInBlock from '../helpers/block_helper'
 import globalEventBus from '../services/event_bus_service'
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import humanize from '../helpers/humanize_helper'
 
 export default class extends Controller {

cmd/dcrdata/public/js/controllers/visualBlocks_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import dompurify from 'dompurify'
 import globalEventBus from '../services/event_bus_service'
 import ws from '../services/messagesocket_service'
@@ -23,7 +23,7 @@ function makeMempoolBlock (block) {
                     <a class="color-code" href="/mempool">Mempool</a>
                     <div class="mono" style="line-height: 1;">${Math.floor(block.Total)} DCR</div>
                     <span class="timespan">
-                        <span data-target="time.age" data-age="${block.Time}"></span>
+                        <span data-time-target="age" data-age="${block.Time}"></span>
                     </span>
                 </div>
                 <div class="block-rows">
@@ -62,7 +62,7 @@ function makeBlockSummary (blockHeight, totalSent, time) {
                 <a class="color-code" href="/block/${blockHeight}">${blockHeight}</a>
                 <div class="mono" style="line-height: 1;">${Math.floor(totalSent)} DCR</div>
                 <span class="timespan">
-                    <span data-target="time.age" data-age="${time}"></span>&nbsp;ago
+                    <span data-time-target="age" data-age="${time}"></span>&nbsp;ago
                 </span>
             </div>`
 }