From 63093d8f41a794d147c150668468a0eba33a709c 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/5] 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 448b6d94d319969e5a17a234d51baf02d304e0a9 Mon Sep 17 00:00:00 2001
From: Armin Kirchner <post.armin@gmail.com>
Date: Mon, 28 Jul 2025 09:51:48 +0200
Subject: [PATCH 2/5] kebab case

---
 app/javascript/application.js                                 | 2 +-
 .../color-mode-picker.js}                                     | 0
 .../{sprocket_asset_import => sprocket-asset-import}/flash.js | 0
 app/javascript/sprocket-asset-import/index.js                 | 4 ++++
 .../request-for-comments.js}                                  | 0
 app/javascript/sprocket_asset_import/index.js                 | 4 ----
 6 files changed, 5 insertions(+), 5 deletions(-)
 rename app/javascript/{sprocket_asset_import/color_mode_picker.js => sprocket-asset-import/color-mode-picker.js} (100%)
 rename app/javascript/{sprocket_asset_import => sprocket-asset-import}/flash.js (100%)
 create mode 100644 app/javascript/sprocket-asset-import/index.js
 rename app/javascript/{sprocket_asset_import/request_for_comments.js => sprocket-asset-import/request-for-comments.js} (100%)
 delete mode 100644 app/javascript/sprocket_asset_import/index.js

diff --git a/app/javascript/application.js b/app/javascript/application.js
index 7b2e9f1b6..535705280 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -91,4 +91,4 @@ 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';
+import 'sprocket-asset-import';
diff --git a/app/javascript/sprocket_asset_import/color_mode_picker.js b/app/javascript/sprocket-asset-import/color-mode-picker.js
similarity index 100%
rename from app/javascript/sprocket_asset_import/color_mode_picker.js
rename to app/javascript/sprocket-asset-import/color-mode-picker.js
diff --git a/app/javascript/sprocket_asset_import/flash.js b/app/javascript/sprocket-asset-import/flash.js
similarity index 100%
rename from app/javascript/sprocket_asset_import/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..4841d256b
--- /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/javascript/sprocket_asset_import/request_for_comments.js b/app/javascript/sprocket-asset-import/request-for-comments.js
similarity index 100%
rename from app/javascript/sprocket_asset_import/request_for_comments.js
rename to app/javascript/sprocket-asset-import/request-for-comments.js
diff --git a/app/javascript/sprocket_asset_import/index.js b/app/javascript/sprocket_asset_import/index.js
deleted file mode 100644
index c5c240fee..000000000
--- a/app/javascript/sprocket_asset_import/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import './flash';
-import './color_mode_picker';
-
-import './request_for_comments';

From 721f80eb2e444231e146d7bc4c305390904b7860 Mon Sep 17 00:00:00 2001
From: Armin Kirchner <post.armin@gmail.com>
Date: Wed, 30 Jul 2025 13:49:43 +0200
Subject: [PATCH 3/5] Move flash messages CSS to app.

---
 app/assets/stylesheets/application.css         | 4 ----
 {lib => app}/assets/stylesheets/flash.css.scss | 0
 2 files changed, 4 deletions(-)
 rename {lib => app}/assets/stylesheets/flash.css.scss (100%)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index f828f9cd9..288b9ab71 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -10,10 +10,6 @@
  * files in this directory. Styles in this file should be added after the last require_* statement.
  * It is generally better to create a new file per style scope.
  *
- * lib/assets
- *= require flash
- *
- * app/assets
  *= require_tree .
  *= require_self
  */
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

From 85c490b2ba7cd57d38486a0f3e38e59c9c51c319 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 4/5] refactor: Move Sprocket JS files to Webpack (Part 2)

Code editor modules are moved and modularized for later removal from
global scope.

