JS: Define components in the bootstrap namespace

They were previously defined directly on `window` when using
`//=require bootstrap-sprockets`.

Author: glebm

README.md

@@ -47,8 +47,8 @@ Then, remove all the `*= require` and `*= require_tree` statements from the Sass
 
 Do not use `*= require` in Sass or your other stylesheets will not be able to access the Bootstrap mixins and variables.
 
-Bootstrap JavaScript depends on jQuery.
-If you're using Rails 5.1+, add the `jquery-rails` gem to your Gemfile:
+Bootstrap JavaScript can optionally use jQuery.
+If you're using Rails 5.1+, you can add add the `jquery-rails` gem to your Gemfile:
 
 ```ruby
 gem 'jquery-rails'

assets/javascripts/bootstrap-global-this-define.js

@@ -0,0 +1,6 @@
+// Set a `globalThis` so that bootstrap components are defined on window.bootstrap instead of window.
+window['bootstrap'] = {
+  Popper: window.Popper,
+  _originalGlobalThis: window['globalThis']
+};
+window['globalThis'] = window['bootstrap'];

assets/javascripts/bootstrap-global-this-undefine.js

@@ -0,0 +1,2 @@
+window['globalThis'] = window['bootstrap']._originalGlobalThis;
+window['bootstrap']._originalGlobalThis = null;

assets/javascripts/bootstrap-sprockets.js

@@ -1,3 +1,4 @@
+//= require ./bootstrap-global-this-define
 //= require ./bootstrap/dom/data
 //= require ./bootstrap/base-component
 //= require ./bootstrap/dom/event-handler
@@ -14,3 +15,4 @@
 //= require ./bootstrap/scrollspy
 //= require ./bootstrap/tab
 //= require ./bootstrap/toast
+//= require ./bootstrap-global-this-undefine

tasks/updater/js.rb

@@ -13,13 +13,26 @@ def update_javascript_assets
       log_processed "#{bootstrap_js_files * ' '}"
 
       log_status 'Updating javascript manifest'
-      manifest = ''
+      manifest = "//= require ./bootstrap-global-this-define\n"
       bootstrap_js_files.each do |name|
         name = name.gsub(/\.js$/, '')
         manifest << "//= require ./bootstrap/#{name}\n"
       end
+      manifest << "//= require ./bootstrap-global-this-undefine\n"
       dist_js = read_files('dist/js', %w(bootstrap.js bootstrap.min.js))
       {
+          'assets/javascripts/bootstrap-global-this-define.js' => <<~JS,
+            // Set a `globalThis` so that bootstrap components are defined on window.bootstrap instead of window.
+            window['bootstrap'] = {
+              Popper: window.Popper,
+              _originalGlobalThis: window['globalThis']
+            };
+            window['globalThis'] = window['bootstrap'];
+          JS
+          'assets/javascripts/bootstrap-global-this-undefine.js' => <<~JS,
+            window['globalThis'] = window['bootstrap']._originalGlobalThis;
+            window['bootstrap']._originalGlobalThis = null;
+          JS
           'assets/javascripts/bootstrap-sprockets.js' => manifest,
           'assets/javascripts/bootstrap.js'           => dist_js['bootstrap.js'],
           'assets/javascripts/bootstrap.min.js'       => dist_js['bootstrap.min.js'],