Rails 7 esbuild - how to manage global javascript functions?-CodePudding

My goal is to create global functions that I can use throughout my application. I found this answer but couldn't really apply it. The most basic gist of what I am wanting to do is:

# app/javascript/application.js
  // define global function, but don't run it
  function removeFlash(){
    // do stuff
  }

# app/views/.../update.js.slim
|
  // do stuff
  // use the global function after other code is ran
  removeFlash()

I have a rails 7 esbuild created by doing rails new testapp -j esbuild -d postgresql --css bootstrap

I then added a few modules such as jquery and flatpickr via yarn install. My application.js file looks like:

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"
import './vendors/jquery'
import {} from 'jquery-ujs'
import flatpickr from "flatpickr"

$(document).ready(function(){
  console.log('hooray')
})

Within the application.js file I want to define a number of global functions so I can call them whenever needed throughout other files rather than repeating the same code over and over.

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"
import './vendors/jquery'
import {} from 'jquery-ujs'
import flatpickr from "flatpickr"

function addFlash(msg){
  // do stuff
}

function removeFlash(){
  // do stuff
}

function performTask(){
  // do stuff
}

Since my forms are all remote and happen via js, I have multiple files that will need to run that those functions, such as:

# app/views/objects/create.js.slim
- if @obj.errors.any?
  ...
- else
  |
    $("#obj-list").append("#{escape_javascript(render 'obj_row', obj: @obj)}");
    $(".close-modal").click();
    addFlash("Object successfully created.");
    removeFlash();

And this would be duplicated for the update as well as other records.

Apart from just adding a javascript: tag to the bottom of the app/views/layouts/application.html.slim file and declaring all the functions there, I don't understand what the best practice is for handling the above situations.

# app/views/layouts/application.html.slim
doctype html
html
  head
    title TestApp
    ...
  body
    = yield

javascript:
  function addFlash(msg){
    // do stuff
  }
  ...

What is the best way or standard practice to create and use global functions?

CodePudding user response：

A better alternative to the javascript: tag in the views would be to put the function in the window object, like this:

// app/javascript/application.js
  window.removeFlash = function() {
    // ...
  }

Then everywhere you use it, you have to call it as window.removeFlash().