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
This commit is contained in:
parent
b49ca27b06
commit
016833a3bc
9 changed files with 88 additions and 6 deletions
5
.changeset/curly-emus-ring.md
Normal file
5
.changeset/curly-emus-ring.md
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'astro': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Honors users HMR settings
|
|
@ -2,8 +2,11 @@ const { readFile } = require('fs').promises;
|
||||||
// Snowpack plugins must be CommonJS :(
|
// Snowpack plugins must be CommonJS :(
|
||||||
const transformPromise = import('./dist/compiler/index.js');
|
const transformPromise = import('./dist/compiler/index.js');
|
||||||
|
|
||||||
|
const DEFAULT_HMR_PORT = 12321;
|
||||||
|
|
||||||
/** @type {import('snowpack').SnowpackPluginFactory<any>} */
|
/** @type {import('snowpack').SnowpackPluginFactory<any>} */
|
||||||
module.exports = (snowpackConfig, { resolvePackageUrl, hmrPort, renderers, astroConfig } = {}) => {
|
module.exports = (snowpackConfig, { resolvePackageUrl, renderers, astroConfig } = {}) => {
|
||||||
|
let hmrPort = DEFAULT_HMR_PORT;
|
||||||
return {
|
return {
|
||||||
name: 'snowpack-astro',
|
name: 'snowpack-astro',
|
||||||
knownEntrypoints: ['astro/dist/internal/h.js', 'astro/components/Prism.astro'],
|
knownEntrypoints: ['astro/dist/internal/h.js', 'astro/components/Prism.astro'],
|
||||||
|
@ -43,6 +46,11 @@ ${contents}`;
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
config(snowpackConfig) {
|
||||||
|
if(!isNaN(snowpackConfig.devOptions.hmrPort)) {
|
||||||
|
hmrPort = snowpackConfig.devOptions.hmrPort;
|
||||||
|
}
|
||||||
|
},
|
||||||
async load({ filePath }) {
|
async load({ filePath }) {
|
||||||
const { compileComponent } = await transformPromise;
|
const { compileComponent } = await transformPromise;
|
||||||
const projectRoot = snowpackConfig.root;
|
const projectRoot = snowpackConfig.root;
|
||||||
|
|
|
@ -62,7 +62,7 @@ export default function (opts: TransformOptions): Transformer {
|
||||||
type: 'Element',
|
type: 'Element',
|
||||||
name: 'script',
|
name: 'script',
|
||||||
attributes: [],
|
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,
|
start: 0,
|
||||||
end: 0,
|
end: 0,
|
||||||
},
|
},
|
||||||
|
|
|
@ -309,7 +309,6 @@ interface CreateSnowpackOptions {
|
||||||
resolvePackageUrl?: (pkgName: string) => Promise<string>;
|
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'];
|
const DEFAULT_RENDERERS = ['@astrojs/renderer-vue', '@astrojs/renderer-svelte', '@astrojs/renderer-react', '@astrojs/renderer-preact'];
|
||||||
|
|
||||||
/** Create a new Snowpack instance to power Astro */
|
/** Create a new Snowpack instance to power Astro */
|
||||||
|
@ -329,8 +328,7 @@ async function createSnowpack(astroConfig: AstroConfig, options: CreateSnowpackO
|
||||||
hmrPort?: number;
|
hmrPort?: number;
|
||||||
} = {
|
} = {
|
||||||
astroConfig,
|
astroConfig,
|
||||||
resolvePackageUrl,
|
resolvePackageUrl
|
||||||
hmrPort: isHmrEnabled ? DEFAULT_HMR_PORT : undefined,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const mountOptions = {
|
const mountOptions = {
|
||||||
|
@ -413,7 +411,6 @@ async function createSnowpack(astroConfig: AstroConfig, options: CreateSnowpackO
|
||||||
output: 'stream',
|
output: 'stream',
|
||||||
port: 0,
|
port: 0,
|
||||||
hmr: isHmrEnabled,
|
hmr: isHmrEnabled,
|
||||||
hmrPort: isHmrEnabled ? DEFAULT_HMR_PORT : undefined,
|
|
||||||
tailwindConfig: astroConfig.devOptions.tailwindConfig,
|
tailwindConfig: astroConfig.devOptions.tailwindConfig,
|
||||||
},
|
},
|
||||||
buildOptions: {
|
buildOptions: {
|
||||||
|
|
34
packages/astro/test/astro-hmr.test.js
Normal file
34
packages/astro/test/astro-hmr.test.js
Normal file
|
@ -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();
|
6
packages/astro/test/fixtures/astro-hmr/snowpack.config.json
vendored
Normal file
6
packages/astro/test/fixtures/astro-hmr/snowpack.config.json
vendored
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"workspaceRoot": "../../../../../",
|
||||||
|
"devOptions": {
|
||||||
|
"hmrPort": 5555
|
||||||
|
}
|
||||||
|
}
|
5
packages/astro/test/fixtures/astro-hmr/src/components/Tour.jsx
vendored
Normal file
5
packages/astro/test/fixtures/astro-hmr/src/components/Tour.jsx
vendored
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
import { h } from 'preact';
|
||||||
|
|
||||||
|
export default function() {
|
||||||
|
return <div>Testing</div>
|
||||||
|
}
|
12
packages/astro/test/fixtures/astro-hmr/src/pages/index.astro
vendored
Normal file
12
packages/astro/test/fixtures/astro-hmr/src/pages/index.astro
vendored
Normal file
|
@ -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>
|
15
packages/astro/test/fixtures/astro-hmr/src/pages/manual.astro
vendored
Normal file
15
packages/astro/test/fixtures/astro-hmr/src/pages/manual.astro
vendored
Normal file
|
@ -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>
|
Loading…
Add table
Reference in a new issue