chore(deps) & feat: support Next's new logging style, added `PluginOp…

…tions.browserslist` (#84)
DuCanhGH · Sep 16, 2023 · 12a6542 · 12a6542
1 parent bf131ab
commit 12a6542
Show file tree

Hide file tree

Showing 44 changed files with 1,163 additions and 1,006 deletions.
diff --git a/.changeset/six-bananas-attack.md b/.changeset/six-bananas-attack.md
@@ -0,0 +1,9 @@
+---
+"@ducanh2912/next-pwa": minor
+---
+
+feat: added `PluginOptions.browserslist`
+
+- This defaults to `"chrome >= 56"`, same with Workbox's default.
+- Note that `.browserslistrc`, `package.json.browserslist`, etc. are not supported (yet), and the only way to pass the config to `next-pwa` is `PluginOptions.browserslist`, but you can read the file yourself, parse it, then pass it to `next-pwa`.
+- This allows you to configure which browsers you want to target your workers for. This tells `next-pwa` to add `PluginOptions.workboxOptions.babelPresetEnvTargets` if that option is not defined, which means that the service worker will, too, be bundled to target these browsers, but you can change that by adding the option.
diff --git a/.changeset/tall-rocks-know.md b/.changeset/tall-rocks-know.md
@@ -0,0 +1,7 @@
+---
+"@ducanh2912/next-pwa": minor
+---
+
+feat: support Next's new logging style
+
+- So Next changed its logging style again, and I'm wondering if trying to match its logging style is even a good idea.
diff --git a/docs/next.config.js b/docs/next.config.js
@@ -16,7 +16,6 @@ const withPWA = withPWAInit({
 const nextConfig = {
   output: "export",
   experimental: {
-    appDir: true,
     extensionAlias: {
       ".js": [".js", ".ts", ".tsx"],
     },

diff --git a/docs/package.json b/docs/package.json
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@ducanh2912/next-pwa": "workspace:*",
-    "@mantine/hooks": "6.0.19",
-    "@tabler/icons-react": "2.32.0",
+    "@mantine/hooks": "6.0.20",
+    "@tabler/icons-react": "2.34.0",
     "bright": "0.8.4",
     "client-only": "0.0.1",
     "contentlayer": "0.3.4",
@@ -23,33 +23,33 @@
     "react-wrap-balancer": "1.1.0",
     "server-only": "0.0.1",
     "tailwind-merge": "1.14.0",
-    "uuid": "9.0.0",
+    "uuid": "9.0.1",
     "zustand": "4.4.1"
   },
   "devDependencies": {
     "@types/extend": "3.0.1",
     "@types/hast": "3.0.0",
     "@types/mdast": "4.0.0",
-    "@types/mdx": "2.0.6",
-    "@types/node": "20.5.1",
-    "@types/react": "18.2.20",
+    "@types/mdx": "2.0.7",
+    "@types/node": "20.6.1",
+    "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
-    "@types/uuid": "9.0.2",
+    "@types/uuid": "9.0.4",
     "autoprefixer": "10.4.15",
     "extend": "3.0.2",
     "github-slugger": "2.0.0",
     "hast-util-has-property": "3.0.0",
     "hast-util-heading-rank": "3.0.0",
-    "hast-util-to-string": "2.0.0",
+    "hast-util-to-string": "3.0.0",
     "mdast-util-mdx": "3.0.0",
     "mdast-util-to-markdown": "2.1.0",
     "mdast-util-to-string": "4.0.0",
     "mdx-bundler": "9.2.1",
-    "postcss": "8.4.28",
-    "rehype-highlight": "6.0.0",
-    "rehype-sanitize": "5.0.1",
+    "postcss": "8.4.29",
+    "rehype-highlight": "7.0.0",
+    "rehype-sanitize": "6.0.0",
     "tailwindcss": "3.3.3",
-    "typescript": "5.3.0-dev.20230822",
+    "typescript": "5.3.0-dev.20230915",
     "unified": "10.1.2",
     "unist-util-is": "6.0.0",
     "unist-util-visit": "5.0.0"

diff --git a/examples/basic/app/appdir/about/Button.tsx → examples/basic/app/about/Button.tsx b/examples/basic/app/appdir/about/Button.tsx → examples/basic/app/about/Button.tsx
diff --git a/examples/basic/app/appdir/about/page.tsx → examples/basic/app/about/page.tsx b/examples/basic/app/appdir/about/page.tsx → examples/basic/app/about/page.tsx
@@ -1,12 +1,9 @@
-import Link from "next/link";
-
 import { Button } from "./Button";
 
 export default function Page() {
   return (
     <>
-      <h1>This is the basic example.</h1>
-      <Link href="/appdir">Home page</Link>
+      <h1>This is the most basic example of using next-pwa.</h1>
       <Button />
     </>
   );

diff --git a/examples/basic/app/appdir/page.tsx → examples/basic/app/page.tsx b/examples/basic/app/appdir/page.tsx → examples/basic/app/page.tsx
@@ -2,14 +2,14 @@ import type { Metadata } from "next";
 import Link from "next/link";
 
 export const metadata: Metadata = {
-  title: "Home (appDir)",
+  title: "Home",
 };
 
 export default function Page() {
   return (
     <>
       <h1>Next.js + PWA = AWESOME!</h1>
-      <Link href="/appdir/about">About page</Link>
+      <Link href="/about">About page</Link>
     </>
   );
 }
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -16,9 +16,9 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/node": "20.5.1",
-    "@types/react": "18.2.20",
+    "@types/node": "20.6.1",
+    "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
-    "typescript": "5.1.6"
+    "typescript": "5.2.2"
   }
 }
diff --git a/examples/basic/pages/api/hello.ts b/examples/basic/pages/api/hello.ts
diff --git a/examples/basic/pages/index.tsx → examples/basic/pages/pages-router/index.tsx b/examples/basic/pages/index.tsx → examples/basic/pages/pages-router/index.tsx
@@ -4,7 +4,7 @@ export default function Home() {
   return (
     <>
       <Head>
-        <title>next-pwa example | Home</title>
+        <title>next-pwa example</title>
       </Head>
       <h1>Next.js + PWA = AWESOME!</h1>
     </>

diff --git a/examples/custom-server/package.json b/examples/custom-server/package.json
@@ -13,19 +13,19 @@
     "@ducanh2912/next-pwa": "latest",
     "@fastify/compress": "6.4.0",
     "cross-env": "7.0.3",
-    "fastify": "4.21.0",
+    "fastify": "4.23.2",
     "next": "13.4.19",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@swc/core": "1.3.78",
-    "@types/node": "20.5.1",
-    "@types/react": "18.2.20",
+    "@types/node": "20.6.1",
+    "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "nodemon": "3.0.1",
     "rimraf": "5.0.1",
     "ts-node": "10.9.1",
-    "typescript": "5.1.6"
+    "typescript": "5.2.2"
   }
 }
diff --git a/examples/custom-worker/package.json b/examples/custom-worker/package.json
@@ -16,9 +16,9 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/node": "20.5.1",
-    "@types/react": "18.2.20",
+    "@types/node": "20.6.1",
+    "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
-    "typescript": "5.1.6"
+    "typescript": "5.2.2"
   }
 }
diff --git a/examples/lifecycle/app/layout.tsx b/examples/lifecycle/app/layout.tsx
@@ -0,0 +1,54 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+import { PWALifeCycle } from "../components/PWALifecycle";
+
+const APP_NAME = "next-pwa example";
+const APP_DESCRIPTION = "This is an example of using next-pwa";
+
+export const metadata: Metadata = {
+  applicationName: APP_NAME,
+  title: {
+    default: APP_NAME,
+    template: "%s - PWA App",
+  },
+  description: APP_DESCRIPTION,
+  manifest: "/manifest.json",
+  themeColor: "#FFFFFF",
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "default",
+    title: APP_NAME,
+  },
+  formatDetection: {
+    telephone: false,
+  },
+  icons: {
+    shortcut: "/favicon.ico",
+    apple: [{ url: "/icons/apple-touch-icon.png", sizes: "180x180" }],
+  },
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en" dir="ltr">
+      <head>
+        <style>{`
+            html, body, #__next {
+              height: 100%;
+            }
+            #__next {
+              margin: 0 auto;
+            }
+            h1 {
+              text-align: center;
+            }
+            `}</style>
+      </head>
+      <body>
+        <PWALifeCycle />
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/examples/lifecycle/app/page.tsx b/examples/lifecycle/app/page.tsx
@@ -0,0 +1,13 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "next-pwa example",
+};
+
+export default function Page() {
+  return (
+    <>
+      <h1>Next.js + PWA = AWESOME!!</h1>
+    </>
+  );
+}
diff --git a/examples/lifecycle/pages/index.tsx → ...les/lifecycle/components/PWALifecycle.tsx b/examples/lifecycle/pages/index.tsx → ...les/lifecycle/components/PWALifecycle.tsx
@@ -1,7 +1,7 @@
-import Head from "next/head";
+"use client";
 import { useEffect } from "react";
 
-export default function Index() {
+export function PWALifeCycle() {
   // This hook only run once in browser after the component is rendered for the first time.
   // It has same effect as the old componentDidMount lifecycle callback.
   useEffect(() => {
@@ -27,12 +27,11 @@ export default function Index() {
             "A newer version of this web app is available, reload to update?"
           )
         ) {
+          // Send a message to the waiting service worker, instructing it to activate.
+          wb.messageSkipWaiting();
           wb.addEventListener("controlling", () => {
             window.location.reload();
           });
-
-          // Send a message to the waiting service worker, instructing it to activate.
-          wb.messageSkipWaiting();
         } else {
           console.log(
             "User rejected to update SW, keeping the old version. New version will be automatically loaded when the app is opened next time."
@@ -50,17 +49,9 @@ export default function Index() {
         console.log(event);
       });
 
-      // never forget to call register as automatic registration is turned off in next.config.js
+      // Don't forget to call register as automatic registration is disabled.
       wb.register();
     }
   }, []);
-
-  return (
-    <>
-      <Head>
-        <title>next-pwa example</title>
-      </Head>
-      <h1>Next.js + PWA = AWESOME!!</h1>
-    </>
-  );
+  return <></>;
 }
diff --git a/examples/lifecycle/package.json b/examples/lifecycle/package.json
@@ -16,9 +16,9 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/node": "20.5.1",
-    "@types/react": "18.2.20",
+    "@types/node": "20.6.1",
+    "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
-    "typescript": "5.1.6"
+    "typescript": "5.2.2"
   }
 }
diff --git a/examples/lifecycle/pages/_app.tsx b/examples/lifecycle/pages/_app.tsx
@@ -1,6 +1,8 @@
 import type { AppProps } from "next/app";
 import Head from "next/head";
 
+import { PWALifeCycle } from "../components/PWALifecycle";
+
 const APP_NAME = "next-pwa example";
 const APP_DESCRIPTION = "This is an example of using next-pwa";
 
@@ -25,6 +27,7 @@ export default function App({ Component, pageProps }: AppProps) {
         <link rel="manifest" href="/manifest.json" />
         <link rel="shortcut icon" href="/favicon.ico" />
       </Head>
+      <PWALifeCycle />
       <Component {...pageProps} />
     </>
   );

diff --git a/examples/lifecycle/pages/pages-router/index.tsx b/examples/lifecycle/pages/pages-router/index.tsx
@@ -0,0 +1,12 @@
+import Head from "next/head";
+
+export default function Index() {
+  return (
+    <>
+      <Head>
+        <title>next-pwa example</title>
+      </Head>
+      <h1>Next.js + PWA = AWESOME!!</h1>
+    </>
+  );
+}
diff --git a/examples/lifecycle/tsconfig.json b/examples/lifecycle/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -14,8 +18,22 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
-    "types": ["@ducanh2912/next-pwa/workbox"]
+    "types": [
+      "@ducanh2912/next-pwa/workbox"
+    ],
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }