Skip to content

Commit

Permalink
js: fix Javascript failures in Seamonkey/Palemoon.
Browse files Browse the repository at this point in the history
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
  • Loading branch information
evazion committed Mar 2, 2022
1 parent ad3f3fd commit 68c92b4
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 8 deletions.
6 changes: 6 additions & 0 deletions 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();
6 changes: 0 additions & 6 deletions app/javascript/packs/application.js
Expand Up @@ -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$/));
Expand Down Expand Up @@ -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();
4 changes: 2 additions & 2 deletions app/views/layouts/default.html.erb
Expand Up @@ -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" %>
Expand Down

0 comments on commit 68c92b4

Please sign in to comment.