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

import {
    defineIntegration,
    createResolver,
    watchIntegration
} from "astro-integration-kit"

export const integration = defineIntegration({
    // ...
    setup() {
        const { resolve } = createResolver(import.meta.url)
        return {
            hooks: {
                "astro:config:setup": (params) => {
                    watchIntegration(params, resolve())
                }
            }
        }
    }
})

playground/astro.config.mjs

import { defineConfig } from "astro/config";
import packageName from "package-name"
import { createResolver } from "astro-integration-kit";
import { hmrIntegration } from "astro-integration-kit/dev";
const { default: packageName } = await import("package-name");

export default defineConfig({
    integrations: [
        packageName(),
        hmrIntegration({
            directory: createResolver(import.meta.url).resolve("../package/dist")
        })
    ],
});