javascript

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["sentinel"]
  static values = {
    url: String

import React from 'react'

interface SkeletonProps {
  width?: string | number
  height?: string | number
  className?: string

<%= turbo_stream.prepend 'items' do %>
  <%= render @item %>
<% end %>

<turbo-stream action="reset_form" target="new_item_form"></turbo-stream>

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

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

<div data-controller="clipboard" data-clipboard-text-value="<%= invite_url(@invite) %>">
  <button type="button" data-action="clipboard#copy" class="rounded bg-gray-100 px-3 py-1">
    Copy invite link
  </button>
</div>

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = { keymap: Object }

  connect() {

import { StreamActions } from "@hotwired/turbo"

StreamActions.flash = function () {
  const container = document.getElementById("flashes")
  if (!container) return

// Configuration management with validation
const Joi = require('joi');

// Define schema for all environment variables
const envSchema = Joi.object({
  NODE_ENV: Joi.string()

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["field", "status"]
  static values = {
    key: String,

// 1. DANGEROUS: Never use innerHTML with user input
const userInput = '<img src=x onerror="alert('XSS')">';

// WRONG - vulnerable to XSS
document.getElementById('output').innerHTML = userInput;

// 1. Basic Custom Element
class MyButton extends HTMLElement {
  constructor() {
    super();

    // Attach shadow DOM

import { Turbo } from "@hotwired/turbo-rails"

Turbo.StreamActions.redirect = function () {
  const url = this.getAttribute("url")
  if (!url) return