ElMassimo / ElMassimo/vite_ruby
Import aliases in Rails tag helpers
- Dominant language
- Ruby
- Stars
- 1.6k
- Forks
- 149
- Avg merge
- 5h 13m
- Merged PRs (30d)
- 2
Description
### 🎈 Scenario
Related to #564. I want to structure my Rails codebase component-wise and created an `app/components/` folder. This folder contains subfolders like `app/components/feature1/`. My Vite `sourceCodeDir` stays `app/frontend`. To reflect this scenario, I've specified:
```json
// extract of config/vite.json
"watchAdditionalPaths": [
"app/components/**/*"
],
"additionalEntrypoints": [
"app/components/**/*"
],
```
This allows me to do this:
```erb
<%= vite_javascript_tag "/app/components/feature1/index" %>
```
where `/app/components/feature1/index.js` is a JavaScript file. This works as expected 🤗
### 🎈 Problem
However, I cannot use import aliases in Rails tag helpers. According to this tip:
> In order to [reference these files](https://github.com/ElMassimo/vite_ruby/blob/main/vite-plugin-ruby/example/app/frontend/entrypoints/main.ts#L4) it's highly recommended to [define](https://vitejs.dev/config/#resolve-alias) your own [import aliases](https://vite-ruby.netlify.app/guide/development.html#import-aliases-%F0%9F%91%89): ~ see [here](https://vite-ruby.netlify.app/config/index.html#watchadditionalpaths)
So, I specify:
```js
// extract of vite.config.mts
resolve: {
alias: {
"@components": "/app/components",
},
},
```
However, doing the following results in a path that cannot be resolved by Vite:
```erb
<%= vite_javascript_tag "@components/feature1/index" %>
<%= vite_javascript_tag "/app/components/feature1/index" %>
```
I've also tried variations like [this one in your example repo](https://github.com/ElMassimo/vite_ruby/blob/d4bd2efe4194e40a1cb32d1f0c8efd8a1980db9c/vite-plugin-ruby/example/vite.config.ts#L10):
```js
// extract of vite.config.mts
resolve: {
alias: {
'@components/': `${resolve(__dirname, 'app/components')}/`,
},
},
```
But unfortunately without success. It would be great, if Rails tag helpers could support import aliases as well.
Contributor guide
Assessment
This issue has not been assessed yet.