astro-sw/package/src/index.ts

/**
 * @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))
        }
      },
    },
  }
}