Migrate to importmaps

Gemfile

@@ -22,7 +22,6 @@ gem 'view_component-contrib'
 gem 'debug', '>= 1.0.0'
 
 group :development do
-  gem 'jsbundling-rails'
   gem 'puma', '< 7'
   gem 'rubocop', '~> 1', require: false
   gem 'rubocop-rails', '~> 2'
@@ -36,5 +35,8 @@ end
 
 group :development, :test do
   gem 'dotenv'
+  gem 'importmap-rails', '~> 2.0'
   gem 'rspec-rails', '~> 6'
+  gem 'stimulus-rails', '~> 1.3'
+  gem 'turbo-rails', '~> 2'
 end

Gemfile.lock

@@ -134,12 +134,14 @@ GEM
     htmlentities (4.3.4)
     i18n (1.14.4)
       concurrent-ruby (~> 1.0)
+    importmap-rails (2.0.1)
+      actionpack (>= 6.0.0)
+      activesupport (>= 6.0.0)
+      railties (>= 6.0.0)
     io-console (0.7.2)
     irb (1.12.0)
       rdoc
       reline (>= 0.4.2)
-    jsbundling-rails (1.3.0)
-      railties (>= 6.0.0)
     json (2.7.2)
     language_server-protocol (3.17.0.3)
     loofah (2.22.0)
@@ -302,9 +304,15 @@ GEM
       sprockets (>= 3.0.0)
     sqlite3 (1.7.3)
       mini_portile2 (~> 2.8.0)
+    stimulus-rails (1.3.3)
+      railties (>= 6.0.0)
     stringio (3.1.0)
     thor (1.3.1)
     timeout (0.4.1)
+    turbo-rails (2.0.5)
+      actionpack (>= 6.0.0)
+      activejob (>= 6.0.0)
+      railties (>= 6.0.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.5.0)
@@ -336,7 +344,7 @@ DEPENDENCIES
   debug (>= 1.0.0)
   device_detector
   dotenv
-  jsbundling-rails
+  importmap-rails (~> 2.0)
   lookbook
   puma (< 7)
   ransack
@@ -347,6 +355,8 @@ DEPENDENCIES
   simplecov
   sprockets-rails
   sqlite3 (~> 1.4)
+  stimulus-rails (~> 1.3)
+  turbo-rails (~> 2)
   view_component
   view_component-contrib
 

