@rollup/plugin-typescript breaks rollup watch

[milky2028]

• Rollup Plugin Name: @rollup/plugin-typescript
• Rollup Plugin Version: 4.1.2
• Rollup Version: 2.10.9
• Operating System (or Browser): macOS 10.15.4 and debian 10
• Node Version: seen in most recent versions of both node 10 and node 12

How Do We Reproduce?

I've created a minimal repo.

npm install

Then,

npm run watch

to watch for changes. Make some changes to either of the files in the src directory, and you'll see that build files do not appropriately update. I was originally going to file a bug with the main rollup repo, but after testing with rollup-plugin-terser and @rollup/plugin-babel, I did not see this behavior with either of those plugins.

Expected Behavior

I expect that build files in the dist folder of the included minimal repo should actively respond to changes and each built file should reflect the changes in source files.

Actual Behavior

Build files do not appropriately respond and seem to be about one change behind.

If anyone sees this and is looking for a fix, reverting to 4.1.1 fixes this issue, but this also reintroduces the memory leak discussed in #322.

[dionysiusmarquis]

I was just doing the exact same. I also created a minimal repo with this issue.
One thing I can add is that if you import a .js file the .js file part in the bundle will be updated. Every .ts file part in the bundle will remain as first build and will not update.

[shellscape]

We'd be happy to review a PR which resolves this.

[milky2028]

I'll see if I can spin one up sometime here soon

[calebdwilliams]

We just ran into this issue as well. Would be happy to test a change as well.

[dionysiusmarquis]

I don't know if its required to keep the ts watcher program running. Maybe it could be ok to always close the program in the buildEnd hook.

Closing the program and clear emittedFiles in the watchChange hook seems to fix the issue in my test case.

watchChange () {
  program.close()
  program = null
  emittedFiles.clear()
},

Keeping the ts watch programm running and trying to get in sync with Rollup hooks again seems quiet challenging.

Edit:
Maybe just using ts.createProgram instead of ts.createWatchProgram makes the process easier. The writeFile callback of the watch program will always fire after the Rollup watch hooks. The generateBundle hook has to be async and has to wait for all files written by the ts watch program. I'm not sure, but it seems a little redundant to have two watch processes running (Rollup, ts).

[dionysiusmarquis]

Another thing to consider is, that Rollup and ts watcher program might have different watch policies. If I save a file but with nothing actually changed, Rollup watch is triggered but the ts watcher program will not trigger. This is a major problem if the watchChange hook is directly bound to ts watcher program writeFile. If the two triggers dont work coherently they can not be bound reliable and will left unresovled promises.

[MuyNooB]

I use rollup -cw and pack the same file as the first time, then I try gulp + rollup to pack and success.

const gulp = require('gulp');
const rollup = require('rollup');
const rollupTypescript = require('@rollup/plugin-typescript');

gulp.task('build', async function() {
    const bundle = await rollup.rollup({
        input: './src/index.ts',
        plugins: [
            rollupTypescript()
        ]
    });

    await bundle.write({
        file: './dist/js/index.js',
        format: 'umd',
        name: 'wkd',
        sourcemap: true
    });
});

gulp.task('watch', done => {
    // const outputOptions = Object.assign({ sourcemap: true }, pack_config.output);
    const watchOptions = {
        input: './src/index.ts',
        output: {
            file: './dist/js/index.js',
            format: 'umd',
            name: 'wkd',
            sourcemap: true,

        },
        plugins: [
            rollupTypescript(),
        ],

        watch: {
            chokidar: true,
            clearScreen: true,
        }
    };

    const watcher = rollup.watch(watchOptions);
    watcher.on('event', event => {
        // console.log(event);
    })
    done();
})```