honulife / rails-turbo-vue Goto Github PK

Provide a step-by-step guided example of generating a scaffold and then replacing one of the views with a view that uses Vue.js

• create a script that gets loaded in the app layout
  • it registers a turbo:load event listener
  • The handler calls a method that checks a map containing keys which are the current path, and returns an array of arrays looking something like this. Where the first element is the selector for the mount point for some Vue component, and the second is the component to mount.
  • It then calls createApp() and .mount() using those values.

    {
       '/': [['#app-mount', App], ['#app-sidebar', Sidebar]]
    }

https://github.com/joekrump/rails-turbo-vue/pull/20/files#diff-72acc62af55536d205242c1eb280a0773616776379c04bdc28f46d86d9c39f9eR48-R68

• SSR for vue files using this approach? https://www.railsjazz.com/blog/javascript-code-executed-inside-ruby-on-rails-app
• Need to make sure that there is a clear understanding of how this works because this could be a serious performance hog if done incorrectly.
• More potentially helpful Vue docs on SSR
• Render <template>, <script>, and <style> on the server in a .html.erb file but then use this and parse it on the fronted to add reactivity:
  • https://github.com/vuejs/core/tree/main/packages/compiler-sfc#vuecompiler-sfc
  • https://github.com/FranckFreiburger/vue3-sfc-loader/tree/main
    • Don't want to use babel here if possible would be nice to just use vuecompiler-sfc
  • Might also be helpful to look at https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue
• use v-cloak to prevent unprocessed Vue templates from appearing on the page.

Open questions

1. Is it possible to fetch the template from the rails server using an html endpoint which renders the view that maybe written in .html.erb and also has Vue directive markup on it? Ex.

<!-- show.html.erb -->

<template>
  <h1><%= model.name %></h1>
  <button @click="doSomething">Click me!</button>
</template>

• Where would the doSomething function be defined in this case?

Psuedocode

Here's a rough idea based on my understanding so far

// hit an endpoint on the rails server that renders the `show.html.erb` _(see above)_
const res = await fetch('/model/show.html')

Vue.createApp({
  template: await res.text(), // https://developer.mozilla.org/en-US/docs/Web/API/Response/text
  // Something here to define the doSomething function?
})

2. Is it valid to include <script> tags with imports, etc within the .html.erb file that is rendered and then processed by Vue as the template option passed to createApp?

Ex. Could I do this?

<!-- show.html.erb -->

<template>
  <h1><%= model.name %></h1>
  <button @click="doSomething">Click me!</button>
</template>

<script setup>
  const doSomething = () => {
    alert("Hello world!")
  };
</script>

• Only generate what's necessary
  • no minitest generation
  • no index.ts file
• Update what is generated
  • Entry into app/frontend/helpers/route-helper.ts
  • File name that is generated is not generic "App"
  • Basic rspec system test with basic navigation test and check for content
  • Basic vitest component test
• (stretch) Update the generator test to be an rspec test

This could be handy in cases where a view already exists because it was already generated by something such as the scaffold generator.

If a person wants to just replace the index view with a view that uses Vue.js for part of its rendering, then they may not want to have a new route entry defined (since one already exists) or a new controller method (since that already exists too)

• Running screenshot tests on the same OS as the reference screenshots were run on can help ensure the screenshot comparisons are more similar. Ex. run screenshot tests on MacOS
• Probably want to still run the rests of the RSpec test suite on an environment more similar to a production one (linux)

Splitting out the screenshot tests can allow this. It would also allow for independent scaling of the runner for the screenshot tests if those tests end up running slow compared with other RSpec tests.

The approach would involve having a new spec directory, something like spec/screenshot_specs that could then be ignored when the rest of the RSpec suite is run. This could be done using the --pattern cmd line arg

• List out things to do with testing info: playwright ruby etc, and link to docs.
• Remove bits that are out of date

• pinia stuff
• devise stuff

• Likely user Intersection Observer to determine when the element comes into view and at that point mount the corresponding Vue component.
• This is an optimization compared with what happens now, where when a Rails navigation finished, ALL the vue apps for the page are mounted, even if the element they mount on is not visible in the viewport.

This will allow for a single testing DSL in the app (rspec tests + frontend component tests)

https://playwright.dev/docs/test-components

Why?

This helps in cases where a user is on a page with some stale JS and they load a page and it tries to fetch a Vue component that loads async but uses a state file name or path.

What?

Use the manifest.json file that is output by Rollup to get the path/filename for the new Vue component and try to load that.

When a page loads, additional HTTP requests from Vue components should not need to be made to render the initial state of the page.

Hey, I've used this app as template for my own app. So far everything was great and smooth, but once I tried to deploy to prod server I'm getting 404 on any assets. The assets:precompile works great, and assets put into public/vite/assets folder. However when opening app via browser, any assets on such url https://domain.com/vite/assets/application-d671fe8c.css just returns 404. Any ideas where should I look at or what did I miss? I use Capistrano for deployment