Prevent HMR client from being part of bundle (#464)

packages/astro/snowpack-plugin.cjs

@@ -5,7 +5,7 @@ const transformPromise = import('./dist/compiler/index.js');
 const DEFAULT_HMR_PORT = 12321;
 
 /** @type {import('snowpack').SnowpackPluginFactory<any>} */
-module.exports = (snowpackConfig, { resolvePackageUrl, renderers, astroConfig } = {}) => {
+module.exports = (snowpackConfig, { resolvePackageUrl, renderers, astroConfig, mode } = {}) => {
   let hmrPort = DEFAULT_HMR_PORT;
   return {
     name: 'snowpack-astro',
@@ -58,6 +58,7 @@ ${contents}`;
       const compileOptions = {
         astroConfig,
         hmrPort,
+        mode,
         resolvePackageUrl,
         renderers,
       };

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

@@ -5,7 +5,8 @@ import type { TemplateNode } from '@astrojs/parser';
 export default function (opts: TransformOptions): Transformer {
   let head: TemplateNode;
   let hasComponents = false;
-  let isHmrEnabled = typeof opts.compileOptions.hmrPort !== 'undefined';
+  let isHmrEnabled = typeof opts.compileOptions.hmrPort !== 'undefined' &&
+    opts.compileOptions.mode === 'development';
 
   return {
     visitors: {

packages/astro/src/runtime.ts

@@ -313,7 +313,7 @@ const DEFAULT_RENDERERS = ['@astrojs/renderer-vue', '@astrojs/renderer-svelte',
 
 /** Create a new Snowpack instance to power Astro */
 async function createSnowpack(astroConfig: AstroConfig, options: CreateSnowpackOptions) {
-  const { projectRoot, pages: pagesRoot, renderers = DEFAULT_RENDERERS } = astroConfig;
+  const { projectRoot, renderers = DEFAULT_RENDERERS } = astroConfig;
   const { mode, resolvePackageUrl } = options;
 
   const frontendPath = new URL('./frontend/', import.meta.url);
@@ -326,9 +326,11 @@ async function createSnowpack(astroConfig: AstroConfig, options: CreateSnowpackO
     renderers?: { name: string; client: string; server: string }[];
     astroConfig: AstroConfig;
     hmrPort?: number;
+    mode: RuntimeMode;
   } = {
     astroConfig,
     resolvePackageUrl,
+    mode,
   };
 
   const mountOptions = {

packages/astro/test/astro-basic.test.js

@@ -1,7 +1,7 @@
 import { suite } from 'uvu';
 import * as assert from 'uvu/assert';
 import { doc } from './test-utils.js';
-import { setup } from './helpers.js';
+import { setup, setupBuild } from './helpers.js';
 
 const Basics = suite('Basic test');
 
@@ -10,6 +10,7 @@ setup(Basics, './fixtures/astro-basic', {
     mode: 'development',
   },
 });
+setupBuild(Basics, './fixtures/astro-basic');
 
 Basics('Can load page', async ({ runtime }) => {
   const result = await runtime.load('/');
@@ -47,4 +48,18 @@ Basics('Selector with an empty body', async ({ runtime }) => {
   assert.equal($('.author').length, 1, 'author class added');
 });
 
+Basics('Build does not include HMR client', async ({ build, readFile }) => {
+    await build().catch(err => {
+      assert.ok(!err, 'Error during the build');
+    });
+    const clientHTML = await readFile('/client/index.html');
+    const $ = doc(clientHTML);
+
+    assert.equal($('script[src="/_snowpack/hmr-client.js"]').length, 0, 'No HMR client script');
+    const hmrPortScript = $('script').filter((i, el) => {
+      return $(el).text().match(/window\.HMR_WEBSOCKET_PORT/);
+    });
+    assert.equal(hmrPortScript.length, 0, 'No script setting the websocket port');
+});
+
 Basics.run();