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.

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
            "astro:config:setup": (params) => {
13
                watchIntegration(params, resolve())
14
            }
15
        }
16
    }
17
})

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
});