[WIP] refactor: Move Sprocket JS files to Webpack

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/javascript/application.js

@@ -88,3 +88,11 @@ 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. After the inital migration this 
+// files should be included in the application after some adjstments to fit modern Rails JS.
+import 'sprocket_asset_import'

app/javascript/channels/consumer.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/index.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/assets/javascripts/channels/la_exercises.js → app/javascript/channels/la_exercises_channel.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/pg_matching_channel.js → app/javascript/channels/pg_matching_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/javascript/sprocket_asset_import/index.js

@@ -0,0 +1,6 @@
+import './flash'
+import './color_mode_picker'
+
+import './base'
+
+import './request_for_comments'

package.json

@@ -11,6 +11,7 @@
     "@github/webauthn-json": "^2.1.1",
     "@hotwired/turbo-rails": "^8.0.16",
     "@popperjs/core": "^2.11.8",
+    "@rails/actioncable": "^8.0.200",
     "@sentry/browser": "^9.39.0",
     "@toast-ui/editor": "^3.2.2",
     "@webpack-cli/serve": "^3.0.1",

yarn.lock

@@ -1511,7 +1511,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rails/actioncable@npm:>=7.0":
+"@rails/actioncable@npm:>=7.0, @rails/actioncable@npm:^8.0.200":
   version: 8.0.200
   resolution: "@rails/actioncable@npm:8.0.200"
   checksum: 10c0/42c861f3b43131ab523d37125e30e802bd5bab98bf8150a780531f82f05177cd0071a75a7f1341eac9de772732625194ac16205a40b82dc567cc05c21c56e412
@@ -2612,6 +2612,7 @@ __metadata:
     "@github/webauthn-json": "npm:^2.1.1"
     "@hotwired/turbo-rails": "npm:^8.0.16"
     "@popperjs/core": "npm:^2.11.8"
+    "@rails/actioncable": "npm:^8.0.200"
     "@sentry/browser": "npm:^9.39.0"
     "@toast-ui/editor": "npm:^3.2.2"
     "@webpack-cli/serve": "npm:^3.0.1"