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

lib/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,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
             },

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
             },