oligot/rollup-plugin-nodent

Rollup plugin for ES2017 async/await keywords

rollup-plugin-nodent's Issues

It's choking when code contains JSX

Hi there, nice plugin but it seems when we have both async and jsx code in out bundle it seems to have a "chicken and egg" problem.

nodent({promises: true, noRuntime: true, es6target: true}),
buble({jsx: 'h', target: {ie: 10}}),

For instance if I put this nodent plugin before buble, here is what I am getting:

[!] (nodent plugin) SyntaxError: Unexpected token (22:4) /Users/van/Projects/ebex/compare-panel/index.js (nodent)
    <ComparePanel/>

buble({jsx: 'h', target: {ie: 10}}),
nodent({promises: true, noRuntime: true, es6target: true}),

And when I have buble first:

[!] (nodent plugin) SyntaxError: Unexpected token (10:28) /Users/van/Projects/ebex/core/services/http.js (nodent)
HttpService.prototype.async getText = function getText (uri, type, params, headers) {

This problem does not exist if I remove either JSX or remove async.

{sourceMap: false} option doesn't seem to persist when using rollup-watch

Using a generic rollup config, with nodent({ sourceMap: false }) as one of the plugins, and running rollup -c -w (watch mode) causes the issue. The first build respects the setting, but any builds after the first generate inline sourceMaps.

Support generators?

Would be great since buble doesn't support that yet and makes it hard for me to use with rollupjs in my branch.

question: any limitation on sourcemaps handling?

I'm using this plugin with gulp-better-rollup, rollup-plugin-vue and rollup-plugin-buble, when I enable it the result is one single concatenated .js as output with comments removed, and a .map file associated to this altered .js file.

When disabled I get (as expected) one .js and one .map but correctly mapping to a directory tree with the source files untouched, as shown in the chorme developer tools Sources tab (see images link below).

gulp.task('js-main', function(cb) {
    pump([
        gulp.src('src/js/main.js'),
        ifElse(isProd, () => sourcemaps.init()),
        rollup({
            plugins: [
                vue({
                    compileTemplate: true,
                    htmlMinifier: {
                        collapseWhitespace: false,
                        removeComments: false
                    },
                    css: destDir+'/css/bundle.css'}),
                buble(),
                nodent(/*{ sourcemap: true }*/),
            ]}, { format: 'iife' }),
        concat((isProd) ? 'main.min.js' : 'main.js'),
        ifElse(isProd, () => uglify()),
        ifElse(isProd, () => sourcemaps.write('')),
        gulp.dest(destDir+'/js'),
        browserSync.stream()
    ], cb);
});

right
wrong

Any idea why or how to solve?

Upgrade acorn-dynamic-import dependency

One of the dependencies of this library is acorn-dynamic-import which depends on an older version of acorn. This causes problems when used together with newer acorn plugins that depend on acorn v6.

rollup-plugin-nodent is used in microbundle where we were running into exactly this issue: developit/microbundle#74

Upgrading acorn-dynamic-import locally fixes the issue.

I'm happy to make a PR myself but looking at the content of yarn.lock it seems like a custom npm registry mirror is used and I don't have access to it.

rollup0.49.1 issue

Hello.

I have been enjoying to use this plugin with rollup-riot. But I got wrong transpilation since rollup.js was updated from 0.48 to 0.49.1.

My rollup.config.js is:

import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import nodent from 'rollup-plugin-nodent';
import riot from 'rollup-plugin-riot';
export default {
  input: 'src/scripts/Main.js',
  output:{
    file: 'public/index.js',
    format: 'iife',
    sourcemap: true,
  }, 
  plugins: [
    riot({
      ext:'.tag.html',
    }), 
    nodeResolve({ jsnext: true }),
    commonjs(),
    nodent({
      extensions:['.js', '.tag.html'],
      sourcemap:true, 
      promises: true,
      noRuntime: true,
    }),
  ],
}

and the source code is:

<test>
  <div>
    test tag
    <div class="inner">
      inner
    </div>
  </div>
  <script>
    async function lazy(param) {
      return new Promise((resolve)=> {
        setTimeout(resolve, param);
      });
    }
    async function awaiter() {
      await lazy(4500);
      console.log('A!'); 
      await lazy(1000);
      console.log('B!');
    }
    awaiter();
  </script>
</test>

rollup.js 0.48 transpiles it into:

riot$1.tag2('test', '<div> test tag <div class="inner"> inner </div> </div>', '', '', function (opts) {
    function lazy(param) {
        return new Promise((function ($return, $error) {
            return $return(new Promise(function (resolve) {
                setTimeout(resolve, param);
            }));
        }).bind(this));
    }
    function awaiter() {
        return new Promise((function ($return, $error) {
            return lazy(4500).then((function ($await_1) {
                try {
                    console.log('A!');
                    return lazy(1000).then((function ($await_2) {
                        try {
                            console.log('B!');
                            return $return();
                        } catch ($boundEx) {
                            return $error($boundEx);
                        }
                    }).bind(this), $error);
                } catch ($boundEx) {
                    return $error($boundEx);
                }
            }).bind(this), $error);
        }).bind(this));
    }
    awaiter();
});

rollup.js 0.49.1 transpiles it into:

riot$1.tag2('test', '<div> test tag <div class="inner"> inner </div> </div>', '', '', function (opts) {
    
});

Next, I tried the source code:

<test>
  <div>
    test tag
    <div class="inner">
      inner
    </div>
  </div>
  <script>
   console.log('aaa');
  </script>
</test>

Then the result was:

riot$1.tag2('test', '<div> test tag <div class="inner"> inner </div> </div>', '', '', function (opts) {
    console.log('aaa');
});

The issue may not be caused by rollup-plugin-nodent, I'm glad to check it when you're available.

Thanks!

inline data-uri sourcemaps appear in watch mode

I'm running rollup with outputOptions.sourcmaps = true; - to get standalone *.js.map files, and plugins: [rollupPluginNodent()].

When I run rollup.watch(watchOptions) the bundle is compiled normally with an external sourcemap as expected.

Then as soon as I hit save on the entry file, the re-generated bundle contains inlined data-uri sourcemaps for each module (including the entry file itself) in addition to the external sourcemap file.

This quirky behaviour stops as soon as I remove rollup-plugin-nodent.

I've tried running the plugin with rollupPluginNodent({ sourcemaps: false }). That suppresses the inlined sourcemaps – sure – at the cost of emptying out the external *.js.map files. :-)

await/async transpilation question

I tried this plugin and got stuck.

I made this two files:

// rollup.config.js
import nodent from 'rollup-plugin-nodent';

export default {
  entry: 'src/scripts/Main.js',
  dest: 'public/index.js',
  format: 'iife', 
  sourceMap: true,
  plugins: [
    nodent(),
  ],
}

// src/scripts/Main.js
async function waitable(param){
  return new Promise(function(resolve) {
    console.log("!");
    setTimeout(resolve, param);
  });
}

async function main() {
  console.log('A');
  await waitable(1000);
  console.log('B');
}

main();

I transpiled them and received it:

// public/index.js
(function () {
'use strict';

function waitable(param) {
    return (function ($return, $error) {
        return $return(new Promise(function (resolve) {
            console.log("!");
            setTimeout(resolve, param);
        }));
    }).$asyncbind(this, true);
}

function main() {
    return (function ($return, $error) {
        console.log('A');
        return waitable(1000).then((function ($await_1) {
            console.log('B');
            return $return();
        }).$asyncbind(this, $error), $error);
    }).$asyncbind(this, true);
}

main();

}());

// "Uncaught TypeError: (intermediate value)(intermediate value).$asyncbind is not a function"

1. How do I generate $asyncbind() function?
2. How can Promise in waitable() get transpiled?

Thanks.