External ts file support

[elitastic]

Hi, it would be very nice if external ts files would be supported, e.g.:

.vue file:

<template>
    <div v-on:click="onClick"></div>
</template>

<script src="test.ts" lang="ts"></script>

test.ts file:

export default {
    methods: {
        onClick: () =>
        {
            console.log('xy')
        }
    }
}

Within Rider, the onClick method is not recognized when in external file:

But it works when everything is inside the .vue file

<template>
    <div v-on:click="onClick"></div>
</template>

<script lang="ts">
    export default {
        methods: {
            onClick: () =>
            {
                console.log('xy')
            }
        }
    }
</script>

[Flamenco]

Hi @elitastic,

Thanks for your suggestion.

I never used an external script for SFCs. Is this a common use case?

[elitastic]

It's at least mentioned in the VueJs documentation:

https://vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns

For me it's useful for some slightly bigger components (150 - 200 lines of code). For me, it's more convenient to change the active window than to scroll up and down all time between html and typescript code.

[Flamenco]

I will have a look the next time I do some maintenance.

The contents of your script are EXACTLY what would be in the tag, and the current generated code would work as is in the new file, yes?

[elitastic]

Yes, exactly!

[Flamenco]

@elitastic I did some refactoring and got this working. It actually now runs across the board about 3x faster, works with es6 and commonjs exports, and will even create the external script file if it does not exist.

A couple days of testing and I will submit it to the IJ repo.

[elitastic]

Perfekt, thanks a lot for your quick help!

Another question, is it by design / restrictions that expressions within double braces don't have intellisense / error checking?

It works for expressions within v-if etc. but not within double braces.

[Flamenco]

Are you referring to the IntelliVue plugin, or the standard Vue plugin?

[elitastic]

Just realized that this comes from the standard vue plugin! Sorry for that!

[Flamenco]

Instead of relying on the Vue plugin, or an AST, we just process raw text. In fact, you can put the cursor in a comment anywhere in the file and still extract or goto a Vue item. We are not sure if this is a feature or a bug ;)

[Flamenco]

@elitastic We released version 1.0.0 with support for this feature.