Skip to content

refactor: Move Sprocket JS files to Webpack (Part 1) #3025

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

refactor: Move Sprocket JS files to Webpack (Part 1) #3025

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
63093d8
refactor: Move Sprocket JS files to Webpack (Part 1)
arkirchner Jul 17, 2025
448b6d9
kebab case
arkirchner Jul 28, 2025
721f80e
Move flash messages CSS to app.
arkirchner Jul 30, 2025
95f91ba
Use require avoiding hoisted imports
arkirchner Jul 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions app/assets/javascripts/application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 0 additions & 4 deletions app/assets/stylesheets/application.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
0 lib/assets/stylesheets/flash.css.scss → app/assets/stylesheets/flash.css.scss
View file
Open in desktop
File renamed without changes.
4 changes: 4 additions & 0 deletions app/javascript/application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
require('sprocket-asset-import');
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My solution for the issue in Part 2 is to not include the files but to require them. I am giving up on import to avoid issues with hoisted imports that require later imports.

I refactor the JavaScript to use imports after initially moving the files.

0 lib/assets/javascripts/color_mode_picker.js → ...procket-asset-import/color-mode-picker.js
View file
Open in desktop
File renamed without changes.
0 lib/assets/javascripts/flash.js → ...javascript/sprocket-asset-import/flash.js
View file
Open in desktop
File renamed without changes.
4 changes: 4 additions & 0 deletions app/javascript/sprocket-asset-import/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
require('./flash');
require('./color-mode-picker');

require('./request-for-comments');
0 ...ssets/javascripts/request_for_comments.js → ...cket-asset-import/request-for-comments.js
View file
Open in desktop
File renamed without changes.