fix: config loading (#547)

* Revert "deps: bump the react-deps group across 1 directory with 3 updates (#518)"

This reverts commit 66e0857.

* fix: config page recognition is more robust

* chore: trying to get video test passing again....

* fix: video auto-play test

* Revert "Revert "deps: bump the react-deps group across 1 directory with 3 updates (#518)""

This reverts commit 5816d84.

* chore: apply self PR suggestions

Author: SgtPooki

src/lib/is-config-page.ts

@@ -6,5 +6,5 @@
  */
 export function isConfigPage (hash: string): boolean {
   const isConfigHashPath = hash.startsWith('#/ipfs-sw-config') // needed for _redirects and IPFS hosted sw gateways
-  return isConfigHashPath
+  return isConfigHashPath && hash.endsWith('/ipfs-sw-config')
 }

src/sw.ts

@@ -103,8 +103,14 @@ let verifiedFetch: VerifiedFetch
 const timeoutAbortEventType = 'verified-fetch-timeout'
 const ONE_HOUR_IN_SECONDS = 3600
 const urlInterceptRegex = [new RegExp(`${self.location.origin}/ip(n|f)s/`)]
+let config: ConfigDb
+
+const updateConfig = async (): Promise<void> => {
+  config = await getConfig(swLogger)
+}
 const updateVerifiedFetch = async (): Promise<void> => {
-  const config = await getConfig(swLogger)
+  await updateConfig()
+
   verifiedFetch = await getVerifiedFetch(config, swLogger)
 }
 let swIdb: GenericIDB<LocalSwConfig>
@@ -197,6 +203,17 @@ async function requestRouting (event: FetchEvent, url: URL): Promise<boolean> {
       log.error('sw-config reload request, error updating verifiedFetch', err)
     }))
     return false
+  } else if (isSwConfigGETRequest(event)) {
+    log.trace('sw-config GET request')
+    event.waitUntil(new Promise<void>((resolve) => {
+      event.respondWith(new Response(JSON.stringify(config), {
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }))
+      resolve()
+    }))
+    return false
   } else if (isSwAssetRequest(event)) {
     log.trace('sw-asset request, returning cached response ', event.request.url)
     /**
@@ -280,6 +297,10 @@ function isSwConfigReloadRequest (event: FetchEvent): boolean {
   return event.request.url.includes('/#/ipfs-sw-config-reload')
 }
 
+function isSwConfigGETRequest (event: FetchEvent): boolean {
+  return event.request.url.includes('/#/ipfs-sw-config-get')
+}
+
 function isSwAssetRequest (event: FetchEvent): boolean {
   const isActualSwAsset = /^.+\/(?:ipfs-sw-).+$/.test(event.request.url)
   // if path is not set, then it's a request for index.html which we should consider a sw asset
@@ -427,7 +448,9 @@ async function fetchHandler ({ path, request, event }: FetchHandlerArg): Promise
    *
    * @see https://developer.chrome.com/docs/extensions/develop/concepts/service-workers/lifecycle
    */
-  verifiedFetch = verifiedFetch ?? await getVerifiedFetch(await getConfig(swLogger), swLogger)
+  if (verifiedFetch == null) {
+    await updateVerifiedFetch()
+  }
 
   /**
    * Note that there are existing bugs regarding service worker signal handling:

test-e2e/config-loading.test.ts

@@ -1,4 +1,4 @@
-import { testSubdomainRouting as test, expect } from './fixtures/config-test-fixtures.js'
+import { test, expect } from './fixtures/config-test-fixtures.js'
 import { getConfig, setConfig } from './fixtures/set-sw-config.js'
 import { waitForServiceWorker } from './fixtures/wait-for-service-worker.js'
 import type { ConfigDbWithoutPrivateFields } from '../src/lib/config-db.js'
@@ -52,5 +52,13 @@ test.describe('ipfs-sw configuration', () => {
     // ensure it equals the root config
     expect(subdomainConfig).toEqual(rootConfig)
     expect(subdomainConfig).toMatchObject(testConfig)
+
+    // now we know the subdomain has the right config, but does the serviceworker?
+    const serviceWorkerConfigJson = await page.evaluate(async () => {
+      const response = await fetch('/#/ipfs-sw-config-get')
+      return response.json()
+    })
+
+    expect(serviceWorkerConfigJson).toMatchObject(testConfig)
   })
 })

test-e2e/fixtures/create-kubo-node.ts

@@ -1,15 +1,22 @@
+import { logger } from '@libp2p/logger'
 import { createNode, type KuboNode } from 'ipfsd-ctl'
 import { path as kuboPath } from 'kubo'
 import { create } from 'kubo-rpc-client'
 import { kuboRepoDir } from './load-kubo-fixtures.js'
-
 export async function createKuboNode (): Promise<KuboNode> {
-  return createNode({
+  const node = await createNode({
     type: 'kubo',
     bin: kuboPath(),
     rpc: create,
     test: true,
     repo: kuboRepoDir,
     args: []
   })
+  const log = logger('kubo-node')
+
+  // log the gateway info
+  const info = await node.info()
+  log('node info %O', info)
+
+  return node
 }

test-e2e/video.test.ts

@@ -4,6 +4,7 @@ import { waitForServiceWorker } from './fixtures/wait-for-service-worker'
 import type { ConfigDbWithoutPrivateFields } from '../src/lib/config-db.js'
 
 const cid = 'bafybeie4vcqkutumw7s26ob2bwqwqi44m6lrssjmiirlhrzhs2akdqmkw4' // big buck bunny webm trimmed to 15 seconds with `ffmpeg -i bigbuckbunny.webm -ss 00:00 -t 00:15 -c:a copy -c:v copy bigbuckbunny-mini.webm`
+
 test.describe('video', () => {
   const testConfig: Partial<ConfigDbWithoutPrivateFields> = {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -14,20 +15,20 @@ test.describe('video', () => {
     enableWss: true,
     enableWebTransport: false,
     enableRecursiveGateways: true,
-    enableGatewayProviders: false
+    enableGatewayProviders: true
   }
 
   /**
    * We want to load the video fixture and ensure it starts playing.
    */
-  test('starts playing automatically', async ({ page, protocol, rootDomain }) => {
-    await page.goto(`${protocol}//${rootDomain}`)
+  test('starts playing automatically', async ({ page }) => {
     await setConfig({ page, config: testConfig })
     await waitForServiceWorker(page)
-    const response = await page.goto(`${protocol}//${rootDomain}/ipfs/${cid}`, { waitUntil: 'commit' })
+    const response = await page.goto(`http://127.0.0.1:3333/ipfs/${cid}`, { waitUntil: 'commit' })
     const start = performance.now()
 
     expect(response?.status()).toBe(200)
+    await waitForServiceWorker(page)
 
     // expect a video player
     await page.waitForSelector('video')