feat(demo): update demo to use Astro 6

demo/astro.config.mjs

@@ -3,7 +3,9 @@
 import { defineConfig } from 'astro/config'
 import node from '@astrojs/node'
 import serviceWorker from '@ayco/astro-sw'
-import { deleteOldCaches, staleWhileRevalidate } from '@ayco/astro-sw/presets'
+// import { deleteOldCaches, staleWhileRevalidate } from '@ayco/astro-sw/presets'
+
+import * as pkg from './package.json'
 
 export default defineConfig({
   output: 'static',
@@ -14,12 +16,11 @@ export default defineConfig({
   integrations: [
     serviceWorker({
       path: './src/sw.ts',
-      presets: [staleWhileRevalidate(), deleteOldCaches()],
-      customRoutes: [
-        // '/threads'
-      ],
-      excludeRoutes: ['/exclude'],
-      assetCachePrefix: 'hey',
+      assetCachePrefix: 'AstroSWTest',
+      assetCacheVersionID: pkg.version,
+      // presets: [staleWhileRevalidate(), deleteOldCaches()],
+      exclude: ['/exclude'],
+      // include: ['/components/web-component.js'],
       logAssets: true,
       esbuild: {
         minify: true,

demo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "demo",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.0.3",
   "main": "index.js",
   "scripts": {
     "start": "astro dev",
@@ -14,11 +14,11 @@
   "license": "MIT",
   "description": "",
   "devDependencies": {
-    "astro": "^5.6.1",
-    "@astrojs/node": "^9.1.3",
-    "@fastify/middie": "^9.0.3",
-    "@fastify/static": "^8.1.1",
-    "fastify": "^5.2.2",
-    "@ayco/astro-sw": "workspace:*"
+    "@astrojs/node": "^10.0.4",
+    "@ayco/astro-sw": "workspace:*",
+    "@fastify/middie": "^9.3.1",
+    "@fastify/static": "^9.0.0",
+    "astro": "^6.1.3",
+    "fastify": "^5.8.4"
   }
 }

demo/public/components/web-component.js

@@ -0,0 +1,14 @@
+function register(){
+    if ('customElements' in window)
+        window.customElements.define('web-component', WebComponent)
+}
+
+class WebComponent extends HTMLElement {
+    connectedCallback() {
+        console.log('hello')
+    }
+}
+
+register()
+
+export default WebComponent

demo/src/content/blog/building-a-cozy-web.md

@@ -1,66 +0,0 @@
----
-title: Building a Cozy Web
-description: Let us build the web we want!
-pubDate: 'Aug 14 2024'
-heroImage: '/cozy.jpg'
----
-
-> This was originally posted on [Ayo's Blog](https://ayos.blog/building-a-cozy-web).
-
-Have you ever clicked a link to an article, all hyped up to read the content, only to be slapped in the face with popups over popups of requests to subscribe and asking consent to track you with cookies?
-
-Do you sometimes wish you can have a consistent experience when opening articles... a place to save all your favorites, and possibly get helpful insights?
-
-Ah, well you're not alone. 🤣
-
-This is exactly why I started [**Cozy** 🧸](https://cozy.ayco.io/).
-
-It's a simple web page that can make any web page content-focused! 🎉
-
-It uses a library called [@extractus/article-extractor](https://www.npmjs.com/package/@extractus/article-extractor) to fetch and extract just the content.
-
-Then with [Astro](https://astro.build), we can server-side render the page so your browser only gets clean HTML!
-
-No nonsense. No headaches.
-
-The project and the road map for features are all public on my [GitHub](https://github.com/ayoayco/cozy-reader)
-
-## Cozy Features
-
-Right now, it successfully extracts the content and delivers a clean page to your browser.
-
-I'm working toward bringing the following in the coming weeks:
-1. Save favorites to a library
-2. Offline access
-3. Smart Insights about the article
-4. Easier usage (browser extensions or apps?)
-
-## Coziest Usage
-
-The most convenient way to use it right now is through what we call a browser bookmarklet.
-
-Basically you can have a button there beside your other bookmarks that will open the current page in Cozy.
-
-You can create this new bookmark titled 'Get cozy!' and put the following as value for the URL:
-
-```js
-javascript:(function(){ window.open('https://cozy.ayco.io/?url=%27 + window.location.href, %27_self%27); })();
-```
-
-This is possible on all major browsers, including Safari on iOS (where I personally use this often). Some screenshots:
-
-| Firefox | Chrome |
-| --- | --- |
-| ![Screenshot from 2023-05-13 08-31-41](https://github.com/ayoayco/cozy-reader/assets/4262489/9b296d4f-2722-483a-bbc2-431c6b2ae996) | ![Screenshot from 2023-05-12 23-32-08](https://github.com/ayoayco/cozy-reader/assets/4262489/144b74f8-3949-46b9-849c-351e4af0ac12) |
-
-## Join the Project!
-
-I'm sure this looks very simple, but I think this is the most exciting hobby project I've started yet.
-
-There's a lot that happened and a lot of problems could have been avoided if people were equipped to assess the content they find online.
-
-I think there's lots of good a simple tool could bring if it allows users to cut-through all the distractions and are presented with unbiased and accurate information.
-
-This project is a groundwork for this experience.
-
-Let's build the web we want! 🧸

demo/src/content/config.ts

@@ -1,16 +0,0 @@
-import { defineCollection, z } from 'astro:content'
-
-const blog = defineCollection({
-  type: 'content',
-  // Type-check frontmatter using a schema
-  schema: z.object({
-    title: z.string(),
-    description: z.string(),
-    // Transform string to Date object
-    pubDate: z.coerce.date(),
-    updatedDate: z.coerce.date().optional(),
-    heroImage: z.string().optional(),
-  }),
-})
-
-export const collections = { blog }

demo/src/pages/index.astro

@@ -8,7 +8,8 @@ export const prerender = false
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Hello</title>
+    <script type="module" src="components/web-component.js"></script>
   </head>
-  <body> Hello </body>
+  <body> Hello </body><web-component></web-component>
 </html>
 <!-- <Fragment set:html={content} /> -->

demo/src/sw.ts

@@ -1,57 +1,105 @@
 /**
  * Note: @ayco/astro-sw integration injects variables `__prefix`, `__version`, & `__assets`
- * -- find usage in package readme; `astro.config.mjs` integrations
+ * -- find usage in `astro.config.mjs` integrations
  * @see https://ayco.io/n/@ayco/astro-sw
  */
 const cacheName = `${__prefix ?? 'app'}-v${__version ?? '000'}`
+const forceLogging = true
+
+/**
+ * Cleans up old service worker caches by deleting any cache that doesn't match the current cache name.
+ * This ensures only the current version of the application's cache is retained.
+ * @async
+ * @function cleanOldCaches
+ * @returns {Promise<void>} A promise that resolves when old caches have been deleted
+ */
+const cleanOldCaches = async () => {
+  const allowCacheNames = [cacheName]
+  const allCaches = await caches.keys()
+  allCaches.forEach((key) => {
+    if (!allowCacheNames.includes(key)) {
+      console.info('Deleting old cache', key)
+      caches
+        .delete(key)
+        .then(() => {
+          console.info('Successfully deleted cache:', key)
+        })
+        .catch((error) => {
+          console.warn('Failed to delete old cache:', key, error)
+        })
+    }
+  })
+}
+
+/**
+ * Adds specified resources to the service worker cache.
+ * This function is used to cache static assets for offline access.
+ * @async
+ * @function addResourcesToCache
+ * @param {Array<string>} resources - An array of URLs representing the resources to be cached.
+ * @returns {Promise<void>} A promise that resolves when all resources have been successfully added to the cache.
+ */
 const addResourcesToCache = async (resources) => {
   const cache = await caches.open(cacheName)
-  console.log('adding resources to cache...', resources)
-  await cache.addAll(resources)
+  console.info('adding resources to cache...', {
+    force: !!forceLogging,
+    context: 'ayco-sw',
+    data: resources,
+  })
+  try {
+    await cache.addAll(resources)
+  } catch (error) {
+    console.error(
+      'failed to add resources to cache; make sure requests exists and that there are no duplicates',
+      error
+    )
+  }
 }
 
-console.log('test log', { hello: 'world' })
-
+/**
+ * Puts a response in the cache.
+ * @async
+ * @function putInCache
+ * @param {Request} request - The request to be cached.
+ * @param {Response} response - The response to be cached.
+ * @returns {Promise<void>} A promise that resolves when the response has been added to the cache.
+ */
 const putInCache = async (request, response) => {
   const cache = await caches.open(cacheName)
-  console.log('adding one response to cache...', request)
-  await cache.put(request, response)
+
+  if (response.ok) {
+    console.info('adding one response to cache...', request.url)
+    cache.put(request, response)
+  }
 }
 
-const cacheFirst = async ({ request, preloadResponsePromise, fallbackUrl }) => {
-  // First try to get the resource from the cache
-  const responseFromCache = await caches.match(request)
-  if (responseFromCache) {
-    return responseFromCache
-  }
+const networkFirst = async ({ request, fallbackUrl }) => {
+  const cache = await caches.open(cacheName)
 
-  // Next try to use the preloaded response, if it's there
-  // NOTE: Chrome throws errors regarding preloadResponse, see:
-  // https://bugs.chromium.org/p/chromium/issues/detail?id=1420515
-  // https://github.com/mdn/dom-examples/issues/145
-  // To avoid those errors, remove or comment out this block of preloadResponse
-  // code along with enableNavigationPreload() and the "activate" listener.
-  const preloadResponse = await preloadResponsePromise
-  if (preloadResponse) {
-    console.info('using preload response', preloadResponse)
-    putInCache(request, preloadResponse.clone())
-    return preloadResponse
-  }
-
-  // Next try to get the resource from the network
   try {
+    // Try to get the resource from the network for 5 seconds
     const responseFromNetwork = await fetch(request.clone())
-    // response may be used only once
-    // we need to save clone to put one copy in cache
-    // and serve second one
     putInCache(request, responseFromNetwork.clone())
+    console.info('using network response', responseFromNetwork.url)
     return responseFromNetwork
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
   } catch (error) {
-    const fallbackResponse = await caches.match(fallbackUrl)
-    if (fallbackResponse) {
-      return fallbackResponse
+    // Try get the resource from the cache
+    const responseFromCache = await cache.match(request)
+    if (responseFromCache) {
+      console.info('using cached response...', responseFromCache.url)
+      return responseFromCache
     }
+
+    // If fallback is provided, try to use it, otherwise return error
+    if (fallbackUrl) {
+      const fallbackResponse = await cache.match(fallbackUrl)
+      if (fallbackResponse) {
+        console.info('using fallback cached response...', fallbackResponse.url)
+        return fallbackResponse
+      }
+    }
+
     // when even the fallback response is not available,
     // there is nothing we can do, but we must always
     // return a Response object
@@ -62,30 +110,26 @@ const cacheFirst = async ({ request, preloadResponsePromise, fallbackUrl }) => {
   }
 }
 
-const enableNavigationPreload = async () => {
-  if (self.registration.navigationPreload) {
-    // Enable navigation preloads!
-    await self.registration.navigationPreload.enable()
-  }
-}
-
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 self.addEventListener('activate', (event) => {
-  console.log('activating...', event)
-  event.waitUntil(enableNavigationPreload())
+  console.info('activating service worker...')
+  cleanOldCaches()
 })
 
 self.addEventListener('install', (event) => {
-  console.log('installing...', event)
+  console.info('installing service worker...')
+  self.skipWaiting() // go straight to activate
+
   event.waitUntil(addResourcesToCache(__assets ?? []))
 })
 
 self.addEventListener('fetch', (event) => {
-  console.log('fetch happened', event.request)
+  console.info('fetch happened', { data: event })
+
   event.respondWith(
-    cacheFirst({
+    networkFirst({
       request: event.request,
-      preloadResponsePromise: event.preloadResponse,
       fallbackUrl: './',
     })
   )
-})
+})

package/src/index.ts

@@ -1,232 +0,0 @@
-/**
- * @license MIT <https://opensource.org/licenses/MIT>
- * @author Ayo Ayco <https://ayo.ayco.io>
- */
-
-import { readFile, writeFile, readdir, unlink } from 'node:fs/promises'
-import { fileURLToPath } from 'node:url'
-import { resolve, dirname, join } from 'node:path'
-import { build } from 'esbuild'
-import type { AstroServiceWorkerConfig } from './types'
-import type { AstroIntegration } from 'astro'
-
-const ASTROSW = '@ayco/astro-sw'
-
-/**
- * TODO: update JSDoc
- * Accepts configuration options with service worker path
- * and injects needed variables such as `__assets` generated by Astro
- */
-export default function serviceWorker(
-  // TODO handle options undefined
-  options?: AstroServiceWorkerConfig
-): AstroIntegration {
-  const {
-    presets,
-    assetCachePrefix = ASTROSW,
-    assetCacheVersionID = '0',
-    path: serviceWorkerPath = undefined,
-    customRoutes = [],
-    excludeRoutes = [],
-    logAssets = false,
-    esbuild = {},
-    registrationHooks = {},
-  } = options ?? {}
-
-  const {
-    installing: installingFn = () => {},
-    waiting: waitingFn = () => {},
-    active: activeFn = () => {},
-    error: errorFn = () => {},
-    unsupported: unsupportedFn = () => {},
-    afterRegistration: afterRegistrationFn = () => {},
-  } = registrationHooks
-
-  // TODO use presets
-  console.log(presets)
-
-  /**
-   * @type {Array<string>}
-   */
-  let manifestAssets: string[] = []
-
-  const registrationScript = `const registerSW = async () => {
-            if ("serviceWorker" in navigator) {
-                try {
-                    const registration = await navigator.serviceWorker.register("/sw.js", {
-                    scope: "/",
-                    });
-                    if (registration.installing) {
-                        (${installingFn.toString()})();
-                    } else if (registration.waiting) {
-                        (${waitingFn.toString()})();
-                    } else if (registration.active) {
-                        (${activeFn.toString()})();
-                    }
-
-                    (${afterRegistrationFn.toString()})();
-                } catch (error) {
-                    (${errorFn.toString()})(error);
-                }
-            } else {
-                (${unsupportedFn.toString()})();
-            }
-        }
-
-        registerSW();`
-
-  // let output = 'static'
-  const __dirname = resolve(dirname('.'))
-
-  return {
-    name: ASTROSW,
-    hooks: {
-      'astro:config:setup': async ({ injectScript, command, logger }) => {
-        if (!serviceWorkerPath || serviceWorkerPath === '') {
-          // REQUIRED OPTION IS MISSING
-          logger.error('Missing required path to service worker script')
-        }
-        // const transformedScript=await transform(registrationScript)
-
-        // output = _config.output
-        if (command === 'build') {
-          injectScript('page', registrationScript)
-        }
-      },
-      'astro:config:done': async ({ injectTypes }) => {
-        const injectedTypes = `
-declare const __assets: string[];
-declare const __version: string;
-declare const __prefix: string;`
-        injectTypes({ filename: 'caching.d.ts', content: injectedTypes })
-      },
-      'astro:build:ssr': ({ manifest }) => {
-        manifestAssets = manifest.assets
-      },
-      'astro:build:done': async ({
-        dir,
-        assets: astroAssets,
-        pages,
-        logger,
-      }) => {
-        const outfile = fileURLToPath(new URL('./sw.js', dir))
-        const swPath =
-          serviceWorkerPath && serviceWorkerPath !== ''
-            ? join(__dirname, serviceWorkerPath)
-            : undefined
-        let originalScript
-
-        const _publicFiles = (
-          (await readdir(dir, { withFileTypes: true })) ?? []
-        )
-          .filter((dirent) => dirent.isFile())
-          .map((dirent) => `/${dirent.name}`)
-
-        const _assets = Array.from(astroAssets.keys())
-          .filter((key) => !key.includes('[...slug]'))
-          .flatMap((key) => (key === '/' ? key : [key, `${key}/`]))
-
-        const _pages =
-          pages
-            .filter(({ pathname }) => pathname !== '')
-            .map(({ pathname }) => `/${pathname}`) ?? []
-
-        const _pagesWithoutEndSlash =
-          pages
-            .filter(({ pathname }) => pathname !== '')
-            .map(({ pathname }) => {
-              const lastChar = pathname.slice(-1)
-              const len = pathname.length
-              return lastChar === '/'
-                ? `/${pathname.slice(0, len - 1)}`
-                : `/${pathname}`
-            })
-            .filter((pathname) => pathname !== '') ?? []
-
-        const _excludeRoutes = [
-          ...excludeRoutes,
-          ...excludeRoutes.map((route) => `${route}/`),
-        ]
-
-        const __assets = [
-          ...new Set([
-            ...manifestAssets,
-            ..._assets,
-            ..._pages,
-            ..._pagesWithoutEndSlash,
-            ...customRoutes,
-            ..._publicFiles,
-          ]),
-        ].filter(
-          (asset) =>
-            !!asset &&
-            asset !== '' &&
-            !asset.includes('404') &&
-            !asset.includes('index.html') &&
-            !_excludeRoutes.includes(asset)
-        )
-
-        if (logAssets) {
-          logger.info(
-            `${__assets.length} assets for caching: \n  ▶ ${__assets.toString().replaceAll(',', '\n  ▶ ')}\n`
-          )
-        } else {
-          logger.info(`${__assets.length} assets for caching.`)
-        }
-
-        try {
-          logger.info(`Using service worker in path: ${swPath}`)
-          // @ts-expect-error undefined error is caught via try-catch
-          originalScript = await readFile(swPath)
-        } catch (err: unknown) {
-          logger.error(JSON.stringify(err))
-          if (!swPath) {
-            logger.error(`
-
-[${ASTROSW}]  ERR: The 'path' option is required!
-[${ASTROSW}] INFO: Please see service worker options in https://ayco.io/gh/astro-sw#readme
-`)
-          }
-        }
-
-        const assetsDeclaration = `const __assets = ${JSON.stringify(__assets)};\n`
-        const versionDeclaration = `const __version = ${JSON.stringify(assetCacheVersionID)};\n`
-        const prefixDeclaration = `const __prefix = ${JSON.stringify(assetCachePrefix)};\n`
-
-        const tempFile = `${swPath}.tmp.ts`
-
-        try {
-          await writeFile(
-            tempFile,
-            assetsDeclaration +
-              versionDeclaration +
-              prefixDeclaration +
-              originalScript,
-            { flag: 'w+' }
-          )
-        } catch (err) {
-          logger.error(JSON.stringify(err))
-        }
-
-        try {
-          await build({
-            bundle: true,
-            ...esbuild,
-            outfile,
-            platform: 'browser',
-            entryPoints: [tempFile],
-          })
-        } catch (err) {
-          logger.error(JSON.stringify(err))
-        }
-
-        // remove temp file
-        try {
-          await unlink(tempFile)
-        } catch (err) {
-          logger.error(JSON.stringify(err))
-        }
-      },
-    },
-  }
-}