Support the "New JSX Transform"

[mart-jansink]

React introduced the "New JSX Transform" that no longer requires the React variable to be available in the current context. This isn't enabled by default, but can be done manually, see https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#manual-babel-setup. Am I correct that this could be implemented in https://github.com/meteor/babel/blob/3b8dfd3841f1ee05640bea495d811a4ff28ec885/options.js#L83? E.g. replacing

options.presets.push(require("@babel/preset-react"));

with

options.presets.push(
  [require("@babel/preset-react"), {
    runtime: "automatic",
  }]
);

I tried doing this locally in my ~/.meteor directory, but Meteor didn't appear to pickup these changes..

[filipenevola]

Hey, great idea.

I believe to work locally you need to work with symbolic links on npm.

I'm doing this now 🤞

[filipenevola]

Hey, adding this option I'm getting this error Unknown option: .runtime (stack trace in the end).

I've tried to identify if the JSX runtime was available as I saw CRA and Next.js doing but I still get the same error:

const hasJsxRuntime = (() => {
  try {
    require.resolve('react/jsx-runtime.js');
    return true;
  } catch (e) {
    return false;
  }
})();

function maybeAddReactPlugins(features, options) {
  if (features && features.react) {
    options.presets.push(require("@babel/preset-react"), {
      ...(hasJsxRuntime ? {runtime: "automatic"} : {})
    });
    options.plugins.push(
      [require("@babel/plugin-proposal-class-properties"), {
        loose: true
      }]
    );
  }
}

I believe I'm getting this error because isopacket is using babel-runtime and not @babel/runtime (https://github.com/meteor/meteor/blob/46a3c721b46251c566bea13f0eafadf8f6a113c8/scripts/dev-bundle-tool-package.js#L24-L28).

I think the solution will be to identify who is calling and then provide the new option runtime only when the caller is @babel/runtime.

Error:

./meteor --help
Errors prevented isopacket build:             

While building for os.linux.x86_64:
packages/base64/base64.js: [BABEL] /home/ubuntu/ws/meteor/packages/base64/base64.js: Unknown option: .runtime. Check
out https://babeljs.io/docs/en/babel-core/#options for more information about options.
packages/ejson/ejson.js: [BABEL] /home/ubuntu/ws/meteor/packages/ejson/ejson.js: Unknown option: .runtime. Check out
https://babeljs.io/docs/en/babel-core/#options for more information about options.
packages/check/match.js: [BABEL] /home/ubuntu/ws/meteor/packages/check/match.js: Unknown option: .runtime. Check out
https://babeljs.io/docs/en/babel-core/#options for more information about options.
packages/random/main_server.js: [BABEL] /home/ubuntu/ws/meteor/packages/random/main_server.js: Unknown option:
.runtime. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
packages/tracker/tracker.js: [BABEL] /home/ubuntu/ws/meteor/packages/tracker/tracker.js: Unknown option: .runtime.
Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
packages/retry/retry.js: [BABEL] /home/ubuntu/ws/meteor/packages/retry/retry.js: Unknown option: .runtime. Check out
https://babeljs.io/docs/en/babel-core/#options for more information about options.
packages/id-map/id-map.js: [BABEL] /home/ubuntu/ws/meteor/packages/id-map/id-map.js: Unknown option: .runtime. Check
out https://babeljs.io/docs/en/babel-core/#options for more information about options.
packages/callback-hook/hook.js: [BABEL] /home/ubuntu/ws/meteor/packages/callback-hook/hook.js: Unknown option:
.runtime. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
packages/ddp-common/namespace.js: [BABEL] /home/ubuntu/ws/meteor/packages/ddp-common/namespace.js: Unknown option:
.runtime. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
packages/ddp-common/heartbeat.js: [BABEL] /home/ubuntu/ws/meteor/packages/ddp-common/heartbeat.js: Unknown option:
.runtime. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
packages/ddp-common/utils.js: [BABEL] /home/ubuntu/ws/meteor/packages/ddp-common/utils.js: Unknown option: .runtime.
Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
packages/ddp-common/method_invocation.js: [BABEL] /home/ubuntu/ws/meteor/packages/ddp-common/method_invocation.js:
Unknown option: .runtime. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
packages/ddp-common/random_stream.js: [BABEL] /home/ubuntu/ws/meteor/packages/ddp-common/random_stream.js: Unknown
option: .runtime. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
packages/socket-stream-client/server.js: [BABEL] /home/ubuntu/ws/meteor/packages/socket-stream-client/server.js:
Unknown option: .runtime. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
packages/diff-sequence/diff.js: [BABEL] /home/ubuntu/ws/meteor/packages/diff-sequence/diff.js: Unknown option:
.runtime. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
packages/mongo-id/id.js: [BABEL] /home/ubuntu/ws/meteor/packages/mongo-id/id.js: Unknown option: .runtime. Check out
https://babeljs.io/docs/en/babel-core/#options for more information about options.
packages/ddp-client/server/server.js: [BABEL] /home/ubuntu/ws/meteor/packages/ddp-client/server/server.js: Unknown
option: .runtime. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
packages/boilerplate-generator/generator.js: [BABEL]
/home/ubuntu/ws/meteor/packages/boilerplate-generator/generator.js: Unknown option: .runtime. Check out
https://babeljs.io/docs/en/babel-core/#options for more information about options.
packages/webapp-hashing/webapp-hashing.js: [BABEL] /home/ubuntu/ws/meteor/packages/webapp-hashing/webapp-hashing.js:
Unknown option: .runtime. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
packages/logging/logging.js: [BABEL] /home/ubuntu/ws/meteor/packages/logging/logging.js: Unknown option: .runtime.
Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.

/home/ubuntu/ws/meteor/dev_bundle/lib/node_modules/meteor-promise/promise_server.js:218
      throw error;
      ^

Error: isopacket build failed?
    at Object.ensureIsopacketsLoadable (/tools/tool-env/isopackets.js:230:11)
    at /tools/cli/main.js:870:40

I had to deprecate a few versions of meteor-babel that are not working as expected of this error: 7.10.2, 7.10.3, 7.10.4. Also the dev bundles 12.18.4.4, 12.18.4.5, 12.18.4.6. I had to publish them to test the changes in a new Meteor dev bundle.

[afrokick]

@filipenevola could you please explain how to properly create symlink for meteor-babel package?

[filipenevola]

You need to symlink in the folder where the node_modules is consuming from.

What are you trying to do?