feat(file-toggle): Toggle between html and js/ts file

[rmja]

I'm submitting a feature request

In Sublime-Text, when setup currectly, one can toggle between files with the same name, but with different extension using "Alt-O" (O for Other). It is intended for toggling between header and source file in C, but it is also really useful in Aurelia because of the filename convention.

It is something like this plugin but for different extensions: https://marketplace.visualstudio.com/items?itemName=bbenoist.togglehs

Having this baked into the extension would be really useful.

[eriklieben]

Hi,

Thanks for submitting a feature request.

I guess we could probably try to implement the F12 go to definition on classes for this or the peek feature of vscode and then only do it in cases where there is no typescript definition.

So for example, when performing go to definition on the first foo it would jump to the javascript, but on the second (where it extends) it would still jump to the typescript class.

export class foo {

}

export class bar extends foo {

}

There are a few use cases I can think of:

• both the javascript and typescript file are present somewhere as actual files. foo.ts => **\foo.js
• the typescript file is present and the javascript is bundled (require.js/ jspm) foo.ts => app-bundle.js define('foo'
• ES6 modules foo.ts => *\.js containing class foo {
• bundled by webpack, need to look into this, not a webpack user.

It would probably be harder to detect this once the bundled output is minified because define would be replaced with a random character. It might also not be that useful to see the scrambled javascript output in this case, because it's all on 1 line/ unreadable. So it's probably okay to skip that use case/ you would not need that functionality if you trust typescript/ minifier to do the right thing, which is in 99% of the cases.

Is all of the above still matching your use case/ requirement?

[rmja]

I think my use case is much simpler than what you propose. What I want is, for example in a typescript project to toggle between the html view and the ts view model.

Ao, if app.ts is open, then simply hit Ctrl+O to open the app.html file. Hitting Ctrl+O again, and you are back in app.ts.

[aluanhaddad]

I think my use case is much simpler than what you propose. What I want is, for example in a typescript project to toggle between the html view and the ts view model.

Exactly this. In fact it could be seen as an extension of the same conventions that Aurelia leverages so elegantly to compose applications at runtime.

[eamodio]

@eriklieben I was thinking of attempting to implement something for this -- any objection or direction on what you'd want to see? I was thinking of adding a command (so shortcuts can be applied) and maybe a menu option on the editor/title menu (ideally in the navigation group with an icon -- so it would be a toolbar button toggle).

Unrelated, but somewhat related -- I would also love to see if I could get ctrl+click to work on custom elements too (to jump to either the html or js/ts)

[eriklieben]

None at all that would be great.

The only thing I am worried about is how we handle the edge cases:

Other view with decorator:

import {useView} from 'aurelia-framework';

@useView('otherdir/foobar.html')
export class SomeViewModel { }

With method in vm:

export class SomeViewModel {

    getViewStrategy() {
        return 'otherdir/foobar.html';
    }

And I think there probably also is another one to override it once for your entire app. But we could also just skip those for now and just implement the switching to the same file name and integrate the edge cases once we got things in place to know more about the code.

I am trying to postpone most of the work that has something to do with knowledge of the code myself till we got the linting integrated in vscode, so we could (if possible) only run one instance of typescript to get more information about the code (like which properties are bindable, translate from custom element name to the correct code behind, etc).

Btw. switching from the typescript file to the javascript file like I described above was a misunderstanding. I don't think we need that/ that's probably a lot of work to implement and get right with bundles and the use cases for that are very small (I think/ guess). I almost never look at the javascript output from my typescript files, I trust the TypeScript team :-)

[eamodio]

@eriklieben Honestly I was thinking of being really naive, and really just do something like look at the current filename, and if its .html look for the existence of a .ts or .js file with the same name and vice versa. It won't work all the time (and could be wrong some of the time too), but just that alone would be a big win for me (and others on my team)

If that doesn't work for this extension, I was thinking about just writing another one, that is just about opening "related" files -- with possibly pluggable "conventions" for what things are related (besides just the same filename without extensions)

The ctlr+click I mentioned is very different an would require much more knowledge of the code. (Not planning to tackle that -- just would love it ;) )

[eriklieben]

That would work great!

We can just implement the more complex scenario's later on when the extension knows more about the Aurelia code itself.

[rmja]

@eamodio You have made me the happiest dev of the day, thank you!

[eamodio]

@rmja thanks for the kind words! :)

[eamodio]

FYI, if people are interested in this feature for things other than just Aurelia I'm also working on a new extension Find Related. It is still in the very early stages but its coming along -- and would love to get help building out some rulesets to include

[aluanhaddad]

@eamodio you're awesome. I'm about to start a new Aurelia project (I've been in Angular 2 hell for the last 8 months but certainly love the Angular file switcher plugin), and I'm excited I can use this for the new Aurelia project, especially as I am responsible for selecting client side development tools. Thank you! ❤️

[eamodio]

@aluanhaddad Wow -- thanks so much for the kind words!