Unable to build app with `jspm build`

[eirikb]

I created https://github.com/vuejs-templates/systemjs/issues/2 earlier because I was not able to build my app. I've been investigating some, and I might be mistaken but this is what I have found:

System.get and System.set are used because vueCompiler.parseComponent return a script-property with plain JavaScript, which must have a render property with content of vueComponent.compile. And so the template is created as a module and some string manipulation is done to have script require the compiled template.
This doesn't work when running the built version because System isn't available.

---

I've been playing around with the compiler trying to make a very simple example work, this is my hack so far:

exports.translate = (load, opts) => {
  let sfc = vueCompiler.parseComponent(load.source)
  let compiled = vueCompiler.compile(sfc.template.content, {pad: true})
  let template = compiled.render
  return sfc.script.content.replace(/default {/, `default { render: function(){${template}},`)
}

Here the template is injected directly with the string manipulation. This won't work because with can't be used in strict mode.
So I have tried removing with keyword by string replace, but this won't work because then _h2 (and the other) variable(s) can't be found.

---

Update

Tried altering the files of systemjs-plugin-vue and vue-template-compiler directly, then copying them into a project for a simple test. Removed with from index.js of vue-template-compiler, then added this. to where ever looked appropriate and it seems to run fine. Style and language support is dropped, but theory is fine. Here is an example: https://gist.github.com/eirikb/1abf8335d4b7c5894b50db7718278fff

[subhaze]

@eirikb I'm trying to work on this plugin to work with sfx bundles as well, I just created a fork that removes the need for System.set|get here https://github.com/subhaze/systemjs-plugin-vue

[eirikb]

@subhaze so you have a working version? If so that is great! I had a look at your commit on your fork, and it looks nice.

It could be that vue-template-compiler have changed since I was trying to make it work, so that it would work with the original jspm plugin as well (just jspm build that is, which I was struggling with). The vue-cli template have been removed (it seems), do you have a simple setup I could use to test your fix?

[subhaze]

@eirikb Well, that hasn't changed AFAIK, however, there was another package added to fix this issue for the webpack and browserify bundlers but was never applied to the systemjs one. It's call vue-template-es2015-compiler which compiles templates without the with context so that it's runnable coded under strict mode.

I also removed the need for using System.set/System.get as when using build there's a scoped System var created that needs to be accessed from the SystemJS compiler options object since System is not defined but a 'hidden' pointer is $__System, however, .set wasn't available when running the build after using this var. In the end I just took out the need to use the .set/.get all together and just inline the code instead of using the System API that's not available within the build context.

You can try it out via: jspm install systemjs-plugin-vue=github:subhaze/systemjs-plugin-vue

[ArmorDarks]

That's sound great!

Maybe you can create PR to merge it into this repository?

[ArmorDarks]

Tried @subhaze version... it seems to be strange somehow. Is it doing righ thing? Built js size is increadable large with it and even transpilation takes a lot of time...

I wonder, did someone managed force Vue components to transpile from ES6 to older versions? Since they are loaded with that loader, they are ignored by systemjs-plugin-babel loader.

I've tried to write my own loader with something like

const babel = require('plugin-babel')
const vue = require('systemjs-plugin-vue')

module.exports.translate = async function (load) {
  const vuefied = await vue.translate(load)
  load.source = vuefied
  return babel.translate(load)
}

but it stills occasionally having issues with ''character or>` operator

[subhaze]

Yeah my method wasn't completely ideal, but, got me where I needed to be at the time. Since then I've had to move over to webpack.

[ArmorDarks]

Yeap, I am on the road to give up too...

[baryla]

I have just released an npm package that enables the use of .vue files for the latest version of Vue :)
@eirikb, @ArmorDarks, @subhaze. SystemJS Vue Loader