Honor user's hmr settings (#436)

* Honor user's hmr settings

This contains 2 fixes:

* If the user sets the hmrPort in their own snowpack config we use that port.
* If the user sets `window.HMR_WEBSOCKET_URL` we defer to that

* Adds the changeset

.changeset/curly-emus-ring.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Honors users HMR settings

packages/astro/snowpack-plugin.cjs

@@ -2,8 +2,11 @@ const { readFile } = require('fs').promises;
 // Snowpack plugins must be CommonJS :(
 const transformPromise = import('./dist/compiler/index.js');
 
+const DEFAULT_HMR_PORT = 12321;
+
 /** @type {import('snowpack').SnowpackPluginFactory<any>} */
-module.exports = (snowpackConfig, { resolvePackageUrl, hmrPort, renderers, astroConfig } = {}) => {
+module.exports = (snowpackConfig, { resolvePackageUrl, renderers, astroConfig } = {}) => {
+  let hmrPort = DEFAULT_HMR_PORT;
   return {
     name: 'snowpack-astro',
     knownEntrypoints: ['astro/dist/internal/h.js', 'astro/components/Prism.astro'],
@@ -43,6 +46,11 @@ ${contents}`;
         return result;
       }
     },
+    config(snowpackConfig) {
+      if(!isNaN(snowpackConfig.devOptions.hmrPort)) {
+        hmrPort = snowpackConfig.devOptions.hmrPort;
+      }
+    },
     async load({ filePath }) {
       const { compileComponent } = await transformPromise;
       const projectRoot = snowpackConfig.root;

packages/astro/src/compiler/transform/head.ts

@@ -62,7 +62,7 @@ export default function (opts: TransformOptions): Transformer {
             type: 'Element',
             name: 'script',
             attributes: [],
-            children: [{ type: 'Text', data: `window.HMR_WEBSOCKET_URL = 'ws://localhost:${hmrPort}'`, start: 0, end: 0 }],
+            children: [{ type: 'Text', data: `window.HMR_WEBSOCKET_URL = window.HMR_WEBSOCKET_URL || 'ws://localhost:${hmrPort}';`, start: 0, end: 0 }],
             start: 0,
             end: 0,
           },

packages/astro/src/runtime.ts

@@ -309,7 +309,6 @@ interface CreateSnowpackOptions {
   resolvePackageUrl?: (pkgName: string) => Promise<string>;
 }
 
-const DEFAULT_HMR_PORT = 12321;
 const DEFAULT_RENDERERS = ['@astrojs/renderer-vue', '@astrojs/renderer-svelte', '@astrojs/renderer-react', '@astrojs/renderer-preact'];
 
 /** Create a new Snowpack instance to power Astro */
@@ -329,8 +328,7 @@ async function createSnowpack(astroConfig: AstroConfig, options: CreateSnowpackO
     hmrPort?: number;
   } = {
     astroConfig,
-    resolvePackageUrl,
+    resolvePackageUrl
-    hmrPort: isHmrEnabled ? DEFAULT_HMR_PORT : undefined,
   };
 
   const mountOptions = {
@@ -413,7 +411,6 @@ async function createSnowpack(astroConfig: AstroConfig, options: CreateSnowpackO
       output: 'stream',
       port: 0,
       hmr: isHmrEnabled,
-      hmrPort: isHmrEnabled ? DEFAULT_HMR_PORT : undefined,
       tailwindConfig: astroConfig.devOptions.tailwindConfig,
     },
     buildOptions: {

packages/astro/test/astro-hmr.test.js

@@ -0,0 +1,34 @@
+import { suite } from 'uvu';
+import * as assert from 'uvu/assert';
+import { doc } from './test-utils.js';
+import { setup } from './helpers.js';
+
+const HMR = suite('HMR tests');
+
+setup(HMR, './fixtures/astro-hmr', {
+  runtimeOptions: {
+    mode: 'development',
+  },
+});
+
+HMR('Honors the user provided port', async ({ runtime }) => {
+  const result = await runtime.load('/');
+  if (result.error) throw new Error(result.error);
+
+  const html = result.contents;
+  assert.ok(/window\.HMR_WEBSOCKET_URL = window\.HMR_WEBSOCKET_URL || 'ws:\/\/localhost:5555'/.test(html), 'Uses the user\'s websocket port');
+});
+
+HMR('Does not override script added by the user', async ({ runtime }) => {
+  const result = await runtime.load('/manual');
+  console.log(result.error);
+
+  const html = result.contents;
+
+  assert.ok(!/window\.HMR_WEBSOCKET_URL = 'ws:\/\/localhost:3333'/.test(html),
+    'Users script included');
+  assert.ok(/window\.HMR_WEBSOCKET_URL = window\.HMR_WEBSOCKET_URL || 'ws:\/\/localhost:5555'/.test(html),
+    'Our script defers to the port already being set');
+});
+
+HMR.run();

packages/astro/test/fixtures/astro-hmr/snowpack.config.json

@@ -0,0 +1,6 @@
+{
+  "workspaceRoot": "../../../../../",
+  "devOptions": {
+    "hmrPort": 5555
+  }
+}

packages/astro/test/fixtures/astro-hmr/src/components/Tour.jsx

@@ -0,0 +1,5 @@
+import { h } from 'preact';
+
+export default function() {
+  return <div>Testing</div>
+}

packages/astro/test/fixtures/astro-hmr/src/pages/index.astro

@@ -0,0 +1,12 @@
+---
+import Tour from '../components/Tour.jsx';
+---
+<html>
+<head>
+  <title>My Test</title>
+</head>
+<body>
+  <div>Hello world</div>
+  <Tour:load />
+</body>
+</html>

packages/astro/test/fixtures/astro-hmr/src/pages/manual.astro

@@ -0,0 +1,15 @@
+---
+import Tour from '../components/Tour.jsx';
+---
+<html>
+<head>
+  <title>My Test</title>
+  <script>
+    window.HMR_WEBSOCKET_URL = 'wss://example.com:3333';
+  </script>
+</head>
+<body>
+  <div>Hello world</div>
+  <Tour:load />
+</body>
+</html>