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

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