Aprimore seu aplicativo Rails 7 com Stimulus.js e integração JavaScript

Stimulus.js é uma estrutura JavaScript modesta que aumenta seu HTML. É o companheiro perfeito para a funcionalidade integrada do Rails. Nesta postagem, exploraremos como usar Stimulus.js para funcionalidade JavaScript, integrá-lo com outras bibliotecas JavaScript e gerenciar dependências JavaScript de maneira eficaz usando Importmap.

Pré-requisitos

Antes de começarmos, certifique-se de ter o seguinte:

• Configuração do aplicativo Rails 7
• Conhecimento básico de JavaScript e Rails

Configurando Stimulus.js no Rails 7

Rails 7 vem com suporte padrão para Stimulus.js. Para começar, certifique-se de que o Stimulus esteja incluído em seu aplicativo executando:

rails new my_app
cd my_app

Você pode encontrar os controladores de estímulo em app/javascript/controllers.

Criando um controlador de estímulo

Vamos criar um controlador de estímulo para lidar com um simples evento de clique. Execute o seguinte comando:

rails generate stimulus hello

Isso irá gerar um novo controlador hello_controller.js em app/javascript/controllers. Abra o arquivo e adicione o seguinte código:

// app/javascript/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["output"]

  connect() {
    this.outputTarget.textContent = 'Hello, Stimulus!'
  }

  greet() {
    this.outputTarget.textContent = 'Hello, World!'
  }
}

Em seu HTML, use o controlador de estímulo:

  

  Greet

Quando o botão é clicado, o texto muda para "Hello, World!".

Integração com outras bibliotecas JavaScript

Stimulus.js pode funcionar perfeitamente com outras bibliotecas JavaScript. Por exemplo, vamos integrar jQuery com Stimulus.js.

Primeiro, adicione jQuery usando Importmap:

Adicione jQuery ao seu config/importmap.rb:

pin "jquery", to: "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"

Em seguida, importe o jQuery em seu controlador de estímulo:

// app/javascript/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"
import $ from "jquery"

export default class extends Controller {
  static targets = ["output"]

  connect() {
    this.outputTarget.textContent = 'Hello, Stimulus!'
  }

  greet() {
    $(this.outputTarget).fadeOut().fadeIn().text('Hello, jQuery!')
  }
}

Gerenciando dependências de JavaScript

Gerenciar dependências de JavaScript no Rails 7 é simples com Importmap. Aqui estão algumas dicas:

• Adicionar uma biblioteca: Use o pin "library_name", para: "library_url" em seu config/importmap.rb para adicionar uma nova biblioteca.
• Remover uma biblioteca: Remova a linha correspondente de config/importmap.rb para remover uma biblioteca existente.
• Atualizar bibliotecas: Atualize os URLs em config/importmap.rb para as versões mais recentes.
• Verifique bibliotecas desatualizadas: Visite os URLs em config/importmap.rb para ver se versões mais recentes estão disponíveis.

Você também pode adicionar arquivos JavaScript personalizados ao seu projeto. Coloque-os na pasta app/javascript e importe-os onde necessário.

Conclusão

Stimulus.js fornece uma maneira poderosa e simples de adicionar funcionalidade JavaScript ao seu aplicativo Rails. Ao integrá-lo com outras bibliotecas JavaScript, você pode criar uma experiência de usuário rica e dinâmica. O gerenciamento adequado de suas dependências de JavaScript garante que seu aplicativo permaneça sustentável e atualizado.

Boa codificação!