Week 3 - CircuitVerse@GSOC'23

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 -

1. Install ruby_rails gem

    bundle install vite_rails
   

2. Run this to generate the configuration files

    bundle exec vite install
   

3. 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
      }
    }
   

4. In the default config, it chooses app/javascript for entry points

5. We remove the simulator.js from esbuild and move to Vite by dragging the file to this directory

6. Now in the *.erb files, we need to replace javascript_tag with vite_javascript_tag

    <%= vite_javascript_tag "simulator" %>
   

7. 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.

   1. vite_javascript_tag adds type=module and async tag to Script

   2. After async tags execution defer tags will be executed.

   3. After all assets are loaded, the load event will be fired.

   4. So the flow will be like

      1. Put vite_javascript_tag at the start or head of the HTML

      2. Wherever you have <script src="https://example.com/example.js"> use defer in it

          <script src="https://example.com/example.js" defer>
         

      3. In the usual Script, add the EventListener for load event

          <script>
          window.addEventListener("load", function() {
            // Your code goes here
          })
          </script>
         

      4. That's all

8. Then, we need to add Vite dev server in Procfile.dev to run it with Foreman

    vite: bin/vite dev
   

9. 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

• a) Static Type Checking Validation

• b) LSP Support

  • Some LSP like solargraph added support to provide Language Autocompletion based on the RBS files.

Integration -

1. For Rails, we install rbs_rails better support for Rails

    bundle install rbs_rails
   

2. Add .gem_rbs_collection in the .gitignore

3. Run rbs collection init to generate config files

4. Run rbs collection install to download rbs files of our Gem

5. We can use steep for static type checking

6. So add steep gem

    bundle install steep
   

7. Create Steepfile for its configuration

    target :app do
      signature "sig"
      check "app"
    end
   

8. That's all

But, there is some issue with RBS

1. 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.