This week was a little bit hectic, and the integrations were a little bit error-prone. However, I fixed all the issues by following the GitHub Forum and Github Issues discussion of particular library/software.
The main tasks of this week -
Integrate Vite Rails
Initialization of RBS
Integrate Vite Rails
Purpose - We are mainly integrating Vite Rails and will move Simulator assets to Vite. Currently, CircuitVerse uses sprockets and esbuild to pack javascript files and serve through the asset pipeline.
So, What's the issue with the current setup?
The issue is mainly with development experience. When the developer modifies any Javascript / SCSS files, esbuild rebuilds the assets, and the user needs to refresh the page to see the changes, which is very time-consuming.
When Vite comes into the picture, It does not build the assets to a single *.js or *.css file.
The main features of Vite
Lazy Loading: It does not bundle all the javascript in one single file and then serve. It simply sends one entry point file to the browser and will recursively load all the dependency javascript and compiled SCSS files to the browser.
Hot Reload: Whenever there are any changes in javascript or SCSS files, the Vite client will manage to update that in the browser without refreshing the page. The entire page will be reloaded automatically if the 'Hot Reload' feature can't reflect any browser changes.
The end of the story is it will make the development experience much better than the previous setup.
Integration -
Install ruby_rails gem
bundle install vite_rails
Run this to generate the configuration files
bundle exec vite install
In config/vite.json you can put the Vite dev server's configuration
{
"all": {
"sourceCodeDir": "app/javascript",
"watchAdditionalPaths": []
},
"development": {
"autoBuild": true,
"publicOutputDir": "vite-dev",
"port": 3036
},
"test": {
"autoBuild": true,
"publicOutputDir": "vite-test",
"port": 3037
}
}
In the default config, it chooses app/javascript for entry points
We remove the simulator.js from esbuild and move to Vite by dragging the file to this directory
Now in the *.erb files, we need to replace javascript_tag with vite_javascript_tag
<%= vite_javascript_tag "simulator" %>
Here is a catch, Vite loads this javascript and SCSS asynchronously, so the other scripts may fail.
Assume you have some inline scripts required jQuery, but as Vite loads them asynchronously, the inline scripts will be executed without jQuery and throw a bunch of errors.
We can resolve the issue by following this.
vite_javascript_tag adds type=module and async tag to Script
After async tags execution defer tags will be executed.
After all assets are loaded, the load event will be fired.
So the flow will be like
Put vite_javascript_tag at the start or head of the HTML
Wherever you have <script src="https://example.com/example.js"> use defer in it
<script src="https://example.com/example.js" defer>
In the usual Script, add the EventListener for load event
<script>
window.addEventListener("load", function() {
})
</script>
That's all
Then, we need to add Vite dev server in Procfile.dev to run it with Foreman
vite: bin/vite dev
Now we can access the UI as usual, and Vite will take care of asset delivery and Hot Reloads.
PR - https://github.com/CircuitVerse/CircuitVerse/pull/3777
Initialization of RBS
Purpose - We know Ruby is a dynamically typed language. So type checking stuff is not available, which can lead to inconsistency in the codebase and create bugs by mistake. Ruby finally came up with RBS [Type Signature for Ruby], which adds support for static type checking. Which helps to solve two issues
Integration -
For Rails, we install rbs_rails better support for Rails
bundle install rbs_rails
Add .gem_rbs_collection in the .gitignore
Run rbs collection init to generate config files
Run rbs collection install to download rbs files of our Gem
We can use steep for static type checking
So add steep gem
bundle install steep
Create Steepfile for its configuration
target :app do
signature "sig"
check "app"
end
That's all
But, there is some issue with RBS
- like
ActiveSupport and meta-tags have some overlapped rbs for Object class, so when we run rbs validate , it will give an error for duplicate definitions. Currently managed it by manually deleting the duplicate rbs annotation.
PR - https://github.com/CircuitVerse/CircuitVerse/pull/3807
In the coming week, I hope to finish this RBS stuff and fix the issue described before.
Thanks a lot for reading this blog. If you like to know more about my GSOC journey and want to explore more in development, subscribe to the newsletter.
