@jbrowse/react-linear-genome-view in Vue application

[emiliorighi]

Hi,
In first place I would like to thank you for the amazing job your doing.

I have recently been able to integrate your @jbrowse/react-linear-genome-view in my Vue application (with Vuera and some babel plugins) and I would like to know:

Do you want me to share a little doc of how to embed it, since I have recently read this ?

Furthermore, I would like to publish a npm package: a Vue component that accepts the config props (assembly, configuration, defaultSession and assembly) and pass them to your react component via Vuera, I think it can be useful to other Vuejs developers.
Since I have noticed that the @jbrowse/react-linear-genome-view npm package is under MIT license while this github repo is under Apache license. What would be the best solution to publish the npm package described above?

Regards,
Emilio Righi

[rbuels]

I love the work you are doing here. Feel very free to share a doc and publish a package with a Vue component.

You can pick whatever open source license you want for your work, we are not picky. MIT and Apache 2.0 are both good licenses to use for your work, and (to the best of my knowledge), they are compatible with each other.

[emiliorighi]

I really appreciate your entusiasm, however since you have recently released a demo on how to integrate the react component in vanillajs which already enables its use by other js frameworks, I feel like the package I was going to publish wouldn't be that useful.
Anyway I leave here a code snippet on how to integrate it in a Vue component using this demo as a template:

<template>
  <div ref="jbrowse">
  </div>
</template>

<script>
import '@fontsource/roboto'
import {
  JBrowseLinearGenomeView,
  createViewState
} from '@jbrowse/react-linear-genome-view'
import * as ReactDOM from 'react-dom'
import React from 'react'

  export default {
    props:['assembly','defaultSession','configuration','tracks'],
    computed:{
      changeData(){
        const {assembly,defaultSession, configuration, tracks} = this
        return {assembly, defaultSession, configuration, tracks}
      }
    },
    watch:{
      changeData:{
        handler: function(){
          ReactDOM.render(
            React.createElement(JBrowseLinearGenomeView, {viewState: new createViewState({tracks:this.tracks, assembly: this.assembly})}),
            this.$refs.jbrowse
          )
        },
        deep:true
      }
    },
    mounted(){
      ReactDOM.render(
        React.createElement(JBrowseLinearGenomeView, {viewState: new createViewState({tracks:this.tracks, assembly: this.assembly})}),
        this.$refs.jbrowse
      )
    }
  }
</script>

Hope it will help some future reader

[ouyang-lang]

Hello, I tried to put this code of yours in my vue project, but it keeps getting an error, I would like to ask if you know how to modify this? My error:

[ouyang-lang]

My error:
Module parse failed: Unexpected token (85:12)
You may need an appropriate loader to handle this file type.

[emiliorighi]

Hi @ouyang-lang,

Can you share your code? What is your babel config?

[ouyang-lang]

I just pasted your code into my vue page.
my babel config：in this webpack.base.conf.js

[emiliorighi]

Hi @ouyang-lang,

Check this repo: jbrowse2vue, hope it helps :)