chore: several minor updates

Author: chrisbbreuer

Diff for: .vscode/dictionary.txt

@@ -18,6 +18,7 @@ destructurable
 dnsx
 dtsx
 entrypoints
+happydom
 heroicons
 httx
 iconify
@@ -33,6 +34,7 @@ Postcardware
 prefetch
 preinstall
 quickfix
+Registrator
 shikijs
 socio
 softprops
@@ -51,5 +53,6 @@ vidx
 vite
 vitebook
 vitejs
+vitepress
 vue-demi
 vueus

Diff for: README.md

@@ -27,7 +27,9 @@ bun install -d bunfig
 
 ## Get Started
 
-If you are building any sort of Bun project, you can use the `loadConfig` function to load your configuration.
+### Server Environment
+
+If you are building any sort of Bun project, you can use the `loadConfig` function to load your configuration from files:
 
 ```ts
 import type { Config } from 'bunfig'
@@ -41,7 +43,7 @@ interface MyLibraryConfig {
 const options: Config<MyLibraryConfig> = {
   name: 'my-app', // required
   cwd: './', // default: process.cwd()
-  defaults: { // default: {}
+  defaultConfig: { // default: {}
     port: 3000,
     host: 'localhost',
   },
@@ -55,7 +57,45 @@ console.log(resolvedConfig) // { port: 3000, host: 'localhost' }, unless a confi
 > [!TIP]
 > If your `process.cwd()` includes a `$name.config.{ts,js,mjs,cjs,json}` _(or `.$name.config.{ts,js,mjs,cjs,json}`)_ file, it will be loaded and merged with defaults, where file config file values take precedence. For minimalists, it also loads a `.$name.{ts,js,mjs,cjs,json}` and `$name.{ts,js,mjs,cjs,json}` file if present.
 
-Alternatively, you can use the `config` function to load your configuration.
+### Browser Environment
+
+For browser environments, use the `loadConfig` function from the browser-specific entry point to load your configuration from an API endpoint:
+
+```ts
+import type { Config } from 'bunfig'
+import { loadConfig } from 'bunfig/browser'
+
+interface MyLibraryConfig {
+  port: number
+  host: string
+}
+
+const options: Config<MyLibraryConfig> = {
+  name: 'my-app',
+  endpoint: '/api/config', // required for browser environment
+  defaultConfig: {
+    port: 3000,
+    host: 'localhost',
+  },
+  headers: { // optional custom headers
+    'Authorization': 'Bearer token',
+    'X-Custom-Header': 'value',
+  },
+}
+
+const resolvedConfig = await loadConfig(options)
+```
+
+In the browser:
+
+- The `endpoint` parameter is required to specify where to fetch the configuration
+- Custom headers can be provided to authenticate or customize the request
+- Default headers (`Accept` and `Content-Type`) are automatically included
+- If the fetch fails, the default configuration is used as a fallback
+
+### Alternative Usage
+
+Alternatively, you can use the `config` function to load your configuration in server environments:
 
 ```ts
 import type { Config } from 'bunfig'
