Default to Object.assign()?

[danburzo]

I've been looking at replacing Webpack + Babel with Rollup + Bublé for some small projects I'm working on, and very much resonated with the zero-config approach.

However, one thing that I consistently forget to do is set the objectAssign property for Bublé.

Is it possible to have it use Object.assign by default instead of throwing an error?

[adrianheine]

I think it's reasonable to not silently transpile code into having additional runtime requirements. Considering that IE doesn't support Object.assign, this is still pretty relevant for many people.

I'm not sure that a lot of people still want to use a different binding than Object.assign, so maybe we can turn this into a dangerous-option or re-use the target configuration.

[danburzo]

Due to the subtle differences between Object.assign and spreading, it may be best categorized as dangerous:

http://2ality.com/2016/10/rest-spread-properties.html#spread-defines-properties-objectassign-sets-them

[ajrothwell]

Is the --objectAssign option documented anywhere? It seems like that's part of the solution, but I'm not sure how to use it. There's the es6-object-assign polyfill on npm, but I don't know how to use it with buble.

[danburzo]

I'm not at my computer but it seems you can pass --objectAssign true to have it use Object.assign(). If you want to polyfill it, import es6-object-assign/auto at the beginning of your entry point JS file

[dmitry-saritasa]

I have similar issue, my jest tests started failing with the following message

 FAIL  src/apps/common/components/tables/recurring-orders-table.unit.js
  ● Test suite failed to run

    Object spread operator requires specified objectAssign option with 'Object.assign' or polyfill helper. (1:412)

      at Node.transpile (node_modules/vue-template-es2015-compiler/buble.js:12676:11)
      at node_modules/vue-template-es2015-compiler/buble.js:5864:59
          at Array.forEach (<anonymous>)
      at Node.transpile (node_modules/vue-template-es2015-compiler/buble.js:5864:10)
      at Node.transpile (node_modules/vue-template-es2015-compiler/buble.js:6553:28)
      at node_modules/vue-template-es2015-compiler/buble.js:5864:59
          at Array.forEach (<anonymous>)
      at Node.transpile (node_modules/vue-template-es2015-compiler/buble.js:5864:10)
      at Node.transpile (node_modules/vue-template-es2015-compiler/buble.js:6553:28)

this is my vue-loader.conf.js

'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  },
  buble: {
    objectAssign: 'Object.assign'
  }
}

any ideas how to fix?

[danburzo]

@dmitry-saritasa yours looks like a configuration problem. I'm not sure which package(s) you're using for your Vue setup, but I suggest looking through their documentation to see how to pass options to Buble. The objectAssign: 'Object.assign' option should work.

[dmitry-saritasa]

@danburzo I already did that

buble: {
    objectAssign: 'Object.assign'
  }

this has fixed the vue-loader to work correctly, but then jest tests started failing.

the change I was going after is to use ... inside vue template as shown below (v-on).

<template>
  <!--
    // replaced @input="$emit('input', $event.target.value)" with
    // v-on="$listeners", need testing
    // see more here
    // http://blog.webf.zone/vue-js-considerations-and-tricks-fa7e0e4bb7bb
  -->
  <div>
    <label class="form-label">{{ getLabel | capitalize }}</label>
    <input
      v-tooltip="getTooltipContent"
      :bind="$attrs"
      :type="type"
      :value="value"
      :placeholder="getPlaceHolder"
      :class="getClass"
      class="form-input"
      data-vv-validate-on="none"
      v-on="{
        ...$listeners,
        input: event => $emit('input', event.target.value)
      }">
  </div>
</template>

vue-loader initially complained until I added bubble objectAssign line into vue-loader.conf.js, but then all jest tests that were testing vue components using this customized base-input component started failing.

[adrianheine]

I just pushed 7fd340698fd27a201cc12e2d23a856e5e5e00882 to support passing objectAssign: true.

[mourner]

Is the --objectAssign option documented anywhere? It seems like that's part of the solution, but I'm not sure how to use it. There's the es6-object-assign polyfill on npm, but I don't know how to use it with buble.

I'm wondering the same thing. If I want to use a custom extend function in my codebase instead of global Object.assign, how do I do that? Looking at the code, it seems like the transform will just put the string supplied in --objectAssign as a string, so it can only be used if it's a global function.