app/javascript/bali/controllers/autocomplete-address-controller.js → app/assets/javascripts/bali/controllers/autocomplete-address-controller.js

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
-import GoogleMapsLoader from '../utils/google-maps-loader'
+import GoogleMapsLoader from 'bali/utils/google-maps-loader'
 
 // TODO: Add tests (Issue: #137)
 export class AutocompleteAddressController extends Controller {

app/javascript/bali/controllers/drawing-maps-controller.js → app/assets/javascripts/bali/controllers/drawing-maps-controller.js

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
-import { GoogleMapsLoader } from '..'
+import GoogleMapsLoader from 'bali/utils/google-maps-loader'
 
 export class DrawingMapsController extends Controller {
   static targets = ['map', 'polygonField']

app/javascript/bali/controllers/dynamic-fields-controller.js → app/assets/javascripts/bali/controllers/dynamic-fields-controller.js

@@ -1,11 +1,11 @@
 import { Controller } from '@hotwired/stimulus'
-import { getTimestamp } from '../utils/time'
+import { getTimestamp } from 'bali/utils/time'
 import {
   replaceInFragment,
   removeNonHiddenFormElements,
   previousSibling,
   nextSibling
-} from '../utils/domHelpers'
+} from 'bali/utils/domHelpers'
 
 // TODO: Add tests (Issue: #155)
 

app/javascript/bali/controllers/geocoder-maps-controller.js → app/assets/javascripts/bali/controllers/geocoder-maps-controller.js

@@ -1,5 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
-import { GoogleMapsLoader, formatters } from '..'
+import GoogleMapsLoader from 'bali/utils/google-maps-loader'
+import * as formatters from 'bali/utils/formatters'
 
 const TIJUANA_LAT = 32.5036383
 const TIJUANA_LNG = -117.0308968

app/javascript/bali/controllers/input-on-change-controller.js → app/assets/javascripts/bali/controllers/input-on-change-controller.js

@@ -1,6 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 import { get, post } from '@rails/request.js'
-import { getTimestamp } from '../utils/time'
+import { getTimestamp } from 'bali/utils/time'
 
 /**
  * InputOnChange Controller

app/javascript/bali/controllers/interact-controller.js → app/assets/javascripts/bali/controllers/interact-controller.js

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
-import useDispatch from '../utils/use-dispatch'
+import useDispatch from 'bali/utils/use-dispatch'
 
 const CLICK_DISTANCE_THRESHOLD = 6 // pixels
 const CLICK_DURATION_THRESHOLD = 500 // miliseconds

app/components/bali/bulk_actions/index.js

@@ -1,8 +1,7 @@
 import { Controller } from '@hotwired/stimulus'
-import { toInt } from '../../../javascript/bali/utils/formatters'
+import { toInt } from 'bali/utils/formatters'
 
 const IGNORED_TAG_NAMES = ['select', 'input']
-
 export class BulkActionsController extends Controller {
   static targets = [
     'bulkAction',

app/components/bali/chart/index.js

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
-import Chart from 'chart.js/auto'
+import { Chart, registerables } from 'chart.js'
 
 export class ChartController extends Controller {
   static targets = ['canvas']
@@ -26,6 +26,8 @@ export class ChartController extends Controller {
       this.displayPercentInTooltip(options)
     }
 
+    Chart.register(...registerables);
+
     this.chart = new Chart(element.getContext('2d'), {
       type: this.typeValue,
       data: this.chartData,

app/components/bali/drawer/index.js

@@ -1,4 +1,4 @@
-import { ModalController } from '../modal'
+import { ModalController } from 'bali/modal'
 
 export class DrawerController extends ModalController {
   async connect () {

app/components/bali/filters/controllers/filter-form-controller.js

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
-import { queryParams } from '../../../../javascript/bali/utils/form'
+import { queryParams } from 'bali/utils/form'
 
 export class FilterFormController extends Controller {
   static values = { textField: String }

app/components/bali/filters/controllers/popup-controller.js

@@ -1,6 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 import { createPopper } from '@popperjs/core'
-import useClickOutside from '../../../../javascript/bali/utils/use-click-outside'
+import useClickOutside from 'bali/utils/use-click-outside'
 
 export class PopupController extends Controller {
   static targets = ['container', 'button', 'openedInput']

app/components/bali/gantt_chart/gantt_foldable_item.js

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
-import useDispatch from '../../../javascript/bali/utils/use-dispatch'
+import useDispatch from 'bali/utils/use-dispatch'
 
 export class GanttFoldableItemController extends Controller {
   static values = {

app/components/bali/gantt_chart/index.js

@@ -1,9 +1,9 @@
 import { Controller } from '@hotwired/stimulus'
 import Sortable from 'sortablejs'
 import throttle from 'lodash.throttle'
-import useDispatch from '../../../javascript/bali/utils/use-dispatch'
-import { toBool, toInt } from '../../../javascript/bali/utils/formatters'
-import { addDaysToDate } from '../../../javascript/bali/utils/time'
+import useDispatch from 'bali/utils/use-dispatch'
+import { toBool, toInt } from 'bali/utils/formatters'
+import { addDaysToDate } from 'bali/utils/time'
 import { patch } from '@rails/request.js'
 import ConnectionLine from './connection_line'
 

app/components/bali/hover_card/index.js

@@ -1,6 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 import tippy from 'tippy.js'
-import useDispatch from '../../../javascript/bali/utils/use-dispatch'
+import useDispatch from 'bali/utils/use-dispatch'
 
 const ARROW_SVG = `
 <svg width="14" height="8" viewBox="0 0 14 8" fill="none">

app/components/bali/locations_map/index.js

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
-import { GoogleMapsLoader } from '../../../javascript/bali'
+import GoogleMapsLoader from 'bali/utils/google-maps-loader'
 import { MarkerClusterer } from '@googlemaps/markerclusterer'
 
 const TIJUANA_LAT = 32.5036383

app/components/bali/modal/index.js

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
-import { autoFocusInput } from '../../../javascript/bali/utils/form'
+import { autoFocusInput } from 'bali/utils/form'
 
 /**
  * Loads remote content into a modal window and handles form submission

app/components/bali/rich_text_editor/index.js

@@ -5,6 +5,7 @@ import useDefaults, {
   defaultTargets,
   toolbarExtensions
 } from './javascript/useDefaults'
+
 import useMarks, { marksTargets, toolbarMarks } from './javascript/useMarks'
 import useTable, { tableTargets } from './javascript/useTable'
 import useLink, { linkTargets } from './javascript/useLink'

app/components/bali/sortable_list/index.js

@@ -1,7 +1,7 @@
 import { Controller } from '@hotwired/stimulus'
 import Sortable from 'sortablejs'
 import { patch } from '@rails/request.js'
-import useDispatch from '../../../javascript/bali/utils/use-dispatch'
+import useDispatch from 'bali/utils/use-dispatch'
 
 export class SortableListController extends Controller {
   static values = {

app/components/bali/table/index.js

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
-import { toInt } from '../../../javascript/bali/utils/formatters'
+import { toInt } from 'bali/utils/formatters'
 
 export class TableController extends Controller {
   static targets = [

app/components/bali/timeago/index.js

@@ -1,7 +1,7 @@
 import { Controller } from '@hotwired/stimulus'
 import { formatDistanceToNow } from 'date-fns'
-import es from 'date-fns/locale/es'
-import en from 'date-fns/locale/en-US'
+import { es } from 'date-fns/locale/es'
+import { enUS } from 'date-fns/locale/en-US'
 
 export class TimeagoController extends Controller {
   static values = {
@@ -14,7 +14,8 @@ export class TimeagoController extends Controller {
 
   initialize () {
     this.isValid = true
-    this.locale = this.localeValue === 'es' ? es : en
+    this.locale = this.localeValue === 'es' ? es : enUS
+    window.locale = this.locale
     this.options = {
       includeSeconds: this.includeSecondsValue,
       addSuffix: this.addSuffixValue,

app/views/layouts/bali/application.html.erb

@@ -4,11 +4,10 @@
     <title>Bali</title>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-
     <%= stylesheet_link_tag "bali/application", media: "all" %>
+    <%= javascript_importmap_tags %>
   </head>
   <body>
-
     <%= yield %>
   </body>
 </html>

lib/bali/engine.rb

@@ -26,5 +26,18 @@ class Engine < ::Rails::Engine
     initializer 'Bali add app/components to assets paths' do |app|
       app.config.assets.paths << "#{root}/app/components"
     end
+
+    initializer 'Bali precompile hook' do |app|
+      if defined?(Sprockets)
+        [
+          root.join('app', 'components'),
+          root.join('app', 'assets', 'javascripts')
+        ].each do |dir_path|
+          Dir[File.join(dir_path, 'bali', '**', '*.js')].each do |path|
+            app.config.assets.precompile << path.gsub("#{dir_path.to_path}/", '')
+          end
+        end
+      end
+    end
   end
 end