meteor / babel

Babel wrapper package for use with Meteor

---

Meteor is an ultra-simple environment for building modern web applications.

---

• Official Website
• Installation
• Documentation

---

📚 Create your applications using modern JavaScript

Benefit from the latest technology updates to rapidly prototype and develop your applications.

---

✨ Integrate technologies you already use

Use popular frameworks and tools right out-of-the-box. Focus on building features instead of configuring disparate components yourself.

---

💻 Build apps for any device

Use the same code whether you’re developing for web, iOS, Android, or desktop for a seamless update experience for your users.

---

🔥 Getting Started

How about trying a tutorial to get started with your favorite technology?

React
Blaze
Vue
Svelte

Next, read the documentation and get some examples.

🚀 Quick Start

On your platform, use this line:

> npm install -g meteor

🚀 To create a project:

> meteor create my-app

☄️ Run it:

cd my-app
meteor

🧱 Developer Resources

Building an application with Meteor?

• Deploy on Meteor Cloud
• Discuss on Forums
• Join the Meteor community Slack by clicking this invite link.
• Announcement list. Subscribe in the footer.

Interested in helping or contributing to Meteor? These resources will help:

• Core development guide
• Contribution guidelines
• Feature requests
• Issue tracker

To uninstall Meteor:

• If installed via npm, run:

  meteor-installer uninstall

• If installed via curl, run:

  rm -rf ~/.meteor 
  sudo rm /usr/local/bin/meteor

To find more information about installation, read here.

babel's Issues

`Babel.transformMeteor` doesn't automatically generate `displayName` properties for calls to `React.createClass`

See https://facebook.github.io/react/docs/jsx-in-depth.html#the-transform:

JSX will infer the class's displayName from the variable assignment when the
displayName is undefined:

// Input (JSX):
var Nav = React.createClass({ });
/> / Output (JS):
var Nav = React.createClass({displayName: "Nav", });

and https://babeljs.io/docs/usage/jsx/:

Tags are automatically transformed to their equivalent React.createElement(...) and displayName is automatically inferred and added to all React.createClass calls.

Here's the repro (run inside a clone of this repo):

Avitals-MacBook-Air:babel avital$ node
> Babel = require('./index')
{ getDefaultOptions: [Function: getDefaults],
  parse: [Function: parse],
  compile: [Function: compile],
  installRuntime: [Function: installRuntime],
  runtime: [Function: installRuntime] }
> Babel.compile("Foo = React.createClass({render: function () { return <div></div> }});", {whitelist: ["react"]}).code
'Foo = React.createClass({ render: function () {\n    return React.createElement("div", null);\n  } });'

(This manifests itself as a failure on the react-template-helper Meteor packages in the github.com/meteor/react-packages repo. The failing test tests a diagnostic message that extracts displayName. Previous versions of this package worked when they depended on an older version of the babel-compiler package that used the babel-core NPM package directly)

Ignoring environment variables in the babelrc

It seems like Meteor is ignoring the env option in a babelrc. After you set the NODE_ENV or BABEL_ENV it appears that the Meteor build process fails to take into account the environment and run the plugins that are listed under that environment. For example, if your .babelrc looks like:

{
  "env": {
      "unittesting": {
        "plugins": ["rewire"]
    }
  }
}

and you run the command: NODE_ENV="unittesting" meteor test --driver-package practicalmeteor:mocha --port 3100

You get an error caused by missing rewire. However, if you put the rewire plugin at the top level of the .babelrc file everything works fine. All of this leads me to think that Meteor is breaking from expected babel behavior and just ignoring the env option. See: https://forums.meteor.com/t/environment-variable-in-babelrc-ignored-by-meteor-build/33166 for additional details.

Not running on client?

I used to use grigio:babel which is now marked as "deprecated" because of the new babel-compiler package. But I have troubles using this, as babel-compiler does not support client code. Why is this so? I should be no problem to transpile it for the client during the build process, as it is possible with grunt / gulp for quite a long time. Supporting babel on the server only is a huge drawback.

Achieve if () import 'foo.scss'; compatability with JS parsers? (hyperclick)

Meteor has it's magical if (Meteor.isClient) import 'foo.scss'; syntax which violates JavaScript standards.

What is the best way to achieve compatibility with JavaScript parsers, like js-hyperclick, which fails to parse Meteor files as a result of this?

I've reported the issue and my workaround hack here: AsaAyers/js-hyperclick#122

Support the "New JSX Transform"

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

babel/options.js

Line 83 in 3b8dfd3

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

? 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..

support babel-plugin-import

When using meteor and antd (a react components framework), we need to use babel-plugin-import to convert this code:

import { Button } from 'antd';

into

var _button = require('antd/lib/button');

It was working with [email protected], but now it's not working ([email protected]). I guess it because now meteor-babel will compile first using reifyCompiler and then pass the result to babel, while in v0.13.0 babel compile first and then pass the result to reify.

Is it possible to make reify not transpile specific module (like antd)? so babel will take the responsible to transpile it using babel-plugin-import?

Bug when a property has a getter/setter

I'm trying to upgrade from Meteor 1.6 to Meteor 1.11.1 and I'm getting the same error on virtually every file: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute.

Attaching a debugger to the running meteor process (the builder, not the runner) and modifying Object.defineProperty to look for these situations and pause:

origDefineProperty = Object.defineProperty;Object.defineProperty = function(o, p, v, ...args) {
if (v) {
    if ((v.writeable || v.value !== undefined) && (v.get || v.set)) {
        debugger;
    }
}
try {
return origDefineProperty.call(Object, o, p, v, ...args)
}
catch (e) {
  debugger;
  console.error(e); 
  console.log(o, p, v, ...args);
}
}

Shows that the offending value + getter combo is caused by the handleKey function in util.js(https://github.com/meteor/babel/blob/master/util.js#L49)

This is caused by an internal package (a hack to make sourcemaps work better) - but it feels like something that should be fixed, if a getter/setter is defined, don't set the value.

Documentation?

This package doesn't have documentation so I'm not sure a) how to use it properly and b) whether it'd be helpful for the issues I'm currently facing.

In my case, meteor testing with practicalmeteor:mocha is choking on the spread operator, resulting in:

SyntaxError: Unexpected token ...

The version of meteor-babel should be 7.9.0

After release 1.10.2 the meteor-babel's version should be 7.9.0. meteor/meteor@156bdcd

On npm the version also 7.9.0 https://www.npmjs.com/package/meteor-babel

Seems like @benjamn forgot to commit changes in this repo)

How do we use this in Meteor (right now)?

Matt's blog post (http://info.meteor.com/blog/whats-coming-in-meteor-12-and-beyond) seems to suggest that we can start using ES6 in Meteor projects, right now.

Is there a way to add this package into Meteor 1.1 apps and start using ES6 immediately? I'm guessing it's not as simple as Npm.depends({"meteor-babel": ...}), is it?

babel-plugin-import + React = forgotten variable alias

When babel parses React elements, it forgets the variables alias

import React from "react";
import ReactDOM from "react-dom";
import { Meteor } from "meteor/meteor";

import { LocaleProvider } from "antd";
import enUS from "antd/lib/locale-provider/en_US";

console.log(LocaleProvider);

Meteor.startup(() => {
    ReactDOM.render(
        <LocaleProvider locale={enUS}>
            <h1>Hello World</h1>
        </LocaleProvider>,
        document.getElementById("render-target")
    );
});

Compiles into:

//  ...............

module.importSync("antd/lib/locale-provider/style/css", {
    style: function (v) {
        _style = v;
    }
}, 0);

var _default = void 0;

module.importSync("antd/lib/locale-provider", {
    "default": function (v) {
        _default = v;
    }
}, 1);

//  ...............

console.log(_default); //LocaleProvider=_default.... Right!
Meteor.startup(function () {
    ReactDOM.render(React.createElement(
        LocaleProvider, // <- babel forgot its supposed to be _default
        {
            locale: enUS
        },
        React.createElement(
            "h1",
            null,
            "Hello World"
        )
    ), document.getElementById("render-target"));
});

Enable es6.constants

