{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.0.1",
    "@hotwired/turbo-rails": "^7.1.1",
    "autoprefixer": "^10.4.2",
    "esbuild": "^0.14.14",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.18"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.css -o ./app/assets/builds/application.css"
  }
}

//= link_tree ../images
//= link_tree ../builds

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"

// This file is auto-generated by ./bin/rails stimulus:manifest:update
// Run that command whenever you add a new controller or create them with
// ./bin/rails generate stimulus controllerName

import { application } from "./application"

import HelloController from "./hello_controller"
application.register("hello", HelloController)

module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js'
  ]
}

element.dispatchEvent(new CustomEvent("eventName", {
  detail: {
	// optional details
  },
}));

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  zoomIn() {
    this.dispatch('zoomIn', { target: document })
  }
}

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  handleZoomIn() {
    console.log('handleZoomIn')
  }
}

export default class extends Controller {
  zoomIn() {
    this.dispatch('updateScaleTarget', { target: document, detail: { scale: 1.5 } })
  }
}

export default class extends Controller {
  static targets = ['scale']

  updateScaleTarget(e) {
    this.scaleTarget.textContent = `${e.detail.scale}%`
  }
}

// Connects to data-controller="zoom1"
export default class extends Controller {
  zoomIn() {
    this.dispatch('zoomIn', {target: document, prefix: null})
  }
}

// Connects to data-controller="zoom2"
export default class extends Controller {
  zoomIn() {
    this.dispatch('zoomIn', {target: document, prefix: null})
  }
}