incorrect code when this is used in async function

sormy commented 5 years ago

This code:

  public async loadBundle() {
    return new Promise((resolve, reject) => {
      if (this.xhr) {
        this.xhr.abort()
        this.xhr = undefined
      }

      this.xhr = $.ajax({
        url: "some url",

        dataType: "script",

        success: () => {
          resolve()
        },

        error: (jqXHR, textStatus, errorThrown) => {
          reject()
        },
      })
    })
  }

converted to:

    loadBundle(bundleID) {
      return new Promise(function ($return, $error) {
        return $return(new Promise((resolve, reject) => {
          if (this.xhr) {
            this.xhr.abort();
            this.xhr = undefined;
          }

          this.xhr = $.ajax({
            url: "some url",
            dataType: "script",
            success: () => {
              resolve()
            },
            error: (jqXHR, textStatus, errorThrown) => {
              reject()
            }
          });
        }));
      });

and this is always undefined here because return new Promise(function ($return, $error) { steals this.

package.json:

    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-react-constant-elements": "^7.0.0",
    "@babel/plugin-transform-react-inline-elements": "^7.0.0",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.1.0",
    "fast-async": "^7.0.6",

babel.config.js:

{
  compact: false,
  presets: [
    ['@babel/preset-env', {
      targets: ['Since 2018'],
      exclude: ['transform-regenerator']
    }],
    ['@babel/preset-react', { development: isDev }],
    ['@babel/preset-typescript', { isTSX: true, allExtensions: true }]
  ],
  plugins: [
    '@babel/proposal-class-properties',
    '@babel/proposal-object-rest-spread',
    'module:fast-async',
    'add-module-exports',
    'inline-react-svg',
    'add-react-displayname',
  ]
}

matAtWork commented 5 years ago

It works for me using the link below. I'm guessing some other babel transform is munging the code and stripping the .$asyncbind which ensures this is set correctly.

As a point of information, there is no point in returning a Promise from an async function, or indeed declaring it async - you can just return a Promise and await on that

Output:

function loadBundle() {
    return (function ($return, $error) {
        return $return(new Promise((resolve, reject) => {
            if (this.xhr) {
                this.xhr.abort();
                this.xhr = undefined;
            }
            this.xhr = $.ajax({
                url: "some url",
                dataType: "script",
                success: () => {
                    resolve();
                },
                error: (jqXHR, textStatus, errorThrown) => {
                    reject();
                }
            });
        }));
    }).$asyncbind(this, 0);
}

sormy commented 5 years ago

Hi, still trying to figure out why $asyncbind is not in output. However, having async explicitly defined for function is very convenient since it helps static analyzers to warn if I forgot to add await before function call.

sormy commented 5 years ago

Seems like fast-async needs two plugins fromenv preset to be disabled to work well. I guess it could be added to documentation for the plugin. There are no issues if these two transforms are disabled.

{
  "presets": [
    ["@babel/env", {
      "exclude": ["transform-regenerator", "transform-async-to-generator"]
    }]
  ],
  "plugins": [
    "module:fast-async"
  ]
}

MatAtBread commented 5 years ago

Thanks for the update. Babel is a moving target, and this repo is pretty much in maintenance only. If you want to do a PR for the README, I'd be happy to accept it.

MatAtBread / fast-async

incorrect code when this is used in async function #61