@@ -69,7 +109,7 @@ interface MyAppOrLibraryConfig {
 const options: Config<MyAppOrLibraryConfig> = {
   name: 'my-app', // required to know which config file to load
   cwd: './', // default: process.cwd()
-  defaults: { // default: {}
+  defaultConfig: { // default: {}
     port: 3000,
     host: 'localhost',
   },
@@ -83,8 +123,8 @@ The config function is a wrapper around the `loadConfig` function and is useful
 - `name`: The name of the config file to load.
 - `cwd`: The current working directory to load the config file from.
 - `defaultConfig`: The default config to use if no config file is found.
-- `endpoint`: The endpoint to fetch the config from.
-- `headers`: The headers to send to the endpoint.
+
+For browser usage, see the [Browser Environment](#browser-environment) section above.
 
 ## Testing
 

Diff for: build.ts

@@ -3,12 +3,23 @@ import { dts } from 'bun-plugin-dtsx'
 
 console.log('Building...')
 
+// Build the main package
 await Bun.build({
   entrypoints: ['src/index.ts'],
   outdir: './dist',
+  target: 'bun',
+  plugins: [dts()],
+})
+
+// Build the browser version
+await Bun.build({
+  entrypoints: ['src/browser.ts'],
+  outdir: './dist/browser',
+  target: 'browser',
   plugins: [dts()],
 })
 
+// Build the CLI
 await Bun.build({
   entrypoints: ['bin/cli.ts'],
   outdir: './dist',

Diff for: bun.lock

@@ -4,6 +4,7 @@
     "": {
       "name": "bunfig",
       "devDependencies": {
+        "@happy-dom/global-registrator": "^17.1.8",
         "@iconify-json/carbon": "^1.2.7",
         "@shikijs/vitepress-twoslash": "^3.0.0",
         "@stacksjs/eslint-config": "^4.2.1-beta.1",
@@ -331,6 +332,8 @@
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.9", "", {}, "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="],
 
+    "@happy-dom/global-registrator": ["@happy-dom/global-registrator@17.1.8", "", { "dependencies": { "happy-dom": "^17.1.8" } }, "sha512-8/INgMD5gqzhaGnRbcHvQ3cYa70ZbdUTMiCQg+4Pz22vogILU2Q1spnneunMVjAtx6DBRMO8rBnDeMREVVyADQ=="],
+
     "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
 
     "@humanfs/node": ["@humanfs/node@0.16.6", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.3.0" } }, "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw=="],
@@ -967,6 +970,8 @@
 
     "gzip-size": ["gzip-size@6.0.0", "", { "dependencies": { "duplexer": "^0.1.2" } }, "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q=="],
 
+    "happy-dom": ["happy-dom@17.1.8", "", { "dependencies": { "webidl-conversions": "^7.0.0", "whatwg-mimetype": "^3.0.0" } }, "sha512-Yxbq/FG79z1rhAf/iB6YM8wO2JB/JDQBy99RiLSs+2siEAi5J05x9eW1nnASHZJbpldjJE2KuFLsLZ+AzX/IxA=="],
+
     "has-bigints": ["has-bigints@1.1.0", "", {}, "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg=="],
 
     "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],
@@ -1669,10 +1674,12 @@
 
     "vue-resize": ["vue-resize@2.0.0-alpha.1", "", { "peerDependencies": { "vue": "^3.0.0" } }, "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg=="],
 
-    "webidl-conversions": ["webidl-conversions@4.0.2", "", {}, "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="],
+    "webidl-conversions": ["webidl-conversions@7.0.0", "", {}, "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g=="],
 
     "webpack-virtual-modules": ["webpack-virtual-modules@0.6.2", "", {}, "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="],
 
+    "whatwg-mimetype": ["whatwg-mimetype@3.0.0", "", {}, "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q=="],
+
     "whatwg-url": ["whatwg-url@7.1.0", "", { "dependencies": { "lodash.sortby": "^4.7.0", "tr46": "^1.0.1", "webidl-conversions": "^4.0.2" } }, "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg=="],
 
     "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
@@ -1955,6 +1962,8 @@
 
     "vue-eslint-parser/semver": ["semver@7.6.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A=="],
 
+    "whatwg-url/webidl-conversions": ["webidl-conversions@4.0.2", "", {}, "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="],
+
     "workbox-build/pretty-bytes": ["pretty-bytes@5.6.0", "", {}, "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg=="],
 
     "workbox-build/rollup": ["rollup@2.79.2", "", { "optionalDependencies": { "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ=="],

Diff for: bunfig.toml

@@ -1,2 +1,5 @@
 [install]
 registry = { url = "https://registry.npmjs.org/", token = "$BUN_AUTH_TOKEN" }
+
+[test]
+preload = "./happydom.ts"

Diff for: happydom.ts

@@ -0,0 +1,3 @@
+import { GlobalRegistrator } from '@happy-dom/global-registrator'
+
+GlobalRegistrator.register()

Diff for: package.json

@@ -51,6 +51,7 @@
     "typecheck": "bun --bun tsc --noEmit"
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "^17.1.8",
     "@iconify-json/carbon": "^1.2.7",
     "@shikijs/vitepress-twoslash": "^3.0.0",
     "@stacksjs/eslint-config": "^4.2.1-beta.1",

Diff for: src/browser.ts

@@ -0,0 +1,61 @@
+import type { Config } from './types'
+import { deepMerge } from './utils'
+
+/**
+ * Load config in browser environment
+ *
+ * @param name - The name of the configuration
+ * @param endpoint - The API endpoint to fetch config from
+ * @param defaultConfig - The default configuration
+ * @param headers - Optional headers to include in the request
+ * @returns The merged configuration
+ */
+export async function loadConfig<T>({
+  name: _name,
+  endpoint,
+  defaultConfig,
+  headers = {
+    'Accept': 'application/json',
+    'Content-Type': 'application/json',
+  },
+}: Pick<Config<T>, 'name' | 'endpoint' | 'defaultConfig' | 'headers'>): Promise<T> {
+  if (!endpoint) {
+    console.warn('An API endpoint is required to load the client config.')
+    return defaultConfig
+  }
+
+  try {
+    const response = await fetch(endpoint, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+        ...headers,
+      },
+    })
+
+    if (!response.ok)
+      throw new Error(`HTTP error! status: ${response.status}`)
+
+    const loadedConfig = await response.json() as T
+
+    // Validate that the loaded config can be merged with the default config
+    try {
+      return deepMerge(defaultConfig, loadedConfig) as T
+    }
+    catch {
+      return defaultConfig
+    }
+  }
+  catch (error) {
+    console.error('Failed to load client config:', error)
+    return defaultConfig
+  }
+}
+
+/**
+ * Check if code is running in a browser environment
+ */
+export function isBrowser(): boolean {
+  return typeof window !== 'undefined' && typeof fetch === 'function'
+}

Diff for: src/config.ts

@@ -58,94 +58,43 @@ export async function tryLoadConfig<T>(configPath: string, defaultConfig: T): Pr
  * @param {object} options - The configuration options.
  * @param {string} options.name - The name of the configuration file.
  * @param {string} [options.cwd] - The current working directory.
- * @param {string} [options.endpoint] - The API endpoint to fetch config from in browser environments.
- * @param {string} [options.headers] - The headers to send with the request in browser environments.
  * @param {T} options.defaultConfig - The default configuration.
  * @returns {Promise<T>} The merged configuration.
  * @example ```ts
- * // Merges arrays if both configs are arrays, otherwise does object deep merge
  * await loadConfig({
  *   name: 'example',
- *   endpoint: '/api/my-custom-config/endpoint',
- *   defaultConfig: [{ foo: 'bar' }]
+ *   defaultConfig: { foo: 'bar' }
  * })
  * ```
  */
 export async function loadConfig<T>({
   name = '',
   cwd,
   defaultConfig,
-  // configDir,
-  // generatedDir,
-  endpoint,
-  headers = {
-    'Accept': 'application/json',
-    'Content-Type': 'application/json',
-  },
 }: Config<T>): Promise<T> {
-  // If running in a server environment, load the config from the file system
-  if (typeof window === 'undefined') {
-    const baseDir = cwd || process.cwd()
-    const extensions = ['.ts', '.js', '.mjs', '.cjs', '.json']
-
-    // Try loading config in order of preference
-    const configPaths = [
-      `${name}.config`,
-      `.${name}.config`,
-      name,
-      `.${name}`,
-    ]
-
-    for (const configPath of configPaths) {
-      for (const ext of extensions) {
-        const fullPath = resolve(baseDir, `${configPath}${ext}`)
-        const config = await tryLoadConfig(fullPath, defaultConfig)
-        if (config !== null)
-          return config
-      }
+  // Server environment: load the config from the file system
+  const baseDir = cwd || process.cwd()
+  const extensions = ['.ts', '.js', '.mjs', '.cjs', '.json']
+
+  // Try loading config in order of preference
+  const configPaths = [
+    `${name}.config`,
+    `.${name}.config`,
+    name,
+    `.${name}`,
+  ]
+
+  for (const configPath of configPaths) {
+    for (const ext of extensions) {
+      const fullPath = resolve(baseDir, `${configPath}${ext}`)
+      const config = await tryLoadConfig(fullPath, defaultConfig)
+      if (config !== null)
+        return config
     }
-
-    console.error('Failed to load client config from any expected location')
-
-    return defaultConfig
-  }
-
-  // Browser environment checks
-  if (!endpoint) {
-    console.warn('An API endpoint is required to load the client config.')
-
-    return defaultConfig
   }
 
-  // If running in a browser environment, load the config from an API endpoint
-  try {
-    const response = await fetch(endpoint, {
-      method: 'GET',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json',
-        ...headers,
-      },
-    })
-
-    if (!response.ok)
-      throw new Error(`HTTP error! status: ${response.status}`)
-
-    const loadedConfig = await response.json() as T
-
-    // Validate that the loaded config can be merged with the default config
-    try {
-      return deepMerge(defaultConfig, loadedConfig) as T
-    }
-    catch {
-      return defaultConfig
-    }
-  }
-  catch (error) {
-    console.error('Failed to load client config:', error)
-
-    return defaultConfig
-  }
+  console.error('Failed to load client config from any expected location')
+  return defaultConfig
 }
 
 export const defaultConfigDir: string = resolve(

Diff for: test/browser.test.ts

@@ -0,0 +1,123 @@
+import { describe, expect, it, mock, spyOn } from 'bun:test'
+import { loadConfig } from '../src/browser'
+
+describe('browser', () => {
+  it('should detect browser environment correctly', () => {
+    // Mock window to simulate browser environment
+    const originalWindow = globalThis.window
+    // @ts-expect-error - mocking window
+    globalThis.window = {}
+
+    const mockFetch = mock(() =>
+      Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve({ host: 'api-host' }),
+      }),
+    )
+    // @ts-expect-error - mocking fetch
+    globalThis.fetch = mockFetch
+
+    const defaultConfig = { port: 3000, host: 'localhost' }
+    const result = loadConfig({
+      name: 'test-app',
+      endpoint: '/api/config',
+      defaultConfig,
+    })
+
+    expect(result).resolves.toEqual({ port: 3000, host: 'api-host' })
+
+    // Restore window
+    globalThis.window = originalWindow
+  })
+
+  it('should handle missing endpoint gracefully', async () => {
+    // Mock window to simulate browser environment
+    const originalWindow = globalThis.window
+    // @ts-expect-error - mocking window
+    globalThis.window = {}
+
+    const consoleSpy = spyOn(console, 'warn')
+    const defaultConfig = { port: 3000, host: 'localhost' }
+    const result = await loadConfig({
+      name: 'test-app',
+      defaultConfig,
+    })
+
+    expect(result).toEqual(defaultConfig)
+    expect(consoleSpy).toHaveBeenCalledWith('An API endpoint is required to load the client config.')
+
+    // Restore window
+    globalThis.window = originalWindow
+    consoleSpy.mockRestore()
+  })
+
+  it('should handle custom headers correctly', async () => {
+    // Mock window to simulate browser environment
+    const originalWindow = globalThis.window
+    // @ts-expect-error - mocking window
+    globalThis.window = {}
+
+    const mockFetch = mock(() =>
+      Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve({ host: 'api-host' }),
+      }),
+    )
+    // @ts-expect-error - mocking fetch
+    globalThis.fetch = mockFetch
+
+    const defaultConfig = { port: 3000, host: 'localhost' }
+    const customHeaders = {
+      'Authorization': 'Bearer token',
+      'X-Custom-Header': 'value',
+    }
+
+    const result = await loadConfig({
+      name: 'test-app',
+      endpoint: '/api/config',
+      headers: customHeaders,
+      defaultConfig,
+    })
+
+    expect(result).toEqual({ port: 3000, host: 'api-host' })
+    expect(mockFetch).toHaveBeenCalledWith('/api/config', {
+      method: 'GET',
+      headers: {
+        ...customHeaders,
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+    })
+
+    // Restore window
+    globalThis.window = originalWindow
+  })
+
+  it('should handle invalid JSON response', async () => {
+    // Mock window to simulate browser environment
+    const originalWindow = globalThis.window
+    // @ts-expect-error - mocking window
+    globalThis.window = {}
+
+    const mockFetch = mock(() =>
+      Promise.resolve({
+        ok: true,
+        json: () => Promise.reject(new Error('Invalid JSON')),
+      }),
+    )
+    // @ts-expect-error - mocking fetch
+    globalThis.fetch = mockFetch
+
+    const defaultConfig = { port: 3000, host: 'localhost' }
+    const result = await loadConfig({
+      name: 'test-app',
+      endpoint: '/api/config',
+      defaultConfig,
+    })
+
+    expect(result).toEqual(defaultConfig)
+
+    // Restore window
+    globalThis.window = originalWindow
+  })
+})