Relates to #3021
---
 app/assets/javascripts/application.js         |  6 +-----
 .../sprocket-asset-import}/editor/ajax.js     |  2 +-
 .../sprocket-asset-import}/editor/editor.js   | 14 +++++++++-----
 .../editor/evaluation.js                      |  2 +-
 .../editor/execution.js                       |  4 +++-
 .../sprocket-asset-import/editor/index.js     | 19 +++++++++++++++++++
 .../editor/participantsupport.js              |  6 +++---
 .../sprocket-asset-import}/editor/prompt.js   |  4 ++--
 .../editor/submissions.js                     |  2 +-
 .../sprocket-asset-import}/editor/turtle.js   |  4 +++-
 .../editor/websocket.js                       |  4 +++-
 app/javascript/sprocket-asset-import/index.js |  1 +
 .../sprocket-asset-import}/turtle.js          |  2 +-
 13 files changed, 48 insertions(+), 22 deletions(-)
 rename app/{assets/javascripts => javascript/sprocket-asset-import}/editor/ajax.js (95%)
 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 (98%)
 create mode 100644 app/javascript/sprocket-asset-import/editor/index.js
 rename app/{assets/javascripts => javascript/sprocket-asset-import}/editor/participantsupport.js (98%)
 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 (96%)
 rename app/{assets/javascripts => javascript/sprocket-asset-import}/editor/websocket.js (97%)
 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 95%
