VueComponentPlugin incompatibility

[John0x]

Hey, the type checking doesn't seem to effect .vue components. I'm using the standard VueComponentPlugin without any fancy configs.

The type checker just prints:

Typechecker plugin(promisesync) :TypeCheck.
Time:Tue Dec 12 2017 10:18:31 GMT+0100 (Mitteleuropäische Zeit)
All good, no errors :-)
Typechecking time: 1947ms
Quiting typechecker

Even though there are obvious errors

[vegarringdal]

I dont use vuejs, but maybe there is a way to extend tslint config

Maybe this can be used?
https://github.com/prograhammer/vscode-tslint-vue

I really dont want vue/react or any framework lib hard coded into type checker.
Think this can be a nightmare to maintain.
Atm its not dependent on Fusebox either, so name is kinda misleading, and might get impression to support all frameworks Fusebox does.

[John0x]

@Shepless any idea?

I'm using vscode-tslint-vue right now, but that's not working for build time type checking :/
I guess it doesn't work, because the vue plugin handles all the stuff within the plugin itself, not like the vue plugin for webpack, where typescript/sass and such get piped to the corresponding plugins

[vegarringdal]

@John0x
ok, and you are sure the typechecker are using the correct tslint/tsconfig file?

// get typechecker helper
const Typechecker = require('fuse-box-typechecker').TypeHelper
let typechecker = null;
let runTypeChecker = () => {
    // same color..
    console.log(`\x1b[36m%s\x1b[0m`, `app bundled- running typecheck`);

    // I could have had own for the sample...
    typechecker = Typechecker({
        tsConfig: './tsconfig.json',
        name: 'src',
        basePath: './',
        tsLint: './tslint.json',
        yellowOnLint: true,
        shortenFilenames:true
    })
    typechecker.runSync();
}

[TombolaShepless]

@John0x the VueComponentPlugin does use other plugins internally - see here. I'm at work right now so I can't really look into this atm.

I've not looked at the TypeChecker before - does this actually pick up .vue files to process?

[John0x]

@vegarringdal yeah, I'm using the exact same config.
@Shepless I believe that to be the problem. Webpack does it by piping the typescript to it's corresponding typescript plugin. That would, in my opinion, be the proper way to do it. Right now I have to have multiple configs for the same plugins (sass plugin for general sass files and the sass plugin for the vue plugin).

[TombolaShepless]

That is the way it would have been written if the fuse box architecture allowed it. This plugin was built in close collaboration with @nchanged throughout and it was deemed not possible to write it in that way. Therefore I made what I thought was a "halfway house" approach so I didn't need to duplicate every single plugin just for Vue files.

Webpack and Fuse are very, very different under the hood - it is not a copy and paste approach with plugins.

[vegarringdal]

@John0x
OK, then vue plugin you are using are doing much more then just extending tslint.json and doing checks, else it would have been picked up I guess

[TombolaShepless]

@John0x can you verify if the TypeChecker even picks up .vue files pls? If not - then that is the starting point for this issue for me.

[John0x]

@Shepless I don't think it does.
.Vue files contain more than just the typescript code. I don't get any errors by the type checker, even if I just put some rubbish wrong code in the file.
I can't verify it right now though, since I'd have to debug the plugin itself, I guess.

[TombolaShepless]

@John0x like I said I have never used (or looked at) the TypeChecker before. However, just a quick look at the README for this project immediately suggests to me that it does not pick up .vue files as the TypeChecker isn't actually a plugin - it is it's own entity that can just be run in total isolation.

Therefore from what I can see (again without any in depth digging) we have possibly two options:

1. Update TypeChecker to understand .vue files (IMO - extremely bad and we should not even consider it), or;
2. Update the VueComponentPlugin to optionally use the TypeChecker (if using TS of course)

[John0x]

@Shepless shouldn't it be even more generic? This is a pretty common use case, or not?
Or doesn't the fuse-box architecture allow that?

[TombolaShepless]

@John0x like I mentioned previously the fuse box architecture doesn't allow for that approach to be taken. That was my initial goal - re-use the existing plugin pipeline in the Vue plugin, but it just cannot be done in its current form. So, to repeat the above, I took a "halfway house" approach so we can reuse plugins within the Vue plugin. The only other alternative was to handle transforming manually (i.e. duplicate what other plugins already do) which was obviously a no-go solution.

This is why I am suggesting point 2) above - allow the Vue plugin to take an optional TypeChecker/Linter/Code Quality Tool in its options. This way we aren't duplicating what these plugins and/or tools do but they can still be used in single file components.

[John0x]

@Shepless yeah, I understand :)
I just cannot really see, why fuse-box works like that. I mean, it would be better to do it like webpack, from more than just one point of view.
Is the architecture that unflexible or is it something that is blocked by something else right now?

I could attempt attempt to modify the vue plugin myself tomorrow and create a pull request, or will you do it in the next couple days?

[TombolaShepless]

@John0x Things a little crazy my side at the moment so feel free to push up a PR and if you tag me in it I'll be more than happy to take a look at it.

On the architecture side of things - the main blocker was that there was no way to access the already created plugins from the work flow context to then call transform on and pass in the virtual file. I don't think that would have changed but its more of a question for @nchanged as he will know if this is now possible or if it would ever be possible.

[vegarringdal]

Im just gonna tag this as info only, so other can fin it.
I feel it would be bad to modify this typechecker/tslinter to support vuejs if this isnt supported out of the box by typescript/tslint by adding option to tslint.json or tsconfig.json.
If adding some option/api here to make it simpler for a plugin to access a part then thats ok, no problem with that, but it might already be there. :-)