Any thoughts on ways to make gon play nicely with webpacker?

[jasonkarns]

I don't have any suggestions here, but wanted to start a thread about ways to make gon work in a webpacker world... Specifically such that gon could be imported by JS files rather than being a global?

[gamesover]

gon is a hack. should use ajax/json to fetch the variable

[jasonkarns]

And block the app while the user waits for yet another http request? A request whose connection overhead is multiple times larger than the payload itself?

…

On Mon, Jul 30, 2018 at 10:48 PM Ken ***@***.***> wrote: gon is a hack. should use ajax/json to fetch the variable — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#239 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAHUpId83Ij_5I3qwIsuZj0LMAMwXq23ks5uL8VvgaJpZM4RcjtJ> .

[kevinluo201]

Currently, I'm doing this:

1. in a controller

class MyController < ApplicationController
  def index
    @user = User.first
    gon.user = @user
  end
end

2. in webpacker's entry file, I pass gon into props

// app/javascript/packs/hello_vue.js
import Vue from 'vue'
import HelloVue from '../views/HelloVue.vue'

window.addEventListener('load', () => {
  const app = new Vue({
    el: document.getElementById('div-you-want-to-mount'),
    components: { HelloVue },
    render: h => h(HelloVue, { props: gon })
  }).$mount()
})

3. in HelloVue.vue

<template>
  <div id="hello">
    User: {{ user }}
  </div>
</template>

<script>
export default {
  props: ['user']
}
</script>

[mockdeep]

It would be nice to have a way to import gon in our JS. Having it in the global scope creates load order issues. If include_gon is not before your JS include tags, it ends can cause errors on load.