DEV Community

Cover image for GSoC’24(CircuitVerse) Week 3 & 4
Niladri Adhikary
Niladri Adhikary

Posted on

3

GSoC’24(CircuitVerse) Week 3 & 4

This 2 weeks I have been focusing on Implementing the remaining components and VUE + TS Integration with removal of JQuery.

Some of the Components that I have Implemented are:

  • TestBench Panel.vue
  • TestBench Creator.vue
  • TestBench Validator.vue
  • Alert MessageBox

Vue + Typescript Integration for:

  • Project.ts
  • Utils.ts
  • Testbench.ts
  • Open Offline.vue

Pania Store came really in handy to Implement the state management very nicely, and i quite love its Functionalities

Implementation of TestBench Components

Image description

As planned in my proposal I started with implementing the creator component using vuetify and converted all jQuery & DOM manipulations to Vue's reactives and typescript integration.

Previously we were using the creator as a separate window, so this time Creating TestBenchCreator.vue eliminated the need to a extra window and the data transmission was done using pinia to transmit data between Creator and Testbench Panel component.

Image description

Next, the TestbenchPanel that was under the extra.vue file, was converted to Vue's reactives, all UI DOM manipulations that was previously there in the testbench.js was migrated to the component using Vue and Pinia.

Other Testbench components like the testbench validator and some dialog boxes are migrated as well in the same folder.

Also created a Testbench store in the pinia store folder for reactive state management of the test data.

PR LINK - https://github.com/CircuitVerse/cv-frontend-vue/pull/323

Vue + Typescript Integration

Typescript and Vue integrations were done in some files like project.ts, utils.ts, testbench.ts, Open Offline.vue Component initially more integrations will be done in the next weeks

PR LINK -
utils.ts - https://github.com/CircuitVerse/cv-frontend-vue/pull/325
project.ts - https://github.com/CircuitVerse/cv-frontend-vue/pull/324
Offline.vue - https://github.com/CircuitVerse/cv-frontend-vue/pull/318

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay