This fixes a weird stateful bug where a single comment-based JSX pragma declaration can change the pragma used for all subsequent transforms.
The issue is caused by the options object being mutated by the transform() function. In particular, it is done when a @jsx directive comment is found in a file. If you then re-use the same options object instance for your next transform call (which coincidentally is what is done by buble-loader), you will be potentially passing through an incorrect JSX pragma.
Example
const transform = require('buble')
const options = {}
transform(`
/* @jsx h */
const { h } = require('preact')
const foo = <div>Bar</div>
`, options)
/* output:
const { h } = require('preact')
const foo = h('div', {}, 'Bar')
*/
// At this point, options has been mutatated by calling `transform`, it now looks like this: { jsx: 'h' }
transform(`
const React = require('preact')
const foo = <div>Bar</div>
`, options)
/* output:
const React = require('preact')
const foo = h('div', {}, 'Bar')
*/
The solution I have implemented here is to shallow-clone the options object before mutating it.
This fixes a weird stateful bug where a single comment-based JSX pragma declaration can change the pragma used for all subsequent transforms.
The issue is caused by the options object being mutated by the
transform()
function. In particular, it is done when a@jsx
directive comment is found in a file. If you then re-use the same options object instance for your next transform call (which coincidentally is what is done bybuble-loader
), you will be potentially passing through an incorrect JSX pragma.Example
The solution I have implemented here is to shallow-clone the options object before mutating it.