Missing class methods.....Adding a babel plugin for ES6 Classes ( using 0.15)

[dgk]

Below is my first ES6 class I wrote for use specifically in the browser (a websocket class). This would work fine in node (as I have written dozens for node) but in this case all my methods are “missing”. I mean if I try to call them says not a function if I try to log them they are undefined. If I log the whole instance they are missing. I suspect this is some transpliation issue but I am really clueless with babel and now with 0.15 I have clue how to enable a babel plugin.

I am guessing I need to add this plugin??
https://www.npmjs.com/package/@babel/plugin-transform-classes

I have added it to package json dev but I suppose I have to tell babel to use it but I see no place in the quasar config file (unlike .14)

So how do I get quasar/babel to process my ES6 Classes properly in 0.15. Anyone done this successfully?

// Websocket is a native global for vanilla JS
/* globals WebSocket:true */

import btc from 'better-try-catch'
import EventEmitter from 'event-emitter'

export default class Consumer extends EventEmitter {
  constructor (url, opts = {}) {
    super()
    this.name = opts.name || 'browser'
    this.instanceID = new Date().getTime()
    this.url = url
    this.protocol = opts.protocol
    this.socket = {}
  }

  async connect () {
    return new Promise((resolve, reject) => {
      let [err, socket] = btc(new WebSocket(this.url, this.protocol))
      if (err) reject(err)

      // Connection opened
      socket.addEventListener('open', function () {
        console.log('socket open to server at : ', this.url)
        this.socket = socket
        socket.send({ready: true})
      })

      // log any errors
      socket.addEventListener('error', function (err) {
        console.log('Web Socket error occurred: ', err)
      })
      resolve('ready')
    })
  }

  listen (func) {
    this.socket.addEventListener('message', function (event) {
      let packet = {}
      if (this.socket.readyState === 1) {
        let [err, parsed] = btc(JSON.parse)(event.data)
        if (err) packet = {error: `Could not parse JSON: ${event.data}`}
        else packet = parsed
      } else {
        packet = {error: `Connection not Ready, CODE:${this.socket.readyState}`}
      }
      if (func) func(packet)
      this.emit(packet._header.id, packet)
    })
  }

  async send (packet) {
    return new Promise((resolve, reject) => {
      if (this.socket.readyState !== 1) reject(new Error(`Connection not Ready, CODE:${this.socket.readyState}`))
      packet._header =
        { id: Math.random().toString().slice(2), // need this for when multiple sends for different consumers use same packet instanceack
          sender: { name: this.name, instanceID: this.instanceID },
          url: this.url
        }
      let [err, message] = btc(JSON.stringify)(packet)
      if (err) reject(new Error(`Could not JSON stringify: ${packet}`))
      let [err2] = btc(this.socket.send)(message)
      if (err2) reject(err2)
      this.once(packet._header.id, async function (reply) {
        // console.log('reply emitted',reply)
        let res = await this._packetProcess(reply)
        if (!res) { // if process was not promise returning like just logged to console
          res = reply
          console.log('consumer function was not promise returning - resolving unprocessed')
        }
        resolve(res)
      }) // end reply listener
    })
  }

  registerPacketProcessor (func) {
    this._packetProcess = func
  }

  _packetProcess (packet) {
    console.log('default consumer processor -- log packet from socket to console')
    console.dir(packet)
  }
} // end Consumer Class

here you see the log of the instance and notice all my methods are missing. Notice how it did get the methods extended from the event emitter only my custom methods are missing.

instanceID: 1521840929917
name: "browser"
protocol: undefined
socket: Object {  }
url: "ws://localhost:8090"
__proto__: {…}
emit: function emit()
off: function off()
on: function on()
once: function once()
__proto__: Object { … }
index.vue:71

[dgk]

I tried adding this to .babelrc but then I get a missing babel core error. Just not clear on how to add plugins in .15. Is quasar cli using @babel modules? Seems not if it says the core is missing. So yea cluess on the proper setup.

// without options
{
  "plugins": ["@babel/plugin-transform-classes"]
}

// with options
{
  "plugins": [
    ["@babel/plugin-transform-classes", {
      "loose": true
    }]
  ]
}

[dgk]

Didn’t need a plugin or any changes to babel.
Turns out for babel one either needs to use fat arrow syntax or bind/ autobind the functions to this

  connect = async () => {