Refactoring and Dividing to files

 
Currently, after extracting the current line the validation functions are executed one after the other. Like so: 
 


It means that if someone were to add another feature he will need to add his validation function to this call sequence of validation functions.
This may lead to long sequence of function calls and also requires him to access our code directly.
So the goal is to allow other people to add new features to our extension in an easy and reuseable way.

We decided to make a new object (class) that holds a list of functions will be invoked one by one without the object knowing anything about the functions besides there signature.
If someone wants to add their validation function to the sequence all he needs is to know this new validation object.
This new object is named "validationObject" and it has 3 functions:
1. invokeValidationFunctions - this function goes over the functions in the list (" validateFunctionArray") and execute each one.
2. addValidateFunction - this function receives a function from the following signature: validatePotentialUrl(foundUrl: {url: string| undefined}) : void. AddValidateFunction pushes the input function to the list.
3.removeValidateFunction - this function receives a function from the same signature as before (2) and removes it from the list.


 We used these stackOverflow questions: how to send a function as parameter, List of functions.

We decided to make a class for each format we currently support (image, css, youtube).
Each of these classes implements the IPreviewObject interface and also a validation function.
The first thing was to add a validation function to the interface so new features will have to implement it as well.
So now, each class implements a validation function, a markdown function and an html function.
Also, we made a constructor for each class which adds the validation function to the validateFunctionArray.

We hold a static IPreviewObject variable which contains the current format class.
All format classes are implementing the IPreviewObject interface so the relevent functions will be decided at run time according to the class that represents the current url format.

In addition, we defined a new static IPreviewObject dictionary which is initialized at the begining of the extension and create one instance of each format class.



If we want to add a new feature we will need to add one line to this function (in addition to creating a new format class. we will add a tutorial soon).

We also updated the currentPreviewObject to the relevent preview object in previewObjectList like so:

YouTube validation:




Image validation:




Css validation:



Lastly, we divided the classes into different files, we made a seperate file to the interface and a utils file.

Css file:

 


Image file:



YouTube file:




Extention file:


Utils file:



IPreviewObject file:




We published the updated extension to the vscode marketplace:




 

Comments

Post a Comment

Popular posts from this blog

Turorial- How to add a new feature

Image
In this Post we will explain how to make and integrate a new feature to our extension. ** ALL VARIABLES EXPLANATIONS ARE AT THE BOTTOM Let's say we want to support text files. The first thing we will need to do is to create a new file- we name it "TextObject". We then import the "utils" and "IPreviewObject" files. We create a new (export deafult) class caled "TextObject" which implements IPreviewObject. Now, we need to implement the interface's 3 functions: 1. validatePotentialUrl- we check if the current potential URL has a ".txt" extension. if so- we update the current URL to the potential URL, and the currentPreviewObject to a textObject. 2. GetHtmlContent- returns an empty string because we dont need a webview panel for this feature. 3. makeMrkdownString- this function will need to create a string that will allow to open a text file in a new tab when clicking on a certain button. To do so, w...
Read more

Little Bug Fix

Image
After the big refactoring and redesigning we made, there are a few more things we have left to do: 1. Currently, once the cursor is on a certain URL, the hover panel will change accordingly. So, if we hover over URLs that the cursor is not on them we will still be presented with the last hover panel that was created. That is a bug and we need to fix it. 2. We need to make a unit testing (we dont know how to do that, so we need to learn a bit more) 3. Try and use other VSCODE extensions to support previewing PDFs and HTML (the web page, not the HTML file). To fix (1) we added a new condition to the "push" call (in the activate finction, in extension.ts). We check if the line the cursor is on is the same as the line we hover over. If so, call the "updateHoverPanel" function (which makes a markdown string for the hover panel according to the current URL format). If not, update the hover panel content (the markdown string) to an empty string. W...
Read more

Publishing First Beta & Refactoring The Code

Image
We figured it was time to publish a first beta of our extension to VSCODE marketplace. We made some little adjustments like renaming some variables, for more readable code, and fixed a few major bugs, and then we published it using this tutorial .  You can find our extension on this link . *A big bug we had was that the last hover panel continude to show when hovering on defferent lines that are not a URL. Our problem was fixed by updating the current URL variable to UNDEFINED and the markdown string to an empty string, like so: Now that we published our first working extension, we wanted to focus more on the code and the design. Firstly, we decided it would be smarter to extract the relevant line and check what is it's format rather then what we made so far- which is to send the whole document to each extraction function. We created a new function called "extractCurrentLine" which does the following: 1. The function receives the document text ...
Read more