Allow redefining ~ and @ alias

[CyberAP]

trafficstars

If you try to override a predefined ~ alias with an resolve.alias = [{ find: '~', replacement: 'foo' }] config it won't work and default ~ alias would still be used.

[CyberAP]

Workaround:

const [rubyPlugin, ...rest] = RubyPlugin();

const fixedRubyPlugin = [
  {
    ...rubyPlugin,
    config: (...args) => {
      const originalConfig = rubyPlugin.config(...args);
      return {
        ...originalConfig,
        resolve: undefined,
      };
    },
  },
  ...rest,
];

[ElMassimo]

Normally you would change sourceCodeDir to reflect the location where most of the assets will be placed.

Can you share the full project dir structure to understand what you are trying to achieve?

[CyberAP]

@ElMassimo The project structure is the following:

/
-- /assets
  -- /js
  -- /css

I want my ~/ alias to point always to /assets/js, but to have my /assets folder as sourceCodeDir, in order for stylesheets to work under /assets/css.

[ElMassimo]

Gotcha, there are a few ways to address this:

• Auto-detect the definition of a resolve.alias in the user config for these prefixes and skip the current behavior
• Add an option to vite-plugin-ruby to pass a custom dir for the aliases

I would prefer the second one to avoid the complexity of detection.

Not sure if this should be allowed though, as Vite Ruby would still interpret ~ as the sourceCodeDir in any of the config options, and in tag helpers.

I would encourage you use a structure closer to the default, conventions make it easier to understand an unfamiliar codebase.

[CyberAP]

I would encourage you use a structure closer to the default, conventions make it easier to understand an unfamiliar codebase.

I would really love to, but it's hard when you're dealing with a very large codebase and trying to migrate off the classic Rails approach to frontend assets.

Regarding the options I think any of them would solve the issue for me.

[ElMassimo]

After thinking about it, the inconsistency of the meaning of ~/ in these different contexts would be too confusing.

If you want that behavior, you can use the workaround mentioned in the PR description, but I'd recommend:

• Making assets/js the sourceCodeDir
• If using vite_stylesheet_tag, configure additionalEntrypoints:
  • "additionalEntrypoints": ['assets/css/**/*']

[cmolina]

Based on @CyberAP's workaround, but for TypeScript:

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

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

function RubyPluginWithoutResolve() {
  const [rubyPlugin, ...rest] = RubyPlugin() as Plugin[]
  return [
    {
      ...rubyPlugin,
      config(...args) {
        if (typeof rubyPlugin.config === 'function') {
          const originalConfig = rubyPlugin.config.apply(null, args)
          return {
            ...originalConfig,
            resolve: undefined,
          }
        }
      },
    },
    ...rest,
  ]
}