JS: Define components in the `bootstrap` namespace

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

5 files changed, 26 insertions, 3 deletions

diff --git a/README.md b/README.md
index 0e18434..a90d16e 100644
--- a/README.md
+++ b/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'
diff --git a/assets/javascripts/bootstrap-global-this-define.js b/assets/javascripts/bootstrap-global-this-define.js
new file mode 100644
index 0000000..82c26f5
--- /dev/null
+++ b/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'];
diff --git a/assets/javascripts/bootstrap-global-this-undefine.js b/assets/javascripts/bootstrap-global-this-undefine.js
new file mode 100644
index 0000000..6f96eb1
--- /dev/null
+++ b/assets/javascripts/bootstrap-global-this-undefine.js
@@ -0,0 +1,2 @@
+window['globalThis'] = window['bootstrap']._originalGlobalThis;
+window['bootstrap']._originalGlobalThis = null;
diff --git a/assets/javascripts/bootstrap-sprockets.js b/assets/javascripts/bootstrap-sprockets.js
index 8b251b1..fab8c2f 100644
--- a/assets/javascripts/bootstrap-sprockets.js
+++ b/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
diff --git a/tasks/updater/js.rb b/tasks/updater/js.rb
index 4337170..60760a9 100644
--- a/tasks/updater/js.rb
+++ b/tasks/updater/js.rb
@@ -13,13 +13,26 @@ class Updater
       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'],