Update bundling method for jQuery #492 (#499)

.github/workflows/publish-docker.yaml

@@ -85,8 +85,9 @@ jobs:
           echo "Publishing to GitHub pages..."
           git config user.name "GitHub Actions Bot"
           git config user.email "<>"
-          # Delete gitignore entry for the dist folder
-          sed -i "/^\/dist\/$/d" .gitignore
+          # Patch gitignore so that files needed for the distribution are exposed
+          chmod +x ./scripts/patch_gitignore.sh
+          ./scripts/patch_gitignore.sh
           if [ ! -z "$(git status --porcelain)" ]; then
             git add .
             git commit -m "Set GitHub Pages release version"

.gitignore

@@ -13,7 +13,7 @@ _pkginfo.txt
 /archives/*mdwiki*.zim
 /AppPackages/*wikivoyage*
 /AppPackages/*wikimed*
-/?ode_modules*/
+/node_modules*/
 .vscode/launch.json
 null
 /scripts/kiwix-*.pem

KiwixWebApp-github.jsproj

@@ -173,7 +173,6 @@
     <Content Include="www\js\lib\settingsStore.js" />
     <Content Include="www\js\lib\filecache.js" />
     <Content Include="www\js\lib\images.js" />
-    <Content Include="www\js\lib\jquery-3.7.0.slim.js" />
     <Content Include="www\js\lib\kiwixServe.js" />
     <Content Include="www\js\lib\transformZimit.js" />
     <Content Include="www\js\lib\updater.js" />
@@ -329,6 +328,8 @@
     <Content Include="www\js\katex\katex.min.css" />
     <Content Include="www\js\katex\katex.min.js" />
     <Content Include="www\js\katex\README.md" />
+    <Content Include="node_modules/jquery/dist/jquery.slim.min.js" />
+    <Content Include="node_modules/jquery/dist/jquery.slim.min.map" />
   </ItemGroup>
   <ItemGroup>
     <Service Include="{4a0dddb5-7a95-4fbf-97cc-616d07737a77}" />

KiwixWebApp.jsproj

@@ -174,7 +174,6 @@
     <Content Include="www\js\lib\settingsStore.js" />
     <Content Include="www\js\lib\filecache.js" />
     <Content Include="www\js\lib\images.js" />
-    <Content Include="www\js\lib\jquery-3.7.0.slim.js" />
     <Content Include="www\js\lib\kiwixServe.js" />
     <Content Include="www\js\lib\transformZimit.js" />
     <Content Include="www\js\lib\updater.js" />
@@ -330,6 +329,8 @@
     <Content Include="www\js\katex\katex.min.css" />
     <Content Include="www\js\katex\katex.min.js" />
     <Content Include="www\js\katex\README.md" />
+    <Content Include="node_modules/jquery/dist/jquery.slim.min.js" />
+    <Content Include="node_modules/jquery/dist/jquery.slim.min.map" />
   </ItemGroup>
   <ItemGroup>
     <Service Include="{4a0dddb5-7a95-4fbf-97cc-616d07737a77}" />

package.json

@@ -177,6 +177,7 @@
     "@types/fs-extra": "^9.0.11",
     "core-js": "3.30.2",
     "electron-context-menu": "^3.1.1",
-    "electron-updater": "^6.1.0"
+    "electron-updater": "^6.1.0",
+    "jquery": "^3.7.1"
   }
 }

rollup.config.js

