Possibility to support vue-loader?

Thanks for building ts-loader for webpack! I wonder whether ts-loader can support vue.js' single file component.

Related issue in vue-loader
vuejs/vue-loader#109

The current problem is ts-loader cannot resolve files with extension name .vue. However, TypeScript compiler supports customizing module resolution.

Since ts-loader has already implemented a custom resolveModuleNames function, supporting it is feasible.

I tried locally and it works. However I'm a newbie to webpack and I think my try is dirty and hacky...

Do you have any good ideas? I'm happy to implement them.

I forked ts-loader for this. But it seems ts-loader changes quite fast. Any possibility to support vue natively in ts-loader?

Quite possibly. I'm just doing a bit of a refactor on the code to get it to a more maintainable place. I'd be interested in getting vue support in once that's done. (I'm currently guessing I'll be done with the refactor inside a week or 2).

Does adding vue to your webpack.config not resolve the issue?:

 resolve: {
    extensions: ['', '.ts', '.tsx', '.js', 'vue']

Forgive me if that's a naïve question; I have 0 vue experience....

It still need some special handling in loader, but rather small modification.

HerringtonDarkholme/vue-ts-loader@d581d46

The core modification is appending .ts suffix to *.vue file, then every thing is fine. My concern is its hard coding nature.

I'm on my phone and so can't really look at this properly. But I think we can avoid hard coding and just add another option. As I see it

function appendSuffixToVue(fileName: string) {
    if (/\.vue$/.test(fileName)) {
        return fileName + '.ts';
    }
    return fileName;
}

Is something that tests a file path ends with vue and if so suffixes .ts on the end. So what say we introduce a ts-loader option called appendTsSuffixTo that, when supplied, is used to suffix .ts in the manner your fork does. Sound good?

That's great. More generic. 👍

Great - we'll need an integration test to cover this. You may already have one we can use. We've recently introduced "execution tests" as well as the pre-existing "comparison tests". Either will do. The comparison tests only run against the latest released version of TypeScript. The execution tests against all versions back to 1.6.

I will submit a pull request once refactor is done. Looking forward to your refactor :)

Cool! The refactor is basically done. Just waiting on some feedback. Will let you know when I merge 😄

#343

Over to you... 1.0.0 has 🚢 😄

Thanks! I need some time to understand what ts-loader does now, so please be patient.

No worries - I need that too!

Is there any flaky test? vue-loader's output is indeed very flaky...

There are flaky tests in the comparison test pack. Look out for a _FLAKY_ file in the root of test directories. This denotes a flaky test and a failure of this will not fail the build. I think there's about 3 flaky tests; mainly down to platform issues. See this as an example of a flaky test:

https://github.com/TypeStrong/ts-loader/tree/master/test/comparison-tests/html-webpack-plugin

Merge pull request #354 from HerringtonDarkholme/dev

Navigation Menu

Repository navigation

Possibility to support vue-loader? #270

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Possibility to support vue-loader? #270

Description

Activity

HerringtonDarkholme commented on Oct 24, 2016

johnnyreilly commented on Oct 24, 2016

HerringtonDarkholme commented on Oct 24, 2016

johnnyreilly commented on Oct 24, 2016

HerringtonDarkholme commented on Oct 24, 2016

johnnyreilly commented on Oct 24, 2016

HerringtonDarkholme commented on Oct 29, 2016

johnnyreilly commented on Oct 29, 2016

johnnyreilly commented on Oct 29, 2016

johnnyreilly commented on Nov 1, 2016

HerringtonDarkholme commented on Nov 2, 2016

johnnyreilly commented on Nov 2, 2016

HerringtonDarkholme commented on Nov 2, 2016

johnnyreilly commented on Nov 2, 2016

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions