feat: add support for experimental provider query parameter configuration

Author: vasco-santos

src/context/config-context.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useCallback, useEffect, useState } from 'react'
-import { defaultDebug, defaultDnsJsonResolvers, defaultEnableGatewayProviders, defaultEnableRecursiveGateways, defaultEnableWebTransport, defaultEnableWss, defaultFetchTimeout, defaultGateways, defaultRouters, defaultSupportsSubdomains, getConfig, resetConfig } from '../lib/config-db.js'
+import { defaultDebug, defaultDnsJsonResolvers, defaultEnableGatewayProviders, defaultEnableProviderQueryParameter, defaultEnableRecursiveGateways, defaultEnableWebTransport, defaultEnableWss, defaultFetchTimeout, defaultGateways, defaultRouters, defaultSupportsSubdomains, getConfig, resetConfig } from '../lib/config-db.js'
 import { getUiComponentLogger } from '../lib/logger.js'
 import type { ConfigDb } from '../lib/config-db.js'
 import type { ComponentLogger } from '@libp2p/logger'
@@ -23,6 +23,7 @@ export const ConfigContext = createContext<ConfigContextType>({
   enableWebTransport: defaultEnableWebTransport,
   enableGatewayProviders: defaultEnableGatewayProviders,
   enableRecursiveGateways: defaultEnableRecursiveGateways,
+  enableProviderQueryParameter: defaultEnableProviderQueryParameter,
   debug: defaultDebug(),
   fetchTimeout: defaultFetchTimeout,
   _supportsSubdomains: defaultSupportsSubdomains,
@@ -38,6 +39,7 @@ export const ConfigProvider: React.FC<{ children: ReactElement[] | ReactElement,
   const [enableWebTransport, setEnableWebTransport] = useState(defaultEnableWebTransport)
   const [enableGatewayProviders, setEnableGatewayProviders] = useState(defaultEnableGatewayProviders)
   const [enableRecursiveGateways, setEnableRecursiveGateways] = useState(defaultEnableRecursiveGateways)
+  const [enableProviderQueryParameter, setEnableProviderQueryParameter] = useState(defaultEnableProviderQueryParameter)
   const [debug, setDebug] = useState(defaultDebug())
   const [fetchTimeout, setFetchTimeout] = useState(defaultFetchTimeout)
   const [_supportsSubdomains, setSupportsSubdomains] = useState(defaultSupportsSubdomains)
@@ -53,6 +55,7 @@ export const ConfigProvider: React.FC<{ children: ReactElement[] | ReactElement,
     setEnableWebTransport(config.enableWebTransport)
     setEnableGatewayProviders(config.enableGatewayProviders)
     setEnableRecursiveGateways(config.enableRecursiveGateways)
+    setEnableProviderQueryParameter(config.enableProviderQueryParameter)
     setDebug(config.debug)
     setFetchTimeout(config.fetchTimeout)
   }
@@ -93,6 +96,9 @@ export const ConfigProvider: React.FC<{ children: ReactElement[] | ReactElement,
       case 'enableRecursiveGateways':
         setEnableRecursiveGateways(value)
         break
+      case 'enableProviderQueryParameter':
+        setEnableProviderQueryParameter(value)
+        break
       case 'debug':
         setDebug(value)
         break
@@ -123,6 +129,7 @@ export const ConfigProvider: React.FC<{ children: ReactElement[] | ReactElement,
     enableWebTransport,
     enableGatewayProviders,
     enableRecursiveGateways,
+    enableProviderQueryParameter,
     fetchTimeout,
     debug,
     _supportsSubdomains,

src/lib/config-db.ts

@@ -11,6 +11,7 @@ export interface ConfigDbWithoutPrivateFields extends BaseDbConfig {
   enableWebTransport: boolean
   enableGatewayProviders: boolean
   enableRecursiveGateways: boolean
+  enableProviderQueryParameter: boolean
   debug: string
 
   /**
@@ -37,6 +38,7 @@ export const defaultEnableWss = true
 export const defaultEnableWebTransport = false
 export const defaultEnableGatewayProviders = true
 export const defaultSupportsSubdomains: null | boolean = null
+export const defaultEnableProviderQueryParameter = false
 
 /**
  * The default fetch timeout for the gateway, in seconds.
@@ -61,6 +63,7 @@ export async function resetConfig (logger: ComponentLogger): Promise<void> {
     await configDb.put('enableWebTransport', defaultEnableWebTransport)
     await configDb.put('enableRecursiveGateways', defaultEnableRecursiveGateways)
     await configDb.put('enableGatewayProviders', defaultEnableGatewayProviders)
+    await configDb.put('enableProviderQueryParameter', defaultEnableProviderQueryParameter)
     await configDb.put('debug', defaultDebug())
     await configDb.put('fetchTimeout', defaultFetchTimeout * 1000)
     // leave private/app-only fields as is
@@ -85,6 +88,7 @@ export async function setConfig (config: ConfigDbWithoutPrivateFields, logger: C
     await configDb.put('enableWss', config.enableWss)
     await configDb.put('enableWebTransport', config.enableWebTransport)
     await configDb.put('enableGatewayProviders', config.enableGatewayProviders)
+    await configDb.put('enableProviderQueryParameter', config.enableProviderQueryParameter)
     await configDb.put('debug', config.debug ?? defaultDebug())
     await configDb.put('fetchTimeout', config.fetchTimeout ?? (defaultFetchTimeout * 1000))
     // ignore private/app-only fields
@@ -116,6 +120,7 @@ export async function getConfig (logger: ComponentLogger): Promise<ConfigDb> {
     let enableWss
     let enableWebTransport
     let enableGatewayProviders
+    let enableProviderQueryParameter
     let fetchTimeout
     let debug = ''
     let _supportsSubdomains = defaultSupportsSubdomains
@@ -139,6 +144,7 @@ export async function getConfig (logger: ComponentLogger): Promise<ConfigDb> {
       enableWss = config.enableWss ?? defaultEnableWss
       enableWebTransport = config.enableWebTransport ?? defaultEnableWebTransport
       enableGatewayProviders = config.enableGatewayProviders ?? defaultEnableGatewayProviders
+      enableProviderQueryParameter = config.enableProviderQueryParameter ?? defaultEnableProviderQueryParameter
       fetchTimeout = config.fetchTimeout ?? (defaultFetchTimeout * 1000)
       _supportsSubdomains ??= config._supportsSubdomains
     } catch (err) {
@@ -167,6 +173,7 @@ export async function getConfig (logger: ComponentLogger): Promise<ConfigDb> {
       enableWss,
       enableWebTransport,
       enableGatewayProviders,
+      enableProviderQueryParameter,
       debug,
       fetchTimeout,
       _supportsSubdomains

src/lib/get-verified-fetch.ts

@@ -88,7 +88,6 @@ export async function getVerifiedFetch (config: ConfigDb, logger: ComponentLogge
       dns: dnsConfig
     })
   }
-
   return createVerifiedFetch(helia, { withServerTiming: true, plugins: [dirIndexHtmlPluginFactory] })
 }
 

src/pages/config.tsx

@@ -85,7 +85,7 @@ export interface ConfigPageProps extends React.HTMLProps<HTMLElement> {
 // Config Page can be loaded either as a page or as a component in the landing helper-ui page
 const ConfigPage: FunctionComponent<ConfigPageProps> = () => {
   const { gotoPage } = useContext(RouteContext)
-  const { setConfig, resetConfig, gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, fetchTimeout, _supportsSubdomains, isLoading: isConfigDataLoading } = useContext(ConfigContext)
+  const { setConfig, resetConfig, gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, enableProviderQueryParameter, fetchTimeout, _supportsSubdomains, isLoading: isConfigDataLoading } = useContext(ConfigContext)
   const [isSaving, setIsSaving] = useState(false)
   const [error, setError] = useState<Error | null>(null)
   const [resetKey, setResetKey] = useState(0)
@@ -98,7 +98,7 @@ const ConfigPage: FunctionComponent<ConfigPageProps> = () => {
     }
     // we get the iframe origin from a query parameter called 'origin', if this is loaded in an iframe
     const targetOrigin = decodeURIComponent(window.location.hash.split('@origin=')[1])
-    const config = { gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, fetchTimeout, _supportsSubdomains }
+    const config = { gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, enableProviderQueryParameter, fetchTimeout, _supportsSubdomains }
     log.trace('config-page: postMessage config to origin ', JSON.stringify(config), targetOrigin)
     /**
      * The reload page in the parent window is listening for this message, and then it passes a RELOAD_CONFIG message to the service worker
@@ -107,7 +107,7 @@ const ConfigPage: FunctionComponent<ConfigPageProps> = () => {
       targetOrigin
     })
     log.trace('config-page: RELOAD_CONFIG sent to parent window')
-  }, [gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, fetchTimeout])
+  }, [gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, enableProviderQueryParameter, fetchTimeout])
 
   useEffect(() => {
     if (!isConfigDataLoading) {
@@ -120,7 +120,7 @@ const ConfigPage: FunctionComponent<ConfigPageProps> = () => {
 
   const saveConfig = useCallback(async () => {
     try {
-      const config = { gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, fetchTimeout }
+      const config = { gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, enableProviderQueryParameter, fetchTimeout }
       setIsSaving(true)
       await storeConfig(config, uiComponentLogger)
       log.trace('config-page: sending RELOAD_CONFIG to service worker')
@@ -139,7 +139,7 @@ const ConfigPage: FunctionComponent<ConfigPageProps> = () => {
     } finally {
       setIsSaving(false)
     }
-  }, [gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, fetchTimeout])
+  }, [gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, enableProviderQueryParameter, fetchTimeout])
 
   const doResetConfig = useCallback(async () => {
     // we need to clear out the localStorage items and make sure default values are set, and that all of our inputs are updated
@@ -183,6 +183,14 @@ const ConfigPage: FunctionComponent<ConfigPageProps> = () => {
             onChange={(value) => { setConfig('enableWebTransport', value) }}
             resetKey={resetKey}
           />
+          <InputToggle
+            className='e2e-config-page-input e2e-config-page-input-enableProviderQueryParameter'
+            label='Enable WebTransport Providers'
+            description='Use WebTransport providers returned from delegated routers for direct retrieval.'
+            value={enableProviderQueryParameter}
+            onChange={(value) => { setConfig('enableProviderQueryParameter', value) }}
+            resetKey={resetKey}
+          />
           <TextInput
             className='e2e-config-page-input e2e-config-page-input-routers'
             description='A newline delimited list of delegated IPFS router URLs.'

src/sw.ts

@@ -547,6 +547,8 @@ async function fetchHandler ({ path, request, event }: FetchHandlerArg): Promise
      * @see https://github.com/ipfs/service-worker-gateway/issues/674
      */
 
+    // TODO: add config.enableProviderQueryParameter for allow
+    // config.enableProviderQueryParameter
     const response = await verifiedFetch(event.request.url, {
       signal,
       headers,

test-e2e/config-loading.test.ts

@@ -15,6 +15,7 @@ test.describe('ipfs-sw configuration', () => {
     enableWebTransport: true,
     enableRecursiveGateways: false,
     enableGatewayProviders: false,
+    enableProviderQueryParameter: false,
     fetchTimeout: 29 * 1000
   }
   test.beforeAll(async () => {

test-e2e/fixtures/locators.ts

@@ -19,6 +19,7 @@ export const getIframeLocator: GetFrameLocator = (page) => page.frameLocator('if
 export const getConfigEnableGatewayProviders: GetLocator = (page) => page.locator('.e2e-config-page-input-enableGatewayProviders')
 export const getConfigEnableWss: GetLocator = (page) => page.locator('.e2e-config-page-input-enableWss')
 export const getConfigEnableWebTransport: GetLocator = (page) => page.locator('.e2e-config-page-input-enableWebTransport')
+export const getConfigEnableProviderQueryParameter: GetLocator = (page) => page.locator('.e2e-config-page-input-enableProviderQueryParameter')
 export const getConfigRoutersInput: GetLocator = (page) => page.locator('.e2e-config-page-input-routers')
 export const getConfigEnableRecursiveGateways: GetLocator = (page) => page.locator('.e2e-config-page-input-enableRecursiveGateways')
 export const getConfigGatewaysInput: GetLocator = (page) => page.locator('.e2e-config-page-input-gateways')

test-e2e/fixtures/set-sw-config.ts

@@ -4,7 +4,7 @@
  *
  * Note that this was only tested and confirmed working for subdomain pages.
  */
-import { getConfigDebug, getConfigDnsJsonResolvers, getConfigEnableGatewayProviders, getConfigEnableRecursiveGateways, getConfigEnableWebTransport, getConfigEnableWss, getConfigFetchTimeout, getConfigGatewaysInput, getConfigGatewaysInputIframe, getConfigPage, getConfigPageSaveButton, getConfigPageSaveButtonIframe, getConfigRoutersInput, getConfigRoutersInputIframe } from './locators.js'
+import { getConfigDebug, getConfigDnsJsonResolvers, getConfigEnableGatewayProviders, getConfigEnableRecursiveGateways, getConfigEnableWebTransport, getConfigEnableWss, getConfigEnableProviderQueryParameter, getConfigFetchTimeout, getConfigGatewaysInput, getConfigGatewaysInputIframe, getConfigPage, getConfigPageSaveButton, getConfigPageSaveButtonIframe, getConfigRoutersInput, getConfigRoutersInputIframe } from './locators.js'
 import { waitForServiceWorker } from './wait-for-service-worker.js'
 import type { ConfigDb, ConfigDbWithoutPrivateFields } from '../../src/lib/config-db.js'
 import type { Page } from '@playwright/test'
@@ -23,6 +23,10 @@ export async function setConfigViaUiSubdomain ({ page, config, expectedSwScope }
     await getConfigEnableWss(page).locator('input').setChecked(config.enableWss)
   }
 
+  if (config.enableProviderQueryParameter != null) {
+    await getConfigEnableProviderQueryParameter(page).locator('input').setChecked(config.enableProviderQueryParameter)
+  }
+
   if (config.enableWebTransport != null) {
     await getConfigEnableWebTransport(page).locator('input').setChecked(config.enableWebTransport)
   }
@@ -73,6 +77,11 @@ export async function setConfigViaUi ({ page, config, expectedSwScope }: { page:
     await getConfigEnableWss(page).locator('input').setChecked(config.enableWss)
   }
 
+  if (config.enableProviderQueryParameter != null) {
+    await getConfigEnableProviderQueryParameter(page).scrollIntoViewIfNeeded()
+    await getConfigEnableProviderQueryParameter(page).locator('input').setChecked(config.enableProviderQueryParameter)
+  }
+
   if (config.enableWebTransport != null) {
     await getConfigEnableWebTransport(page).scrollIntoViewIfNeeded()
     await getConfigEnableWebTransport(page).locator('input').setChecked(config.enableWebTransport)
@@ -115,6 +124,7 @@ export async function getConfigUi ({ page, expectedSwScope }: { page: Page, expe
 
   const enableGatewayProviders = await getConfigEnableGatewayProviders(page).locator('input').isChecked()
   const enableWss = await getConfigEnableWss(page).locator('input').isChecked()
+  const enableProviderQueryParameter = await getConfigEnableProviderQueryParameter(page).locator('input').isChecked()
   const enableWebTransport = await getConfigEnableWebTransport(page).locator('input').isChecked()
   const routers = (await getConfigRoutersInput(page).locator('textarea').inputValue()).split('\n')
   const enableRecursiveGateways = await getConfigEnableRecursiveGateways(page).locator('input').isChecked()
@@ -133,6 +143,7 @@ export async function getConfigUi ({ page, expectedSwScope }: { page: Page, expe
     enableGatewayProviders,
     enableWss,
     enableWebTransport,
+    enableProviderQueryParameter,
     routers,
     enableRecursiveGateways,
     gateways,
@@ -215,6 +226,7 @@ export async function getConfig ({ page }: { page: Page }): Promise<ConfigDb> {
       routers: await get('routers'),
       dnsJsonResolvers: await get('dnsJsonResolvers'),
       enableWss: await get('enableWss'),
+      enableProviderQueryParameter: await get('enableProviderQueryParameter'),
       enableWebTransport: await get('enableWebTransport'),
       enableRecursiveGateways: await get('enableRecursiveGateways'),
       enableGatewayProviders: await get('enableGatewayProviders'),