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

cat2 · Nov 23, 2021 · f165004 · f165004
1 parent df46717
commit f165004
Show file tree

Hide file tree

Showing 16 changed files with 1,612 additions and 74 deletions.
diff --git 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
diff --git 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
diff --git 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
+ }
+}
diff --git 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).
diff --git 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()]
+ }
+});
diff --git 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"
+ }
+}
diff --git a/examples/with-vite-plugin-pwa/public/favicon.ico b/examples/with-vite-plugin-pwa/public/favicon.ico
diff --git 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: /
diff --git 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"
+ }
+}
diff --git 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();
diff --git 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>
diff --git 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>
+}
diff --git a/examples/with-vite-plugin-pwa/tsconfig.json b/examples/with-vite-plugin-pwa/tsconfig.json
@@ -0,0 +1,3 @@
+{
+ "include": ["src/**/*.ts"]
+}
diff --git 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));

diff --git 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;