rename from app/assets/javascripts/editor/ajax.js
rename to app/javascript/sprocket-asset-import/editor/ajax.js
index 127944f63..7d1a51128 100644
--- a/app/assets/javascripts/editor/ajax.js
+++ b/app/javascript/sprocket-asset-import/editor/ajax.js
@@ -1,4 +1,4 @@
-CodeOceanEditorAJAX = {
+export default {
   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 f0e27c220..be381d2f7 100644
--- a/app/assets/javascripts/editor/editor.js
+++ b/app/javascript/sprocket-asset-import/editor/editor.js
@@ -1,4 +1,6 @@
-var CodeOceanEditor = {
+import { CodeOceanEditorTips }  from './participantsupport';
+
+const CodeOceanEditor = {
     THEME: window.getCurrentTheme() === 'dark' ? 'ace/theme/tomorrow_night' : 'ace/theme/tomorrow',
 
     //Color-Encoding for Percentages in Progress Bars (For submissions)
@@ -28,8 +30,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 +391,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 +670,7 @@ var CodeOceanEditor = {
 
     publishCodeOceanEvent: function (payload) {
         if (this.sendEvents) {
-            $.ajax(this.eventURL, {
+            $.ajax(this.eventURL(), {
                 type: 'POST',
                 cache: false,
                 dataType: 'JSON',
@@ -1170,3 +1172,5 @@ var CodeOceanEditor = {
         CodeOceanEditor.editors = [];
     }
 };
+
+export default CodeOceanEditor;
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..72717372e 100644
--- a/app/assets/javascripts/editor/evaluation.js
+++ b/app/javascript/sprocket-asset-import/editor/evaluation.js
@@ -1,4 +1,4 @@
-CodeOceanEditorEvaluation = {
+export default {
     // 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 98%
rename from app/assets/javascripts/editor/execution.js
rename to app/javascript/sprocket-asset-import/editor/execution.js
index d727c63cb..8fd1da306 100644
--- a/app/assets/javascripts/editor/execution.js
+++ b/app/javascript/sprocket-asset-import/editor/execution.js
@@ -1,4 +1,6 @@
-CodeOceanEditorWebsocket = {
+import CommandSocket from './websocket'
+
+export default {
   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..4b737ee11
--- /dev/null
+++ b/app/javascript/sprocket-asset-import/editor/index.js
@@ -0,0 +1,19 @@
+import CodeOceanEditorAJAX from './ajax';
+import CodeOceanEditor from './editor';
+import CodeOceanEditorEvaluation from './evaluation';
+import CodeOceanEditorWebsocket from './execution';
+import { CodeOceanEditorFlowr, CodeOceanEditorRequestForComments }  from './participantsupport';
+import CodeOceanEditorPrompt from './prompt';
+import CodeOceanEditorSubmissions from './submissions';
+import CodeOceanEditorTurtle from './turtle';
+
+// TODO: Import explicitly in Part 3 of the asset migration.
+window.CodeOceanEditorAJAX = CodeOceanEditorAJAX;
+window.CodeOceanEditor = CodeOceanEditor;
+window.CodeOceanEditorEvaluation = CodeOceanEditorEvaluation;
+window.CodeOceanEditorWebsocket = CodeOceanEditorWebsocket;
+window.CodeOceanEditorFlowr = CodeOceanEditorFlowr;
+window.CodeOceanEditorPrompt = CodeOceanEditorPrompt;
+window.CodeOceanEditorRequestForComments = CodeOceanEditorRequestForComments;
+window.CodeOceanEditorSubmissions = CodeOceanEditorSubmissions;
+window.CodeOceanEditorTurtle = CodeOceanEditorTurtle;
diff --git a/app/assets/javascripts/editor/participantsupport.js b/app/javascript/sprocket-asset-import/editor/participantsupport.js
similarity index 98%
rename from app/assets/javascripts/editor/participantsupport.js
rename to app/javascript/sprocket-asset-import/editor/participantsupport.js
index b2223a3e1..d11d72090 100644
--- a/app/assets/javascripts/editor/participantsupport.js
+++ b/app/javascript/sprocket-asset-import/editor/participantsupport.js
@@ -1,4 +1,4 @@
-CodeOceanEditorFlowr = {
+export const CodeOceanEditorFlowr = {
   flowrResultHtml:
     '<div class="card mb-2">' +
       '<div id="{{headingId}}" role="tab" class="card-header">' +
@@ -111,7 +111,7 @@ CodeOceanEditorFlowr = {
   }
 };
 
-CodeOceanEditorRequestForComments = {
+export const CodeOceanEditorRequestForComments = {
   requestComments: function () {
     const cause = $('#requestComments');
     this.newSentryTransaction(cause, async () => {
@@ -172,7 +172,7 @@ CodeOceanEditorRequestForComments = {
   }
 };
 
-CodeOceanEditorTips = {
+export const CodeOceanEditorTips = {
     initializeEventHandlers: function() {
         const card_headers = $('#tips .card-collapse');
         for (let tip of card_headers) {
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..727520055 100644
--- a/app/assets/javascripts/editor/prompt.js
+++ b/app/javascript/sprocket-asset-import/editor/prompt.js
@@ -1,4 +1,4 @@
-CodeOceanEditorPrompt = {
+export default {
     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..8c0fe7165 100644
--- a/app/assets/javascripts/editor/submissions.js
+++ b/app/javascript/sprocket-asset-import/editor/submissions.js
@@ -1,4 +1,4 @@
-CodeOceanEditorSubmissions = {
+export default {
   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 96%
rename from app/assets/javascripts/editor/turtle.js
rename to app/javascript/sprocket-asset-import/editor/turtle.js
index 8432d8b96..f213ebb6e 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';
+
+export default {
   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 97%
rename from app/assets/javascripts/editor/websocket.js
rename to app/javascript/sprocket-asset-import/editor/websocket.js
index a1d397327..bf83920d0 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) {
+const CommandSocket = function(url, onOpen) {
   this.handlers = {};
   this.websocket = new WebSocket(url);
   this.websocket.onopen = onOpen;
@@ -120,3 +120,5 @@ CommandSocket.prototype.killWebSocket = function() {
   this.websocket.flush();
   this.websocket.close(1000);
 };
+
+export default CommandSocket;
diff --git a/app/javascript/sprocket-asset-import/index.js b/app/javascript/sprocket-asset-import/index.js
index 4841d256b..acf4bd558 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..ac53fcbe1 100644
--- a/app/assets/javascripts/turtle.js
+++ b/app/javascript/sprocket-asset-import/turtle.js
@@ -4,7 +4,7 @@
 var height;
 var width;
 
-function Turtle(canvas) {
+export default function Turtle(canvas) {
     var dx, dy, xpos, ypos;
     this.canvas = canvas; // jQuery object
 

From c60094e956b38be6c5d04862ffbf5e28180ffb6b Mon Sep 17 00:00:00 2001
From: Armin Kirchner <post.armin@gmail.com>
Date: Mon, 28 Jul 2025 10:36:14 +0200
Subject: [PATCH 5/5] Import routes directly.

---
 app/javascript/sprocket-asset-import/editor/editor.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/javascript/sprocket-asset-import/editor/editor.js b/app/javascript/sprocket-asset-import/editor/editor.js
index be381d2f7..cad8694da 100644
--- a/app/javascript/sprocket-asset-import/editor/editor.js
+++ b/app/javascript/sprocket-asset-import/editor/editor.js
@@ -1,3 +1,4 @@
+import * as Routes from 'generated/routes';
 import { CodeOceanEditorTips }  from './participantsupport';
 
 const CodeOceanEditor = {