fix: actualizar stimulus

app/javascript/controllers/array_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
   static targets = ["item", "search", "current", "placeholder"];

app/javascript/controllers/details_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
   static targets = [];

app/javascript/controllers/dropdown_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";
 
 // https://getbootstrap.com/docs/4.6/components/dropdowns/#single-button
 export default class extends Controller {

app/javascript/controllers/enter_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
   /*

app/javascript/controllers/file_preview_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 import bsCustomFileInput from "bs-custom-file-input";
 
 document.addEventListener("turbolinks:load", () => {

app/javascript/controllers/form_validation_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
   static targets = ["invalid", "submitting"];

app/javascript/controllers/geo_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 
 require("leaflet/dist/leaflet.css")
 import L from 'leaflet'

app/javascript/controllers/htmx_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";
 
 /*
  * Un controlador que imita a HTMX

app/javascript/controllers/index.js

@@ -1,8 +1,8 @@
 // Load all the controllers within this directory and all subdirectories. 
 // Controller files must be named *_controller.js.
 
-import { Application } from "stimulus"
+import { Application } from "@hotwired/stimulus"
-import { definitionsFromContext } from "stimulus/webpack-helpers"
+import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers"
 
 const application = Application.start()
 const context = require.context("controllers", true, /_controller\.js$/)

app/javascript/controllers/modal_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
   static targets = ["modal", "backdrop"];

app/javascript/controllers/non_geo_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 
 require("leaflet/dist/leaflet.css")
 import L from 'leaflet'

app/javascript/controllers/notification_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";
 
 /*
  * Solo se puede mostrar una notificación a la vez

app/javascript/controllers/reorder_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from '@hotwired/stimulus'
 
 /*
  * Permite reordenar las filas de una tabla.

app/javascript/controllers/required_checkbox_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";
 
 /*
  * Para poder indicar que al menos uno del grupo de checkboxes es

app/javascript/controllers/select_all_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
   static targets = ["toggle", "input"];

app/javascript/controllers/unsaved_changes_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
   connect() {

app/views/bootstrap/_modal.haml

@@ -28,8 +28,8 @@
 -# XXX: Necesario para poder generar todas las demás
 = yield
 
-.modal.fade{ tabindex: -1, aria: { hidden: 'true' }, data: { target: 'modal.modal', action: local_assigns[:keydown_actions].join(' ') } }
+.modal.fade{ tabindex: -1, aria: { hidden: 'true' }, data: { 'modal-target': 'modal', action: local_assigns[:keydown_actions].join(' ') } }
-  .modal-backdrop.fade{ data: { target: 'modal.backdrop', action: local_assigns[:hide_actions].join(' ') } }
+  .modal-backdrop.fade{ data: { 'modal-target': 'backdrop', action: local_assigns[:hide_actions].join(' ') } }
   .modal-dialog.modal-dialog-scrollable.modal-dialog-centered.modal-lg
     .modal-content{ **local_assigns[:modal_content_attributes] }
       - if (header = yield(:"#{id}_header")).present?

app/views/components/_dropdown.haml

@@ -18,7 +18,7 @@
       toggle: 'true',
       display: 'static',
       action: 'dropdown#toggle',
-      target: 'dropdown.button'
+      'dropdown-target': 'button'
     },
     aria: {
       expanded: 'false'
@@ -28,7 +28,7 @@
   .dropdown-menu{
     class: dropdown_classes,
     data: {
-      target: 'dropdown.dropdown'
+      'dropdown-target': 'dropdown'
     }
   }
     = yield

app/views/components/_dropdown_button.haml

@@ -3,4 +3,4 @@
   @param value [String]
   @param text [String]
 - local_assigns.delete(:text)
-%button.dropdown-item{type: 'submit', data: { target: 'dropdown.item' }, name: name, value: value, **local_assigns.compact }= text
+%button.dropdown-item{type: 'submit', data: { 'dropdown-target': 'item' }, name: name, value: value, **local_assigns.compact }= text

app/views/components/_dropdown_item.haml

@@ -2,4 +2,4 @@
   @param :text [String] Contenido del link
   @param :path [String,Hash] Link
 - local_assigns[:class] = "dropdown-item #{local_assigns[:class]}"
-= link_to text, path, class: local_assigns[:class], data: { target: 'dropdown.item' }
+= link_to text, path, class: local_assigns[:class], data: { 'dropdown-target': 'item' }

app/views/components/_select_all.haml

@@ -1,4 +1,4 @@
 -#
   @param id [String]
-= render 'components/checkbox', id: id, data: { action: 'select-all#toggle', target: 'select-all.toggle', **local_assigns.compact } do
+= render 'components/checkbox', id: id, data: { action: 'select-all#toggle', 'select-all-target': 'toggle', **local_assigns.compact } do
   %span.sr-only= t('.label')

app/views/moderation_queue/_account.haml

@@ -3,7 +3,7 @@
 
 .row.no-gutters.pt-2
   .col-1
-    = render 'components/checkbox', id: actor_moderation.id, form: form, name: 'actor_moderation[]', value: actor_moderation.id, data: { target: 'select-all.input' }
+    = render 'components/checkbox', id: actor_moderation.id, form: form, name: 'actor_moderation[]', value: actor_moderation.id, data: { 'select-all-target': 'input' }
   .col-11
     - cache [actor_moderation, profile] do
       %h4

app/views/moderation_queue/_comment.haml

@@ -22,7 +22,7 @@
 
 .row.no-gutters
   .col-1
-    = render 'components/checkbox', id: activity_pub.id, name: 'activity_pub[]', value: activity_pub.id, data: { target: 'select-all.input' }, form: form
+    = render 'components/checkbox', id: activity_pub.id, name: 'activity_pub[]', value: activity_pub.id, data: { 'select-all-target': 'input' }, form: form
   .col-11
     - cache [activity_pub, comment] do
       .d-flex.flex-row.align-items-center.justify-content-between

app/views/moderation_queue/_instance.haml

@@ -4,7 +4,7 @@
 
 .row.no-gutters.pt-2
   .col-1
-    = render 'components/checkbox', id: instance.hostname, form: form, name: 'instance_moderation[]', value: instance_moderation.id, data: { target: 'select-all.input' }
+    = render 'components/checkbox', id: instance.hostname, form: form, name: 'instance_moderation[]', value: instance_moderation.id, data: { 'select-all-target': 'input' }
   .col-11
     - cache [instance_moderation, instance] do
       %h4

app/views/posts/_required_checkbox.haml

@@ -15,5 +15,5 @@
   - local_assigns[:feedback] ||= t('.required')
   - local_assigns[:type] ||= 'checkbox'
 
-  %input.form-control.d-none{ type: local_assigns[:type], name: name, data: { target: 'required-checkbox.required', action: 'invalid->required-checkbox#invalid' }, required: initial }
+  %input.form-control.d-none{ type: local_assigns[:type], name: name, data: { 'required-checkbox-target': 'required', action: 'invalid->required-checkbox#invalid' }, required: initial }
   .invalid-feedback.mt-0= local_assigns[:feedback]

app/views/posts/attributes/_file.haml

@@ -4,11 +4,11 @@
       - when %r{\Avideo/}
         = video_tag url_for(metadata.static_file),
           controls: true, class: 'img-fluid',
-          data: { target: 'file-preview.preview' }
+          data: { 'file-preview-target': 'preview' }
       - when %r{\Aaudio/}
         = audio_tag url_for(metadata.static_file),
           controls: true, class: 'img-fluid',
-          data: { target: 'file-preview.preview' }
+          data: { 'file-preview-target': 'preview' }
       - when 'application/pdf'
         %iframe{ src: url_for(metadata.static_file) }
       - else
@@ -27,7 +27,7 @@
       **field_options(attribute, metadata, required: (metadata.required && !metadata.path?)),
       class: "custom-file-input #{invalid(post, attribute)}",
       lang: locale,
-      data: { target: 'file-preview.input', action: 'file-preview#update' })
+      data: { 'file-preview-target': 'input', action: 'file-preview#update' })
     = label_tag "#{base}_#{attribute}_path",
       post_label_t(attribute, :path, post: post), class: 'custom-file-label'
     = render 'posts/attribute_feedback',

app/views/posts/attributes/_geo.haml

@@ -10,7 +10,7 @@
       = text_field(*field_name_for(base, attribute, :lat),
         value: metadata.value['lat'],
         **field_options(attribute, metadata),
-        data: { target: 'geo.lat' })
+        data: { 'geo-target': 'lat' })
       = render 'posts/attribute_feedback',
         post: post, attribute: [attribute, :lat], metadata: metadata
   .col
@@ -20,8 +20,8 @@
       = text_field(*field_name_for(base, attribute, :lng),
         value: metadata.value['lng'],
         **field_options(attribute, metadata),
-        data: { target: 'geo.lng' })
+        data: { 'geo-target': 'lng' })
       = render 'posts/attribute_feedback',
         post: post, attribute: [attribute, :lng], metadata: metadata
   .col-12.mb-3
-    %div{ data: { target: 'geo.map' }, style: 'height: 250px' }
+    %div{ data: { 'geo-target': 'map' }, style: 'height: 250px' }

app/views/posts/attributes/_image.haml

@@ -3,7 +3,7 @@
     = image_tag url_for(metadata.static_file),
       alt: metadata.value['description'],
       class: 'img-fluid',
-      data: { target: 'file-preview.preview' }
+      data: { 'file-preview-target': 'preview' }
 
     -# Mantener el valor si no enviamos ninguna imagen
     = hidden_field_tag "#{base}[#{attribute}][path]", metadata.value['path']
@@ -16,7 +16,7 @@
     = image_tag '',
       alt: metadata.value['description'],
       class: 'img-fluid',
-      data: { target: 'file-preview.preview' }
+      data: { 'file-preview-target': 'preview' }
 
   .custom-file
     = file_field(*field_name_for(base, attribute, :path),
@@ -24,7 +24,7 @@
       class: "custom-file-input #{invalid(post, attribute)}",
       accept: ActiveStorage.web_image_content_types.join(','),
       lang: locale,
-      data: { target: 'file-preview.input', action: 'file-preview#update' })
+      data: { 'file-preview-target': 'input', action: 'file-preview#update' })
     = label_tag "#{base}_#{attribute}_path",
       post_label_t(attribute, :path, post: post), class: 'custom-file-label'
     = render 'posts/attribute_feedback',

app/views/posts/attributes/_new_array.haml

@@ -8,7 +8,7 @@
   controllers << 'required-checkbox' if metadata.required
 
 %div{ data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } }
-  %template{ data: { target: 'array.placeholder' } }
+  %template{ data: { 'array-target': 'placeholder' } }
     .col.mb-3{ 'aria-hidden': 'true' }
       %span.placeholder.w-100
 
@@ -33,7 +33,7 @@
 
     Para poder cancelar, mantenemos el estado original y desactivamos
     o activamos los ítemes según estén incluidos en esa lista o no.
-  %ul.placeholder-glow{ data: { target: 'array.current' } }
+  %ul.placeholder-glow{ data: { 'array-target': 'current' } }
     - metadata.value.each do |value|
       = render 'posts/new_array_value', value: value
 
@@ -42,14 +42,14 @@
       .form-group.flex-grow-1.mb-0
         = label_tag id, post_label_t(attribute, post: post), class: 'mb-0'
         %small.feedback.form-text.text-muted.mt-0.mb-1= post_help_t(metadata.name, post: post)
-        %input.form-control{ data: { target: 'array.search', action: 'input->array#search keydown->enter#prevent' }, type: 'search', placeholder: t('.filter') }
+        %input.form-control{ data: { 'array-target': 'search', action: 'input->array#search keydown->enter#prevent' }, type: 'search', placeholder: t('.filter') }
 
     - content_for :"#{id}_body" do
       .form-group.mb-0{ id: "#{id}_body" }
         -# Eliminamos las tildes para poder buscar independientemente de cómo se escriba.
         - metadata.values.each do |value|
           = render 'targets/array/item', value: value, class: 'mb-2' do
-            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: value, checked: metadata.value.include?(value), content: value, data: { action: 'required-checkbox#change', target: 'required-checkbox.checkbox' }
+            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: value, checked: metadata.value.include?(value), content: value, data: { action: 'required-checkbox#change', 'required-checkbox-target': 'checkbox' }
 
     - content_for :"#{id}_footer" do
       .input-group.w-auto.flex-grow-1.my-0

app/views/posts/attributes/_new_belongs_to.haml

@@ -21,7 +21,7 @@
   controllers << 'required-checkbox' if metadata.required
 
 %div{ id: modal_id, data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } }
-  %template{ data: { target: 'array.placeholder' } }
+  %template{ data: { 'array-target': 'placeholder' } }
     .col.p-3{ 'aria-hidden': 'true' }
       %span.placeholder.w-100
 
@@ -44,16 +44,16 @@
 
     Para poder cancelar, mantenemos el estado original y desactivamos
     o activamos los ítemes según estén incluidos en esa lista o no.
-  .row.no-gutters.placeholder-glow{ data: { target: 'array.current' } }
+  .row.no-gutters.placeholder-glow{ data: { 'array-target': 'current' } }
     -# @todo issue-7537
     - if !metadata.empty? && (indexed_post = site.indexed_posts.find_by(post_id: metadata.value))
-      = render 'posts/new_related_post', post: indexed_post
+      = render 'posts/new_related_post', post: indexed_post, attribute: metadata.type
 
   = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'], keydown_actions: %w[keydown->array#cancelWithEscape] do
     - content_for :"#{id}_header" do
       .form-group.flex-grow-1.mb-0
         = label_tag id, post_label_t(attribute, post: post)
-        %input.form-control{ data: { target: 'array.search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }
+        %input.form-control{ data: { 'array-target': 'search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }
 
     - content_for :"#{id}_body" do
       .form-group.mb-0{ id: value_list_id }

app/views/posts/attributes/_new_has_and_belongs_to_many.haml

@@ -21,7 +21,7 @@
   controllers << 'required-checkbox' if metadata.required
 
 %div{ id: modal_id, data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } }
-  %template{ data: { target: 'array.placeholder' } }
+  %template{ data: { 'array-target': 'placeholder' } }
     .col.p-3{ 'aria-hidden': 'true' }
       %span.placeholder.w-100
 
@@ -44,23 +44,23 @@
 
     Para poder cancelar, mantenemos el estado original y desactivamos
     o activamos los ítemes según estén incluidos en esa lista o no.
-  .row.no-gutters.placeholder-glow{ data: { target: 'array.current' } }
+  .row.no-gutters.placeholder-glow{ data: { 'array-target': 'current' } }
     -# @todo issue-7537
     - metadata.value.each do |uuid|
       - if (indexed_post = site.indexed_posts.find_by(post_id: uuid))
-        = render 'posts/new_related_post', post: indexed_post
+        = render 'posts/new_related_post', post: indexed_post, attribute: metadata.type
 
   = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'], keydown_actions: %w[keydown->array#cancelWithEscape] do
     - content_for :"#{id}_header" do
       .form-group.flex-grow-1.mb-0
         = label_tag id, post_label_t(attribute, post: post)
-        %input.form-control{ data: { target: 'array.search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }
+        %input.form-control{ data: { 'array-target': 'search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }
 
     - content_for :"#{id}_body" do
       .form-group.mb-0{ id: value_list_id }
         - metadata.values.each_pair do |value, uuid|
           = render 'targets/array/item', value: uuid, 'send-value': uuid, 'human-value': value, class: 'mb-2' do
-            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: uuid, checked: metadata.value.include?(uuid), content: value, data: { action: 'required-checkbox#change', target: 'required-checkbox.checkbox' }
+            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: uuid, checked: metadata.value.include?(uuid), content: value, data: { action: 'required-checkbox#change', 'required-checkbox-target': 'checkbox' }
 
     -#
       Según la definición del campo, si hay un filtro, tenemos que poder

app/views/posts/attributes/_new_has_many.haml

@@ -21,7 +21,7 @@
   controllers << 'required-checkbox' if metadata.required
 
 %div{ id: modal_id, data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } }
-  %template{ data: { target: 'array.placeholder' } }
+  %template{ data: { 'array-target': 'placeholder' } }
     .col.p-3{ 'aria-hidden': 'true' }
       %span.placeholder.w-100
 
@@ -44,23 +44,23 @@
 
     Para poder cancelar, mantenemos el estado original y desactivamos
     o activamos los ítemes según estén incluidos en esa lista o no.
-  .row.no-gutters.placeholder-glow{ data: { target: 'array.current' } }
+  .row.no-gutters.placeholder-glow{ data: { 'array-target': 'current' } }
     -# @todo issue-7537
     - metadata.value.each do |uuid|
       - if (indexed_post = site.indexed_posts.find_by(post_id: uuid))
-        = render 'posts/new_related_post', post: indexed_post
+        = render 'posts/new_related_post', post: indexed_post, attribute: metadata.type
 
   = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'], keydown_actions: %w[keydown->array#cancelWithEscape] do
     - content_for :"#{id}_header" do
       .form-group.flex-grow-1.mb-0
         = label_tag id, post_label_t(attribute, post: post)
-        %input.form-control{ data: { target: 'array.search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }
+        %input.form-control{ data: { 'array-target': 'search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }
 
     - content_for :"#{id}_body" do
       .form-group.mb-0{ id: value_list_id }
         - metadata.values.each_pair do |value, uuid|
           = render 'targets/array/item', value: uuid, 'send-value': uuid, 'human-value': value, class: 'mb-2' do
-            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: uuid, checked: metadata.value.include?(uuid), content: value, data: { action: 'required-checkbox#change', target: 'required-checkbox.checkbox' }
+            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: uuid, checked: metadata.value.include?(uuid), content: value, data: { action: 'required-checkbox#change', 'required-checkbox-target': 'checkbox' }
 
     -#
       Según la definición del campo, si hay un filtro, tenemos que poder

app/views/posts/attributes/_new_predefined_array.haml

@@ -10,7 +10,7 @@
   controllers << 'required-checkbox' if metadata.required
 
 %div{ data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } }
-  %template{ data: { target: 'array.placeholder' } }
+  %template{ data: { 'array-target': 'placeholder' } }
     .col.mb-3{ 'aria-hidden': 'true' }
       %span.placeholder.w-100
 
@@ -33,7 +33,7 @@
 
     Para poder cancelar, mantenemos el estado original y desactivamos
     o activamos los ítemes según estén incluidos en esa lista o no.
-  %ul.placeholder-glow{ data: { target: 'array.current' } }
+  %ul.placeholder-glow{ data: { 'array-target': 'current' } }
     - metadata.values.invert.slice(*metadata.value).each_value do |value|
       = render 'posts/new_array_value', value: value
 
@@ -41,14 +41,14 @@
     - content_for :"#{id}_header" do
       .form-group.flex-grow-1.mb-0
         = label_tag id, post_label_t(attribute, post: post)
-        %input.form-control{ data: { target: 'array.search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }
+        %input.form-control{ data: { 'array-target': 'search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }
 
     - content_for :"#{id}_body" do
       .form-group.mb-0{ id: "#{id}_body" }
         -# Eliminamos las tildes para poder buscar independientemente de cómo se escriba
         - metadata.values.each_pair do |value, key|
           = render 'targets/array/item', class: 'mb-2', value: key, 'human-value': value do
-            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: key, checked: metadata.value.include?(key), content: value, data: { action: 'required-checkbox#change', target: 'required-checkbox.checkbox' }
+            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: key, checked: metadata.value.include?(key), content: value, data: { action: 'required-checkbox#change', 'required-checkbox-target': 'checkbox' }
 
     - content_for :"#{id}_footer" do
       -# Alinear los botones a la derecha

app/views/posts/attributes/_new_predefined_value.haml

@@ -21,7 +21,7 @@
   controllers << 'required-checkbox' if metadata.required
 
 %div{ id: modal_id, data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } }
-  %template{ data: { target: 'array.placeholder' } }
+  %template{ data: { 'array-target': 'placeholder' } }
     .col.p-3{ 'aria-hidden': 'true' }
       %span.placeholder.w-100
 
@@ -44,7 +44,7 @@
 
     Para poder cancelar, mantenemos el estado original y desactivamos
     o activamos los ítemes según estén incluidos en esa lista o no.
-  %ul.list-unstyled.px-3.font-weight-bold.placeholder-glow{ data: { target: 'array.current' } }
+  %ul.list-unstyled.px-3.font-weight-bold.placeholder-glow{ data: { 'array-target': 'current' } }
     - unless metadata.empty?
       = render 'posts/new_array_value', value: metadata.to_s
 
@@ -52,7 +52,7 @@
     - content_for :"#{id}_header" do
       .form-group.flex-grow-1.mb-0
         = label_tag id, post_label_t(attribute, post: post)
-        %input.form-control{ data: { target: 'array.search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }
+        %input.form-control{ data: { 'array-target': 'search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }
 
     - content_for :"#{id}_body" do
       .form-group.mb-0{ id: value_list_id }

app/views/posts/attributes/_non_geo.haml

@@ -1,5 +1,5 @@
 .row{ data: { controller: 'non-geo', site: site.url } }
-  .d-none{ hidden: true, data: { target: 'non-geo.overlay' }}
+  .d-none{ hidden: true, data: { 'non-geo-target': 'overlay' }}
   .col-12.mb-3
     %p.mb-0= post_label_t(attribute, post: post)
     %p= post_label_t(attribute, post: post)
@@ -12,7 +12,7 @@
       = text_field(*field_name_for(base, attribute, :lat),
         value: metadata.value['lat'],
         **field_options(attribute, metadata),
-        data: { target: 'non-geo.lat' })
+        data: { 'non-geo-target': 'lat' })
       = render 'posts/attribute_feedback',
         post: post, attribute: [attribute, :lat], metadata: metadata
   .col
@@ -22,8 +22,8 @@
       = text_field(*field_name_for(base, attribute, :lng),
         value: metadata.value['lng'],
         **field_options(attribute, metadata),
-        data: { target: 'non-geo.lng' })
+        data: { 'non-geo-target': 'lng' })
       = render 'posts/attribute_feedback',
         post: post, attribute: [attribute, :lng], metadata: metadata
   .col-12.mb-3
-    %div{ data: { target: 'non-geo.map' }, style: 'height: 250px' }
+    %div{ data: { 'non-geo-target': 'map' }, style: 'height: 250px' }

app/views/posts/index.haml

@@ -1,7 +1,7 @@
 - reorder_allowed = policy(@site).reorder?
 - if reorder_allowed
   - reorder_controller = { controller: 'reorder' }
-  - reorder_target = { target: 'reorder.row' }
+  - reorder_target = { 'reorder-target': 'row' }
 - else
   - reorder_target = reorder_controller = {}
 
@@ -85,7 +85,7 @@
                       = submit_tag t('posts.reorder.submit'), class: 'btn btn-secondary'
                       %button.btn.btn-secondary{ data: { action: 'reorder#unselect' } }
                         = t('posts.reorder.unselect')
-                        %span.badge{ data: { target: 'reorder.counter' } } 0
+                        %span.badge{ data: { 'reorder-target': 'counter' } } 0
                       %button.btn.btn-secondary{ data: { action: 'reorder#up' } }= t('posts.reorder.up')
                       %button.btn.btn-secondary{ data: { action: 'reorder#down' } }= t('posts.reorder.down')
                       %button.btn.btn-secondary{ data: { action: 'reorder#top' } }= t('posts.reorder.top')

app/views/targets/array/_item.haml

@@ -21,4 +21,4 @@
   data[:'send-value'] = local_assigns.delete(:'send-value')
   data[:'searchable-value'] = local_assigns.delete(:'searchable-value')
 
-%div{ **local_assigns, data: { target: 'array.item', value: value, **data } }= yield
+%div{ **local_assigns, data: { 'array-target': 'item', value: value, **data } }= yield

package.json

@@ -9,6 +9,8 @@
     "@babel/plugin-transform-runtime": "^7.12.17",
     "@babel/preset-env": "^7.12.17",
     "@babel/preset-typescript": "~7.12",
+    "@hotwired/stimulus": "^3.2.2",
+    "@hotwired/stimulus-webpack-helpers": "^1.0.1",
     "@rails/actiontext": "^6.0.0",
     "@rails/activestorage": "^6.1.3-1",
     "@rails/ujs": "^6.1.3-1",

yarn.lock

@@ -1841,6 +1841,16 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
   integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
 
+"@hotwired/stimulus-webpack-helpers@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@hotwired/stimulus-webpack-helpers/-/stimulus-webpack-helpers-1.0.1.tgz#4cd74487adeca576c9865ac2b9fe5cb20cef16dd"
+  integrity sha512-wa/zupVG0eWxRYJjC1IiPBdt3Lruv0RqGN+/DTMmUWUyMAEB27KXmVY6a8YpUVTM7QwVuaLNGW4EqDgrS2upXQ==
+
+"@hotwired/stimulus@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.2.2.tgz#071aab59c600fed95b97939e605ff261a4251608"
+  integrity sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A==
+
 "@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"