vite-plugin-ruby 3.1.1 breaks HMR proxy setup

[ledermann]

• I have tried upgrading by running bundle update vite_ruby.
• I have read the troubleshooting section before opening an issue.

Description 📖

After upgrading vite-plugin-ruby from 3.1.0 to 3.1.1, the HMR config does not work anymore as described in #215 because hmr.clientPort is overridden. In the end, the browser tries to connect to port 3036 instead of 443.

It appears that this is a caused by 3dd06db

Reproduction 🐞

https://github.com/templatus/templatus-inertia/

Vite Ruby Info

bin/vite present?: true
vite_ruby: 3.2.0
vite_rails: 3.0.10
rails: 7.0.3.1
node: v18.6.0
npm: 8.13.2
yarn: 1.22.19
pnpm: 7.5.0
ruby: ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [arm64-darwin21]

installed packages:
templatus@0.1.0 /Users/ledermann/Projects/templatus-inertia
├─┬ @sveltejs/vite-plugin-svelte@1.0.1
│ └── vite@3.0.0 deduped
├─┬ vite-plugin-ruby@3.1.1
│ └── vite@3.0.0 deduped
└── vite@3.0.0

vite.config.ts

import { defineConfig } from 'vite';
import { splitVendorChunkPlugin } from 'vite';
import RubyPlugin from 'vite-plugin-ruby';
import FullReload from 'vite-plugin-full-reload';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { fileURLToPath, URL } from 'url';
import preprocess from 'svelte-preprocess';

export default defineConfig({
  plugins: [
    splitVendorChunkPlugin(),
    RubyPlugin(),
    FullReload(['config/routes.rb', 'app/views/**/*']),
    svelte({
      experimental: {
        prebundleSvelteLibraries: true,
      },
      preprocess: preprocess({
        postcss: true,
      }),
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./app/javascript', import.meta.url)),
    },
  },
  server: {
    hmr: {
      host: 'vite.templatus-inertia.test',
      clientPort: 443,
    },
  },
});

vite.json

{
  "all": {
    "sourceCodeDir": "app/javascript",
    "watchAdditionalPaths": []
  },
  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "host": "vite.templatus-inertia.test",
    "port": 3036
  },
  "test": {
    "autoBuild": true,
    "publicOutputDir": "vite-test",
    "port": 3037
  }
}

Logs 📜

Output

08:35:36 vite.1 | started with pid 41900
08:35:37 vite.1 | 2022-07-15T06:35:37.442Z vite-plugin-ruby:config {
08:35:37 vite.1 |   base: '/vite-dev/',
08:35:37 vite.1 |   build: {
08:35:37 vite.1 |     emptyOutDir: true,
08:35:37 vite.1 |     sourcemap: false,
08:35:37 vite.1 |     rollupOptions: { input: [Object], output: [Object] },
08:35:37 vite.1 |     assetsDir: 'assets',
08:35:37 vite.1 |     manifest: true,
08:35:37 vite.1 |     outDir: '../../public/vite-dev'
08:35:37 vite.1 |   },
08:35:37 vite.1 |   envDir: '/Users/ledermann/Projects/templatus-inertia',
08:35:37 vite.1 |   root: '/Users/ledermann/Projects/templatus-inertia/app/javascript',
08:35:37 vite.1 |   server: {
08:35:37 vite.1 |     host: 'vite.templatus-inertia.test',
08:35:37 vite.1 |     https: false,
08:35:37 vite.1 |     port: 3036,
08:35:37 vite.1 |     strictPort: true,
08:35:37 vite.1 |     fs: { allow: [Array], strict: true },
08:35:37 vite.1 |     hmr: { host: 'vite.templatus-inertia.test', clientPort: 3036 }
08:35:37 vite.1 |   },
08:35:37 vite.1 |   entrypoints: {
08:35:37 vite.1 |     'entrypoints/application.css': '/Users/ledermann/Projects/templatus-inertia/app/javascript/entrypoints/application.css',
08:35:37 vite.1 |     'entrypoints/application.ts': '/Users/ledermann/Projects/templatus-inertia/app/javascript/entrypoints/application.ts',
08:35:37 vite.1 |     'images/logo.svg': '/Users/ledermann/Projects/templatus-inertia/app/javascript/images/logo.svg'
08:35:37 vite.1 |   }
08:35:37 vite.1 | }
08:35:37 vite.1 |
08:35:37 vite.1 |   VITE v3.0.0  ready in 168 ms
08:35:37 vite.1 |
08:35:37 vite.1 |   ➜  Local:   http://vite.templatus-inertia.test:3036/vite-dev/
08:35:37 vite.1 |   ➜  Network: http://169.254.60.189:3036/vite-dev/
08:35:37 vite.1 |   ➜  Network: http://192.168.178.50:3036/vite-dev/
08:35:37 vite.1 |   ➜  Network: http://192.168.178.51:3036/vite-dev/

Screenshots 📷

[ElMassimo]

Hi Georg, thanks for reporting!

My intention was to do:

 hmr.clientPort ||= port

explicitly to avoid overriding the user config, but I wrote:

 hmr.clientPort = port

I'll cut a new release with this fix.

[ElMassimo]

Released in vite-plugin-ruby@3.1.2.

[ledermann]

Wow, that was fast - thank you very much, it works fine now!