Skip to content

hmrIntegration

Until now, we recommended watchIntegration to enable HMR in development. However:

  • This can cause performance issues because your integration would be also watched when the integration is used by your users.
  • It doesn’t work with a build step, which we highly recommend.

From now on, we recommend that you use dynamic imports in your local playgrounds, alongside the new hmrIntegration integration exported from astro-integration-kit/dev.

package/src/integration.ts
1
import {
2
defineIntegration,
3
createResolver,
4
watchIntegration
5
} from "astro-integration-kit"
6
7
export const integration = defineIntegration({
8
// ...
9
setup() {
10
const { resolve } = createResolver(import.meta.url)
11
return {
12
hooks: {
13
"astro:config:setup": (params) => {
14
watchIntegration(params, resolve())
15
}
16
}
17
}
18
}
19
})
playground/astro.config.mjs
1
import { defineConfig } from "astro/config";
2
import packageName from "package-name"
3
import { createResolver } from "astro-integration-kit";
4
import { hmrIntegration } from "astro-integration-kit/dev";
5
const { default: packageName } = await import("package-name");
6
7
export default defineConfig({
8
integrations: [
9
packageName(),
10
hmrIntegration({
11
directory: createResolver(import.meta.url).resolve("../package/dist")
12
})
13
],
14
});