feat(next-pwa): re-adjust workboxOptions.exclude defaults (#130)

[bump]
DuCanhGH · Jan 4, 2024 · 9ff6c29 · 9ff6c29
1 parent ad0084d
commit 9ff6c29
Show file tree

Hide file tree

Showing 28 changed files with 1,003 additions and 749 deletions.
diff --git a/.changeset/lucky-lizards-switch.md b/.changeset/lucky-lizards-switch.md
@@ -0,0 +1,7 @@
+---
+"@ducanh2912/next-pwa": minor
+---
+
+feat(next-pwa): re-adjust `workboxOptions.exclude` defaults
+
+- This was long overdue, so here we are.
diff --git a/docs/content/next-pwa/precaching.mdx b/docs/content/next-pwa/precaching.mdx
@@ -0,0 +1,59 @@
+---
+title: Precaching
+type: Docs
+---
+
+# Precaching
+
+## Default
+
+By default, this is set to `[/\/_next\/static\/.*(?<!\.p)\.woff2/, /\.map$/, /^manifest.*\.js$/]`.
+
+### Why?
+
+#### Fonts
+
+`next/font` includes all subsets out of the box. However, precaching all of them might be prove to be too heavy on the users' devices, so they have been excluded by default.
+
+#### `.map` files
+
+These files do not serve any purpose to the users. As such, the plugin does not precache them by default.
+
+#### `.manifest.*.js` files
+
+This is to make sure we don't precache, e.g., the precache manifest file, or other manifests that are commonly generated by webpack but not useful for the users.
+
+## JS files
+
+By default, all JS files are precached. However, this behaviour is not desired for larger apps. If your app fits this criterion, it is recommend that you
+manually filter out JS files that are not necessary.
+
+<Tabs>
+
+```js
+// title next.config.js
+const withPWA = require("@ducanh2912/next-pwa").default({
+  // Your other options,
+  workboxOptions: { exclude: ["/some-js-files.js"] },
+});
+
+module.exports = withPWA({
+  // Your Next.js config
+});
+```
+
+```js
+// title next.config.mjs
+import withPWAInit from "@ducanh2912/next-pwa";
+
+const withPWA = withPWAInit({
+  // Your other options,
+  workboxOptions: { exclude: ["/some-js-files.js"] },
+});
+
+export default withPWA({
+  // Your Next.js config
+});
+```
+
+</Tabs>
diff --git a/docs/package.json b/docs/package.json
@@ -3,26 +3,25 @@
   "version": "1.0.3",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --port 5175",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@ducanh2912/next-pwa": "workspace:*",
-    "@mantine/hooks": "7.3.1",
-    "@tabler/icons-react": "2.43.0",
+    "@mantine/hooks": "7.4.0",
+    "@tabler/icons-react": "2.45.0",
     "bright": "0.8.4",
     "client-only": "0.0.1",
     "contentlayer": "0.3.4",
     "highlight.js": "11.9.0",
-    "next": "14.0.4",
+    "next": "14.0.5-canary.37",
     "next-contentlayer": "0.3.4",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-wrap-balancer": "1.1.0",
+    "react": "18.3.0-canary-1d5667a12-20240102",
+    "react-dom": "18.3.0-canary-1d5667a12-20240102",
     "server-only": "0.0.1",
-    "tailwind-merge": "2.1.0",
+    "tailwind-merge": "2.2.0",
     "uuid": "9.0.1",
     "zustand": "4.4.7"
   },
@@ -31,9 +30,9 @@
     "@types/hast": "3.0.3",
     "@types/mdast": "4.0.3",
     "@types/mdx": "2.0.10",
-    "@types/node": "20.10.4",
-    "@types/react": "18.2.43",
-    "@types/react-dom": "18.2.17",
+    "@types/node": "20.10.6",
+    "@types/react": "18.2.46",
+    "@types/react-dom": "18.2.18",
     "@types/uuid": "9.0.7",
     "autoprefixer": "10.4.16",
     "extend": "3.0.2",
@@ -48,8 +47,8 @@
     "postcss": "8.4.32",
     "rehype-highlight": "7.0.0",
     "rehype-sanitize": "6.0.0",
-    "tailwindcss": "3.3.6",
-    "typescript": "5.4.0-dev.20231210",
+    "tailwindcss": "3.4.0",
+    "typescript": "5.4.0-dev.20240104",
     "unified": "10.1.2",
     "unist-util-is": "6.0.0",
     "unist-util-visit": "5.0.0"

