Articles on vinayaksh42's Blog

Weekly Blog Post #12

vinayaksh42@gmail.com (vinayaksh42) — Mon, 23 Aug 2021 16:30:20 +0000

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 💖

Weekly Check-In #11

vinayaksh42@gmail.com (vinayaksh42) — Mon, 16 Aug 2021 15:08:54 +0000

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

Weekly Blog Post #10

vinayaksh42@gmail.com (vinayaksh42) — Mon, 09 Aug 2021 14:57:47 +0000

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)

Weekly Check-In #9

vinayaksh42@gmail.com (vinayaksh42) — Mon, 02 Aug 2021 14:30:10 +0000

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

Weekly Blog Post #8

vinayaksh42@gmail.com (vinayaksh42) — Mon, 26 Jul 2021 15:43:34 +0000

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!

Weekly Check-In #7

vinayaksh42@gmail.com (vinayaksh42) — Mon, 19 Jul 2021 10:37:06 +0000

Hey all!

What did you do this week?

This week I worked on implementing Storybook for all the Icon components that are being generated. For being able to do this, I created a Storybook template using which I produced stories for each and every Icon Components. The demonstration of all the React components will become much more easier and understandable using storybook. It also provides instructions about all the different types of props that are supported by the Component. Other than this I have also started to work towards creating an npm package for VUE.js for EOS-Icons. It will be largely based on the React extension but a couple of changes according to the framework.

What is coming up next?

In the next couple of weeks I am going to be focusing towards building the VUE.js npm package. Will also finish the few test cases remaining in the React package as well.

Did I stuck anywhere?

There were a few problems while configuring Storybook for TypeScript but after going through the Storybook docs extensively I was able to properly implement it.

Weekly Blog Post #6

vinayaksh42@gmail.com (vinayaksh42) — Mon, 12 Jul 2021 16:16:18 +0000

Hey all!

Half duration of the coding phase has almost come to end. With first evaluations starting soon, I have been readily engaged with my mentors in order to add more features and improve the current ones.

Testing using JEST

Why does this project require testing?

One of the most important part of a project is the tests that can be utilized to verify if or not the final build is working as expected. The advantage of having tests setup is that all of the future commits will have to go through the tests before getting merged in the codebase. This helps in making the final component package highly reliable.

Implementation of the tests

The decision for picking JEST as the testing framework was largely based on the ease of testing React components that JEST provides. In a early PR I added tests using snapshots which later turned out to be a not so good idea for testing. Later it was switched to a more robust way of testing by using the toHaveAttribute property for checking if the props are being applied to the SVG or not. The test suite consists of the 3 different types which are - filled, outlined and animated. This helps in verifying the state of the different types of SVGs.

Naming convention

The naming convention is something that will ultimately decide the user experience for using EOS-Icons React. Earlier PascalCase was being used which was not user friendly as it was difficult to edit out the icon name. Finally we are using SCREAMING_SNAKE_CASE as it makes the edit of the icon name as well as the theme a lot more simple. The current naming convention looks like this - EOS_ICON_THEME

Multi theme React components

Currently EOS icons React has icon component based on themes like animated / outlined / filled. Almost all of the filled SVG icons have a outlined variant and there are several use cases in which a project might use both the themes of a icon for example:- a rating website might have outlined stars initially ☆ and upon selecting those stars it will turn into a filled star ★ , In order to solve this issue we have decided to add this as a type of React component which will contain both filled as well as outline SVG, which will be changeable using the "theme" prop.

For the upcoming week I am planning to further improve the code base of the above mentioned changes as well as work on having a proper documentation that will help the user in using EOS-Icons React in a efficient way

Weekly Check-In #5

vinayaksh42@gmail.com (vinayaksh42) — Mon, 05 Jul 2021 11:51:24 +0000

Hey all!

What did you do this week?

This week I worked on implementing various different types of tests using JEST. There are a total of 3 different test suites for the 3 different types of icons (filled/outlined/animated). The tests are for checking if or not the produced React SVG component is being built in the right manner. The tests also contain a check for the various different props (color/size/rotation/flip). These tests will provide a setup in which we will be able to verify future addition to the React component template. I have added a new prop that is the flip prop. The flip prop consists of two different sub-props, that is horizontalFlip and verticalFlip. The flip prop required a function for fetching the values of scaleX, scaleY, TranslateX and TranslateY. I added a common function which will provide the React component with the correct transformation values depending upon the Flip prop. I have also setup the semantic versioning for the repo and published a early version of the package to npm, so that it is easy to test out the package that is being produced. EOS-Icons React. Upon testing the actual load that is being put by the package for using a single icon equals to roughly 1kb, Which shows that the package is working in a tree shaking manner (only the load of icon being used is put).

What is coming up next?

For the upcoming week I am going to work mainly on making a Documentation on "how to use Eos-icons React" as well as work on improving the code overall so that we can move towards a complete launch of the new package.

Did I stuck anywhere?

I got a bit stuck on the decision for picking out the best framework for testing out the package. With the help of my mentors I was finally able to implement all the tests using JEST.

Weekly Blog Post #4

vinayaksh42@gmail.com (vinayaksh42) — Mon, 28 Jun 2021 11:31:41 +0000

Hey all!

The third week was full of implementing new features and learning about new concepts.

Script for scaffolding React components

During the third week of the coding phase I worked on the core logic of the project that is the Script responsible for scaffolding the various different SVGs into React components which are JavaScript as well as TypeScript supported. The script can be broken down into a few sub parts for easier explanation.

