New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use of "with" keyword in vue-template-compiler #3923

Closed
dts opened this Issue Oct 12, 2016 · 7 comments

Comments

Projects
None yet
4 participants
@dts
Copy link

dts commented Oct 12, 2016

This is not exactly a bug or feature request, so my apologies in advance if it's not appropriate to post about it here, I inquired in the Gitter chat, and we weren't able to figure it out.

I am trying to understand the use of the deprecated keyword "with" in template/render functions. Its use in "strict mode" is basically nil, which means that templated render functions will not work in ES6. This limits the "packagability" of Vue components; unless they are created exclusively with virtual-dom-based render functions. I ran across the issue when trying to webpack-together a bunch of *.vue components spread across different modules, where webpack complains about the use of the with keyword in a "use strict" context.

Shouldn't it be possible to refactor template compilation to not use "with"? Would it slow it down massively?

The real question is: what is the recommended way of packaging vue components so that the render functions can be imported in a natural way without running afoul of webpack and ES6's "strict" guidelines?

@yyx990803

This comment has been minimized.

Copy link
Member

yyx990803 commented Oct 12, 2016

  1. with is not allowed in strict mode or inside ES2015 modules, but this doesn't mean it's deprecated or that it's not valid ES2015.

  2. The use of with greatly simplifies the compiler, removing the need for expression parse/rewrite and scope analysis. This makes it possible to get the compiler as slim as 6kb min+gzipped.

  3. Unless your bundler wraps your entire application bundle in a "use strict" function scope, the presence of with should not cause any issue. In fact, it works fine in the official vue-cli webpack templates. So I'm not sure how you ran into this problem in the first place - maybe you should provide a reproduction.

    Also note that strict mode is per-function scoped - in the generated output the bundle will actually look something like this:

    // whole bundle wrapper
    registerModules([
      function () {
        // generated render function
        // non-strict
      },
      function () {
        "use strict";
        // your component code
        // strict
      }
    ])
@dts

This comment has been minimized.

Copy link
Author

dts commented Oct 12, 2016

Thanks for the ludicrously fast response! I have been wrestling with vue 2 since the later beta phases, trying to get things to work waaay before they were ready. I am trying to get things to work with a library that doesn't fully support Vue 2 yet, and got the error when I was building things myself. Clearly not a "normal use case", but I was sufficiently confused by the situation to want to clarify things.

That being said, not being able to bundle 'render' functions in ES6 modules is unfortunate, though I understand and respect the tradeoff. However, there is no need for the server-side compiler to be small, so perhaps there could be a different version of the compiler that prepares functions for inclusion in ES6 modules? How much work would that entail?

@yyx990803

This comment has been minimized.

Copy link
Member

yyx990803 commented Oct 12, 2016

@dts yep, that is something we will definitely consider. An alternative compiler that generates strict-mode compliant code and even with source map support - but as you suspected, that's quite a bit of work and we'd like to focus on 2.0 stability and other areas of the stack before we get into that.

I'll close this for now, but I hope this helps you figure out a solution to what you are trying to achieve.

@yyx990803 yyx990803 closed this Oct 12, 2016

@paulpflug

This comment has been minimized.

Copy link

paulpflug commented Oct 26, 2016

Hey,
the buble ES6 compiler is injecting strict mode in all passed in js files.
I'm compiling my components down to ES5 with vueify, so they contain the with keyword.
Users of my components are running in trouble when using laravel which uses rollup which uses buble. vue-comps/vue-icons#4, vue-comps/vue-parallax#4

I think this is bad design on buble side. I will open an issue there and link back here. However, maybe I could need some argumentative help.

Edit: buble Issue

@phoenixgao

This comment has been minimized.

Copy link

phoenixgao commented Oct 31, 2016

I built a vue2.0 component which I want to use it in my laravel project and come to this same issue. I'm using laravel's elixir webpack plugin but seems it also use buble.

@paulpflug What should I do to exclude the vue component from getting processed by buble?
I'm not quite familiar with all these frontend techs Lol have been stuck by this for a week

@yyx990803

This comment has been minimized.

Copy link
Member

yyx990803 commented Oct 31, 2016

@paulpflug I think the top-level "use strict" may be injected by rollup, which has a useStrict option that can be turned off. This might be something that needs to go into Laravel's default rollup configuration.

@paulpflug

This comment has been minimized.

Copy link

paulpflug commented Nov 4, 2016

@phoenixgao I'm not using rollup but I think you should do this somewhere:

rollup({
  entry: 'main.js',
  plugins: [ 
    // when using buble
    buble({
      exclude: 'node_modules/**'
    })
    // when using babel
    babel({
      exclude: 'node_modules/**'
    })
  ]
})

From what I have investigated both buble/babel inject strict in all processed js files.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment