Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(types): Generate maps to allow improved "go to definition" behaviour #9269

Merged
merged 13 commits into from
Oct 10, 2023

Conversation

Josh-Walker-GM
Copy link
Collaborator

@Josh-Walker-GM Josh-Walker-GM commented Oct 5, 2023

Problem
Navigating to the definition of pages, layouts, components, cells etc. would lead you to the .d.ts file. This can be really frustrating if you're used to flying around between definitions this way.

Changes

  1. Generates basic definition/source mappings for:
    1. directory mapped modules
    2. cell mirrors
    3. router pages
    4. route links

Linked issues
Fixes #5862
Fixes #2867

Performance
This adds additional AST parsing work to the yarn rw g types so it has the potential to slow that command down. I have tested that command on the test project and the results are:

Benchmark: hyperfine --runs 32 --warmup 3 'yarn rw g types'
Main:

Benchmark 1: yarn rw g types
  Time (mean ± σ):      4.006 s ±  0.048 s    [User: 5.244 s, System: 0.737 s]
  Range (min … max):    3.926 s …  4.171 s    32 runs

PR:

Benchmark 1: yarn rw g types
  Time (mean ± σ):      4.629 s ±  0.049 s    [User: 6.066 s, System: 0.828 s]
  Range (min … max):    4.544 s …  4.723 s    32 runs

An approximate +15% change in duration on this basic test.

There are areas where caching results could improve performance. For example we are likely finding the location of page components twice when we could cache the first result. I have not added this here so we do not prematurely optimise and introduce subtle bugs that would be more difficult to track down. If users with large projects report problems with this performance change then we can work to address it.

Notes
This is not an area I'm particularly knowledgeable about so there could be unknown consequences to this that I don't know about.

For pages and other web components it's easy to direct the map to the definition of the specific component that is the default export. This is not the case for cells as they have no default export and instead have a number of other non-default exports. In this case I currently direct the map to the head of the source file - happy to improve on this based on feedback.

For future reference I found the following useful:

@Josh-Walker-GM Josh-Walker-GM added the release:fix This PR is a fix label Oct 5, 2023
@Josh-Walker-GM Josh-Walker-GM added this to the next-release milestone Oct 5, 2023
@dac09
Copy link
Collaborator

dac09 commented Oct 6, 2023

@Josh-Walker-GM this is super, really. This is been such a long standing problem, its great that you've found a solution.🚀🚀🚀🚀, very impressed.

Two thoughts:

  1. Can we limit the sourcemap generation to Cells rather than directory named modules? I don't think go to definition is a problem for all directory named modules, just Cells.
  2. Can we wrap in a try catch? This is not critical typegen, and typegen shouldn't fail I think if theres a failure in sourcemap generation.

Copy link
Member

Tobbe commented Oct 6, 2023

@dac09 I think all pages in Routes.tsx jumps to the wrong place currently. For example, if I cmd+click HomePage I end up in web-routesPages.d.ts, which is probably not what a user would expect/want.

@Josh-Walker-GM
Copy link
Collaborator Author

Josh-Walker-GM commented Oct 6, 2023

Thanks @dac09, glad it helps!

Answering in reverse order:

  1. Yeah I'm happy to. I did try to ensure the logic bailed out and returned when things got ambiguous. Not sure what would throw but in JS you can never be sure so good call as always. I'll just wrap the whole thing.

  2. I added this for pages, layouts etc. first before I then extended it to cells because I was still sometimes ending up in the .d.ts files in that case too. For directory named modules it's fine if you ctrl+click the actual component but if you ctrl+click the path that it's imported from - the src/pages/someFolder/ - then you end up in the .d.ts file. I think it's better to also have this direct back to the implementation too but I'm happy to be overruled on that. This comment here [Bug?]: FatalErrorPage path is incorrect after scaffolding app #9244 (comment) mentions they see that issue for the non-cell case.

