Hi all!

Welcome to the final blog for Google Summer of Code'2021

Vue 2

The approach initially used for Vue 2 was very similar to the approach used for React and Vue 3 package. This approach required the user to do an extra step in order to consume the icon library. It required the user to enter the following config in vue.config.js file:

This was caused because the final components that were being published dependent on runtime Compiler, as the components were non-rendered/non-built.
For fixing this issue, I switched to Rollup for building out the final package. Rollup also provides support for TypeScript which helped in making the package support TypeScript based Vue 2 projects. 
Upon direct implementation, Rollup took around 25 to 26 minutes for building out the final package. This was being caused by TypeScript conversion, as Rollup converts each and every component's Type Declaration. To avoid this I implemented a script which made Rollup to convert one of the icon components Type Declaration and then copied the same Type Declaration for all the components as the props and interface used for each component is exactly the same. This helped us in reducing the build time to 5 to 6 minutes from 26 minutes.

EOS-icons Documentation

I have also updated the official docs page of Eos-icons. It now includes an in-depth documentation on "how to use Eos-icons" in a React, Vue 3 and Vue 2 based projects.

Future ideas

• Developing a npm package for Angular framework and React Native (highly being used for app development)
• Adding more props like skew
• More tests for checking component attributes after applying multiple props
• Creating a component in which the user can pass SVG and utilize the prop customization provided by eos-icons
• Adding a new section to EOS Icons website - docs for guiding the user with installation and usage process.

The past few months have been no less than magical! I had a lot of fun and learned a lot over this time duration, all because of the endless support of my awesome mentors. Google Summer of Code with the EOS community was by far the best experience. The guidance provided for setting up my development environment in a more proficient way to helping me solve complicated problems will surely help me in becoming a better developer. Will keep on contributing to EOS 💖

Hey all!

What did you do this week?

This week was spent in finishing up the Eos-Icons npm package for Vue 3 as well Vue 2. I have implemented tests using Jest and vue/test-utils. It was a bit difficult to set up the testing environment as the final files being produced were not directly compatible with vue test-utils and required conversion help of babel in order to be compatible. The tests cover all the props as well as the various themes. As the eos-icons React package has an option for common icon component, I added the support for the same in the Vue 3 package to maintain the consistency and user experience. I also added the config file, it helps in changing the default props before building the package. The Vue 3 npm package was published today 🎉, it is working as expected along with tree shaking capabilities.

What is coming up next?

For the final week, I will be working on getting the Vue 2 package published as soon as possible in order to make time for improving the documentation.

Did I stuck anywhere?

implementing tests using Vue/test-utils was a bit difficult, but with the help of babel I was able to implement a solution for it

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)

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)

Hey all!

What did you do this week?

This week was mostly spent on researching about the various different options suitable for creating a Vue npm package that supports tree shaking as well as TypeScript based Vue projects. I came across multiple ways for doing the same task, such as vue-sfc and inbuilt bundler of Vue for generating build files for Vue components. The main issue comes with tree shaking and compatibility with Vue 2 and Vue 3. I am currently working on implementiing a solution for Vue package using vue-sfc as it provides support for TypeScript and Rollup for generating build files. I worked on configuring Eos-Icons React npm package according to the Eslint semantic commit rules (used by EOS). I have also updated the project Readme for a better user-centric explanation of the package (Project Readme) .

What is coming up next?

I will work on implementing the Vue npm package as well as implement basic testing in order to get the package published as soon as possible.

Did I stuck anywhere?

I got stuck on setting up my development environment for developing Vue package. For the React package I used Webpack bundle analyzer for testing if or not the produced package is supporting tree shaking but for setting up the same environment in Vue it required a completely different method. It took me a while but ultimately after going through this github repo I was finally able to configure webpack bundle analyzer for Vue

Hey all!

Addition of Storybook

Why do we need Storybook?

Storybook is a really great tool for testing out components visually. It provides a great level of control over the component's prop. This helps us to further test out the Icon Components that we are building out for our npm Package.

Generating stories

Storybook requires components to be turned into stories in order to build them visually. The npm package has over 4,700+ Components which makes it completely impossible as well as not a sustainable solution to write down stories for each of those components manually. In the long run Eos-Icons will have addition of more SVG Icons and hence writing down 4,700+ stories for Storybook will most likely become a really bad implementation. To tackle this problem I wrote down a custom script for scaffolding the various types of Icon components into stories. This made the task a lot more easier as well as more reliable. The Eos-icons React npm package has 4 different types of icon variants. The first being the animated one which was generated completely differently and the remaining variants were related to each other so we decided to club those 3 types of variants under a single icon name in order to reduce the number of stories on Storybook. This made the Storybook a lot more easy to use. View the deployed version of storybook here

Testing the Common Component

Previously Eos-Icons React had tests for validating the 3 types of Icon components. With the addition of the 4th type (default - common component) it required addition of some new tests as the 4th type also has new prop named "theme". I added a new test file for the common component. All the tests added are almost similar to the previous tests except for the additional prop.

GitHub Actions Runtime

The Eos-icons React repo has mainly 3 different GitHub actions (tests, release, storybook-build). The GitHub actions were taking a significant amount of time previously but with the addition of node modules caching the time has gone down by almost 1-2 minutes per run.

Eos-Icons Vue

Eos-Icons React has almost reached it's completion, hence from this week onwards I will be shifting my major focus towards Eos-Icons Vue. I am really excited to start working on this part of the project!