Recursive vue imports with inline typescript

[ezolenko]

Expected behavior

Ideally rollup-plugin-vue handles all inline vue imports and creates multiple ?rollup-plugin-vue=script.ts modules in rollup before passing them down the chain.

Actual behavior

See ezolenko/rollup-plugin-typescript2#129, basically rollup-plugin-vue generates typescript code that gets passed to rollup-plugin-typescript2, but that code has another import "something.vue" statement and I can't pass it back to rollup because typescript demands cold hard values and doesn't take promises.

Steps to reproduce the behavior

See the test repo in the referenced bug.

[znck]

Shouldn't ts-loader be running into this situation too?

[ezolenko]

I don't know how webpack resolves things internally and how they deal with vue imports, so I can't say if they should have a similar problem. Looks like they use a sync version of webpack's resolver with the same typescript API in the end. Doesn't looks like there is an alternative in rollup.

I'm also looking into possibly preprocessing files to detect imports, sending them off to rollup resolver (which would hit vue plugin and cause it to generate new module), then using those resolutions. This might be a problem if I can't request module source from rollup from within transform call.

[znck]

This might be a problem if I can't request module source from rollup from within transform call.

Let me know if you some approach, maybe I can help.

[ezolenko]

So the main problem is typescript not knowing what shape .vue module is, because inline script is not exposed yet. I don't see a good way to fix this without mixing areas of concern -- either rpt2 will need to know how to parse vue or vue plugin will need to know how to parse typescript (see below).

There are two flows currently (plugin order is not very important because we look at different file types):

1. When starting from vue file:

component1.vue 
    => component1.vue?script=ts 
        => component2.vue 
            => component2.vue?script=ts

• rollup starts the plugin chain
• vue plugin extracts ts script and feeds ts code as a module to rollup
• first chain ends there because rpt2 ignores .vue extension
• rollup feeds new module to the chain
• rpt2 processes new ts to js, that module is now visible to future transpiles
  • complains about unknown type of component2.vue module unless silenced by //@ts-ignore
• rollup detects imports in js and starts the chain for each of them

2. When starting from typescript file (is that a valid scenario?):

main.ts 
    => component1.vue 
        => component1.vue?script=ts 
            => component2.vue 
                => component2.vue?script=ts

• rollup starts the plugin chain
• rpt2 plugin transforms ts to js
  • complains about unknown type of component1.vue module unless silenced by //@ts-ignore
• rollup detects imports in js and starts the chain for each of them
• vue plugin handles component1.vue and injects a new ?script=ts module
• ...

Vue plugin could do the preprocessing when it first extracts typescript source -- there is ts.preProcessFile function that looks like it will return imported files (hopefully it will not try to resolve them on its own, otherwise we are back where we started). This will involve importing typescript (and expecting it in plugin options in case user wants a custom typescript version).

Vue plugin can check if any imports are vue and handle them recursively creating new modules for the whole tree, preferably leaves first.

If rollup preserves order when serving new modules, flattened depth first dependency tree will handle first scenario.

Scenario 2 is worse because typescript only knows about dynamic modules when transform() on rpt2 is called and they are added to the known file list and to document registry. Even if vue plugin reads initial ts code, gets all imports and extracts all the modules in correct order, they will become available on the next iteration, which is too late.

declare namespace ts {
    function preProcessFile(sourceText: string, readImportFiles?: boolean, detectJavaScriptImports?: boolean): PreProcessedFileInfo;
}

   interface PreProcessedFileInfo {
        referencedFiles: FileReference[];
        typeReferenceDirectives: FileReference[];
        libReferenceDirectives: FileReference[];
        importedFiles: FileReference[];
        ambientExternalModules?: string[];
        isLibFile: boolean;
    }

[znck]

cc: @Rich-Harris

[ezolenko]

There is a parallel discussion here too: ezolenko/rollup-plugin-typescript2#129