JuniorTour / vue-template-babel-compiler

Enable Optional Chaining(?.), Nullish Coalescing(??) and many new ES syntax for Vue.js SFC based on Babel
https://www.npmjs.com/package/vue-template-babel-compiler
118 stars 9 forks source link

[Bug] Use object spread in template not work #9

Closed vip30 closed 3 years ago

vip30 commented 3 years ago

Description

Using object spread in template got error

<template>
  <div class="hello">
   .
   .
   .
   <h3 v-if="{...a}">Installed CLI Plugins</h3>
</template>

Current behavior

Throw error message

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "ReferenceError: _objectSpread is not defined"

found in

---> <HelloWorld> at src/components/HelloWorld.vue
       <App> at src/App.vue
         <Root>

Expected behavior

Object spread can be used

vip30 commented 3 years ago

Duplicate #10

I think it's not the same issue?

Seems your func getFunctionBody erased the import statement from babel

function getFunctionBody(code) {
  const range = getMarkRange(code, '{', '}');

  return code.substring(range.start, range.end);
}
  var _objectSpread = require(".../node_modules/@babel/runtime/helpers/objectSpread2")
    .default

Hence

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "ReferenceError: _objectSpread is not defined"

Here is an easy fix for this lemme know what you think

function getFunctionBody(code) {
  const range = getMarkRange(code, '{', '}');

  return getBabelImportStatement(code) + code.substring(range.start, range.end);
}

function getBabelImportStatement(code) {
  const regexp = /.*@babel.*/g;
  return [...code.matchAll(regexp)].map(c => c[0]).join("\n")
}
JuniorTour commented 3 years ago

It is a bug. Sorry, my mistake.

@vip30 Your solution is clever, Thank you! :blush:

However, the root reason is this lib NOT compile object spread.

I prefer to add babel-plugin-proposal-object-rest-spread to: https://github.com/JuniorTour/vue-template-babel-compiler/blob/96bb88929e9c13cc8d408c5045bb1d984d869f2a/src/renderCompiler.js#L19

And enable its useBuiltins option, use Object.assign to substitute _objectSpread helper func:

["@babel/plugin-proposal-object-rest-spread", { useBuiltIns: true }]

Do you have interest to work on a fix?

Here is a Contribute guide.

Really appreciate your feedback!

vip30 commented 3 years ago

It is a bug. Sorry, my mistake.

@vip30 Your solution is clever, Thank you! 😊

However, the root reason is this lib NOT compile object spread.

I prefer to add babel-plugin-proposal-object-rest-spread to:

https://github.com/JuniorTour/vue-template-babel-compiler/blob/96bb88929e9c13cc8d408c5045bb1d984d869f2a/src/renderCompiler.js#L19

And enable its useBuiltins option, use Object.assign to substitute _objectSpread helper func:

["@babel/plugin-proposal-object-rest-spread", { useBuiltIns: true }]

Do you have interest to work on a fix? Here is a Contribute guide.

Really appreciate your feedback!

Thanks for your information Sound good to me

Please review the pr https://github.com/JuniorTour/vue-template-babel-compiler/pull/11