tag helper alternative for Sinatra #437

katelovescode · 2024-02-24T14:00:26Z

katelovescode
Feb 24, 2024

I'm trying to incorporate vite_ruby with my Sinatra app, which as of right now is extremely simple. I'm including diagrams of the relevant directory tree as well as the contents of the related files below.

I don't believe that vite_ruby has tag helpers, so I'm not sure how to implement the tag helpers that are provided for rails (<%= vite_client_tag %> and <%= vite_javascript_tag %> specifically) manually to include the pipeline into my Sinatra app.

Any suggestions on the format of the script/client tags if I'm going to include them manually inside the <head> tag?

.
├── config/
│   └── vite.json
├── frontend/
│   └── entrypoints/
│       └── application.js
├── views/
│   ├── layout.erb
│   └── index.erb
├── app.rb
├── package.json
└── vite.config.mts

# app.rb
require 'sinatra'
require 'uri'
require 'net/http'

get '/' do
  uri = URI('https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY')
  res = Net::HTTP.get_response(uri)
  if res.is_a?(Net::HTTPSuccess)
    @content = res.body 
    erb :index
  else
    "No Data was Fetched"
  end
end

// vite.config.mts

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'

export default defineConfig({
  plugins: [
    RubyPlugin(),
  ],
})

{
  "all": {
    "sourceCodeDir": "frontend",
    "watchAdditionalPaths": []
  },
  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "port": 3036
  },
  "test": {
    "autoBuild": true,
    "publicOutputDir": "vite-test",
    "port": 3037
  }
}

<!-- layout.erb -->

<html>
  <head>
    <title>Example</title>
    <%= vite_client_tag %>  <!-- undefined local method -->
  </head>
  <body>
    <%= yield %>
  </body>
</html>

ElMassimo · 2024-02-26T17:45:46Z

ElMassimo
Feb 26, 2024
Maintainer

Hi Kate!

Unlike the rest of the integrations (Vite Hanami, Vite Padrino), Sinatra doesn't have a "standard" view layer, it doesn't provide helpers like Padrino does (which is itself an extension around Sinatra).

You can use these set of helpers as inspiration. In fact, if javascript_include_tag, stylesheet_link_tag, and content_tag are available as view helpers, you might be able use the Vite Padrino tag helpers directly.

Let me know what you come up with, could be helpful for other folks using Sinatra.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

tag helper alternative for Sinatra #437

{{title}}

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

tag helper alternative for Sinatra #437

katelovescode Feb 24, 2024

Replies: 1 comment

ElMassimo Feb 26, 2024 Maintainer

katelovescode
Feb 24, 2024

ElMassimo
Feb 26, 2024
Maintainer