Support for JSX pragma comment syntax?

Are there any plans to support inline /** @jsx foo */ comments for inline per-module configuration of the JSX pragma option

https://babeljs.io/docs/plugins/transform-react-jsx/#example-custom

Not supported. You have to set an option.

$ echo 'f(<Foo>bar</Foo>);' | buble --jsx CustomJsxHandler
f(CustomJsxHandler( Foo, null, "bar" ));

I figured it was not supported.
But, is support planned or likely?

But, is support planned or likely?

That depends. All features are contributed by users. Every few months Rich merges the pending pull requests and makes a release.

Buble uses the acorn ecmascript parser. If you want to take a crack at implementing this feature then look at the source code of rollup to see how the acorn comments API works.

The implementation was easier than I thought. This appears to match Babel's behavior of first pragma wins:

--- a/src/index.js
+++ b/src/index.js
@@ -52,6 +52,12 @@ export function transform ( source, options = {} ) {
                        ecmaVersion: 7,
                        preserveParens: true,
                        sourceType: 'module',
+                       onComment: ( block, text, start, end ) => {
+                               if ( !options.jsx ) {
+                                       let match = /@jsx\s+([^\s]+)/.exec( text );
+                                       if ( match ) options.jsx = match[1];
+                               }
+                       },
                        plugins: {
                                jsx: true,
                                objectSpread: true

$ echo 'foo( <Bar>hello<Baz/></Bar> );' | bin/buble
foo( React.createElement( Bar, null, "hello", React.createElement( Baz, null ) ) );

$ echo '/** @jsx MyJSX */ foo( <Bar>hello<Baz/></Bar> );' | bin/buble
/** @jsx MyJSX */ foo( MyJSX( Bar, null, "hello", MyJSX( Baz, null ) ) );

$ echo '/** @jsx MyJSX */ foo( <Bar>hello<Baz/></Bar> );' | bin/buble --jsx CLI.jsx.wins
/** @jsx MyJSX */ foo( CLI.jsx.wins( Bar, null, "hello", CLI.jsx.wins( Baz, null ) ) );

@maranomynet Could you be so kind to make a Buble pull request and add a couple of tests?

Exciting! I'll take a crack at making a proper PR based on this.

However, I'll likely try to reverse the preference order, making comments override the CLI setting (for the current module only).

That way one can have a project-level default - but override it on a per-module basis.

This appears to match Babel's behavior of first pragma wins

Uhm, does Babel make a persistent change to its JSX pragma setting when it encounters such a comment? So that a project with two or more different /** @jsx ... */ declarations has a somewhat unpredictable/arbitrary result?

However, I'll likely try to reverse the preference order, making comments override the CLI setting (for the current module only).

That's fine. As long as it matches Babel's behavior.

does Babel make a persistent change to its JSX pragma setting when it encounters such a comment? So that a project with two or more different /** @jsx ... */ declarations has a somewhat unpredictable/arbitrary result?

Within one source file Babel appears to use the first jsx pragma encountered - regardless of its location in the file.

babel@5.8.29 appears to reset the jsx pragma for each new module, using the value of --jsx-pragma if present, otherwise React.createElement.

This following patch appears to match babel@5.8.29's behavior:

--- a/src/index.js
+++ b/src/index.js
@@ -46,17 +46,26 @@ export function target ( target ) {
 
 export function transform ( source, options = {} ) {
        let ast;
+       let jsx = null;
 
        try {
                ast = parse( source, {
                        ecmaVersion: 7,
                        preserveParens: true,
                        sourceType: 'module',
+                       onComment: ( block, text, start, end ) => {
+                               if ( !jsx ) {
+                                       let match = /@jsx\s+([^\s]+)/.exec( text );
+                                       if ( match ) jsx = match[1];
+                               }
+                       },
                        plugins: {
                                jsx: true,
                                objectSpread: true
                        }
                });
+
+               options.jsx = jsx || options.jsx;
        } catch ( err ) {
                err.snippet = getSnippet( source, err.loc );
                err.toString = () => `${err.name}: ${err.message}\n${err.snippet}`;

$ echo 'foo( <Bar>hello<Baz/></Bar> );' | bin/buble
foo( React.createElement( Bar, null, "hello", React.createElement( Baz, null ) ) );

$ echo 'foo( <Bar>hello<Baz/></Bar> );' | bin/buble --jsx CLI.jsx.wins
foo( CLI.jsx.wins( Bar, null, "hello", CLI.jsx.wins( Baz, null ) ) );

$ echo '/** @jsx MyJSX1 */ /** @jsx MyJSX2 */ foo( <Bar>hello<Baz/></Bar> );' | bin/buble
/** @jsx MyJSX1 */ /** @jsx MyJSX2 */ foo( MyJSX1( Bar, null, "hello", MyJSX1( Baz, null ) ) );

$ echo '/** @jsx MyJSX1 */ /** @jsx MyJSX2 */ foo( <Bar>hello<Baz/></Bar> );' | bin/buble --jsx CLI.jsx.wins
/** @jsx MyJSX1 */ /** @jsx MyJSX2 */ foo( MyJSX1( Bar, null, "hello", MyJSX1( Baz, null ) ) );

Exactly, Babel seems to be very sensible about this. Thanks!

mentioned in merge request !119 (closed)