feat(smartAutocomplete): Go to Definition

[hiaux0]

Feature - Goto definition

1. From aurelia view to viewModel

${|viewModelVar}
.bind="|otherViewModelVar"

-->

class ... {
  @bindable |viewModelVar;

  |otherViewModelVar: any;
}

2. From view to view, eg. button to button of buttons

${|button}

-->

repeat.for="|button of buttons"

3. Follow custom-element

<|custom-ele>
<require from="/|custom-ele">

-->

|class CustomEle {
}

4. Attribute bindings

<!-- otherHtmlFile.html -->
<require from="/custom-ele">
<custom-ele
  |bind-me-now.bind="..."
></custom-ele>

-->

class CustomEle {
  @bindable |bindMeNow;
}

Motivation

Previously, if I want to find the related class variable in the view, I had to copy paste the value and search in the viewModel.
Similarly button of buttons.

Known issues

• if different viewModels have same @bindable variable names, definition leads to 'random' viewModel
• 4. limited to .bind
  Should include .call, .two-way, ...

Todo

• resolve conflict
• cursor always at the end of line
• provied definitions for my-bindable in

<custom-element
  my-bindable.bind="someValue"
>
</custom-element>

[EisenbergEffect]

Awesome work @hiaux0 ! I'm sure @eriklieben is very happy to have such a great collaborator 😄

[hiaux0]

Thank you @EisenbergEffect! I'm excited to contribute to Aurelia in some way 👨‍💻

[hiaux0]

4. limited to .bind
   Should include .call, .two-way, ...

Should add an array with all possible bindings here

Edit: done 9f0dfe1

[hiaux0]

This line causes some issues in files with nested string interpolations
(compare #101)

So for the sake of 'goto' feature, I commented that out.
Could uncomment and have few files not work, but I'd rather have goto in 99% of my files

[hiaux0]

Additionally, to processing files on extension startup.
We need to update aureliaApplication.components for new 'gotos'.

This is the fastest way I could provide updates

[hiaux0]

@eriklieben There is one todo left, which I am currently not able to resolve

if different viewModels have same @bindable variable names, definition leads to 'random' viewModel

The problem with that is, we only get the 'targetWord', eg. twin-brother, but here, you can see two components having the same bindable.
It would be ideal to provide the small modal, which vscode gives on mulitple defs, but that is the point I cannot do.

vscode-extension/src/client/main.ts

Line 66 in 9f0dfe1

return {

The return here should accept an array as well, but it does not work.

All in all, I feel good about the current state.
Have been already using it locally for weeks now.
(Kind of a workaround for the todo would be, to click the tag name instead of the attribute itself.
You would be presented the correct file, but not the correct variable def)

[eriklieben]

awesome!

Sorry for the late response, my todo list isn't in the state I want it in :-). I will try to merge everything this Sunday and check if we can also get it released to the marketplace because it looks like that isn't happening automatically anymore and your work should also be pushed to the marketplace. Sorry for the inconvenience.

[bigopon]

The problem with that is, we only get the 'targetWord', eg. twin-brother, but here, you can see two components having the same bindable.

Is it unable to read the tagname?

[hiaux0]

Is it unable to read the tagname?

Yes, basically.
But that's just a limitation of the current implementation.
We parse tagnames somehwhere else in the code already, so would be just a matter of adding read-tagname-logic

[jboysen]

Is it possible to beta-test this feature? We are looking very much forward to this :)

[EisenbergEffect]

@eriklieben What is our path to getting this in and getting it released?

[eriklieben]

Thanks for the reminder, sorry this was outside of my sight.

Merged it, will only need to get it released to the marketplace, but that has some issues. The token is expired or there is something with my installation of vsce.

If you want to test it locally, I think you can also do this:

git clone repo
npm install
npm i vsce -g

then uninstall the extension from vscode, and use the following command to create a package:

vsce package

(that will build the solution as well if I am correct, otherwise do npm run build as well.)

That will create a vsix file, which you can install locally:
open vscode, go to the extensions tab, and click the ... on the right top, and then "install from VSIX".

(double click on the file won't work)

oh and you need to make sure that this is in your settings.json

    "aurelia.featureToggles": {
        "smartAutocomplete": true
    },

not sure if that will be there by default or if you need to add it yourself. Once we published the extension to the marketplace, you should only need to update and have the above setting set/ then creating the package yourself isn't required, etc.

[EisenbergEffect]

@eriklieben Let me know if you need anything from me to help you get this publishing again. I recall I had to refresh the token in the past. Just let me know.