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

[arkirchner]

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

Confirmed features:

• Flash messages
• RfC report, comment, and resolve flow.
• Theme changeing.

Relates to #3021

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 70.08%. Comparing base (97de3f3) to head (95f91ba).
⚠️ Report is 6 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3025   +/-   ##
=======================================
  Coverage   70.08%   70.08%           
=======================================
  Files         215      215           
  Lines        6850     6850           
=======================================
  Hits         4801     4801           
  Misses       2049     2049           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[christophblessing]

Why did you migrate these exact files first? Are they somehow connected or is it because you did not have to make any adjustments to them?

[MrSerth]

Given the "independent" files color_mode_picker.js and flash.js (originating from lib), why did you decide to mingle them within the sprocket_asset_import folder rather than finishing the migration exemplary for them?

[arkirchner]

@christophblessing
I choose to start with files that I worked with recently. It is easy for me to test this feature because I am still familiar. I stopped adding more files because I thought the amount would be enough for a first release.

[arkirchner]

@MrSerth @christophblessing
If we have a lib (library) I think of some code that is independent from the application. Since UI and application changes will influence the functionality of these files it is application code.

I didn't move the CSS at this point. It still is in the lib folder. I didn't want to integrate CSS changes here.

[MrSerth]

@MrSerth @christophblessing If we have a lib (library) I think of some code that is independent from the application. Since UI and application changes will influence the functionality of these files it is application code.

Thanks for your answer. I am not fully convinced of your argumentation yet. For example, when looking at the color_mode_picker.js: Why is it not independent of the application? It is mostly copied over from the Bootstrap documentation as acknowledged in the comment and only adapted to work with Turbo. Otherwise, it is unchanged and should work with other Bootstrap-enabled sites as wel.

I didn't move the CSS at this point. It still is in the lib folder. I didn't want to integrate CSS changes here.

Mh, I see. What is your long-term plan for CSS, then?

[arkirchner]

Otherwise, it is unchanged and should work with other Bootstrap-enabled sites as well.

Well the event listener is my concern here. It is very coupled to application behavior. There might be reasons to keep this file in some kind of lib folder; however, there is not really a reason to create a lib folder for one file.

Mh, I see. What is your long-term plan for CSS, then?

I am not sure at the moment.

[arkirchner]

@MrSerth I want to move forward with this. Surely keeping this in the lib folder cannot be that important.

[MrSerth]

@MrSerth I want to move forward with this. Surely keeping this in the lib folder cannot be that important.

Thanks for confirming we are on the same page.

I didn't expect you'd be waiting for me here, currently. I thought there would be a response to the long-term migration strategy involving CSS, some progress with finishing the migration of the two former "lib" files, or some update on your planned research on the Webpack loading order or other details in this discussion of Part 2.

That being said, I don't mind much of the folder, despite thinking that mingling parts of these "not-so-close" files together with the main application logic isn't completely desirable.

[arkirchner]

Thanks for the feedback.

I went ahead and moved the CSS files into the app directory. Work on the Webpack will happen in the next steps.