diff --git a/docs/src/app/(home)/page.tsx b/docs/src/app/(home)/page.tsx
@@ -6,7 +6,6 @@ import { bundleMDX } from "mdx-bundler";
 import { Inter } from "next/font/google";
 import Link from "next/link";
 import { getMDXComponent } from "next-contentlayer/hooks";
-import { Balancer, Provider as BalancerProvider } from "react-wrap-balancer";
 
 import { InlineCode } from "@/components/InlineCode.js";
 import { Text } from "@/components/Text.js";
@@ -40,79 +39,75 @@ const Page = async () => {
   const RenderedCodeShowcase = getMDXComponent(compiledText.code);
 
   return (
-    <BalancerProvider>
-      <div
-        className={clsx(
-          "w-full self-stretch",
-          "bg-white text-black dark:bg-black dark:text-white",
-          inter.className
-        )}
-      >
-        <div className="flex w-full flex-col items-center justify-center gap-5 px-5 py-40">
-          <h1
-            className={clsx(
-              "my-2 text-5xl font-extrabold tracking-tight",
-              "bg-gradient-to-t from-gray-500 to-black bg-clip-text text-transparent dark:from-gray-400 dark:to-white"
-            )}
-          >
-            <Balancer>Make performant web apps with Next.js & PWA.</Balancer>
-          </h1>
-          <h2 className="my-2 text-2xl font-medium tracking-tight opacity-80">
-            <Balancer>
-              <InlineCode>next-pwa</InlineCode> enables you to create PWAs with
-              Next.js. No configuration needed, yet so configurable.
-            </Balancer>
-          </h2>
-          <Link
-            href="/docs/next-pwa/getting-started"
-            className={clsx(
-              "rounded-md border px-6 py-3 font-bold transition-colors duration-100",
-              "bg-black text-white dark:bg-white dark:text-black",
-              "hover:border-black hover:bg-white hover:text-black",
-              "hover:dark:border-white hover:dark:bg-black hover:dark:text-white",
-              "focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50"
-            )}
-          >
-            Get started
-          </Link>
-          <InlineCode>
-            npx create-next-app@latest -e
-            https://github.com/DuCanhGH/next-pwa/tree/master/examples/basic
-          </InlineCode>
-        </div>
-        <div className="w-full p-4 md:p-24">
-          <div className="grid w-full text-left lg:mb-0 lg:grid-cols-4 lg:gap-2">
-            {FEATURES_LIST.map((feature, idx) => (
-              <div
-                key={`homepage-feature-lists-${idx}`}
-                className={clsx(
-                  "rounded-lg border border-transparent px-5 py-4 transition-colors",
-                  "hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-                )}
-              >
-                <h2 className="mb-3 text-2xl font-semibold">
-                  {feature.icon} {feature.label}
-                </h2>
-                <p className="m-0 max-w-[30ch] text-sm opacity-80">
-                  {feature.description}
-                </p>
-              </div>
-            ))}
-          </div>
-        </div>
-        <div className="w-full p-4 md:p-24">
-          <RenderedCodeShowcase
-            components={{
-              ...mdxComponents,
-              CodeShowcase,
-              p: ({ ref, className, ...rest }) => (
-                <Text className={clsx("mt-6 text-xl", className)} {...rest} />
-              ),
-            }}
-          />
+    <div
+      className={clsx(
+        "w-full self-stretch",
+        "bg-white text-black dark:bg-black dark:text-white",
+        inter.className
+      )}
+    >
+      <div className="flex w-full flex-col items-center justify-center gap-5 px-5 py-40">
+        <h1
+          className={clsx(
+            "my-2 text-balance text-center text-5xl font-extrabold tracking-tight",
+            "bg-gradient-to-t from-gray-500 to-black bg-clip-text text-transparent dark:from-gray-400 dark:to-white"
+          )}
+        >
+          Make performant web apps with Next.js & PWA.
+        </h1>
+        <h2 className="my-2 text-balance text-center text-2xl font-medium tracking-tight opacity-80">
+          <InlineCode>next-pwa</InlineCode> enables you to create PWAs with
+          Next.js. No configuration needed, yet so configurable.
+        </h2>
+        <Link
+          href="/docs/next-pwa/getting-started"
+          className={clsx(
+            "rounded-md border px-6 py-3 font-bold transition-colors duration-100",
+            "bg-black text-white dark:bg-white dark:text-black",
+            "hover:border-black hover:bg-white hover:text-black",
+            "hover:dark:border-white hover:dark:bg-black hover:dark:text-white",
+            "focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50"
+          )}
+        >
+          Get started
+        </Link>
+        <InlineCode>
+          npx create-next-app@latest -e
+          https://github.com/DuCanhGH/next-pwa/tree/master/examples/basic
+        </InlineCode>
+      </div>
+      <div className="w-full p-4 md:p-24">
+        <div className="grid w-full text-left lg:mb-0 lg:grid-cols-4 lg:gap-2">
+          {FEATURES_LIST.map((feature, idx) => (
+            <div
+              key={`homepage-feature-lists-${idx}`}
+              className={clsx(
+                "rounded-lg border border-transparent px-5 py-4 transition-colors",
+                "hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+              )}
+            >
+              <h2 className="mb-3 text-2xl font-semibold">
+                {feature.icon} {feature.label}
+              </h2>
+              <p className="m-0 max-w-[30ch] text-sm opacity-80">
+                {feature.description}
+              </p>
+            </div>
+          ))}
         </div>
       </div>
-    </BalancerProvider>
+      <div className="w-full p-4 md:p-24">
+        <RenderedCodeShowcase
+          components={{
+            ...mdxComponents,
+            CodeShowcase,
+            p: ({ ref, className, ...rest }) => (
+              <Text className={clsx("mt-6 text-xl", className)} {...rest} />
+            ),
+          }}
+        />
+      </div>
+    </div>
   );
 };
 

diff --git a/docs/src/app/icon.png b/docs/src/app/icon.png
diff --git a/docs/src/app/icon.tsx b/docs/src/app/icon.tsx
diff --git a/docs/src/components/Callout.tsx b/docs/src/components/Callout.tsx
@@ -50,7 +50,7 @@ export const Callout = ({
       className={twMerge(
         clsx(
           "my-6 flex h-fit max-h-full w-full flex-row items-center gap-2 rounded-md px-3 py-2 text-base font-medium",
-          "text-black dark:text-white md:text-sm [&>p]:!text-inherit",
+          "text-black md:text-sm dark:text-white [&>p]:!text-inherit",
           {
             "dark:bg-red-1000 bg-red-100": variant === "error",
             "bg-green-150 dark:bg-lime-1000": variant === "success",

diff --git a/docs/src/components/Navbar/Link/Skeletons.tsx b/docs/src/components/Navbar/Link/Skeletons.tsx
@@ -30,7 +30,7 @@ export const NavLinkSkeletons = ({
     {Array.from({ length: skeletonsLength }, (_, idx) => (
       <div
         className={twMerge(
-          "flex animate-pulse items-center rounded-md bg-gray-300 px-3 py-2 text-base font-medium dark:bg-slate-700 md:justify-center md:text-sm",
+          "flex animate-pulse items-center rounded-md bg-gray-300 px-3 py-2 text-base font-medium md:justify-center md:text-sm dark:bg-slate-700",
           skeletonClassName
         )}
         key={`${skeletonsKeyBase}-${idx}`}

diff --git a/docs/src/components/Navbar/Link/index.tsx b/docs/src/components/Navbar/Link/index.tsx
@@ -18,7 +18,7 @@ export const NavLink = ({
     href={href}
     className={twMerge(
       clsx(
-        "transition-colors_opa flex items-center gap-2 rounded-md px-3 py-2 text-base font-medium text-black duration-100 dark:text-white md:justify-center md:text-sm",
+        "transition-colors_opa flex items-center gap-2 rounded-md px-3 py-2 text-base font-medium text-black duration-100 md:justify-center md:text-sm dark:text-white",
         isActive
           ? "bg-gray-200 dark:bg-neutral-800"
           : "hover:bg-gray-200 dark:hover:bg-neutral-800"

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.10.4",
-    "@types/react": "18.2.43",
-    "@types/react-dom": "18.2.17",
+    "@types/node": "20.10.6",
+    "@types/react": "18.2.46",
+    "@types/react-dom": "18.2.18",
     "typescript": "5.3.3"
   }
 }
diff --git a/examples/custom-server/package.json b/examples/custom-server/package.json
@@ -13,16 +13,16 @@
     "@ducanh2912/next-pwa": "latest",
     "@fastify/compress": "6.5.0",
     "cross-env": "7.0.3",
-    "fastify": "4.24.3",
+    "fastify": "4.25.2",
     "next": "14.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@swc/core": "1.3.100",
-    "@types/node": "20.10.4",
-    "@types/react": "18.2.43",
-    "@types/react-dom": "18.2.17",
+    "@swc/core": "1.3.102",
+    "@types/node": "20.10.6",
+    "@types/react": "18.2.46",
+    "@types/react-dom": "18.2.18",
     "nodemon": "3.0.2",
     "rimraf": "5.0.5",
     "ts-node": "10.9.2",