Set jquery as external to allow cdn version plugin attachment (#179)

src/js/index.js

@@ -1,29 +1,41 @@
-require('jquery/dist/jquery');
-require('popper.js/dist/umd/popper');
-require("bootstrap/dist/js/bootstrap.bundle");
-
-
 /**
  * This file should be edited in ./src/js/index.js. After bundling the resulting file in ./pydata_sphinx_theme/static/js/index.js should never be manually changed.
  * Edit ./src/js/index.js and run yarn build:dev or yarn build:production.
  */
 
-// TOC sidebar - add "active" class to parent list
-//
-// Bootstrap's scrollspy adds the active class to the <a> link,
-// but for the automatic collapsing we need this on the parent list item.
-//
-// The event is triggered on "window" (and not the nav item as documented),
-// see https://github.com/twbs/bootstrap/issues/20086
-$(window).on('activate.bs.scrollspy', function() {
-  const navLinks = document.querySelectorAll('#bd-toc-nav a');
+/* Sphinx injects the html output with jquery and other javascript files.
+ * To enable Popper.js (and other jQuery plugins) to hook into the same instancce of jQuery,
+ * jQuery is defined as a Webpack external, thus this import uses the externally defined jquery dependency.
+ */
+import 'jquery';
+
+import 'popper.js';
+import 'bootstrap';
+
+import './../scss/index.scss';
+
+function addTOCInteractivity() {
+  // TOC sidebar - add "active" class to parent list
+  //
+  // Bootstrap's scrollspy adds the active class to the <a> link,
+  // but for the automatic collapsing we need this on the parent list item.
+  //
+  // The event is triggered on "window" (and not the nav item as documented),
+  // see https://github.com/twbs/bootstrap/issues/20086
+  $(window).on('activate.bs.scrollspy', function () {
+    const navLinks = document.querySelectorAll('#bd-toc-nav a');
+
+    navLinks.forEach((navLink) => {
+      navLink.parentElement.classList.remove('active');
+    });
 
-  navLinks.forEach(navLink => {
-    navLink.parentElement.classList.remove('active');
-  })
+    const activeNavLinks = document.querySelectorAll('#bd-toc-nav a.active');
+    activeNavLinks.forEach((navLink) => {
+      navLink.parentElement.classList.add('active');
+    });
+  });
+}
 
-  const activeNavLinks = document.querySelectorAll('#bd-toc-nav a.active');
-  activeNavLinks.forEach(navLink => {
-    navLink.parentElement.classList.add('active');
-  })
+$(document).ready(() => {
+  addTOCInteractivity();
 });

webpack.common.js

@@ -4,18 +4,19 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 module.exports = {
   entry: {
-    index: ['./src/js/index.js', './src/scss/index.scss'],
+    index: ['./src/js/index.js'],
   },
   output: {
     filename: 'js/[name].js?[hash]',
     path: path.resolve(__dirname, 'pydata_sphinx_theme/static'),
   },
+  externals: {
+    // Define jQuery as external, this way Sphinx related javascript
+    // and custom javascript like popper.js can hook into jQuery.
+    jquery: 'jQuery',
+  },
   module: {
     rules: [
-      {
-        test: /\.js$/,
-        use: 'imports-loader?this=>window',
-      },
       {
         test: /\.scss$/,
         use: [
@@ -41,12 +42,5 @@ module.exports = {
       },
     ],
   },
-  plugins: [
-    new CleanWebpackPlugin(),
-    new webpack.ProvidePlugin({
-      '$': "jquery",
-      'jQuery': "jquery",
-      'Popper': 'popper.js'
-    }),
-  ],
+  plugins: [new CleanWebpackPlugin()],
 };