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] data-class="" causes the compiler to break unfortunately #34

Closed Intrflex closed 2 years ago

Intrflex commented 2 years ago

Minor bug When and div has a data attribute like data-class the compiler can not compile and reports unexpected token :(

<li> <a class="btn js-waves-off" data-action="toggle" data-class="nav-function-fixed" href="#" title="Lock Navigation"> <i class="ni ni-lock-nav" /> </a> </li>

Intrflex commented 2 years ago

Further testing actually shows its not the data-class.. its the fact i have function inside the class

JuniorTour commented 2 years ago

This is a bug.

Thanks for your feedback.


It is caused by use .split('function') for split render function as string: https://github.com/JuniorTour/vue-template-babel-compiler/blob/cb23dc9c4df0a8b974129f9faece15550024477f/src/templateCompiler.js#L25

So the staticRenderFns:

var staticRenderFns = [function () {
  var _vm=this;
  var _h=_vm.$createElement;
  var _c=_vm._self._c||_h;

  return _c('div', {
    attrs: {
      "id": "app"
    }
  }, [_c('a', {
    attrs: {
      "attr": "function"
    }
  }, [_vm._v("1")])]);
}];

will be split wrongly by getArrayItems(compiledStaticRenders) into: image


Solution:

  1. Maybe we can use a more accurate Regular expression to parse render function?

  2. We can add /* staticRenderSeperator */ during staticRenders.map(), and split functions more accurate: https://github.com/JuniorTour/vue-template-babel-compiler/blob/cb23dc9c4df0a8b974129f9faece15550024477f/src/templateCompiler.js#L42

Welcome for Pull Request! Feel free to ask anything

There is also a CONTRIBUTING.md you can follow.

JuniorTour commented 2 years ago

@Intrflex We have fixed this issue!

You can try it by run: npm install vue-template-babel-compiler@latest

Thanks for your feedback again!