Upgrading @babel/runtime to 7.0.0-beta.56 breaks the build

What I tried:

• Installing @babel/runtime-corejs2
• Adding custom babelrc with this: { "plugins": [ "@babel/plugin-transform-runtime", { "corejs": 2 } ] }
• Installing @babel/plugin-transform-runtime with @babel/core and pinning them to 7.0.0-beta.56

But didn't change the situation.

Relevant links:

Relevant post on Meteor Forum: https://forums.meteor.com/t/error-cannot-find-module-babel-runtime-helpers-builtin-interoprequiredefault/44944/7

Relevant Meteor issue: meteor/meteor#10126

Babel release changelog: https://github.com/babel/babel/releases/tag/v7.0.0-beta.56

Updated docs for runtime plugin: https://github.com/babel/babel/releases/tag/v7.0.0-beta.56

Original PR in Babel: babel/babel#8266

Here is the stacktrace:

=> Started proxy.                             
W20180804-14:25:34.341(0)? (STDERR) XXXXXXXXX/.meteor/local/build/programs/server/boot.js:475
W20180804-14:25:34.381(0)? (STDERR) }).run();
W20180804-14:25:34.381(0)? (STDERR)    ^
W20180804-14:25:34.382(0)? (STDERR) 
W20180804-14:25:34.382(0)? (STDERR) Error: Cannot find module '@babel/runtime/helpers/builtin/interopRequireDefault'
W20180804-14:25:34.382(0)? (STDERR)     at Function.Module._resolveFilename (module.js:547:15)
W20180804-14:25:34.383(0)? (STDERR)     at Function.resolve (internal/module.js:18:19)
W20180804-14:25:34.383(0)? (STDERR)     at Object.require (XXXXXXXXX/.meteor/local/build/programs/server/boot.js:288:32)
W20180804-14:25:34.384(0)? (STDERR)     at makeInstallerOptions.fallback (packages/modules-runtime.js:651:18)
W20180804-14:25:34.384(0)? (STDERR)     at require (packages/modules-runtime.js:244:16)
W20180804-14:25:34.384(0)? (STDERR)     at livedata_connection.js (XXXXXXXXX/.meteor/local/build/programs/server/packages/ddp-client.js:147:30)
W20180804-14:25:34.384(0)? (STDERR)     at fileEvaluate (packages/modules-runtime.js:343:9)
W20180804-14:25:34.385(0)? (STDERR)     at require (packages/modules-runtime.js:238:16)
W20180804-14:25:34.385(0)? (STDERR)     at namespace.js (packages/ddp-client/common/namespace.js:1:300)
W20180804-14:25:34.385(0)? (STDERR)     at fileEvaluate (packages/modules-runtime.js:343:9)

`util.deepHash` is slower than hashing JSON

Changing this line to:

  var cacheHash = util.deepHash(meteorBabelVersion, source, JSON.stringify(options));

...more than doubles hashing performance. The simplest and most performant thing would probably be to drop deepHash and just take the SHA of JSON.stringify({meteorBabelVersion, source, options}).

Edit: Oops, since source is a really big string, maybe don't JSON the whole thing, just options, and use deepHash.

Enable 'es3.propertyLiterals'

Cannot find module 'meteor-babel/plugins/dynamic-import'

We're using meteor-babel in our wallabyJS config, and a recent update to this package has broken it.

Here's the compilers part:

compilers: {
          '**/*.js?(x)': wallaby.compilers.babel({
            presets: ['meteor', '@babel/preset-react', '@babel/preset-flow'],
            plugins: [
              '@babel/plugin-transform-modules-commonjs',
              '@babel/plugin-proposal-class-properties',
              'meteor-babel/plugins/dynamic-import', // Disabling this generates another error
            ],
          }),
        },

If I disable the use of the meteor-babel plugin, I get this error:

SyntaxError: Support for the experimental syntax 'dynamicImport' isn't currently enabled

How to enable dynamic import now?

babelrc ignore doesn not work.

.babelrc

{
  "ignore": [
    "imports/do-not-babel.js"
  ]
}

This does not seem to be working.