Loader code not transpiled with babel

The loader code injected by this plugin is not compatible with older browsers dues to ES6 syntax.

rollup-babel-plugin will not transpile the code as it uses the transform rollup plugin hook rather than the renderChunk hook - see here a discussion about this problem with wrapper code: https://github.com/rollup/rollup-plugin-babel/issues/303

Wondering if there is any known method to get the loader/wrapper code transpiled with babel so I can use it in my build which targets older browsers?

General guidelines are that node module outputs should not require transpilation (although I understand that you are generally targeting browsers with worker support here…) - perhaps the loader code could be switched out for a transpiled version?

[surma]

When I wrote the reply above, I thought I was commenting on #19. Turns out I was not 😂

I am pretty sure I am doing the right thing here and as @lukastaegert says in #19, there is a fix for the babel plugin about to land. I’ll close this as I believe it’s not actionable to me. Please re-open if you disagree 😃

[ansballard]

Ran into this as well, decided to hand-transpile loader.ejs and pass that. Here’s what I’m using at the moment, can’t confirm all paths work since I’m only using 1, but I think I caught everything and made it es5-ish. In my opinion i think the plugin should switch over to es5-friendly source until there’s better support for transpiling at build time, but at least there’s support for passing a custom loader.

/**
 * Copyright 2018 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *     http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

// If the loader is already loaded, just stop.
if (!self.define) {
  var singleRequire = function(name) {
    if (!registry[name]) {
      <% if (useEval) { %>
      return fetch(name).then(function(resp) { return resp.text() })
      .then(function(code) {
        eval(code);
      <% } else { %>
      return new Promise(function(resolve) {
        if ("document" in self) {
          var script = document.createElement("script");
          <% if (publicPath) { %>
          script.src = <%- "'" + publicPath + "' + name.slice(1)" %>
          <% } else { %>
          script.src = name;
          <% } %>
          // Ya never know
          script.defer = true;
          document.head.appendChild(script);
          script.onload = resolve;
        } else {
          importScripts(name);
          resolve();
        }
      })
      .then(function() {
      <% } %>
        if (!registry[name]) {
          throw new Error("Module " + name + " didn’t register its module");
        }
        return registry[name];
      });
    } else {
      return Promise.resolve(registry[name]);
    }
  };

  var require = function(names, resolve) {
    Promise.all(names.map(singleRequire))
    .then(function(modules) {
      resolve(modules.length === 1 ? modules[0] : modules);
    });
  };

  var registry = {
    require: Promise.resolve(require)
  };

  self.define = function(moduleName, depsNames, factory) {
    if (registry[moduleName]) {
      // Module is already loading or loaded.
      return;
    }
    registry[moduleName] = new Promise(function(resolve) {
      var exports = {};
      var module = {
        <% if (publicPath) { %>
          uri: location.origin + <%- "'" + publicPath + "' + moduleName.slice(1)" %>
        <% } else { %>
          uri: location.origin + moduleName.slice(1)
        <% } %>
      };
      Promise.all(
        depsNames.map(function(depName) {
          if (depName === "exports") {
            return exports;
          }
          if (depName === "module") {
            return module;
          }
          return singleRequire(depName);
        })
      ).then(function(deps) {
        var facValue = factory.apply(null, deps);
        if(!exports.default) {
          exports.default = facValue;
        }
        resolve(exports);
      });
    });
  };
}