This report consolidates the progress made during the first phase of Google Summer of Code 2024 coding period for the Simulator Version Control project with CircuitVerse.

About my Project

My Project aims to implement a version control system for the CircuitVerse Vue simulator to maintain compatibility of circuits while allowing for independent simulator updates and version switching.

Community Bonding Period @Circuitverse

We had our first meeting with all the mentors and contributors, and it was a pleasure to meet everyone. The meeting was very productive, allowing us to learn more about CircuitVerse’s culture and its mission to provide free digital logic circuit simulators to over half a million people. These exchanges promoted understanding and laid the groundwork for effective teamwork through shared experiences and technological discussions.

Milestones Achieved

Tasks Completed So Far:

• Versioning directories
• Modifying the build script
• Adding a version column to the projects schema.
• Creating a bash script to build different versions for Vite
• Implementing hot-swapping of the Vue simulator from the main CircuitVerse repository by taking query parameter (simver).

Versioning Directory

The foundational task for the simulator versioning was to create separate directories for different versions of Vue simulator. I moved the src directory of the vue simulator to different versions (v0 and v1) and adjusted the required imports in the files.

Vue Simulator Architecture

Pull Requests

• Adding Versioned Directory (v0 and v1)

Modifying the Build script

With the directories restructured for different simulator versions, the build configurations needed to be changed to serve the correct version when required.

• A version.json file was created to store the description, date, and name of each version.

• The build script in the Vue simulator was modified to build different versions based on the version variable, iterating through the version.json file.

• Separate files were created for the two versions and built using a bash script.

• The script was updated to save builds in separate directories for each version as public/simulatorvue/v0 and public/simulatorvue/v1 in the Main CircuitVerse repository.

Pull Request

• Build Script Modification

Adding a version column to the projects schema.

To store the version of the circuit in the database, a new column named version was added.

Pull Request

• Adding version column to Projects table

Hot-Swapping Implementation

To swap versions of the simulator, I used a query parameter (simver) in the URL to serve the appropriate version. If simver=v0, version v0 is served; if simver=v1, version v1 is served.

• The path of the entry point in index.html was changed from src/main.ts to version/main.ts to modify the serving file accordingly.

• The logic to change the simulator version variable based on the version was added to another file and imported into version/main.ts.

• The correct version was imported according to the specified simver variable.

Pull Request

• Enable Main simulator to load Vue simulator

FINAL RESULT

In this video, the version is specified on the navbar soleley for representation purposes. It is not included in the actual project or code.

Learnings

• Gained an understanding of how the Vue simulator works, particularly the query parameters and imports.
• Learned more about version control systems.
• Acquired knowledge of best practices to follow while writing code.

Conclusion

Phase 1 of GSoC 2024 at CircuitVerse focused on implementing a simulator version control system, enhancing technical skills in Vue.js and scripting, and reinforcing best coding practices.