# 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
    
    ```bash
    bundle install vite_rails
    ```
    
2. Run this to generate the configuration files
    
    ```bash
    bundle exec vite install
    ```
    
3. In `config/vite.json` you can put the Vite dev server's configuration
    
    ```json
    {
      "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`
    
    ```ruby
    <%= 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
            
            ```xml
            <script src="https://example.com/example.js" defer>
            ```
            
        3. In the usual Script, add the EventListener for `load` event
            
            ```xml
            <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
    
    ```apache
    vite: bin/vite dev
    ```
    
9. Now we can access the UI as usual, and Vite will take care of asset delivery and Hot Reloads.
    

**<mark>PR - </mark>** [<mark>https://github.com/CircuitVerse/CircuitVerse/pull/3777</mark>](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
    
    ```bash
    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
    
    ```bash
    bundle install steep
    ```
    
7. Create `Steepfile` for its configuration
    
    ```apache
    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.
    

**<mark>PR -</mark>** [<mark>https://github.com/CircuitVerse/CircuitVerse/pull/3807</mark>](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.