From 12f21d049a606c8ab07627e218fe38ea566a0e21 Mon Sep 17 00:00:00 2001
From: Armin Kirchner <post.armin@gmail.com>
Date: Thu, 17 Jul 2025 17:59:22 +0200
Subject: [PATCH 1/3] refactor: Move Sprocket JS files to Webpack (Part 1)

JavaScript for RfCs, Flashes and the color mode can be moved without
modifications.

Relates to #3021
---
 app/assets/javascripts/application.js                         | 4 ----
 app/javascript/application.js                                 | 4 ++++
 .../javascript/sprocket_asset_import}/color_mode_picker.js    | 0
 .../javascript/sprocket_asset_import}/flash.js                | 0
 app/javascript/sprocket_asset_import/index.js                 | 4 ++++
 .../sprocket_asset_import}/request_for_comments.js            | 0
 6 files changed, 8 insertions(+), 4 deletions(-)
 rename {lib/assets/javascripts => app/javascript/sprocket_asset_import}/color_mode_picker.js (100%)
 rename {lib/assets/javascripts => app/javascript/sprocket_asset_import}/flash.js (100%)
 create mode 100644 app/javascript/sprocket_asset_import/index.js
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/request_for_comments.js (100%)

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index d58279b98..6c6f0f301 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -13,10 +13,6 @@
 //= 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.
diff --git a/app/javascript/application.js b/app/javascript/application.js
index daaf6b697..7b2e9f1b6 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -88,3 +88,7 @@ window.ace = ace; // Publish ace in global namespace
 // Turbo
 import '@hotwired/turbo-rails';
 import './turbo-migration';
+
+// 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';
diff --git a/lib/assets/javascripts/color_mode_picker.js b/app/javascript/sprocket_asset_import/color_mode_picker.js
similarity index 100%
rename from lib/assets/javascripts/color_mode_picker.js
rename to app/javascript/sprocket_asset_import/color_mode_picker.js
diff --git a/lib/assets/javascripts/flash.js b/app/javascript/sprocket_asset_import/flash.js
similarity index 100%
rename from lib/assets/javascripts/flash.js
rename to app/javascript/sprocket_asset_import/flash.js
diff --git a/app/javascript/sprocket_asset_import/index.js b/app/javascript/sprocket_asset_import/index.js
new file mode 100644
index 000000000..c5c240fee
--- /dev/null
+++ b/app/javascript/sprocket_asset_import/index.js
@@ -0,0 +1,4 @@
+import './flash';
+import './color_mode_picker';
+
+import './request_for_comments';
diff --git a/app/assets/javascripts/request_for_comments.js b/app/javascript/sprocket_asset_import/request_for_comments.js
similarity index 100%
rename from app/assets/javascripts/request_for_comments.js
rename to app/javascript/sprocket_asset_import/request_for_comments.js

From 82a05a6396c502f599675144353beb4646170466 Mon Sep 17 00:00:00 2001
From: Armin Kirchner <post.armin@gmail.com>
Date: Tue, 22 Jul 2025 14:25:23 +0200
Subject: [PATCH 2/3] refactor: Move Sprocket JS files to Webpack (Part 2)

Code editor modules are moved with minimal changes.

