refactor: Move Sprocket JS files to Webpack

wip

Author: arkirchner

app/assets/javascripts/application.js

@@ -13,20 +13,6 @@
 //= require rails-timeago
 //= require locales/jquery.timeago.de.js
 //
-// 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"
-//= require programming_groups
-// 3. Some channels are required by "editor/editor.js.erb"
-//= require_tree ./channels
-//
-// All remaining assets are loaded in alphabetical order
-//= require_tree .
-//
 // Finally, we dispatch a custom event to signal that all assets are loaded.
 // This is used by our custom migration for Turbo to trigger the `turbo-migration:load` event
 const sprocketsLoad = new Event('sprockets:load');

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

@@ -89,6 +89,10 @@ window.ace = ace; // Publish ace in global namespace
 import '@hotwired/turbo-rails';
 import './turbo-migration';
 
+// ActionCable
+import "@rails/actioncable"
+import "./channels"
+
 // Import of Rails sprocket assets with minimal changes. After the initial migration these files should
 // be moved to an appropriate place after some adjustments to fit modern Rails JS.
 import 'sprocket_asset_import';

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

app/assets/javascripts/channels/pg_matching_channel.js renamed to app/javascript/channels/pg_matching_channel.js

@@ -1,3 +1,7 @@
+import consumer from "./consumer"
+import ProgrammingGroups from '../sprocket_asset_import/programming_groups';
+import CodeOceanEditor from '../sprocket_asset_import/editor/evaluation';
+
 $(document).on('turbo-migration:load', function () {
 
   if (window.location.pathname.includes('/implement')) {
@@ -6,7 +10,7 @@ $(document).on('turbo-migration:load', function () {
 
     if ($.isController('exercises') && ProgrammingGroups.is_other_user(current_contributor)) {
 
-      App.synchronized_editor = App.cable.subscriptions.create({
+      consumer.subscriptions.create({
         channel: "SynchronizedEditorChannel", exercise_id: exercise_id
       }, {
         connected() {
@@ -70,7 +74,7 @@ $(document).on('turbo-migration:load', function () {
         },
 
         is_connected() {
-          return App.cable.subscriptions.findAll(App.synchronized_editor.identifier).length > 0
+          return consumer.subscriptions.findAll(App.synchronized_editor.identifier).length > 0
         },
 
         disconnect() {