feat: support system proxy when fetching fonts/metadata (#82)

package.json

@@ -52,7 +52,7 @@
  "jiti": "^1.21.0",
  "magic-regexp": "^0.8.0",
  "magic-string": "^0.30.8",
- "ofetch": "^1.3.3",
+ "node-fetch-native": "^1.6.2",
  "ohash": "^1.1.3",
  "pathe": "^1.1.2",
  "sirv": "^2.0.4",
@@ -74,6 +74,7 @@
  "consola": "^3.2.3",
  "eslint": "^8.57.0",
  "execa": "^8.0.1",
+ "ofetch": "^1.3.3",
  "nitropack": "^2.9.4",
  "nuxt": "^3.11.1",
  "nuxt-fonts-devtools": "latest",
@@ -89,4 +90,4 @@
  "resolutions": {
  "@nuxt/fonts": "workspace:*"
  }
-}
+}

src/assets.ts

@@ -1,7 +1,7 @@
 import fsp from 'node:fs/promises'
 import { addDevServerHandler, useNuxt } from '@nuxt/kit'
 import { eventHandler, createError, lazyEventHandler } from 'h3'
-import { fetch } from 'ofetch'
+import { fetch } from 'node-fetch-native/proxy'
 import chalk from 'chalk'
 import { defu } from 'defu'
 import type { NitroConfig } from 'nitropack'

src/fetch.ts

@@ -0,0 +1,26 @@
+import defu from 'defu'
+import { fetch } from 'node-fetch-native/proxy'
+import { joinURL, withQuery } from 'ufo'
+
+interface Mini$FetchOptions extends RequestInit {
+ baseURL?: string
+ responseType?: 'json' | 'arrayBuffer'
+ query?: Record<string, any>
+}
+
+const mini$fetch = <T = unknown> (url: string, options?: Mini$FetchOptions) => {
+ if (options?.baseURL) {
+ url = joinURL(options.baseURL, url)
+ }
+ if (options?.query) {
+ url = withQuery(url, options.query)
+ }
+ return fetch(url, options)
+ .then(r => options?.responseType === 'json' ? r.json() : options?.responseType === 'arrayBuffer' ? r.arrayBuffer() : r.text()) as Promise<T>
+}
+
+export const $fetch = Object.assign(mini$fetch, {
+ create: (defaults?: Mini$FetchOptions) => <T = unknown> (url: string, options?: Mini$FetchOptions) => mini$fetch<T>(url, defu(options, defaults))
+})
+
+export { fetch }

src/providers/adobe.ts

@@ -1,9 +1,9 @@
-import { $fetch } from 'ofetch'
 import { hash } from 'ohash'
 
 import type { FontProvider, ResolveFontFacesOptions } from '../types'
 import { extractFontFaceData, addLocalFallbacks } from '../css/parse'
 import { cachedData } from '../cache'
+import { $fetch } from '../fetch'
 import { logger } from '../logger'
 
 interface ProviderOption {
@@ -106,7 +106,7 @@ async function getFontDetails (family: string, variants: ResolveFontFacesOptions
  styles.push(style)
  }
  if (styles.length === 0) { continue }
- const css = await fontCSSAPI(`${fonts.kits[kit]!.id}.css`)
+ const css = await fontCSSAPI<string>(`${fonts.kits[kit]!.id}.css`)
 
  // Adobe uses slugs instead of names in its CSS to define its font faces,
  // so we need to first transform names into slugs.

src/providers/bunny.ts

@@ -1,9 +1,9 @@
-import { $fetch } from 'ofetch'
 import { hash } from 'ohash'
 
 import type { FontProvider, ResolveFontFacesOptions } from '../types'
 import { extractFontFaceData, addLocalFallbacks } from '../css/parse'
 import { cachedData } from '../cache'
+import { $fetch } from '../fetch'
 import { logger } from '../logger'
 
 export default {
@@ -75,7 +75,7 @@ async function getFontDetails (family: string, variants: ResolveFontFacesOptions
 
  const resolvedVariants = weights.flatMap(w => [...styles].map(s => `${w}${s}`))
 
- const css = await fontAPI('/css', {
+ const css = await fontAPI<string>('/css', {
  query: {
  family: id + ':' + resolvedVariants.join(',')
  }

src/providers/fontshare.ts

@@ -1,9 +1,9 @@
-import { $fetch } from 'ofetch'
 import { hash } from 'ohash'
 
 import type { FontProvider, ResolveFontFacesOptions } from '../types'
 import { extractFontFaceData, addLocalFallbacks } from '../css/parse'
 import { cachedData } from '../cache'
+import { $fetch } from '../fetch'
 import { logger } from '../logger'
 
 export default {
@@ -69,6 +69,7 @@ async function initialiseFontMeta () {
  let chunk
  do {
  chunk = await fontAPI<{ fonts: FontshareFontMeta[], has_more: boolean }>('/fonts', {
+ responseType: 'json',
  query: {
  offset,
  limit: 100
@@ -105,7 +106,7 @@ async function getFontDetails (family: string, variants: ResolveFontFacesOptions
 
  if (numbers.length === 0) return []
 
- const css = await fontAPI(`/css?f[]=${font.slug + '@' + numbers.join(',')}`)
+ const css = await fontAPI<string>(`/css?f[]=${font.slug + '@' + numbers.join(',')}`)
 
  // TODO: support subsets and axes
  return addLocalFallbacks(family, extractFontFaceData(css))

src/providers/fontsource.ts

@@ -1,9 +1,9 @@
-import { $fetch } from 'ofetch'
 import { hash } from 'ohash'
 
 import type { FontProvider, NormalizedFontFaceData, ResolveFontFacesOptions } from '../types'
 import { addLocalFallbacks } from '../css/parse'
 import { cachedData } from '../cache'
+import { $fetch } from '../fetch'
 import { logger } from '../logger'
 
 export default {

src/providers/google.ts

@@ -1,9 +1,9 @@
-import { $fetch } from 'ofetch'
 import { hash } from 'ohash'
 
 import type { FontProvider, ResolveFontFacesOptions } from '../types'
 import { extractFontFaceData, addLocalFallbacks } from '../css/parse'
 import { cachedData } from '../cache'
+import { $fetch } from '../fetch'
 import { logger } from '../logger'
 
 export default {
@@ -46,7 +46,7 @@ interface FontIndexMeta {
 let fonts: FontIndexMeta[]
 
 async function fetchFontMetadata () {
- return await $fetch<{ familyMetadataList: FontIndexMeta[] }>('https://fonts.google.com/metadata/fonts')
+ return await $fetch<{ familyMetadataList: FontIndexMeta[] }>('https://fonts.google.com/metadata/fonts', { responseType: 'json' })
  .then(r => r.familyMetadataList)
 }
 
@@ -84,7 +84,7 @@ async function getFontDetails (family: string, variants: ResolveFontFacesOptions
  let css = ''
 
  for (const extension in userAgents) {
- css += await $fetch('/css2', {
+ css += await $fetch<string>('/css2', {
  baseURL: 'https://fonts.googleapis.com',
  headers: { 'user-agent': userAgents[extension as keyof typeof userAgents] },
  query: {