From 68c92b45363bb7a267d869dc57682bf27b9822f8 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Tue, 1 Mar 2022 18:07:18 -0600
Subject: [PATCH] js: fix Javascript failures in Seamonkey/Palemoon.

Fix site Javascript failing to load in Seamonkey, Palemoon, and other
older browsers.

The @alpinejs/morph library uses public instance fields, which is ES2022
syntax not supported in older browsers. This is the code:

    var DomManager = class {
        el = void 0; // `el` is a public instance field
    }
    // => SyntaxError: bad method definition

The fix here is to separate the Alpine code into a separate bundle so
that a failure to load it doesn't cause the rest of the site's
Javascript to fail to load.

A better fix would be to either transpile the @alpinejs/morph library to
ES5 (which seems difficult to do in webpacker), or to fix the library
upstream to not use this syntax.

* https://inspiredwebdev.com/everything-new-in-es2022/
* https://blog.saeloun.com/2021/10/21/ecmacscript-public-instance-fields-and-private-instance-fields.html
* https://caniuse.com/?search=public%20class%20fields
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields#public_instance_fields
---
 app/javascript/packs/alpine.js      | 6 ++++++
 app/javascript/packs/application.js | 6 ------
 app/views/layouts/default.html.erb  | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)
 create mode 100644 app/javascript/packs/alpine.js

diff --git a/app/javascript/packs/alpine.js b/app/javascript/packs/alpine.js
new file mode 100644
index 000000000..ad97b23a3
--- /dev/null
+++ b/app/javascript/packs/alpine.js
@@ -0,0 +1,6 @@
+import Alpine from 'alpinejs';
+import morph from '@alpinejs/morph';
+
+window.Alpine = Alpine;
+Alpine.plugin(morph);
+Alpine.start();
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index b4e1cc6a0..0edbd8fb3 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -10,8 +10,6 @@ require('@rails/ujs').start();
 require('hammerjs');
 require('jquery-hotkeys');
 import morphdom from 'morphdom';
-import Alpine from 'alpinejs';
-import morph from '@alpinejs/morph';
 
 // should start looking for nodejs replacements
 importAll(require.context('../vendor', true, /\.js$/));
@@ -95,8 +93,4 @@ Danbooru.error = Utility.error;
 window.$ = jQuery;
 window.jQuery = jQuery;
 window.morphdom = morphdom;
-window.Alpine = Alpine;
 window.Danbooru = Danbooru;
-
-Alpine.plugin(morph);
-Alpine.start();
diff --git a/app/views/layouts/default.html.erb b/app/views/layouts/default.html.erb
index 6b9e08b43..fe035f1fb 100644
--- a/app/views/layouts/default.html.erb
+++ b/app/views/layouts/default.html.erb
@@ -23,9 +23,9 @@
 
   <%# XXX hack to only load Ruffle on Flash posts %>
   <% if controller_name == "posts" && action_name == "show" && @post&.is_flash? %>
-    <%= javascript_pack_tag "application", "flash", defer: false %>
+    <%= javascript_pack_tag "application", "alpine", "flash", defer: false %>
   <% else %>
-    <%= javascript_pack_tag "application", defer: false %>
+    <%= javascript_pack_tag "application", "alpine", defer: false %>
   <% end %>
 
   <%= stylesheet_pack_tag "application" %>