@@ -14,20 +14,19 @@ const config = {
     output: {
         format: 'iife',
         name: 'KiwixJSBundle'
-        // assetFileNames: "[name]-[hash][extname]"
     },
     treeshake: 'recommended',
     plugins: [
         babel({
             exclude: 'node_modules/**',
             babelHelpers: 'bundled'
         }),
+        // Needed to get rid of residual "requires" left in the code by Babel...
+        commonjs(),
         // Resolves references to node_modules packages
         resolve({
             browser: true
         }),
-        // Needed to get rid of residual "requires" left in the code by Babel...
-        commonjs(),
         // styles({
         //     // mode: 'extract',
         //     modules: true
@@ -41,9 +40,12 @@ const config = {
             preventAssignment: true
         }),
         copy({
-            targets: [
-                { src: ['www/js/lib/*dec-wasm.wasm', 'www/js/lib/libzim-asm.js', 'www/js/lib/libzim-wasm.*', 'www/js/lib/darkreader.min.js', 'www/js/lib/webpHeroBundle*', '!www/js/lib/libzim-wasm.dev*'], dest: 'dist/www/js' },
-                { src: ['archives', 'images', 'index.html', 'manifest.json', 'package.json', 'LICENSE', 'CHANGELOG.md', 'README.md', '*.appxmanifest', '*.pfx', '*.cjs', 'Package.StoreAssociation.xml'], dest: 'dist' }
+            targets: [{
+                src: ['www/js/lib/*dec-wasm.wasm', 'www/js/lib/libzim-asm.js', 'www/js/lib/libzim-wasm.*', 'www/js/lib/darkreader.min.js', 'www/js/lib/webpHeroBundle*',
+                    'node_modules/jquery/dist/jquery.slim.min.*', '!www/js/lib/libzim-wasm.dev*'],
+                dest: 'dist/www/js'
+            },
+            { src: ['archives', 'images', 'index.html', 'manifest.json', 'package.json', 'LICENSE', 'CHANGELOG.md', 'README.md', '*.appxmanifest', '*.pfx', '*.cjs', 'Package.StoreAssociation.xml'], dest: 'dist' }
             ],
             flatten: true
         })
@@ -56,8 +58,15 @@ if (process.env.BUILD === 'production') {
         // Copy static files and binary (WASM/ASM) files that need to be loaded relative to the bundle
         copy({
             targets: [
-                { src: ['www/**', '!www/js/app.js', '!www/js/lib', '!www/index.html'], dest: 'dist/www', expandDirectories: true, onlyFiles: true },
-                { src: ['service-worker.js', 'KiwixWebApp*.jsproj'], dest: 'dist',
+                {
+                    src: ['www/**', '!www/js/app.js', '!www/js/lib', '!www/index.html'],
+                    dest: 'dist/www',
+                    expandDirectories: true,
+                    onlyFiles: true
+                },
+                {
+                    src: ['service-worker.js', 'KiwixWebApp*.jsproj'],
+                    dest: 'dist',
                     // Modify the Service Worker precache files
                     transform: (contents, filename) => contents.toString()
                     // Replace the entry point with the bundle
@@ -69,14 +78,20 @@ if (process.env.BUILD === 'production') {
                     // Remove unneeded ASM/WASM binaries
                         .replace(/['"]www[\\/]js[\\/].*dec.*js['"],\s*/g, '')
                 },
-                { src: 'www/index.html', dest: 'dist/www',
+                {
+                    src: 'www/index.html',
+                    dest: 'dist/www',
                     // Link the html to the new bundle entry point
                     transform: (contents, filename) => contents.toString()
                     // Uncomment the bundle link
                         .replace(/<!--\s(<script type="text\/javascript.*bundle.js.*)\s-->/, '$1')
                         .replace(/bundle\.js/, 'bundle.min.js')
                     // Comment out the old app.js link
                         .replace(/(<script type="module.*app.js.*)/, '<!-- $1 -->')
+                    // Redirect jQuery and bootstrap
+                        .replace(/(<script\s.*src=").*jquery.slim.min.js/, '$1js/jquery.slim.min.js')
+                        // .replace(/(<script\s.*src=").*bootstrap.bundle.min.js/, '$1js/bootstrap.bundle.min.js')
+                        // .replace(/(<link\s.*href=").*bootstrap.min.css/, '$1css/bootstrap.min.css')
                 }
             ],
             flatten: false
@@ -88,26 +103,44 @@ if (process.env.BUILD === 'production') {
         // Copy static files and binary (WASM/ASM) files that need to be loaded relative to the bundle
         copy({
             targets: [
-                { src: ['www/**', '!www/js/app.js', '!www/js/lib', '!www/index.html'], dest: 'dist/www', expandDirectories: true, onlyFiles: true },
-                { src: ['service-worker.js', 'KiwixWebApp*.jsproj'], dest: 'dist',
+                {
+                    src: ['www/**', '!www/js/app.js', '!www/js/lib', '!www/index.html'],
+                    dest: 'dist/www',
+                    expandDirectories: true,
+                    onlyFiles: true
+                },
+                {
+                    src: ['service-worker.js', 'KiwixWebApp*.jsproj'],
+                    dest: 'dist',
                     // Modify the Service Worker precache files
                     transform: (contents, filename) => contents.toString()
                     // Replace the entry point with the bundle
                         .replace(/(www[\\/]js[\\/])app.js/, '$1bundle.js')
                     // Remove all the lib files that will be included in the bundle
                         .replace(/(?:<Content Include=)?['"]www[\\/]js[\\/]lib[\\/]cache[\s\S]+zimfile.js['"](?:\s*\/>|,)\s*/, '')
+                    // Replace any references to node_modules
+                        .replace(/node_modules[\\/].*dist[\\/]((?:js|css)[\\/])?/g, function (m, p1) {
+                            p1 = p1 || 'js/';
+                            return 'www/' + p1;
+                        })
                     // Alter remaining lib references
                         .replace(/([\\/])js[\\/]lib/g, '$1js')
                     // Remove unneeded ASM/WASM binaries
                         .replace(/['"]www[\\/]js[\\/].*dec.*js['"],\s*/g, '')
                 },
-                { src: 'www/index.html', dest: 'dist/www',
+                {
+                    src: 'www/index.html',
+                    dest: 'dist/www',
                     // Link the html to the new bundle entry point
                     transform: (contents, filename) => contents.toString()
                     // Uncomment the bundle link
                         .replace(/<!--\s(<script type="text\/javascript.*bundle.js.*)\s-->/, '$1')
                     // Comment out the old app.js link
                         .replace(/(<script type="module.*app.js.*)/, '<!-- $1 -->')
+                    // Redirect jQuery and bootstrap
+                        .replace(/(<script\s.*src=").*jquery.slim.min.js/, '$1js/jquery.slim.min.js')
+                        // .replace(/(<script\s.*src=").*bootstrap.bundle.min.js/, '$1js/bootstrap.bundle.min.js')
+                        // .replace(/(<link\s.*href=").*bootstrap.min.css/, '$1css/bootstrap.min.css')
                 }
             ],
             flatten: false

scripts/patch_gitignore.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+# Delete gitignore entry for the dist folder
+sed -i "/^\/dist\/$/d" .gitignore
+
+# Replace the /node_modules*/ entry in gitignore with the following
+sed -i 's|/node_modules\*\/|/node_modules/*\
+!/node_modules/jquery\
+/node_modules/jquery/*\
+!/node_modules/jquery/dist\
+/node_modules/jquery/dist/*\
+!/node_modules/jquery/dist/jquery.slim.min.*|' .gitignore

service-worker.js

@@ -182,8 +182,6 @@ const precacheFiles = [
     'www/js/lib/cache.js',
     'www/js/lib/filecache.js',
     'www/js/lib/images.js',
-    'www/js/lib/jquery.module.js',
-    'www/js/lib/jquery-3.7.0.slim.js',
     'www/js/lib/kiwixServe.js',
     'www/js/lib/settingsStore.js',
     'www/js/lib/transformStyles.js',
@@ -214,7 +212,9 @@ const precacheFiles = [
     'www/js/katex/fonts/KaTeX_Size1-Regular.woff2',
     'www/js/katex/fonts/KaTeX_Size2-Regular.woff2',
     'www/js/katex/fonts/KaTeX_Size3-Regular.woff2',
-    'www/js/katex/fonts/KaTeX_Size4-Regular.woff2'
+    'www/js/katex/fonts/KaTeX_Size4-Regular.woff2',
+    'node_modules/jquery/dist/jquery.slim.min.js',
+    'node_modules/jquery/dist/jquery.slim.min.map'
 ];
 
 if ('WebAssembly' in self) {

www/index.html

@@ -1315,6 +1315,11 @@ <h4 class="panel-group-heading">Expert settings</h4>
             </div>
         </footer>
     </section>
+    <!-- Legacy jQuery and Bootstrap are not ES-module-aware, and interact with each other using side-effects, so we are forced to load them globally here.
+        There is code in rollup.config.js which alters these references, and the link reference above, to point to the local destination of the copied modules.
+    -->
+    <script type="text/javascript" src="../node_modules/jquery/dist/jquery.slim.min.js"></script>
+    <!-- script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script -->
     <script type="text/javascript" src="js/init.js"></script>
     <script type="module" defer src="js/app.js"></script>
     <!-- <script type="text/javascript" defer src="js/bundle.js"></script> -->

www/js/app.js

@@ -27,7 +27,6 @@
 
 // import styles from '../css/app.css' assert { type: "css" };
 // import bootstrap from '../css/bootstrap.min.css' assert { type: "css" };
-import $ from './lib/jquery.module.js';
 import zimArchiveLoader from './lib/zimArchiveLoader.js';
 import uiUtil from './lib/uiUtil.js';
 import util from './lib/util.js';