Relates to #3021
---
 app/assets/javascripts/application.js                  |  6 +-----
 .../sprocket_asset_import}/editor/ajax.js              |  2 +-
 .../sprocket_asset_import}/editor/editor.js            | 10 +++++-----
 .../sprocket_asset_import}/editor/evaluation.js        |  2 +-
 .../sprocket_asset_import}/editor/execution.js         |  2 +-
 app/javascript/sprocket_asset_import/editor/index.js   | 10 ++++++++++
 .../editor/participantsupport.js                       |  2 +-
 .../sprocket_asset_import}/editor/prompt.js            |  4 ++--
 .../sprocket_asset_import}/editor/submissions.js       |  2 +-
 .../sprocket_asset_import}/editor/turtle.js            |  4 +++-
 .../sprocket_asset_import}/editor/websocket.js         |  2 +-
 app/javascript/sprocket_asset_import/index.js          |  1 +
 .../sprocket_asset_import}/turtle.js                   |  2 ++
 13 files changed, 30 insertions(+), 19 deletions(-)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/editor/ajax.js (93%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/editor/editor.js (99%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/editor/evaluation.js (99%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/editor/execution.js (99%)
 create mode 100644 app/javascript/sprocket_asset_import/editor/index.js
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/editor/participantsupport.js (99%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/editor/prompt.js (97%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/editor/submissions.js (99%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/editor/turtle.js (95%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/editor/websocket.js (98%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/turtle.js (99%)

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 6c6f0f301..39e55ff4f 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -21,12 +21,8 @@
 //= require base
 // 2. Programming groups are required by "channels/synchronized_editor_channel.js"
 //= require programming_groups
-// 3. The turtle library is required by "editor/turtle.js"
-//= require turtle
-// 4. Some channels are required by "editor/editor.js.erb"
+// 3. 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"
-//= require_tree ./editor
 //
 // All remaining assets are loaded in alphabetical order
 //= require_tree .
diff --git a/app/assets/javascripts/editor/ajax.js b/app/javascript/sprocket_asset_import/editor/ajax.js
similarity index 93%
rename from app/assets/javascripts/editor/ajax.js
rename to app/javascript/sprocket_asset_import/editor/ajax.js
index 127944f63..816018915 100644
--- a/app/assets/javascripts/editor/ajax.js
+++ b/app/javascript/sprocket_asset_import/editor/ajax.js
@@ -1,4 +1,4 @@
-CodeOceanEditorAJAX = {
+window.CodeOceanEditorAJAX = {
   ajax: function(options) {
     return $.ajax(_.extend({
       dataType: 'json',
diff --git a/app/assets/javascripts/editor/editor.js b/app/javascript/sprocket_asset_import/editor/editor.js
similarity index 99%
rename from app/assets/javascripts/editor/editor.js
rename to app/javascript/sprocket_asset_import/editor/editor.js
index 5ee0937ec..2e7ee83b6 100644
--- a/app/assets/javascripts/editor/editor.js
+++ b/app/javascript/sprocket_asset_import/editor/editor.js
@@ -1,4 +1,4 @@
-var CodeOceanEditor = {
+window.CodeOceanEditor = {
     THEME: window.getCurrentTheme() === 'dark' ? 'ace/theme/tomorrow_night' : 'ace/theme/tomorrow',
 
     //Color-Encoding for Percentages in Progress Bars (For submissions)
@@ -28,8 +28,8 @@ var CodeOceanEditor = {
     lastCopyText: null,
 
     sendEvents: null,
-    eventURL: Routes.events_path(),
-    fileTypeURL: Routes.file_types_path(),
+    eventURL: () => Routes.events_path(),
+    fileTypeURL: () => Routes.file_types_path(),
 
     confirmDestroy: function (event) {
         event.preventDefault();
@@ -389,7 +389,7 @@ var CodeOceanEditor = {
     updateEditorModeToFileTypeID: function (editor, fileTypeID) {
         var newMode = 'ace/mode/text'
 
-        $.ajax(this.fileTypeURL + '/' + fileTypeID, {
+        $.ajax(this.fileTypeURL() + '/' + fileTypeID, {
             dataType: 'json'
         }).done(function (data) {
             if (data['editor_mode'] !== null) {
@@ -668,7 +668,7 @@ var CodeOceanEditor = {
 
     publishCodeOceanEvent: function (payload) {
         if (this.sendEvents) {
-            $.ajax(this.eventURL, {
+            $.ajax(this.eventURL(), {
                 type: 'POST',
                 cache: false,
                 dataType: 'JSON',
diff --git a/app/assets/javascripts/editor/evaluation.js b/app/javascript/sprocket_asset_import/editor/evaluation.js
similarity index 99%
rename from app/assets/javascripts/editor/evaluation.js
rename to app/javascript/sprocket_asset_import/editor/evaluation.js
index a5ea6ef0e..e17f99e08 100644
--- a/app/assets/javascripts/editor/evaluation.js
+++ b/app/javascript/sprocket_asset_import/editor/evaluation.js
@@ -1,4 +1,4 @@
-CodeOceanEditorEvaluation = {
+window.CodeOceanEditorEvaluation = {
     // A list of non-printable characters that are not allowed in the code output.
     // Taken from https://stackoverflow.com/a/69024306
     nonPrintableRegEx: /[\u0000-\u0008\u000B\u000C\u000F-\u001F\u007F-\u009F\u2000-\u200F\u2028-\u202F\u205F-\u206F\u3000\uFEFF]/g,
diff --git a/app/assets/javascripts/editor/execution.js b/app/javascript/sprocket_asset_import/editor/execution.js
similarity index 99%
rename from app/assets/javascripts/editor/execution.js
rename to app/javascript/sprocket_asset_import/editor/execution.js
index d727c63cb..c6ceae212 100644
--- a/app/assets/javascripts/editor/execution.js
+++ b/app/javascript/sprocket_asset_import/editor/execution.js
@@ -1,4 +1,4 @@
-CodeOceanEditorWebsocket = {
+window.CodeOceanEditorWebsocket = {
   websocket: null,
   // Replace `http` with `ws` for the WebSocket connection. This also works with `https` and `wss`.
   webSocketProtocol: window.location.protocol.replace(/^http/, 'ws').split(':')[0],
diff --git a/app/javascript/sprocket_asset_import/editor/index.js b/app/javascript/sprocket_asset_import/editor/index.js
new file mode 100644
index 000000000..175f8eb2f
--- /dev/null
+++ b/app/javascript/sprocket_asset_import/editor/index.js
@@ -0,0 +1,10 @@
+import './ajax';
+import './editor';
+import './evaluation';
+import './execution';
+import './participantsupport';
+import './prompt';
+import './submissions';
+import './turtle';
+import './websocket';
+
diff --git a/app/assets/javascripts/editor/participantsupport.js b/app/javascript/sprocket_asset_import/editor/participantsupport.js
similarity index 99%
rename from app/assets/javascripts/editor/participantsupport.js
rename to app/javascript/sprocket_asset_import/editor/participantsupport.js
index bc78cc03e..55c2f5b27 100644
--- a/app/assets/javascripts/editor/participantsupport.js
+++ b/app/javascript/sprocket_asset_import/editor/participantsupport.js
@@ -1,4 +1,4 @@
-CodeOceanEditorFlowr = {
+window.CodeOceanEditorFlowr = {
   flowrResultHtml:
     '<div class="card mb-2">' +
       '<div id="{{headingId}}" role="tab" class="card-header">' +
diff --git a/app/assets/javascripts/editor/prompt.js b/app/javascript/sprocket_asset_import/editor/prompt.js
similarity index 97%
rename from app/assets/javascripts/editor/prompt.js
rename to app/javascript/sprocket_asset_import/editor/prompt.js
index e767ba436..dc56343ee 100644
--- a/app/assets/javascripts/editor/prompt.js
+++ b/app/javascript/sprocket_asset_import/editor/prompt.js
@@ -1,4 +1,4 @@
-CodeOceanEditorPrompt = {
+window.CodeOceanEditorPrompt = {
     prompt: '#prompt',
 
     showPrompt: function(msg) {
@@ -42,4 +42,4 @@ CodeOceanEditorPrompt = {
             this.submitPromptInput();
         }
     }
-};
\ No newline at end of file
+};
diff --git a/app/assets/javascripts/editor/submissions.js b/app/javascript/sprocket_asset_import/editor/submissions.js
similarity index 99%
rename from app/assets/javascripts/editor/submissions.js
rename to app/javascript/sprocket_asset_import/editor/submissions.js
index 671158dd4..e663bb8ca 100644
--- a/app/assets/javascripts/editor/submissions.js
+++ b/app/javascript/sprocket_asset_import/editor/submissions.js
@@ -1,4 +1,4 @@
-CodeOceanEditorSubmissions = {
+window.CodeOceanEditorSubmissions = {
   AUTOSAVE_INTERVAL: 15 * 1000,
   autosaveTimer: null,
   autosaveLabel: "#statusbar #autosave",
diff --git a/app/assets/javascripts/editor/turtle.js b/app/javascript/sprocket_asset_import/editor/turtle.js
similarity index 95%
rename from app/assets/javascripts/editor/turtle.js
rename to app/javascript/sprocket_asset_import/editor/turtle.js
index 8432d8b96..99ae13f00 100644
--- a/app/assets/javascripts/editor/turtle.js
+++ b/app/javascript/sprocket_asset_import/editor/turtle.js
@@ -1,4 +1,6 @@
-CodeOceanEditorTurtle = {
+import Turtle from '../turtle';
+
+window.CodeOceanEditorTurtle = {
   turtlecanvas: null,
   turtlescreen: null,
   resetTurtle: true,
diff --git a/app/assets/javascripts/editor/websocket.js b/app/javascript/sprocket_asset_import/editor/websocket.js
similarity index 98%
rename from app/assets/javascripts/editor/websocket.js
rename to app/javascript/sprocket_asset_import/editor/websocket.js
index a1d397327..0d1cfc2fe 100644
--- a/app/assets/javascripts/editor/websocket.js
+++ b/app/javascript/sprocket_asset_import/editor/websocket.js
@@ -1,4 +1,4 @@
-CommandSocket = function(url, onOpen) {
+window.CommandSocket = function(url, onOpen) {
   this.handlers = {};
   this.websocket = new WebSocket(url);
   this.websocket.onopen = onOpen;
diff --git a/app/javascript/sprocket_asset_import/index.js b/app/javascript/sprocket_asset_import/index.js
index c5c240fee..40a1dbcd5 100644
--- a/app/javascript/sprocket_asset_import/index.js
+++ b/app/javascript/sprocket_asset_import/index.js
@@ -1,4 +1,5 @@
 import './flash';
 import './color_mode_picker';
 
+import './editor';
 import './request_for_comments';
diff --git a/app/assets/javascripts/turtle.js b/app/javascript/sprocket_asset_import/turtle.js
similarity index 99%
rename from app/assets/javascripts/turtle.js
rename to app/javascript/sprocket_asset_import/turtle.js
index 1843c4c57..0ee607d20 100644
--- a/app/assets/javascripts/turtle.js
+++ b/app/javascript/sprocket_asset_import/turtle.js
@@ -217,3 +217,5 @@ Turtle.prototype.css = function (key, value) {
         this.canvas.css(key, value);
     }
 };
+
+export default Turtle;

From 8142c5033feeee229c6911db307e96685bc185fa Mon Sep 17 00:00:00 2001
From: Armin Kirchner <post.armin@gmail.com>
Date: Thu, 17 Jul 2025 11:16:22 +0200
Subject: [PATCH 3/3] refactor: Move Sprocket JS files to Webpack

wip
---
 app/assets/javascripts/application.js              | 14 --------------
 {lib => app}/assets/stylesheets/flash.css.scss     |  0
 app/javascript/application.js                      |  4 ++++
 app/javascript/channels/consumer.js                |  6 ++++++
 app/javascript/channels/index.js                   |  3 +++
 .../channels/la_exercises_channel.js}              |  4 +++-
 .../channels/pg_matching_channel.js                |  4 +++-
 .../channels/synchronized_editor_channel.js        |  8 ++++++--
 .../sprocket_asset_import}/base.js                 |  0
 .../bootstrap-dropdown-submenu.js                  |  0
 .../sprocket_asset_import}/codeharbor_link.js      |  0
 .../sprocket_asset_import}/community_solution.js   |  0
 .../sprocket_asset_import}/dashboard.js            |  0
 .../sprocket_asset_import}/editor.js               |  0
 .../sprocket_asset_import/editor/evaluation.js     |  6 ++++++
 .../editor/participantsupport.js                   |  4 ++--
 .../sprocket_asset_import/editor/turtle.js         |  3 +++
 .../sprocket_asset_import}/error_templates.js      |  0
 .../sprocket_asset_import}/exercise_collections.js |  0
 .../sprocket_asset_import}/exercise_graphs.js      |  0
 .../sprocket_asset_import}/exercises.js            |  0
 .../sprocket_asset_import}/external_users.js       |  0
 .../sprocket_asset_import}/file_types.js           |  0
 .../sprocket_asset_import}/forms.js                |  0
 app/javascript/sprocket_asset_import/index.js      |  6 ++++++
 .../sprocket_asset_import}/markdown_editor.js      |  0
 .../sprocket_asset_import}/programming_groups.js   |  2 ++
 .../sprocket_asset_import}/shell.js                |  0
 .../statistics_activity_history.js                 |  0
 .../sprocket_asset_import}/statistics_graphs.js    |  0
 .../submission_statistics.js                       |  0
 app/javascript/sprocket_asset_import/turtle.js     |  2 +-
 .../sprocket_asset_import}/working_time_graphs.js  |  0
 package.json                                       |  3 ++-
 yarn.lock                                          |  7 ++++---
 35 files changed, 51 insertions(+), 25 deletions(-)
 rename {lib => app}/assets/stylesheets/flash.css.scss (100%)
 create mode 100644 app/javascript/channels/consumer.js
 create mode 100644 app/javascript/channels/index.js
 rename app/{assets/javascripts/channels/la_exercises.js => javascript/channels/la_exercises_channel.js} (99%)
 rename app/{assets/javascripts => javascript}/channels/pg_matching_channel.js (93%)
 rename app/{assets/javascripts => javascript}/channels/synchronized_editor_channel.js (90%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/base.js (100%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/bootstrap-dropdown-submenu.js (100%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/codeharbor_link.js (100%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/community_solution.js (100%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/dashboard.js (100%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/editor.js (100%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/error_templates.js (100%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/exercise_collections.js (100%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/exercise_graphs.js (100%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/exercises.js (100%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/external_users.js (100%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/file_types.js (100%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/forms.js (100%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/markdown_editor.js (100%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/programming_groups.js (98%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/shell.js (100%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/statistics_activity_history.js (100%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/statistics_graphs.js (100%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/submission_statistics.js (100%)
 rename app/{assets/javascripts => javascript/sprocket_asset_import}/working_time_graphs.js (100%)

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 39e55ff4f..ec5c173d5 100644
--- a/app/assets/javascripts/application.js
+++ b/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');
diff --git a/lib/assets/stylesheets/flash.css.scss b/app/assets/stylesheets/flash.css.scss
similarity index 100%
rename from lib/assets/stylesheets/flash.css.scss
rename to app/assets/stylesheets/flash.css.scss
diff --git a/app/javascript/application.js b/app/javascript/application.js
index 7b2e9f1b6..2ddc7bcfd 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -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';
diff --git a/app/javascript/channels/consumer.js b/app/javascript/channels/consumer.js
new file mode 100644
index 000000000..8ec3aad3a
--- /dev/null
+++ b/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()
diff --git a/app/javascript/channels/index.js b/app/javascript/channels/index.js
new file mode 100644
index 000000000..7067ab4b7
--- /dev/null
+++ b/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)
diff --git a/app/assets/javascripts/channels/la_exercises.js b/app/javascript/channels/la_exercises_channel.js
similarity index 99%
rename from app/assets/javascripts/channels/la_exercises.js
rename to app/javascript/channels/la_exercises_channel.js
index ceef0135e..1aec29265 100644
--- a/app/assets/javascripts/channels/la_exercises.js
+++ b/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
             },
diff --git a/app/assets/javascripts/channels/pg_matching_channel.js b/app/javascript/channels/pg_matching_channel.js
similarity index 93%
rename from app/assets/javascripts/channels/pg_matching_channel.js
rename to app/javascript/channels/pg_matching_channel.js
index 445cc5b59..d9900061b 100644
--- a/app/assets/javascripts/channels/pg_matching_channel.js
+++ b/app/javascript/channels/pg_matching_channel.js
@@ -1,3 +1,5 @@
+import consumer from "./consumer";
+
 $(document).on('turbo-migration:load', function () {
 
     if ($.isController('programming_groups') && window.location.pathname.includes('programming_groups/new')) {
@@ -5,7 +7,7 @@ $(document).on('turbo-migration:load', function () {
         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
             },
diff --git a/app/assets/javascripts/channels/synchronized_editor_channel.js b/app/javascript/channels/synchronized_editor_channel.js
similarity index 90%
rename from app/assets/javascripts/channels/synchronized_editor_channel.js
rename to app/javascript/channels/synchronized_editor_channel.js
index 0a54c4fcc..974ac2a09 100644
--- a/app/assets/javascripts/channels/synchronized_editor_channel.js
+++ b/app/javascript/channels/synchronized_editor_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() {
diff --git a/app/assets/javascripts/base.js b/app/javascript/sprocket_asset_import/base.js
similarity index 100%
rename from app/assets/javascripts/base.js
rename to app/javascript/sprocket_asset_import/base.js
diff --git a/app/assets/javascripts/bootstrap-dropdown-submenu.js b/app/javascript/sprocket_asset_import/bootstrap-dropdown-submenu.js
similarity index 100%
rename from app/assets/javascripts/bootstrap-dropdown-submenu.js
rename to app/javascript/sprocket_asset_import/bootstrap-dropdown-submenu.js
diff --git a/app/assets/javascripts/codeharbor_link.js b/app/javascript/sprocket_asset_import/codeharbor_link.js
similarity index 100%
rename from app/assets/javascripts/codeharbor_link.js
rename to app/javascript/sprocket_asset_import/codeharbor_link.js
diff --git a/app/assets/javascripts/community_solution.js b/app/javascript/sprocket_asset_import/community_solution.js
similarity index 100%
rename from app/assets/javascripts/community_solution.js
rename to app/javascript/sprocket_asset_import/community_solution.js
diff --git a/app/assets/javascripts/dashboard.js b/app/javascript/sprocket_asset_import/dashboard.js
similarity index 100%
rename from app/assets/javascripts/dashboard.js
rename to app/javascript/sprocket_asset_import/dashboard.js
diff --git a/app/assets/javascripts/editor.js b/app/javascript/sprocket_asset_import/editor.js
similarity index 100%
rename from app/assets/javascripts/editor.js
rename to app/javascript/sprocket_asset_import/editor.js
diff --git a/app/javascript/sprocket_asset_import/editor/evaluation.js b/app/javascript/sprocket_asset_import/editor/evaluation.js
index e17f99e08..a669c0264 100644
--- a/app/javascript/sprocket_asset_import/editor/evaluation.js
+++ b/app/javascript/sprocket_asset_import/editor/evaluation.js
@@ -1,4 +1,8 @@
+<<<<<<< HEAD
 window.CodeOceanEditorEvaluation = {
+=======
+const CodeOceanEditorEvaluation = {
+>>>>>>> 787f0509 (refactor: Move Sprocket JS files to Webpack)
     // A list of non-printable characters that are not allowed in the code output.
     // Taken from https://stackoverflow.com/a/69024306
     nonPrintableRegEx: /[\u0000-\u0008\u000B\u000C\u000F-\u001F\u007F-\u009F\u2000-\u200F\u2028-\u202F\u205F-\u206F\u3000\uFEFF]/g,
@@ -295,3 +299,5 @@ window.CodeOceanEditorEvaluation = {
         }
     }
 };
+
+export default CodeOceanEditor;
diff --git a/app/javascript/sprocket_asset_import/editor/participantsupport.js b/app/javascript/sprocket_asset_import/editor/participantsupport.js
index 55c2f5b27..bce8e999e 100644
--- a/app/javascript/sprocket_asset_import/editor/participantsupport.js
+++ b/app/javascript/sprocket_asset_import/editor/participantsupport.js
@@ -111,7 +111,7 @@ window.CodeOceanEditorFlowr = {
   }
 };
 
-CodeOceanEditorRequestForComments = {
+window.CodeOceanEditorRequestForComments = {
   requestComments: function () {
     const cause = $('#requestComments');
     this.newSentryTransaction(cause, async () => {
@@ -172,7 +172,7 @@ CodeOceanEditorRequestForComments = {
   }
 };
 
-CodeOceanEditorTips = {
+window.CodeOceanEditorTips = {
     initializeEventHandlers: function() {
         const card_headers = $('#tips .card-collapse');
         for (let tip of card_headers) {
diff --git a/app/javascript/sprocket_asset_import/editor/turtle.js b/app/javascript/sprocket_asset_import/editor/turtle.js
index 99ae13f00..508160e27 100644
--- a/app/javascript/sprocket_asset_import/editor/turtle.js
+++ b/app/javascript/sprocket_asset_import/editor/turtle.js
@@ -1,5 +1,8 @@
+<<<<<<< HEAD
 import Turtle from '../turtle';
 
+=======
+>>>>>>> 787f0509 (refactor: Move Sprocket JS files to Webpack)
 window.CodeOceanEditorTurtle = {
   turtlecanvas: null,
   turtlescreen: null,
diff --git a/app/assets/javascripts/error_templates.js b/app/javascript/sprocket_asset_import/error_templates.js
similarity index 100%
rename from app/assets/javascripts/error_templates.js
rename to app/javascript/sprocket_asset_import/error_templates.js
diff --git a/app/assets/javascripts/exercise_collections.js b/app/javascript/sprocket_asset_import/exercise_collections.js
similarity index 100%
rename from app/assets/javascripts/exercise_collections.js
rename to app/javascript/sprocket_asset_import/exercise_collections.js
diff --git a/app/assets/javascripts/exercise_graphs.js b/app/javascript/sprocket_asset_import/exercise_graphs.js
similarity index 100%
rename from app/assets/javascripts/exercise_graphs.js
rename to app/javascript/sprocket_asset_import/exercise_graphs.js
diff --git a/app/assets/javascripts/exercises.js b/app/javascript/sprocket_asset_import/exercises.js
similarity index 100%
rename from app/assets/javascripts/exercises.js
rename to app/javascript/sprocket_asset_import/exercises.js
diff --git a/app/assets/javascripts/external_users.js b/app/javascript/sprocket_asset_import/external_users.js
similarity index 100%
rename from app/assets/javascripts/external_users.js
rename to app/javascript/sprocket_asset_import/external_users.js
diff --git a/app/assets/javascripts/file_types.js b/app/javascript/sprocket_asset_import/file_types.js
similarity index 100%
rename from app/assets/javascripts/file_types.js
rename to app/javascript/sprocket_asset_import/file_types.js
diff --git a/app/assets/javascripts/forms.js b/app/javascript/sprocket_asset_import/forms.js
similarity index 100%
rename from app/assets/javascripts/forms.js
rename to app/javascript/sprocket_asset_import/forms.js
diff --git a/app/javascript/sprocket_asset_import/index.js b/app/javascript/sprocket_asset_import/index.js
index 40a1dbcd5..f36d371a8 100644
--- a/app/javascript/sprocket_asset_import/index.js
+++ b/app/javascript/sprocket_asset_import/index.js
@@ -1,5 +1,11 @@
 import './flash';
 import './color_mode_picker';
 
+<<<<<<< HEAD
 import './editor';
 import './request_for_comments';
+=======
+import './base'
+
+import './request_for_comments'
+>>>>>>> 787f0509 (refactor: Move Sprocket JS files to Webpack)
diff --git a/app/assets/javascripts/markdown_editor.js b/app/javascript/sprocket_asset_import/markdown_editor.js
similarity index 100%
rename from app/assets/javascripts/markdown_editor.js
rename to app/javascript/sprocket_asset_import/markdown_editor.js
diff --git a/app/assets/javascripts/programming_groups.js b/app/javascript/sprocket_asset_import/programming_groups.js
similarity index 98%
rename from app/assets/javascripts/programming_groups.js
rename to app/javascript/sprocket_asset_import/programming_groups.js
index fa74658d2..d572ba702 100644
--- a/app/assets/javascripts/programming_groups.js
+++ b/app/javascript/sprocket_asset_import/programming_groups.js
@@ -48,3 +48,5 @@ $(document).on('turbo-migration:load', function (event) {
         });
     }
 });
+
+export default ProgrammingGroups;
diff --git a/app/assets/javascripts/shell.js b/app/javascript/sprocket_asset_import/shell.js
similarity index 100%
rename from app/assets/javascripts/shell.js
rename to app/javascript/sprocket_asset_import/shell.js
diff --git a/app/assets/javascripts/statistics_activity_history.js b/app/javascript/sprocket_asset_import/statistics_activity_history.js
similarity index 100%
rename from app/assets/javascripts/statistics_activity_history.js
rename to app/javascript/sprocket_asset_import/statistics_activity_history.js
diff --git a/app/assets/javascripts/statistics_graphs.js b/app/javascript/sprocket_asset_import/statistics_graphs.js
similarity index 100%
rename from app/assets/javascripts/statistics_graphs.js
rename to app/javascript/sprocket_asset_import/statistics_graphs.js
diff --git a/app/assets/javascripts/submission_statistics.js b/app/javascript/sprocket_asset_import/submission_statistics.js
similarity index 100%
rename from app/assets/javascripts/submission_statistics.js
rename to app/javascript/sprocket_asset_import/submission_statistics.js
diff --git a/app/javascript/sprocket_asset_import/turtle.js b/app/javascript/sprocket_asset_import/turtle.js
index 0ee607d20..6f8395153 100644
--- a/app/javascript/sprocket_asset_import/turtle.js
+++ b/app/javascript/sprocket_asset_import/turtle.js
@@ -4,7 +4,7 @@
 var height;
 var width;
 
-function Turtle(canvas) {
+window.Turtle = function (canvas) {
     var dx, dy, xpos, ypos;
     this.canvas = canvas; // jQuery object
 
diff --git a/app/assets/javascripts/working_time_graphs.js b/app/javascript/sprocket_asset_import/working_time_graphs.js
similarity index 100%
rename from app/assets/javascripts/working_time_graphs.js
rename to app/javascript/sprocket_asset_import/working_time_graphs.js
diff --git a/package.json b/package.json
index 695f14626..cbb88adb7 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "@github/webauthn-json": "^2.1.1",
     "@hotwired/turbo-rails": "^8.0.16",
     "@popperjs/core": "^2.11.8",
-    "@sentry/browser": "^9.40.0",
+    "@rails/actioncable": "^8.0.200",
+    "@sentry/browser": "^9.39.0",
     "@toast-ui/editor": "^3.2.2",
     "@webpack-cli/serve": "^3.0.1",
     "ace-builds": "^1.43.2",
diff --git a/yarn.lock b/yarn.lock
index 42f38b754..dc8ba8bc8 100644
--- a/yarn.lock
+++ b/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
@@ -1570,7 +1570,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sentry/browser@npm:^9.40.0":
+"@sentry/browser@npm:^9.39.0":
   version: 9.40.0
   resolution: "@sentry/browser@npm:9.40.0"
   dependencies:
@@ -2612,7 +2612,8 @@ __metadata:
     "@github/webauthn-json": "npm:^2.1.1"
     "@hotwired/turbo-rails": "npm:^8.0.16"
     "@popperjs/core": "npm:^2.11.8"
-    "@sentry/browser": "npm:^9.40.0"
+    "@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"
     ace-builds: "npm:^1.43.2"