Vue example app?

[aemadrid-twx]

Been trying, unsuccessfully, to build a Vue app with this. Do you know if it is even possible? How would you try tackling this?

[filipvrba]

I'm sorry I'm just typing now. I'm currently writing the newer RubyJS version 2 and testing your problem with Vue. In Ruby2JS there is a :vue filter that should transpile the script. Unfortunately it doesn't work well enough. I looked at the documentation for Ruby2JS Vue and it says that it is not recommended to use it and therefore from version 6 of the transpiler this filter will be removed.

But I can see a solution in this. In the vue file everything is split as script, template and style. If there was a script that split <script> and that would
would be transpiled and then overwritten.

In RubyJS-Vite version 2 there are plugins that change the way the program works, that could affect the transpilation of vue files. So far this plugin does not exist and the newer version of RubyJS is not yet distributed in Gem Ruby. This is due to, because it is still being tested on various projects. Otherwise, the base documentation for version 2 is not complete and newer features are constantly being added, but it is public.

• RubyJS-Vite | Docs
• Ruby2JS | Vue

[aemadrid-twx]

Thanks for taking the time to respond! I'm aware of the Vue filter in Ruby2JS but unfortunately, that is deprecated and won't help much. Most people that write Vue apps use SFC (Single File Components). But I was thinking the same thing you are I believe.

The first usecase I have is something like this.:

Original : HelloWorld.vue (same file)

<script lang="ruby">
import [ref], from: "vue"

Msg = ref("Hello World!")
</script>

<template>
  <h1>{{ Msg }}</h1>
  <input v-model="msg">
</template>

Transpiled : HelloWorld.vue (same file)

<script setup>
import { ref } from 'vue'

const Msg = ref('Hello World2!')
</script>

<script lang="ruby" setup>
import [ref], from: "vue"

Msg = ref("Hello World!")
</script>

<template>
  <h1>{{ Msg }}</h1>
  <input v-model="msg">
</template>

We would be to parse the file and transpile the <script lang="ruby" into the <script. That way you can have both versions (ruby and JS) in the same file and compare. this avoids your IDE seeing the definition of the template/style in the SFC twice which can be confusing.

There is a second usecase that is more traditional where the whole file is Javascript. Something like this:

Original: stores/counter.rb (different file)

import [defineStore], from: 'pinia'

export useCounterStore = defineStore('counter', {
    state: ->(x) { { count: 0 } },
    actions: {
      increment: ->() { this.count += 1 }
    }
})

Transpiled: stores/counter.js (different file)

import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state(x) {
    return {count: 0}
  },

  actions: {
    increment() {return ++this.count}
  }
})

The second usecase seems to fit right into what you are doing here. But I'm not sure if the first usecase would fit as well. Your thoughts?

[filipvrba]

The first use case is not bad. To keep everything in one place in the file. You could certainly parse the .vue file and identify the '<script lang="ruby" setup>'. What will be in that block would be transpiled and overwritten in the '<script setup>' block. It would be more transparent. But I'm not sure if vue will throw an error message that there are 2 scripts in one file.