JavaScript

Jumpstart Pro leverages Stimulus.js for a variety of interactive components. Feel free to reach for any front-end framework you may need, just keep in mind that you'll want it to be Turbo compatible.

Bundling JavaScript

Jumpstart Pro uses Propshaft which is the default Rails asset pipeline library.

When developing your application, Jumpstart Pro defaults to having a configuration setup that will watch for changes in your views, JavaScript, or stylesheets and reload the page when it detects changes. This helps speed up your development process by not having to manually refresh the page every time you make a change or run commands to rebuild your assets.

JavaScript Packages

Jumpstart Pro comes with a few JavaScript packages pre-installed. You can find them in config/importmap.rb file.

One of the packages is our own tailwindcss-stimulus-components package which is a set of StimulusJS controllers and components for TailwindCSS apps similar to Bootstrap JS components. This package has components of it's own which you can find links to in the Components section of the README in the repository.

Jumpstart Pro has some of the controllers from this package already imported in the app/javascript/controllers/index.js file by default: 

import { Dropdown, Modal, Tabs, Popover, Toggle, Slideover } from  "tailwindcss-stimulus-components"
If you need to import any of the remaining controllers from this package, you can do so by adding to that line. The controllers are all listed here.

The StimulusJS controllers from the tailwindcss-stimulus-components package and the components from Jumpstart Pro or any of your own code can be wired up together easily, saving you time and effort. For example, it can be used to add show and hide functionality to the Jumpstart Pro alert components.

Adding Additional JavaScript Packages

Adding new JavaScript packages to your application is easy. You can use the bin/importmap pin package command to add new packages to your application. For example, if you wanted to add the SortableJS package to your application, you could run the following command: 

bin/importmap pin sortablejs

Once you have run the above, you can then import the package in your JavaScript file with: 

import Sortable from 'sortablejs'