Migrate entire frontend to TypeScript #1936
Labels
Comments
This was referenced Mar 11, 2023
|
@vvidday Thanks for listing the files out nicely here. I agree with the priority that you put here. @ckcherry23 Maybe the 2 of you can work on this together and see if we can get those under Main priority done by this semester? |
|
Actually, the |
Great point! I agree that there's not too much value (at least compared to migrating the actual frontend files), especially since a type error e.g. referencing a non-existent HTML attribute would probably result in a failing test (during assertion). But it would still be good to eventually migrate those over for consistency and it might catch some very edge/corner cases. I've added them to the list above! However, as they are low priority as you mentioned, and also considering that the migration would be fairly straightforward, we could potentially separate it & label it as a good first issue for new contributors, as Prof mentioned today as well. |
|
yeah sure. I have created a separate issue for this meant for those contributing for the first time |
dcshzj
pushed a commit
that referenced
this issue
Mar 19, 2023
Currently, despite the addition of TypeScript support, the frontend is still largely written in JavaScript. This results in a lack of type safety and many complex objects being passed around as unknown types, which may in turn lead to errors. Let's migrate the store.js file to TypeScript, to get types for the all the states that are stored within the Vuex store. This will provide a good starting point to migrate the Vue files that access and mutate the state of the store.
dcshzj
pushed a commit
that referenced
this issue
Mar 21, 2023
Currently, despite the addition of TypeScript support, the frontend is still largely written in JavaScript. This results in a lack of type safety and many complex objects being passed around as unknown types, which may in turn lead to errors. Let's migrate the root component, app.vue, to TypeScript. As this is the entry point of the app, converting this file to TypeScript will enable the conversion of other Vue components.
dcshzj
pushed a commit
that referenced
this issue
Apr 4, 2023
Currently, despite the addition of TypeScript support, the frontend is still largely written in JavaScript. This results in a lack of type safety and many complex objects being passed around as unknown types, which may in turn lead to errors. Let's migrate one of the main components, c-summary.vue, to TypeScript. In addition to providing greater type safety, the migration of this component will also allow the migration of its child components, such as c-summary-charts.vue.
dcshzj
pushed a commit
that referenced
this issue
Apr 10, 2023
Currently, despite the addition of TypeScript support, the frontend is still largely written in JavaScript. This results in a lack of type safety and many complex objects being passed around as unknown types, which may in turn lead to errors. Let's migrate one of the main components, c-authorship.vue, to TypeScript. This will provide better type safety and reduce runtime errors.
dcshzj
pushed a commit
that referenced
this issue
Apr 11, 2023
Currently, despite the addition of TypeScript support, the frontend is still largely written in JavaScript. This results in a lack of type safety and many complex objects being passed around as unknown types, which may in turn lead to errors. Let's migrate one of the main components, c-summary-charts.vue, to TypeScript. This will provide better type safety and reduce runtime errors.
This was referenced Sep 13, 2023
This was referenced Sep 23, 2023
chan-j-d
pushed a commit
that referenced
this issue
Sep 30, 2023
Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate the rest of the JavaScript code to TypeScript code to facilitate future changes to the code.
chan-j-d
pushed a commit
that referenced
this issue
Sep 30, 2023
Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate the rest of the JavaScript code to TypeScript code to facilitate future changes to the code.
chan-j-d
pushed a commit
that referenced
this issue
Oct 4, 2023
Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate random-color-generator.js JavaScript code to TypeScript code to facilitate future changes to the code.
chan-j-d
pushed a commit
that referenced
this issue
Oct 4, 2023
Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate the rest of the JavaScript code to TypeScript code to facilitate future changes to the code.
chan-j-d
pushed a commit
that referenced
this issue
Oct 4, 2023
Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate the rest of the JavaScript code to TypeScript code to facilitate future changes to the code.
This was referenced Oct 7, 2023
chan-j-d
pushed a commit
that referenced
this issue
Oct 11, 2023
Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate the rest of the JavaScript code to TypeScript code to facilitate future changes to the code.
chan-j-d
pushed a commit
that referenced
this issue
Oct 28, 2023
Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate repo-sorter.js to TypeScript code to facilitate future changes to the code.
Merged
chan-j-d
pushed a commit
that referenced
this issue
Oct 28, 2023
Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate safari_date.js to TypeScript code to facilitate future changes to the code.
|
Closing this issue as it has been completed with #2053 being the last PR that completes the migration for the frontend code |
ckcherry23
pushed a commit
that referenced
this issue
Jan 8, 2024
* [#2027] Fix date range bug (#2034) Currently, users are unable to select a zoom range that includes the until date. This results in misleading data being presented to users. * [#2039] Update cypress minimum requirement to 12.15.0 (#2041) Chrome bug is causing cypress to fail to open a browser on Github Actions, causing frontend tests and CI to fail. Upgrading cypress to greater than 12.15.0 will fix this issue. Let's upgrade cypress to fix the failing CI. * [#1936] Migrate c-segment.vue to typescript (#2035) Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate the rest of the JavaScript code to TypeScript code to facilitate future changes to the code. * [#1936] Migrate load-font-awesome-icons.js to typescript (#2040) Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate the rest of the JavaScript code to TypeScript code to facilitate future changes to the code. * [#2045] Fix cypress zoom feature test (#2047) Currently, Cypress zoom feature tests are failing due to a recent change in behavior caused by a bug fix. With the tests failing, we are unable to detect any future regressions. Let's update the Cypress tests to test for the new intended behavior. * [#1936] Migrate random-color-gen.js to typescript (#2043) Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate random-color-generator.js JavaScript code to TypeScript code to facilitate future changes to the code. * [#1936] Migrate c-segment-collection.vue to typescript (#2036) Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate the rest of the JavaScript code to TypeScript code to facilitate future changes to the code. * [#1936] Migrate c-resizer.vue to typescript (#2038) Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate the rest of the JavaScript code to TypeScript code to facilitate future changes to the code. * Bump zod from 3.20.6 to 3.22.3 in /frontend (#2048) Bumps [zod](https://github.com/colinhacks/zod) from 3.20.6 to 3.22.3. - [Release notes](https://github.com/colinhacks/zod/releases) - [Changelog](https://github.com/colinhacks/zod/blob/master/CHANGELOG.md) - [Commits](colinhacks/zod@v3.20.6...v3.22.3) --- updated-dependencies: - dependency-name: zod dependency-type: direct:production ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump @cypress/request and cypress in /frontend/cypress (#2042) Bumps [@cypress/request](https://github.com/cypress-io/request) to 3.0.1 and updates ancestor dependency [cypress](https://github.com/cypress-io/cypress). These dependencies need to be updated together. Updates `@cypress/request` from 2.88.12 to 3.0.1 - [Release notes](https://github.com/cypress-io/request/releases) - [Changelog](https://github.com/cypress-io/request/blob/master/CHANGELOG.md) - [Commits](cypress-io/request@v2.88.12...v3.0.1) Updates `cypress` from 12.17.4 to 13.3.0 - [Release notes](https://github.com/cypress-io/cypress/releases) - [Changelog](https://github.com/cypress-io/cypress/blob/develop/CHANGELOG.md) - [Commits](cypress-io/cypress@v12.17.4...v13.3.0) --- updated-dependencies: - dependency-name: "@cypress/request" dependency-type: indirect - dependency-name: cypress dependency-type: direct:development ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * [#1936] Migrate c-ramp.vue to typescript (#2037) Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate the rest of the JavaScript code to TypeScript code to facilitate future changes to the code. * Give partial credit if annotated author is not the same as the blame author * [#2054] Fix zoom view bug (#2055) Currently, when granularity is set to day or week, clicking on a ramp will open up a zoom view where commit messages are not being displayed and sorting by insertions does not result in any sorting. Let's fix the unintended behaviour of the zoom view. * [#1936] Migrate repo-sorter.js to typescript (#2052) Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate repo-sorter.js to TypeScript code to facilitate future changes to the code. * [#1936] Migrate safari_date.js to typescript (#2053) Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate safari_date.js to TypeScript code to facilitate future changes to the code. * Remove frontend JS lint (#2063) Currently, frontend linter is failing due to lint scripts checking javascript files, the last of which has been removed in PR #2053. Lets update the lint command to exclude javascript files front the check. * use full and partial credit color * [#1929] Add dynamic positioning support for tooltips (#2056) Currently, most tooltips are shown above buttons and text. When these tooltips appear at the top of the viewport, part of the tooltips will not be rendered. Let's implement changes such that these tooltips appear below the text or button, when appearing at the top of the viewport. * Add test cases for annotated author overriding last author's credit * revert merge from master * revert merge from master 58b7002 * [#1928] Fix tooltip zIndex such that it doesn't occlude next file title (#2057) Currently, if one hovers over a tooltip of the pinned title of a file whose content is scrolled almost completely, such that the title of the next file is just below the pinned title, the tooltip is not displayed appropriately, as the title of the next file obstructs it. Let's fix this issue. * [#1726] Update GitHub-specific references in codebase and docs (#2050) There are still leftover references specific to GitHub on parts of the codebase and docs that have been generalized to accept other remote git hosts. Let's update these GitHub references to use more general language. * Trigger workflow * Revert "Merge branch 'master' into 944-analyze-authorship" This reverts commit 950c912, reversing changes made to 4bd05a7. * fix frontend test failing --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: jq1836 <[email protected]> Co-authored-by: Chan Jun Da <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Pratham Jain <[email protected]>
ckcherry23
pushed a commit
that referenced
this issue
Jan 8, 2024
* [#2027] Fix date range bug (#2034) Currently, users are unable to select a zoom range that includes the until date. This results in misleading data being presented to users. * [#2039] Update cypress minimum requirement to 12.15.0 (#2041) Chrome bug is causing cypress to fail to open a browser on Github Actions, causing frontend tests and CI to fail. Upgrading cypress to greater than 12.15.0 will fix this issue. Let's upgrade cypress to fix the failing CI. * [#1936] Migrate c-segment.vue to typescript (#2035) Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate the rest of the JavaScript code to TypeScript code to facilitate future changes to the code. * [#1936] Migrate load-font-awesome-icons.js to typescript (#2040) Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate the rest of the JavaScript code to TypeScript code to facilitate future changes to the code. * [#2045] Fix cypress zoom feature test (#2047) Currently, Cypress zoom feature tests are failing due to a recent change in behavior caused by a bug fix. With the tests failing, we are unable to detect any future regressions. Let's update the Cypress tests to test for the new intended behavior. * [#1936] Migrate random-color-gen.js to typescript (#2043) Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate random-color-generator.js JavaScript code to TypeScript code to facilitate future changes to the code. * [#1936] Migrate c-segment-collection.vue to typescript (#2036) Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate the rest of the JavaScript code to TypeScript code to facilitate future changes to the code. * [#1936] Migrate c-resizer.vue to typescript (#2038) Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate the rest of the JavaScript code to TypeScript code to facilitate future changes to the code. * Bump zod from 3.20.6 to 3.22.3 in /frontend (#2048) Bumps [zod](https://github.com/colinhacks/zod) from 3.20.6 to 3.22.3. - [Release notes](https://github.com/colinhacks/zod/releases) - [Changelog](https://github.com/colinhacks/zod/blob/master/CHANGELOG.md) - [Commits](colinhacks/zod@v3.20.6...v3.22.3) --- updated-dependencies: - dependency-name: zod dependency-type: direct:production ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump @cypress/request and cypress in /frontend/cypress (#2042) Bumps [@cypress/request](https://github.com/cypress-io/request) to 3.0.1 and updates ancestor dependency [cypress](https://github.com/cypress-io/cypress). These dependencies need to be updated together. Updates `@cypress/request` from 2.88.12 to 3.0.1 - [Release notes](https://github.com/cypress-io/request/releases) - [Changelog](https://github.com/cypress-io/request/blob/master/CHANGELOG.md) - [Commits](cypress-io/request@v2.88.12...v3.0.1) Updates `cypress` from 12.17.4 to 13.3.0 - [Release notes](https://github.com/cypress-io/cypress/releases) - [Changelog](https://github.com/cypress-io/cypress/blob/develop/CHANGELOG.md) - [Commits](cypress-io/cypress@v12.17.4...v13.3.0) --- updated-dependencies: - dependency-name: "@cypress/request" dependency-type: indirect - dependency-name: cypress dependency-type: direct:development ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * [#1936] Migrate c-ramp.vue to typescript (#2037) Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate the rest of the JavaScript code to TypeScript code to facilitate future changes to the code. * Give partial credit if annotated author is not the same as the blame author * [#2054] Fix zoom view bug (#2055) Currently, when granularity is set to day or week, clicking on a ramp will open up a zoom view where commit messages are not being displayed and sorting by insertions does not result in any sorting. Let's fix the unintended behaviour of the zoom view. * [#1936] Migrate repo-sorter.js to typescript (#2052) Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate repo-sorter.js to TypeScript code to facilitate future changes to the code. * [#1936] Migrate safari_date.js to typescript (#2053) Currently, there is still some JavaScript code which remains unmigrated. This allows for type unsafe code to be written, potentially resulting in unintended behavior. Let's migrate safari_date.js to TypeScript code to facilitate future changes to the code. * Remove frontend JS lint (#2063) Currently, frontend linter is failing due to lint scripts checking javascript files, the last of which has been removed in PR #2053. Lets update the lint command to exclude javascript files front the check. * use full and partial credit color * [#1929] Add dynamic positioning support for tooltips (#2056) Currently, most tooltips are shown above buttons and text. When these tooltips appear at the top of the viewport, part of the tooltips will not be rendered. Let's implement changes such that these tooltips appear below the text or button, when appearing at the top of the viewport. * Add test cases for annotated author overriding last author's credit * revert merge from master * revert merge from master 58b7002 * [#1928] Fix tooltip zIndex such that it doesn't occlude next file title (#2057) Currently, if one hovers over a tooltip of the pinned title of a file whose content is scrolled almost completely, such that the title of the next file is just below the pinned title, the tooltip is not displayed appropriately, as the title of the next file obstructs it. Let's fix this issue. * [#1726] Update GitHub-specific references in codebase and docs (#2050) There are still leftover references specific to GitHub on parts of the codebase and docs that have been generalized to accept other remote git hosts. Let's update these GitHub references to use more general language. * Trigger workflow * Revert "Merge branch 'master' into 944-analyze-authorship" This reverts commit 950c912, reversing changes made to 4bd05a7. * fix frontend test failing * switch to originality score and threshold * update originality threshold * revert frontend code changes --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: jq1836 <[email protected]> Co-authored-by: Chan Jun Da <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Pratham Jain <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What feature(s) would you like to see in RepoSense
A completely TypeScript frontend.
Is the feature request related to a problem?
As described in #1632, converting our frontend from JavaScript to TypeScript has many advantages, including type safety, better developer experience (intellisense etc), as well as making the codebase less confusing for new contributors (currently, there's many objects being passed around in the frontend that are of the
anytype, see #1632 for an example).Even though TypeScript has been added in #1721, the frontend is still mostly JavaScript, including all our
.vuefiles.If possible, describe the solution
We can start slowly converting the existing
.jsand.vuefiles to TypeScript. For.vuefiles, this can be done by addinglang='ts'to the<template>tag, wrapping the component withdefineComponent(), and fixing all the errors that pop up.While converting, we should be mindful of best practices, such as trying to avoid the use of
anyor// @ts-ignoreexcept in cases where it is unavoidable. (Since usinganydefeats the purpose of using TypeScript in the first place.)As this is a big task, it should be split up into multiple PRs.
If applicable, describe alternatives you've considered
Additional context
#1903 has provided a decent starting point by typing the data that the frontend reads in from the
.jsonfiles generated by the backend. This data is read/processed by the frontend components & passed between them. We can try to 'follow the path' of this data (e.g.app.vue->c-summary.vue->c-summary-charts.vue->c-zoom.vue) and convert the files to TypeScript in order. i.e. we should focus on converting the parent components first.Temporary checklist:
Main priority
api.js(all the global functions) - [#1756] Add JSON validation and migrate api.js to TypeScript #1903store.js(Vuex store) - [#1936] Migrate store.js to TypeScript #1937app.vue(Root component) - [#1936] Migrate app.vue to TypeScript #1938c-summary.vue- [#1936] Migrate c-summary.vue to TypeScript #1953c-summary-charts.vue- [#1936] Migrate c-summary-charts.vue to TypeScript #1976c-zoom.vueto TypeScript #1963c-authorship.vue- [#1936] Migrate c-authorship.vue to TypeScript #1969Smaller files/components
c-ramp.vue(moved here as it is a smaller component compared to zoom/summary/authorship) [#1936] Migrate c-ramp.vue to typescript #2037c-segment.vue[#1936] Migrate c-segment.vue to typescript #2035c-segment-collection.vue[#1936] Migrate c-segment-collection.vue to typescript #2036c-resizer.vue[#1936] Migrate c-resizer.vue to typescript #2038utilsfolder (repo-sorter,ramp-colour-generatoretc)The text was updated successfully, but these errors were encountered: