Provide types for the client functions

[pikax]

Provide some typings for the virtual:pwa-register/vue & virtual:pwa-register imports

example:

declare module "virtual:pwa-register/vue" {
  import { Ref } from "vue";
  type RegisterSWOptions = {
    immediate?: boolean;
    onNeedRefresh?: () => void;
    onOfflineReady?: () => void;
  };

  function useRegisterSW(
    options?: RegisterSWOptions
  ): {
    needRefresh: Ref<boolean>;
    offlineReady: Ref<boolean>;
    updateServiceWorker(reloadPage?: boolean): void;
  };
}
declare module "virtual:pwa-register" {
  type RegisterSWOptions = {
    immediate?: boolean;
    onNeedRefresh?: () => void;
    onOfflineReady?: () => void;
  };

  function registerSW(
    options?: RegisterSWOptions
  ): (reloadPage?: boolean) => void;
}

[userquin]

fixed on version `0.6.4'

[antfu]

I think we have it https://github.com/antfu/vite-plugin-pwa/blob/master/client.d.ts, did you have types in tsconfig.json?

[pikax]

I think we have it https://github.com/antfu/vite-plugin-pwa/blob/master/client.d.ts, did you have types in tsconfig.json?

I haven't, checked the https://github.com/antfu/vite-plugin-pwa/tree/master/examples but there's not types there, might be useful to add an typescript example :)

[antfu]

It should work out-of-box. Asking because sometimes when you specify types in tsconfig.json it will disable the auto-discovery.

[pikax]

My tsconfig is pretty simple 🤔

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "noImplicitAny": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "jsx": "preserve",
    "sourceMap": true,
    "lib": ["esnext", "dom"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.spec.ts",

    "node_modules/vite-plugin-pwa/client.d.ts" // added this to fix the issue
  ]
}

[antfu]

Maybe you need to include vite.config.ts instead I guess, since TypeScript enables type by looking for the import of vite-plugin-pwa

[pikax]

My vite.config.ts has a bit of code 😅

Where's without all the other noise

import { UserConfig } from "vite";
import { config } from "dotenv";
import { VitePWA } from "vite-plugin-pwa";

const manifest = JSON.parse(readFileSync("./_manifest.webmanifest").toString());
const environment = process.env.APP_ENVIRONMENT;
function appendEnvironment(s: string) {
  if (environment !== "production" && environment) {
    return `${s} (${environment})`;
  }
  return s;
}

console.log("using environment:", environment);
manifest.name = appendEnvironment(manifest.name);
manifest.short_name = appendEnvironment(manifest.short_name);
manifest.version = process.env.APP_VERSION || __VERSION__;
if (environment === "staging") {
  manifest.background_color = "#00e7ff";
}

export default {
  base: "/",
  define: { /* define */},
  json: { stringify: true },

  plugins: [
    vue({}),
    PurgeIcons(),
    WindiCSS({
      safelist: "mb-2",
    }),

    VitePWA({
      scope: "/",
      strategies: "generateSW",
      // inlineRegister: true,

      manifest: {
        ...manifest,
      },
      workbox: {
        navigateFallback: "index.html",
        skipWaiting: false,

        // fix annoying networkfirst approach: 
       // based on https://raw.githubusercontent.com/shadowwalker/next-pwa/master/cache.js
        runtimeCaching,
        cleanupOutdatedCaches: true,
        // mode: "development",
      },
    }),
  ],
  build: {
    sourcemap: "hidden" as any,

    rollupOptions: {
      output: {
        compact: true,
        manualChunks(id)  { /* manual chunks */}
      },
    },
  },
} as UserConfig;

[alanbosco]

@antfu I am following the guide to set up vite-plugin-pwa in a ts react yarn 2 project. This is the error I get.

// src/main.tsx

import { registerSW } from 'virtual:pwa-register'
// Cannot find module 'virtual:pwa-register' or its corresponding type declarations.ts(2307)

const updateSW = registerSW({
  onNeedRefresh() {},
  onOfflineReady() {},
})

[userquin]

@alanbosco take a look at https://vite-plugin-pwa.netlify.app/frameworks/react.html and for ts see this https://vite-plugin-pwa.netlify.app/guide/ide.html.

You will need to upgrade to latest version 0.11.2 to use react virtual module

[userquin]

@alanbosco you can take a look at the examples directory, you have there 3 examples for react, and on pwa docs site an explanation

[krry]

Maybe you need to include vite.config.ts instead I guess, since TypeScript enables type by looking for the import of vite-plugin-pwa

This did it for me. I was specifying "types": ["vite/client", "node"] but no longer have to with vite.config.ts included.

[userquin]

@krry

• https://github.com/antfu/vite-plugin-pwa/blob/main/examples/react-basic/tsconfig.json#L17 and/or
• https://github.com/antfu/vite-plugin-pwa/blob/main/examples/react-basic/src/vite-env.d.ts#L3

[saeed-asghari]

change tsconfig to :
"compilerOptions": { "baseUrl": ".", "paths": { "@/": [ "./src/" ] }, "types": [ "vite-plugin-pwa/client" ] }