Converting Async/Await Function to Normal Es5 Targetting Ie 11

var search = document.getElementById('searchTerm_de');var search2 = document.getElementById('searchTerm_en');var matchList = document.getElementById('result');
var searchStates = function searchStates(searchText) {  var res, states, matches;  return regeneratorRuntime.async(function searchStates$(_context) {    while (1) {      switch (_context.prev = _context.next) {        case 0:          _context.next = 2;          return regeneratorRuntime.awrap(fetch('../data/info.json'));
        case 2:          res = _context.sent;          _context.next = 5;          return regeneratorRuntime.awrap(res.json());
        case 5:          states = _context.sent;          matches = states.filter(function (state) {            var regex = new RegExp("^".concat(searchText), "gi");            return state.name.match(regex);          });
          if (searchText.length === 0) {            matches = [];            matchList.innerHTML = '';          }
          ;          outputHtml(matches);
        case 10:        case "end":          return _context.stop();      }    }  });};
var outputHtml = function outputHtml(matches) {  if (matches.length > 0) {    var html = matches.map(function (match) {      return "<div class=\"card result-list de en\">\n\t\t<h6><span class=\"my-result\"><a href=\"".concat(match.url, "\" target=\"_blank\">").concat(match.name, "</a> </h6></span>\n\t</div>\n\t");    }).join('');    matchList.innerHTML = html;  }};
search.addEventListener('input', function () {  return searchStates(search.value);});search2.addEventListener('input', function () {  return searchStates(search2.value);});

Compile asyn/await to es5 with babel js

assuming you want to quickly run a script to transpile your es5 code with babel follow these instructions:

• first thing you have todo is to setup a little node project.
  if you have never setup a node project goto:
  https://nodejs.org/en/download/

• as soon as you have npm globally you can goto your project folder and type:
  
npm init

  this will create you a package.json file.

• goto: https://babeljs.io/docs/setup/#installation
  and click on CLI and follow all the mentioned steps.

• Make sure you install the correct presets for babel to transpile async await. You'll need the es2015 and stage3 preset and the runtime plugin.

  • http://babeljs.io/docs/plugins/preset-es2015/#install
  • http://babeljs.io/docs/plugins/preset-stage-3/#install
  • https://babeljs.io/docs/plugins/transform-runtime/#installation
  • checkout Transpile Async Await proposal with Babel.js? for a more minimal setup.

Why isn't my Mutex class being transpiled by Webpack?

Babel configuration within package.json only applies within your specific package, not node_modules, so even though Babel is set up to process all files in your bundle, it's only been configured to perform transformations on your own package's files. See the Babel config file docs.

You need to create a babel.config.json instead, or you need to put the config directly into the Webpack config, so either

babel.config.json:

{
    "presets": [
        "@babel/preset-env"
    ]
}

OR
webpack.config.js:

module.exports = {
    entry:  {
        bundle: './index.js',
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                use:  'babel-loader',
                options: {
                    "presets": [
                        "@babel/preset-env"
                    ]
                }
            },
        ],
    },
};

TypeScript: arguments keyword in async functions

It's because Async functions get transpiled to a basic polyfilled implementation of generators; this implementation basically swaps out the body of your function to wrap it in another function, therefore any use of arguments will never access the original arguments of hello but instead of __generator

An example of this is below where hello which takes no arguments and generates the following in which the body of the function is wrapped in another function.

async function hello() {
    console.log(arguments);
} // becomes.....


function hello() {
    return __awaiter(this, arguments, void 0, function () {
        return __generator(this, function (_a) {
            console.log(arguments);
            return [2 /*return*/];
        });
    });
}

to re-iterate, console.log(arguments) has moved from the context of hello to the context of __generator meaning it would never behave how you expect it would. If you're targetting modern browsers (non-IE) you can set your compile target to ES6+ in which case this restriction will be removed.

Uncaught SyntaxError: Unexpected identifier when async/await is present

Two things to check...

ECMAScript Version

You can target different ECMAScript versions with the TypeScript compiler, so make sure you are targeting the version you are using at runtime. i.e. in your tsconfig.json file:

"target": "ES5"

This will then transform your async/await into a format usable in that runtime.

JavaScript

If you have done the above and still have a problem, it is commonly caused by loading the TypeScript file .ts by accident at runtime, rather than the JavaScript .js file.

---

Related Topics