Script without final semicolon throws error using Buble

[bertday]

Expected behavior

If I have a simple component like this, where the main export default does not have a semicolon after it:

<template>
  <div class="foo" />
</template>

<script>
  export default {
    created() {
      console.log('created');
    }
  }
  // ^^ notice, no semicolon above
</script>

<style>
  .foo {
    color: #000;
  }
</style>

... I expect it to roll up without any errors. I'm using rollup-plugin-vue followed by rollup-plugin-buble. This is what my rollup-plugin-vue options look like:

{
  css: true,
}

Actual behavior

When I load this in the browser I get a console error:

Uncaught TypeError: {(intermediate value)(intermediate value)(intermediate value)} is not a function

The compiled code looks like this:

(function () { if (typeof document !== 'undefined') { var head = document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=" .foo { color: #000; } "; style.type='text/css'; if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();

var TestComponent$1 = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"foo"})},staticRenderFns: [],
  created: function created() {
    console.log('created');
  }
}
// ^^ notice, no semicolon above

Next in the code there's another IIFE for injecting the following component's styles, which looks something like:

(function () { if (typeof document !== 'undefined') { var head = document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=" .bar { color: #000; } "; style.type='text/css'; if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();

Without a semicolon at the end of var TestComponent$1 = { ... }, the following IIFE gets treated as a list of arguments for calling TestComponent$1. Since it's not a function, it fails. This has to do with rules for automatic semicolon insertion; see here for a similar issue on SO.

This could be seen as an issue with Buble, but since it's being surfaced by rollup-plugin-vue's IIFE for injecting styles I thought I would start with an issue here.

FWIW, there was a similar issue with Babel a while back.

Steps to reproduce the behavior

I think I've described it sufficiently, but happy to give more details if I forgot something.

[znck]

Hey! If this is blocker I can look into it first, otherwise I want to complete component compiler first.

[bertday]

Hi @znck! I worked around it by just adding a semicolon to the end of my export default, so it's not urgent for me. But thanks for asking. The more I think about it, this is really something that should be handled in rollup-plugin-buble. If I find the time I'll make an issue over there.

[znck]

Should be resolved with #184