feat: add sveltekit example

docs/.vitepress/config.js → docs/.vitepress/config.ts

@@ -1,4 +1,4 @@
-require('esbuild-register')
+import type { UserConfig } from 'vitepress'
 
 const Guide = [
  {
@@ -83,6 +83,10 @@ const Frameworks = [
  text: 'Svelte',
  link: '/frameworks/svelte',
  },
+ {
+ text: 'SvelteKit',
+ link: '/frameworks/sveltekit',
+ },
  {
  text: 'SolidJS',
  link: '/frameworks/solidjs',
@@ -114,6 +118,10 @@ const Examples = [
  text: 'Svelte',
  link: '/examples/svelte',
  },
+ {
+ text: 'SvelteKit',
+ link: '/examples/sveltekit',
+ },
  {
  text: 'SolidJS',
  link: '/examples/solidjs',
@@ -147,45 +155,41 @@ const slidebars = [
  {
  text: 'Guide',
  children: Guide.map((e) => {
- e.useLinkText = `${e.text} | Guide`
+ (e as any).useLinkText = `${e.text} | Guide`
  return e
  }),
  },
  {
  text: 'Frameworks',
  children: Frameworks.map((e) => {
- e.useLinkText = `${e.text} | Frameworks`
+ (e as any).useLinkText = `${e.text} | Frameworks`
  return e
  }),
  },
  {
  text: 'Examples',
  children: Examples.map((e) => {
- e.useLinkText = `${e.text} | Examples`
+ (e as any).useLinkText = `${e.text} | Examples`
  return e
  }),
  },
  {
  text: 'Deployment',
  children: Deployment.map((e) => {
- e.useLinkText = `${e.text} | Deployment`
+ (e as any).useLinkText = `${e.text} | Deployment`
  return e
  }),
  },
  {
  text: 'Workbox',
  children: Workbox.map((e) => {
- e.useLinkText = `${e.text} | Workbox`
+ (e as any).useLinkText = `${e.text} | Workbox`
  return e
  }),
  },
 ]
 
-
-/**
- * @type {import('vitepress').UserConfig}
- */
-const config = {
+const config: UserConfig = {
  title: 'Vite Plugin PWA',
  description: 'Zero-config PWA Framework-agnostic Plugin for Vite',
  lang: 'en-US',
@@ -195,7 +199,7 @@ const config = {
  ['link', { rel: 'alternate icon', href: '/favicon.ico', type: 'image/png', sizes: '16x16' }],
  ['link', { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#ffffff' }],
  ['meta', { name: 'author', content: 'Anthony Fu' }],
- ['meta', { name: 'keywords', content: 'react, pwa, vue, preact, svelte, workbox, solidjs, vite, vite-plugin' }],
+ ['meta', { name: 'keywords', content: 'react, pwa, vue, vitepress, preact, svelte, sveltekit, workbox, solidjs, vite, vite-plugin' }],
  ['meta', { property: 'og:title', content: 'Vite Plugin PWA' }],
  ['meta', { property: 'og:description', content: 'Zero-config PWA Framework-agnostic Plugin for Vite' }],
  ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
@@ -252,4 +256,4 @@ const config = {
  },
 }
 
-module.exports = config
+export default config

docs/.vitepress/theme/components/ExamplesBehaviors.md

@@ -0,0 +1,17 @@
+- `Prompt for update`:
+ - Show `Ready to work offline` on first visit and once the `service worker` ready.
+ - Show `Prompt for update` when new `service worker` available.
+
+- `Auto update`:
+ - Show `Ready to work offline` on first visit and once the `service worker` ready.
+ - When new content available, the service worker will be updated automatically.
+
+- `Prompt for update` with `Periodic service worker updates`:
+ - Show `Ready to work offline` on first visit and once the `service worker` ready.
+ - Show `Prompt for update` when new `service worker` available.
+ - The example project will register a `Periodic service worker updates`
+
+- `Auto update` with `Periodic service worker updates`:
+ - Show `Ready to work offline` on first visit and once the `service worker` ready.
+ - The example project will register a `Periodic service worker updates`
+ - When new content available, the service worker will be updated automatically.

docs/.vitepress/theme/components/ExamplesGenerateSW.md

@@ -0,0 +1,3 @@
+`generateSW` has the following behaviors:
+
+<ExamplesBehaviors />

docs/.vitepress/theme/components/ExamplesInjectManifest.md

@@ -0,0 +1,3 @@
+`injectManifest` has the following behavior:
+
+<ExamplesBehaviors />

docs/.vitepress/theme/composables/navLink.ts

@@ -2,11 +2,9 @@ import { computed, Ref } from 'vue'
 import { useRoute, withBase } from 'vitepress'
 import type { DefaultTheme } from '../config'
 import { isExternal as isExternalCheck } from '../utils'
-// import { useUrl } from './url'
 
 export function useNavLink(item: Ref<DefaultTheme.NavItemWithLink>) {
  const route = useRoute()
- // const { withBase } = useUrl()
 
  const isExternal = isExternalCheck(item.value.link)
 
@@ -24,6 +22,12 @@ export function useNavLink(item: Ref<DefaultTheme.NavItemWithLink>) {
  = itemPath === '/'
  ? itemPath === routePath
  : routePath.startsWith(itemPath)
+ // fix /frameworks/sveltekit and /frameworks/svelte
+ if (routePath === '/frameworks/sveltekit' && itemPath === '/frameworks/svelte' && active)
+ active = false
+ // fix /examples/sveltekit and /examples/svelte
+ if (routePath === '/examples/sveltekit' && itemPath === '/examples/svelte' && active)
+ active = false
  }
 
  return {

docs/examples/index.md

@@ -102,7 +102,7 @@ We provide the following example projects:
  </md-list-anchor>
  <md-list-anchor href="/examples/vue.html#injectmanifest">
  <template #link>Vue 3 injectManifest Example</template>
- <template #trailing>: <code>Ready to work offline</code> and <code>Prompt for update</code>.</template>
+ <template #trailing>: set of examples with disparate behaviors.</template>
  </md-list-anchor>
  </ul>
  </template>
@@ -117,7 +117,7 @@ We provide the following example projects:
  </md-list-anchor>
  <md-list-anchor href="/examples/react.html#injectmanifest">
  <template #link>React injectManifest Example</template>
- <template #trailing>: <code>Ready to work offline</code> and <code>Prompt for update</code>.</template>
+ <template #trailing>: set of examples with disparate behaviors.</template>
  </md-list-anchor>
  </ul>
  </template>
@@ -132,7 +132,22 @@ We provide the following example projects:
  </md-list-anchor>
  <md-list-anchor href="/examples/svelte.html#injectmanifest">
  <template #link>Svelte injectManifest Example</template>
- <template #trailing>: <code>Ready to work offline</code> and <code>Prompt for update</code>.</template>
+ <template #trailing>: set of examples with disparate behaviors.</template>
+ </md-list-anchor>
+ </ul>
+ </template>
+</md-list-anchor>
+<md-list-anchor id="sveltekit-examples" href="/examples/sveltekit.html">
+ <template #link>SvelteKit</template>
+ <template #nested>
+ <ul aria-labelledby="sveltekit-examples">
+ <md-list-anchor href="/examples/sveltekit.html#generatesw">
+ <template #link>SvelteKit generatesSw Example</template>
+ <template #trailing>: set of examples with disparate behaviors.</template>
+ </md-list-anchor>
+ <md-list-anchor href="/examples/sveltekit.html#injectmanifest">
+ <template #link>SvelteKit injectManifest Example</template>
+ <template #trailing>: set of examples with disparate behaviors.</template>
  </md-list-anchor>
  </ul>
  </template>
@@ -147,7 +162,7 @@ We provide the following example projects:
  </md-list-anchor>
  <md-list-anchor href="/examples/solidjs.html#injectmanifest">
  <template #link>SolidJS injectManifest Router Example</template>
- <template #trailing>: <code>Ready to work offline</code> and <code>Prompt for update</code>.</template>
+ <template #trailing>: set of examples with disparate behaviors.</template>
  </md-list-anchor>
  </ul>
  </template>
@@ -162,7 +177,7 @@ We provide the following example projects:
  </md-list-anchor>
  <md-list-anchor href="/examples/preact.html#injectmanifest">
  <template #link>Preact injectManifest Router Example</template>
- <template #trailing>: <code>Ready to work offline</code> and <code>Prompt for update</code>.</template>
+ <template #trailing>: set of examples with disparate behaviors.</template>
  </md-list-anchor>
  </ul>
  </template>

docs/examples/preact.md

@@ -8,7 +8,11 @@ The `Preact` example project can be found on `examples/preact-router` package/di
 
 The router used on this example project is [preact-router](https://github.com/preactjs/preact-router) <outbound-link />.
 
-The `Preact` example has been created using `create-vite` template with `PNPM`:
+The `Preact` example has been created using `create-vite` template with `pnpx`:
+
+<details>
+ <summary><strong>pnpx create-vite</strong></summary>
+
 ```shell
 pnpx create-vite
 + create-vite 2.6.6
@@ -24,7 +28,7 @@ Done. Now run:
  npm install
  npm run dev
 ```
-
+</details>
 
 To test `new content available`, you should rerun the corresponding script, and then refresh the page.
 
@@ -37,31 +41,8 @@ If you are running an example with `Periodic SW updates`, you will need to wait
 
 ## generateSW
 
-`generateSW` has the following behaviors:
-- `Prompt for update`:
- - Show `Ready to work offlline` on first visit and once the `service worker` ready.
- - Show `Prompt for update` when new `service worker` available.
-
-- `Auto update`:
- - Show `Ready to work offlline` on first visit and once the `service worker` ready.
- - When new content available, the service worker will be updated automatically.
-
-- `Prompt for update` with `Periodic service worker updates`:
- - Show `Ready to work offlline` on first visit and once the `service worker` ready.
- - Show `Prompt for update` when new `service worker` available.
- - The example project will register a `Periodic service worker updates`
-
-- `Auto update` with `Periodic service worker updates`:
- - Show `Ready to work offlline` on first visit and once the `service worker` ready.
- - The example project will register a `Periodic service worker updates`
- - When new content available, the service worker will be updated automatically.
+<ExamplesGenerateSW />
 
 ## injectManifest
 
-`injectManifest` has the following behavior:
-- Custom `TypeScript Service Worker` with offline support.
-- Show `Ready to work offlline` on first visit and once the `service worker` ready.
-- Show `Prompt for update` when new `service worker` available.
-
-
-
+<ExamplesInjectManifest />

docs/examples/react.md

@@ -8,7 +8,11 @@ The `React` example project can be found on `examples/react-router` package/dire
 
 The router used on this example project is [react-router](https://reactrouter.com/) <outbound-link />.
 
-The `React` example has been created using `create-vite` template with `PNPM`:
+The `React` example has been created using `create-vite` template with `pnpx`:
+
+<details>
+ <summary><strong>pnpx create-vite</strong></summary>
+
 ```shell
 pnpx create-vite
 + create-vite 2.5.4
@@ -24,6 +28,7 @@ Done. Now run:
  npm install
  npm run dev
 ```
+</details>
 
 To test `new content available`, you should rerun the corresponding script, and then refresh the page.
 
@@ -36,28 +41,8 @@ If you are running an example with `Periodic SW updates`, you will need to wait
 
 ## generateSW
 
-`generateSW` has the following behaviors:
-- `Prompt for update`:
- - Show `Ready to work offlline` on first visit and once the `service worker` ready.
- - Show `Prompt for update` when new `service worker` available.
-
-- `Auto update`:
- - Show `Ready to work offlline` on first visit and once the `service worker` ready.
- - When new content available, the service worker will be updated automatically.
-
-- `Prompt for update` with `Periodic service worker updates`:
- - Show `Ready to work offlline` on first visit and once the `service worker` ready.
- - Show `Prompt for update` when new `service worker` available.
- - The example project will register a `Periodic service worker updates`
-
-- `Auto update` with `Periodic service worker updates`:
- - Show `Ready to work offlline` on first visit and once the `service worker` ready.
- - The example project will register a `Periodic service worker updates`
- - When new content available, the service worker will be updated automatically.
+<ExamplesGenerateSW />
 
 ## injectManifest
 
-`injectManifest` has the following behavior:
-- Custom `TypeScript Service Worker` with offline support.
-- Show `Ready to work offlline` on first visit and once the `service worker` ready.
-- Show `Prompt for update` when new `service worker` available.
+<ExamplesInjectManifest />

docs/examples/solidjs.md

@@ -8,11 +8,16 @@ The `SolidJS` example project can be found on `examples/solid-router` package/di
 
 The router used on this example project is [solid-app-router](https://github.com/solidjs/solid-app-router) <outbound-link />.
 
-The `SolidJS` example has been created using `https://github.com/solidjs/templates` template with `NPX`:
+The `SolidJS` example has been created using `https://github.com/solidjs/templates` template with `npx`:
+
+<details>
+ <summary><strong>npx degit solidjs/templates/ts-router solid-router</strong></summary>
+
 ```shell
 npx degit solidjs/templates/ts-router solid-router
 > cloned solidjs/templates#HEAD to solid-router
 ```
+</details>
 
 To test `new content available`, you should rerun the corresponding script, and then refresh the page.
 
@@ -25,28 +30,9 @@ If you are running an example with `Periodic SW updates`, you will need to wait
 
 ## generateSW
 
-`generateSW` has the following behaviors:
-- `Prompt for update`:
- - Show `Ready to work offlline` on first visit and once the `service worker` ready.
- - Show `Prompt for update` when new `service worker` available.
-
-- `Auto update`:
- - Show `Ready to work offlline` on first visit and once the `service worker` ready.
- - When new content available, the service worker will be updated automatically.
-
-- `Prompt for update` with `Periodic service worker updates`:
- - Show `Ready to work offlline` on first visit and once the `service worker` ready.
- - Show `Prompt for update` when new `service worker` available.
- - The example project will register a `Periodic service worker updates`
-
-- `Auto update` with `Periodic service worker updates`:
- - Show `Ready to work offlline` on first visit and once the `service worker` ready.
- - The example project will register a `Periodic service worker updates`
- - When new content available, the service worker will be updated automatically.
+<ExamplesGenerateSW />
 
 ## injectManifest
 
-`injectManifest` has the following behavior:
-- Custom `TypeScript Service Worker` with offline support.
-- Show `Ready to work offlline` on first visit and once the `service worker` ready.
-- Show `Prompt for update` when new `service worker` available.
+<ExamplesInjectManifest />
+