Migrate to Vue 2.x

[cpb8010]

I was trying to include some spiffy new components and found that the project is still on vue 1.0.18 (and the old vuex)

If I started this work, is there any interest in getting this merged?
Is someone already doing this? Has someone tried and failed?

I'm starting work on this on my own fork and wanted to see if there was any traction here.

[klembot]

I've looked into it; the main obstacle I see is that Vue 2.x removed $broadcast, $dispatch, and $emit which are used. I'm open to a PR but would want to take a careful eye to make sure no regressions are introduced. Ideally, this migration would include adding tests on the Vue components, but I also realize that adds a lot of work.

[cpb8010]

Yes, looking into it those signal changes and the HTML interpolation removal are the most disruptive.

…

On Tue, May 1, 2018, 21:44 Chris Klimas ***@***.***> wrote: I've looked into it; the main obstacle I see is that Vue 2.x removed $broadcast, $dispatch, and $emit which are used. I'm open to a PR but would want to take a careful eye to make sure no regressions are introduced. Ideally, this migration would include adding tests on the Vue components, but I also realize that adds a lot of work. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#461 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AB9YUucg2QtAaWuRT-bdq2RNhnDsXiL6ks5tuR2JgaJpZM4TuuP6> .

[wraybowling]

I dove into twinejs for the first time today, and immediately noticed the same thing. @cpb8010 I'll happily assist with the effort.

[cpb8010]

Hey @wraybowling

I was able to get through most of the migration helper, but I think the start-up process for Vue 2 is different so the mixins/plugins don't load quite the same.
I have the changes here:
cpb8010#1 / https://github.com/cpb8010/twinejs/tree/tx-pass3

If you want to pull it down to take a pass at it.
I'll be muddling around with it as I dig through the docs.

[cpb8010]

I figured part of it out. Vue 2 doesn't support require syntax the same way and the migration helper missed some of the router and app init changes. I'll post again when I have that sorted.

[cpb8010]

So I figured that part out, but since $appendTo was removed $mountTo is broken.

8 tests are failing. 4 with CodeMirror and 4 with $mountTo.

cpb8010#2

I think it's close, but I haven't gotten far enough to actually load a story in the application

[cpb8010]

Turns out the failing tests were because of the same init issues where it pulled in the version without the template compiler. I haven't figure out enough webpack to make this work without changing the test source.

I took the $appendTo source from Vue 1 to fix $mountTo, but I'm still not sure it works because it doesn't show any default stories

[wraybowling]

I wasn't able to get the repo to build.. it may be a little while before I can contribute

[cpb8010]

Hey @wraybowling I had some old branches pushed that wouldn't build, the most recent one is https://github.com/cpb8010/twinejs/tree/fix-startup. Let me know if you have specific errors I can help with.

[wraybowling]

@cpb8010 Okay. I got my setup working. Now to make sense of what you're doing... I've been using the .vue file structure; not as used to seeing it all split up like this.

[cpb8010]

Nice! The webpack setup doesn't include the vue compiler step, but it could! I was trying to get it otherwise working before modernizing it.

…

On Thu, Jun 7, 2018 at 3:42 PM, Wray Bowling ***@***.***> wrote: @cpb8010 <https://github.com/cpb8010> Okay. I got my setup working. Now to make sense of what you're doing... I've been using the .vue file structure; not as used to seeing it all split up like this. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#461 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AB9YUgjisAOTWWkamh62IfWPWMJDZcxPks5t6ZAtgaJpZM4TuuP6> .

[wraybowling]

@cpb8010 Where can I learn more about the webpack setup?
Yeah, it's fun using es2017 and .vue files; it's what lured me in to trying Vue. I think you're wise to upgrade one little piece at a time if you understand how to do so.

[cpb8010]

I've been comparing the webpack config in this project to a fresh config created with vue-cli. This project is on an older version of web-pack as well, so it's not one-to-one, but it's close. The biggest part of the webpack in this project that's custom is for the i18n stuff and NW.js, which I haven't even gotten close to yet.

…

On Thu, Jun 7, 2018 at 4:05 PM, Wray Bowling ***@***.***> wrote: @cpb8010 <https://github.com/cpb8010> Where can I learn more about the webpack setup? Yeah, it's fun using es2017 and .vue files; it's what lured me in to trying Vue. I think you're wise to upgrade one little piece at a time if you understand how to do so. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#461 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AB9YUoiXvEs-FWgV5mI6VvyDIFnfukqcks5t6ZWTgaJpZM4TuuP6> .

[klembot]

Just popping in to say that while I could be talked into using .vue files, it would take some convincing. I understand that that is how you're supposed to do it in Vue 2.x, but I am hesitant because

• Although it is often possible in editors to switch syntax modes inside a single file, I've always found it to be a pain to set up... though I have not tried this in quite a while
• I worry that we would end up with thousand-line monstrosities for some of the more intricate components

I'm happy to chat more about the migration process and any other decisions you may need to make-- I would rather stay in regular contact as you guys work on this rather than having a big debate at the very end. Keep on truckin 🚚

[klembot]

p.s. on my todo list has been migrating from NW.js to Electron. Just saying in case you find yourself banging your head against a wall with NW.js.