Weekly Blog Post #10

vinayaksh42
Published: 08/09/2021

Hey all!

Eos-Icons Vue

While implementing a solution for Vue npm package I came across a problem which was due to breaking changes between Vue 2 and Vue 3. Vue 3 supports functional component where as Vue 2 required a vue-styled component, due to this the solution implemented by me was only suitable for Vue 3. I did some research on this topic and came across other component libraries for Vue and found a common point among most of them. All the older Vue libraries still support Vue 2 and are unable to either support Vue 3 (using the same package used for vue2) or have a completely different package for Vue 3. After a discussion with my mentors we finally decided to develop 2 different npm packages for Vue 2 and Vue 3.

Vue 3

Implementing a package for Vue 3 was fairly simple and mostly based on the work done for Eos-Icons React npm package as it supports functional components. For testing out my solution I created a git repo and a sandbox for testing out the package being built. The only significant difference was during building the final package. For building all the files into commonjs and esnext format I have used vc-tools.

sandbox link - https://codesandbox.io/s/affectionate-wilson-zgdb3?file=/src/App.vue

Webpack analyzer image (package supports tree shaking)

webpack result I have created a pull request which includes the basic structure of the package as well as all the props (size, color, rotation and Flip).

Vue 2

Vue 2 required a completely different approach compared to Vue 3 or React npm package. Due to the breaking changes between Vue 2 and Vue 3, the package built for Vue 3 was unable to run with Vue 2. Which resulted in creating a completely different package for Vue 2. I created a Vue-style component template for Vue 2 which provides a similar user experience despite being different from the other package. Link to Vue 2 template. Same as the Vue 3 package I made a sandbox for trying out the Vue 2 package (These packages are not yet published and only for testing).

Sandbox link for Vue 2 - https://codesandbox.io/s/icy-currying-sv7ei?file=/src/App.vue

Webpack analyzer image (package supports tree shaking)

webpack result
DJDT

Versions

Time

Settings from gsoc.settings

Headers

Request

SQL queries from 1 connection

Static files (2312 found, 3 used)

Templates (11 rendered)

Cache calls from 1 backend

Signals

Log messages