refactor: Move Sprocket JS files to Webpack

wip

Author: arkirchner

app/assets/javascripts/application.js

@@ -13,23 +13,16 @@
 //= require rails-timeago
 //= require locales/jquery.timeago.de.js
 //
-// lib/assets
-//= require flash
-//= require color_mode_picker
-//
 // app/assets
 // --> Include some assets first, as they are used by other assets.
 // --> Hence, the order specified here is important.
 //
-// 1. Some common base functions and monkey patches
-//= require base
-// 2. Programming groups are required by "channels/synchronized_editor_channel.js"
+// 1. Programming groups are required by "channels/synchronized_editor_channel.js"
 //= require programming_groups
-// 3. The turtle library is required by "editor/turtle.js"
+// 2. The turtle library is required by "editor/turtle.js"
 //= require turtle
-// 4. Some channels are required by "editor/editor.js.erb"
-//= require_tree ./channels
-// 5. Require the editor components, as needed by "./editor.js" and "./community_solution.js"
+// 3. Some channels are required by "editor/editor.js.erb"
+// 4. Require the editor components, as needed by "./editor.js" and "./community_solution.js"
 //= require_tree ./editor
 //
 // All remaining assets are loaded in alphabetical order

app/assets/javascripts/base.js

@@ -1,7 +1,3 @@
-Array.prototype.includes = function(element) {
-  return this.indexOf(element) !== -1;
-};
-
 window.CodeOcean = {
   refresh: function() {
     Turbo.visit(window.location.pathname);

lib/assets/stylesheets/flash.css.scss app/assets/stylesheets/flash.css.scsslib/assets/stylesheets/flash.css.scss renamed to app/assets/stylesheets/flash.css.scss

@@ -88,3 +88,10 @@ window.ace = ace; // Publish ace in global namespace
 // Turbo
 import '@hotwired/turbo-rails';
 import './turbo-migration';
+
+// ActionCable
+import "@rails/actioncable"
+import "./channels"
+
+// Import of Rails sprocket assets with minimal changes.
+import 'sprocket_assets'

app/javascript/application.js

@@ -0,0 +1,74 @@
+Array.prototype.includes = function(element) {
+  return this.indexOf(element) !== -1;
+};
+
+window.CodeOcean = {
+  refresh: function() {
+    Turbo.visit(window.location.pathname);
+  }
+};
+
+const ANIMATION_DURATION = 500;
+
+$.isController = function(name) {
+  return $('div[data-controller="' + name + '"]').isPresent();
+};
+
+$.fn.isPresent = function() {
+  return this.length > 0;
+};
+
+$.fn.scrollTo = function(selector) {
+  $(this).animate({
+    scrollTop: $(document.querySelector(selector)).offset().top - $(this).offset().top + $(this).scrollTop()
+  }, ANIMATION_DURATION);
+};
+
+$(document).on('turbo-migration:load', function() {
+    // Update all CSRF tokens on the page to reduce InvalidAuthenticityToken errors
+    // See https://github.com/rails/jquery-ujs/issues/456 for details
+    $.rails.refreshCSRFTokens();
+    $('.reloadCurrentPage').on('click', function() {
+        window.location.reload();
+    });
+
+    // Set current user and current contributor
+    window.current_user = JSON.parse($('meta[name="current-user"]')?.attr('content') || null);
+    window.current_contributor = JSON.parse($('meta[name="current-contributor"]')?.attr('content') || null);
+
+    // Set locale for all JavaScript functions
+    const htmlTag = $('html')
+    I18n.defaultLocale = htmlTag.data('default-locale');
+    I18n.locale = htmlTag.attr('lang');
+    jQuery.timeago.settings.lang = I18n.locale;
+
+    // Initialize Sentry
+    const sentrySettings = $('meta[name="sentry"]')
+
+    // Workaround for Turbo: We must not re-initialize the Relay object when visiting another page
+    if (sentrySettings && sentrySettings.data() && sentrySettings.data()['enabled'] && Sentry.getReplay() === undefined) {
+        Sentry.init({
+            dsn: sentrySettings.data('dsn'),
+            attachStacktrace: true,
+            release: sentrySettings.data('release'),
+            environment: sentrySettings.data('environment'),
+            tracesSampleRate: 1.0,
+            replaysSessionSampleRate: 0.0,
+            replaysOnErrorSampleRate: 1.0,
+            integrations: window.SentryIntegrations(),
+            profilesSampleRate: 1.0,
+            initialScope: scope =>{
+                if (current_user) {
+                    scope.setUser(_.omit(current_user, 'displayname'));
+                }
+                return scope;
+            }
+        });
+    }
+
+    // Enable sorttable again, as it is disabled otherwise by Turbo
+    if (sorttable) {
+        sorttable.init.done = false;
+        sorttable.init();
+    }
+});

app/javascript/base.js

@@ -0,0 +1,6 @@
+// Action Cable provides the framework to deal with WebSockets in Rails.
+// You can generate new channels where WebSocket features live using the `bin/rails generate channel` command.
+
+import { createConsumer } from "@rails/actioncable"
+
+export default createConsumer()

app/javascript/channels/consumer.js

@@ -0,0 +1,3 @@
+// Import all the channels to be used by Action Cable
+const channels = require.context(".", true, /_channel\.js$/)
+channels.keys().forEach(channels)

app/javascript/channels/index.js

@@ -1,3 +1,5 @@
+import consumer from "./consumer"
+
 $(document).on('turbo-migration:load', function() {
     if ($.isController('exercises') && $('.teacher_dashboard').isPresent()) {
 
@@ -18,7 +20,7 @@ $(document).on('turbo-migration:load', function() {
         const specific_channel = { channel: "LaExercisesChannel", exercise_id: exercise_id, study_group_id: study_group_id };
 
 
-        App.la_exercise = App.cable.subscriptions.create(specific_channel, {
+        consumer.subscriptions.create(specific_channel, {
             connected: function () {
                 // Called when the subscription is ready for use on the server
             },

…ets/javascripts/channels/la_exercises.js …ascript/channels/la_exercises_channel.jsapp/assets/javascripts/channels/la_exercises.js renamed to app/javascript/channels/la_exercises_channel.js app/assets/javascripts/channels/la_exercises.js renamed to app/javascript/channels/la_exercises_channel.js

@@ -1,11 +1,13 @@
+import consumer from "./consumer";
+
 $(document).on('turbo-migration:load', function () {
 
     if ($.isController('programming_groups') && window.location.pathname.includes('programming_groups/new')) {
         const matching_page = $('#matching');
         const exercise_id = matching_page.data('exercise-id');
         const specific_channel = { channel: "PgMatchingChannel", exercise_id: exercise_id};
 
-        App.pg_matching = App.cable.subscriptions.create(specific_channel, {
+        consumer.subscriptions.create(specific_channel, {
             connected() {
                 // Called when the subscription is ready for use on the server
             },