Fetching SVG data: The first step in order to build out the React component is to fetch the required SVG data from the .svg files. To do this i have used "fs" readFile functionality, it reads the required SVG file and returns the SVG data which is later on used for creating the component.
Props for modification: EOS-Icons natively supports a lot of modifications like color, size, rotation, Horizontal flip and vertical flip. My aim for this step was to add all these modifications as props for the React components. This was possible by simply modifying the SVG data that was earlier fetched in the last step. Currently I have added support for changing color, size, flip as well as rotation. In future more props can be added easily. The size prop and flip prop required extra logic, Basically EOS-icons currently has pre defined sizes like- "s","m","xxl",etc. I have added a size map in order to provide the user with these pre-defined sizes. Similarly i also made a common function for the flip prop incase the user wants to flip the SVG
Writting the components: The last step was to write all the various different SVG components under the destination src/icons/ along with a index.tsx file which is responsible for exporting all the components to the user.

Build commands

The project is completely build in TypeScript but in order to support JavaScript based React projects it required a TypeScript build config for producing files that are supported by JavaScript. The two main build commands produces the project in commonjs (cjs) format as well as esnext format under lib and es folder respectively. These are the folders which will be published on npm and utilised by the users.

Weekly Check-In #3

vinayaksh42@gmail.com (vinayaksh42) — Mon, 21 Jun 2021 12:17:03 +0000

Hey all!

What did you do this week?

After getting approval on the new implementation of EOS-Icons React package from my mentors I have started to push commits to main repository. This first pull request was regarding the initial setup of the project which contained the TypeScript configuration, Eslint configuration, package.json setting for publishing it over to npm and git ignore file for ignoring all the build folder. I also made a pull request for the setup of gulp for automating the process of fetching SVGs from "EOS-Icons" npm package. It required me to create functions for copying as well as deleting files.

What is coming up next?

For the next week i am going to be implementing the script for scaffolding React components from SVGs that will be fetched using gulp automation. The component will accept all the required props for modifying SVG as well as be Type safe for supporting TypeScript based React projects.

Did I stuck anywhere?

No, I did not get stuck anywhere but it required me to do a lot of research as well as learning for understanding how gulp works and how to use it for automation.

Weekly Blog Post #2

vinayaksh42@gmail.com (vinayaksh42) — Mon, 14 Jun 2021 15:44:08 +0000

Hey all!

First week of the coding period has come to an end. It was full of learning about new technologies and approaches for implementing EOS-Icons React npm package.

Fetching SVG files from 'EOS-Icons' npm package

The first step for building EOS-Icons React npm package is to fetch all the existing SVG files from the 'EOS-Icons' npm package, in order to maintain a consistency among the Icons that are displayed at EOS-Icons website and React package.

For completing this task i made use of Gulp, which helps in automating slow and repetitive workflows. Instead of using JavaScript i have used TypeScript in my project for providing type safety.

Gulp has namely two different types of composition structure (series and parallel). As the name suggests series is used for executing tasks one after another and parallel is used for executing tasks simultaneously. For copying files i nested all the different tasks into a parallel() composition.

Scaffolding react components using SVG data

The next process involves fetching of all the SVG data in a sequential manner and converting them into a React component. For doing this task i used the fs readfile function for reading all the SVG files sequentially. Later this SVG data was inserted into a React component template and written as a ".tsx" file. For importing all these React components I also scaffolded a index.tsx file at the root level of the project which would export all the components to the user.

Building the project for supporting TS and JS

In order to test the things that I have build till now, I added two build commands. The first build command builds the package using cjs and the second build command builds using esnext. As a result the package works with JavaScript based React projects as well as TypeScript based React projects.

I have also created a detailed readme that includes the meaning of all the commands and a detailed explanation of how the scripts work.

I will get this approach reviewed by my mentors this week and start working on adding props to the React components.

Weekly Check-In #1

vinayaksh42@gmail.com (vinayaksh42) — Thu, 10 Jun 2021 01:38:58 +0000

Hey, my name is Vinayak Sharma, I am a Second-year Electronics and communication engineering student from India. I will be working on creating an icon library for React during Google Summer of Code 2021. I am going to be working with EOS Design System on the project: EOS Icons react library.

About my project:

Currently EOS delivers icons via a set of well documented methods, which chiefly include EOS-Icons Package, CDN or direct download of icons in SVG/PNG formats. With the guidance and help of mentors, I want to develop an npm package that can deliver EOS Icons to its users as an independent component library and create a unified central system that will enable EOS to deliver its icons to various frameworks (e.g. React, Vue and Angular) independently. During the development process my chief goal would be to make this npm package as lightweight as possible in order to reduce the load put on the browser (using the tree shaking approach), which will create a smoother workflow for the users. Creating a central package of EOS Icons that can supply icons across React, Vue and Angular frameworks will go a long way in having a more consistent user experience as well as boost capability to accommodate users who migrate from one framework to another.

What did I do in the community bonding period?

There has been constant communication with mentors regarding the implementation of this project as it is going to be from scratch. I am really looking forward to work on this project. As the org is moving from GitLab to GitHub, I migrated the cra-eos-template repo to GitHub and created the GitHub workflows required for semantic release as it was previously using GitLab ci for semantic release.

What am I doing this week?

This week I will be working on implementing a base version of my project. I will be working with gulp files for automating the workflow of fetching all the different SVGs from the 'eos-icons' npm package.

Did I stuck anywhere?

Yes, I faced a few issues while implementing GitHub workflows as I was not previously well versed with the working of semantic release but with the help of mentors I was able to figure it out and implement the workflow