Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add sveltekit example #176

Merged
merged 30 commits into from
Dec 1, 2021
Merged
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
446c6e6
feat: add sveltekit example
userquin Nov 28, 2021
d9120e5
Merge branch 'main' into docs/sveltekit
userquin Nov 28, 2021
352515e
chore: add `vitepress` to keywords
userquin Nov 28, 2021
e41bf6f
fix(navLik): false positives on svelte and sveltekit
userquin Nov 28, 2021
1f1bd77
docs: add sveltekit entries and update svelte
userquin Nov 28, 2021
ca852fe
chore: update sveltekit `pwa-configuration` module and docs example
userquin Nov 29, 2021
6f8f846
docs: update svelte-kit `pwa-configuration.js`
userquin Nov 29, 2021
0a1e912
docs: update `injectManifest` for all fw + update examples guide
userquin Nov 29, 2021
2c05c80
docs: modify SvelteKit stuff to match code style (tabs)
userquin Nov 29, 2021
aa5ac8a
docs: update SvelteKit SSR/SSG
userquin Nov 29, 2021
0550134
docs: errata in the `ExamplesBehaviors.md` component
userquin Nov 29, 2021
9fbbddf
docs: fix tab on `pwa.js` module
userquin Nov 29, 2021
d352210
docs: fix more tabs on `pwa.js` module
userquin Nov 29, 2021
e733873
docs: fix more tabs on `ReloadPrompt` component
userquin Nov 29, 2021
312b31b
docs: fix again tabs on `ReloadPrompt` component
userquin Nov 29, 2021
f6156f5
docs: use `pnpm` instead`PNPM`
userquin Nov 29, 2021
688bc87
docs: adapters intro to the same paragraph
userquin Nov 29, 2021
ded0075
docs: group difference in the same paragraph
userquin Nov 29, 2021
7e65198
docs: change wording of example
userquin Nov 29, 2021
0a2c650
docs: enclose example scripts on details element
userquin Nov 29, 2021
6c50f16
docs: add some code comments + more tabs on docs code
userquin Nov 29, 2021
d65df1e
docs: add `manifestTransforms` hints
userquin Nov 30, 2021
9336936
docs: add `manifestTransforms` hints tod pwa docs
userquin Nov 30, 2021
7f05d90
docs: change `vitepress` configuration
userquin Nov 30, 2021
41f62a6
Update docs/frameworks/sveltekit.md
userquin Nov 30, 2021
ee023a8
Update examples/sveltekit-pwa/pwa-configuration.js
userquin Nov 30, 2021
bdc1a19
Update docs/frameworks/sveltekit.md
userquin Nov 30, 2021
148500d
Update docs/frameworks/sveltekit.md
userquin Nov 30, 2021
61afed2
docs: update manifest tranform for future-proof
userquin Dec 1, 2021
0b1fbd1
docs: update explanation for manifest transform
userquin Dec 1, 2021
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 17 additions & 13 deletions docs/.vitepress/config.js → docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
@@ -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
17 changes: 17 additions & 0 deletions docs/.vitepress/theme/components/ExamplesBehaviors.md
Original file line number Diff line number Diff line change
@@ -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.
3 changes: 3 additions & 0 deletions docs/.vitepress/theme/components/ExamplesGenerateSW.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
`generateSW` has the following behaviors:

<ExamplesBehaviors />
3 changes: 3 additions & 0 deletions docs/.vitepress/theme/components/ExamplesInjectManifest.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
`injectManifest` has the following behavior:

<ExamplesBehaviors />
8 changes: 6 additions & 2 deletions docs/.vitepress/theme/composables/navLink.ts
Original file line number Diff line number Diff line change
@@ -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 {
25 changes: 20 additions & 5 deletions docs/examples/index.md
Original file line number Diff line number Diff line change
@@ -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>
35 changes: 8 additions & 27 deletions docs/examples/preact.md
Original file line number Diff line number Diff line change
@@ -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 />
31 changes: 8 additions & 23 deletions docs/examples/react.md
Original file line number Diff line number Diff line change
@@ -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 />
32 changes: 9 additions & 23 deletions docs/examples/solidjs.md
Original file line number Diff line number Diff line change
@@ -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 />

Loading