Nutritious Pumpkin Masses

    vite-plugin-sveltekit-fetch-invalidate

    1.0.2 • Public • Published

    vite-plugin-sveltekit-fetch-invalidate

    Vite plugin to help automating SvelteKit json endpoints invalidation and hot reload.

    Automatic URL inference*

    It can automatically infer URLs to invalidate, to a certain extent. If your endpoints have no parameters in them (like [slug]) it will iterate over modules that were importing modified file and resolve them to the relative path of the routes root. By default, it will remove .js|.ts extension and filter by .json, but this behavior can be modified. If you do have parameters in your URLs you will have to specify the invalidation list manually.

    No production build impact

    The sub import /hmr-listener is pointing to an empty file, the plugin runs only in serve mode and substitutes that import with hrm listener code. This way no extra code is included in your production bundle.

    Usage

    npm install -D vite-plugin-sveltekit-fetch-invalidate
    yarn add -D vite-plugin-sveltekit-fetch-invalidate
    pnpm add -D vite-plugin-sveltekit-fetch-invalidate
    // svelte.config.js
    import { fetchInvalidate } from "vite-plugin-sveltekit-fetch-invalidate";
    
    export default {
      kit: {
        vite: {
          plugins: [
            fetchInvalidate({
              patterns: ["src/blog/**/*.mdx"],
              routesRoot: "src/routes",
            }),
          ],
        },
      },
    };

    Import hmr listener in your root __layout.svelte:

    import "vite-plugin-sveltekit-fetch-invalidate/hmr-listener";

    Options

    type Config = {
      patterns: string[] | InvalidateConfig | InvalidateConfig[];
      routesRoot?: string; // defaults to "src/routes"
      importersTransform?: (importers: string[]) => string[];
      verbose?: boolean;
    };
    type InvalidateConfig = {
      watch: string | string[];
      invalidate?: string | string[];
    };
    // simple
    fetchInvalidate({
      patterns: ["src/blog/**/*.mdx"],
    });
    
    // same as above
    fetchInvalidate({
      patterns: {
        watch: ["src/blog/**/*.mdx"],
      },
    });
    
    // custom ivalidation list
    fetchInvalidate({
      patterns: {
        watch: ["src/blog/**/*.svelte", "src/blog/**/*.mdx"],
        // if your endpoint has a param in it then invalidating `/api/[type].json` won't work, you have to specify manual list
        invalidate: ["/api/posts.json"],
      },
    });
    
    // complex
    fetchInvalidate({
      patterns: [
        {
          watch: ["src/blog/**/*.mdx"],
          invalidate: ["/api/timestamps.json"],
        },
        {
          watch: ["src/items/**/*.json", "src/model/**/*.ts"],
          invalidate: ["/api/prices.json"],
        },
        {
          watch: ["src/**/*.ts"],
        },
      ],
      routesRoot: "src/website",
      importersTransform: importers => {
        return (
          importers
            // this is the default behavior
            .map(file => file.replace(/\.(js|ts)$/, ""))
            .filter(file => file.endsWith(".json"))
        );
      },
    });

    Install

    npm i vite-plugin-sveltekit-fetch-invalidate

    DownloadsWeekly Downloads

    4

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    10 kB

    Total Files

    6

    Last publish

    Collaborators

    • n1kk