Add with-vite-plugin-pwa example (#1829)

2021-11-22 20:03:45 -06:00 · 2021-11-22 20:03:45 -06:00 · f165004c10
commit f165004c10
parent df4671788c
16 changed files with 1575 additions and 37 deletions
--- a/examples/with-vite-plugin-pwa/.gitignore
+++ b/examples/with-vite-plugin-pwa/.gitignore
@ -0,0 +1,18 @@
+# build output
+dist
+
+# dependencies
+node_modules/
+.snowpack/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
--- a/examples/with-vite-plugin-pwa/.npmrc
+++ b/examples/with-vite-plugin-pwa/.npmrc
@ -0,0 +1,2 @@
+## force pnpm to hoist 
+shamefully-hoist = true
--- a/examples/with-vite-plugin-pwa/.stackblitzrc
+++ b/examples/with-vite-plugin-pwa/.stackblitzrc
@ -0,0 +1,6 @@
+{
+  "startCommand": "npm start",
+  "env": {
+    "ENABLE_CJS_IMPORTS": true
+  }
+}
--- a/examples/with-vite-plugin-pwa/README.md
+++ b/examples/with-vite-plugin-pwa/README.md
@ -0,0 +1,43 @@
+# Astro Starter Kit: Minimal
+
+```
+npm init astro -- --template minimal
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/snowpackjs/astro/tree/latest/examples/minimal)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```
+/
+├── public/
+├── src/
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command           | Action                                       |
+|:----------------  |:-------------------------------------------- |
+| `npm install`     | Installs dependencies                        |
+| `npm run dev`     | Starts local dev server at `localhost:3000`  |
+| `npm run build`   | Build your production site to `./dist/`      |
+| `npm run preview` | Preview your build locally, before deploying |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://github.com/snowpackjs/astro) or jump into our [Discord server](https://astro.build/chat).
--- a/examples/with-vite-plugin-pwa/astro.config.mjs
+++ b/examples/with-vite-plugin-pwa/astro.config.mjs
@ -0,0 +1,16 @@
+import { VitePWA } from 'vite-plugin-pwa'
+
+// Full Astro Configuration API Documentation:
+// https://docs.astro.build/reference/configuration-reference
+
+// @type-check enabled!
+// VSCode and other TypeScript-enabled text editors will provide auto-completion,
+// helpful tooltips, and warnings if your exported object is invalid.
+// You can disable this by removing "@ts-check" and `@type` comments below.
+
+// @ts-check
+export default /** @type {import('astro').AstroUserConfig} */ ({
+  vite: {
+      plugins: [VitePWA()]
+  }
+});
--- a/examples/with-vite-plugin-pwa/package.json
+++ b/examples/with-vite-plugin-pwa/package.json
@ -0,0 +1,15 @@
+{
+  "name": "@example/with-vite-plugin-pwa",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "devDependencies": {
+    "astro": "^0.21.0-next.3",
+    "vite-plugin-pwa": "^0.11.5"
+  }
+}
--- a/examples/with-vite-plugin-pwa/public/favicon.ico
+++ b/examples/with-vite-plugin-pwa/public/favicon.ico
--- a/examples/with-vite-plugin-pwa/public/robots.txt
+++ b/examples/with-vite-plugin-pwa/public/robots.txt
@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /
--- a/examples/with-vite-plugin-pwa/sandbox.config.json
+++ b/examples/with-vite-plugin-pwa/sandbox.config.json
@ -0,0 +1,11 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "view": "browser",
+  "template": "node",
+  "container": {
+    "port": 3000,
+    "startScript": "start",
+    "node": "14"
+  }
+}
--- a/examples/with-vite-plugin-pwa/src/index.ts
+++ b/examples/with-vite-plugin-pwa/src/index.ts
@ -0,0 +1,10 @@
+import { registerSW } from 'virtual:pwa-register'
+
+const updateSW = registerSW({
+  onNeedRefresh() {},
+  onOfflineReady() {
+    console.log("Offline ready");
+  }
+})
+
+updateSW();
--- a/examples/with-vite-plugin-pwa/src/pages/index.astro
+++ b/examples/with-vite-plugin-pwa/src/pages/index.astro
@ -0,0 +1,18 @@
+---
+---
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" type="image/x-icon" href="/favicon.ico" />
+	<meta name="viewport" content="width=device-width" />
+	<title>Welcome to Astro</title>
+</head>
+
+<body>
+	<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
+  <script src={Astro.resolve('../index.ts')} type="module" hoist />
+</body>
+
+</html>
--- a/examples/with-vite-plugin-pwa/src/vite-env.d.ts
+++ b/examples/with-vite-plugin-pwa/src/vite-env.d.ts
@ -0,0 +1,11 @@
+declare module 'virtual:pwa-register' {
+  export type RegisterSWOptions = {
+    immediate?: boolean
+    onNeedRefresh?: () => void
+    onOfflineReady?: () => void
+    onRegistered?: (registration: ServiceWorkerRegistration | undefined) => void
+    onRegisterError?: (error: any) => void
+  }
+
+  export function registerSW(options?: RegisterSWOptions): (reloadPage?: boolean) => Promise<void>
+}
--- a/examples/with-vite-plugin-pwa/tsconfig.json
+++ b/examples/with-vite-plugin-pwa/tsconfig.json
@ -0,0 +1,3 @@
+{
+  "include": ["src/**/*.ts"]
+}
--- a/packages/astro/src/core/build/index.ts
+++ b/packages/astro/src/core/build/index.ts
@ -10,7 +10,7 @@ import * as colors from 'kleur/colors';
 import { performance } from 'perf_hooks';
 import vite, { ViteDevServer } from '../vite.js';
 import { fileURLToPath } from 'url';
-import { createVite } from '../create-vite.js';
+import { createVite, ViteConfigWithSSR } from '../create-vite.js';
 import { debug, defaultLogOptions, info, levels, timerMessage, warn } from '../logger.js';
 import { preload as ssrPreload } from '../ssr/index.js';
 import { generatePaginateFunction } from '../ssr/paginate.js';
@ -37,6 +37,7 @@ class AstroBuilder {
  private routeCache: RouteCache = {};
  private manifest: ManifestData;
  private viteServer?: ViteDevServer;
+  private viteConfig?: ViteConfigWithSSR;

  constructor(config: AstroConfig, options: BuildOptions) {
    if (!config.buildOptions.site && config.buildOptions.sitemap !== false) {
@ -69,6 +70,7 @@ class AstroBuilder {
      ),
      { astroConfig: this.config, logging }
    );
+    this.viteConfig = viteConfig;
    const viteServer = await vite.createServer(viteConfig);
    this.viteServer = viteServer;
    debug(logging, 'build', timerMessage('Vite started', timer.viteStart));
--- a/packages/astro/src/core/create-vite.ts
+++ b/packages/astro/src/core/create-vite.ts
@ -31,7 +31,7 @@ const ALWAYS_NOEXTERNAL = new Set([
 ]);

 // note: ssr is still an experimental API hence the type omission
-type ViteConfigWithSSR = vite.InlineConfig & { ssr?: { external?: string[]; noExternal?: string[] } };
+export type ViteConfigWithSSR = vite.InlineConfig & { ssr?: { external?: string[]; noExternal?: string[] } };

 interface CreateViteOptions {
  astroConfig: AstroConfig;
--- a/yarn.lock
+++ b/yarn.lock