I think there is potentially more we can do with this technique to address even more misdirections that aren't addressed in this PR directly.

@Josh-Walker-GM
Copy link
Collaborator Author

For example, if I cmd+click HomePage I end up in web-routesPages.d.ts, which is probably not what a user would expect/want.

Oh good point @Tobbe! I hadn't thought about that one, I'll fix that too in this PR.

@Josh-Walker-GM
Copy link
Collaborator Author

I should note that this is one possible solution. It's a reasonably small and quick change which improved the behaviour for me in VSCode.

A more robust solution would be to implement an LSP/VSCode extension which can provide these go-to-definition instructions - this would be more generic and extendable to things like cell auto-completion. That however is a task with a much larger scope and time commitment.

Copy link
Collaborator

@dac09 dac09 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Having done a quick scan at the code, looks pretty OK to me!

Observations from a quick test:
✅ Routes navigating correctly
🟡 Navigating to Cell working, but jumping to top of the file (can see why from the code). Does jumping to the success component here make sense or is it extra logic we dont really need?
✅ Other cmd+click seems to be intact

Happy for you to merge as is though :)

@Josh-Walker-GM Josh-Walker-GM removed the request for review from Tobbe October 10, 2023 18:49
@Josh-Walker-GM
Copy link
Collaborator Author

Discussed with the team and it makes the most sense to direct cells to the Success component. I've updated to reflect that.

@Josh-Walker-GM Josh-Walker-GM enabled auto-merge (squash) October 10, 2023 18:50
@Josh-Walker-GM Josh-Walker-GM merged commit 452ec49 into main Oct 10, 2023
31 checks passed
@Josh-Walker-GM Josh-Walker-GM deleted the jgmw-internal/definition-mapping branch October 10, 2023 19:21
jtoar pushed a commit that referenced this pull request Oct 10, 2023
…our (#9269)

**Problem**
Navigating to the definition of pages, layouts, components, cells etc.
would lead you to the .d.ts file. This can be really frustrating if
you're used to flying around between definitions this way.

**Changes**
1. Generates basic definition/source mappings for:
    1. directory mapped modules
    2. cell mirrors
    3. router pages
    4. route links

**Linked issues**
Fixes #5862
Fixes #2867 

**Performance**
This adds additional AST parsing work to the `yarn rw g types` so it has
the potential to slow that command down. I have tested that command on
the test project and the results are:

Benchmark: `hyperfine --runs 32 --warmup 3 'yarn rw g types'`
Main:
```
Benchmark 1: yarn rw g types
  Time (mean ± σ):      4.006 s ±  0.048 s    [User: 5.244 s, System: 0.737 s]
  Range (min … max):    3.926 s …  4.171 s    32 runs
```
PR:
```
Benchmark 1: yarn rw g types
  Time (mean ± σ):      4.629 s ±  0.049 s    [User: 6.066 s, System: 0.828 s]
  Range (min … max):    4.544 s …  4.723 s    32 runs
```
An approximate +15% change in duration on this basic test.

There are areas where caching results could improve performance. For
example we are likely finding the location of page components twice when
we could cache the first result. I have not added this here so we do not
prematurely optimise and introduce subtle bugs that would be more
difficult to track down. If users with large projects report problems
with this performance change then we can work to address it.

**Notes**
This is not an area I'm particularly knowledgeable about so there could
be unknown consequences to this that I don't know about.

For pages and other web components it's easy to direct the map to the
definition of the specific component that is the default export. This is
not the case for cells as they have no default export and instead have a
number of other non-default exports. In this case I currently direct the
map to the head of the source file - happy to improve on this based on
feedback.

For future reference I found the following useful:
* https://www.murzwin.com/base64vlq.html
*
https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit#heading=h.1ce2c87bpj24
@jtoar jtoar removed this from the next-release milestone Oct 10, 2023
@jtoar jtoar added this to the v6.4.0 milestone Oct 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
release:fix This PR is a fix
Projects
None yet
4 participants