[Summer2022/OSPP-Project01] Design AVC Strategy and Refactor Code in AVC way

[zhuxiangning]

Hey, guys！Welcome to Hypercrx! 👏👏👏 Just throw any thought you have here! 👇

Project Mentor: @tyn1998

Project Description:

Implement a chart component, and introduce the component into a view, then inject the view at the point which you successfully anchored to after analyzing DOM structures of pages of GitHub. There are steps you should follow if you want to develop a brand new chart component and inject it into a never touched place on pages of GitHub. However, after observing files and code of Hypercrx, we find these 3 steps are often mixed up, leading to the inconsistency of code structures and file arrangements for different charts, and that will confuse both maintainers and developers in the future. Hence, we hope you can work out a strategy to solve the problem, and once you have successfully done the designing work, you are asked to employ the strategy to carry out the code refactoring work.

Task 1. Design "Anchor-View-Component" strategy.

Task 2. Rearrange the files and refactor the code in the AVC way.

Details of the 2 tasks will be put on corresponding issues later. There is another thing, which is, that we courage you to document any of your progress every two weeks in specified issues, once the development phase of Summer 2022 starts.

Difficulty: Advanced

Labels of Technical Fields: React, Chrome Extension

Labels of Programming Language: HTML,CSS,JavaScript,TypeScript

Project Output Requirements:

• The AVC strategy and relating documents(in form of repo Wiki pages)
• Rearrange the files and refactor the code in the AVC way

Project Technical Requirements:

• Know how the Chrome extension works
• Familiar with how Hypercrx works
• Familiar with TypeScript
• Familiar with Git and GitHub

[TieWay59]

hello @tyn1998, I have cloned the project and read into the codebase. Could you please tell me a bit more detail about "mix up", I'll understand it better if there is a code example with comments.

I really appreciate your time, feel free to inform me at any time in either Chinese or English. (Since I'm still learning Chinese, It's better to use Engish.)

[tyn1998]

Hi @TieWay59, I will provide more details in a day or so. Before that, you might like to try to figure out something by your own!

There are some files in src/pages/ContentScripts, which constitutes the ContentScripts part of a Chrome Extension. The files I drew a red tick before their names contain code like this:

@runsWhen([isPerceptor])
class XXX extends PerceptorBase {
  public async run(): Promise<void> {
    ...
}

inject2Perceptor(XXX);

How runsWhen works? Who runs When(or Where)? Try to find all whos and the locations they run at then comment below to share with us your discovery.

[TieWay59]

Great hint @tyn1998. This makes things more clear to me. 😀

[wxharry]

Hi, I am trying to figure out the concepts of the AVC here.

• Component is a unit of content. It could be a chart or a paragraph.
• View is a unit to be injected which contains one or a few components. A view should have an annotation with @runswhen.
• Anchor is a situation on where to inject a view. Basically, it is the things we put into the @runsWhen.

Correct me if I am wrong! It would be helpful if you could clarify the definitions. I really appreciate it.

[tyn1998]

This is exactly what I mean @wxharry!

Let me just add some more information:

• Loading settings and fetching data should hanppen in View
• These three layers are in N:N:N relationships. For examples:
  • A:V:C = 2:1:1, hypertrons button shows both in Issue pages and PR pages
  • A:V:C = 2:2:1, ActiInflTrends shows both in repo page and user profile page but they fetch different data in View layer
  • A:V:C = 1:1:N, Perceptor Tab has many other components on it. If you are handling 1:1:N you should consider the layout of many components

Ask me any time~

[wxharry]

Thank you for your clarification. It helps a lot!

[wxharry]

Hi, I found out all the ContentScripts parts in the web pages and marked each part with the file names in the source code.

DeveloperActiInflTrend and DeveloperNetwork runsWhen isUserProfile

RepoActiInflTrend runsWhen isRepoHome

PerceptorTab runsWhen isPublicRepo and ProjectNetwork runsWhen isPerceptor

hypertrons button runsWhen isPR or isIssue

[tyn1998]

Great jobs, @wxharry!

Yet, I think you missed one component Hypertrons.tsx. Could you please append it in your comment?

[wxharry]

Yet, I think you missed one component Hypertrons.tsx. Could you please append it in your comment?

Sure!

[tyn1998]

Hi, @wxharry, congratulations🥇 ! Happy hacking this summer~

[wxharry]

Shall we have an virtual meeting before we formally start working on this issue?

[tyn1998]

Sure, I will inform you :)

[tyn1998]

Hey @wxharry, you might like to reference to https://github.com/ovity/octotree/tree/master/src/adapters for ideas that help to design an anchor strategy.