Plugins: jsx: `preserve` does not compile

[zanona]

Hi,
I'm trying to compile .tsx preserving the JSX output but have a problem whenever using jsx: 'preserve'. It only works when using jsx: 'react' but it's not the output I'm looking for.
Any ideas or workarounds or am I missing something?

Thanks

rollup.config.json

import typescript from 'rollup-plugin-typescript';

export default {
    output: {name: 'foo', format: 'iife'},
    plugins: [
        typescript({
            jsx: 'preserve',
            target: 'esnext',
            lib: ['es5', 'es6', 'dom']
        })
    ]
};

main.tsx

export default <span>Yo!</span>

rollup -c -- main.tsx

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
lib/scripts/main.tsx (1:15)
1: export default <span>Yo!</span>
                  ^
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

[bhabgs]

I had the same problem，for vue tsx!

let SiderBox = class SiderBox extends Vue {
    render() {
       return (<div>haha</div>);
    }
};

[shellscape]

Hey folks (this is a canned reply, but we mean it!). Thanks to everyone who participated in this issue. We're getting ready to move this plugin to a new home at https://github.com/rollup/plugins, and we have to do some spring cleaning of the issues to make that happen. We're going to close this one, but it doesn't mean that it's not still valid. We've got some time yet before the move while we resolve pending Pull Requests, so if this issue is still relevant, please @ me and I'll make sure it gets transferred to the new repo. :beer:

[zanona]

@shellscape

[bhabgs]

I've solved the problem。
And added some Babel components
源码地址

[shellscape]

@zanona pleas try the solution posted by @bhabgs. Happy to reopen if that doesn't fit the bill.

[zanona]

Hi, @shellscape. Unfortunately I am not using babel.

[lukastaegert]

You do not need a Babel plugin, you need an acorn plugin, namely 'acorn-jsx'. This will make Rollup's parser acorn handle JSX tokens.

See https://rollupjs.org/guide/en/#acorninjectplugins which exactly describes your use-case.

[zanona]

Thanks @lukastaegert.
I just tested and it worked pretty well. Thanks.
Considering this, would it be sensible to say that the preserve option on this plugin would only work when using it the way you suggested? It may be worth documenting it perhaps?

[lukastaegert]

Definitely worth a docs update as it may help others with a similar use-case, PR welcome!

[MartijnHols]

Is Acorn a last step of this plugin or a part of Rollup? I think it's the latter, so then shouldn't this only be necessary if you want to preserve JSX in the final output, but not if you want another plugin (e.g. babel) to compile it instead? The current text seems to suggest it's always required when jsx is set to preserve, while all I'm trying to achieve is have the raw JSX run through babel macros, then convert it to regular JS.